@kayord/ui 2.0.1 → 2.0.2
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 +5 -2
- 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/package.json +14 -14
package/README.md
CHANGED
|
@@ -64,6 +64,9 @@ Kayord UI exports components individually. Some components require additional pe
|
|
|
64
64
|
# Core dependencies
|
|
65
65
|
pnpm add -D svelte @lucide/svelte tailwindcss-animate mode-watcher
|
|
66
66
|
|
|
67
|
+
# Most likely dependencies
|
|
68
|
+
pnpm add -D svelte @lucide/svelte tailwindcss-animate mode-watcher formsnap zod sveltekit-superforms @internationalized/date svelte-sonner
|
|
69
|
+
|
|
67
70
|
# For charts
|
|
68
71
|
pnpm add -D layerchart d3-scale d3-shape @types/d3-scale @types/d3-shape
|
|
69
72
|
|
|
@@ -73,8 +76,8 @@ pnpm add -D embla-carousel-svelte
|
|
|
73
76
|
# For data table
|
|
74
77
|
pnpm add -D @tanstack/table-core
|
|
75
78
|
|
|
76
|
-
# For drawer
|
|
77
|
-
pnpm add -D vaul-svelte
|
|
79
|
+
# For drawer @next for now
|
|
80
|
+
pnpm add -D vaul-svelte@next
|
|
78
81
|
|
|
79
82
|
# For forms
|
|
80
83
|
pnpm add -D formsnap zod sveltekit-superforms
|
|
@@ -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 {};
|
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.2",
|
|
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,16 +101,12 @@
|
|
|
101
101
|
}
|
|
102
102
|
},
|
|
103
103
|
"dependencies": {
|
|
104
|
-
"bits-ui": "2.11.
|
|
104
|
+
"bits-ui": "2.11.5",
|
|
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",
|
|
@@ -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
138
|
"prettier-plugin-tailwindcss": "^0.6.14",
|
|
140
139
|
"publint": "^0.3.14",
|
|
141
140
|
"svelte": "5.39.11",
|
|
142
141
|
"svelte-check": "^4.3.3",
|
|
142
|
+
"svelte-sonner": "^1.0.5",
|
|
143
143
|
"sveltekit-superforms": "^2.27.2",
|
|
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
|
+
"vaul-svelte": "1.0.0-next.7",
|
|
148
149
|
"vite": "^7.1.9",
|
|
149
150
|
"vitest": "^3.2.4",
|
|
150
|
-
"vaul-svelte": "1.0.0-next.7",
|
|
151
151
|
"zod": "4.1.12"
|
|
152
152
|
},
|
|
153
153
|
"svelte": "./dist/index.js",
|