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

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

@@ -1,7 +1,6 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,11 @@
 	}: 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("has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-3 flex items-center", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

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

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

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

@@ -1,19 +1,27 @@
 <script lang="ts">
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import type { WithElementRef } from "../../utils.js";
+	import { cn } from "../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import Minus from "@lucide/svelte/icons/minus";
 
 	let {
 		ref = $bindable(null),
+		class: className,
 		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"
+	class={cn("[&_svg:not([class*='size-'])]:size-4 flex items-center", className)}
+	{...restProps}
+>
 	{#if children}
 		{@render children?.()}
 	{:else}
-		<Minus />
+		<MinusIcon  />
 	{/if}
 </div>

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

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

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

@@ -1,30 +1,35 @@
 <script lang="ts">
 	import { PinInput as InputOTPPrimitive } from "bits-ui";
-	import type { ComponentProps } from "svelte";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		cell,
 		class: className,
 		...restProps
-	}: ComponentProps<typeof InputOTPPrimitive.Cell> = $props();
+	}: InputOTPPrimitive.CellProps = $props();
 </script>
 
 <InputOTPPrimitive.Cell
 	{cell}
 	bind:ref
+	data-slot="input-otp-slot"
 	class={cn(
-		"border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-		cell.isActive && "ring-ring z-10 ring-1",
+		"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-3 relative flex items-center justify-center data-[active=true]:z-10",
 		className
 	)}
 	{...restProps}
 >
-	{cell.char}
-	{#if cell.hasFakeCaret}
-		<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
-			<div class="animate-caret-blink bg-foreground h-4 w-px duration-1000"></div>
+	{#snippet child({ props })}
+		<div {...props} data-active={cell.isActive}>
+			{cell.char}
+			{#if cell.hasFakeCaret}
+				<div
+					class="pointer-events-none absolute inset-0 flex items-center justify-center"
+				>
+					<div class="animate-caret-blink bg-foreground h-4 w-px duration-1000"></div>
+				</div>
+			{/if}
 		</div>
-	{/if}
+	{/snippet}
 </InputOTPPrimitive.Cell>

package/dist/lib/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/lib/components/ui/input-otp/input-otp.svelte

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

package/dist/lib/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, {}, "ref" | "value">;
 type InputOtp = ReturnType<typeof InputOtp>;
 export default InputOtp;

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

@@ -0,0 +1,11 @@
+import Actions from "./item-actions.svelte";
+import Content from "./item-content.svelte";
+import Description from "./item-description.svelte";
+import Footer from "./item-footer.svelte";
+import Group from "./item-group.svelte";
+import Header from "./item-header.svelte";
+import Media from "./item-media.svelte";
+import Separator from "./item-separator.svelte";
+import Title from "./item-title.svelte";
+import Root from "./item.svelte";
+export { Root, Group, Separator, Header, Footer, Content, Title, Description, Actions, Media, Root as Item, Group as ItemGroup, Separator as ItemSeparator, Header as ItemHeader, Footer as ItemFooter, Content as ItemContent, Title as ItemTitle, Description as ItemDescription, Actions as ItemActions, Media as ItemMedia, };

package/dist/lib/components/ui/item/index.js

@@ -0,0 +1,13 @@
+import Actions from "./item-actions.svelte";
+import Content from "./item-content.svelte";
+import Description from "./item-description.svelte";
+import Footer from "./item-footer.svelte";
+import Group from "./item-group.svelte";
+import Header from "./item-header.svelte";
+import Media from "./item-media.svelte";
+import Separator from "./item-separator.svelte";
+import Title from "./item-title.svelte";
+import Root from "./item.svelte";
+export { Root, Group, Separator, Header, Footer, Content, Title, Description, Actions, Media, 
+//
+Root as Item, Group as ItemGroup, Separator as ItemSeparator, Header as ItemHeader, Footer as ItemFooter, Content as ItemContent, Title as ItemTitle, Description as ItemDescription, Actions as ItemActions, Media as ItemMedia, };

package/dist/lib/components/ui/item/item-actions.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="item-actions"
+	class={cn("gap-2 flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/item/item-actions.svelte.d.ts

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

package/dist/lib/components/ui/item/item-content.svelte

@@ -0,0 +1,23 @@
+<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="item-content"
+	class={cn(
+		"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/item/item-content.svelte.d.ts

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

package/dist/lib/components/ui/item/item-description.svelte

@@ -0,0 +1,23 @@
+<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<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="item-description"
+	class={cn(
+		"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>

package/dist/lib/components/ui/item/item-description.svelte.d.ts

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

package/dist/lib/components/ui/item/item-footer.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="item-footer"
+	class={cn("gap-2 flex basis-full items-center justify-between", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/item/item-footer.svelte.d.ts

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

package/dist/lib/components/ui/item/item-group.svelte

@@ -0,0 +1,21 @@
+<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}
+	role="list"
+	data-slot="item-group"
+	class={cn("gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/item/item-group.svelte.d.ts

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

package/dist/lib/components/ui/item/item-header.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="item-header"
+	class={cn("gap-2 flex basis-full items-center justify-between", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/item/item-header.svelte.d.ts

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

package/dist/lib/components/ui/item/item-media.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const itemMediaVariants = tv({
+		base: "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				icon: "[&_svg:not([class*='size-'])]:size-4",
+				image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type ItemMediaVariant = VariantProps<typeof itemMediaVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = "default",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: ItemMediaVariant } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="item-media"
+	data-variant={variant}
+	class={cn(itemMediaVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/item/item-media.svelte.d.ts

@@ -0,0 +1,29 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const itemMediaVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: "bg-transparent";
+        icon: "[&_svg:not([class*='size-'])]:size-4";
+        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover";
+    };
+}, undefined, "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none", {
+    variant: {
+        default: "bg-transparent";
+        icon: "[&_svg:not([class*='size-'])]:size-4";
+        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: "bg-transparent";
+        icon: "[&_svg:not([class*='size-'])]:size-4";
+        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover";
+    };
+}, undefined>>;
+export type ItemMediaVariant = VariantProps<typeof itemMediaVariants>["variant"];
+import { type WithElementRef } from "../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: ItemMediaVariant;
+};
+declare const ItemMedia: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ItemMedia = ReturnType<typeof ItemMedia>;
+export default ItemMedia;

package/dist/lib/components/ui/item/item-separator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Separator } from "../separator/index.js";
+	import { cn } from "../../utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="item-separator"
+	orientation="horizontal"
+	class={cn("my-2", className)}
+	{...restProps}
+/>

package/dist/lib/components/ui/item/item-separator.svelte.d.ts

@@ -0,0 +1,13 @@
+declare const ItemSeparator: import("svelte").Component<Omit<{
+    orientation?: import("bits-ui").Orientation;
+    decorative?: boolean;
+}, "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").SeparatorRootPropsWithoutHTML>, {}, "ref">;
+type ItemSeparator = ReturnType<typeof ItemSeparator>;
+export default ItemSeparator;

package/dist/lib/components/ui/item/item-title.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="item-title"
+	class={cn("gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/item/item-title.svelte.d.ts

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

package/dist/lib/components/ui/item/item.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const itemVariants = tv({
+		base: "[a]:hover:bg-muted rounded-lg border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors",
+		variants: {
+			variant: {
+				default: "border-transparent",
+				outline: "border-border",
+				muted: "bg-muted/50 border-transparent",
+			},
+			size: {
+				default: "gap-2.5 px-3 py-2.5",
+				sm: "gap-2.5 px-3 py-2.5",
+				xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ItemSize = VariantProps<typeof itemVariants>["size"];
+	export type ItemVariant = VariantProps<typeof itemVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		child,
+		variant,
+		size,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		variant?: ItemVariant;
+		size?: ItemSize;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(itemVariants({ variant, size }), className),
+		"data-slot": "item",
+		"data-variant": variant,
+		"data-size": size,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</div>
+{/if}

package/dist/lib/components/ui/item/item.svelte.d.ts

@@ -0,0 +1,50 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const itemVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: "border-transparent";
+        outline: "border-border";
+        muted: "bg-muted/50 border-transparent";
+    };
+    size: {
+        default: "gap-2.5 px-3 py-2.5";
+        sm: "gap-2.5 px-3 py-2.5";
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0";
+    };
+}, undefined, "[a]:hover:bg-muted rounded-lg border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors", {
+    variant: {
+        default: "border-transparent";
+        outline: "border-border";
+        muted: "bg-muted/50 border-transparent";
+    };
+    size: {
+        default: "gap-2.5 px-3 py-2.5";
+        sm: "gap-2.5 px-3 py-2.5";
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: "border-transparent";
+        outline: "border-border";
+        muted: "bg-muted/50 border-transparent";
+    };
+    size: {
+        default: "gap-2.5 px-3 py-2.5";
+        sm: "gap-2.5 px-3 py-2.5";
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0";
+    };
+}, undefined>>;
+export type ItemSize = VariantProps<typeof itemVariants>["size"];
+export type ItemVariant = VariantProps<typeof itemVariants>["variant"];
+import { type WithElementRef } from "../../utils.js";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    variant?: ItemVariant;
+    size?: ItemSize;
+};
+declare const Item: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Item = ReturnType<typeof Item>;
+export default Item;

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

@@ -0,0 +1,3 @@
+import Group from "./kbd-group.svelte";
+import Root from "./kbd.svelte";
+export { Root, Group, Root as Kbd, Group as KbdGroup, };

package/dist/lib/components/ui/kbd/index.js

@@ -0,0 +1,5 @@
+import Group from "./kbd-group.svelte";
+import Root from "./kbd.svelte";
+export { Root, Group, 
+//
+Root as Kbd, Group as KbdGroup, };