more

package.json

@@ -41,6 +41,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@internationalized/date": "^3.5.6",
 		"bits-ui": "1.0.0-next.14",
 		"clsx": "^2.1.1",
 		"runed": "^0.15.3",

src/lib/assets/icons/index.ts

@@ -6,6 +6,7 @@ import ArrowUp from './arrow-up.svg?component';
 import Bell from './bell.svg?component';
 import Box from './box.svg?component';
 import BrandAssets from './brand-assets.svg?component';
+import Calendar from './calendar.svg?component';
 import ChartBarMiddle from './chart-bar-middle.svg?component';
 import ChartBarPeak from './chart-bar-peak.svg?component';
 import ChartPie from './chart-pie.svg?component';
@@ -88,6 +89,7 @@ export const Icons = {
 	Bell,
 	Box,
 	BrandAssets,
+	Calendar,
 	ChartBarMiddle,
 	ChartBarPeak,
 	ChartPie,

src/lib/components/ui/calendar/calendar-cell.svelte

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

src/lib/components/ui/calendar/calendar-day.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { button_variants } from '../button';
+
+	let {
+		ref = $bindable(null),
+		class: class_name,
+		...restProps
+	}: CalendarPrimitive.DayProps = $props();
+</script>
+
+<CalendarPrimitive.Day
+	class={cn(
+		button_variants({ variant: 'tertiary' }),
+		'size-9 p-0 font-normal hover:bg-transparent hover:shadow-shadow-border',
+		// Today
+		'[&[data-today]:not([data-selected])]:bg-blue-900 [&[data-today]:not([data-selected])]:text-background-100',
+		// Selected
+		'',
+		// Disabled
+		'data-[disabled]:cursor-not-allowed data-[disabled]:text-gray-700',
+		// Unavailable
+		'data-[unavailable]:text-red-800 data-[unavailable]:line-through',
+		// Outside months
+		'data-[outside-month]:pointer-events-none data-[outside-month]:text-gray-700 [&[data-outside-month][data-selected]]:bg-gray-100 [&[data-outside-month][data-selected]]:text-gray-600',
+		class_name
+	)}
+	bind:ref
+	{...restProps}
+/>

src/lib/components/ui/calendar/calendar-grid-body.svelte

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

src/lib/components/ui/calendar/calendar-grid-head.svelte

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

src/lib/components/ui/calendar/calendar-grid-row.svelte

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

src/lib/components/ui/calendar/calendar-grid.svelte

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

src/lib/components/ui/calendar/calendar-head-cell.svelte

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

src/lib/components/ui/calendar/calendar-header.svelte

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

src/lib/components/ui/calendar/calendar-heading.svelte

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

src/lib/components/ui/calendar/calendar-months.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: class_name,
+		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', class_name)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

src/lib/components/ui/calendar/calendar-next-button.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Icons } from '$lib/assets/icons';
+	import { cn } from '$lib/utils.js';
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { button_variants } from '../button';
+
+	let {
+		ref = $bindable(null),
+		class: class_name,
+		children,
+		...restProps
+	}: CalendarPrimitive.NextButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<Icons.ChevronRight class="size-4" />
+{/snippet}
+
+<CalendarPrimitive.NextButton
+	bind:ref
+	class={cn(
+		button_variants({ variant: 'secondary' }),
+		'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+		class_name
+	)}
+	{...restProps}
+	children={children || Fallback}
+/>

src/lib/components/ui/calendar/calendar-prev-button.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Icons } from '$lib/assets/icons';
+	import { cn } from '$lib/utils.js';
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { button_variants } from '../button';
+
+	let {
+		ref = $bindable(null),
+		class: class_name,
+		children,
+		...restProps
+	}: CalendarPrimitive.PrevButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<Icons.ChevronLeft class="size-4" />
+{/snippet}
+
+<CalendarPrimitive.PrevButton
+	bind:ref
+	class={cn(
+		button_variants({ variant: 'secondary' }),
+		'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+		class_name
+	)}
+	{...restProps}
+	children={children || Fallback}
+/>

src/lib/components/ui/calendar/calendar.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { Icons } from '$lib/assets/icons/index.js';
+	import * as Popover from '$lib/components/ui/popover/index.js';
+	import { cn } from '$lib/utils.js';
+	import { DateFormatter, getLocalTimeZone } from '@internationalized/date';
+	import { Calendar as CalendarPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+	import { button_variants } from '../button/index.js';
+	import * as Calendar from './index.js';
+
+	type Props = WithoutChildrenOrChild<CalendarPrimitive.RootProps>;
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		placeholder = $bindable(),
+		class: class_name,
+		weekdayFormat = 'short',
+		...restProps
+	}: Props = $props();
+
+	const df = new DateFormatter('en-US', {
+		dateStyle: 'long'
+	});
+</script>
+
+<Popover.Root>
+	<Popover.Trigger
+		class={cn(
+			button_variants({
+				variant: 'secondary',
+				class: 'w-[280px] justify-start text-left font-normal'
+			}),
+			!value && 'text-muted-foreground'
+		)}
+	>
+		<Icons.Calendar class="mr-2 size-4" />
+		<!-- TODO: This wasn't the case in the previous bits-ui -->
+		{value
+			? df.format(
+					Array.isArray(value)
+						? value[0]?.toDate(getLocalTimeZone())
+						: value.toDate(getLocalTimeZone())
+				)
+			: 'Pick a date'}
+	</Popover.Trigger>
+	<Popover.Content sideOffset={8} align="start" class="w-auto rounded-xl p-0">
+		<CalendarPrimitive.Root
+			bind:ref
+			bind:value={value as any}
+			bind:placeholder={placeholder as any}
+			{weekdayFormat}
+			class={cn('p-3', class_name)}
+			{...restProps as any}
+		>
+			{#snippet children({ months, weekdays })}
+				<Calendar.Header>
+					<Calendar.Heading />
+					<div class="grow" aria-hidden="true"></div>
+					<Calendar.PrevButton />
+					<Calendar.NextButton />
+				</Calendar.Header>
+				<Calendar.Months>
+					{#each months as month}
+						<Calendar.Grid>
+							<Calendar.GridHead>
+								<Calendar.GridRow class="flex">
+									{#each weekdays as weekday}
+										<Calendar.HeadCell>
+											{weekday.slice(0, 2)}
+										</Calendar.HeadCell>
+									{/each}
+								</Calendar.GridRow>
+							</Calendar.GridHead>
+							<Calendar.GridBody>
+								{#each month.weeks as weekDates}
+									<Calendar.GridRow class="mt-2 w-full">
+										{#each weekDates as 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>
+	</Popover.Content>
+</Popover.Root>

src/lib/components/ui/calendar/index.ts

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