@kayord/ui 1.1.19 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -33,6 +33,62 @@ npx svelte-add@latest tailwindcss
33
33
  pnpm i
34
34
  ```
35
35
 
36
+ ## Peer Dependencies
37
+
38
+ Kayord UI exports components individually. Some components require additional peer dependencies. Install only those needed for the components you use.
39
+
40
+ ### Core Peer Dependencies (required for most components)
41
+
42
+ - `svelte`
43
+ - `@lucide/svelte`
44
+ - `mode-watcher`
45
+
46
+ ### Component-Specific Peer Dependencies
47
+
48
+ | Component/Feature | Peer Dependencies to Install |
49
+ | ------------------------------- | -------------------------------------------------------------------------- |
50
+ | **Charts** (`chart/`) | `layerchart`, `d3-scale`, `d3-shape`, `@types/d3-scale`, `@types/d3-shape` |
51
+ | **Carousel** (`carousel/`) | `embla-carousel-svelte` |
52
+ | **Data Table** (`data-table/`) | `@tanstack/table-core` |
53
+ | **Drawer** (`drawer/`) | `vaul-svelte` |
54
+ | **Form** (`form/`) | `formsnap`, `sveltekit-superforms` |
55
+ | **Date/Calendar** (`calendar/`) | `@internationalized/date` |
56
+ | **Resizable** (`resizable/`) | `paneforge` |
57
+ | **Notifications** (`sonner/`) | `svelte-sonner` |
58
+
59
+ > **Note:** All above dependencies are listed as optional peer dependencies. Only install those required for the components you use.
60
+
61
+ ### Example Installation
62
+
63
+ ```bash
64
+ # Core dependencies
65
+ pnpm add -D svelte @lucide/svelte tailwindcss-animate mode-watcher
66
+
67
+ # For charts
68
+ pnpm add -D layerchart d3-scale d3-shape @types/d3-scale @types/d3-shape
69
+
70
+ # For carousel
71
+ pnpm add -D embla-carousel-svelte
72
+
73
+ # For data table
74
+ pnpm add -D @tanstack/table-core
75
+
76
+ # For drawer
77
+ pnpm add -D vaul-svelte
78
+
79
+ # For forms
80
+ pnpm add -D formsnap zod sveltekit-superforms
81
+
82
+ # For calendar/date
83
+ pnpm add -D @internationalized/date
84
+
85
+ # For resizable
86
+ pnpm add -D paneforge
87
+
88
+ # For notifications
89
+ pnpm add -D svelte-sonner
90
+ ```
91
+
36
92
  ### Add app.css and also include tailwindcss-animate
37
93
 
38
94
  ```css
@@ -43,161 +99,161 @@ pnpm i
43
99
 
44
100
  /* Button Defaults */
45
101
  @layer base {
46
- button:not(:disabled),
47
- [role="button"]:not(:disabled) {
48
- cursor: pointer;
49
- }
102
+ button:not(:disabled),
103
+ [role="button"]:not(:disabled) {
104
+ cursor: pointer;
105
+ }
50
106
  }
51
107
 
52
108
  :root {
53
- --accent-foreground: 240 5.9% 10%;
54
- --accent: 240 4.8% 95.9%;
55
- --background: 0 0% 100%;
56
- --border: 240 5.9% 90%;
57
- --card-foreground: 240 10% 3.9%;
58
- --card: 0 0% 100%;
59
- --destructive-foreground: 0 0% 98%;
60
- --destructive: 0 84.2% 60.2%;
61
- --foreground: 240 10% 3.9%;
62
- --input: 240 5.9% 90%;
63
- --muted-foreground: 240 3.8% 46.1%;
64
- --muted: 240 4.8% 95.9%;
65
- --popover-foreground: 240 10% 3.9%;
66
- --popover: 0 0% 100%;
67
- --primary-foreground: 0 0% 98%;
68
- --primary: 240 5.9% 10%;
69
- --radius: 0.5rem;
70
- --ring: 240 5.9% 10%;
71
- --secondary-foreground: 240 5.9% 10%;
72
- --secondary: 240 4.8% 95.9%;
73
- --sidebar-accent-foreground: 240 5.9% 10%;
74
- --sidebar-accent: 240 4.8% 95.9%;
75
- --sidebar-background: 0 0% 98%;
76
- --sidebar-border: 220 13% 91%;
77
- --sidebar-foreground: 240 5.3% 26.1%;
78
- --sidebar-primary-foreground: 0 0% 98%;
79
- --sidebar-primary: 232 27% 35%;
80
- --sidebar-ring: 217.2 91.2% 59.8%;
109
+ --accent-foreground: 240 5.9% 10%;
110
+ --accent: 240 4.8% 95.9%;
111
+ --background: 0 0% 100%;
112
+ --border: 240 5.9% 90%;
113
+ --card-foreground: 240 10% 3.9%;
114
+ --card: 0 0% 100%;
115
+ --destructive-foreground: 0 0% 98%;
116
+ --destructive: 0 84.2% 60.2%;
117
+ --foreground: 240 10% 3.9%;
118
+ --input: 240 5.9% 90%;
119
+ --muted-foreground: 240 3.8% 46.1%;
120
+ --muted: 240 4.8% 95.9%;
121
+ --popover-foreground: 240 10% 3.9%;
122
+ --popover: 0 0% 100%;
123
+ --primary-foreground: 0 0% 98%;
124
+ --primary: 240 5.9% 10%;
125
+ --radius: 0.5rem;
126
+ --ring: 240 5.9% 10%;
127
+ --secondary-foreground: 240 5.9% 10%;
128
+ --secondary: 240 4.8% 95.9%;
129
+ --sidebar-accent-foreground: 240 5.9% 10%;
130
+ --sidebar-accent: 240 4.8% 95.9%;
131
+ --sidebar-background: 0 0% 98%;
132
+ --sidebar-border: 220 13% 91%;
133
+ --sidebar-foreground: 240 5.3% 26.1%;
134
+ --sidebar-primary-foreground: 0 0% 98%;
135
+ --sidebar-primary: 232 27% 35%;
136
+ --sidebar-ring: 217.2 91.2% 59.8%;
81
137
  }
82
138
  .dark {
83
- --background: 240 10% 3.9%;
84
- --foreground: 0 0% 98%;
85
- --card: 240 10% 3.9%;
86
- --card-foreground: 0 0% 98%;
87
- --popover: 240 10% 3.9%;
88
- --popover-foreground: 0 0% 98%;
89
- --primary: 0 0% 98%;
90
- --primary-foreground: 240 5.9% 10%;
91
- --secondary: 240 3.7% 15.9%;
92
- --secondary-foreground: 0 0% 98%;
93
- --muted: 240 3.7% 15.9%;
94
- --muted-foreground: 240 5% 64.9%;
95
- --accent: 240 3.7% 15.9%;
96
- --accent-foreground: 0 0% 98%;
97
- --destructive: 0 62.8% 30.6%;
98
- --destructive-foreground: 0 0% 98%;
99
- --border: 240 3.7% 15.9%;
100
- --input: 240 3.7% 15.9%;
101
- --ring: 240 4.9% 83.9%;
102
- --sidebar-background: 221, 40%, 8%;
103
- --sidebar-foreground: 240 4.8% 95.9%;
104
- --sidebar-primary: 232 27% 35%;
105
- --sidebar-primary-foreground: 0 0% 100%;
106
- --sidebar-accent: 221, 40%, 13%;
107
- --sidebar-accent-foreground: 240 4.8% 95.9%;
108
- --sidebar-border: 240 3.7% 15.9%;
109
- --sidebar-ring: 217.2 91.2% 59.8%;
139
+ --background: 240 10% 3.9%;
140
+ --foreground: 0 0% 98%;
141
+ --card: 240 10% 3.9%;
142
+ --card-foreground: 0 0% 98%;
143
+ --popover: 240 10% 3.9%;
144
+ --popover-foreground: 0 0% 98%;
145
+ --primary: 0 0% 98%;
146
+ --primary-foreground: 240 5.9% 10%;
147
+ --secondary: 240 3.7% 15.9%;
148
+ --secondary-foreground: 0 0% 98%;
149
+ --muted: 240 3.7% 15.9%;
150
+ --muted-foreground: 240 5% 64.9%;
151
+ --accent: 240 3.7% 15.9%;
152
+ --accent-foreground: 0 0% 98%;
153
+ --destructive: 0 62.8% 30.6%;
154
+ --destructive-foreground: 0 0% 98%;
155
+ --border: 240 3.7% 15.9%;
156
+ --input: 240 3.7% 15.9%;
157
+ --ring: 240 4.9% 83.9%;
158
+ --sidebar-background: 221, 40%, 8%;
159
+ --sidebar-foreground: 240 4.8% 95.9%;
160
+ --sidebar-primary: 232 27% 35%;
161
+ --sidebar-primary-foreground: 0 0% 100%;
162
+ --sidebar-accent: 221, 40%, 13%;
163
+ --sidebar-accent-foreground: 240 4.8% 95.9%;
164
+ --sidebar-border: 240 3.7% 15.9%;
165
+ --sidebar-ring: 217.2 91.2% 59.8%;
110
166
  }
111
167
 
112
168
  @theme inline {
113
- /* Fonts */
114
- --font-sans:
115
- "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
116
- "Noto Color Emoji";
117
- --font-mono:
118
- "Source Code Pro Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
119
- monospace;
120
-
121
- /* Colors */
122
- --color-border: hsl(var(--border));
123
- --color-input: hsl(var(--input));
124
- --color-ring: hsl(var(--ring));
125
- --color-background: hsl(var(--background));
126
- --color-foreground: hsl(var(--foreground));
127
- --color-primary: hsl(var(--primary));
128
- --color-primary-foreground: hsl(var(--primary-foreground));
129
- --color-secondary: hsl(var(--secondary));
130
- --color-secondary-foreground: hsl(var(--secondary-foreground));
131
- --color-destructive: hsl(var(--destructive));
132
- --color-destructive-foreground: hsl(var(--destructive-foreground));
133
- --color-caution: var(--color-red-500);
134
- --color-warning: var(--color-amber-500);
135
- --color-info: var(--color-sky-500);
136
- --color-muted: hsl(var(--muted));
137
- --color-muted-foreground: hsl(var(--muted-foreground));
138
- --color-accent: hsl(var(--accent));
139
- --color-accent-foreground: hsl(var(--accent-foreground));
140
- --color-popover: hsl(var(--popover));
141
- --color-popover-foreground: hsl(var(--popover-foreground));
142
- --color-card: hsl(var(--card));
143
- --color-card-foreground: hsl(var(--card-foreground));
144
- --color-sidebar: hsl(var(--sidebar-background));
145
- --color-sidebar-foreground: hsl(var(--sidebar-foreground));
146
- --color-sidebar-primary: hsl(var(--sidebar-primary));
147
- --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
148
- --color-sidebar-accent: hsl(var(--sidebar-accent));
149
- --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
150
- --color-sidebar-border: hsl(var(--sidebar-border));
151
- --color-sidebar-ring: hsl(var(--sidebar-ring));
152
-
153
- /* Border */
154
- --radius-xl: calc(var(--radius) + 4px);
155
- --radius-lg: var(--radius);
156
- --radius-md: calc(var(--radius) - 2px);
157
- --radius-sm: calc(var(--radius) - 4px);
158
-
159
- /* Animations */
160
- --animate-accordion-down: 0.2s ease-out accordion-down;
161
- --animate-accordion-up: 0.2s ease-out accordion-up;
162
- --animate-caret-blink: 1.25s ease-out infinite caret-blink;
163
-
164
- /* Keyframes */
165
- @keyframes accordion-down {
166
- from: {
167
- height: 0;
168
- }
169
- to: {
170
- height: var(--bits-accordion-content-height);
171
- }
172
- }
173
- @keyframes accordion-up {
174
- from: {
175
- height: var(--bits-accordion-content-height);
176
- }
177
- to: {
178
- height: 0;
179
- }
180
- }
181
- @keyframes caret-blink {
182
- 0%,
183
- 70%,
184
- 100% {
185
- opacity: 1;
186
- }
187
- 20%,
188
- 50% {
189
- opacity: 0;
190
- }
191
- }
169
+ /* Fonts */
170
+ --font-sans:
171
+ "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
172
+ "Noto Color Emoji";
173
+ --font-mono:
174
+ "Source Code Pro Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
175
+ monospace;
176
+
177
+ /* Colors */
178
+ --color-border: hsl(var(--border));
179
+ --color-input: hsl(var(--input));
180
+ --color-ring: hsl(var(--ring));
181
+ --color-background: hsl(var(--background));
182
+ --color-foreground: hsl(var(--foreground));
183
+ --color-primary: hsl(var(--primary));
184
+ --color-primary-foreground: hsl(var(--primary-foreground));
185
+ --color-secondary: hsl(var(--secondary));
186
+ --color-secondary-foreground: hsl(var(--secondary-foreground));
187
+ --color-destructive: hsl(var(--destructive));
188
+ --color-destructive-foreground: hsl(var(--destructive-foreground));
189
+ --color-caution: var(--color-red-500);
190
+ --color-warning: var(--color-amber-500);
191
+ --color-info: var(--color-sky-500);
192
+ --color-muted: hsl(var(--muted));
193
+ --color-muted-foreground: hsl(var(--muted-foreground));
194
+ --color-accent: hsl(var(--accent));
195
+ --color-accent-foreground: hsl(var(--accent-foreground));
196
+ --color-popover: hsl(var(--popover));
197
+ --color-popover-foreground: hsl(var(--popover-foreground));
198
+ --color-card: hsl(var(--card));
199
+ --color-card-foreground: hsl(var(--card-foreground));
200
+ --color-sidebar: hsl(var(--sidebar-background));
201
+ --color-sidebar-foreground: hsl(var(--sidebar-foreground));
202
+ --color-sidebar-primary: hsl(var(--sidebar-primary));
203
+ --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
204
+ --color-sidebar-accent: hsl(var(--sidebar-accent));
205
+ --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
206
+ --color-sidebar-border: hsl(var(--sidebar-border));
207
+ --color-sidebar-ring: hsl(var(--sidebar-ring));
208
+
209
+ /* Border */
210
+ --radius-xl: calc(var(--radius) + 4px);
211
+ --radius-lg: var(--radius);
212
+ --radius-md: calc(var(--radius) - 2px);
213
+ --radius-sm: calc(var(--radius) - 4px);
214
+
215
+ /* Animations */
216
+ --animate-accordion-down: 0.2s ease-out accordion-down;
217
+ --animate-accordion-up: 0.2s ease-out accordion-up;
218
+ --animate-caret-blink: 1.25s ease-out infinite caret-blink;
219
+
220
+ /* Keyframes */
221
+ @keyframes accordion-down {
222
+ from: {
223
+ height: 0;
224
+ }
225
+ to: {
226
+ height: var(--bits-accordion-content-height);
227
+ }
228
+ }
229
+ @keyframes accordion-up {
230
+ from: {
231
+ height: var(--bits-accordion-content-height);
232
+ }
233
+ to: {
234
+ height: 0;
235
+ }
236
+ }
237
+ @keyframes caret-blink {
238
+ 0%,
239
+ 70%,
240
+ 100% {
241
+ opacity: 1;
242
+ }
243
+ 20%,
244
+ 50% {
245
+ opacity: 0;
246
+ }
247
+ }
192
248
  }
193
249
 
194
250
  @layer base {
195
- * {
196
- @apply border-border;
197
- }
198
- body {
199
- @apply bg-background text-foreground;
200
- }
251
+ * {
252
+ @apply border-border;
253
+ }
254
+ body {
255
+ @apply bg-background text-foreground;
256
+ }
201
257
  }
202
258
  ```
203
259
 
@@ -208,7 +264,7 @@ pnpm i
208
264
  import { CustomOptions, CustomColumnMeta } from "@kayord/ui";
209
265
 
210
266
  declare module "@tanstack/table-core" {
211
- interface ColumnMeta<TData extends RowData, TValue> extends CustomColumnMeta {}
212
- interface TableOptionsResolved<TData extends RowData> extends CustomOptions {}
267
+ interface ColumnMeta<TData extends RowData, TValue> extends CustomColumnMeta {}
268
+ interface TableOptionsResolved<TData extends RowData> extends CustomOptions {}
213
269
  }
214
270
  ```
@@ -0,0 +1,2 @@
1
+ export { Calendar } from "../components/ui/calendar/index";
2
+ export { RangeCalendar } from "../components/ui/range-calendar/index.js";
@@ -0,0 +1,2 @@
1
+ export { Calendar } from "../components/ui/calendar/index";
2
+ export { RangeCalendar } from "../components/ui/range-calendar/index.js";
@@ -0,0 +1 @@
1
+ export * as Carousel from "../components/ui/carousel/index";
@@ -0,0 +1 @@
1
+ export * as Carousel from "../components/ui/carousel/index";
@@ -0,0 +1 @@
1
+ export * as Chart from "../components/ui/chart/index";
@@ -0,0 +1 @@
1
+ export * as Chart from "../components/ui/chart/index";
@@ -1,5 +1,6 @@
1
1
  <script lang="ts" generics="T">
2
- import { FlexRender, Table } from "../../..";
2
+ import { Table } from "../../..";
3
+ import { FlexRender } from "../../../data-table";
3
4
  import { type Header, type Table as TypeType } from "@tanstack/table-core";
4
5
 
5
6
  interface Props<T> {
@@ -1,5 +1,6 @@
1
1
  <script lang="ts" generics="T">
2
- import { FlexRender, Table } from "../../..";
2
+ import { Table } from "../../..";
3
+ import { FlexRender } from "../../../data-table";
3
4
  import { type Header, type Table as TypeType } from "@tanstack/table-core";
4
5
  import { ArrowUpDownIcon, ArrowDownIcon, ArrowUpIcon } from "@lucide/svelte";
5
6
 
@@ -1,6 +1,6 @@
1
1
  import { createTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, } from "@tanstack/table-core";
2
2
  import DataTableCheckbox from "./DataTableCheckbox.svelte";
3
- import { renderComponent } from "../../ui";
3
+ import { renderComponent } from "../../../data-table";
4
4
  import { mergeObjects } from "../../ui/data-table/data-table.svelte";
5
5
  export function createShadTable(shadOptions) {
6
6
  if (!shadOptions.getCoreRowModel) {
@@ -1,5 +1,4 @@
1
1
  export { Loader } from "./loader/index.js";
2
- export * from "./data-table/index.js";
3
2
  export { ProgressLoading } from "./progress-loading/index.js";
4
3
  export { Combobox } from "./combobox/index.js";
5
4
  export * from "./action/index.js";
@@ -1,5 +1,4 @@
1
1
  export { Loader } from "./loader/index.js";
2
- export * from "./data-table/index.js";
3
2
  export { ProgressLoading } from "./progress-loading/index.js";
4
3
  export { Combobox } from "./combobox/index.js";
5
4
  export * from "./action/index.js";
@@ -7,21 +7,15 @@ export { Badge, badgeVariants, type BadgeVariant } from "./badge/index.js";
7
7
  export * as Breadcrumb from "./breadcrumb/index.js";
8
8
  export * as ButtonGroup from "./button-group/index.js";
9
9
  export { Button, type ButtonProps, buttonVariants } from "./button/index.js";
10
- export { Calendar } from "./calendar/index.js";
11
10
  export * as Card from "./card/index.js";
12
- export * as Carousel from "./carousel/index.js";
13
- export * as Chart from "./chart/index.js";
14
11
  export { Checkbox } from "./checkbox/index.js";
15
12
  export * as Collapsible from "./collapsible/index.js";
16
13
  export * as Command from "./command/index.js";
17
14
  export * as ContextMenu from "./context-menu/index.js";
18
- export { FlexRender, renderComponent, renderSnippet, createSvelteTable, createSvelteTable as createTable, } from "./data-table/index.js";
19
15
  export * as Dialog from "./dialog/index.js";
20
- export * as Drawer from "./drawer/index.js";
21
16
  export * as DropdownMenu from "./dropdown-menu/index.js";
22
17
  export * as Empty from "./empty/index.js";
23
18
  export * as Field from "./field/index.js";
24
- export * as Form from "./form/index.js";
25
19
  export * as HoverCard from "./hover-card/index.js";
26
20
  export * as InputGroup from "./input-group/index.js";
27
21
  export { Input } from "./input/index.js";
@@ -34,8 +28,6 @@ export * as Pagination from "./pagination/index.js";
34
28
  export * as Popover from "./popover/index.js";
35
29
  export { Progress } from "./progress/index.js";
36
30
  export * as RadioGroup from "./radio-group/index.js";
37
- export * as RangeCalendar from "./range-calendar/index.js";
38
- export * as Resizable from "./resizable/index.js";
39
31
  export { ScrollArea } from "./scroll-area/index.js";
40
32
  export * as Select from "./select/index.js";
41
33
  export { Separator } from "./separator/index.js";
@@ -43,8 +35,6 @@ export * as Sheet from "./sheet/index.js";
43
35
  export * as Sidebar from "./sidebar/index.js";
44
36
  export { Skeleton } from "./skeleton/index.js";
45
37
  export { Slider } from "./slider/index.js";
46
- export { Toaster } from "./sonner/index.js";
47
- export { toast } from "svelte-sonner";
48
38
  export { Switch } from "./switch/index.js";
49
39
  export { Spinner } from "./spinner/index.js";
50
40
  export * as Table from "./table/index.js";
@@ -7,21 +7,15 @@ export { Badge, badgeVariants } from "./badge/index.js";
7
7
  export * as Breadcrumb from "./breadcrumb/index.js";
8
8
  export * as ButtonGroup from "./button-group/index.js";
9
9
  export { Button, buttonVariants } from "./button/index.js";
10
- export { Calendar } from "./calendar/index.js";
11
10
  export * as Card from "./card/index.js";
12
- export * as Carousel from "./carousel/index.js";
13
- export * as Chart from "./chart/index.js";
14
11
  export { Checkbox } from "./checkbox/index.js";
15
12
  export * as Collapsible from "./collapsible/index.js";
16
13
  export * as Command from "./command/index.js";
17
14
  export * as ContextMenu from "./context-menu/index.js";
18
- export { FlexRender, renderComponent, renderSnippet, createSvelteTable, createSvelteTable as createTable, } from "./data-table/index.js";
19
15
  export * as Dialog from "./dialog/index.js";
20
- export * as Drawer from "./drawer/index.js";
21
16
  export * as DropdownMenu from "./dropdown-menu/index.js";
22
17
  export * as Empty from "./empty/index.js";
23
18
  export * as Field from "./field/index.js";
24
- export * as Form from "./form/index.js";
25
19
  export * as HoverCard from "./hover-card/index.js";
26
20
  export * as InputGroup from "./input-group/index.js";
27
21
  export { Input } from "./input/index.js";
@@ -34,8 +28,6 @@ export * as Pagination from "./pagination/index.js";
34
28
  export * as Popover from "./popover/index.js";
35
29
  export { Progress } from "./progress/index.js";
36
30
  export * as RadioGroup from "./radio-group/index.js";
37
- export * as RangeCalendar from "./range-calendar/index.js";
38
- export * as Resizable from "./resizable/index.js";
39
31
  export { ScrollArea } from "./scroll-area/index.js";
40
32
  export * as Select from "./select/index.js";
41
33
  export { Separator } from "./separator/index.js";
@@ -43,8 +35,6 @@ export * as Sheet from "./sheet/index.js";
43
35
  export * as Sidebar from "./sidebar/index.js";
44
36
  export { Skeleton } from "./skeleton/index.js";
45
37
  export { Slider } from "./slider/index.js";
46
- export { Toaster } from "./sonner/index.js";
47
- export { toast } from "svelte-sonner";
48
38
  export { Switch } from "./switch/index.js";
49
39
  export { Spinner } from "./spinner/index.js";
50
40
  export * as Table from "./table/index.js";
@@ -2,7 +2,7 @@ declare const InputGroupInput: import("svelte").Component<(Omit<import("svelte/e
2
2
  type: "file";
3
3
  files?: FileList;
4
4
  } | {
5
- type?: "number" | "hidden" | "color" | "search" | "button" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "date" | "time" | "submit" | "reset" | "month" | "week" | "datetime-local" | "image" | "password" | "range";
5
+ type?: "number" | "hidden" | "color" | "search" | "button" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "date" | "time" | "submit" | "reset" | "datetime-local" | "image" | "month" | "password" | "range" | "week";
6
6
  files?: undefined;
7
7
  })) & {
8
8
  ref?: HTMLElement | null | undefined;
@@ -2,7 +2,7 @@ declare const SidebarInput: import("svelte").Component<(Omit<import("svelte/elem
2
2
  type: "file";
3
3
  files?: FileList;
4
4
  } | {
5
- type?: "number" | "hidden" | "color" | "search" | "button" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "date" | "time" | "submit" | "reset" | "month" | "week" | "datetime-local" | "image" | "password" | "range";
5
+ type?: "number" | "hidden" | "color" | "search" | "button" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "date" | "time" | "submit" | "reset" | "datetime-local" | "image" | "month" | "password" | "range" | "week";
6
6
  files?: undefined;
7
7
  })) & {
8
8
  ref?: HTMLElement | null | undefined;
@@ -0,0 +1,2 @@
1
+ export { FlexRender, renderComponent, renderSnippet, createSvelteTable, createSvelteTable as createTable, } from "../components/ui/data-table/index.js";
2
+ export * from "../components/custom/data-table/index.js";
@@ -0,0 +1,2 @@
1
+ export { FlexRender, renderComponent, renderSnippet, createSvelteTable, createSvelteTable as createTable, } from "../components/ui/data-table/index.js";
2
+ export * from "../components/custom/data-table/index.js";
@@ -0,0 +1 @@
1
+ export * as Drawer from "../components/ui/drawer/index";
@@ -0,0 +1 @@
1
+ export * as Drawer from "../components/ui/drawer/index";
@@ -0,0 +1 @@
1
+ export * as Form from "../components/ui/form/index.js";
@@ -0,0 +1 @@
1
+ export * as Form from "../components/ui/form/index.js";
@@ -1,2 +1,3 @@
1
1
  export { UseClipboard } from "./use-clipboard.svelte";
2
2
  export { useMedia } from "./use-media.svelte";
3
+ export { IsMobile } from "./is-mobile.svelte";
@@ -1,2 +1,3 @@
1
1
  export { UseClipboard } from "./use-clipboard.svelte";
2
2
  export { useMedia } from "./use-media.svelte";
3
+ export { IsMobile } from "./is-mobile.svelte";
@@ -0,0 +1 @@
1
+ export * as Resizable from "../components/ui/resizable/index.js";
@@ -0,0 +1 @@
1
+ export * as Resizable from "../components/ui/resizable/index.js";
@@ -0,0 +1,2 @@
1
+ export { Toaster } from "../components/ui/sonner/index.js";
2
+ export { toast } from "svelte-sonner";
@@ -0,0 +1,2 @@
1
+ export { Toaster } from "../components/ui/sonner/index.js";
2
+ export { toast } from "svelte-sonner";
package/package.json CHANGED
@@ -1,23 +1,51 @@
1
1
  {
2
2
  "name": "@kayord/ui",
3
3
  "private": false,
4
- "version": "1.1.19",
4
+ "version": "2.0.1",
5
5
  "exports": {
6
6
  ".": {
7
7
  "types": "./dist/index.d.ts",
8
8
  "svelte": "./dist/index.js"
9
9
  },
10
+ "./calendar": {
11
+ "types": "./dist/calendar/index.d.ts",
12
+ "default": "./dist/calendar/index.js"
13
+ },
14
+ "./carousel": {
15
+ "types": "./dist/carousel/index.d.ts",
16
+ "default": "./dist/carousel/index.js"
17
+ },
18
+ "./chart": {
19
+ "types": "./dist/chart/index.d.ts",
20
+ "default": "./dist/chart/index.js"
21
+ },
22
+ "./data-table": {
23
+ "types": "./dist/data-table/index.d.ts",
24
+ "default": "./dist/data-table/index.js"
25
+ },
26
+ "./drawer": {
27
+ "types": "./dist/drawer/index.d.ts",
28
+ "default": "./dist/drawer/index.js"
29
+ },
30
+ "./form": {
31
+ "types": "./dist/form/index.d.ts",
32
+ "default": "./dist/form/index.js"
33
+ },
34
+ "./hooks": {
35
+ "types": "./dist/hooks/index.d.ts",
36
+ "default": "./dist/hooks/index.js"
37
+ },
38
+ "./resizable": {
39
+ "types": "./dist/resizable/index.d.ts",
40
+ "default": "./dist/resizable/index.js"
41
+ },
42
+ "./sonner": {
43
+ "types": "./dist/sonner/index.d.ts",
44
+ "default": "./dist/sonner/index.js"
45
+ },
10
46
  "./utils": {
11
47
  "types": "./dist/utils/index.d.ts",
12
48
  "default": "./dist/utils/index.js"
13
- },
14
- "./mode-watcher": {
15
- "types": "./dist/mode-watcher/index.d.ts",
16
- "default": "./dist/mode-watcher/index.js"
17
- },
18
- "./formsnap": {
19
- "types": "./dist/formsnap/index.d.ts",
20
- "default": "./dist/formsnap/index.js"
21
49
  }
22
50
  },
23
51
  "files": [
@@ -27,26 +55,63 @@
27
55
  ],
28
56
  "peerDependencies": {
29
57
  "@lucide/svelte": ">= 0.482.0 < 1.0.0",
30
- "@tanstack/table-core": "^8.20.5",
31
- "layerchart": "^2.0.0-next.6",
58
+ "mode-watcher": "^1.1.0",
32
59
  "svelte": "^5.0.0",
60
+ "layerchart": "^2.0.0-next.6",
61
+ "svelte-sonner": "^1.0.5",
62
+ "embla-carousel-svelte": "^8.6.0",
63
+ "@tanstack/table-core": "^8.20.5",
64
+ "vaul-svelte": "^1.0.0-next.7",
33
65
  "sveltekit-superforms": "^2.27.1",
66
+ "@internationalized/date": "^3.10.0",
67
+ "formsnap": "^2.0.1",
68
+ "paneforge": "^1.0.2",
34
69
  "zod": "^4.0.5"
35
70
  },
71
+ "peerDependenciesMeta": {
72
+ "layerchart": {
73
+ "optional": true
74
+ },
75
+ "svelte-sonner": {
76
+ "optional": true
77
+ },
78
+ "embla-carousel-svelte": {
79
+ "optional": true
80
+ },
81
+ "@tanstack/table-core": {
82
+ "optional": true
83
+ },
84
+ "vaul-svelte": {
85
+ "optional": true
86
+ },
87
+ "sveltekit-superforms": {
88
+ "optional": true
89
+ },
90
+ "formsnap": {
91
+ "optional": true
92
+ },
93
+ "zod": {
94
+ "optional": true
95
+ },
96
+ "@internationalized/date": {
97
+ "optional": true
98
+ },
99
+ "paneforge": {
100
+ "optional": true
101
+ }
102
+ },
36
103
  "dependencies": {
37
- "@internationalized/date": "^3.10.0",
38
104
  "bits-ui": "2.11.4",
39
105
  "clsx": "^2.1.1",
40
- "embla-carousel-svelte": "8.6.0",
41
- "formsnap": "2.0.1",
42
- "mode-watcher": "^1.1.0",
43
- "paneforge": "1.0.2",
44
- "svelte-sonner": "^1.0.5",
45
106
  "tailwind-merge": "^3.3.1",
46
- "tailwind-variants": "^3.1.1",
47
- "vaul-svelte": "1.0.0-next.7"
107
+ "tailwind-variants": "^3.1.1"
48
108
  },
49
109
  "devDependencies": {
110
+ "formsnap": "^2.0.1",
111
+ "mode-watcher": "^1.1.0",
112
+ "paneforge": "^1.0.2",
113
+ "svelte-sonner": "^1.0.5",
114
+ "@internationalized/date": "^3.10.0",
50
115
  "@lucide/svelte": "^0.545.0",
51
116
  "@sveltejs/adapter-auto": "^6.1.1",
52
117
  "@sveltejs/kit": "^2.46.4",
@@ -63,6 +128,7 @@
63
128
  "@vitest/coverage-v8": "3.2.4",
64
129
  "d3-scale": "^4.0.2",
65
130
  "d3-shape": "^3.2.0",
131
+ "embla-carousel-svelte": "^8.6.0",
66
132
  "eslint": "^9.37.0",
67
133
  "eslint-config-prettier": "^10.1.8",
68
134
  "eslint-plugin-svelte": "^3.12.4",
@@ -81,6 +147,7 @@
81
147
  "typescript": "^5.9.3",
82
148
  "vite": "^7.1.9",
83
149
  "vitest": "^3.2.4",
150
+ "vaul-svelte": "1.0.0-next.7",
84
151
  "zod": "4.1.12"
85
152
  },
86
153
  "svelte": "./dist/index.js",
@@ -1 +0,0 @@
1
- export * from "formsnap";
@@ -1,3 +0,0 @@
1
- export * from "formsnap";
2
- // export type { FormOptions } from "formsnap";
3
- // export { getForm, getFormSchema, getFormControl } from "formsnap";
@@ -1 +0,0 @@
1
- export * from "mode-watcher";
@@ -1 +0,0 @@
1
- export * from "mode-watcher";