@kayord/ui 0.18.5 → 0.19.2

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

@@ -36,6 +36,9 @@ get along, so we shut typescript up by casting `value` to `never`.
 <ToggleGroupPrimitive.Root
 	bind:value={value as never}
 	bind:ref
-	class={cn("flex items-center justify-center gap-1", className)}
+	data-slot="toggle-group"
+	data-variant={variant}
+	data-size={size}
+	class={cn("group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs", className)}
 	{...restProps}
 />

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

@@ -3,6 +3,6 @@ export declare function setToggleGroupCtx(props: ToggleVariants): void;
 export declare function getToggleGroupCtx(): ToggleVariants;
 import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
 type $$ComponentProps = ToggleGroupPrimitive.RootProps & ToggleVariants;
-declare const ToggleGroup: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
+declare const ToggleGroup: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
 type ToggleGroup = ReturnType<typeof ToggleGroup>;
 export default ToggleGroup;

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

@@ -1,6 +1,7 @@
 import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Trigger from "./tooltip-trigger.svelte";
 import Content from "./tooltip-content.svelte";
 declare const Root: import("svelte").Component<TooltipPrimitive.RootProps, {}, "open">;
-declare const Trigger: import("svelte").Component<TooltipPrimitive.TriggerProps, {}, "ref">;
 declare const Provider: import("svelte").Component<TooltipPrimitive.ProviderProps, {}, "">;
-export { Root, Trigger, Content, Provider, Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, };
+declare const Portal: import("svelte").Component<TooltipPrimitive.PortalProps, {}, "">;
+export { Root, Trigger, Content, Provider, Portal, Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, Portal as TooltipPortal, };

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

@@ -1,8 +1,9 @@
 import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Trigger from "./tooltip-trigger.svelte";
 import Content from "./tooltip-content.svelte";
 const Root = TooltipPrimitive.Root;
-const Trigger = TooltipPrimitive.Trigger;
 const Provider = TooltipPrimitive.Provider;
-export { Root, Trigger, Content, Provider, 
+const Portal = TooltipPrimitive.Portal;
+export { Root, Trigger, Content, Provider, Portal, 
 //
-Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, };
+Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, Portal as TooltipPortal, };

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

@@ -5,17 +5,43 @@
 	let {
 		ref = $bindable(null),
 		class: className,
-		sideOffset = 4,
+		sideOffset = 0,
+		side = "top",
+		children,
+		arrowClasses,
 		...restProps
-	}: TooltipPrimitive.ContentProps = $props();
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+	} = $props();
 </script>
 
-<TooltipPrimitive.Content
-	bind:ref
-	{sideOffset}
-	class={cn(
-		"bg-popover text-popover-foreground 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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
-		className
-	)}
-	{...restProps}
-/>
+<TooltipPrimitive.Portal>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			"bg-primary text-primary-foreground 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-right-2 data-[side=right]:slide-in-from-left-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",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						"bg-primary z-50 size-2.5 rotate-45 rounded-[2px]",
+						side === "top" && "translate-x-1/2 translate-y-[calc(-50%_+_2px)]",
+						side === "bottom" && "-translate-x-1/2 -translate-y-[calc(-50%_+_1px)]",
+						side === "right" && "translate-x-[calc(50%_+_2px)] translate-y-1/2",
+						side === "left" && "-translate-y-[calc(50%_-_3px)]",
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPrimitive.Portal>

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

@@ -1,4 +1,7 @@
 import { Tooltip as TooltipPrimitive } from "bits-ui";
-declare const TooltipContent: import("svelte").Component<TooltipPrimitive.ContentProps, {}, "ref">;
+type $$ComponentProps = TooltipPrimitive.ContentProps & {
+    arrowClasses?: string;
+};
+declare const TooltipContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type TooltipContent = ReturnType<typeof TooltipContent>;
 export default TooltipContent;

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />

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

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+declare const TooltipTrigger: import("svelte").Component<TooltipPrimitive.TriggerProps, {}, "ref">;
+type TooltipTrigger = ReturnType<typeof TooltipTrigger>;
+export default TooltipTrigger;

package/dist/hooks/use-clipboard.svelte.d.ts

@@ -0,0 +1,49 @@
+type Options = {
+    /** The time before the copied status is reset. */
+    delay: number;
+};
+/** Use this hook to copy text to the clipboard and show a copied state.
+ *
+ * ## Usage
+ * ```svelte
+ * <script lang="ts">
+ * 		import { UseClipboard } from "./use-clipboard.svelte";
+ *
+ * 		const clipboard = new UseClipboard();
+ * </script>
+ *
+ * <button onclick={clipboard.copy('Hello, World!')}>
+ *     {#if clipboard.copied === 'success'}
+ *         Copied!
+ *     {:else if clipboard.copied === 'failure'}
+ *         Failed to copy!
+ *     {:else}
+ *         Copy
+ *     {/if}
+ * </button>
+ * ```
+ *
+ */
+export declare class UseClipboard {
+    #private;
+    private delay;
+    private timeout;
+    constructor({ delay }?: Partial<Options>);
+    /** Copies the given text to the users clipboard.
+     *
+     * ## Usage
+     * ```ts
+     * clipboard.copy('Hello, World!');
+     * ```
+     *
+     * @param text
+     * @returns
+     */
+    copy(text: string): Promise<"success" | "failure">;
+    /** True when the user has just copied to the clipboard. */
+    get copied(): boolean;
+    /**	Indicates whether a copy has occurred
+     * and gives a status of either `success` or `failure`. */
+    get status(): "success" | "failure" | undefined;
+}
+export {};

package/dist/hooks/use-clipboard.svelte.js

@@ -0,0 +1,70 @@
+/** Use this hook to copy text to the clipboard and show a copied state.
+ *
+ * ## Usage
+ * ```svelte
+ * <script lang="ts">
+ * 		import { UseClipboard } from "./use-clipboard.svelte";
+ *
+ * 		const clipboard = new UseClipboard();
+ * </script>
+ *
+ * <button onclick={clipboard.copy('Hello, World!')}>
+ *     {#if clipboard.copied === 'success'}
+ *         Copied!
+ *     {:else if clipboard.copied === 'failure'}
+ *         Failed to copy!
+ *     {:else}
+ *         Copy
+ *     {/if}
+ * </button>
+ * ```
+ *
+ */
+export class UseClipboard {
+    #copiedStatus = $state();
+    delay;
+    timeout = undefined;
+    constructor({ delay = 500 } = {}) {
+        this.delay = delay;
+    }
+    /** Copies the given text to the users clipboard.
+     *
+     * ## Usage
+     * ```ts
+     * clipboard.copy('Hello, World!');
+     * ```
+     *
+     * @param text
+     * @returns
+     */
+    async copy(text) {
+        if (this.timeout) {
+            this.#copiedStatus = undefined;
+            clearTimeout(this.timeout);
+        }
+        try {
+            await navigator.clipboard.writeText(text);
+            this.#copiedStatus = "success";
+            this.timeout = setTimeout(() => {
+                this.#copiedStatus = undefined;
+            }, this.delay);
+        }
+        catch {
+            // an error can occur when not in the browser or if the user hasn't given clipboard access
+            this.#copiedStatus = "failure";
+            this.timeout = setTimeout(() => {
+                this.#copiedStatus = undefined;
+            }, this.delay);
+        }
+        return this.#copiedStatus;
+    }
+    /** True when the user has just copied to the clipboard. */
+    get copied() {
+        return this.#copiedStatus === "success";
+    }
+    /**	Indicates whether a copy has occurred
+     * and gives a status of either `success` or `failure`. */
+    get status() {
+        return this.#copiedStatus;
+    }
+}

package/dist/utils.d.ts

@@ -1,2 +1,12 @@
 import { type ClassValue } from "clsx";
 export declare function cn(...inputs: ClassValue[]): string;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, "child"> : T;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "0.18.5",
+  "version": "0.19.2",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -28,13 +28,14 @@
   "peerDependencies": {
     "@lucide/svelte": ">= 0.482.0 < 1.0.0",
     "@tanstack/table-core": "^8.20.5",
+    "layerchart": "2.0.0-next.6",
     "svelte": "^5.0.0",
     "sveltekit-superforms": "^2.20.0",
     "zod": "^3.23.8"
   },
   "dependencies": {
-    "@internationalized/date": "^3.8.0",
-    "bits-ui": "1.4.8",
+    "@internationalized/date": "^3.8.1",
+    "bits-ui": "1.5.3",
     "clsx": "^2.1.1",
     "embla-carousel-svelte": "8.6.0",
     "formsnap": "2.0.1",
@@ -46,33 +47,34 @@
     "vaul-svelte": "1.0.0-next.7"
   },
   "devDependencies": {
-    "@lucide/svelte": "^0.510.0",
+    "@lucide/svelte": "^0.511.0",
     "@sveltejs/adapter-auto": "^6.0.1",
-    "@sveltejs/kit": "^2.21.0",
+    "@sveltejs/kit": "^2.21.1",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tailwindcss/vite": "^4.1.7",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/svelte": "^5.2.7",
+    "@testing-library/svelte": "^5.2.8",
     "@typescript-eslint/eslint-plugin": "^8.32.1",
     "@typescript-eslint/parser": "^8.32.1",
-    "eslint": "^9.26.0",
+    "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-svelte": "^3.6.0",
+    "eslint-plugin-svelte": "^3.8.2",
     "happy-dom": "^17.4.7",
+    "layerchart": "2.0.0-next.6",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "publint": "^0.3.12",
-    "svelte": "^5.30.1",
+    "svelte": "5.30.2",
     "svelte-check": "^4.2.1",
     "tailwindcss": "^4.1.7",
     "tslib": "^2.8.1",
-    "tw-animate-css": "1.2.9",
+    "tw-animate-css": "1.3.0",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
-    "vitest": "^3.1.3",
-    "zod": "^3.24.4"
+    "vitest": "^3.1.4",
+    "zod": "^3.25.7"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -90,7 +92,8 @@
     "lint": "prettier --check . && eslint .",
     "format": "prettier --write .",
     "test:unit": "vitest",
-    "lib": "pnpm dlx shadcn-svelte@next add -a -y -o --no-deps && pnpm format && pnpm version --no-git-tag-version patch && ./tw.sh",
+    "lib": "pnpm dlx shadcn-svelte@next add -a -y -o --no-deps && pnpm format && pnpm version --no-git-tag-version patch",
+    "libOld": "pnpm dlx shadcn-svelte@next add -a -y -o --no-deps && pnpm format && pnpm version --no-git-tag-version patch && ./tw.sh",
     "next": "./next.sh"
   }
 }

package/dist/components/custom/theme-switch/ThemeSwitch.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { toggleMode, mode } from "mode-watcher";
-	import Moon from "@lucide/svelte/icons/moon";
-	import Sun from "@lucide/svelte/icons/sun";
-	import { cn } from "../../../utils";
-
-	interface Props {
-		class?: string | undefined | null;
-	}
-
-	let { class: className = undefined }: Props = $props();
-</script>
-
-<button onclick={toggleMode} class={cn("text-primary", className)}>
-	{#if mode.current == "dark"}
-		<Moon />
-	{:else}
-		<Sun />
-	{/if}
-</button>

package/dist/components/custom/theme-switch/ThemeSwitch.svelte.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    class?: string | undefined | null;
-}
-declare const ThemeSwitch: import("svelte").Component<Props, {}, "">;
-type ThemeSwitch = ReturnType<typeof ThemeSwitch>;
-export default ThemeSwitch;

package/dist/components/custom/theme-switch/index.d.ts

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

package/dist/components/custom/theme-switch/index.js

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