@kayord/ui 2.1.13 → 3.0.0

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

@@ -2,16 +2,16 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const toggleVariants = tv({
-		base: "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-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 inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default: "bg-transparent",
-				outline: "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs",
+				outline: "border-input hover:bg-muted border bg-transparent",
 			},
 			size: {
-				default: "h-9 min-w-9 px-2",
-				sm: "h-8 min-w-8 px-1.5",
-				lg: "h-10 min-w-10 px-2.5",
+				default: "h-8 min-w-8 px-2",
+				sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",
+				lg: "h-9 min-w-9 px-2.5",
 			},
 		},
 		defaultVariants: {

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

@@ -9,7 +9,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
     };
-}, undefined, "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-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 inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+}, undefined, "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
         default: string;
         outline: string;
@@ -29,7 +29,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
     };
-}, undefined, "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-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 inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
+}, undefined, "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
 export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
 export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
 export type ToggleVariants = VariantProps<typeof toggleVariants>;

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

@@ -23,11 +23,11 @@
 	data-size={ctx.size || size}
 	data-spacing={ctx.spacing}
 	class={cn(
+		"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
 		toggleVariants({
 			variant: ctx.variant || variant,
 			size: ctx.size || size,
 		}),
-		"w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10 data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
 		className
 	)}
 	{value}

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

@@ -7,6 +7,7 @@
 
 	interface ToggleGroupContext extends ToggleVariants {
 		spacing?: number;
+		orientation?: "horizontal" | "vertical";
 	}
 
 	export function setToggleGroupCtx(props: ToggleGroupContext) {
@@ -28,14 +29,28 @@
 		class: className,
 		size = "default",
 		spacing = 0,
+		orientation = "horizontal",
 		variant = "default",
 		...restProps
-	}: ToggleGroupPrimitive.RootProps & ToggleVariants & { spacing?: number } = $props();
+	}: ToggleGroupPrimitive.RootProps &
+		ToggleVariants & {
+			spacing?: number;
+			orientation?: "horizontal" | "vertical";
+		} = $props();
 
 	setToggleGroupCtx({
-		variant,
-		size,
-		spacing,
+		get variant() {
+			return variant;
+		},
+		get size() {
+			return size;
+		},
+		get spacing() {
+			return spacing;
+		},
+		get orientation() {
+			return orientation;
+		},
 	});
 </script>
 
@@ -46,13 +61,14 @@ get along, so we shut typescript up by casting `value` to `never`.
 <ToggleGroupPrimitive.Root
 	bind:value={value as never}
 	bind:ref
+	{orientation}
 	data-slot="toggle-group"
 	data-variant={variant}
 	data-size={size}
 	data-spacing={spacing}
 	style={`--gap: ${spacing}`}
 	class={cn(
-		"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+		"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]",
 		className
 	)}
 	{...restProps}

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

@@ -3,12 +3,14 @@ import { toggleVariants } from "../toggle/index.js";
 type ToggleVariants = VariantProps<typeof toggleVariants>;
 interface ToggleGroupContext extends ToggleVariants {
     spacing?: number;
+    orientation?: "horizontal" | "vertical";
 }
 export declare function setToggleGroupCtx(props: ToggleGroupContext): void;
 export declare function getToggleGroupCtx(): Required<ToggleGroupContext>;
 import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
 type $$ComponentProps = ToggleGroupPrimitive.RootProps & ToggleVariants & {
     spacing?: number;
+    orientation?: "horizontal" | "vertical";
 };
 declare const ToggleGroup: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
 type ToggleGroup = ReturnType<typeof ToggleGroup>;

package/dist/components/ui/tooltip/tooltip-content.svelte

@@ -27,7 +27,7 @@
 		{sideOffset}
 		{side}
 		class={cn(
-			"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+			"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-foreground text-background z-50 inline-flex w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin) items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm",
 			className
 		)}
 		{...restProps}
@@ -37,11 +37,11 @@
 			{#snippet child({ props })}
 				<div
 					class={cn(
-						"bg-foreground z-50 size-2.5 rotate-45 rounded-[2px]",
-						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]",
-						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]",
-						"data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2",
-						"data-[side=left]:-translate-y-[calc(50%_-_3px)]",
+						"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]",
+						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%+2px)]",
+						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%+1px)]",
+						"data-[side=right]:translate-x-[calc(50%+2px)] data-[side=right]:translate-y-1/2",
+						"data-[side=left]:-translate-y-[calc(50%-3px)]",
 						arrowClasses
 					)}
 					{...props}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Tooltip as TooltipPrimitive } from "bits-ui";
 
-	let { ...restProps }: TooltipPrimitive.ProviderProps = $props();
+	let { delayDuration = 0, ...restProps }: TooltipPrimitive.ProviderProps = $props();
 </script>
 
-<TooltipPrimitive.Provider {...restProps} />
+<TooltipPrimitive.Provider {delayDuration} {...restProps} />

package/dist/components/ui/tooltip/tooltip.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
 	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import TooltipProvider from "./tooltip-provider.svelte";
 
 	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
 </script>
 
-<TooltipPrimitive.Root bind:open {...restProps} />
+<TooltipProvider>
+	<TooltipPrimitive.Root bind:open {...restProps} />
+</TooltipProvider>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "2.1.13",
+  "version": "3.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/kayordDX/ui"
@@ -105,7 +105,7 @@
     }
   },
   "dependencies": {
-    "bits-ui": "2.16.3",
+    "bits-ui": "2.16.4",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.5.0",
     "tailwind-variants": "^3.2.2"
@@ -114,22 +114,22 @@
     "@eslint/compat": "^2.0.3",
     "@eslint/js": "^10.0.1",
     "@internationalized/date": "^3.12.0",
-    "@lucide/svelte": "^0.577.0",
+    "@lucide/svelte": "^1.7.0",
     "@sveltejs/adapter-auto": "^7.0.1",
     "@sveltejs/kit": "^2.55.0",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
-    "@tailwindcss/vite": "^4.2.1",
+    "@tailwindcss/vite": "^4.2.2",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.8",
-    "@vitest/browser": "^4.1.0",
-    "@vitest/browser-playwright": "^4.1.0",
+    "@vitest/browser": "^4.1.2",
+    "@vitest/browser-playwright": "^4.1.2",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "embla-carousel-svelte": "^8.6.0",
-    "eslint": "^10.0.3",
+    "eslint": "^10.1.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.15.2",
+    "eslint-plugin-svelte": "^3.16.0",
     "formsnap": "^2.0.1",
     "globals": "^17.4.0",
     "layerchart": "2.0.0-next.40",
@@ -140,18 +140,18 @@
     "prettier-plugin-tailwindcss": "^0.7.2",
     "publint": "^0.3.18",
     "runed": "^0.37.1",
-    "svelte": "5.53.12",
+    "svelte": "5.55.0",
     "svelte-check": "^4.4.5",
     "svelte-sonner": "^1.1.0",
-    "sveltekit-superforms": "^2.30.0",
-    "tailwindcss": "^4.2.1",
+    "sveltekit-superforms": "^2.30.1",
+    "tailwindcss": "^4.2.2",
     "tslib": "^2.8.1",
     "tw-animate-css": "1.4.0",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.0",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.57.2",
     "vaul-svelte": "1.0.0-next.7",
-    "vite": "^8.0.0",
-    "vitest": "^4.1.0",
+    "vite": "^8.0.3",
+    "vitest": "^4.1.2",
     "vitest-browser-svelte": "^2.1.0",
     "zod": "4.3.6"
   },