pika-ux 1.0.0-beta.0

package/src/shadcn/dropdown-menu/dropdown-menu-label.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '../utils.js';
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        inset,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+        inset?: boolean;
+    } = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="dropdown-menu-label"
+    data-inset={inset}
+    class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/src/shadcn/dropdown-menu/dropdown-menu-radio-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		...restProps
+	}: DropdownMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-radio-group"
+	{...restProps}
+/>

package/src/shadcn/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+    import CircleIcon from '$icons/lucide/circle';
+    import { cn, type WithoutChild } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, children: childrenProp, ...restProps }: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+    bind:ref
+    data-slot="dropdown-menu-radio-item"
+    class={cn(
+        "focus:bg-accent focus:text-accent-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+    )}
+    {...restProps}
+>
+    {#snippet children({ checked })}
+        <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+            {#if checked}
+                <CircleIcon class="size-2 fill-current" />
+            {/if}
+        </span>
+        {@render childrenProp?.({ checked })}
+    {/snippet}
+</DropdownMenuPrimitive.RadioItem>

package/src/shadcn/dropdown-menu/dropdown-menu-separator.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, ...restProps }: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+    bind:ref
+    data-slot="dropdown-menu-separator"
+    class={cn('bg-border -mx-1 my-1 h-px', className)}
+    {...restProps}
+/>

package/src/shadcn/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -0,0 +1,20 @@
+<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<HTMLSpanElement>> = $props();
+</script>
+
+<span
+    bind:this={ref}
+    data-slot="dropdown-menu-shortcut"
+    class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</span>

package/src/shadcn/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, ...restProps }: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+    bind:ref
+    data-slot="dropdown-menu-sub-content"
+    class={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg',
+        className
+    )}
+    {...restProps}
+/>

package/src/shadcn/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+    import ChevronRightIcon from '$icons/lucide/chevron-right';
+    import { cn } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        inset,
+        children,
+        ...restProps
+    }: DropdownMenuPrimitive.SubTriggerProps & {
+        inset?: boolean;
+    } = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+    bind:ref
+    data-slot="dropdown-menu-sub-trigger"
+    data-inset={inset}
+    class={cn(
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+    <ChevronRightIcon class="ml-auto size-4" />
+</DropdownMenuPrimitive.SubTrigger>

package/src/shadcn/dropdown-menu/dropdown-menu-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...restProps} />

package/src/shadcn/dropdown-menu/index.ts

@@ -0,0 +1,49 @@
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import Group from "./dropdown-menu-group.svelte";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import Trigger from "./dropdown-menu-trigger.svelte";
+import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
+const Sub = DropdownMenuPrimitive.Sub;
+const Root = DropdownMenuPrimitive.Root;
+
+export {
+	CheckboxItem,
+	Content,
+	Root as DropdownMenu,
+	CheckboxItem as DropdownMenuCheckboxItem,
+	Content as DropdownMenuContent,
+	Group as DropdownMenuGroup,
+	Item as DropdownMenuItem,
+	Label as DropdownMenuLabel,
+	RadioGroup as DropdownMenuRadioGroup,
+	RadioItem as DropdownMenuRadioItem,
+	Separator as DropdownMenuSeparator,
+	Shortcut as DropdownMenuShortcut,
+	Sub as DropdownMenuSub,
+	SubContent as DropdownMenuSubContent,
+	SubTrigger as DropdownMenuSubTrigger,
+	Trigger as DropdownMenuTrigger,
+	GroupHeading as DropdownMenuGroupHeading,
+	Group,
+	GroupHeading,
+	Item,
+	Label,
+	RadioGroup,
+	RadioItem,
+	Root,
+	Separator,
+	Shortcut,
+	Sub,
+	SubContent,
+	SubTrigger,
+	Trigger,
+};

package/src/shadcn/index.ts

@@ -0,0 +1,40 @@
+// shadcn UI Components
+export * from './alert';
+export * from './avatar';
+export * from './badge';
+export * from './breadcrumb';
+export * from './button';
+export * from './calendar';
+export * from './card';
+export * from './carousel';
+export * from './checkbox';
+export * from './collapsible';
+export * from './command';
+export * from './data-table';
+export * from './dialog';
+export * from './dropdown-menu';
+export * from './input';
+export * from './label';
+export * from './popover';
+export * from './radio-group';
+export * from './range-calendar';
+export * from './resizable';
+export * from './scroll-area';
+export * from './select';
+export * from './separator';
+export * from './sheet';
+export * from './sidebar';
+export * from './skeleton';
+export * from './slider';
+export * from './sonner';
+export * from './switch';
+export * from './table';
+export * from './tabs';
+export * from './textarea';
+export * from './toggle';
+export * from './toggle-group';
+export * from './tooltip';
+
+// Utilities
+export * from './utils';
+export * from './is-mobile.svelte';

package/src/shadcn/input/index.ts

@@ -0,0 +1,7 @@
+import Root from "./input.svelte";
+
+export {
+	Root,
+	//
+	Root as Input,
+};

package/src/shadcn/input/input.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+    import { cn, type WithElementRef } from '../utils.js';
+
+    type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+
+    type Props = WithElementRef<
+        Omit<HTMLInputAttributes, 'type'> &
+            ({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
+    >;
+
+    let {
+        ref = $bindable(null),
+        value = $bindable(),
+        type,
+        files = $bindable(),
+        class: className,
+        ...restProps
+    }: Props = $props();
+</script>
+
+{#if type === 'file'}
+    <input
+        bind:this={ref}
+        data-slot="input"
+        class={cn(
+            'selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+            'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+            'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+            className
+        )}
+        type="file"
+        bind:files
+        bind:value
+        {...restProps}
+    />
+{:else}
+    <input
+        bind:this={ref}
+        data-slot="input"
+        class={cn(
+            'border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+            'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+            'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+            className
+        )}
+        {type}
+        bind:value
+        {...restProps}
+    />
+{/if}

package/src/shadcn/is-mobile.svelte.ts

@@ -0,0 +1,9 @@
+import { MediaQuery } from 'svelte/reactivity';
+
+const MOBILE_BREAKPOINT = 768;
+
+export class IsMobile extends MediaQuery {
+    constructor() {
+        super(`max-width: ${MOBILE_BREAKPOINT - 1}px`);
+    }
+}

package/src/shadcn/label/index.ts

@@ -0,0 +1,7 @@
+import Root from "./label.svelte";
+
+export {
+	Root,
+	//
+	Root as Label,
+};

package/src/shadcn/label/label.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { Label as LabelPrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, ...restProps }: LabelPrimitive.RootProps = $props();
+</script>
+
+<LabelPrimitive.Root
+    bind:ref
+    data-slot="label"
+    class={cn(
+        'flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50',
+        className
+    )}
+    {...restProps}
+/>

package/src/shadcn/popover/index.ts

@@ -0,0 +1,17 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+import Content from "./popover-content.svelte";
+import Trigger from "./popover-trigger.svelte";
+const Root = PopoverPrimitive.Root;
+const Close = PopoverPrimitive.Close;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Close,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Trigger as PopoverTrigger,
+	Close as PopoverClose,
+};

package/src/shadcn/popover/popover-content.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { cn } from '../utils.js';
+    import { Popover as PopoverPrimitive } from 'bits-ui';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        sideOffset = 4,
+        align = 'center',
+        portalProps,
+        ...restProps
+    }: PopoverPrimitive.ContentProps & {
+        portalProps?: PopoverPrimitive.PortalProps;
+    } = $props();
+</script>
+
+<PopoverPrimitive.Portal {...portalProps}>
+    <PopoverPrimitive.Content
+        bind:ref
+        data-slot="popover-content"
+        {sideOffset}
+        {align}
+        class={cn(
+            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-popover-content-transform-origin) outline-hidden z-50 w-72 rounded-md border p-4 shadow-md',
+            className
+        )}
+        {...restProps}
+    />
+</PopoverPrimitive.Portal>

package/src/shadcn/popover/popover-trigger.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import { cn } from '../utils.js';
+    import { Popover as PopoverPrimitive } from 'bits-ui';
+
+    let { ref = $bindable(null), class: className, ...restProps }: PopoverPrimitive.TriggerProps = $props();
+</script>
+
+<PopoverPrimitive.Trigger bind:ref data-slot="popover-trigger" class={cn('', className)} {...restProps} />

package/src/shadcn/radio-group/index.ts

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

package/src/shadcn/radio-group/radio-group-item.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+    import CircleIcon from '$icons/lucide/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/src/shadcn/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/src/shadcn/range-calendar/index.ts

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

package/src/shadcn/range-calendar/range-calendar-cell.svelte

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

package/src/shadcn/range-calendar/range-calendar-day.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { buttonVariants } from "../button/index.js";
+	import { cn } from "../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.DayProps = $props();
+
+	export { className as class };
+</script>
+
+<RangeCalendarPrimitive.Day
+	bind:ref
+	class={cn(
+		buttonVariants({ variant: "ghost" }),
+		"size-8 p-0 font-normal data-[selected]:opacity-100",
+		// Today
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
+		// Selection Start
+		"data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground",
+		// Selection End
+		"data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground",
+		// 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",
+		// Disabled
+		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
+		// Unavailable
+		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		className
+	)}
+	{...restProps}
+/>

package/src/shadcn/range-calendar/range-calendar-grid-body.svelte

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

package/src/shadcn/range-calendar/range-calendar-grid-head.svelte

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

package/src/shadcn/range-calendar/range-calendar-grid-row.svelte

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

package/src/shadcn/range-calendar/range-calendar-grid.svelte

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

package/src/shadcn/range-calendar/range-calendar-head-cell.svelte

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

package/src/shadcn/range-calendar/range-calendar-header.svelte

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