@kayord/ui 2.1.12 → 2.1.14

package/dist/components/ui/chart/chart-style.svelte

@@ -11,7 +11,7 @@
 		if (!colorConfig || !colorConfig.length) return;
 
 		const themeContents = [];
-		for (let [_theme, prefix] of Object.entries(THEMES)) {
+		for (const [_theme, prefix] of Object.entries(THEMES)) {
 			let content = `${prefix} [data-chart=${id}] {\n`;
 			const color = colorConfig.map(([key, itemConfig]) => {
 				const theme = _theme as keyof typeof itemConfig.theme;

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

@@ -38,6 +38,7 @@ export * as Sidebar from "./sidebar/index.js";
 export { Skeleton } from "./skeleton/index.js";
 export { Slider } from "./slider/index.js";
 export { Spinner } from "./spinner/index.js";
+export * as Stepper from "./stepper/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

@@ -38,6 +38,7 @@ export * as Sidebar from "./sidebar/index.js";
 export { Skeleton } from "./skeleton/index.js";
 export { Slider } from "./slider/index.js";
 export { Spinner } from "./spinner/index.js";
+export * as Stepper from "./stepper/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/sheet/sheet-content.svelte

@@ -7,9 +7,9 @@
 				top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
 				bottom:
 					"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-				left: "data-[state=closed]:slide-out-to-start data-[state=open]:slide-in-from-start inset-y-0 start-0 h-full w-3/4 border-e sm:max-w-sm",
+				left: "data-[state=closed]:slide-out-to-start data-[state=open]:slide-in-from-start rtl:data-[state=closed]:slide-out-to-end rtl:data-[state=open]:slide-in-from-end inset-y-0 start-0 h-full w-3/4 border-e sm:max-w-sm",
 				right:
-					"data-[state=closed]:slide-out-to-end data-[state=open]:slide-in-from-end inset-y-0 end-0 h-full w-3/4 border-s sm:max-w-sm",
+					"data-[state=closed]:slide-out-to-end data-[state=open]:slide-in-from-end rtl:data-[state=closed]:slide-out-to-start rtl:data-[state=open]:slide-in-from-start inset-y-0 end-0 h-full w-3/4 border-s sm:max-w-sm",
 			},
 		},
 		defaultVariants: {

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

@@ -18,7 +18,7 @@
 	data-sidebar="rail"
 	data-slot="sidebar-rail"
 	aria-label="Toggle Sidebar"
-	tabIndex={-1}
+	tabindex={-1}
 	onclick={sidebar.toggle}
 	title="Toggle Sidebar"
 	class={cn(

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

@@ -18,6 +18,7 @@
 </script>
 
 <Button
+	bind:ref
 	data-sidebar="trigger"
 	data-slot="sidebar-trigger"
 	variant="ghost"

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

@@ -33,6 +33,7 @@
 {:else if sidebar.isMobile}
 	<Sheet.Root bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)} {...restProps}>
 		<Sheet.Content
+			bind:ref
 			data-sidebar="sidebar"
 			data-slot="sidebar"
 			data-mobile="true"

package/dist/components/ui/stepper/ctx.d.ts

@@ -0,0 +1,8 @@
+type StepperContext = {
+    activeStep: () => number;
+    setStep: (step: number) => void;
+    orientation: () => "horizontal" | "vertical";
+};
+export declare function setStepperContext(props: StepperContext): void;
+export declare function getStepperContext(): StepperContext;
+export {};

package/dist/components/ui/stepper/ctx.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from "svelte";
+const STEPPER_KEY = Symbol("stepper");
+export function setStepperContext(props) {
+    setContext(STEPPER_KEY, props);
+}
+export function getStepperContext() {
+    return getContext(STEPPER_KEY);
+}

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

@@ -0,0 +1,8 @@
+import Stepper from "./stepper.svelte";
+import StepperItem from "./stepper-item.svelte";
+import StepperTrigger from "./stepper-trigger.svelte";
+import StepperIndicator from "./stepper-indicator.svelte";
+import StepperSeparator from "./stepper-separator.svelte";
+import StepperTitle from "./stepper-title.svelte";
+import StepperDescription from "./stepper-description.svelte";
+export { Stepper as Root, StepperItem as Item, StepperTrigger as Trigger, StepperIndicator as Indicator, StepperSeparator as Separator, StepperTitle as Title, StepperDescription as Description, };

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

@@ -0,0 +1,8 @@
+import Stepper from "./stepper.svelte";
+import StepperItem from "./stepper-item.svelte";
+import StepperTrigger from "./stepper-trigger.svelte";
+import StepperIndicator from "./stepper-indicator.svelte";
+import StepperSeparator from "./stepper-separator.svelte";
+import StepperTitle from "./stepper-title.svelte";
+import StepperDescription from "./stepper-description.svelte";
+export { Stepper as Root, StepperItem as Item, StepperTrigger as Trigger, StepperIndicator as Indicator, StepperSeparator as Separator, StepperTitle as Title, StepperDescription as Description, };

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import type { Snippet } from "svelte";
+	let { class: className, children }: { class?: string; children: Snippet } = $props();
+</script>
+
+<p class={cn("text-muted-foreground text-xs", className)}>{@render children()}</p>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    class?: string;
+    children: Snippet;
+};
+declare const StepperDescription: import("svelte").Component<$$ComponentProps, {}, "">;
+type StepperDescription = ReturnType<typeof StepperDescription>;
+export default StepperDescription;

package/dist/components/ui/stepper/stepper-indicator.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import { Check } from "@lucide/svelte";
+	import { getStepperContext } from "./ctx";
+	import type { Snippet } from "svelte";
+
+	let {
+		step,
+		class: className,
+		children,
+		success,
+	}: {
+		step: number;
+		class?: string;
+		children?: Snippet;
+		success?: Snippet;
+	} = $props();
+
+	const ctx = getStepperContext();
+
+	let isCompleted = $derived(step < ctx.activeStep());
+	let isActive = $derived(step === ctx.activeStep());
+</script>
+
+<div
+	class={cn(
+		"relative flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors duration-200",
+		isActive && "border-primary text-primary ring-primary/20 ring-2 ring-offset-2",
+		isCompleted && "border-primary bg-primary text-primary-foreground",
+		!isActive && !isCompleted && "border-muted-foreground/25 text-muted-foreground",
+		className
+	)}
+>
+	{#if isCompleted}
+		{#if success}
+			{@render success()}
+		{:else}
+			<Check class="h-5 w-5" />
+		{/if}
+	{:else if children}
+		{@render children()}
+	{:else}
+		{step + 1}
+	{/if}
+</div>

package/dist/components/ui/stepper/stepper-indicator.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    step: number;
+    class?: string;
+    children?: Snippet;
+    success?: Snippet;
+};
+declare const StepperIndicator: import("svelte").Component<$$ComponentProps, {}, "">;
+type StepperIndicator = ReturnType<typeof StepperIndicator>;
+export default StepperIndicator;

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import { getStepperContext } from "./ctx";
+	import type { Snippet } from "svelte";
+
+	let {
+		step,
+		class: className,
+		children,
+	}: {
+		step: number;
+		class?: string;
+		children: Snippet;
+	} = $props();
+
+	const ctx = getStepperContext();
+
+	let isCompleted = $derived(step < ctx.activeStep());
+	let isActive = $derived(step === ctx.activeStep());
+	let isVertical = $derived(ctx.orientation() === "vertical");
+</script>
+
+<div
+	data-state={isActive ? "active" : isCompleted ? "completed" : "inactive"}
+	class={cn(
+		"group flex items-center",
+		!isVertical && "flex-1 gap-4 last:flex-none",
+		isVertical && "relative flex-col items-start gap-0",
+		className
+	)}
+>
+	{@render children()}
+</div>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    step: number;
+    class?: string;
+    children: Snippet;
+};
+declare const StepperItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type StepperItem = ReturnType<typeof StepperItem>;
+export default StepperItem;

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import { getStepperContext } from "./ctx";
+
+	let { class: className }: { class?: string } = $props();
+	const ctx = getStepperContext();
+	let isVertical = $derived(ctx.orientation() === "vertical");
+</script>
+
+<div
+	class={cn(
+		"bg-muted flex-1",
+
+		!isVertical && "-mt-8 mr-4 ml-4 h-[2px]",
+
+		isVertical && "absolute top-14 -bottom-4 left-[27px] w-[2px]",
+
+		className
+	)}
+>
+	<div
+		class={cn(
+			"bg-primary transition-all duration-200 ease-in-out",
+			!isVertical && "h-full w-full origin-left scale-x-0 group-data-[state=completed]:scale-x-100",
+			isVertical && "h-full w-full origin-top scale-y-0 group-data-[state=completed]:scale-y-100"
+		)}
+	/>
+</div>

package/dist/components/ui/stepper/stepper-separator.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    class?: string;
+};
+declare const StepperSeparator: import("svelte").Component<$$ComponentProps, {}, "">;
+type StepperSeparator = ReturnType<typeof StepperSeparator>;
+export default StepperSeparator;

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import type { Snippet } from "svelte";
+	let { class: className, children }: { class?: string; children: Snippet } = $props();
+</script>
+
+<h3 class={cn("text-sm leading-none font-medium", className)}>{@render children()}</h3>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    class?: string;
+    children: Snippet;
+};
+declare const StepperTitle: import("svelte").Component<$$ComponentProps, {}, "">;
+type StepperTitle = ReturnType<typeof StepperTitle>;
+export default StepperTitle;

package/dist/components/ui/stepper/stepper-trigger.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import { Button } from "../button";
+	import { getStepperContext } from "./ctx";
+	import type { Snippet } from "svelte";
+
+	let {
+		step,
+		class: className,
+		children,
+		...rest
+	}: {
+		step: number;
+		class?: string;
+		children: Snippet;
+		[key: string]: any;
+	} = $props();
+
+	const ctx = getStepperContext();
+	let isVertical = $derived(ctx.orientation() === "vertical");
+</script>
+
+<Button
+	variant="ghost"
+	onclick={() => ctx.setStep(step)}
+	class={cn(
+		"flex h-auto items-center justify-center gap-3 p-2 hover:bg-transparent",
+		!isVertical && "flex-col",
+		isVertical && "flex-row justify-start",
+		className
+	)}
+	{...rest}
+>
+	{@render children()}
+</Button>

package/dist/components/ui/stepper/stepper-trigger.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    step: number;
+    class?: string;
+    children: Snippet;
+    [key: string]: any;
+};
+declare const StepperTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type StepperTrigger = ReturnType<typeof StepperTrigger>;
+export default StepperTrigger;

package/dist/components/ui/stepper/stepper.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import { setStepperContext } from "./ctx";
+	import type { Snippet } from "svelte";
+
+	let {
+		value = $bindable(0),
+		orientation = "horizontal",
+		class: className,
+		children,
+	}: {
+		value: number;
+		orientation?: "horizontal" | "vertical";
+		class?: string;
+		children: Snippet;
+	} = $props();
+
+	setStepperContext({
+		activeStep: () => value,
+		setStep: (s: number) => {
+			value = s;
+		},
+		orientation: () => orientation,
+	});
+</script>
+
+<div
+	class={cn(
+		"flex w-full gap-4",
+		orientation === "vertical" ? "flex-col" : "flex-row items-start justify-between",
+		className
+	)}
+>
+	{@render children()}
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    value: number;
+    orientation?: "horizontal" | "vertical";
+    class?: string;
+    children: Snippet;
+};
+declare const Stepper: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Stepper = ReturnType<typeof Stepper>;
+export default Stepper;

package/dist/components/ui/switch/switch.svelte

@@ -23,7 +23,7 @@
 	<SwitchPrimitive.Thumb
 		data-slot="switch-thumb"
 		class={cn(
-			"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+			"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 rtl:data-[state=checked]:translate-x-[calc(-100%)]"
 		)}
 	/>
 </SwitchPrimitive.Root>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "2.1.12",
+  "version": "2.1.14",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/kayordDX/ui"
@@ -105,54 +105,54 @@
     }
   },
   "dependencies": {
-    "bits-ui": "2.16.2",
+    "bits-ui": "2.16.3",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.5.0",
     "tailwind-variants": "^3.2.2"
   },
   "devDependencies": {
-    "@eslint/compat": "^2.0.2",
+    "@eslint/compat": "^2.0.3",
     "@eslint/js": "^10.0.1",
-    "@internationalized/date": "^3.11.0",
-    "@lucide/svelte": "^0.575.0",
+    "@internationalized/date": "^3.12.0",
+    "@lucide/svelte": "^0.577.0",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.53.4",
+    "@sveltejs/kit": "^2.55.0",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/vite": "^4.2.1",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.8",
-    "@vitest/browser": "^4.0.18",
-    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/browser": "^4.1.0",
+    "@vitest/browser-playwright": "^4.1.0",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "embla-carousel-svelte": "^8.6.0",
-    "eslint": "^10.0.2",
+    "eslint": "^10.0.3",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.15.0",
+    "eslint-plugin-svelte": "^3.15.2",
     "formsnap": "^2.0.1",
     "globals": "^17.4.0",
     "layerchart": "2.0.0-next.40",
     "mode-watcher": "^1.1.0",
     "paneforge": "^1.0.2",
     "prettier": "^3.8.1",
-    "prettier-plugin-svelte": "^3.5.0",
+    "prettier-plugin-svelte": "^3.5.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
-    "publint": "^0.3.17",
+    "publint": "^0.3.18",
     "runed": "^0.37.1",
-    "svelte": "5.53.6",
-    "svelte-check": "^4.4.4",
-    "svelte-sonner": "^1.0.7",
+    "svelte": "5.53.12",
+    "svelte-check": "^4.4.5",
+    "svelte-sonner": "^1.1.0",
     "sveltekit-superforms": "^2.30.0",
     "tailwindcss": "^4.2.1",
     "tslib": "^2.8.1",
     "tw-animate-css": "1.4.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.56.1",
+    "typescript-eslint": "^8.57.1",
     "vaul-svelte": "1.0.0-next.7",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18",
-    "vitest-browser-svelte": "^2.0.2",
+    "vite": "^8.0.0",
+    "vitest": "^4.1.0",
+    "vitest-browser-svelte": "^2.1.0",
     "zod": "4.3.6"
   },
   "svelte": "./dist/index.js",