@kayord/ui 0.18.5 → 0.19.2

package/dist/components/ui/context-menu/context-menu-group.svelte.d.ts

@@ -0,0 +1,4 @@
+import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+declare const ContextMenuGroup: import("svelte").Component<ContextMenuPrimitive.GroupProps, {}, "ref">;
+type ContextMenuGroup = ReturnType<typeof ContextMenuGroup>;
+export default ContextMenuGroup;

package/dist/components/ui/context-menu/context-menu-item.svelte

@@ -6,17 +6,21 @@
 		ref = $bindable(null),
 		class: className,
 		inset,
+		variant = "default",
 		...restProps
 	}: ContextMenuPrimitive.ItemProps & {
 		inset?: boolean;
+		variant?: "default" | "destructive";
 	} = $props();
 </script>
 
 <ContextMenuPrimitive.Item
 	bind:ref
+	data-slot="context-menu-item"
+	data-inset={inset}
+	data-variant={variant}
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		inset && "pl-8",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/context-menu/context-menu-item.svelte.d.ts

@@ -1,6 +1,7 @@
 import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
 type $$ComponentProps = ContextMenuPrimitive.ItemProps & {
     inset?: boolean;
+    variant?: "default" | "destructive";
 };
 declare const ContextMenuItem: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type ContextMenuItem = ReturnType<typeof ContextMenuItem>;

package/dist/components/ui/context-menu/context-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="context-menu-label"
+	data-inset={inset}
+	class={cn("text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/context-menu/context-menu-label.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    inset?: boolean;
+};
+declare const ContextMenuLabel: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ContextMenuLabel = ReturnType<typeof ContextMenuLabel>;
+export default ContextMenuLabel;

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

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

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

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

package/dist/components/ui/context-menu/context-menu-radio-item.svelte

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

package/dist/components/ui/context-menu/context-menu-separator.svelte

@@ -5,4 +5,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: ContextMenuPrimitive.SeparatorProps = $props();
 </script>
 
-<ContextMenuPrimitive.Separator bind:ref class={cn("bg-border -mx-1 my-1 h-px", className)} {...restProps} />
+<ContextMenuPrimitive.Separator
+	bind:ref
+	data-slot="context-menu-separator"
+	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>

package/dist/components/ui/context-menu/context-menu-shortcut.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
-<span bind:this={ref} class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)} {...restProps}>
+<span
+	bind:this={ref}
+	data-slot="context-menu-shortcut"
+	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </span>

package/dist/components/ui/context-menu/context-menu-shortcut.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 declare const ContextMenuShortcut: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
 type ContextMenuShortcut = ReturnType<typeof ContextMenuShortcut>;

package/dist/components/ui/context-menu/context-menu-sub-content.svelte

@@ -7,8 +7,9 @@
 
 <ContextMenuPrimitive.SubContent
 	bind:ref
+	data-slot="context-menu-sub-content"
 	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md focus:outline-hidden",
+		"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 z-50 min-w-[8rem] origin-(--bits-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/context-menu/context-menu-sub-trigger.svelte

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

package/dist/components/ui/context-menu/context-menu-sub-trigger.svelte.d.ts

@@ -1,4 +1,5 @@
-import { ContextMenu as ContextMenuPrimitive, type WithoutChild } from "bits-ui";
+import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+import { type WithoutChild } from "../../../utils.js";
 type $$ComponentProps = WithoutChild<ContextMenuPrimitive.SubTriggerProps> & {
     inset?: boolean;
 };

package/dist/components/ui/context-menu/context-menu-trigger.svelte

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

package/dist/components/ui/context-menu/context-menu-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+declare const ContextMenuTrigger: import("svelte").Component<ContextMenuPrimitive.TriggerProps, {}, "ref">;
+type ContextMenuTrigger = ReturnType<typeof ContextMenuTrigger>;
+export default ContextMenuTrigger;

package/dist/components/ui/context-menu/index.d.ts

@@ -1,4 +1,6 @@
-import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+import Trigger from "./context-menu-trigger.svelte";
+import Group from "./context-menu-group.svelte";
+import RadioGroup from "./context-menu-radio-group.svelte";
 import Item from "./context-menu-item.svelte";
 import GroupHeading from "./context-menu-group-heading.svelte";
 import Content from "./context-menu-content.svelte";
@@ -8,9 +10,7 @@ import Separator from "./context-menu-separator.svelte";
 import SubContent from "./context-menu-sub-content.svelte";
 import SubTrigger from "./context-menu-sub-trigger.svelte";
 import CheckboxItem from "./context-menu-checkbox-item.svelte";
+import Label from "./context-menu-label.svelte";
 declare const Sub: import("svelte").Component<import("bits-ui").ContextMenuSubPropsWithoutHTML, {}, "open">;
 declare const Root: import("svelte").Component<import("bits-ui").ContextMenuRootPropsWithoutHTML, {}, "open">;
-declare const Trigger: import("svelte").Component<ContextMenuPrimitive.TriggerProps, {}, "ref">;
-declare const Group: import("svelte").Component<ContextMenuPrimitive.GroupProps, {}, "ref">;
-declare const RadioGroup: import("svelte").Component<ContextMenuPrimitive.RadioGroupProps, {}, "ref" | "value">;
-export { Sub, Root, Item, GroupHeading, Group, Trigger, Content, Shortcut, Separator, RadioItem, SubContent, SubTrigger, RadioGroup, CheckboxItem, Root as ContextMenu, Sub as ContextMenuSub, Item as ContextMenuItem, GroupHeading as ContextMenuGroupHeading, Group as ContextMenuGroup, Content as ContextMenuContent, Trigger as ContextMenuTrigger, Shortcut as ContextMenuShortcut, RadioItem as ContextMenuRadioItem, Separator as ContextMenuSeparator, RadioGroup as ContextMenuRadioGroup, SubContent as ContextMenuSubContent, SubTrigger as ContextMenuSubTrigger, CheckboxItem as ContextMenuCheckboxItem, };
+export { Sub, Root, Item, GroupHeading, Label, Group, Trigger, Content, Shortcut, Separator, RadioItem, SubContent, SubTrigger, RadioGroup, CheckboxItem, Root as ContextMenu, Sub as ContextMenuSub, Item as ContextMenuItem, GroupHeading as ContextMenuGroupHeading, Group as ContextMenuGroup, Content as ContextMenuContent, Trigger as ContextMenuTrigger, Shortcut as ContextMenuShortcut, RadioItem as ContextMenuRadioItem, Separator as ContextMenuSeparator, RadioGroup as ContextMenuRadioGroup, SubContent as ContextMenuSubContent, SubTrigger as ContextMenuSubTrigger, CheckboxItem as ContextMenuCheckboxItem, Label as ContextMenuLabel, };

package/dist/components/ui/context-menu/index.js

@@ -1,4 +1,7 @@
 import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+import Trigger from "./context-menu-trigger.svelte";
+import Group from "./context-menu-group.svelte";
+import RadioGroup from "./context-menu-radio-group.svelte";
 import Item from "./context-menu-item.svelte";
 import GroupHeading from "./context-menu-group-heading.svelte";
 import Content from "./context-menu-content.svelte";
@@ -8,11 +11,9 @@ import Separator from "./context-menu-separator.svelte";
 import SubContent from "./context-menu-sub-content.svelte";
 import SubTrigger from "./context-menu-sub-trigger.svelte";
 import CheckboxItem from "./context-menu-checkbox-item.svelte";
+import Label from "./context-menu-label.svelte";
 const Sub = ContextMenuPrimitive.Sub;
 const Root = ContextMenuPrimitive.Root;
-const Trigger = ContextMenuPrimitive.Trigger;
-const Group = ContextMenuPrimitive.Group;
-const RadioGroup = ContextMenuPrimitive.RadioGroup;
-export { Sub, Root, Item, GroupHeading, Group, Trigger, Content, Shortcut, Separator, RadioItem, SubContent, SubTrigger, RadioGroup, CheckboxItem, 
+export { Sub, Root, Item, GroupHeading, Label, Group, Trigger, Content, Shortcut, Separator, RadioItem, SubContent, SubTrigger, RadioGroup, CheckboxItem, 
 //
-Root as ContextMenu, Sub as ContextMenuSub, Item as ContextMenuItem, GroupHeading as ContextMenuGroupHeading, Group as ContextMenuGroup, Content as ContextMenuContent, Trigger as ContextMenuTrigger, Shortcut as ContextMenuShortcut, RadioItem as ContextMenuRadioItem, Separator as ContextMenuSeparator, RadioGroup as ContextMenuRadioGroup, SubContent as ContextMenuSubContent, SubTrigger as ContextMenuSubTrigger, CheckboxItem as ContextMenuCheckboxItem, };
+Root as ContextMenu, Sub as ContextMenuSub, Item as ContextMenuItem, GroupHeading as ContextMenuGroupHeading, Group as ContextMenuGroup, Content as ContextMenuContent, Trigger as ContextMenuTrigger, Shortcut as ContextMenuShortcut, RadioItem as ContextMenuRadioItem, Separator as ContextMenuSeparator, RadioGroup as ContextMenuRadioGroup, SubContent as ContextMenuSubContent, SubTrigger as ContextMenuSubTrigger, CheckboxItem as ContextMenuCheckboxItem, Label as ContextMenuLabel, };

package/dist/components/ui/data-table/render-helpers.d.ts

@@ -62,7 +62,7 @@ export declare class RenderSnippetConfig<TProps> {
  * ```
  * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
  */
-export declare function renderComponent<T extends Component<any>, Props extends ComponentProps<T>>(component: T, props: Props): RenderComponentConfig<T>;
+export declare function renderComponent<T extends Component<any>, Props extends ComponentProps<T>>(component: T, props?: Props): RenderComponentConfig<T>;
 /**
  * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
  *
@@ -87,4 +87,4 @@ export declare function renderComponent<T extends Component<any>, Props extends
  * ```
  * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
  */
-export declare function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params: TProps): RenderSnippetConfig<TProps>;
+export declare function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params?: TProps): RenderSnippetConfig<TProps>;

package/dist/components/ui/data-table/render-helpers.js

@@ -67,7 +67,7 @@ export class RenderSnippetConfig {
  * ```
  * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
  */
-export function renderComponent(component, props) {
+export function renderComponent(component, props = {}) {
     return new RenderComponentConfig(component, props);
 }
 /**
@@ -94,6 +94,6 @@ export function renderComponent(component, props) {
  * ```
  * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
  */
-export function renderSnippet(snippet, params) {
+export function renderSnippet(snippet, params = {}) {
     return new RenderSnippetConfig(snippet, params);
 }

package/dist/components/ui/dialog/dialog-close.svelte

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

package/dist/components/ui/dialog/dialog-close.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+declare const DialogClose: import("svelte").Component<DialogPrimitive.TriggerProps, {}, "ref">;
+type DialogClose = ReturnType<typeof DialogClose>;
+export default DialogClose;

package/dist/components/ui/dialog/dialog-content.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import X from "@lucide/svelte/icons/x";
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import XIcon from "@lucide/svelte/icons/x";
 	import type { Snippet } from "svelte";
 	import * as Dialog from "./index.js";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -21,17 +21,18 @@
 	<Dialog.Overlay />
 	<DialogPrimitive.Content
 		bind:ref
+		data-slot="dialog-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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+			"bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
 		<DialogPrimitive.Close
-			class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+			class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
 		>
-			<X class="size-4" />
+			<XIcon />
 			<span class="sr-only">Close</span>
 		</DialogPrimitive.Close>
 	</DialogPrimitive.Content>

package/dist/components/ui/dialog/dialog-content.svelte.d.ts

@@ -1,5 +1,6 @@
-import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+import { Dialog as DialogPrimitive } from "bits-ui";
 import type { Snippet } from "svelte";
+import { type WithoutChildrenOrChild } from "../../../utils.js";
 type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
     portalProps?: DialogPrimitive.PortalProps;
     children: Snippet;

package/dist/components/ui/dialog/dialog-description.svelte

@@ -5,4 +5,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: DialogPrimitive.DescriptionProps = $props();
 </script>
 
-<DialogPrimitive.Description bind:ref class={cn("text-muted-foreground text-sm", className)} {...restProps} />
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

package/dist/components/ui/dialog/dialog-footer.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +12,8 @@
 
 <div
 	bind:this={ref}
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	data-slot="dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/dialog/dialog-footer.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 declare const DialogFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type DialogFooter = ReturnType<typeof DialogFooter>;

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

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

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

package/dist/components/ui/dialog/dialog-overlay.svelte

@@ -7,8 +7,9 @@
 
 <DialogPrimitive.Overlay
 	bind:ref
+	data-slot="dialog-overlay"
 	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/dialog/dialog-title.svelte

@@ -7,6 +7,7 @@
 
 <DialogPrimitive.Title
 	bind:ref
-	class={cn("text-lg leading-none font-semibold tracking-tight", className)}
+	data-slot="dialog-title"
+	class={cn("text-lg leading-none font-semibold", className)}
 	{...restProps}
 />

package/dist/components/ui/dialog/dialog-trigger.svelte

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

package/dist/components/ui/dialog/dialog-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+declare const DialogTrigger: import("svelte").Component<DialogPrimitive.TriggerProps, {}, "ref">;
+type DialogTrigger = ReturnType<typeof DialogTrigger>;
+export default DialogTrigger;

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

@@ -1,12 +1,11 @@
-import { Dialog as DialogPrimitive } from "bits-ui";
 import Title from "./dialog-title.svelte";
 import Footer from "./dialog-footer.svelte";
 import Header from "./dialog-header.svelte";
 import Overlay from "./dialog-overlay.svelte";
 import Content from "./dialog-content.svelte";
 import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
 declare const Root: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
-declare const Trigger: import("svelte").Component<DialogPrimitive.TriggerProps, {}, "ref">;
-declare const Close: import("svelte").Component<DialogPrimitive.TriggerProps, {}, "ref">;
 declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
 export { Root, Title, Portal, Footer, Header, Trigger, Overlay, Content, Description, Close, Root as Dialog, Title as DialogTitle, Portal as DialogPortal, Footer as DialogFooter, Header as DialogHeader, Trigger as DialogTrigger, Overlay as DialogOverlay, Content as DialogContent, Description as DialogDescription, Close as DialogClose, };

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

@@ -5,9 +5,9 @@ import Header from "./dialog-header.svelte";
 import Overlay from "./dialog-overlay.svelte";
 import Content from "./dialog-content.svelte";
 import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
 const Root = DialogPrimitive.Root;
-const Trigger = DialogPrimitive.Trigger;
-const Close = DialogPrimitive.Close;
 const Portal = DialogPrimitive.Portal;
 export { Root, Title, Portal, Footer, Header, Trigger, Overlay, Content, Description, Close, 
 //

package/dist/components/ui/drawer/drawer-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	let { ref = $bindable(null), ...restProps }: DrawerPrimitive.CloseProps = $props();
+</script>
+
+<DrawerPrimitive.Close bind:ref data-slot="drawer-close" {...restProps} />

package/dist/components/ui/drawer/drawer-close.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Drawer as DrawerPrimitive } from "vaul-svelte";
+declare const DrawerClose: import("svelte").Component<DrawerPrimitive.TriggerProps, {}, "ref">;
+type DrawerClose = ReturnType<typeof DrawerClose>;
+export default DrawerClose;

package/dist/components/ui/drawer/drawer-content.svelte

@@ -18,13 +18,20 @@
 	<DrawerOverlay />
 	<DrawerPrimitive.Content
 		bind:ref
+		data-slot="drawer-content"
 		class={cn(
-			"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
+			"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+			"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+			"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+			"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+			"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
 			className
 		)}
 		{...restProps}
 	>
-		<div class="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full"></div>
+		<div
+			class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
+		></div>
 		{@render children?.()}
 	</DrawerPrimitive.Content>
 </DrawerPrimitive.Portal>

package/dist/components/ui/drawer/drawer-description.svelte

@@ -5,4 +5,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: DrawerPrimitive.DescriptionProps = $props();
 </script>
 
-<DrawerPrimitive.Description bind:ref class={cn("text-muted-foreground text-sm", className)} {...restProps} />
+<DrawerPrimitive.Description
+	bind:ref
+	data-slot="drawer-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

package/dist/components/ui/drawer/drawer-footer.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
@@ -11,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("mt-auto flex flex-col gap-2 p-4", className)} {...restProps}>
+<div bind:this={ref} data-slot="drawer-footer" class={cn("mt-auto flex flex-col gap-2 p-4", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/components/ui/drawer/drawer-footer.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 declare const DrawerFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type DrawerFooter = ReturnType<typeof DrawerFooter>;

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

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...restProps}>
+<div bind:this={ref} data-slot="drawer-header" class={cn("flex flex-col gap-1.5 p-4", className)} {...restProps}>
 	{@render children?.()}
 </div>

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

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