pika-ux 1.0.0-beta.0

package/src/shadcn/range-calendar/range-calendar-heading.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.HeadingProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Heading
+	bind:ref
+	class={cn("text-sm font-medium", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../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>

package/src/shadcn/range-calendar/range-calendar-next-button.svelte

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

package/src/shadcn/range-calendar/range-calendar-prev-button.svelte

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

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import * as RangeCalendar from "./index.js";
+	import { cn } from "../utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		placeholder = $bindable(),
+		class: className,
+		weekdayFormat = "short",
+		...restProps
+	}: WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> = $props();
+</script>
+
+<RangeCalendarPrimitive.Root
+	bind:ref
+	bind:value
+	bind:placeholder
+	{weekdayFormat}
+	class={cn("p-3", className)}
+	{...restProps}
+>
+	{#snippet children({ months, weekdays })}
+		<RangeCalendar.Header>
+			<RangeCalendar.PrevButton />
+			<RangeCalendar.Heading />
+			<RangeCalendar.NextButton />
+		</RangeCalendar.Header>
+		<RangeCalendar.Months>
+			{#each months as month (month)}
+				<RangeCalendar.Grid>
+					<RangeCalendar.GridHead>
+						<RangeCalendar.GridRow class="flex">
+							{#each weekdays as weekday (weekday)}
+								<RangeCalendar.HeadCell>
+									{weekday.slice(0, 2)}
+								</RangeCalendar.HeadCell>
+							{/each}
+						</RangeCalendar.GridRow>
+					</RangeCalendar.GridHead>
+					<RangeCalendar.GridBody>
+						{#each month.weeks as weekDates (weekDates)}
+							<RangeCalendar.GridRow class="mt-2 w-full">
+								{#each weekDates as date (date)}
+									<RangeCalendar.Cell {date} month={month.value}>
+										<RangeCalendar.Day />
+									</RangeCalendar.Cell>
+								{/each}
+							</RangeCalendar.GridRow>
+						{/each}
+					</RangeCalendar.GridBody>
+				</RangeCalendar.Grid>
+			{/each}
+		</RangeCalendar.Months>
+	{/snippet}
+</RangeCalendarPrimitive.Root>

package/src/shadcn/resizable/index.ts

@@ -0,0 +1,13 @@
+import { Pane } from "paneforge";
+import Handle from "./resizable-handle.svelte";
+import PaneGroup from "./resizable-pane-group.svelte";
+
+export {
+	PaneGroup,
+	Pane,
+	Handle,
+	//
+	PaneGroup as ResizablePaneGroup,
+	Pane as ResizablePane,
+	Handle as ResizableHandle,
+};

package/src/shadcn/resizable/resizable-handle.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import GripVertical from '$icons/lucide/grip-vertical';
+    import * as ResizablePrimitive from 'paneforge';
+    import type { WithoutChildrenOrChild } from 'bits-ui';
+    import { cn } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        withHandle = false,
+        ...restProps
+    }: WithoutChildrenOrChild<ResizablePrimitive.PaneResizerProps> & {
+        withHandle?: boolean;
+    } = $props();
+</script>
+
+<ResizablePrimitive.PaneResizer
+    bind:ref
+    class={cn(
+        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:-translate-y-1/2 data-[direction=vertical]:after:translate-x-0 [&[data-direction=vertical]>div]:rotate-90',
+        className
+    )}
+    {...restProps}
+>
+    {#if withHandle}
+        <div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
+            <GripVertical class="size-2.5" />
+        </div>
+    {/if}
+</ResizablePrimitive.PaneResizer>

package/src/shadcn/resizable/resizable-pane-group.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import * as ResizablePrimitive from "paneforge";
+	import { cn } from "../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		direction,
+		this: paneGroup = $bindable(),
+		...restProps
+	}: ResizablePrimitive.PaneGroupProps & {
+		this?: ResizablePrimitive.PaneGroup;
+	} = $props();
+</script>
+
+<ResizablePrimitive.PaneGroup
+	bind:ref
+	bind:this={paneGroup}
+	{direction}
+	class={cn("flex h-full w-full data-[direction=vertical]:flex-col", className)}
+	{...restProps}
+/>

package/src/shadcn/scroll-area/index.ts

@@ -0,0 +1,10 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar,
+};

package/src/shadcn/scroll-area/scroll-area-scrollbar.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+    import { cn, type WithoutChild } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        orientation = 'vertical',
+        children,
+        ...restProps
+    }: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+    bind:ref
+    data-slot="scroll-area-scrollbar"
+    {orientation}
+    class={cn(
+        'flex touch-none select-none p-px transition-colors',
+        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
+        className
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+    <ScrollAreaPrimitive.Thumb data-slot="scroll-area-thumb" class="bg-border relative flex-1 rounded-full" />
+</ScrollAreaPrimitive.Scrollbar>

package/src/shadcn/scroll-area/scroll-area.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+    import { Scrollbar } from './index.js';
+    import { cn, type WithoutChild } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        orientation = 'vertical',
+        scrollbarXClasses = '',
+        scrollbarYClasses = '',
+        children,
+        ...restProps
+    }: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+        orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
+        scrollbarXClasses?: string | undefined;
+        scrollbarYClasses?: string | undefined;
+    } = $props();
+</script>
+
+<ScrollAreaPrimitive.Root bind:ref data-slot="scroll-area" class={cn('relative', className)} {...restProps}>
+    <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        class="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-4"
+    >
+        {@render children?.()}
+    </ScrollAreaPrimitive.Viewport>
+    {#if orientation === 'vertical' || orientation === 'both'}
+        <Scrollbar orientation="vertical" class={scrollbarYClasses} />
+    {/if}
+    {#if orientation === 'horizontal' || orientation === 'both'}
+        <Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+    {/if}
+    <ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>

package/src/shadcn/select/index.ts

@@ -0,0 +1,37 @@
+import { Select as SelectPrimitive } from "bits-ui";
+
+import Group from "./select-group.svelte";
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+import GroupHeading from "./select-group-heading.svelte";
+
+const Root = SelectPrimitive.Root;
+
+export {
+	Root,
+	Group,
+	Label,
+	Item,
+	Content,
+	Trigger,
+	Separator,
+	ScrollDownButton,
+	ScrollUpButton,
+	GroupHeading,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator,
+	ScrollDownButton as SelectScrollDownButton,
+	ScrollUpButton as SelectScrollUpButton,
+	GroupHeading as SelectGroupHeading,
+};

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { Select as SelectPrimitive } from 'bits-ui';
+    import SelectScrollUpButton from './select-scroll-up-button.svelte';
+    import SelectScrollDownButton from './select-scroll-down-button.svelte';
+    import { cn, type WithoutChild } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        sideOffset = 4,
+        portalProps,
+        children,
+        ...restProps
+    }: WithoutChild<SelectPrimitive.ContentProps> & {
+        portalProps?: SelectPrimitive.PortalProps;
+    } = $props();
+</script>
+
+<SelectPrimitive.Portal {...portalProps}>
+    <SelectPrimitive.Content
+        bind:ref
+        {sideOffset}
+        data-slot="select-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 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) relative z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+            className
+        )}
+        {...restProps}
+    >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+            class={cn('h-(--bits-select-anchor-height) min-w-(--bits-select-anchor-width) w-full scroll-my-1 p-1')}
+        >
+            {@render children?.()}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+</SelectPrimitive.Portal>

package/src/shadcn/select/select-group-heading.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { Select as SelectPrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
+    import type { ComponentProps } from 'svelte';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+    bind:ref
+    data-slot="select-group-heading"
+    class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</SelectPrimitive.GroupHeading>

package/src/shadcn/select/select-group.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group data-slot="select-group" {...restProps} />

package/src/shadcn/select/select-item.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import CheckIcon from '$icons/lucide/check';
+    import { Select as SelectPrimitive } from 'bits-ui';
+    import { cn, type WithoutChild } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, value, label, children: childrenProp, ...restProps }: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+    bind:ref
+    {value}
+    data-slot="select-item"
+    class={cn(
+        "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 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({ selected, highlighted })}
+        <span class="absolute right-2 flex size-3.5 items-center justify-center">
+            {#if selected}
+                <CheckIcon class="size-4" />
+            {/if}
+        </span>
+        {#if childrenProp}
+            {@render childrenProp({ selected, highlighted })}
+        {:else}
+            {label || value}
+        {/if}
+    {/snippet}
+</SelectPrimitive.Item>

package/src/shadcn/select/select-label.svelte

@@ -0,0 +1,20 @@
+<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<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+    bind:this={ref}
+    data-slot="select-label"
+    class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/src/shadcn/select/select-scroll-down-button.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import ChevronDownIcon from '$icons/lucide/chevron-down';
+    import { Select as SelectPrimitive } from 'bits-ui';
+    import { cn, type WithoutChildrenOrChild } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, ...restProps }: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton bind:ref data-slot="select-scroll-down-button" class={cn('flex cursor-default items-center justify-center py-1', className)} {...restProps}>
+    <ChevronDownIcon class="size-4" />
+</SelectPrimitive.ScrollDownButton>

package/src/shadcn/select/select-scroll-up-button.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import ChevronUpIcon from '$icons/lucide/chevron-up';
+    import { Select as SelectPrimitive } from 'bits-ui';
+    import { cn, type WithoutChildrenOrChild } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, ...restProps }: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton bind:ref data-slot="select-scroll-up-button" class={cn('flex cursor-default items-center justify-center py-1', className)} {...restProps}>
+    <ChevronUpIcon class="size-4" />
+</SelectPrimitive.ScrollUpButton>

package/src/shadcn/select/select-separator.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import type { Separator as SeparatorPrimitive } from 'bits-ui';
+    import { Separator } from '../separator/index.js';
+    import { cn } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, ...restProps }: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+    bind:ref
+    data-slot="select-separator"
+    class={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+    {...restProps}
+/>

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { Select as SelectPrimitive } from 'bits-ui';
+    import ChevronDownIcon from '$icons/lucide/chevron-down';
+    import { cn, type WithoutChild } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        size = 'default',
+        ...restProps
+    }: WithoutChild<SelectPrimitive.TriggerProps> & {
+        size?: 'sm' | 'default';
+    } = $props();
+</script>
+
+<!-- CUSTOM CHANGE: Changed w-fit to w-full to make select triggers fill available width (original: w-fit) -->
+<SelectPrimitive.Trigger
+    bind:ref
+    data-slot="select-trigger"
+    data-size={size}
+    class={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground 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 dark:hover:bg-input/50 shadow-xs flex w-full select-none items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+    )}
+    {...restProps}
+>
+    {@render children?.()}
+    <ChevronDownIcon class="size-4 opacity-50" />
+</SelectPrimitive.Trigger>

package/src/shadcn/separator/index.ts

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

package/src/shadcn/separator/separator.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { Separator as SeparatorPrimitive } from 'bits-ui';
+    import { cn } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, ...restProps }: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+    bind:ref
+    data-slot="separator"
+    class={cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
+        className
+    )}
+    {...restProps}
+/>

package/src/shadcn/sheet/index.ts

@@ -0,0 +1,36 @@
+import { Dialog as SheetPrimitive } from "bits-ui";
+import Trigger from "./sheet-trigger.svelte";
+import Close from "./sheet-close.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
+
+const Root = SheetPrimitive.Root;
+const Portal = SheetPrimitive.Portal;
+
+export {
+	Root,
+	Close,
+	Trigger,
+	Portal,
+	Overlay,
+	Content,
+	Header,
+	Footer,
+	Title,
+	Description,
+	//
+	Root as Sheet,
+	Close as SheetClose,
+	Trigger as SheetTrigger,
+	Portal as SheetPortal,
+	Overlay as SheetOverlay,
+	Content as SheetContent,
+	Header as SheetHeader,
+	Footer as SheetFooter,
+	Title as SheetTitle,
+	Description as SheetDescription,
+};

package/src/shadcn/sheet/sheet-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
+</script>
+
+<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} />

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

@@ -0,0 +1,66 @@
+<script lang="ts" module>
+    import { tv, type VariantProps } from 'tailwind-variants';
+    export const sheetVariants = tv({
+        base: 'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+        variants: {
+            side: {
+                top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+                bottom: 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+                left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+                right: 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm'
+            },
+            full: {
+                true: 'p-0',
+                false: 'p-6'
+            }
+        },
+        defaultVariants: {
+            side: 'right',
+            full: false
+        }
+    });
+
+    export type Side = VariantProps<typeof sheetVariants>['side'];
+</script>
+
+<script lang="ts">
+    import { Dialog as SheetPrimitive } from 'bits-ui';
+    import XIcon from '$icons/lucide/x';
+    import type { Snippet } from 'svelte';
+    import SheetOverlay from './sheet-overlay.svelte';
+    import { cn, type WithoutChildrenOrChild } from '../utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        side = 'right',
+        full = false,
+        width,
+        portalProps,
+        children,
+        ...restProps
+    }: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+        portalProps?: SheetPrimitive.PortalProps;
+        side?: Side;
+        full?: boolean;
+        width?: string;
+        children: Snippet;
+    } = $props();
+
+    const contentStyles = $derived(width && (side === 'left' || side === 'right') ? { width, maxWidth: width } : undefined);
+</script>
+
+<SheetPrimitive.Portal {...portalProps}>
+    <SheetOverlay />
+    <SheetPrimitive.Content bind:ref data-slot="sheet-content" class={cn(sheetVariants({ side, full }), className)} style={contentStyles} {...restProps}>
+        {@render children?.()}
+        {#if !full}
+            <SheetPrimitive.Close
+                class="ring-offset-background focus-visible:ring-ring rounded-xs focus-visible:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none"
+            >
+                <XIcon class="size-4" />
+                <span class="sr-only">Close</span>
+            </SheetPrimitive.Close>
+        {/if}
+    </SheetPrimitive.Content>
+</SheetPrimitive.Portal>