init commit

resources/js/components/ui/calendar/calendar-cell.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "@/lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.CellProps = $props();
+</script>
+
+<CalendarPrimitive.Cell
+	bind:ref
+	class={cn(
+		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md",
+		className
+	)}
+	{...restProps}
+/>

resources/js/components/ui/calendar/calendar-day.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { buttonVariants } from "@/components/ui/button/index.js";
+	import { cn } from "@/lib/utils.js";
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.DayProps = $props();
+</script>
+
+<CalendarPrimitive.Day
+	bind:ref
+	class={cn(
+		buttonVariants({ variant: "ghost" }),
+		"size-8 select-none p-0 font-normal",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
+		// Selected
+		"data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary data-selected:hover:text-primary-foreground data-selected:focus:bg-primary data-selected:focus:text-primary-foreground data-selected:opacity-100 dark:data-selected:hover:bg-primary dark:data-selected:focus:bg-primary",
+		// Disabled
+		"data-disabled:text-muted-foreground data-disabled:opacity-50",
+		// Unavailable
+		"data-unavailable:text-destructive-foreground data-unavailable:line-through",
+		// Outside months
+		"data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
+		className
+	)}
+	{...restProps}
+/>

resources/js/components/ui/calendar/calendar-grid-body.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "@/lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridBodyProps = $props();
+</script>
+
+<CalendarPrimitive.GridBody bind:ref class={cn(className)} {...restProps} />

resources/js/components/ui/calendar/calendar-grid-head.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "@/lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridHeadProps = $props();
+</script>
+
+<CalendarPrimitive.GridHead bind:ref class={cn(className)} {...restProps} />

resources/js/components/ui/calendar/calendar-grid-row.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "@/lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridRowProps = $props();
+</script>
+
+<CalendarPrimitive.GridRow bind:ref class={cn("flex", className)} {...restProps} />

resources/js/components/ui/calendar/calendar-grid.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "@/lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridProps = $props();
+</script>
+
+<CalendarPrimitive.Grid
+	bind:ref
+	class={cn("w-full border-collapse space-y-1", className)}
+	{...restProps}
+/>

resources/js/components/ui/calendar/calendar-head-cell.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "@/lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeadCellProps = $props();
+</script>
+
+<CalendarPrimitive.HeadCell
+	bind:ref
+	class={cn("text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal", className)}
+	{...restProps}
+/>

resources/js/components/ui/calendar/calendar-header.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "@/lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeaderProps = $props();
+</script>
+
+<CalendarPrimitive.Header
+	bind:ref
+	class={cn("relative flex w-full items-center justify-between pt-1", className)}
+	{...restProps}
+/>

resources/js/components/ui/calendar/calendar-heading.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "@/lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeadingProps = $props();
+</script>
+
+<CalendarPrimitive.Heading bind:ref class={cn("text-sm font-medium", className)} {...restProps} />

resources/js/components/ui/calendar/calendar-months.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "@/lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

resources/js/components/ui/calendar/calendar-next-button.svelte

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

resources/js/components/ui/calendar/calendar-prev-button.svelte

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

resources/js/components/ui/calendar/calendar.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import * as Calendar from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "@/lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		placeholder = $bindable(),
+		class: className,
+		weekdayFormat = "short",
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> = $props();
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<CalendarPrimitive.Root
+	bind:value={value as never}
+	bind:ref
+	bind:placeholder
+	{weekdayFormat}
+	class={cn("p-3", className)}
+	{...restProps}
+>
+	{#snippet children({ months, weekdays })}
+		<Calendar.Header>
+			<Calendar.PrevButton />
+			<Calendar.Heading />
+			<Calendar.NextButton />
+		</Calendar.Header>
+		<Calendar.Months>
+			{#each months as month (month)}
+				<Calendar.Grid>
+					<Calendar.GridHead>
+						<Calendar.GridRow class="flex">
+							{#each weekdays as weekday (weekday)}
+								<Calendar.HeadCell>
+									{weekday.slice(0, 2)}
+								</Calendar.HeadCell>
+							{/each}
+						</Calendar.GridRow>
+					</Calendar.GridHead>
+					<Calendar.GridBody>
+						{#each month.weeks as weekDates (weekDates)}
+							<Calendar.GridRow class="mt-2 w-full">
+								{#each weekDates as date (date)}
+									<Calendar.Cell {date} month={month.value}>
+										<Calendar.Day />
+									</Calendar.Cell>
+								{/each}
+							</Calendar.GridRow>
+						{/each}
+					</Calendar.GridBody>
+				</Calendar.Grid>
+			{/each}
+		</Calendar.Months>
+	{/snippet}
+</CalendarPrimitive.Root>

resources/js/components/ui/calendar/index.ts

@@ -0,0 +1,30 @@
+import Root from "./calendar.svelte";
+import Cell from "./calendar-cell.svelte";
+import Day from "./calendar-day.svelte";
+import Grid from "./calendar-grid.svelte";
+import Header from "./calendar-header.svelte";
+import Months from "./calendar-months.svelte";
+import GridRow from "./calendar-grid-row.svelte";
+import Heading from "./calendar-heading.svelte";
+import GridBody from "./calendar-grid-body.svelte";
+import GridHead from "./calendar-grid-head.svelte";
+import HeadCell from "./calendar-head-cell.svelte";
+import NextButton from "./calendar-next-button.svelte";
+import PrevButton from "./calendar-prev-button.svelte";
+
+export {
+	Day,
+	Cell,
+	Grid,
+	Header,
+	Months,
+	GridRow,
+	Heading,
+	GridBody,
+	GridHead,
+	HeadCell,
+	NextButton,
+	PrevButton,
+	//
+	Root as Calendar,
+};