@kayord/ui 1.1.17 → 1.1.18

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLParagraphElement> = $props();
+</script>
+
+<p
+	data-slot="item-description"
+	class={cn(
+		"text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
+		"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>

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

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

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div data-slot="item-footer" class={cn("flex basis-full items-center justify-between gap-2", className)} {...restProps}>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div role="list" data-slot="item-group" class={cn("group/item-group flex flex-col", className)} {...restProps}>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div data-slot="item-header" class={cn("flex basis-full items-center justify-between gap-2", className)} {...restProps}>
+	{@render children?.()}
+</div>

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

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

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

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

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

@@ -0,0 +1,28 @@
+import { type VariantProps } from "tailwind-variants";
+declare const itemMediaVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        icon: string;
+        image: string;
+    };
+}, undefined, "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none", {
+    variant: {
+        default: string;
+        icon: string;
+        image: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        icon: string;
+        image: string;
+    };
+}, undefined, "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none", unknown, unknown, undefined>>;
+export type ItemMediaVariant = VariantProps<typeof itemMediaVariants>["variant"];
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    variant?: ItemMediaVariant;
+};
+declare const ItemMedia: import("svelte").Component<$$ComponentProps, {}, "">;
+type ItemMedia = ReturnType<typeof ItemMedia>;
+export default ItemMedia;

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

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

package/dist/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>, {}, "">;
+type ItemSeparator = ReturnType<typeof ItemSeparator>;
+export default ItemSeparator;

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div
+	data-slot="item-title"
+	class={cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,61 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	const itemVariants = tv({
+		base: "group/item [a]:hover:bg-accent/50 [a]:transition-colors focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]",
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline: "border-border",
+				muted: "bg-muted/50",
+			},
+			size: {
+				default: "gap-4 p-4",
+				sm: "gap-2.5 px-4 py-3",
+			},
+		},
+		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 } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+
+	let {
+		class: className,
+		child,
+		variant,
+		size,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		variant?: ItemVariant;
+		size?: ItemSize;
+	} = $props();
+
+	const classes = $derived(cn(itemVariants({ variant, size }), className));
+
+	const mergedProps = $derived({
+		class: classes,
+		"data-slot": "item",
+		"data-variant": variant,
+		"data-size": size,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</div>
+{/if}

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

@@ -0,0 +1,46 @@
+import { type VariantProps } from "tailwind-variants";
+declare const itemVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+        muted: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+    };
+}, undefined, "group/item [a]:hover:bg-accent/50 [a]:transition-colors focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]", {
+    variant: {
+        default: string;
+        outline: string;
+        muted: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+        muted: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+    };
+}, undefined, "group/item [a]:hover:bg-accent/50 [a]:transition-colors focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]", unknown, unknown, undefined>>;
+export type ItemSize = VariantProps<typeof itemVariants>["size"];
+export type ItemVariant = VariantProps<typeof itemVariants>["variant"];
+import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    variant?: ItemVariant;
+    size?: ItemSize;
+};
+declare const Item: import("svelte").Component<$$ComponentProps, {}, "">;
+type Item = ReturnType<typeof Item>;
+export default Item;

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

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

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

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

package/dist/components/ui/kbd/kbd-group.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLElement> = $props();
+</script>
+
+<kbd data-slot="kbd-group" class={cn("inline-flex items-center gap-1", className)} {...restProps}>
+	{@render children?.()}
+</kbd>

package/dist/components/ui/kbd/kbd-group.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from "svelte/elements";
+declare const KbdGroup: import("svelte").Component<HTMLAttributes<HTMLElement>, {}, "">;
+type KbdGroup = ReturnType<typeof KbdGroup>;
+export default KbdGroup;

package/dist/components/ui/kbd/kbd.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLElement> = $props();
+</script>
+
+<kbd
+	data-slot="kbd"
+	class={cn(
+		"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
+		"[&_svg:not([class*='size-'])]:size-3",
+		"[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</kbd>

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

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from "svelte/elements";
+declare const Kbd: import("svelte").Component<HTMLAttributes<HTMLElement>, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/components/ui/separator/separator.svelte

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

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

@@ -0,0 +1 @@
+export { default as Spinner } from "./spinner.svelte";

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

@@ -0,0 +1 @@
+export { default as Spinner } from "./spinner.svelte";

package/dist/components/ui/spinner/spinner.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import Loader2Icon from "@lucide/svelte/icons/loader-2";
+	import type { ComponentProps } from "svelte";
+
+	type Props = ComponentProps<typeof Loader2Icon>;
+
+	let { class: className, ...restProps }: Props = $props();
+</script>
+
+<Loader2Icon role="status" aria-label="Loading" class={cn("size-4 animate-spin", className)} {...restProps} />

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

@@ -0,0 +1,3 @@
+declare const Spinner: import("svelte").Component<import("@lucide/svelte").IconProps, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/ui/textarea/textarea.svelte

@@ -6,13 +6,14 @@
 		ref = $bindable(null),
 		value = $bindable(),
 		class: className,
+		"data-slot": dataSlot = "textarea",
 		...restProps
 	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
 </script>
 
 <textarea
 	bind:this={ref}
-	data-slot="textarea"
+	data-slot={dataSlot}
 	class={cn(
 		"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 		className

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "1.1.17",
+  "version": "1.1.18",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -49,7 +49,7 @@
   "devDependencies": {
     "@lucide/svelte": "^0.544.0",
     "@sveltejs/adapter-auto": "^6.1.1",
-    "@sveltejs/kit": "^2.43.8",
+    "@sveltejs/kit": "^2.44.0",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@tailwindcss/vite": "^4.1.14",
@@ -58,8 +58,8 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.7",
-    "@typescript-eslint/eslint-plugin": "^8.45.0",
-    "@typescript-eslint/parser": "^8.45.0",
+    "@typescript-eslint/eslint-plugin": "^8.46.0",
+    "@typescript-eslint/parser": "^8.46.0",
     "@vitest/coverage-v8": "3.2.4",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
@@ -71,8 +71,8 @@
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.6.14",
-    "publint": "^0.3.13",
-    "svelte": "5.39.8",
+    "publint": "^0.3.14",
+    "svelte": "5.39.9",
     "svelte-check": "^4.3.2",
     "sveltekit-superforms": "^2.27.2",
     "tailwindcss": "^4.1.14",
@@ -81,7 +81,7 @@
     "typescript": "^5.9.3",
     "vite": "^7.1.9",
     "vitest": "^3.2.4",
-    "zod": "4.1.11"
+    "zod": "4.1.12"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",