feat: better components

client/src/lib/ui/range-calendar/range-calendar-prev-button.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import ChevronLeft from "@lucide/svelte/icons/chevron-left";
+	import { buttonVariants } from "$lib/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: RangeCalendarPrimitive.PrevButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronLeft class="size-4" />
+{/snippet}
+
+<RangeCalendarPrimitive.PrevButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>