@kayord/ui 0.18.5 → 0.19.0

package/dist/components/custom/copy-button/CopyButton.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { Button, type ButtonProps } from "../../ui/button";
+	import { UseClipboard } from "../../../hooks/use-clipboard.svelte";
+	import { cn } from "../../../utils";
+	import { Check, Copy, X } from "@lucide/svelte";
+	import type { Snippet } from "svelte";
+	import { scale } from "svelte/transition";
+
+	// omit href so you can't create a link
+	interface Props extends Omit<ButtonProps, "href"> {
+		text: string;
+		icon?: Snippet<[]>;
+		animationDuration?: number;
+		onCopy?: (status: UseClipboard["status"]) => void;
+	}
+
+	let {
+		text,
+		icon,
+		animationDuration = 500,
+		variant = "ghost",
+		size = "icon",
+		onCopy,
+		class: className,
+		...restProps
+	}: Props = $props();
+
+	const clipboard = new UseClipboard();
+</script>
+
+<Button
+	{...restProps}
+	{variant}
+	{size}
+	class={cn(className)}
+	type="button"
+	name="copy"
+	tabindex={-1}
+	onclick={async () => {
+		const status = await clipboard.copy(text);
+
+		onCopy?.(status);
+	}}
+>
+	{#if clipboard.status === "success"}
+		<div in:scale={{ duration: animationDuration, start: 0.85 }}>
+			<Check />
+			<span class="sr-only">Copied</span>
+		</div>
+	{:else if clipboard.status === "failure"}
+		<div in:scale={{ duration: animationDuration, start: 0.85 }}>
+			<X />
+			<span class="sr-only">Failed to copy</span>
+		</div>
+	{:else}
+		<div in:scale={{ duration: animationDuration, start: 0.85 }}>
+			{#if icon}
+				{@render icon()}
+			{:else}
+				<Copy />
+			{/if}
+			<span class="sr-only">Copy</span>
+		</div>
+	{/if}
+</Button>

package/dist/components/custom/copy-button/CopyButton.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type ButtonProps } from "../../ui/button";
+import { UseClipboard } from "../../../hooks/use-clipboard.svelte";
+import type { Snippet } from "svelte";
+interface Props extends Omit<ButtonProps, "href"> {
+    text: string;
+    icon?: Snippet<[]>;
+    animationDuration?: number;
+    onCopy?: (status: UseClipboard["status"]) => void;
+}
+declare const CopyButton: import("svelte").Component<Props, {}, "">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;

package/dist/components/custom/copy-button/index.d.ts

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

package/dist/components/custom/copy-button/index.js

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

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

@@ -1,6 +1,9 @@
 export { Loader } from "./loader/index.js";
-export { ThemeSwitch } from "./theme-switch/index.js";
 export * from "./data-table/index.js";
 export { ProgressLoading } from "./progress-loading/index.js";
 export { Combobox } from "./combobox/index.js";
 export * from "./action/index.js";
+export { CopyButton } from "./copy-button/index.js";
+export * as TreeView from "./tree-view/index.js";
+export { ThemeSelector } from "./theme-selector/index.js";
+export { LightSwitch } from "./light-switch.svelte/index.js";

package/dist/components/custom/index.js

@@ -1,6 +1,9 @@
 export { Loader } from "./loader/index.js";
-export { ThemeSwitch } from "./theme-switch/index.js";
 export * from "./data-table/index.js";
 export { ProgressLoading } from "./progress-loading/index.js";
 export { Combobox } from "./combobox/index.js";
 export * from "./action/index.js";
+export { CopyButton } from "./copy-button/index.js";
+export * as TreeView from "./tree-view/index.js";
+export { ThemeSelector } from "./theme-selector/index.js";
+export { LightSwitch } from "./light-switch.svelte/index.js";

package/dist/components/custom/light-switch.svelte/LightSwitch.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Sun, Moon } from "@lucide/svelte";
+	import { toggleMode } from "mode-watcher";
+	import { Button } from "../../ui/button/index.js";
+
+	type Props = {
+		variant?: "outline" | "ghost";
+	};
+
+	let { variant = "outline" }: Props = $props();
+</script>
+
+<Button onclick={toggleMode} {variant} size="icon">
+	<Sun class="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+	<Moon class="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+	<span class="sr-only">Toggle theme</span>
+</Button>

package/dist/components/custom/light-switch.svelte/LightSwitch.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    variant?: "outline" | "ghost";
+};
+declare const LightSwitch: import("svelte").Component<Props, {}, "">;
+type LightSwitch = ReturnType<typeof LightSwitch>;
+export default LightSwitch;

package/dist/components/custom/light-switch.svelte/index.d.ts

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

package/dist/components/custom/light-switch.svelte/index.js

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

package/dist/components/custom/theme-selector/ThemeSelector.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Sun, Moon } from "@lucide/svelte";
+	import { resetMode, setMode } from "mode-watcher";
+	import * as DropdownMenu from "../../ui/dropdown-menu/index.js";
+	import { buttonVariants } from "../../ui/button/index.js";
+
+	type Props = {
+		variant?: "outline" | "ghost";
+	};
+
+	let { variant = "outline" }: Props = $props();
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger class={buttonVariants({ variant, size: "icon" })}>
+		<Sun class="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+		<Moon class="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+		<span class="sr-only">Toggle theme</span>
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Item onclick={() => setMode("light")}>Light</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={() => setMode("dark")}>Dark</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={() => resetMode()}>System</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

package/dist/components/custom/theme-selector/ThemeSelector.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    variant?: "outline" | "ghost";
+};
+declare const ThemeSelector: import("svelte").Component<Props, {}, "">;
+type ThemeSelector = ReturnType<typeof ThemeSelector>;
+export default ThemeSelector;

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

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

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

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

package/dist/components/custom/tree-view/TreeView.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import type { Snippet } from "svelte";
+
+	type Props = {
+		class?: string;
+		children?: Snippet<[]>;
+	};
+
+	let { children, class: className }: Props = $props();
+</script>
+
+<div class={cn("flex flex-col", className)}>
+	{@render children?.()}
+</div>

package/dist/components/custom/tree-view/TreeView.svelte.d.ts

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

package/dist/components/custom/tree-view/TreeViewFile.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { File } from "@lucide/svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import { cn } from "../../../utils";
+
+	interface Props extends HTMLButtonAttributes {
+		name: string;
+		icon?: Snippet<[{ name: string }]>;
+	}
+
+	let { name, icon, type = "button", class: className, ...rest }: Props = $props();
+</script>
+
+<button {type} class={cn("flex place-items-center gap-1 pl-[3px]", className)} {...rest}>
+	{#if icon}
+		{@render icon({ name })}
+	{:else}
+		<File class="size-4" />
+	{/if}
+	<span>{name}</span>
+</button>

package/dist/components/custom/tree-view/TreeViewFile.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+interface Props extends HTMLButtonAttributes {
+    name: string;
+    icon?: Snippet<[{
+        name: string;
+    }]>;
+}
+declare const TreeViewFile: import("svelte").Component<Props, {}, "">;
+type TreeViewFile = ReturnType<typeof TreeViewFile>;
+export default TreeViewFile;

package/dist/components/custom/tree-view/TreeViewFolder.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import * as Collapsible from "../../ui/collapsible/index.js";
+	import { Folder, FolderOpen } from "@lucide/svelte";
+	import { cn } from "../../../utils";
+
+	type Props = {
+		name: string;
+		open?: boolean;
+		class?: string;
+		icon?: Snippet<[{ name: string; open: boolean }]>;
+		children?: Snippet<[]>;
+	};
+
+	let { name, open = $bindable(true), class: className, icon, children }: Props = $props();
+</script>
+
+<Collapsible.Root bind:open>
+	<Collapsible.Trigger class={cn("flex place-items-center gap-1", className)}>
+		{#if icon}
+			{@render icon({ name, open })}
+		{:else if open}
+			<FolderOpen class="size-4" />
+		{:else}
+			<Folder class="size-4" />
+		{/if}
+		<span>{name}</span>
+	</Collapsible.Trigger>
+	<Collapsible.Content class="mx-2 border-l">
+		<div class="relative flex place-items-start">
+			<div class="bg-border mx-2 h-full w-[1px]"></div>
+			<div class="flex flex-col">
+				{@render children?.()}
+			</div>
+		</div>
+	</Collapsible.Content>
+</Collapsible.Root>

package/dist/components/custom/tree-view/TreeViewFolder.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+type Props = {
+    name: string;
+    open?: boolean;
+    class?: string;
+    icon?: Snippet<[{
+        name: string;
+        open: boolean;
+    }]>;
+    children?: Snippet<[]>;
+};
+declare const TreeViewFolder: import("svelte").Component<Props, {}, "open">;
+type TreeViewFolder = ReturnType<typeof TreeViewFolder>;
+export default TreeViewFolder;

package/dist/components/custom/tree-view/index.d.ts

@@ -0,0 +1,4 @@
+import TreeView from "./TreeView.svelte";
+import TreeViewFile from "./TreeViewFile.svelte";
+import TreeViewFolder from "./TreeViewFolder.svelte";
+export { TreeView, TreeViewFile, TreeViewFolder, TreeView as Root, TreeViewFile as File, TreeViewFolder as Folder };

package/dist/components/custom/tree-view/index.js

@@ -0,0 +1,4 @@
+import TreeView from "./TreeView.svelte";
+import TreeViewFile from "./TreeViewFile.svelte";
+import TreeViewFolder from "./TreeViewFolder.svelte";
+export { TreeView, TreeViewFile, TreeViewFolder, TreeView as Root, TreeViewFile as File, TreeViewFolder as Folder };

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "0.18.5",
+  "version": "0.19.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,7 +46,7 @@
     "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/package": "^2.3.11",
@@ -56,19 +56,19 @@
     "@testing-library/svelte": "^5.2.7",
     "@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.1",
     "happy-dom": "^17.4.7",
     "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",

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";