@tanglemedia/svelte-starter-ui-shadcn 0.0.6 → 0.2.0

package/src/lib/components/ui/resizable/resizable-handle.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-	import GripVertical from "@lucide/svelte/icons/grip-vertical";
 	import * as ResizablePrimitive from "paneforge";
-	import type { WithoutChildrenOrChild } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -16,15 +14,14 @@
 
 <ResizablePrimitive.PaneResizer
 	bind:ref
+	data-slot="resizable-handle"
 	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",
+		"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden 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-x-0 data-[direction=vertical]:after:-translate-y-1/2 [&[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>
+		<div class="bg-border h-6 w-1 rounded-lg z-10 flex shrink-0"></div>
 	{/if}
 </ResizablePrimitive.PaneResizer>

package/src/lib/components/ui/resizable/resizable-pane-group.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import * as ResizablePrimitive from "paneforge";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
-		class: className,
-		direction,
 		this: paneGroup = $bindable(),
+		class: className,
 		...restProps
 	}: ResizablePrimitive.PaneGroupProps & {
 		this?: ResizablePrimitive.PaneGroup;
@@ -16,7 +15,10 @@
 <ResizablePrimitive.PaneGroup
 	bind:ref
 	bind:this={paneGroup}
-	{direction}
-	class={cn("flex h-full w-full data-[direction=vertical]:flex-col", className)}
+	data-slot="resizable-pane-group"
+	class={cn(
+		"flex h-full w-full data-[direction=vertical]:flex-col",
+		className
+	)}
 	{...restProps}
 />

package/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte

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

package/src/lib/components/ui/scroll-area/scroll-area.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui";
-	import { Scrollbar } from "./index.js";
-	import { cn } from "../../../utils";
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/components/utils.js";
+	import Scrollbar from "./scroll-area-scrollbar.svelte";
 
 	let {
 		ref = $bindable(null),
+		viewportRef = $bindable(null),
 		class: className,
 		orientation = "vertical",
 		scrollbarXClasses = "",
@@ -15,11 +16,21 @@
 		orientation?: "vertical" | "horizontal" | "both" | undefined;
 		scrollbarXClasses?: string | undefined;
 		scrollbarYClasses?: string | undefined;
+		viewportRef?: HTMLElement | null;
 	} = $props();
 </script>
 
-<ScrollAreaPrimitive.Root bind:ref {...restProps} class={cn("relative overflow-hidden", className)}>
-	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
+<ScrollAreaPrimitive.Root
+	bind:ref
+	data-slot="scroll-area"
+	class={cn("relative", className)}
+	{...restProps}
+>
+	<ScrollAreaPrimitive.Viewport
+		bind:ref={viewportRef}
+		data-slot="scroll-area-viewport"
+		class="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+	>
 		{@render children?.()}
 	</ScrollAreaPrimitive.Viewport>
 	{#if orientation === "vertical" || orientation === "both"}

package/src/lib/components/ui/select/index.ts

@@ -1,34 +1,40 @@
-import { Select as SelectPrimitive } from "bits-ui";
-
+import Content from "./select-content.svelte";
 import GroupHeading from "./select-group-heading.svelte";
+import Group from "./select-group.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 Label from "./select-label.svelte";
+import Portal from "./select-portal.svelte";
 import ScrollDownButton from "./select-scroll-down-button.svelte";
 import ScrollUpButton from "./select-scroll-up-button.svelte";
-
-const Root = SelectPrimitive.Root;
-const Group = SelectPrimitive.Group;
+import Separator from "./select-separator.svelte";
+import Trigger from "./select-trigger.svelte";
+import Value from "./select-value.svelte";
+import Root from "./select.svelte";
 
 export {
 	Root,
-	Item,
 	Group,
-	GroupHeading,
+	Label,
+	Item,
 	Content,
 	Trigger,
 	Separator,
 	ScrollDownButton,
 	ScrollUpButton,
+	GroupHeading,
+	Portal,
+	Value,
 	//
 	Root as Select,
-	Item as SelectItem,
 	Group as SelectGroup,
-	GroupHeading as SelectGroupHeading,
+	Label as SelectLabel,
+	Item as SelectItem,
 	Content as SelectContent,
 	Trigger as SelectTrigger,
 	Separator as SelectSeparator,
 	ScrollDownButton as SelectScrollDownButton,
 	ScrollUpButton as SelectScrollUpButton,
+	GroupHeading as SelectGroupHeading,
+	Portal as SelectPortal,
+	Value as SelectValue,
 };

package/src/lib/components/ui/select/select-content.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
-	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
-	import * as Select from "./index.js";
-	import { cn } from "../../../utils";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/components/utils.js";
+	import type { WithoutChildrenOrChild } from "$lib/components/utils.js";
+	import SelectPortal from "./select-portal.svelte";
+	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -9,30 +13,33 @@
 		sideOffset = 4,
 		portalProps,
 		children,
+		preventScroll = true,
 		...restProps
 	}: WithoutChild<SelectPrimitive.ContentProps> & {
-		portalProps?: SelectPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
 	} = $props();
 </script>
 
-<SelectPrimitive.Portal {...portalProps}>
+<SelectPortal {...portalProps}>
 	<SelectPrimitive.Content
 		bind:ref
 		{sideOffset}
+		{preventScroll}
+		data-slot="select-content"
 		class={cn(
-			"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 bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-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",
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 relative z-50 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto",
 			className
 		)}
 		{...restProps}
 	>
-		<Select.ScrollUpButton />
+		<SelectScrollUpButton />
 		<SelectPrimitive.Viewport
 			class={cn(
-				"h-[var(--bits-select-anchor-height)] w-full min-w-[var(--bits-select-anchor-width)] p-1"
+				"h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1"
 			)}
 		>
 			{@render children?.()}
 		</SelectPrimitive.Viewport>
-		<Select.ScrollDownButton />
+		<SelectScrollDownButton />
 	</SelectPrimitive.Content>
-</SelectPrimitive.Portal>
+</SelectPortal>

package/src/lib/components/ui/select/select-group-heading.svelte

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

package/src/lib/components/ui/select/select-group.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group
+	bind:ref
+	data-slot="select-group"
+	class={cn("scroll-my-1 p-1", className)}
+	{...restProps}
+/>

package/src/lib/components/ui/select/select-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
-	import Check from "@lucide/svelte/icons/check";
-	import { cn } from "../../../utils";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn, type WithoutChild } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -16,22 +16,27 @@
 <SelectPrimitive.Item
 	bind:ref
 	{value}
+	{label}
+	data-slot="select-item"
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ selected, highlighted })}
-		<span class="absolute right-2 flex size-3.5 items-center justify-center">
+		<span class="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
 			{#if selected}
-				<Check class="size-4" />
+				<CheckIcon class="pointer-events-none" />
+			{/if}
+		</span>
+		<span class="flex flex-1 gap-2 shrink-0 whitespace-nowrap">
+			{#if childrenProp}
+				{@render childrenProp({ selected, highlighted })}
+			{:else}
+				{label || value}
 			{/if}
 		</span>
-		{#if childrenProp}
-			{@render childrenProp({ selected, highlighted })}
-		{:else}
-			{label || value}
-		{/if}
 	{/snippet}
 </SelectPrimitive.Item>

package/src/lib/components/ui/select/select-label.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/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-1.5 py-1 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/ui/select/select-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let { ...restProps }: SelectPrimitive.PortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps} />

package/src/lib/components/ui/select/select-scroll-down-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import ChevronDown from "@lucide/svelte/icons/chevron-down";
-	import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,8 +12,9 @@
 
 <SelectPrimitive.ScrollDownButton
 	bind:ref
-	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	data-slot="select-scroll-down-button"
+	class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className)}
 	{...restProps}
 >
-	<ChevronDown class="size-4" />
+	<ChevronDownIcon  />
 </SelectPrimitive.ScrollDownButton>

package/src/lib/components/ui/select/select-scroll-up-button.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
-	import ChevronUp from "@lucide/svelte/icons/chevron-up";
-	import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		...restProps
-	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
 </script>
 
 <SelectPrimitive.ScrollUpButton
 	bind:ref
-	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	data-slot="select-scroll-up-button"
+	class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className)}
 	{...restProps}
 >
-	<ChevronUp class="size-4" />
+	<ChevronUpIcon  />
 </SelectPrimitive.ScrollUpButton>

package/src/lib/components/ui/select/select-separator.svelte

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

package/src/lib/components/ui/select/select-trigger.svelte

@@ -1,24 +1,29 @@
 <script lang="ts">
-	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
-	import ChevronDown from "@lucide/svelte/icons/chevron-down";
-	import { cn } from "../../../utils";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { cn, type WithoutChild } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		size = "default",
 		...restProps
-	}: WithoutChild<SelectPrimitive.TriggerProps> = $props();
+	}: WithoutChild<SelectPrimitive.TriggerProps> & {
+		size?: "sm" | "default";
+	} = $props();
 </script>
 
 <SelectPrimitive.Trigger
 	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
 	class={cn(
-		"border-input ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 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:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDown class="size-4 opacity-50" />
+	<ChevronDownIcon class="text-muted-foreground size-4 pointer-events-none" />
 </SelectPrimitive.Trigger>

package/src/lib/components/ui/select/select-value.svelte

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

package/src/lib/components/ui/select/select.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let {
+		open = $bindable(false),
+		value = $bindable(),
+		...restProps
+	}: SelectPrimitive.RootProps = $props();
+</script>
+
+<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />

package/src/lib/components/ui/separator/separator.svelte

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

package/src/lib/components/ui/sheet/index.ts

@@ -1,16 +1,13 @@
-import { Dialog as SheetPrimitive } from "bits-ui";
-
-import Overlay from "./sheet-overlay.svelte";
+import Close from "./sheet-close.svelte";
 import Content from "./sheet-content.svelte";
-import Header from "./sheet-header.svelte";
+import Description from "./sheet-description.svelte";
 import Footer from "./sheet-footer.svelte";
+import Header from "./sheet-header.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Portal from "./sheet-portal.svelte";
 import Title from "./sheet-title.svelte";
-import Description from "./sheet-description.svelte";
-
-const Root = SheetPrimitive.Root;
-const Close = SheetPrimitive.Close;
-const Trigger = SheetPrimitive.Trigger;
-const Portal = SheetPrimitive.Portal;
+import Trigger from "./sheet-trigger.svelte";
+import Root from "./sheet.svelte";
 
 export {
 	Root,

package/src/lib/components/ui/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} />