@kalink-ui/seedly 0.32.0 → 0.33.0
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/CHANGELOG.md +12 -0
- package/package.json +35 -34
- package/src/components/collapsible/collapsible-content.css.ts +48 -0
- package/src/components/collapsible/collapsible-content.tsx +13 -0
- package/src/components/collapsible/collapsible.tsx +6 -0
- package/src/components/collapsible/index.ts +3 -0
- package/src/components/index.ts +1 -0
- package/src/components/input/input.css.ts +56 -25
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @kalink-ui/seedly
|
|
2
2
|
|
|
3
|
+
## 0.33.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- c8c98c0: Introduce the Radix-based `Collapsible` primitives and animated `CollapsibleContent`, and pull the new `@radix-ui/react-collapsible` dependency into Seedly.
|
|
8
|
+
|
|
9
|
+
## 0.32.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- 9d3abfd: Add proper styling solution for Input component
|
|
14
|
+
|
|
3
15
|
## 0.32.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kalink-ui/seedly",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.33.0",
|
|
4
4
|
"description": "A set of components for building UIs with React and TypeScript",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "MIT",
|
|
@@ -16,33 +16,33 @@
|
|
|
16
16
|
"./styles/layers": "./src/styles/layers.css.ts"
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
|
-
"@chromatic-com/storybook": "^4.
|
|
20
|
-
"@storybook/addon-docs": "^9.
|
|
21
|
-
"@storybook/addon-onboarding": "^9.
|
|
22
|
-
"@storybook/react-vite": "^9.
|
|
23
|
-
"@turbo/gen": "^2.5.
|
|
24
|
-
"@types/node": "^24.
|
|
25
|
-
"@types/react": "19.
|
|
26
|
-
"@types/react-dom": "19.
|
|
27
|
-
"@vanilla-extract/css": "^1.17.
|
|
28
|
-
"@vanilla-extract/css-utils": "^0.1.
|
|
29
|
-
"@vanilla-extract/dynamic": "^2.1.
|
|
30
|
-
"@vanilla-extract/recipes": "^0.5.
|
|
31
|
-
"@vanilla-extract/sprinkles": "^1.6.
|
|
32
|
-
"@vanilla-extract/vite-plugin": "^5.
|
|
33
|
-
"@vitejs/plugin-react": "^
|
|
34
|
-
"eslint": "^9.
|
|
35
|
-
"eslint-plugin-storybook": "9.
|
|
36
|
-
"lucide-react": "^0.
|
|
37
|
-
"react": "^19.
|
|
19
|
+
"@chromatic-com/storybook": "^4.1.1",
|
|
20
|
+
"@storybook/addon-docs": "^9.1.10",
|
|
21
|
+
"@storybook/addon-onboarding": "^9.1.10",
|
|
22
|
+
"@storybook/react-vite": "^9.1.10",
|
|
23
|
+
"@turbo/gen": "^2.5.8",
|
|
24
|
+
"@types/node": "^24.6.2",
|
|
25
|
+
"@types/react": "^19.2.0",
|
|
26
|
+
"@types/react-dom": "^19.2.0",
|
|
27
|
+
"@vanilla-extract/css": "^1.17.4",
|
|
28
|
+
"@vanilla-extract/css-utils": "^0.1.6",
|
|
29
|
+
"@vanilla-extract/dynamic": "^2.1.5",
|
|
30
|
+
"@vanilla-extract/recipes": "^0.5.7",
|
|
31
|
+
"@vanilla-extract/sprinkles": "^1.6.5",
|
|
32
|
+
"@vanilla-extract/vite-plugin": "^5.1.1",
|
|
33
|
+
"@vitejs/plugin-react": "^5.0.4",
|
|
34
|
+
"eslint": "^9.37.0",
|
|
35
|
+
"eslint-plugin-storybook": "9.1.10",
|
|
36
|
+
"lucide-react": "^0.544.0",
|
|
37
|
+
"react": "^19.2.0",
|
|
38
38
|
"react-docgen-typescript": "^2.4.0",
|
|
39
|
-
"react-dom": "^19.
|
|
40
|
-
"storybook": "^9.
|
|
41
|
-
"type-fest": "^
|
|
42
|
-
"typescript": "^5.
|
|
43
|
-
"vite": "^
|
|
39
|
+
"react-dom": "^19.2.0",
|
|
40
|
+
"storybook": "^9.1.10",
|
|
41
|
+
"type-fest": "^5.0.1",
|
|
42
|
+
"typescript": "^5.9.3",
|
|
43
|
+
"vite": "^7.1.9",
|
|
44
44
|
"vite-tsconfig-paths": "^5.1.4",
|
|
45
|
-
"vitest": "^3.2.
|
|
45
|
+
"vitest": "^3.2.4",
|
|
46
46
|
"@kalink-ui/eslint-config": "0.10.0",
|
|
47
47
|
"@kalink-ui/typescript-config": "0.4.0"
|
|
48
48
|
},
|
|
@@ -52,16 +52,17 @@
|
|
|
52
52
|
"@vanilla-extract/dynamic": "^2.1.2",
|
|
53
53
|
"@vanilla-extract/recipes": "^0.5.5",
|
|
54
54
|
"@vanilla-extract/sprinkles": "^1.6.3",
|
|
55
|
-
"react": "^19.
|
|
56
|
-
"react-dom": "^19.
|
|
57
|
-
"typescript": "^5.
|
|
55
|
+
"react": "^19.1.1",
|
|
56
|
+
"react-dom": "^19.1.1",
|
|
57
|
+
"typescript": "^5.9.2"
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@radix-ui/react-alert-dialog": "^1.1.
|
|
61
|
-
"@radix-ui/react-
|
|
62
|
-
"@radix-ui/react-
|
|
63
|
-
"@radix-ui/react-
|
|
64
|
-
"@radix-ui/react-
|
|
60
|
+
"@radix-ui/react-alert-dialog": "^1.1.15",
|
|
61
|
+
"@radix-ui/react-collapsible": "^1.1.12",
|
|
62
|
+
"@radix-ui/react-dialog": "^1.1.15",
|
|
63
|
+
"@radix-ui/react-popover": "^1.1.15",
|
|
64
|
+
"@radix-ui/react-scroll-area": "^1.2.10",
|
|
65
|
+
"@radix-ui/react-select": "^2.2.6",
|
|
65
66
|
"@radix-ui/react-slot": "^1.2.3",
|
|
66
67
|
"clsx": "^2.1.1",
|
|
67
68
|
"cmdk": "^1.1.1",
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { keyframes, style } from '@vanilla-extract/css';
|
|
2
|
+
|
|
3
|
+
import { sys } from '../../styles';
|
|
4
|
+
import { components } from '../../styles/layers.css';
|
|
5
|
+
|
|
6
|
+
const slideDown = keyframes({
|
|
7
|
+
'0%': {
|
|
8
|
+
height: 0,
|
|
9
|
+
opacity: 0,
|
|
10
|
+
},
|
|
11
|
+
'100%': {
|
|
12
|
+
height: 'var(--radix-collapsible-content-height)',
|
|
13
|
+
opacity: 1,
|
|
14
|
+
},
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
const slideUp = keyframes({
|
|
18
|
+
'0%': {
|
|
19
|
+
height: 'var(--radix-collapsible-content-height)',
|
|
20
|
+
opacity: 1,
|
|
21
|
+
},
|
|
22
|
+
'100%': {
|
|
23
|
+
height: 0,
|
|
24
|
+
opacity: 0,
|
|
25
|
+
},
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
export const collapsibleContent = style({
|
|
29
|
+
'@layer': {
|
|
30
|
+
[components]: {
|
|
31
|
+
overflow: 'hidden',
|
|
32
|
+
|
|
33
|
+
animationDuration: sys.motion.duration.medium[2],
|
|
34
|
+
animationTimingFunction: sys.motion.easing.standard,
|
|
35
|
+
animationFillMode: 'both',
|
|
36
|
+
willChange: 'height',
|
|
37
|
+
|
|
38
|
+
selectors: {
|
|
39
|
+
'&[data-state="open"]': {
|
|
40
|
+
animationName: slideDown,
|
|
41
|
+
},
|
|
42
|
+
'&[data-state="closed"]': {
|
|
43
|
+
animationName: slideUp,
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
});
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { CollapsibleContentProps, Content } from '@radix-ui/react-collapsible';
|
|
4
|
+
import { clsx } from 'clsx';
|
|
5
|
+
|
|
6
|
+
import { collapsibleContent } from './collapsible-content.css';
|
|
7
|
+
|
|
8
|
+
export function CollapsibleContent({
|
|
9
|
+
className,
|
|
10
|
+
...props
|
|
11
|
+
}: CollapsibleContentProps) {
|
|
12
|
+
return <Content className={clsx(collapsibleContent, className)} {...props} />;
|
|
13
|
+
}
|
package/src/components/index.ts
CHANGED
|
@@ -1,26 +1,30 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
style,
|
|
3
|
+
globalStyle,
|
|
4
|
+
createThemeContract,
|
|
5
|
+
assignVars,
|
|
6
|
+
fallbackVar,
|
|
7
|
+
} from '@vanilla-extract/css';
|
|
2
8
|
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
|
|
3
9
|
|
|
4
10
|
import { sys, transition, typography } from '../../styles';
|
|
5
11
|
import { components } from '../../styles/layers.css';
|
|
12
|
+
import { formFieldVars } from '../form-field';
|
|
6
13
|
|
|
7
|
-
export const inputVars =
|
|
8
|
-
'@layer': components,
|
|
9
|
-
|
|
14
|
+
export const inputVars = createThemeContract({
|
|
10
15
|
color: {
|
|
11
|
-
foreground:
|
|
12
|
-
background:
|
|
13
|
-
outline:
|
|
14
|
-
error: 'red',
|
|
16
|
+
foreground: null,
|
|
17
|
+
background: null,
|
|
18
|
+
outline: null,
|
|
15
19
|
},
|
|
16
20
|
|
|
17
21
|
spacing: {
|
|
18
|
-
block:
|
|
19
|
-
inline:
|
|
22
|
+
block: null,
|
|
23
|
+
inline: null,
|
|
20
24
|
},
|
|
21
25
|
|
|
22
26
|
shape: {
|
|
23
|
-
corner:
|
|
27
|
+
corner: null,
|
|
24
28
|
},
|
|
25
29
|
});
|
|
26
30
|
|
|
@@ -34,7 +38,7 @@ export const inputAppearance = recipe({
|
|
|
34
38
|
|
|
35
39
|
color: inputVars.color.foreground,
|
|
36
40
|
|
|
37
|
-
backgroundColor:
|
|
41
|
+
backgroundColor: inputVars.color.background,
|
|
38
42
|
borderRadius: inputVars.shape.corner,
|
|
39
43
|
|
|
40
44
|
cursor: 'inherit',
|
|
@@ -63,17 +67,39 @@ export const inputAppearance = recipe({
|
|
|
63
67
|
|
|
64
68
|
'&[aria-invalid], &:has([aria-invalid])': {
|
|
65
69
|
vars: {
|
|
66
|
-
[inputVars.color.foreground]:
|
|
70
|
+
[inputVars.color.foreground]: fallbackVar(
|
|
71
|
+
formFieldVars.color.foreground,
|
|
72
|
+
'red',
|
|
73
|
+
),
|
|
67
74
|
},
|
|
68
75
|
},
|
|
69
76
|
},
|
|
70
77
|
|
|
71
78
|
vars: {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
79
|
+
...assignVars(inputVars.color, {
|
|
80
|
+
foreground: fallbackVar(
|
|
81
|
+
formFieldVars.color.foreground,
|
|
82
|
+
sys.color.foreground,
|
|
83
|
+
),
|
|
84
|
+
background: fallbackVar(
|
|
85
|
+
formFieldVars.color.background,
|
|
86
|
+
sys.color.background,
|
|
87
|
+
'transparent',
|
|
88
|
+
),
|
|
89
|
+
outline: fallbackVar(
|
|
90
|
+
formFieldVars.color.outline,
|
|
91
|
+
sys.color.foreground,
|
|
92
|
+
),
|
|
93
|
+
}),
|
|
94
|
+
|
|
95
|
+
...assignVars(inputVars.spacing, {
|
|
96
|
+
block: sys.spacing[2],
|
|
97
|
+
inline: sys.spacing[4],
|
|
98
|
+
}),
|
|
99
|
+
|
|
100
|
+
...assignVars(inputVars.shape, {
|
|
101
|
+
corner: sys.shape.corner.none,
|
|
102
|
+
}),
|
|
77
103
|
},
|
|
78
104
|
},
|
|
79
105
|
},
|
|
@@ -127,8 +153,10 @@ export const inputAppearance = recipe({
|
|
|
127
153
|
fontSize: `max(16px, ${sys.typography.body.small.size})`,
|
|
128
154
|
|
|
129
155
|
vars: {
|
|
130
|
-
|
|
131
|
-
|
|
156
|
+
...assignVars(inputVars.spacing, {
|
|
157
|
+
block: sys.spacing[1],
|
|
158
|
+
inline: sys.spacing[1],
|
|
159
|
+
}),
|
|
132
160
|
},
|
|
133
161
|
},
|
|
134
162
|
},
|
|
@@ -146,8 +174,10 @@ export const inputAppearance = recipe({
|
|
|
146
174
|
fontSize: `max(16px, ${sys.typography.body.medium.size})`,
|
|
147
175
|
|
|
148
176
|
vars: {
|
|
149
|
-
|
|
150
|
-
|
|
177
|
+
...assignVars(inputVars.spacing, {
|
|
178
|
+
block: sys.spacing[2],
|
|
179
|
+
inline: sys.spacing[2],
|
|
180
|
+
}),
|
|
151
181
|
},
|
|
152
182
|
},
|
|
153
183
|
},
|
|
@@ -165,8 +195,10 @@ export const inputAppearance = recipe({
|
|
|
165
195
|
fontSize: `max(16px, ${sys.typography.body.large.size})`,
|
|
166
196
|
|
|
167
197
|
vars: {
|
|
168
|
-
|
|
169
|
-
|
|
198
|
+
...assignVars(inputVars.spacing, {
|
|
199
|
+
block: sys.spacing[3],
|
|
200
|
+
inline: sys.spacing[3],
|
|
201
|
+
}),
|
|
170
202
|
},
|
|
171
203
|
},
|
|
172
204
|
},
|
|
@@ -217,7 +249,6 @@ export const input = style({
|
|
|
217
249
|
paddingBottom: 0,
|
|
218
250
|
|
|
219
251
|
color: 'inherit',
|
|
220
|
-
|
|
221
252
|
border: 'none',
|
|
222
253
|
backgroundColor: 'transparent',
|
|
223
254
|
cursor: 'inherit',
|