@kayord/ui 2.0.2 → 2.0.4

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>
 	import { tv, type VariantProps } from "tailwind-variants";
 
-	const itemVariants = tv({
+	export 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: {
@@ -25,26 +25,25 @@
 </script>
 
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		child,
 		variant,
 		size,
 		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
+	}: WithElementRef<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,
+		class: cn(itemVariants({ variant, size }), className),
 		"data-slot": "item",
 		"data-variant": variant,
 		"data-size": size,
@@ -55,7 +54,7 @@
 {#if child}
 	{@render child({ props: mergedProps })}
 {:else}
-	<div {...mergedProps}>
+	<div bind:this={ref} {...mergedProps}>
 		{@render mergedProps.children?.()}
 	</div>
 {/if}

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

@@ -1,5 +1,5 @@
 import { type VariantProps } from "tailwind-variants";
-declare const itemVariants: import("tailwind-variants").TVReturnType<{
+export declare const itemVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
         outline: string;
@@ -32,15 +32,16 @@ declare const itemVariants: import("tailwind-variants").TVReturnType<{
 }, 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 WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 import type { Snippet } from "svelte";
-type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     child?: Snippet<[{
         props: Record<string, unknown>;
     }]>;
     variant?: ItemVariant;
     size?: ItemSize;
 };
-declare const Item: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Item: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type Item = ReturnType<typeof Item>;
 export default Item;

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

@@ -1,10 +1,15 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, children, ...restProps }: HTMLAttributes<HTMLElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<kbd data-slot="kbd-group" class={cn("inline-flex items-center gap-1", className)} {...restProps}>
+<kbd bind:this={ref} 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

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

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

@@ -1,11 +1,17 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
-	let { class: className, children, ...restProps }: HTMLAttributes<HTMLElement> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
 <kbd
+	bind:this={ref}
 	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",

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

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

package/dist/components/ui/native-select/index.d.ts

@@ -0,0 +1,4 @@
+import Root from "./native-select.svelte";
+import Option from "./native-select-option.svelte";
+import OptGroup from "./native-select-opt-group.svelte";
+export { Root, Option, OptGroup, Root as NativeSelect, Option as NativeSelectOption, OptGroup as NativeSelectOptGroup };

package/dist/components/ui/native-select/index.js

@@ -0,0 +1,4 @@
+import Root from "./native-select.svelte";
+import Option from "./native-select-option.svelte";
+import OptGroup from "./native-select-opt-group.svelte";
+export { Root, Option, OptGroup, Root as NativeSelect, Option as NativeSelectOption, OptGroup as NativeSelectOptGroup };

package/dist/components/ui/native-select/native-select-opt-group.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLOptgroupAttributes } from "svelte/elements";
+	import type { WithElementRef } from "../../../utils.js";
+
+	let { ref = $bindable(null), children, ...restProps }: WithElementRef<HTMLOptgroupAttributes> = $props();
+</script>
+
+<optgroup bind:this={ref} data-slot="native-select-opt-group" {...restProps}>
+	{@render children?.()}
+</optgroup>

package/dist/components/ui/native-select/native-select-opt-group.svelte.d.ts

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

package/dist/components/ui/native-select/native-select-option.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLOptionAttributes } from "svelte/elements";
+	import type { WithElementRef } from "../../../utils.js";
+
+	let { ref = $bindable(null), children, ...restProps }: WithElementRef<HTMLOptionAttributes> = $props();
+</script>
+
+<option bind:this={ref} data-slot="native-select-option" {...restProps}>
+	{@render children?.()}
+</option>

package/dist/components/ui/native-select/native-select-option.svelte.d.ts

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

package/dist/components/ui/native-select/native-select.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLSelectAttributes } from "svelte/elements";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLSelectAttributes> = $props();
+</script>
+
+<div class="group/native-select relative w-fit has-[select:disabled]:opacity-50" data-slot="native-select-wrapper">
+	<select
+		bind:value
+		bind:this={ref}
+		data-slot="native-select"
+		class={cn(
+			"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
+			"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
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</select>
+	<ChevronDownIcon
+		class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
+		aria-hidden="true"
+		data-slot="native-select-icon"
+	/>
+</div>

package/dist/components/ui/native-select/native-select.svelte.d.ts

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

package/dist/components/ui/scroll-area/scroll-area.svelte

@@ -5,6 +5,7 @@
 
 	let {
 		ref = $bindable(null),
+		viewportRef = $bindable(null),
 		class: className,
 		orientation = "vertical",
 		scrollbarXClasses = "",
@@ -15,11 +16,13 @@
 		orientation?: "vertical" | "horizontal" | "both" | undefined;
 		scrollbarXClasses?: string | undefined;
 		scrollbarYClasses?: string | undefined;
+		viewportRef?: HTMLElement | null;
 	} = $props();
 </script>
 
 <ScrollAreaPrimitive.Root bind:ref data-slot="scroll-area" class={cn("relative", className)} {...restProps}>
 	<ScrollAreaPrimitive.Viewport
+		bind:ref={viewportRef}
 		data-slot="scroll-area-viewport"
 		class="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
 	>

package/dist/components/ui/scroll-area/scroll-area.svelte.d.ts

@@ -4,7 +4,8 @@ type $$ComponentProps = WithoutChild<ScrollAreaPrimitive.RootProps> & {
     orientation?: "vertical" | "horizontal" | "both" | undefined;
     scrollbarXClasses?: string | undefined;
     scrollbarYClasses?: string | undefined;
+    viewportRef?: HTMLElement | null;
 };
-declare const ScrollArea: import("svelte").Component<$$ComponentProps, {}, "ref">;
+declare const ScrollArea: import("svelte").Component<$$ComponentProps, {}, "ref" | "viewportRef">;
 type ScrollArea = ReturnType<typeof ScrollArea>;
 export default ScrollArea;

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "2.0.2",
+  "version": "2.0.4",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -101,52 +101,52 @@
     }
   },
   "dependencies": {
-    "bits-ui": "2.11.5",
+    "bits-ui": "2.14.0",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^3.1.1"
   },
   "devDependencies": {
     "@internationalized/date": "^3.10.0",
-    "@lucide/svelte": "^0.545.0",
-    "@sveltejs/adapter-auto": "^6.1.1",
-    "@sveltejs/kit": "^2.46.4",
+    "@lucide/svelte": "^0.546.0",
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.47.2",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@tailwindcss/vite": "^4.1.14",
+    "@tailwindcss/vite": "^4.1.15",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.2.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.46.0",
-    "@typescript-eslint/parser": "^8.46.0",
+    "@typescript-eslint/eslint-plugin": "^8.46.2",
+    "@typescript-eslint/parser": "^8.46.2",
     "@vitest/coverage-v8": "3.2.4",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "embla-carousel-svelte": "^8.6.0",
-    "eslint": "^9.37.0",
+    "eslint": "^9.38.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.12.4",
+    "eslint-plugin-svelte": "^3.12.5",
     "formsnap": "^2.0.1",
-    "jsdom": "^27.0.0",
+    "jsdom": "^27.0.1",
     "layerchart": "2.0.0-next.40",
     "mode-watcher": "^1.1.0",
     "paneforge": "^1.0.2",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
-    "prettier-plugin-tailwindcss": "^0.6.14",
-    "publint": "^0.3.14",
-    "svelte": "5.39.11",
+    "prettier-plugin-tailwindcss": "^0.7.1",
+    "publint": "^0.3.15",
+    "svelte": "5.41.1",
     "svelte-check": "^4.3.3",
     "svelte-sonner": "^1.0.5",
-    "sveltekit-superforms": "^2.27.2",
-    "tailwindcss": "^4.1.14",
+    "sveltekit-superforms": "^2.28.0",
+    "tailwindcss": "^4.1.15",
     "tslib": "^2.8.1",
     "tw-animate-css": "1.4.0",
     "typescript": "^5.9.3",
     "vaul-svelte": "1.0.0-next.7",
-    "vite": "^7.1.9",
+    "vite": "^7.1.11",
     "vitest": "^3.2.4",
     "zod": "4.1.12"
   },