@kayord/ui 2.0.1 → 2.0.3
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 +12 -24
- package/dist/components/custom/index.d.ts +2 -0
- package/dist/components/custom/index.js +2 -0
- package/dist/components/custom/meter/index.d.ts +1 -0
- package/dist/components/custom/meter/index.js +1 -0
- package/dist/components/custom/meter/meter.svelte +28 -0
- package/dist/components/custom/meter/meter.svelte.d.ts +4 -0
- package/dist/components/custom/star-rating/index.d.ts +2 -0
- package/dist/components/custom/star-rating/index.js +2 -0
- package/dist/components/custom/star-rating/star-rating-star.svelte +41 -0
- package/dist/components/custom/star-rating/star-rating-star.svelte.d.ts +4 -0
- package/dist/components/custom/star-rating/star-rating.svelte +20 -0
- package/dist/components/custom/star-rating/star-rating.svelte.d.ts +4 -0
- package/dist/components/custom/star-rating/types.d.ts +5 -0
- package/dist/components/custom/star-rating/types.js +1 -0
- package/dist/components/ui/command/command.svelte +8 -2
- package/dist/components/ui/command/command.svelte.d.ts +5 -1
- package/package.json +21 -21
package/README.md
CHANGED
|
@@ -2,14 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
The UI components used to build kayord applications.
|
|
4
4
|
|
|
5
|
-
## Update
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npx shadcn-svelte@latest
|
|
9
|
-
|
|
10
|
-
npx shadcn-svelte@latest update -a
|
|
11
|
-
```
|
|
12
|
-
|
|
13
5
|
## Installing
|
|
14
6
|
|
|
15
7
|
Pnpm command to install ui library.
|
|
@@ -17,22 +9,14 @@ Pnpm command to install ui library.
|
|
|
17
9
|
```bash
|
|
18
10
|
# create a new project in the current directory
|
|
19
11
|
pnpm add -D @kayord/ui
|
|
20
|
-
# install
|
|
21
|
-
pnpm add -D @lucide/svelte
|
|
22
|
-
|
|
12
|
+
# install minimal dependencies
|
|
13
|
+
pnpm add -D @lucide/svelte tw-animate-css
|
|
14
|
+
# install other dependencies as required
|
|
15
|
+
pnpm add -D zod sveltekit-superforms
|
|
23
16
|
# include charts
|
|
24
17
|
pnpm add -D layerchart@next d3-scale d3-shape @types/d3-scale @types/d3-shape
|
|
25
18
|
```
|
|
26
19
|
|
|
27
|
-
### Manual Setup New Project
|
|
28
|
-
|
|
29
|
-
```bash
|
|
30
|
-
# Setup new sveltekit project
|
|
31
|
-
npm create svelte@latest my-app
|
|
32
|
-
npx svelte-add@latest tailwindcss
|
|
33
|
-
pnpm i
|
|
34
|
-
```
|
|
35
|
-
|
|
36
20
|
## Peer Dependencies
|
|
37
21
|
|
|
38
22
|
Kayord UI exports components individually. Some components require additional peer dependencies. Install only those needed for the components you use.
|
|
@@ -64,6 +48,9 @@ Kayord UI exports components individually. Some components require additional pe
|
|
|
64
48
|
# Core dependencies
|
|
65
49
|
pnpm add -D svelte @lucide/svelte tailwindcss-animate mode-watcher
|
|
66
50
|
|
|
51
|
+
# Most likely dependencies
|
|
52
|
+
pnpm add -D svelte @lucide/svelte tailwindcss-animate mode-watcher formsnap zod sveltekit-superforms @internationalized/date svelte-sonner
|
|
53
|
+
|
|
67
54
|
# For charts
|
|
68
55
|
pnpm add -D layerchart d3-scale d3-shape @types/d3-scale @types/d3-shape
|
|
69
56
|
|
|
@@ -73,8 +60,8 @@ pnpm add -D embla-carousel-svelte
|
|
|
73
60
|
# For data table
|
|
74
61
|
pnpm add -D @tanstack/table-core
|
|
75
62
|
|
|
76
|
-
# For drawer
|
|
77
|
-
pnpm add -D vaul-svelte
|
|
63
|
+
# For drawer @next for now
|
|
64
|
+
pnpm add -D vaul-svelte@next
|
|
78
65
|
|
|
79
66
|
# For forms
|
|
80
67
|
pnpm add -D formsnap zod sveltekit-superforms
|
|
@@ -93,7 +80,8 @@ pnpm add -D svelte-sonner
|
|
|
93
80
|
|
|
94
81
|
```css
|
|
95
82
|
@import "tailwindcss";
|
|
96
|
-
@
|
|
83
|
+
@source "../node_modules/@kayord/ui";
|
|
84
|
+
@import "tw-animate-css";
|
|
97
85
|
|
|
98
86
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
99
87
|
|
|
@@ -261,7 +249,7 @@ pnpm add -D svelte-sonner
|
|
|
261
249
|
|
|
262
250
|
```ts
|
|
263
251
|
// Add to app.d.ts
|
|
264
|
-
import { CustomOptions, CustomColumnMeta } from "@kayord/ui";
|
|
252
|
+
import { CustomOptions, CustomColumnMeta } from "@kayord/ui/data-table";
|
|
265
253
|
|
|
266
254
|
declare module "@tanstack/table-core" {
|
|
267
255
|
interface ColumnMeta<TData extends RowData, TValue> extends CustomColumnMeta {}
|
|
@@ -8,3 +8,5 @@ export { ThemeSelector } from "./theme-selector/index.js";
|
|
|
8
8
|
export { LightSwitch } from "./light-switch.svelte/index.js";
|
|
9
9
|
export * from "./animations/index.js";
|
|
10
10
|
export * as AvatarGroup from "./avatar-group/index.js";
|
|
11
|
+
export { Meter } from "./meter/index.js";
|
|
12
|
+
export * as StarRating from "./star-rating/index.js";
|
|
@@ -8,3 +8,5 @@ export { ThemeSelector } from "./theme-selector/index.js";
|
|
|
8
8
|
export { LightSwitch } from "./light-switch.svelte/index.js";
|
|
9
9
|
export * from "./animations/index.js";
|
|
10
10
|
export * as AvatarGroup from "./avatar-group/index.js";
|
|
11
|
+
export { Meter } from "./meter/index.js";
|
|
12
|
+
export * as StarRating from "./star-rating/index.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Meter } from "./meter.svelte";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Meter } from "./meter.svelte";
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Meter as MeterPrimitive, type WithoutChildrenOrChild } from "bits-ui";
|
|
3
|
+
import { cn } from "../../../utils";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
max = 100,
|
|
9
|
+
value,
|
|
10
|
+
...restProps
|
|
11
|
+
}: WithoutChildrenOrChild<MeterPrimitive.RootProps> = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<MeterPrimitive.Root
|
|
15
|
+
bind:ref
|
|
16
|
+
{max}
|
|
17
|
+
{value}
|
|
18
|
+
class={cn(
|
|
19
|
+
"relative h-2 w-full overflow-hidden rounded-full bg-(--meter-background)/20 [--meter-background:var(--primary)]",
|
|
20
|
+
className
|
|
21
|
+
)}
|
|
22
|
+
{...restProps}
|
|
23
|
+
>
|
|
24
|
+
<div
|
|
25
|
+
class="h-full w-full flex-1 bg-(--meter-background) transition-all"
|
|
26
|
+
style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
|
|
27
|
+
></div>
|
|
28
|
+
</MeterPrimitive.Root>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn } from "../../../utils";
|
|
3
|
+
import StarHalfIcon from "@lucide/svelte/icons/star-half";
|
|
4
|
+
import StarIcon from "@lucide/svelte/icons/star";
|
|
5
|
+
import { RatingGroup } from "bits-ui";
|
|
6
|
+
import type { StarRatingStarProps } from "./types";
|
|
7
|
+
|
|
8
|
+
let { index, state, class: className }: StarRatingStarProps = $props();
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<RatingGroup.Item
|
|
12
|
+
{index}
|
|
13
|
+
class={cn(
|
|
14
|
+
"ring-ring text-primary ring-offset-background group/item size-5 rounded-md ring-offset-2 outline-hidden group-aria-disabled:opacity-50 focus-visible:ring-2",
|
|
15
|
+
className
|
|
16
|
+
)}
|
|
17
|
+
>
|
|
18
|
+
<div class="relative size-full">
|
|
19
|
+
<StarIcon
|
|
20
|
+
class={cn("size-full fill-transparent transition-all", {
|
|
21
|
+
"fill-current": state === "active",
|
|
22
|
+
})}
|
|
23
|
+
/>
|
|
24
|
+
<StarHalfIcon
|
|
25
|
+
class={cn(
|
|
26
|
+
"absolute top-0 left-0 size-full fill-transparent transition-all group-data-[state=active]/item:fill-current",
|
|
27
|
+
{
|
|
28
|
+
"ltr:fill-current": state === "partial",
|
|
29
|
+
}
|
|
30
|
+
)}
|
|
31
|
+
/>
|
|
32
|
+
<StarHalfIcon
|
|
33
|
+
class={cn(
|
|
34
|
+
"absolute top-0 right-0 size-full scale-x-[-1] fill-transparent transition-all group-data-[state=active]/item:fill-current",
|
|
35
|
+
{
|
|
36
|
+
"rtl:fill-current": state === "partial",
|
|
37
|
+
}
|
|
38
|
+
)}
|
|
39
|
+
/>
|
|
40
|
+
</div>
|
|
41
|
+
</RatingGroup.Item>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn } from "../../../utils";
|
|
3
|
+
import { RatingGroup, type RatingGroupRootProps } from "bits-ui";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
value = $bindable(0),
|
|
7
|
+
max = 5,
|
|
8
|
+
orientation = "horizontal",
|
|
9
|
+
class: className,
|
|
10
|
+
...rest
|
|
11
|
+
}: RatingGroupRootProps = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<RatingGroup.Root
|
|
15
|
+
class={cn("group flex w-fit place-items-center gap-1 rounded-md outline-hidden", className)}
|
|
16
|
+
bind:value
|
|
17
|
+
{max}
|
|
18
|
+
{orientation}
|
|
19
|
+
{...rest}
|
|
20
|
+
/>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { Command as CommandPrimitive } from "bits-ui";
|
|
3
2
|
import { cn } from "../../../utils.js";
|
|
3
|
+
import { Command as CommandPrimitive } from "bits-ui";
|
|
4
|
+
|
|
5
|
+
export type CommandRootApi = CommandPrimitive.Root;
|
|
4
6
|
|
|
5
7
|
let {
|
|
8
|
+
api = $bindable(null),
|
|
6
9
|
ref = $bindable(null),
|
|
7
10
|
value = $bindable(""),
|
|
8
11
|
class: className,
|
|
9
12
|
...restProps
|
|
10
|
-
}: CommandPrimitive.RootProps
|
|
13
|
+
}: CommandPrimitive.RootProps & {
|
|
14
|
+
api?: CommandRootApi | null;
|
|
15
|
+
} = $props();
|
|
11
16
|
</script>
|
|
12
17
|
|
|
13
18
|
<CommandPrimitive.Root
|
|
19
|
+
bind:this={api}
|
|
14
20
|
bind:value
|
|
15
21
|
bind:ref
|
|
16
22
|
data-slot="command"
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import { Command as CommandPrimitive } from "bits-ui";
|
|
2
|
-
|
|
2
|
+
export type CommandRootApi = CommandPrimitive.Root;
|
|
3
|
+
type $$ComponentProps = CommandPrimitive.RootProps & {
|
|
4
|
+
api?: CommandRootApi | null;
|
|
5
|
+
};
|
|
6
|
+
declare const Command: import("svelte").Component<$$ComponentProps, {}, "value" | "ref" | "api">;
|
|
3
7
|
type Command = ReturnType<typeof Command>;
|
|
4
8
|
export default Command;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kayord/ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "2.0.
|
|
4
|
+
"version": "2.0.3",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
@@ -54,18 +54,18 @@
|
|
|
54
54
|
"!dist/**/*.spec.*"
|
|
55
55
|
],
|
|
56
56
|
"peerDependencies": {
|
|
57
|
+
"@internationalized/date": "^3.10.0",
|
|
57
58
|
"@lucide/svelte": ">= 0.482.0 < 1.0.0",
|
|
59
|
+
"@tanstack/table-core": "^8.20.5",
|
|
60
|
+
"embla-carousel-svelte": "^8.6.0",
|
|
61
|
+
"formsnap": "^2.0.1",
|
|
62
|
+
"layerchart": "^2.0.0-next.6",
|
|
58
63
|
"mode-watcher": "^1.1.0",
|
|
64
|
+
"paneforge": "^1.0.2",
|
|
59
65
|
"svelte": "^5.0.0",
|
|
60
|
-
"layerchart": "^2.0.0-next.6",
|
|
61
66
|
"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",
|
|
65
67
|
"sveltekit-superforms": "^2.27.1",
|
|
66
|
-
"
|
|
67
|
-
"formsnap": "^2.0.1",
|
|
68
|
-
"paneforge": "^1.0.2",
|
|
68
|
+
"vaul-svelte": "^1.0.0-next.7",
|
|
69
69
|
"zod": "^4.0.5"
|
|
70
70
|
},
|
|
71
71
|
"peerDependenciesMeta": {
|
|
@@ -101,20 +101,16 @@
|
|
|
101
101
|
}
|
|
102
102
|
},
|
|
103
103
|
"dependencies": {
|
|
104
|
-
"bits-ui": "2.11.
|
|
104
|
+
"bits-ui": "2.11.6",
|
|
105
105
|
"clsx": "^2.1.1",
|
|
106
106
|
"tailwind-merge": "^3.3.1",
|
|
107
107
|
"tailwind-variants": "^3.1.1"
|
|
108
108
|
},
|
|
109
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
110
|
"@internationalized/date": "^3.10.0",
|
|
115
111
|
"@lucide/svelte": "^0.545.0",
|
|
116
112
|
"@sveltejs/adapter-auto": "^6.1.1",
|
|
117
|
-
"@sveltejs/kit": "^2.
|
|
113
|
+
"@sveltejs/kit": "^2.47.0",
|
|
118
114
|
"@sveltejs/package": "^2.5.4",
|
|
119
115
|
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
|
120
116
|
"@tailwindcss/vite": "^4.1.14",
|
|
@@ -123,8 +119,8 @@
|
|
|
123
119
|
"@testing-library/user-event": "^14.6.1",
|
|
124
120
|
"@types/d3-scale": "^4.0.9",
|
|
125
121
|
"@types/d3-shape": "^3.1.7",
|
|
126
|
-
"@typescript-eslint/eslint-plugin": "^8.46.
|
|
127
|
-
"@typescript-eslint/parser": "^8.46.
|
|
122
|
+
"@typescript-eslint/eslint-plugin": "^8.46.1",
|
|
123
|
+
"@typescript-eslint/parser": "^8.46.1",
|
|
128
124
|
"@vitest/coverage-v8": "3.2.4",
|
|
129
125
|
"d3-scale": "^4.0.2",
|
|
130
126
|
"d3-shape": "^3.2.0",
|
|
@@ -132,22 +128,26 @@
|
|
|
132
128
|
"eslint": "^9.37.0",
|
|
133
129
|
"eslint-config-prettier": "^10.1.8",
|
|
134
130
|
"eslint-plugin-svelte": "^3.12.4",
|
|
131
|
+
"formsnap": "^2.0.1",
|
|
135
132
|
"jsdom": "^27.0.0",
|
|
136
133
|
"layerchart": "2.0.0-next.40",
|
|
134
|
+
"mode-watcher": "^1.1.0",
|
|
135
|
+
"paneforge": "^1.0.2",
|
|
137
136
|
"prettier": "^3.6.2",
|
|
138
137
|
"prettier-plugin-svelte": "^3.4.0",
|
|
139
|
-
"prettier-plugin-tailwindcss": "^0.
|
|
138
|
+
"prettier-plugin-tailwindcss": "^0.7.0",
|
|
140
139
|
"publint": "^0.3.14",
|
|
141
|
-
"svelte": "5.
|
|
140
|
+
"svelte": "5.40.1",
|
|
142
141
|
"svelte-check": "^4.3.3",
|
|
143
|
-
"
|
|
142
|
+
"svelte-sonner": "^1.0.5",
|
|
143
|
+
"sveltekit-superforms": "^2.27.4",
|
|
144
144
|
"tailwindcss": "^4.1.14",
|
|
145
145
|
"tslib": "^2.8.1",
|
|
146
146
|
"tw-animate-css": "1.4.0",
|
|
147
147
|
"typescript": "^5.9.3",
|
|
148
|
-
"vite": "^7.1.9",
|
|
149
|
-
"vitest": "^3.2.4",
|
|
150
148
|
"vaul-svelte": "1.0.0-next.7",
|
|
149
|
+
"vite": "^7.1.10",
|
|
150
|
+
"vitest": "^3.2.4",
|
|
151
151
|
"zod": "4.1.12"
|
|
152
152
|
},
|
|
153
153
|
"svelte": "./dist/index.js",
|