@aphexcms/ui 0.1.7 → 0.1.8

package/dist/components/ui/calendar/calendar-caption.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import type Calendar from './calendar.svelte';
+	import CalendarMonthSelect from './calendar-month-select.svelte';
+	import CalendarYearSelect from './calendar-year-select.svelte';
+	import { DateFormatter, getLocalTimeZone, type DateValue } from '@internationalized/date';
+
+	let {
+		captionLayout,
+		months,
+		monthFormat,
+		years,
+		yearFormat,
+		month,
+		locale,
+		placeholder = $bindable(),
+		monthIndex = 0
+	}: {
+		captionLayout: ComponentProps<typeof Calendar>['captionLayout'];
+		months: ComponentProps<typeof CalendarMonthSelect>['months'];
+		monthFormat: ComponentProps<typeof CalendarMonthSelect>['monthFormat'];
+		years: ComponentProps<typeof CalendarYearSelect>['years'];
+		yearFormat: ComponentProps<typeof CalendarYearSelect>['yearFormat'];
+		month: DateValue;
+		placeholder: DateValue | undefined;
+		locale: string;
+		monthIndex: number;
+	} = $props();
+
+	function formatYear(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof yearFormat === 'function') return yearFormat(dateObj.getFullYear());
+		return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
+	}
+
+	function formatMonth(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof monthFormat === 'function') return monthFormat(dateObj.getMonth() + 1);
+		return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
+	}
+</script>
+
+{#snippet MonthSelect()}
+	<CalendarMonthSelect
+		{months}
+		{monthFormat}
+		value={month.month}
+		onchange={(e) => {
+			if (!placeholder) return;
+			const v = Number.parseInt(e.currentTarget.value);
+			const newPlaceholder = placeholder.set({ month: v });
+			placeholder = newPlaceholder.subtract({ months: monthIndex });
+		}}
+	/>
+{/snippet}
+
+{#snippet YearSelect()}
+	<CalendarYearSelect {years} {yearFormat} value={month.year} />
+{/snippet}
+
+{#if captionLayout === 'dropdown'}
+	{@render MonthSelect()}
+	{@render YearSelect()}
+{:else if captionLayout === 'dropdown-months'}
+	{@render MonthSelect()}
+	{#if placeholder}
+		{formatYear(placeholder)}
+	{/if}
+{:else if captionLayout === 'dropdown-years'}
+	{#if placeholder}
+		{formatMonth(placeholder)}
+	{/if}
+	{@render YearSelect()}
+{:else}
+	{formatMonth(month)} {formatYear(month)}
+{/if}

package/dist/components/ui/calendar/calendar-caption.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'svelte';
+import type Calendar from './calendar.svelte';
+import CalendarMonthSelect from './calendar-month-select.svelte';
+import CalendarYearSelect from './calendar-year-select.svelte';
+import { type DateValue } from '@internationalized/date';
+type $$ComponentProps = {
+    captionLayout: ComponentProps<typeof Calendar>['captionLayout'];
+    months: ComponentProps<typeof CalendarMonthSelect>['months'];
+    monthFormat: ComponentProps<typeof CalendarMonthSelect>['monthFormat'];
+    years: ComponentProps<typeof CalendarYearSelect>['years'];
+    yearFormat: ComponentProps<typeof CalendarYearSelect>['yearFormat'];
+    month: DateValue;
+    placeholder: DateValue | undefined;
+    locale: string;
+    monthIndex: number;
+};
+declare const CalendarCaption: import("svelte").Component<$$ComponentProps, {}, "placeholder">;
+type CalendarCaption = ReturnType<typeof CalendarCaption>;
+export default CalendarCaption;

package/dist/components/ui/calendar/calendar-cell.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.CellProps = $props();
+</script>
+
+<CalendarPrimitive.Cell
+	bind:ref
+	class={cn(
+		'size-(--cell-size) relative p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/calendar/calendar-cell.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarCell: import("svelte").Component<CalendarPrimitive.CellProps, {}, "ref">;
+type CalendarCell = ReturnType<typeof CalendarCell>;
+export default CalendarCell;

package/dist/components/ui/calendar/calendar-day.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { buttonVariants } from '../button/index.js';
+	import { cn } from '../../../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-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-normal leading-none',
+		'[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground',
+		'data-[selected]:bg-primary dark:data-[selected]:hover:bg-accent/50 data-[selected]:text-primary-foreground',
+		// Outside months
+		'[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground',
+		// Disabled
+		'data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		// Unavailable
+		'data-[unavailable]:text-muted-foreground data-[unavailable]:line-through',
+		// hover
+		'dark:hover:text-accent-foreground',
+		// focus
+		'focus:border-ring focus:ring-ring/50 focus:relative',
+		// inner spans
+		'[&>span]:text-xs [&>span]:opacity-70',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/calendar/calendar-day.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarDay: import("svelte").Component<CalendarPrimitive.DayProps, {}, "ref">;
+type CalendarDay = ReturnType<typeof CalendarDay>;
+export default CalendarDay;

package/dist/components/ui/calendar/calendar-grid-body.svelte

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

package/dist/components/ui/calendar/calendar-grid-body.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarGridBody: import("svelte").Component<CalendarPrimitive.GridBodyProps, {}, "ref">;
+type CalendarGridBody = ReturnType<typeof CalendarGridBody>;
+export default CalendarGridBody;

package/dist/components/ui/calendar/calendar-grid-head.svelte

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

package/dist/components/ui/calendar/calendar-grid-head.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarGridHead: import("svelte").Component<CalendarPrimitive.GridHeadProps, {}, "ref">;
+type CalendarGridHead = ReturnType<typeof CalendarGridHead>;
+export default CalendarGridHead;

package/dist/components/ui/calendar/calendar-grid-row.svelte

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

package/dist/components/ui/calendar/calendar-grid-row.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarGridRow: import("svelte").Component<CalendarPrimitive.GridRowProps, {}, "ref">;
+type CalendarGridRow = ReturnType<typeof CalendarGridRow>;
+export default CalendarGridRow;

package/dist/components/ui/calendar/calendar-grid.svelte

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

package/dist/components/ui/calendar/calendar-grid.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarGrid: import("svelte").Component<CalendarPrimitive.GridProps, {}, "ref">;
+type CalendarGrid = ReturnType<typeof CalendarGrid>;
+export default CalendarGrid;

package/dist/components/ui/calendar/calendar-head-cell.svelte

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

package/dist/components/ui/calendar/calendar-head-cell.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarHeadCell: import("svelte").Component<CalendarPrimitive.HeadCellProps, {}, "ref">;
+type CalendarHeadCell = ReturnType<typeof CalendarHeadCell>;
+export default CalendarHeadCell;

package/dist/components/ui/calendar/calendar-header.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeaderProps = $props();
+</script>
+
+<CalendarPrimitive.Header
+	bind:ref
+	class={cn(
+		'h-(--cell-size) flex w-full items-center justify-center gap-1.5 text-sm font-medium',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/calendar/calendar-header.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarHeader: import("svelte").Component<CalendarPrimitive.HeaderProps, {}, "ref">;
+type CalendarHeader = ReturnType<typeof CalendarHeader>;
+export default CalendarHeader;

package/dist/components/ui/calendar/calendar-heading.svelte

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

package/dist/components/ui/calendar/calendar-heading.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarHeading: import("svelte").Component<CalendarPrimitive.HeadingProps, {}, "ref">;
+type CalendarHeading = ReturnType<typeof CalendarHeading>;
+export default CalendarHeading;

package/dist/components/ui/calendar/calendar-month-select.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		onchange,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.MonthSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		'has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border',
+		className
+	)}
+>
+	<CalendarPrimitive.MonthSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+		{#snippet child({ props, monthItems, selectedMonthItem })}
+			<select {...props} {value} {onchange}>
+				{#each monthItems as monthItem (monthItem.value)}
+					<option
+						value={monthItem.value}
+						selected={value !== undefined
+							? monthItem.value === value
+							: monthItem.value === selectedMonthItem.value}
+					>
+						{monthItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5"
+				aria-hidden="true"
+			>
+				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
+				<ChevronDownIcon class="size-4" />
+			</span>
+		{/snippet}
+	</CalendarPrimitive.MonthSelect>
+</span>

package/dist/components/ui/calendar/calendar-month-select.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarMonthSelect: import("svelte").Component<Omit<Omit<CalendarPrimitive.MonthSelectProps, "child">, "children">, {}, "ref">;
+type CalendarMonthSelect = ReturnType<typeof CalendarMonthSelect>;
+export default CalendarMonthSelect;

package/dist/components/ui/calendar/calendar-month.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { type WithElementRef, cn } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div {...restProps} bind:this={ref} class={cn('flex flex-col', className)}>
+	{@render children?.()}
+</div>

package/dist/components/ui/calendar/calendar-month.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const CalendarMonth: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type CalendarMonth = ReturnType<typeof CalendarMonth>;
+export default CalendarMonth;

package/dist/components/ui/calendar/calendar-months.svelte

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

package/dist/components/ui/calendar/calendar-months.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const CalendarMonths: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CalendarMonths = ReturnType<typeof CalendarMonths>;
+export default CalendarMonths;

package/dist/components/ui/calendar/calendar-nav.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav
+	{...restProps}
+	bind:this={ref}
+	class={cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', className)}
+>
+	{@render children?.()}
+</nav>

package/dist/components/ui/calendar/calendar-nav.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const CalendarNav: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type CalendarNav = ReturnType<typeof CalendarNav>;
+export default CalendarNav;

package/dist/components/ui/calendar/calendar-next-button.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { buttonVariants, type ButtonVariant } from '../button/index.js';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = 'ghost',
+		...restProps
+	}: CalendarPrimitive.NextButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronRightIcon class="size-4" />
+{/snippet}
+
+<CalendarPrimitive.NextButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant }),
+		'size-(--cell-size) select-none bg-transparent p-0 disabled:opacity-50 rtl:rotate-180',
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>

package/dist/components/ui/calendar/calendar-next-button.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+import { type ButtonVariant } from '../button/index.js';
+type $$ComponentProps = CalendarPrimitive.NextButtonProps & {
+    variant?: ButtonVariant;
+};
+declare const CalendarNextButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type CalendarNextButton = ReturnType<typeof CalendarNextButton>;
+export default CalendarNextButton;

package/dist/components/ui/calendar/calendar-prev-button.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+	import { buttonVariants, type ButtonVariant } from '../button/index.js';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = 'ghost',
+		...restProps
+	}: CalendarPrimitive.PrevButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronLeftIcon class="size-4" />
+{/snippet}
+
+<CalendarPrimitive.PrevButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant }),
+		'size-(--cell-size) select-none bg-transparent p-0 disabled:opacity-50 rtl:rotate-180',
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>

package/dist/components/ui/calendar/calendar-prev-button.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+import { type ButtonVariant } from '../button/index.js';
+type $$ComponentProps = CalendarPrimitive.PrevButtonProps & {
+    variant?: ButtonVariant;
+};
+declare const CalendarPrevButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type CalendarPrevButton = ReturnType<typeof CalendarPrevButton>;
+export default CalendarPrevButton;

package/dist/components/ui/calendar/calendar-year-select.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.YearSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		'has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border',
+		className
+	)}
+>
+	<CalendarPrimitive.YearSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+		{#snippet child({ props, yearItems, selectedYearItem })}
+			<select {...props} {value}>
+				{#each yearItems as yearItem (yearItem.value)}
+					<option
+						value={yearItem.value}
+						selected={value !== undefined
+							? yearItem.value === value
+							: yearItem.value === selectedYearItem.value}
+					>
+						{yearItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5"
+				aria-hidden="true"
+			>
+				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
+				<ChevronDownIcon class="size-4" />
+			</span>
+		{/snippet}
+	</CalendarPrimitive.YearSelect>
+</span>

package/dist/components/ui/calendar/calendar-year-select.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+declare const CalendarYearSelect: import("svelte").Component<Omit<Omit<CalendarPrimitive.YearSelectProps, "child">, "children">, {}, "ref">;
+type CalendarYearSelect = ReturnType<typeof CalendarYearSelect>;
+export default CalendarYearSelect;

package/dist/components/ui/calendar/calendar.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from 'bits-ui';
+	import * as Calendar from './index.js';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+	import type { ButtonVariant } from '../button/button.svelte';
+	import { isEqualMonth, type DateValue } from '@internationalized/date';
+	import type { Snippet } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		placeholder = $bindable(),
+		class: className,
+		weekdayFormat = 'short',
+		buttonVariant = 'ghost',
+		captionLayout = 'label',
+		locale = 'en-US',
+		months: monthsProp,
+		years,
+		monthFormat: monthFormatProp,
+		yearFormat = 'numeric',
+		day,
+		disableDaysOutsideMonth = false,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+		buttonVariant?: ButtonVariant;
+		captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
+		months?: CalendarPrimitive.MonthSelectProps['months'];
+		years?: CalendarPrimitive.YearSelectProps['years'];
+		monthFormat?: CalendarPrimitive.MonthSelectProps['monthFormat'];
+		yearFormat?: CalendarPrimitive.YearSelectProps['yearFormat'];
+		day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
+	} = $props();
+
+	const monthFormat = $derived.by(() => {
+		if (monthFormatProp) return monthFormatProp;
+		if (captionLayout.startsWith('dropdown')) return 'short';
+		return 'long';
+	});
+</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}
+	{disableDaysOutsideMonth}
+	class={cn(
+		'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+		className
+	)}
+	{locale}
+	{monthFormat}
+	{yearFormat}
+	{...restProps}
+>
+	{#snippet children({ months, weekdays })}
+		<Calendar.Months>
+			<Calendar.Nav>
+				<Calendar.PrevButton variant={buttonVariant} />
+				<Calendar.NextButton variant={buttonVariant} />
+			</Calendar.Nav>
+			{#each months as month, monthIndex (month)}
+				<Calendar.Month>
+					<Calendar.Header>
+						<Calendar.Caption
+							{captionLayout}
+							months={monthsProp}
+							{monthFormat}
+							{years}
+							{yearFormat}
+							month={month.value}
+							bind:placeholder
+							{locale}
+							{monthIndex}
+						/>
+					</Calendar.Header>
+					<Calendar.Grid>
+						<Calendar.GridHead>
+							<Calendar.GridRow class="select-none">
+								{#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}>
+											{#if day}
+												{@render day({
+													day: date,
+													outsideMonth: !isEqualMonth(date, month.value)
+												})}
+											{:else}
+												<Calendar.Day />
+											{/if}
+										</Calendar.Cell>
+									{/each}
+								</Calendar.GridRow>
+							{/each}
+						</Calendar.GridBody>
+					</Calendar.Grid>
+				</Calendar.Month>
+			{/each}
+		</Calendar.Months>
+	{/snippet}
+</CalendarPrimitive.Root>

package/dist/components/ui/calendar/calendar.svelte.d.ts

@@ -0,0 +1,21 @@
+import { Calendar as CalendarPrimitive } from 'bits-ui';
+import * as Calendar from './index.js';
+import { type WithoutChildrenOrChild } from '../../../utils.js';
+import type { ButtonVariant } from '../button/button.svelte';
+import { type DateValue } from '@internationalized/date';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+    buttonVariant?: ButtonVariant;
+    captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
+    months?: CalendarPrimitive.MonthSelectProps['months'];
+    years?: CalendarPrimitive.YearSelectProps['years'];
+    monthFormat?: CalendarPrimitive.MonthSelectProps['monthFormat'];
+    yearFormat?: CalendarPrimitive.YearSelectProps['yearFormat'];
+    day?: Snippet<[{
+        day: DateValue;
+        outsideMonth: boolean;
+    }]>;
+};
+declare const Calendar: import("svelte").Component<$$ComponentProps, {}, "placeholder" | "ref" | "value">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/components/ui/calendar/index.d.ts

@@ -0,0 +1,19 @@
+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';
+import MonthSelect from './calendar-month-select.svelte';
+import YearSelect from './calendar-year-select.svelte';
+import Month from './calendar-month.svelte';
+import Nav from './calendar-nav.svelte';
+import Caption from './calendar-caption.svelte';
+export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, Nav, Month, YearSelect, MonthSelect, Caption, Root as Calendar };

package/dist/components/ui/calendar/index.js

@@ -0,0 +1,21 @@
+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';
+import MonthSelect from './calendar-month-select.svelte';
+import YearSelect from './calendar-year-select.svelte';
+import Month from './calendar-month.svelte';
+import Nav from './calendar-nav.svelte';
+import Caption from './calendar-caption.svelte';
+export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, Nav, Month, YearSelect, MonthSelect, Caption, 
+//
+Root as Calendar };

package/dist/components/ui/checkbox/checkbox.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive } from "bits-ui";
-	import CheckIcon from "@lucide/svelte/icons/check";
-	import MinusIcon from "@lucide/svelte/icons/minus";
-	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		'border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}
 	bind:checked

package/dist/components/ui/checkbox/checkbox.svelte.d.ts

@@ -1,4 +1,4 @@
-import { Checkbox as CheckboxPrimitive } from "bits-ui";
+import { Checkbox as CheckboxPrimitive } from 'bits-ui';
 declare const Checkbox: import("svelte").Component<Omit<Omit<CheckboxPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/ui/checkbox/index.d.ts

@@ -1,2 +1,2 @@
-import Root from "./checkbox.svelte";
-export { Root, Root as Checkbox, };
+import Root from './checkbox.svelte';
+export { Root, Root as Checkbox };

package/dist/components/ui/checkbox/index.js

@@ -1,4 +1,4 @@
-import Root from "./checkbox.svelte";
+import Root from './checkbox.svelte';
 export { Root, 
 //
-Root as Checkbox, };
+Root as Checkbox };

package/dist/components/ui/radio-group/index.d.ts

@@ -0,0 +1,3 @@
+import Root from './radio-group.svelte';
+import Item from './radio-group-item.svelte';
+export { Root, Item, Root as RadioGroup, Item as RadioGroupItem };

package/dist/components/ui/radio-group/index.js

@@ -0,0 +1,5 @@
+import Root from './radio-group.svelte';
+import Item from './radio-group-item.svelte';
+export { Root, Item, 
+//
+Root as RadioGroup, Item as RadioGroupItem };

package/dist/components/ui/radio-group/radio-group-item.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+	import CircleIcon from '@lucide/svelte/icons/circle';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<RadioGroupPrimitive.ItemProps> = $props();
+</script>
+
+<RadioGroupPrimitive.Item
+	bind:ref
+	data-slot="radio-group-item"
+	class={cn(
+		'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 shadow-xs aspect-square size-4 shrink-0 rounded-full border outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<div data-slot="radio-group-indicator" class="relative flex items-center justify-center">
+			{#if checked}
+				<CircleIcon
+					class="fill-primary absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2"
+				/>
+			{/if}
+		</div>
+	{/snippet}
+</RadioGroupPrimitive.Item>

package/dist/components/ui/radio-group/radio-group-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+declare const RadioGroupItem: import("svelte").Component<Omit<Omit<RadioGroupPrimitive.ItemProps, "child">, "children">, {}, "ref">;
+type RadioGroupItem = ReturnType<typeof RadioGroupItem>;
+export default RadioGroupItem;

package/dist/components/ui/radio-group/radio-group.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(''),
+		...restProps
+	}: RadioGroupPrimitive.RootProps = $props();
+</script>
+
+<RadioGroupPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="radio-group"
+	class={cn('grid gap-3', className)}
+	{...restProps}
+/>

package/dist/components/ui/radio-group/radio-group.svelte.d.ts

@@ -0,0 +1,4 @@
+import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+declare const RadioGroup: import("svelte").Component<RadioGroupPrimitive.RootProps, {}, "ref" | "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/components/ui/switch/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './switch.svelte';
+export { Root, Root as Switch };

package/dist/components/ui/switch/index.js

@@ -0,0 +1,4 @@
+import Root from './switch.svelte';
+export { Root, 
+//
+Root as Switch };

package/dist/components/ui/switch/switch.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		checked = $bindable(false),
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	class={cn(
+		'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 shadow-xs peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
+		class={cn(
+			'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
+		)}
+	/>
+</SwitchPrimitive.Root>

package/dist/components/ui/switch/switch.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Switch as SwitchPrimitive } from 'bits-ui';
+declare const Switch: import("svelte").Component<Omit<Omit<SwitchPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aphexcms/ui",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Shared UI components for Aphex CMS (shadcn-svelte)",
   "type": "module",
   "exports": {
@@ -35,6 +35,11 @@
       "svelte": "./dist/components/ui/button/index.js",
       "default": "./dist/components/ui/button/index.js"
     },
+    "./shadcn/calendar": {
+      "types": "./dist/components/ui/calendar/index.d.ts",
+      "svelte": "./dist/components/ui/calendar/index.js",
+      "default": "./dist/components/ui/calendar/index.js"
+    },
     "./shadcn/card": {
       "types": "./dist/components/ui/card/index.d.ts",
       "svelte": "./dist/components/ui/card/index.js",
@@ -80,6 +85,11 @@
       "svelte": "./dist/components/ui/popover/index.js",
       "default": "./dist/components/ui/popover/index.js"
     },
+    "./shadcn/radio-group": {
+      "types": "./dist/components/ui/radio-group/index.d.ts",
+      "svelte": "./dist/components/ui/radio-group/index.js",
+      "default": "./dist/components/ui/radio-group/index.js"
+    },
     "./shadcn/select": {
       "types": "./dist/components/ui/select/index.d.ts",
       "svelte": "./dist/components/ui/select/index.js",
@@ -105,6 +115,11 @@
       "svelte": "./dist/components/ui/skeleton/index.js",
       "default": "./dist/components/ui/skeleton/index.js"
     },
+    "./shadcn/switch": {
+      "types": "./dist/components/ui/switch/index.d.ts",
+      "svelte": "./dist/components/ui/switch/index.js",
+      "default": "./dist/components/ui/switch/index.js"
+    },
     "./shadcn/tabs": {
       "types": "./dist/components/ui/tabs/index.d.ts",
       "svelte": "./dist/components/ui/tabs/index.js",