@kayord/ui 0.7.2 → 0.8.0

package/dist/components/custom/data-table/DataTable.svelte

@@ -1,4 +1,5 @@
-<script>import { ArrowDown, ArrowUp } from "lucide-svelte";
+<script>import ArrowDown from "lucide-svelte/icons/arrow-down";
+import ArrowUp from "lucide-svelte/icons/arrow-up";
 import { fade } from "svelte/transition";
 import { Button, ProgressLoading, Skeleton } from "../../..";
 import { Subscribe, Render } from "svelte-headless-table";

package/dist/components/custom/data-table/DataTableActions.svelte

@@ -1,6 +1,6 @@
 <script>import * as DropdownMenu from "../../ui/dropdown-menu";
 import { Button } from "../../ui/button";
-import { MoreHorizontal } from "lucide-svelte";
+import MoreHorizontalIcon from "lucide-svelte/icons/ellipsis";
 export let id;
 </script>
 
@@ -8,7 +8,7 @@ export let id;
 	<DropdownMenu.Trigger asChild let:builder>
 		<Button variant="ghost" builders={[builder]} size="icon" class="relative w-8 h-8 p-0">
 			<span class="sr-only">Open menu</span>
-			<MoreHorizontal class="w-4 h-4" />
+			<MoreHorizontalIcon class="w-4 h-4" />
 		</Button>
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Content>

package/dist/components/custom/loader/Loader.svelte

@@ -1,5 +1,6 @@
 <script>import { cn } from "../../../utils";
-import { Loader2 } from "lucide-svelte";
+import {} from "lucide-svelte";
+import LoaderCircleIcon from "lucide-svelte/icons/loader-circle";
 let className = void 0;
 export let isLoading = true;
 export { className as class };
@@ -7,6 +8,6 @@ export { className as class };
 
 {#if isLoading}
 	<div class="flex justify-center">
-		<Loader2 class={cn("h-8 w-8 animate-spin m-2", className)} {...$$restProps} />
+		<LoaderCircleIcon class={cn("h-8 w-8 animate-spin m-2", className)} {...$$restProps} />
 	</div>
 {/if}

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

@@ -1,5 +1,6 @@
 <script>import { toggleMode, mode } from "mode-watcher";
-import { Moon, Sun } from "lucide-svelte";
+import Moon from "lucide-svelte/icons/moon";
+import Sun from "lucide-svelte/icons/sun";
 import { cn } from "../../../utils";
 let className = void 0;
 export { className as class };

package/dist/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -0,0 +1,17 @@
+<script>import { cn } from "../../../utils.js";
+import Ellipsis from "lucide-svelte/icons/ellipsis";
+export let el = void 0;
+let className = void 0;
+export { className as class };
+</script>
+
+<span
+	bind:this={el}
+	role="presentation"
+	aria-hidden="true"
+	class={cn("flex h-9 w-9 items-center justify-center", className)}
+	{...$$restProps}
+>
+	<Ellipsis class="h-4 w-4" />
+	<span class="sr-only">More</span>
+</span>

package/dist/components/ui/breadcrumb/breadcrumb-ellipsis.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+declare const __propDef: {
+    props: HTMLAttributes<HTMLSpanElement> & {
+        el?: HTMLSpanElement | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BreadcrumbEllipsisProps = typeof __propDef.props;
+export type BreadcrumbEllipsisEvents = typeof __propDef.events;
+export type BreadcrumbEllipsisSlots = typeof __propDef.slots;
+export default class BreadcrumbEllipsis extends SvelteComponent<BreadcrumbEllipsisProps, BreadcrumbEllipsisEvents, BreadcrumbEllipsisSlots> {
+}
+export {};

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

@@ -0,0 +1,9 @@
+<script>import { cn } from "../../../utils.js";
+export let el = void 0;
+let className = void 0;
+export { className as class };
+</script>
+
+<li bind:this={el} class={cn("inline-flex items-center gap-1.5", className)}>
+	<slot />
+</li>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLLiAttributes } from "svelte/elements";
+declare const __propDef: {
+    props: HTMLLiAttributes & {
+        el?: HTMLLIElement | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BreadcrumbItemProps = typeof __propDef.props;
+export type BreadcrumbItemEvents = typeof __propDef.events;
+export type BreadcrumbItemSlots = typeof __propDef.slots;
+export default class BreadcrumbItem extends SvelteComponent<BreadcrumbItemProps, BreadcrumbItemEvents, BreadcrumbItemSlots> {
+}
+export {};

package/dist/components/ui/breadcrumb/breadcrumb-link.svelte

@@ -0,0 +1,22 @@
+<script>import { cn } from "../../../utils.js";
+export let href = void 0;
+export let el = void 0;
+export let asChild = false;
+let className = void 0;
+export { className as class };
+let attrs;
+$:
+  attrs = {
+    class: cn("transition-colors hover:text-foreground", className),
+    href,
+    ...$$restProps
+  };
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<a bind:this={el} {...attrs} {href}>
+		<slot {attrs} />
+	</a>
+{/if}

package/dist/components/ui/breadcrumb/breadcrumb-link.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+declare const __propDef: {
+    props: HTMLAnchorAttributes & {
+        el?: HTMLAnchorElement | undefined;
+        asChild?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            attrs: Record<string, unknown>;
+        };
+    };
+};
+export type BreadcrumbLinkProps = typeof __propDef.props;
+export type BreadcrumbLinkEvents = typeof __propDef.events;
+export type BreadcrumbLinkSlots = typeof __propDef.slots;
+export default class BreadcrumbLink extends SvelteComponent<BreadcrumbLinkProps, BreadcrumbLinkEvents, BreadcrumbLinkSlots> {
+}
+export {};

package/dist/components/ui/breadcrumb/breadcrumb-list.svelte

@@ -0,0 +1,13 @@
+<script>import { cn } from "../../../utils.js";
+export let el = void 0;
+let className = void 0;
+export { className as class };
+</script>
+
+<ol
+	bind:this={el}
+	class={cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className)}
+	{...$$restProps}
+>
+	<slot />
+</ol>

package/dist/components/ui/breadcrumb/breadcrumb-list.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLOlAttributes } from "svelte/elements";
+declare const __propDef: {
+    props: HTMLOlAttributes & {
+        el?: HTMLOListElement | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BreadcrumbListProps = typeof __propDef.props;
+export type BreadcrumbListEvents = typeof __propDef.events;
+export type BreadcrumbListSlots = typeof __propDef.slots;
+export default class BreadcrumbList extends SvelteComponent<BreadcrumbListProps, BreadcrumbListEvents, BreadcrumbListSlots> {
+}
+export {};

package/dist/components/ui/breadcrumb/breadcrumb-page.svelte

@@ -0,0 +1,16 @@
+<script>import { cn } from "../../../utils.js";
+export let el = void 0;
+export let className = void 0;
+export { className as class };
+</script>
+
+<span
+	bind:this={el}
+	role="link"
+	aria-disabled="true"
+	aria-current="page"
+	class={cn("font-normal text-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</span>

package/dist/components/ui/breadcrumb/breadcrumb-page.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+declare const __propDef: {
+    props: {
+        class?: string | null | undefined;
+    } & HTMLAttributes<HTMLSpanElement> & {
+        el?: HTMLSpanElement | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BreadcrumbPageProps = typeof __propDef.props;
+export type BreadcrumbPageEvents = typeof __propDef.events;
+export type BreadcrumbPageSlots = typeof __propDef.slots;
+export default class BreadcrumbPage extends SvelteComponent<BreadcrumbPageProps, BreadcrumbPageEvents, BreadcrumbPageSlots> {
+}
+export {};

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

@@ -0,0 +1,12 @@
+<script>import ChevronRight from "lucide-svelte/icons/chevron-right";
+import { cn } from "../../../utils.js";
+export let el = void 0;
+let className = void 0;
+export { className as class };
+</script>
+
+<li role="presentation" aria-hidden="true" class={cn("[&>svg]:size-3.5", className)} bind:this={el} {...$$restProps}>
+	<slot>
+		<ChevronRight />
+	</slot>
+</li>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLLiAttributes } from "svelte/elements";
+declare const __propDef: {
+    props: HTMLLiAttributes & {
+        el?: HTMLLIElement | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BreadcrumbSeparatorProps = typeof __propDef.props;
+export type BreadcrumbSeparatorEvents = typeof __propDef.events;
+export type BreadcrumbSeparatorSlots = typeof __propDef.slots;
+export default class BreadcrumbSeparator extends SvelteComponent<BreadcrumbSeparatorProps, BreadcrumbSeparatorEvents, BreadcrumbSeparatorSlots> {
+}
+export {};

package/dist/components/ui/breadcrumb/breadcrumb.svelte

@@ -0,0 +1,8 @@
+<script>export let el = void 0;
+let className = void 0;
+export { className as class };
+</script>
+
+<nav class={className} bind:this={el} aria-label="breadcrumb" {...$$restProps}>
+	<slot />
+</nav>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+declare const __propDef: {
+    props: HTMLAttributes<HTMLElement> & {
+        el?: HTMLElement | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BreadcrumbProps = typeof __propDef.props;
+export type BreadcrumbEvents = typeof __propDef.events;
+export type BreadcrumbSlots = typeof __propDef.slots;
+export default class Breadcrumb extends SvelteComponent<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
+}
+export {};

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

@@ -0,0 +1,8 @@
+import Root from "./breadcrumb.svelte";
+import Ellipsis from "./breadcrumb-ellipsis.svelte";
+import Item from "./breadcrumb-item.svelte";
+import Separator from "./breadcrumb-separator.svelte";
+import Link from "./breadcrumb-link.svelte";
+import List from "./breadcrumb-list.svelte";
+import Page from "./breadcrumb-page.svelte";
+export { Root, Ellipsis, Item, Separator, Link, List, Page, Root as Breadcrumb, Ellipsis as BreadcrumbEllipsis, Item as BreadcrumbItem, Separator as BreadcrumbSeparator, Link as BreadcrumbLink, List as BreadcrumbList, Page as BreadcrumbPage, };

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

@@ -0,0 +1,10 @@
+import Root from "./breadcrumb.svelte";
+import Ellipsis from "./breadcrumb-ellipsis.svelte";
+import Item from "./breadcrumb-item.svelte";
+import Separator from "./breadcrumb-separator.svelte";
+import Link from "./breadcrumb-link.svelte";
+import List from "./breadcrumb-list.svelte";
+import Page from "./breadcrumb-page.svelte";
+export { Root, Ellipsis, Item, Separator, Link, List, Page, 
+//
+Root as Breadcrumb, Ellipsis as BreadcrumbEllipsis, Item as BreadcrumbItem, Separator as BreadcrumbSeparator, Link as BreadcrumbLink, List as BreadcrumbList, Page as BreadcrumbPage, };

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

@@ -5,6 +5,7 @@ export { AspectRatio } from "./aspect-ratio/index.js";
 export * as Avatar from "./avatar/index.js";
 export { Badge, type Variant as BadgeVariant, badgeVariants } from "./badge/index.js";
 export { Button, type ButtonEvents, type ButtonProps, buttonVariants } from "./button/index.js";
+export * as Breadcrumb from "./breadcrumb/index.js";
 export * as Calendar from "./calendar/index.js";
 export * as Card from "./card/index.js";
 export * as Carousel from "./carousel/index.js";

package/dist/components/ui/index.js

@@ -5,6 +5,7 @@ export { AspectRatio } from "./aspect-ratio/index.js";
 export * as Avatar from "./avatar/index.js";
 export { Badge, badgeVariants } from "./badge/index.js";
 export { Button, buttonVariants } from "./button/index.js";
+export * as Breadcrumb from "./breadcrumb/index.js";
 export * as Calendar from "./calendar/index.js";
 export * as Card from "./card/index.js";
 export * as Carousel from "./carousel/index.js";

package/dist/components/ui/pagination/pagination-ellipsis.svelte

@@ -1,10 +1,10 @@
-<script>import MoreHorizontal from "lucide-svelte/icons/ellipsis";
-import { cn } from "../../../utils.js";
+<script>import { cn } from "../../../utils.js";
+import Ellipsis from "lucide-svelte/icons/ellipsis";
 let className = void 0;
 export { className as class };
 </script>
 
 <span aria-hidden class={cn("flex h-9 w-9 items-center justify-center", className)} {...$$restProps}>
-	<MoreHorizontal class="h-4 w-4" />
+	<Ellipsis class="h-4 w-4" />
 	<span class="sr-only">More pages</span>
 </span>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "0.7.2",
+  "version": "0.8.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -30,46 +30,48 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.5.2",
-    "bits-ui": "^0.19.5",
+    "bits-ui": "^0.19.7",
     "clsx": "^2.1.0",
     "cmdk-sv": "^0.0.15",
     "embla-carousel-svelte": "8.0.0",
     "formsnap": "^0.5.1",
-    "lucide-svelte": "^0.354.0",
-    "mode-watcher": "^0.2.2",
+    "lucide-svelte": "^0.358.0",
+    "mode-watcher": "^0.3.0",
     "paneforge": "^0.0.2",
     "svelte-headless-table": "^0.18.2",
     "svelte-sonner": "^0.3.19",
-    "sveltekit-superforms": "^2.8.1",
-    "tailwind-merge": "^2.2.1",
-    "tailwind-variants": "^0.2.0",
-    "vaul-svelte": "^0.2.4",
+    "sveltekit-superforms": "^2.10.1",
+    "tailwind-merge": "^2.2.2",
+    "tailwind-variants": "^0.2.1",
+    "vaul-svelte": "^0.3.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@playwright/test": "^1.42.1",
     "@sveltejs/adapter-auto": "^3.1.1",
-    "@sveltejs/kit": "^2.5.3",
+    "@sveltejs/kit": "^2.5.4",
     "@sveltejs/package": "^2.3.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/svelte": "^4.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "autoprefixer": "^10.4.18",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.35.1",
-    "postcss": "^8.4.35",
+    "happy-dom": "^13.9.0",
+    "postcss": "^8.4.36",
     "postcss-load-config": "^5.0.3",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.2",
     "publint": "^0.2.7",
     "svelte": "^4.2.12",
-    "svelte-check": "^3.6.6",
+    "svelte-check": "^3.6.7",
     "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
     "typescript": "^5.4.2",
-    "vite": "^5.1.5",
-    "vitest": "^1.3.1"
+    "vite": "^5.1.6",
+    "vitest": "^1.4.0"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -80,12 +82,11 @@
     "build": "vite build && npm run package",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && publint",
-    "test": "npm run test:integration && npm run test:unit",
+    "test": "npm run test:unit",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check . && eslint .",
     "format": "prettier --write .",
-    "test:integration": "playwright test",
     "test:unit": "vitest"
   }
 }