@kayord/ui 1.1.18 → 2.0.0

package/README.md

@@ -33,6 +33,62 @@ npx svelte-add@latest tailwindcss
 pnpm i
 ```
 
+## Peer Dependencies
+
+Kayord UI exports components individually. Some components require additional peer dependencies. Install only those needed for the components you use.
+
+### Core Peer Dependencies (required for most components)
+
+- `svelte`
+- `@lucide/svelte`
+- `mode-watcher`
+
+### Component-Specific Peer Dependencies
+
+| Component/Feature               | Peer Dependencies to Install                                               |
+| ------------------------------- | -------------------------------------------------------------------------- |
+| **Charts** (`chart/`)           | `layerchart`, `d3-scale`, `d3-shape`, `@types/d3-scale`, `@types/d3-shape` |
+| **Carousel** (`carousel/`)      | `embla-carousel-svelte`                                                    |
+| **Data Table** (`data-table/`)  | `@tanstack/table-core`                                                     |
+| **Drawer** (`drawer/`)          | `vaul-svelte`                                                              |
+| **Form** (`form/`)              | `formsnap`, `sveltekit-superforms`                                         |
+| **Date/Calendar** (`calendar/`) | `@internationalized/date`                                                  |
+| **Resizable** (`resizable/`)    | `paneforge`                                                                |
+| **Notifications** (`sonner/`)   | `svelte-sonner`                                                            |
+
+> **Note:** All above dependencies are listed as optional peer dependencies. Only install those required for the components you use.
+
+### Example Installation
+
+```bash
+# Core dependencies
+pnpm add -D svelte @lucide/svelte tailwindcss-animate mode-watcher
+
+# For charts
+pnpm add -D layerchart d3-scale d3-shape @types/d3-scale @types/d3-shape
+
+# For carousel
+pnpm add -D embla-carousel-svelte
+
+# For data table
+pnpm add -D @tanstack/table-core
+
+# For drawer
+pnpm add -D vaul-svelte
+
+# For forms
+pnpm add -D formsnap zod sveltekit-superforms
+
+# For calendar/date
+pnpm add -D @internationalized/date
+
+# For resizable
+pnpm add -D paneforge
+
+# For notifications
+pnpm add -D svelte-sonner
+```
+
 ### Add app.css and also include tailwindcss-animate
 
 ```css
@@ -43,161 +99,161 @@ pnpm i
 
 /* Button Defaults */
 @layer base {
-	button:not(:disabled),
-	[role="button"]:not(:disabled) {
-		cursor: pointer;
-	}
+ button:not(:disabled),
+ [role="button"]:not(:disabled) {
+  cursor: pointer;
+ }
 }
 
 :root {
-	--accent-foreground: 240 5.9% 10%;
-	--accent: 240 4.8% 95.9%;
-	--background: 0 0% 100%;
-	--border: 240 5.9% 90%;
-	--card-foreground: 240 10% 3.9%;
-	--card: 0 0% 100%;
-	--destructive-foreground: 0 0% 98%;
-	--destructive: 0 84.2% 60.2%;
-	--foreground: 240 10% 3.9%;
-	--input: 240 5.9% 90%;
-	--muted-foreground: 240 3.8% 46.1%;
-	--muted: 240 4.8% 95.9%;
-	--popover-foreground: 240 10% 3.9%;
-	--popover: 0 0% 100%;
-	--primary-foreground: 0 0% 98%;
-	--primary: 240 5.9% 10%;
-	--radius: 0.5rem;
-	--ring: 240 5.9% 10%;
-	--secondary-foreground: 240 5.9% 10%;
-	--secondary: 240 4.8% 95.9%;
-	--sidebar-accent-foreground: 240 5.9% 10%;
-	--sidebar-accent: 240 4.8% 95.9%;
-	--sidebar-background: 0 0% 98%;
-	--sidebar-border: 220 13% 91%;
-	--sidebar-foreground: 240 5.3% 26.1%;
-	--sidebar-primary-foreground: 0 0% 98%;
-	--sidebar-primary: 232 27% 35%;
-	--sidebar-ring: 217.2 91.2% 59.8%;
+ --accent-foreground: 240 5.9% 10%;
+ --accent: 240 4.8% 95.9%;
+ --background: 0 0% 100%;
+ --border: 240 5.9% 90%;
+ --card-foreground: 240 10% 3.9%;
+ --card: 0 0% 100%;
+ --destructive-foreground: 0 0% 98%;
+ --destructive: 0 84.2% 60.2%;
+ --foreground: 240 10% 3.9%;
+ --input: 240 5.9% 90%;
+ --muted-foreground: 240 3.8% 46.1%;
+ --muted: 240 4.8% 95.9%;
+ --popover-foreground: 240 10% 3.9%;
+ --popover: 0 0% 100%;
+ --primary-foreground: 0 0% 98%;
+ --primary: 240 5.9% 10%;
+ --radius: 0.5rem;
+ --ring: 240 5.9% 10%;
+ --secondary-foreground: 240 5.9% 10%;
+ --secondary: 240 4.8% 95.9%;
+ --sidebar-accent-foreground: 240 5.9% 10%;
+ --sidebar-accent: 240 4.8% 95.9%;
+ --sidebar-background: 0 0% 98%;
+ --sidebar-border: 220 13% 91%;
+ --sidebar-foreground: 240 5.3% 26.1%;
+ --sidebar-primary-foreground: 0 0% 98%;
+ --sidebar-primary: 232 27% 35%;
+ --sidebar-ring: 217.2 91.2% 59.8%;
 }
 .dark {
-	--background: 240 10% 3.9%;
-	--foreground: 0 0% 98%;
-	--card: 240 10% 3.9%;
-	--card-foreground: 0 0% 98%;
-	--popover: 240 10% 3.9%;
-	--popover-foreground: 0 0% 98%;
-	--primary: 0 0% 98%;
-	--primary-foreground: 240 5.9% 10%;
-	--secondary: 240 3.7% 15.9%;
-	--secondary-foreground: 0 0% 98%;
-	--muted: 240 3.7% 15.9%;
-	--muted-foreground: 240 5% 64.9%;
-	--accent: 240 3.7% 15.9%;
-	--accent-foreground: 0 0% 98%;
-	--destructive: 0 62.8% 30.6%;
-	--destructive-foreground: 0 0% 98%;
-	--border: 240 3.7% 15.9%;
-	--input: 240 3.7% 15.9%;
-	--ring: 240 4.9% 83.9%;
-	--sidebar-background: 221, 40%, 8%;
-	--sidebar-foreground: 240 4.8% 95.9%;
-	--sidebar-primary: 232 27% 35%;
-	--sidebar-primary-foreground: 0 0% 100%;
-	--sidebar-accent: 221, 40%, 13%;
-	--sidebar-accent-foreground: 240 4.8% 95.9%;
-	--sidebar-border: 240 3.7% 15.9%;
-	--sidebar-ring: 217.2 91.2% 59.8%;
+ --background: 240 10% 3.9%;
+ --foreground: 0 0% 98%;
+ --card: 240 10% 3.9%;
+ --card-foreground: 0 0% 98%;
+ --popover: 240 10% 3.9%;
+ --popover-foreground: 0 0% 98%;
+ --primary: 0 0% 98%;
+ --primary-foreground: 240 5.9% 10%;
+ --secondary: 240 3.7% 15.9%;
+ --secondary-foreground: 0 0% 98%;
+ --muted: 240 3.7% 15.9%;
+ --muted-foreground: 240 5% 64.9%;
+ --accent: 240 3.7% 15.9%;
+ --accent-foreground: 0 0% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 240 3.7% 15.9%;
+ --input: 240 3.7% 15.9%;
+ --ring: 240 4.9% 83.9%;
+ --sidebar-background: 221, 40%, 8%;
+ --sidebar-foreground: 240 4.8% 95.9%;
+ --sidebar-primary: 232 27% 35%;
+ --sidebar-primary-foreground: 0 0% 100%;
+ --sidebar-accent: 221, 40%, 13%;
+ --sidebar-accent-foreground: 240 4.8% 95.9%;
+ --sidebar-border: 240 3.7% 15.9%;
+ --sidebar-ring: 217.2 91.2% 59.8%;
 }
 
 @theme inline {
-	/* Fonts */
-	--font-sans:
-		"Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-		"Noto Color Emoji";
-	--font-mono:
-		"Source Code Pro Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-		monospace;
-
-	/* Colors */
-	--color-border: hsl(var(--border));
-	--color-input: hsl(var(--input));
-	--color-ring: hsl(var(--ring));
-	--color-background: hsl(var(--background));
-	--color-foreground: hsl(var(--foreground));
-	--color-primary: hsl(var(--primary));
-	--color-primary-foreground: hsl(var(--primary-foreground));
-	--color-secondary: hsl(var(--secondary));
-	--color-secondary-foreground: hsl(var(--secondary-foreground));
-	--color-destructive: hsl(var(--destructive));
-	--color-destructive-foreground: hsl(var(--destructive-foreground));
-	--color-caution: var(--color-red-500);
-	--color-warning: var(--color-amber-500);
-	--color-info: var(--color-sky-500);
-	--color-muted: hsl(var(--muted));
-	--color-muted-foreground: hsl(var(--muted-foreground));
-	--color-accent: hsl(var(--accent));
-	--color-accent-foreground: hsl(var(--accent-foreground));
-	--color-popover: hsl(var(--popover));
-	--color-popover-foreground: hsl(var(--popover-foreground));
-	--color-card: hsl(var(--card));
-	--color-card-foreground: hsl(var(--card-foreground));
-	--color-sidebar: hsl(var(--sidebar-background));
-	--color-sidebar-foreground: hsl(var(--sidebar-foreground));
-	--color-sidebar-primary: hsl(var(--sidebar-primary));
-	--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
-	--color-sidebar-accent: hsl(var(--sidebar-accent));
-	--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
-	--color-sidebar-border: hsl(var(--sidebar-border));
-	--color-sidebar-ring: hsl(var(--sidebar-ring));
-
-	/* Border */
-	--radius-xl: calc(var(--radius) + 4px);
-	--radius-lg: var(--radius);
-	--radius-md: calc(var(--radius) - 2px);
-	--radius-sm: calc(var(--radius) - 4px);
-
-	/* Animations */
-	--animate-accordion-down: 0.2s ease-out accordion-down;
-	--animate-accordion-up: 0.2s ease-out accordion-up;
-	--animate-caret-blink: 1.25s ease-out infinite caret-blink;
-
-	/* Keyframes */
-	@keyframes accordion-down {
-		from: {
-			height: 0;
-		}
-		to: {
-			height: var(--bits-accordion-content-height);
-		}
-	}
-	@keyframes accordion-up {
-		from: {
-			height: var(--bits-accordion-content-height);
-		}
-		to: {
-			height: 0;
-		}
-	}
-	@keyframes caret-blink {
-		0%,
-		70%,
-		100% {
-			opacity: 1;
-		}
-		20%,
-		50% {
-			opacity: 0;
-		}
-	}
+ /* Fonts */
+ --font-sans:
+  "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+  "Noto Color Emoji";
+ --font-mono:
+  "Source Code Pro Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+  monospace;
+
+ /* Colors */
+ --color-border: hsl(var(--border));
+ --color-input: hsl(var(--input));
+ --color-ring: hsl(var(--ring));
+ --color-background: hsl(var(--background));
+ --color-foreground: hsl(var(--foreground));
+ --color-primary: hsl(var(--primary));
+ --color-primary-foreground: hsl(var(--primary-foreground));
+ --color-secondary: hsl(var(--secondary));
+ --color-secondary-foreground: hsl(var(--secondary-foreground));
+ --color-destructive: hsl(var(--destructive));
+ --color-destructive-foreground: hsl(var(--destructive-foreground));
+ --color-caution: var(--color-red-500);
+ --color-warning: var(--color-amber-500);
+ --color-info: var(--color-sky-500);
+ --color-muted: hsl(var(--muted));
+ --color-muted-foreground: hsl(var(--muted-foreground));
+ --color-accent: hsl(var(--accent));
+ --color-accent-foreground: hsl(var(--accent-foreground));
+ --color-popover: hsl(var(--popover));
+ --color-popover-foreground: hsl(var(--popover-foreground));
+ --color-card: hsl(var(--card));
+ --color-card-foreground: hsl(var(--card-foreground));
+ --color-sidebar: hsl(var(--sidebar-background));
+ --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+ --color-sidebar-primary: hsl(var(--sidebar-primary));
+ --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+ --color-sidebar-accent: hsl(var(--sidebar-accent));
+ --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+ --color-sidebar-border: hsl(var(--sidebar-border));
+ --color-sidebar-ring: hsl(var(--sidebar-ring));
+
+ /* Border */
+ --radius-xl: calc(var(--radius) + 4px);
+ --radius-lg: var(--radius);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-sm: calc(var(--radius) - 4px);
+
+ /* Animations */
+ --animate-accordion-down: 0.2s ease-out accordion-down;
+ --animate-accordion-up: 0.2s ease-out accordion-up;
+ --animate-caret-blink: 1.25s ease-out infinite caret-blink;
+
+ /* Keyframes */
+ @keyframes accordion-down {
+  from: {
+   height: 0;
+  }
+  to: {
+   height: var(--bits-accordion-content-height);
+  }
+ }
+ @keyframes accordion-up {
+  from: {
+   height: var(--bits-accordion-content-height);
+  }
+  to: {
+   height: 0;
+  }
+ }
+ @keyframes caret-blink {
+  0%,
+  70%,
+  100% {
+   opacity: 1;
+  }
+  20%,
+  50% {
+   opacity: 0;
+  }
+ }
 }
 
 @layer base {
-	* {
-		@apply border-border;
-	}
-	body {
-		@apply bg-background text-foreground;
-	}
+ * {
+  @apply border-border;
+ }
+ body {
+  @apply bg-background text-foreground;
+ }
 }
 ```
 
@@ -208,7 +264,7 @@ pnpm i
 import { CustomOptions, CustomColumnMeta } from "@kayord/ui";
 
 declare module "@tanstack/table-core" {
-	interface ColumnMeta<TData extends RowData, TValue> extends CustomColumnMeta {}
-	interface TableOptionsResolved<TData extends RowData> extends CustomOptions {}
+ interface ColumnMeta<TData extends RowData, TValue> extends CustomColumnMeta {}
+ interface TableOptionsResolved<TData extends RowData> extends CustomOptions {}
 }
 ```

package/dist/calendar/index.d.ts

@@ -0,0 +1,2 @@
+export { Calendar } from "../components/ui/calendar/index";
+export { RangeCalendar } from "../components/ui/range-calendar/index.js";

package/dist/calendar/index.js

@@ -0,0 +1,2 @@
+export { Calendar } from "../components/ui/calendar/index";
+export { RangeCalendar } from "../components/ui/range-calendar/index.js";

package/dist/carousel/index.d.ts

@@ -0,0 +1 @@
+export * as Carousel from "../components/ui/carousel/index";

package/dist/carousel/index.js

@@ -0,0 +1 @@
+export * as Carousel from "../components/ui/carousel/index";

package/dist/chart/index.d.ts

@@ -0,0 +1 @@
+export * as Chart from "../components/ui/chart/index";

package/dist/chart/index.js

@@ -0,0 +1 @@
+export * as Chart from "../components/ui/chart/index";

package/dist/components/custom/action/Actions.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import * as DropdownMenu from "../../ui/dropdown-menu";
-	import { Button } from "../../ui/button";
+	import { Button, buttonVariants } from "../../ui/button";
 	import EllipsisVerticalIcon from "@lucide/svelte/icons/ellipsis-vertical";
 	import { isActionGroup, isActionType, type ActionsType } from "./types";
 	import Action from "./Action.svelte";
@@ -14,15 +14,13 @@
 </script>
 
 <DropdownMenu.Root>
-	<DropdownMenu.Trigger>
-		<Button {variant} {size} class={cn(className)}>
-			{#if ActionIcon}
-				<ActionIcon />
-			{:else}
-				<EllipsisVerticalIcon class="h-4 w-4" />
-			{/if}
-			{text}
-		</Button>
+	<DropdownMenu.Trigger class={cn(buttonVariants({ variant, size }), className)}>
+		{#if ActionIcon}
+			<ActionIcon />
+		{:else}
+			<EllipsisVerticalIcon class="h-4 w-4" />
+		{/if}
+		{text}
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Content>
 		{#each actions as action}

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

@@ -1,5 +1,6 @@
 <script lang="ts" generics="T">
-	import { FlexRender, Table } from "../../..";
+	import { Table } from "../../..";
+	import { FlexRender } from "../../../data-table";
 	import { type Header, type Table as TypeType } from "@tanstack/table-core";
 
 	interface Props<T> {

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

@@ -1,5 +1,6 @@
 <script lang="ts" generics="T">
-	import { FlexRender, Table } from "../../..";
+	import { Table } from "../../..";
+	import { FlexRender } from "../../../data-table";
 	import { type Header, type Table as TypeType } from "@tanstack/table-core";
 	import { ArrowUpDownIcon, ArrowDownIcon, ArrowUpIcon } from "@lucide/svelte";
 

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

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T">
 	import * as DropdownMenu from "../../ui/dropdown-menu";
-	import { Button } from "../../ui/button";
+	import { Button, buttonVariants } from "../../ui/button";
 	import { Settings2Icon } from "@lucide/svelte";
 	import type { Table } from "@tanstack/table-core";
 
@@ -12,10 +12,8 @@
 </script>
 
 <DropdownMenu.Root>
-	<DropdownMenu.Trigger>
-		<Button variant="outline" size="sm">
-			<Settings2Icon class="mr-2 h-4 w-4" /> View
-		</Button>
+	<DropdownMenu.Trigger class={buttonVariants({ variant: "outline", size: "sm" })}>
+		<Settings2Icon /> View
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Content>
 		<DropdownMenu.Label>Toggle columns</DropdownMenu.Label>

package/dist/components/custom/data-table/shad-table.svelte.js

@@ -1,6 +1,6 @@
 import { createTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, } from "@tanstack/table-core";
 import DataTableCheckbox from "./DataTableCheckbox.svelte";
-import { renderComponent } from "../../ui";
+import { renderComponent } from "../../../data-table";
 import { mergeObjects } from "../../ui/data-table/data-table.svelte";
 export function createShadTable(shadOptions) {
     if (!shadOptions.getCoreRowModel) {

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

@@ -1,5 +1,4 @@
 export { Loader } from "./loader/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";

package/dist/components/custom/index.js

@@ -1,5 +1,4 @@
 export { Loader } from "./loader/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";

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

@@ -7,21 +7,15 @@ export { Badge, badgeVariants, type BadgeVariant } from "./badge/index.js";
 export * as Breadcrumb from "./breadcrumb/index.js";
 export * as ButtonGroup from "./button-group/index.js";
 export { Button, type ButtonProps, buttonVariants } from "./button/index.js";
-export { Calendar } from "./calendar/index.js";
 export * as Card from "./card/index.js";
-export * as Carousel from "./carousel/index.js";
-export * as Chart from "./chart/index.js";
 export { Checkbox } from "./checkbox/index.js";
 export * as Collapsible from "./collapsible/index.js";
 export * as Command from "./command/index.js";
 export * as ContextMenu from "./context-menu/index.js";
-export { FlexRender, renderComponent, renderSnippet, createSvelteTable, createSvelteTable as createTable, } from "./data-table/index.js";
 export * as Dialog from "./dialog/index.js";
-export * as Drawer from "./drawer/index.js";
 export * as DropdownMenu from "./dropdown-menu/index.js";
 export * as Empty from "./empty/index.js";
 export * as Field from "./field/index.js";
-export * as Form from "./form/index.js";
 export * as HoverCard from "./hover-card/index.js";
 export * as InputGroup from "./input-group/index.js";
 export { Input } from "./input/index.js";
@@ -34,8 +28,6 @@ export * as Pagination from "./pagination/index.js";
 export * as Popover from "./popover/index.js";
 export { Progress } from "./progress/index.js";
 export * as RadioGroup from "./radio-group/index.js";
-export * as RangeCalendar from "./range-calendar/index.js";
-export * as Resizable from "./resizable/index.js";
 export { ScrollArea } from "./scroll-area/index.js";
 export * as Select from "./select/index.js";
 export { Separator } from "./separator/index.js";
@@ -43,8 +35,6 @@ export * as Sheet from "./sheet/index.js";
 export * as Sidebar from "./sidebar/index.js";
 export { Skeleton } from "./skeleton/index.js";
 export { Slider } from "./slider/index.js";
-export { Toaster } from "./sonner/index.js";
-export { toast } from "svelte-sonner";
 export { Switch } from "./switch/index.js";
 export { Spinner } from "./spinner/index.js";
 export * as Table from "./table/index.js";

package/dist/components/ui/index.js

@@ -7,21 +7,15 @@ export { Badge, badgeVariants } from "./badge/index.js";
 export * as Breadcrumb from "./breadcrumb/index.js";
 export * as ButtonGroup from "./button-group/index.js";
 export { Button, buttonVariants } from "./button/index.js";
-export { Calendar } from "./calendar/index.js";
 export * as Card from "./card/index.js";
-export * as Carousel from "./carousel/index.js";
-export * as Chart from "./chart/index.js";
 export { Checkbox } from "./checkbox/index.js";
 export * as Collapsible from "./collapsible/index.js";
 export * as Command from "./command/index.js";
 export * as ContextMenu from "./context-menu/index.js";
-export { FlexRender, renderComponent, renderSnippet, createSvelteTable, createSvelteTable as createTable, } from "./data-table/index.js";
 export * as Dialog from "./dialog/index.js";
-export * as Drawer from "./drawer/index.js";
 export * as DropdownMenu from "./dropdown-menu/index.js";
 export * as Empty from "./empty/index.js";
 export * as Field from "./field/index.js";
-export * as Form from "./form/index.js";
 export * as HoverCard from "./hover-card/index.js";
 export * as InputGroup from "./input-group/index.js";
 export { Input } from "./input/index.js";
@@ -34,8 +28,6 @@ export * as Pagination from "./pagination/index.js";
 export * as Popover from "./popover/index.js";
 export { Progress } from "./progress/index.js";
 export * as RadioGroup from "./radio-group/index.js";
-export * as RangeCalendar from "./range-calendar/index.js";
-export * as Resizable from "./resizable/index.js";
 export { ScrollArea } from "./scroll-area/index.js";
 export * as Select from "./select/index.js";
 export { Separator } from "./separator/index.js";
@@ -43,8 +35,6 @@ export * as Sheet from "./sheet/index.js";
 export * as Sidebar from "./sidebar/index.js";
 export { Skeleton } from "./skeleton/index.js";
 export { Slider } from "./slider/index.js";
-export { Toaster } from "./sonner/index.js";
-export { toast } from "svelte-sonner";
 export { Switch } from "./switch/index.js";
 export { Spinner } from "./spinner/index.js";
 export * as Table from "./table/index.js";

package/dist/components/ui/input/input.svelte

@@ -24,7 +24,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50",
 			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
 			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 			className

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

@@ -3,7 +3,7 @@
 	import type { ComponentProps } from "svelte";
 	import { Input } from "../input/index.js";
 
-	let { class: className, ...props }: ComponentProps<typeof Input> = $props();
+	let { value = $bindable(), class: className, ...props }: ComponentProps<typeof Input> = $props();
 </script>
 
 <Input
@@ -12,5 +12,6 @@
 		"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
 		className
 	)}
+	bind:value
 	{...props}
 />

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

@@ -2,10 +2,10 @@ declare const InputGroupInput: import("svelte").Component<(Omit<import("svelte/e
     type: "file";
     files?: FileList;
 } | {
-    type?: "number" | "hidden" | "color" | "search" | "button" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "date" | "time" | "submit" | "reset" | "month" | "week" | "datetime-local" | "image" | "password" | "range";
+    type?: "number" | "hidden" | "color" | "search" | "button" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "date" | "time" | "submit" | "reset" | "datetime-local" | "image" | "month" | "password" | "range" | "week";
     files?: undefined;
 })) & {
     ref?: HTMLElement | null | undefined;
-}, {}, "">;
+}, {}, "value">;
 type InputGroupInput = ReturnType<typeof InputGroupInput>;
 export default InputGroupInput;

package/dist/components/ui/input-group/input-group-textarea.svelte

@@ -3,7 +3,7 @@
 	import { Textarea } from "../textarea/index.js";
 	import type { ComponentProps } from "svelte";
 
-	let { class: className, ...props }: ComponentProps<typeof Textarea> = $props();
+	let { value = $bindable(), class: className, ...props }: ComponentProps<typeof Textarea> = $props();
 </script>
 
 <Textarea
@@ -12,5 +12,6 @@
 		"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
 		className
 	)}
+	bind:value
 	{...props}
 />

package/dist/components/ui/input-group/input-group-textarea.svelte.d.ts

@@ -1,3 +1,3 @@
-declare const InputGroupTextarea: import("svelte").Component<Omit<import("../../../utils.js").WithElementRef<import("svelte/elements").HTMLTextareaAttributes>, "children">, {}, "">;
+declare const InputGroupTextarea: import("svelte").Component<Omit<import("../../../utils.js").WithElementRef<import("svelte/elements").HTMLTextareaAttributes>, "children">, {}, "value">;
 type InputGroupTextarea = ReturnType<typeof InputGroupTextarea>;
 export default InputGroupTextarea;

package/dist/components/ui/sidebar/sidebar-input.svelte.d.ts

@@ -2,7 +2,7 @@ declare const SidebarInput: import("svelte").Component<(Omit<import("svelte/elem
     type: "file";
     files?: FileList;
 } | {
-    type?: "number" | "hidden" | "color" | "search" | "button" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "date" | "time" | "submit" | "reset" | "month" | "week" | "datetime-local" | "image" | "password" | "range";
+    type?: "number" | "hidden" | "color" | "search" | "button" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "date" | "time" | "submit" | "reset" | "datetime-local" | "image" | "month" | "password" | "range" | "week";
     files?: undefined;
 })) & {
     ref?: HTMLElement | null | undefined;

package/dist/data-table/index.d.ts

@@ -0,0 +1,2 @@
+export { FlexRender, renderComponent, renderSnippet, createSvelteTable, createSvelteTable as createTable, } from "../components/ui/data-table/index.js";
+export * from "../components/custom/data-table/index.js";

package/dist/data-table/index.js

@@ -0,0 +1,2 @@
+export { FlexRender, renderComponent, renderSnippet, createSvelteTable, createSvelteTable as createTable, } from "../components/ui/data-table/index.js";
+export * from "../components/custom/data-table/index.js";

package/dist/drawer/index.d.ts

@@ -0,0 +1 @@
+export * as Drawer from "../components/ui/drawer/index";

package/dist/drawer/index.js

@@ -0,0 +1 @@
+export * as Drawer from "../components/ui/drawer/index";

package/dist/form/index.d.ts

@@ -0,0 +1 @@
+export * as Form from "../components/ui/form/index.js";

package/dist/form/index.js

@@ -0,0 +1 @@
+export * as Form from "../components/ui/form/index.js";

package/dist/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export { UseClipboard } from "./use-clipboard.svelte";
 export { useMedia } from "./use-media.svelte";
+export { IsMobile } from "./is-mobile.svelte";

package/dist/hooks/index.js

@@ -1,2 +1,3 @@
 export { UseClipboard } from "./use-clipboard.svelte";
 export { useMedia } from "./use-media.svelte";
+export { IsMobile } from "./is-mobile.svelte";

package/dist/resizable/index.d.ts

@@ -0,0 +1 @@
+export * as Resizable from "../components/ui/resizable/index.js";

package/dist/resizable/index.js

@@ -0,0 +1 @@
+export * as Resizable from "../components/ui/resizable/index.js";

package/dist/sonner/index.d.ts

@@ -0,0 +1,2 @@
+export { Toaster } from "../components/ui/sonner/index.js";
+export { toast } from "svelte-sonner";

package/dist/sonner/index.js

@@ -0,0 +1,2 @@
+export { Toaster } from "../components/ui/sonner/index.js";
+export { toast } from "svelte-sonner";

package/package.json

@@ -1,23 +1,51 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "1.1.18",
+  "version": "2.0.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
     },
+    "./calendar": {
+      "types": "./dist/calendar/index.d.ts",
+      "default": "./dist/calendar/index.js"
+    },
+    "./carousel": {
+      "types": "./dist/carousel/index.d.ts",
+      "default": "./dist/carousel/index.js"
+    },
+    "./chart": {
+      "types": "./dist/chart/index.d.ts",
+      "default": "./dist/chart/index.js"
+    },
+    "./data-table": {
+      "types": "./dist/form/index.d.ts",
+      "default": "./dist/form/index.js"
+    },
+    "./drawer": {
+      "types": "./dist/drawer/index.d.ts",
+      "default": "./dist/drawer/index.js"
+    },
+    "./form": {
+      "types": "./dist/form/index.d.ts",
+      "default": "./dist/form/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "default": "./dist/hooks/index.js"
+    },
+    "./resizable": {
+      "types": "./dist/resizable/index.d.ts",
+      "default": "./dist/resizable/index.js"
+    },
+    "./sonner": {
+      "types": "./dist/sonner/index.d.ts",
+      "default": "./dist/sonner/index.js"
+    },
     "./utils": {
       "types": "./dist/utils/index.d.ts",
       "default": "./dist/utils/index.js"
-    },
-    "./mode-watcher": {
-      "types": "./dist/mode-watcher/index.d.ts",
-      "default": "./dist/mode-watcher/index.js"
-    },
-    "./formsnap": {
-      "types": "./dist/formsnap/index.d.ts",
-      "default": "./dist/formsnap/index.js"
     }
   },
   "files": [
@@ -27,29 +55,66 @@
   ],
   "peerDependencies": {
     "@lucide/svelte": ">= 0.482.0 < 1.0.0",
-    "@tanstack/table-core": "^8.20.5",
-    "layerchart": "^2.0.0-next.6",
+    "mode-watcher": "^1.1.0",
     "svelte": "^5.0.0",
+    "layerchart": "^2.0.0-next.6",
+    "svelte-sonner": "^1.0.5",
+    "embla-carousel-svelte": "^8.6.0",
+    "@tanstack/table-core": "^8.20.5",
+    "vaul-svelte": "^1.0.0-next.7",
     "sveltekit-superforms": "^2.27.1",
+    "@internationalized/date": "^3.10.0",
+    "formsnap": "^2.0.1",
+    "paneforge": "^1.0.2",
     "zod": "^4.0.5"
   },
+  "peerDependenciesMeta": {
+    "layerchart": {
+      "optional": true
+    },
+    "svelte-sonner": {
+      "optional": true
+    },
+    "embla-carousel-svelte": {
+      "optional": true
+    },
+    "@tanstack/table-core": {
+      "optional": true
+    },
+    "vaul-svelte": {
+      "optional": true
+    },
+    "sveltekit-superforms": {
+      "optional": true
+    },
+    "formsnap": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    },
+    "@internationalized/date": {
+      "optional": true
+    },
+    "paneforge": {
+      "optional": true
+    }
+  },
   "dependencies": {
-    "@internationalized/date": "^3.10.0",
     "bits-ui": "2.11.4",
     "clsx": "^2.1.1",
-    "embla-carousel-svelte": "8.6.0",
-    "formsnap": "2.0.1",
-    "mode-watcher": "^1.1.0",
-    "paneforge": "1.0.2",
-    "svelte-sonner": "^1.0.5",
     "tailwind-merge": "^3.3.1",
-    "tailwind-variants": "^3.1.1",
-    "vaul-svelte": "1.0.0-next.7"
+    "tailwind-variants": "^3.1.1"
   },
   "devDependencies": {
-    "@lucide/svelte": "^0.544.0",
+    "formsnap": "^2.0.1",
+    "mode-watcher": "^1.1.0",
+    "paneforge": "^1.0.2",
+    "svelte-sonner": "^1.0.5",
+    "@internationalized/date": "^3.10.0",
+    "@lucide/svelte": "^0.545.0",
     "@sveltejs/adapter-auto": "^6.1.1",
-    "@sveltejs/kit": "^2.44.0",
+    "@sveltejs/kit": "^2.46.4",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@tailwindcss/vite": "^4.1.14",
@@ -63,6 +128,7 @@
     "@vitest/coverage-v8": "3.2.4",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
+    "embla-carousel-svelte": "^8.6.0",
     "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.12.4",
@@ -72,8 +138,8 @@
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "publint": "^0.3.14",
-    "svelte": "5.39.9",
-    "svelte-check": "^4.3.2",
+    "svelte": "5.39.11",
+    "svelte-check": "^4.3.3",
     "sveltekit-superforms": "^2.27.2",
     "tailwindcss": "^4.1.14",
     "tslib": "^2.8.1",
@@ -81,6 +147,7 @@
     "typescript": "^5.9.3",
     "vite": "^7.1.9",
     "vitest": "^3.2.4",
+    "vaul-svelte": "1.0.0-next.7",
     "zod": "4.1.12"
   },
   "svelte": "./dist/index.js",

package/dist/formsnap/index.d.ts

@@ -1 +0,0 @@
-export * from "formsnap";

package/dist/formsnap/index.js

@@ -1,3 +0,0 @@
-export * from "formsnap";
-// export type { FormOptions } from "formsnap";
-// export { getForm, getFormSchema, getFormControl } from "formsnap";

package/dist/mode-watcher/index.d.ts

@@ -1 +0,0 @@
-export * from "mode-watcher";

package/dist/mode-watcher/index.js

@@ -1 +0,0 @@
-export * from "mode-watcher";