@kayord/ui 0.19.0 → 0.19.3

package/dist/components/ui/dropdown-menu/dropdown-menu-shortcut.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 DropdownMenuShortcut: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
 type DropdownMenuShortcut = ReturnType<typeof DropdownMenuShortcut>;
 export default DropdownMenuShortcut;

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

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

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import ChevronRight from "@lucide/svelte/icons/chevron-right";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
 	import { cn } from "../../../utils.js";
 
 	let {
@@ -16,13 +16,14 @@
 
 <DropdownMenuPrimitive.SubTrigger
 	bind:ref
+	data-slot="dropdown-menu-sub-trigger"
+	data-inset={inset}
 	class={cn(
-		"data-[highlighted]:bg-accent data-[state=open]:bg-accent flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-		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" />
+	<ChevronRightIcon class="ml-auto size-4" />
 </DropdownMenuPrimitive.SubTrigger>

package/dist/components/ui/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/dist/components/ui/dropdown-menu/dropdown-menu-trigger.svelte.d.ts

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

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

@@ -1,14 +1,16 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
 import Content from "./dropdown-menu-content.svelte";
-import GroupHeading from "./dropdown-menu-group-heading.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";
 declare const Sub: import("svelte").Component<import("bits-ui").ContextMenuSubPropsWithoutHTML, {}, "open">;
 declare const Root: import("svelte").Component<{
     open?: boolean;
@@ -19,7 +21,4 @@ declare const Root: import("svelte").Component<{
 } & {
     _internal_variant?: "context-menu" | "dropdown-menu" | "menubar";
 }, {}, "open">;
-declare const Trigger: import("svelte").Component<DropdownMenuPrimitive.TriggerProps, {}, "ref">;
-declare const Group: import("svelte").Component<DropdownMenuPrimitive.GroupProps, {}, "ref">;
-declare const RadioGroup: import("svelte").Component<DropdownMenuPrimitive.RadioGroupProps, {}, "ref" | "value">;
-export { CheckboxItem, Content, Root as DropdownMenu, CheckboxItem as DropdownMenuCheckboxItem, Content as DropdownMenuContent, Group as DropdownMenuGroup, GroupHeading as DropdownMenuGroupHeading, 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, Group, GroupHeading, Item, Label, RadioGroup, RadioItem, Root, Separator, Shortcut, Sub, SubContent, SubTrigger, Trigger, };
+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/dist/components/ui/dropdown-menu/index.js

@@ -1,17 +1,17 @@
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
 import Content from "./dropdown-menu-content.svelte";
-import GroupHeading from "./dropdown-menu-group-heading.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;
-const Trigger = DropdownMenuPrimitive.Trigger;
-const Group = DropdownMenuPrimitive.Group;
-const RadioGroup = DropdownMenuPrimitive.RadioGroup;
-export { CheckboxItem, Content, Root as DropdownMenu, CheckboxItem as DropdownMenuCheckboxItem, Content as DropdownMenuContent, Group as DropdownMenuGroup, GroupHeading as DropdownMenuGroupHeading, 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, Group, GroupHeading, Item, Label, RadioGroup, RadioItem, Root, Separator, Shortcut, Sub, SubContent, SubTrigger, Trigger, };
+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/dist/components/ui/form/form-description.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import * as FormPrimitive from "formsnap";
-	import type { WithoutChild } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -10,4 +9,9 @@
 	}: WithoutChild<FormPrimitive.DescriptionProps> = $props();
 </script>
 
-<FormPrimitive.Description bind:ref class={cn("text-muted-foreground text-sm", className)} {...restProps} />
+<FormPrimitive.Description
+	bind:ref
+	data-slot="form-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

package/dist/components/ui/form/form-element-field.svelte

@@ -7,8 +7,7 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends _FormPathLeaves<T>">
 	import * as FormPrimitive from "formsnap";
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef, WithoutChildren } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),

package/dist/components/ui/form/form-element-field.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { FormPathLeaves as _FormPathLeaves } from "sveltekit-superforms";
 import * as FormPrimitive from "formsnap";
 import type { HTMLAttributes } from "svelte/elements";
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 declare class __sveltets_Render<T extends Record<string, unknown>, U extends _FormPathLeaves<T>> {
     props(): Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, "children"> & FormPrimitive.ElementFieldProps<T, U, any>;
     events(): {};

package/dist/components/ui/form/form-field-errors.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import * as FormPrimitive from "formsnap";
-	import type { WithoutChild } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),

package/dist/components/ui/form/form-field-errors.svelte.d.ts

@@ -1,5 +1,5 @@
 import * as FormPrimitive from "formsnap";
-import type { WithoutChild } from "bits-ui";
+import { type WithoutChild } from "../../../utils.js";
 type $$ComponentProps = WithoutChild<FormPrimitive.FieldErrorsProps> & {
     errorClasses?: string | undefined | null;
 };

package/dist/components/ui/form/form-field.svelte

@@ -6,8 +6,7 @@
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends _FormPath<T>">
 	import * as FormPrimitive from "formsnap";
-	import type { WithoutChildren, WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
@@ -22,7 +21,7 @@
 
 <FormPrimitive.Field {form} {name}>
 	{#snippet children({ constraints, errors, tainted, value })}
-		<div bind:this={ref} class={cn("space-y-2", className)} {...restProps}>
+		<div bind:this={ref} data-slot="form-item" class={cn("space-y-2", className)} {...restProps}>
 			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
 		</div>
 	{/snippet}

package/dist/components/ui/form/form-field.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { FormPath as _FormPath } from "sveltekit-superforms";
 import * as FormPrimitive from "formsnap";
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 declare class __sveltets_Render<T extends Record<string, unknown>, U extends _FormPath<T>> {
     props(): FormPrimitive.FieldProps<T, U, any> & Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, "children">;

package/dist/components/ui/form/form-fieldset.svelte

@@ -6,8 +6,7 @@
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends _FormPath<T>">
 	import * as FormPrimitive from "formsnap";
-	import type { WithoutChild } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),

package/dist/components/ui/form/form-label.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import type { WithoutChild } from "bits-ui";
 	import * as FormPrimitive from "formsnap";
 	import { Label } from "../label/index.js";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +13,7 @@
 
 <FormPrimitive.Label {...restProps} bind:ref>
 	{#snippet child({ props })}
-		<Label {...props} class={cn("data-[fs-error]:text-destructive", className)}>
+		<Label {...props} data-slot="form-label" class={cn("data-[fs-error]:text-destructive", className)}>
 			{@render children?.()}
 		</Label>
 	{/snippet}

package/dist/components/ui/form/form-legend.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import * as FormPrimitive from "formsnap";
-	import type { WithoutChild } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let { ref = $bindable(null), class: className, ...restProps }: WithoutChild<FormPrimitive.LegendProps> = $props();
 </script>

package/dist/components/ui/hover-card/hover-card-content.svelte

@@ -17,10 +17,11 @@
 <HoverCardPrimitive.Portal {...portalProps}>
 	<HoverCardPrimitive.Content
 		bind:ref
+		data-slot="hover-card-content"
 		{align}
 		{sideOffset}
 		class={cn(
-			"bg-popover text-popover-foreground z-50 mt-3 w-64 rounded-md border p-4 shadow-md 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 mt-3 w-64 rounded-md border p-4 shadow-md outline-hidden outline-none",
 			className
 		)}
 		{...restProps}

package/dist/components/ui/hover-card/hover-card-trigger.svelte

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

package/dist/components/ui/hover-card/hover-card-trigger.svelte.d.ts

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

package/dist/components/ui/hover-card/index.d.ts

@@ -1,5 +1,4 @@
-import { LinkPreview as HoverCardPrimitive } from "bits-ui";
 import Content from "./hover-card-content.svelte";
+import Trigger from "./hover-card-trigger.svelte";
 declare const Root: import("svelte").Component<import("bits-ui").LinkPreviewRootPropsWithoutHTML, {}, "open">;
-declare const Trigger: import("svelte").Component<HoverCardPrimitive.TriggerProps, {}, "ref">;
 export { Root, Content, Trigger, Root as HoverCard, Content as HoverCardContent, Trigger as HoverCardTrigger };

package/dist/components/ui/hover-card/index.js

@@ -1,5 +1,5 @@
 import { LinkPreview as HoverCardPrimitive } from "bits-ui";
 import Content from "./hover-card-content.svelte";
+import Trigger from "./hover-card-trigger.svelte";
 const Root = HoverCardPrimitive.Root;
-const Trigger = HoverCardPrimitive.Trigger;
 export { Root, Content, Trigger, Root as HoverCard, Content as HoverCardContent, Trigger as HoverCardTrigger };

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

@@ -4,11 +4,12 @@ export * as AlertDialog from "./alert-dialog/index.js";
 export { AspectRatio } from "./aspect-ratio/index.js";
 export * as Avatar from "./avatar/index.js";
 export { Badge, badgeVariants, type BadgeVariant } from "./badge/index.js";
-export { Button, type ButtonProps, buttonVariants } from "./button/index.js";
 export * as Breadcrumb from "./breadcrumb/index.js";
+export { Button, type ButtonProps, buttonVariants } from "./button/index.js";
 export { Calendar } from "./calendar/index.js";
 export * as Card from "./card/index.js";
 export * as Carousel from "./carousel/index.js";
+export * as Chart from "./chart/index.js";
 export { Checkbox } from "./checkbox/index.js";
 export * as Collapsible from "./collapsible/index.js";
 export * as Command from "./command/index.js";
@@ -20,6 +21,7 @@ export * as DropdownMenu from "./dropdown-menu/index.js";
 export * as Form from "./form/index.js";
 export * as HoverCard from "./hover-card/index.js";
 export { Input } from "./input/index.js";
+export * as InputOTP from "./input-otp/index.js";
 export { Label } from "./label/index.js";
 export * as Menubar from "./menubar/index.js";
 export * as Pagination from "./pagination/index.js";
@@ -28,15 +30,15 @@ export { Progress } from "./progress/index.js";
 export * as RadioGroup from "./radio-group/index.js";
 export * as RangeCalendar from "./range-calendar/index.js";
 export * as Resizable from "./resizable/index.js";
+export { ScrollArea } from "./scroll-area/index.js";
 export * as Select from "./select/index.js";
-export * as Sidebar from "./sidebar/index.js";
 export { Separator } from "./separator/index.js";
 export * as Sheet from "./sheet/index.js";
+export * as Sidebar from "./sidebar/index.js";
 export { Skeleton } from "./skeleton/index.js";
 export { Slider } from "./slider/index.js";
 export { Toaster } from "./sonner/index.js";
 export { toast } from "svelte-sonner";
-export { ScrollArea } from "./scroll-area/index.js";
 export { Switch } from "./switch/index.js";
 export * as Table from "./table/index.js";
 export * as Tabs from "./tabs/index.js";

package/dist/components/ui/index.js

@@ -4,11 +4,12 @@ export * as AlertDialog from "./alert-dialog/index.js";
 export { AspectRatio } from "./aspect-ratio/index.js";
 export * as Avatar from "./avatar/index.js";
 export { Badge, badgeVariants } from "./badge/index.js";
-export { Button, buttonVariants } from "./button/index.js";
 export * as Breadcrumb from "./breadcrumb/index.js";
+export { Button, buttonVariants } from "./button/index.js";
 export { Calendar } from "./calendar/index.js";
 export * as Card from "./card/index.js";
 export * as Carousel from "./carousel/index.js";
+export * as Chart from "./chart/index.js";
 export { Checkbox } from "./checkbox/index.js";
 export * as Collapsible from "./collapsible/index.js";
 export * as Command from "./command/index.js";
@@ -20,6 +21,7 @@ export * as DropdownMenu from "./dropdown-menu/index.js";
 export * as Form from "./form/index.js";
 export * as HoverCard from "./hover-card/index.js";
 export { Input } from "./input/index.js";
+export * as InputOTP from "./input-otp/index.js";
 export { Label } from "./label/index.js";
 export * as Menubar from "./menubar/index.js";
 export * as Pagination from "./pagination/index.js";
@@ -28,15 +30,15 @@ export { Progress } from "./progress/index.js";
 export * as RadioGroup from "./radio-group/index.js";
 export * as RangeCalendar from "./range-calendar/index.js";
 export * as Resizable from "./resizable/index.js";
+export { ScrollArea } from "./scroll-area/index.js";
 export * as Select from "./select/index.js";
-export * as Sidebar from "./sidebar/index.js";
 export { Separator } from "./separator/index.js";
 export * as Sheet from "./sheet/index.js";
+export * as Sidebar from "./sidebar/index.js";
 export { Skeleton } from "./skeleton/index.js";
 export { Slider } from "./slider/index.js";
 export { Toaster } from "./sonner/index.js";
 export { toast } from "svelte-sonner";
-export { ScrollArea } from "./scroll-area/index.js";
 export { Switch } from "./switch/index.js";
 export * as Table from "./table/index.js";
 export * as Tabs from "./tabs/index.js";

package/dist/components/ui/input/input.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
 
@@ -22,8 +21,11 @@
 {#if type === "file"}
 	<input
 		bind:this={ref}
+		data-slot="input"
 		class={cn(
-			"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none 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"
@@ -34,8 +36,11 @@
 {:else}
 	<input
 		bind:this={ref}
+		data-slot="input"
 		class={cn(
-			"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none 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}

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

@@ -1,5 +1,5 @@
 import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 type InputType = Exclude<HTMLInputTypeAttribute, "file">;
 type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
     type: "file";
@@ -8,6 +8,6 @@ type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
     type?: InputType;
     files?: undefined;
 })>;
-declare const Input: import("svelte").Component<Props, {}, "ref" | "value" | "files">;
+declare const Input: import("svelte").Component<Props, {}, "value" | "ref" | "files">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/ui/input-otp/input-otp-group.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,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("flex items-center", className)} {...restProps}>
+<div bind:this={ref} data-slot="input-otp-group" class={cn("flex items-center", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/components/ui/input-otp/input-otp-group.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 InputOtpGroup: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type InputOtpGroup = ReturnType<typeof InputOtpGroup>;
 export default InputOtpGroup;

package/dist/components/ui/input-otp/input-otp-separator.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import Dot from "@lucide/svelte/icons/dot";
+	import type { WithElementRef } from "../../../utils.js";
+	import DotIcon from "@lucide/svelte/icons/dot";
 
 	let { ref = $bindable(null), children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} role="separator" {...restProps}>
+<div bind:this={ref} data-slot="input-otp-separator" role="separator" {...restProps}>
 	{#if children}
 		{@render children?.()}
 	{:else}
-		<Dot />
+		<DotIcon />
 	{/if}
 </div>

package/dist/components/ui/input-otp/input-otp-separator.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 InputOtpSeparator: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type InputOtpSeparator = ReturnType<typeof InputOtpSeparator>;
 export default InputOtpSeparator;

package/dist/components/ui/input-otp/input-otp-slot.svelte

@@ -1,22 +1,18 @@
 <script lang="ts">
 	import { PinInput as InputOTPPrimitive } from "bits-ui";
-	import type { ComponentProps } from "svelte";
 	import { cn } from "../../../utils.js";
 
-	let {
-		ref = $bindable(null),
-		cell,
-		class: className,
-		...restProps
-	}: ComponentProps<typeof InputOTPPrimitive.Cell> = $props();
+	let { ref = $bindable(null), cell, class: className, ...restProps }: InputOTPPrimitive.CellProps = $props();
 </script>
 
 <InputOTPPrimitive.Cell
 	{cell}
 	bind:ref
+	data-slot="input-otp-slot"
 	class={cn(
-		"border-input relative flex h-10 w-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-		cell.isActive && "ring-ring ring-offset-background z-10 ring-2",
+		"border-input aria-invalid:border-destructive dark:bg-input/30 relative flex size-10 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md",
+		cell.isActive &&
+			"border-ring ring-ring/50 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 ring-offset-background z-10 ring-[3px]",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/input-otp/input-otp-slot.svelte.d.ts

@@ -1,12 +1,4 @@
-declare const InputOtpSlot: import("svelte").Component<Omit<{
-    cell: import("bits-ui").PinInputCell;
-}, "child" | "children"> & {
-    child?: import("svelte").Snippet<[{
-        props: Record<string, unknown>;
-    }]> | undefined;
-    children?: import("svelte").Snippet<[]> | undefined;
-    style?: import("bits-ui").StyleProperties | string | null | undefined;
-    ref?: HTMLElement | null | undefined;
-} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").PinInputCellPropsWithoutHTML>, {}, "ref">;
+import { PinInput as InputOTPPrimitive } from "bits-ui";
+declare const InputOtpSlot: import("svelte").Component<InputOTPPrimitive.CellProps, {}, "ref">;
 type InputOtpSlot = ReturnType<typeof InputOtpSlot>;
 export default InputOtpSlot;

package/dist/components/ui/input-otp/input-otp.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { PinInput as InputOTPPrimitive } from "bits-ui";
-	import type { ComponentProps } from "svelte";
 	import { cn } from "../../../utils.js";
 
 	let {
@@ -8,12 +7,13 @@
 		class: className,
 		value = $bindable(""),
 		...restProps
-	}: ComponentProps<typeof InputOTPPrimitive.Root> = $props();
+	}: InputOTPPrimitive.RootProps = $props();
 </script>
 
 <InputOTPPrimitive.Root
 	bind:ref
 	bind:value
-	class={cn("flex items-center gap-2 has-[:disabled]:opacity-50 [&_input]:disabled:cursor-not-allowed", className)}
+	data-slot="input-otp"
+	class={cn("flex items-center gap-2 has-disabled:opacity-50 [&_input]:disabled:cursor-not-allowed", className)}
 	{...restProps}
 />

package/dist/components/ui/input-otp/input-otp.svelte.d.ts

@@ -1,3 +1,4 @@
-declare const InputOtp: import("svelte").Component<import("bits-ui").PinInputRootPropsWithoutHTML & import("bits-ui").Without<import("bits-ui").BitsPrimitiveInputAttributes, import("bits-ui").PinInputRootPropsWithoutHTML>, {}, "ref" | "value">;
+import { PinInput as InputOTPPrimitive } from "bits-ui";
+declare const InputOtp: import("svelte").Component<InputOTPPrimitive.RootProps, {}, "value" | "ref">;
 type InputOtp = ReturnType<typeof InputOtp>;
 export default InputOtp;

package/dist/components/ui/label/label.svelte

@@ -7,6 +7,10 @@
 
 <LabelPrimitive.Root
 	bind:ref
-	class={cn("text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70", className)}
+	data-slot="label"
+	class={cn(
+		"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+		className
+	)}
 	{...restProps}
 />

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

@@ -3,15 +3,16 @@ import Root from "./menubar.svelte";
 import CheckboxItem from "./menubar-checkbox-item.svelte";
 import Content from "./menubar-content.svelte";
 import Item from "./menubar-item.svelte";
-import GroupHeading from "./menubar-group-heading.svelte";
+import Group from "./menubar-group.svelte";
 import RadioItem from "./menubar-radio-item.svelte";
 import Separator from "./menubar-separator.svelte";
 import Shortcut from "./menubar-shortcut.svelte";
 import SubContent from "./menubar-sub-content.svelte";
 import SubTrigger from "./menubar-sub-trigger.svelte";
 import Trigger from "./menubar-trigger.svelte";
+import Label from "./menubar-label.svelte";
+import GroupHeading from "./menubar-group-heading.svelte";
 declare const Menu: import("svelte").Component<import("bits-ui").MenubarMenuPropsWithoutHTML, {}, "">;
-declare const Group: import("svelte").Component<MenubarPrimitive.GroupProps, {}, "ref">;
 declare const Sub: import("svelte").Component<MenubarPrimitive.SubProps, {}, "open">;
-declare const RadioGroup: import("svelte").Component<MenubarPrimitive.RadioGroupProps, {}, "ref" | "value">;
-export { Root, CheckboxItem, Content, Item, GroupHeading, RadioItem, Separator, Shortcut, SubContent, SubTrigger, Trigger, Menu, Group, Sub, RadioGroup, Root as Menubar, CheckboxItem as MenubarCheckboxItem, Content as MenubarContent, Item as MenubarItem, GroupHeading as MenubarGroupHeading, RadioItem as MenubarRadioItem, Separator as MenubarSeparator, Shortcut as MenubarShortcut, SubContent as MenubarSubContent, SubTrigger as MenubarSubTrigger, Trigger as MenubarTrigger, Menu as MenubarMenu, Group as MenubarGroup, Sub as MenubarSub, RadioGroup as MenubarRadioGroup, };
+declare const RadioGroup: import("svelte").Component<MenubarPrimitive.RadioGroupProps, {}, "value" | "ref">;
+export { Root, CheckboxItem, Content, Item, RadioItem, Separator, Shortcut, SubContent, SubTrigger, Trigger, Menu, Group, Sub, RadioGroup, Label, GroupHeading, Root as Menubar, CheckboxItem as MenubarCheckboxItem, Content as MenubarContent, Item as MenubarItem, RadioItem as MenubarRadioItem, Separator as MenubarSeparator, Shortcut as MenubarShortcut, SubContent as MenubarSubContent, SubTrigger as MenubarSubTrigger, Trigger as MenubarTrigger, Menu as MenubarMenu, Group as MenubarGroup, Sub as MenubarSub, RadioGroup as MenubarRadioGroup, Label as MenubarLabel, GroupHeading as MenubarGroupHeading, };