@kayord/ui 0.13.6 → 0.13.9

package/README.md

@@ -18,7 +18,7 @@ Pnpm command to install ui library.
 # create a new project in the current directory
 pnpm add -D @kayord/ui @kayord/tw-plugin
 # install peer dependencies
-pnpm add -D lucide-svelte zod sveltekit-superforms tailwindcssAnimate
+pnpm add -D lucide-svelte zod sveltekit-superforms tailwindcss-animate
 ```
 
 ### Manual Setup New Project

package/dist/components/ui/badge/badge.svelte

@@ -40,7 +40,7 @@
 	this={href ? "a" : "span"}
 	bind:this={ref}
 	{href}
-	class={cn(badgeVariants({ variant, className }))}
+	class={cn(badgeVariants({ variant }), className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/button/button.svelte

@@ -53,11 +53,11 @@
 </script>
 
 {#if href}
-	<a bind:this={ref} class={cn(buttonVariants({ variant, size, className }))} {href} {...restProps}>
+	<a bind:this={ref} class={cn(buttonVariants({ variant, size }), className)} {href} {...restProps}>
 		{@render children?.()}
 	</a>
 {:else}
-	<button bind:this={ref} class={cn(buttonVariants({ variant, size, className }))} {type} {...restProps}>
+	<button bind:this={ref} class={cn(buttonVariants({ variant, size }), className)} {type} {...restProps}>
 		{@render children?.()}
 	</button>
 {/if}

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

@@ -15,7 +15,7 @@
 	<Search class="mr-2 size-4 shrink-0 opacity-50" />
 	<CommandPrimitive.Input
 		class={cn(
-			"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+			"flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 			className
 		)}
 		bind:ref

package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte.d.ts

@@ -13,14 +13,14 @@ declare const DropdownMenuContent: import("svelte").Component<{
     trapFocus?: boolean | undefined;
     preventOverflowTextSelection?: boolean | undefined;
     preventScroll?: boolean | undefined;
-    align?: import("bits-ui/dist/bits/utilities/floating-layer/useFloatingLayer.svelte").Align | undefined;
-    side?: import("bits-ui/dist/bits/utilities/floating-layer/useFloatingLayer.svelte").Side | undefined;
+    align?: import("bits-ui/dist/bits/utilities/floating-layer/use-floating-layer.svelte").Align | undefined;
+    side?: import("bits-ui/dist/bits/utilities/floating-layer/use-floating-layer.svelte").Side | undefined;
     sideOffset?: number | undefined;
     alignOffset?: number | undefined | undefined;
     arrowPadding?: number | undefined;
     avoidCollisions?: boolean | undefined | undefined;
-    collisionBoundary?: import("bits-ui/dist/internal/types").Arrayable<import("bits-ui/dist/bits/utilities/floating-layer/useFloatingLayer.svelte").Boundary> | undefined;
-    collisionPadding?: (number | Partial<Record<import("bits-ui/dist/bits/utilities/floating-layer/useFloatingLayer.svelte").Side, number>>) | undefined;
+    collisionBoundary?: import("bits-ui/dist/internal/types").Arrayable<import("bits-ui/dist/bits/utilities/floating-layer/use-floating-layer.svelte").Boundary> | undefined;
+    collisionPadding?: (number | Partial<Record<import("bits-ui/dist/bits/utilities/floating-layer/use-floating-layer.svelte").Side, number>>) | undefined;
     sticky?: "partial" | "always" | undefined;
     hideWhenDetached?: boolean | undefined;
     updatePositionStrategy?: "optimized" | "always" | undefined;
@@ -46,14 +46,14 @@ declare const DropdownMenuContent: import("svelte").Component<{
     trapFocus?: boolean | undefined;
     preventOverflowTextSelection?: boolean | undefined;
     preventScroll?: boolean | undefined;
-    align?: import("bits-ui/dist/bits/utilities/floating-layer/useFloatingLayer.svelte").Align | undefined;
-    side?: import("bits-ui/dist/bits/utilities/floating-layer/useFloatingLayer.svelte").Side | undefined;
+    align?: import("bits-ui/dist/bits/utilities/floating-layer/use-floating-layer.svelte").Align | undefined;
+    side?: import("bits-ui/dist/bits/utilities/floating-layer/use-floating-layer.svelte").Side | undefined;
     sideOffset?: number | undefined;
     alignOffset?: number | undefined | undefined;
     arrowPadding?: number | undefined;
     avoidCollisions?: boolean | undefined | undefined;
-    collisionBoundary?: import("bits-ui/dist/internal/types").Arrayable<import("bits-ui/dist/bits/utilities/floating-layer/useFloatingLayer.svelte").Boundary> | undefined;
-    collisionPadding?: (number | Partial<Record<import("bits-ui/dist/bits/utilities/floating-layer/useFloatingLayer.svelte").Side, number>>) | undefined;
+    collisionBoundary?: import("bits-ui/dist/internal/types").Arrayable<import("bits-ui/dist/bits/utilities/floating-layer/use-floating-layer.svelte").Boundary> | undefined;
+    collisionPadding?: (number | Partial<Record<import("bits-ui/dist/bits/utilities/floating-layer/use-floating-layer.svelte").Side, number>>) | undefined;
     sticky?: "partial" | "always" | undefined;
     hideWhenDetached?: boolean | undefined;
     updatePositionStrategy?: "optimized" | "always" | undefined;

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

@@ -14,7 +14,7 @@
 <input
 	bind:this={ref}
 	class={cn(
-		"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 		className
 	)}
 	bind:value

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

@@ -13,14 +13,14 @@ declare const MenubarContent: import("svelte").Component<{
     trapFocus?: boolean | undefined;
     preventOverflowTextSelection?: boolean | undefined;
     preventScroll?: boolean | undefined;
-    align?: import("bits-ui/dist/bits/utilities/floating-layer/useFloatingLayer.svelte").Align | undefined;
-    side?: import("bits-ui/dist/bits/utilities/floating-layer/useFloatingLayer.svelte").Side | undefined;
+    align?: import("bits-ui/dist/bits/utilities/floating-layer/use-floating-layer.svelte").Align | undefined;
+    side?: import("bits-ui/dist/bits/utilities/floating-layer/use-floating-layer.svelte").Side | undefined;
     sideOffset?: number | undefined;
     alignOffset?: number | undefined | undefined;
     arrowPadding?: number | undefined;
     avoidCollisions?: boolean | undefined | undefined;
-    collisionBoundary?: import("bits-ui/dist/internal/types").Arrayable<import("bits-ui/dist/bits/utilities/floating-layer/useFloatingLayer.svelte").Boundary> | undefined;
-    collisionPadding?: (number | Partial<Record<import("bits-ui/dist/bits/utilities/floating-layer/useFloatingLayer.svelte").Side, number>>) | undefined;
+    collisionBoundary?: import("bits-ui/dist/internal/types").Arrayable<import("bits-ui/dist/bits/utilities/floating-layer/use-floating-layer.svelte").Boundary> | undefined;
+    collisionPadding?: (number | Partial<Record<import("bits-ui/dist/bits/utilities/floating-layer/use-floating-layer.svelte").Side, number>>) | undefined;
     sticky?: "partial" | "always" | undefined;
     hideWhenDetached?: boolean | undefined;
     updatePositionStrategy?: "optimized" | "always" | undefined;
@@ -46,14 +46,14 @@ declare const MenubarContent: import("svelte").Component<{
     trapFocus?: boolean | undefined;
     preventOverflowTextSelection?: boolean | undefined;
     preventScroll?: boolean | undefined;
-    align?: import("bits-ui/dist/bits/utilities/floating-layer/useFloatingLayer.svelte").Align | undefined;
-    side?: import("bits-ui/dist/bits/utilities/floating-layer/useFloatingLayer.svelte").Side | undefined;
+    align?: import("bits-ui/dist/bits/utilities/floating-layer/use-floating-layer.svelte").Align | undefined;
+    side?: import("bits-ui/dist/bits/utilities/floating-layer/use-floating-layer.svelte").Side | undefined;
     sideOffset?: number | undefined;
     alignOffset?: number | undefined | undefined;
     arrowPadding?: number | undefined;
     avoidCollisions?: boolean | undefined | undefined;
-    collisionBoundary?: import("bits-ui/dist/internal/types").Arrayable<import("bits-ui/dist/bits/utilities/floating-layer/useFloatingLayer.svelte").Boundary> | undefined;
-    collisionPadding?: (number | Partial<Record<import("bits-ui/dist/bits/utilities/floating-layer/useFloatingLayer.svelte").Side, number>>) | undefined;
+    collisionBoundary?: import("bits-ui/dist/internal/types").Arrayable<import("bits-ui/dist/bits/utilities/floating-layer/use-floating-layer.svelte").Boundary> | undefined;
+    collisionPadding?: (number | Partial<Record<import("bits-ui/dist/bits/utilities/floating-layer/use-floating-layer.svelte").Side, number>>) | undefined;
     sticky?: "partial" | "always" | undefined;
     hideWhenDetached?: boolean | undefined;
     updatePositionStrategy?: "optimized" | "always" | undefined;

package/dist/components/ui/range-calendar/range-calendar-day.svelte.d.ts

@@ -1,6 +1,6 @@
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 declare const RangeCalendarDay: import("svelte").Component<RangeCalendarPrimitive.DayProps, {
-    class: string | null | undefined;
+    class: string | import("clsx").ClassArray | import("clsx").ClassDictionary | null | undefined;
 }, "ref">;
 type RangeCalendarDay = ReturnType<typeof RangeCalendarDay>;
 export default RangeCalendarDay;

package/dist/components/ui/sheet/sheet-overlay.svelte.d.ts

@@ -1,6 +1,6 @@
 import { Dialog as SheetPrimitive } from "bits-ui";
 declare const SheetOverlay: import("svelte").Component<SheetPrimitive.OverlayProps, {
-    class: string | null | undefined;
+    class: string | import("clsx").ClassArray | import("clsx").ClassDictionary | null | undefined;
 }, "ref">;
 type SheetOverlay = ReturnType<typeof SheetOverlay>;
 export default SheetOverlay;

package/dist/components/ui/sidebar/sidebar-provider.svelte

@@ -10,7 +10,6 @@
 		ref = $bindable(null),
 		open = $bindable(true),
 		onOpenChange = () => {},
-		controlledOpen = false,
 		class: className,
 		style,
 		children,
@@ -18,18 +17,13 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		open?: boolean;
 		onOpenChange?: (open: boolean) => void;
-		controlledOpen?: boolean;
 	} = $props();
 
 	const sidebar = setSidebar({
 		open: () => open,
 		setOpen: (value: boolean) => {
-			if (controlledOpen) {
-				onOpenChange(value);
-			} else {
-				open = value;
-				onOpenChange(value);
-			}
+			open = value;
+			onOpenChange(value);
 
 			// This sets the cookie to keep the sidebar state.
 			document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;

package/dist/components/ui/sidebar/sidebar-provider.svelte.d.ts

@@ -4,7 +4,6 @@ declare const SidebarProvider: import("svelte").Component<HTMLAttributes<HTMLDiv
 } & {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    controlledOpen?: boolean;
 }, {}, "ref" | "open">;
 type SidebarProvider = ReturnType<typeof SidebarProvider>;
 export default SidebarProvider;

package/dist/components/ui/sidebar/sidebar.svelte

@@ -32,7 +32,7 @@
 		{@render children?.()}
 	</div>
 {:else if sidebar.isMobile}
-	<Sheet.Root controlledOpen open={sidebar.openMobile} onOpenChange={sidebar.setOpenMobile} {...restProps}>
+	<Sheet.Root bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)} {...restProps}>
 		<Sheet.Content
 			data-sidebar="sidebar"
 			data-mobile="true"

package/dist/components/ui/slider/slider.svelte

@@ -4,15 +4,19 @@
 
 	let {
 		ref = $bindable(null),
-		value = $bindable([0]),
+		value = $bindable(),
 		class: className,
 		...restProps
 	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
 </script>
 
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
 <SliderPrimitive.Root
+	bind:value={value as never}
 	bind:ref
-	bind:value
 	class={cn("relative flex w-full touch-none select-none items-center", className)}
 	{...restProps}
 >

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

@@ -1,4 +1,4 @@
-import { Slider as SliderPrimitive } from "bits-ui";
-declare const Slider: import("svelte").Component<Omit<Omit<SliderPrimitive.RootProps, "child">, "children">, {}, "ref" | "value">;
+import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+declare const Slider: import("svelte").Component<WithoutChildrenOrChild<SliderPrimitive.RootProps>, {}, "ref" | "value">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

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

@@ -14,7 +14,7 @@
 <textarea
 	bind:this={ref}
 	class={cn(
-		"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 		className
 	)}
 	bind:value

package/dist/components/ui/toggle/toggle.svelte

@@ -42,4 +42,4 @@
 	} = $props();
 </script>
 
-<TogglePrimitive.Root bind:ref bind:pressed class={cn(toggleVariants({ variant, size, className }))} {...restProps} />
+<TogglePrimitive.Root bind:ref bind:pressed class={cn(toggleVariants({ variant, size }), className)} {...restProps} />

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

@@ -77,7 +77,6 @@ declare const Toggle: import("svelte").Component<Omit<{
     pressed?: boolean | undefined;
     onPressedChange?: import("bits-ui/dist/internal/types").OnChangeFn<boolean>;
     disabled?: boolean | null | undefined;
-    controlledPressed?: boolean;
 }, "child" | "children"> & {
     child?: import("svelte").Snippet<[import("bits-ui").ToggleRootSnippetProps & {
         props: Record<string, unknown>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "0.13.6",
+  "version": "0.13.9",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -34,45 +34,45 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.6.0",
-    "bits-ui": "1.0.0-next.71",
+    "bits-ui": "1.0.0-next.77",
     "clsx": "^2.1.1",
-    "embla-carousel-svelte": "8.5.1",
-    "formsnap": "2.0.0-next.1",
+    "embla-carousel-svelte": "8.5.2",
+    "formsnap": "2.0.0",
     "mode-watcher": "^0.5.0",
-    "paneforge": "1.0.0-next.1",
+    "paneforge": "1.0.0-next.2",
     "svelte-sonner": "^0.3.28",
-    "tailwind-merge": "^2.5.5",
+    "tailwind-merge": "^2.6.0",
     "tailwind-variants": "^0.3.0",
     "vaul-svelte": "1.0.0-next.3"
   },
   "devDependencies": {
     "@kayord/tw-plugin": "^1.0.3",
     "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.10.1",
+    "@sveltejs/kit": "^2.15.2",
     "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^5.0.1",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.6",
-    "@typescript-eslint/eslint-plugin": "^8.18.0",
-    "@typescript-eslint/parser": "^8.18.0",
+    "@typescript-eslint/eslint-plugin": "^8.19.1",
+    "@typescript-eslint/parser": "^8.19.1",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.46.1",
-    "happy-dom": "^15.11.7",
-    "lucide-svelte": "^0.468.0",
+    "happy-dom": "^16.3.0",
+    "lucide-svelte": "^0.469.0",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.9",
-    "publint": "^0.2.12",
-    "svelte": "^5.11.2",
+    "publint": "^0.3.0",
+    "svelte": "^5.16.5",
     "svelte-check": "^4.1.1",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
     "tslib": "^2.8.1",
     "typescript": "^5.7.2",
-    "vite": "^6.0.3",
+    "vite": "^6.0.7",
     "vitest": "^2.1.8",
     "zod": "^3.24.1"
   },