@techsio/ui-kit 0.1.1 → 0.2.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/dist/atoms/input.js +6 -10
- package/dist/atoms/skeleton.js +211 -0
- package/dist/atoms/textarea.js +1 -1
- package/dist/molecules/checkbox.js +7 -1
- package/dist/molecules/menu.js +2 -3
- package/dist/molecules/popover.js +3 -4
- package/dist/molecules/select.js +4 -1
- package/dist/molecules/slider.js +2 -2
- package/dist/molecules/switch.js +3 -1
- package/dist/molecules/tabs.js +2 -1
- package/dist/molecules/tree-view.js +1 -1
- package/dist/src/atoms/input.d.ts.map +1 -1
- package/dist/src/atoms/skeleton.d.ts +45 -0
- package/dist/src/atoms/skeleton.d.ts.map +1 -0
- package/dist/src/molecules/checkbox.d.ts.map +1 -1
- package/dist/src/molecules/menu.d.ts.map +1 -1
- package/dist/src/molecules/popover.d.ts +2 -1
- package/dist/src/molecules/popover.d.ts.map +1 -1
- package/dist/src/molecules/select.d.ts.map +1 -1
- package/dist/src/molecules/switch.d.ts.map +1 -1
- package/dist/src/molecules/tabs.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/tokens/_semantic.css +19 -14
- package/src/tokens/components/atoms/_button.css +3 -3
- package/src/tokens/components/atoms/_input.css +4 -31
- package/src/tokens/components/atoms/_rating.css +1 -4
- package/src/tokens/components/atoms/_skeleton.css +75 -0
- package/src/tokens/components/atoms/_textarea.css +3 -3
- package/src/tokens/components/components.css +1 -0
- package/src/tokens/components/molecules/_accordion.css +1 -4
- package/src/tokens/components/molecules/_checkbox.css +6 -1
- package/src/tokens/components/molecules/_combobox.css +3 -3
- package/src/tokens/components/molecules/_menu.css +1 -1
- package/src/tokens/components/molecules/_pagination.css +3 -9
- package/src/tokens/components/molecules/_select.css +3 -1
- package/src/tokens/components/molecules/_slider.css +4 -7
- package/src/tokens/components/molecules/_switch.css +5 -7
- package/src/tokens/components/molecules/_tabs.css +1 -1
- package/src/tokens/components/molecules/_tree-view.css +1 -1
package/dist/atoms/input.js
CHANGED
|
@@ -5,7 +5,7 @@ const inputVariants = tv({
|
|
|
5
5
|
'block w-full',
|
|
6
6
|
'bg-input',
|
|
7
7
|
'text-input-fg',
|
|
8
|
-
'placeholder:text-input-placeholder',
|
|
8
|
+
'placeholder:text-input-fg-placeholder',
|
|
9
9
|
'border border-input-border',
|
|
10
10
|
'rounded-input',
|
|
11
11
|
'transition-all duration-200',
|
|
@@ -26,20 +26,17 @@ const inputVariants = tv({
|
|
|
26
26
|
error: [
|
|
27
27
|
'border-input-border-danger',
|
|
28
28
|
'hover:border-input-border-danger-hover',
|
|
29
|
-
'focus:border-input-border-danger-focus'
|
|
30
|
-
'placeholder:text-input-placeholder-danger'
|
|
29
|
+
'focus:border-input-border-danger-focus'
|
|
31
30
|
],
|
|
32
31
|
success: [
|
|
33
32
|
'border-input-border-success',
|
|
34
33
|
'hover:border-input-border-success-hover',
|
|
35
|
-
'focus:border-input-border-success-focus'
|
|
36
|
-
'placeholder:text-input-placeholder-success'
|
|
34
|
+
'focus:border-input-border-success-focus'
|
|
37
35
|
],
|
|
38
36
|
warning: [
|
|
39
37
|
'border-input-border-warning',
|
|
40
38
|
'hover:border-input-border-warning-hover',
|
|
41
|
-
'focus:border-input-border-warning-focus'
|
|
42
|
-
'placeholder:text-input-placeholder-warning'
|
|
39
|
+
'focus:border-input-border-warning-focus'
|
|
43
40
|
]
|
|
44
41
|
},
|
|
45
42
|
withButtonInside: {
|
|
@@ -52,10 +49,9 @@ const inputVariants = tv({
|
|
|
52
49
|
},
|
|
53
50
|
disabled: {
|
|
54
51
|
true: [
|
|
55
|
-
'bg-input-disabled',
|
|
52
|
+
'bg-input-bg-disabled',
|
|
56
53
|
'border-input-border-disabled',
|
|
57
|
-
'text-input-fg-disabled'
|
|
58
|
-
'placeholder:text-input-placeholder-disabled'
|
|
54
|
+
'text-input-fg-disabled'
|
|
59
55
|
]
|
|
60
56
|
}
|
|
61
57
|
},
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
import { Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createContext, useContext } from "react";
|
|
3
|
+
import { tv } from "../utils.js";
|
|
4
|
+
const skeletonVariants = tv({
|
|
5
|
+
slots: {
|
|
6
|
+
root: [
|
|
7
|
+
'relative overflow-hidden'
|
|
8
|
+
],
|
|
9
|
+
rectangle: [
|
|
10
|
+
''
|
|
11
|
+
],
|
|
12
|
+
circle: [
|
|
13
|
+
'rounded-full',
|
|
14
|
+
'shrink-0'
|
|
15
|
+
],
|
|
16
|
+
textContainer: [
|
|
17
|
+
'flex',
|
|
18
|
+
'flex-col'
|
|
19
|
+
],
|
|
20
|
+
textLine: [
|
|
21
|
+
'h-skeleton-text-line',
|
|
22
|
+
'rounded-skeleton-text',
|
|
23
|
+
'w-full'
|
|
24
|
+
]
|
|
25
|
+
},
|
|
26
|
+
variants: {
|
|
27
|
+
variant: {
|
|
28
|
+
primary: {
|
|
29
|
+
root: '',
|
|
30
|
+
circle: 'bg-skeleton-bg-primary',
|
|
31
|
+
rectangle: 'bg-skeleton-bg-primary',
|
|
32
|
+
textLine: 'bg-skeleton-bg-primary'
|
|
33
|
+
},
|
|
34
|
+
secondary: {
|
|
35
|
+
root: '',
|
|
36
|
+
circle: 'bg-skeleton-bg-secondary',
|
|
37
|
+
rectangle: 'bg-skeleton-bg-secondary',
|
|
38
|
+
textLine: 'bg-skeleton-bg-secondary'
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
size: {
|
|
42
|
+
sm: {
|
|
43
|
+
circle: 'size-skeleton-circle-sm',
|
|
44
|
+
textContainer: 'gap-skeleton-text-sm'
|
|
45
|
+
},
|
|
46
|
+
md: {
|
|
47
|
+
circle: 'size-skeleton-circle-md',
|
|
48
|
+
textContainer: 'gap-skeleton-text-md'
|
|
49
|
+
},
|
|
50
|
+
lg: {
|
|
51
|
+
circle: 'size-skeleton-circle-lg',
|
|
52
|
+
textContainer: 'gap-skeleton-text-lg'
|
|
53
|
+
},
|
|
54
|
+
xl: {
|
|
55
|
+
circle: 'size-skeleton-circle-xl',
|
|
56
|
+
textContainer: 'gap-skeleton-text-xl'
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
speed: {
|
|
60
|
+
slow: {
|
|
61
|
+
root: 'animate-skeleton-pulse-slow'
|
|
62
|
+
},
|
|
63
|
+
normal: {
|
|
64
|
+
root: 'animate-skeleton-pulse-normal'
|
|
65
|
+
},
|
|
66
|
+
fast: {
|
|
67
|
+
root: 'animate-skeleton-pulse-fast'
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
defaultVariants: {
|
|
72
|
+
variant: 'primary',
|
|
73
|
+
size: 'md',
|
|
74
|
+
speed: 'normal'
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
const SkeletonContext = /*#__PURE__*/ createContext(null);
|
|
78
|
+
const useSkeletonContext = ()=>useContext(SkeletonContext);
|
|
79
|
+
function useResolvedSkeletonProps(props) {
|
|
80
|
+
const context = useSkeletonContext();
|
|
81
|
+
return {
|
|
82
|
+
isLoaded: props.isLoaded ?? context?.isLoaded ?? false,
|
|
83
|
+
variant: props.variant ?? context?.variant,
|
|
84
|
+
speed: props.speed ?? context?.speed
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
function Skeleton({ isLoaded = false, variant, children, speed, className, ref, ...props }) {
|
|
88
|
+
const styles = skeletonVariants({
|
|
89
|
+
variant,
|
|
90
|
+
speed
|
|
91
|
+
});
|
|
92
|
+
return /*#__PURE__*/ jsx(SkeletonContext.Provider, {
|
|
93
|
+
value: {
|
|
94
|
+
isLoaded,
|
|
95
|
+
variant,
|
|
96
|
+
speed
|
|
97
|
+
},
|
|
98
|
+
children: isLoaded ? /*#__PURE__*/ jsx(Fragment, {
|
|
99
|
+
children: children
|
|
100
|
+
}) : /*#__PURE__*/ jsx("div", {
|
|
101
|
+
ref: ref,
|
|
102
|
+
className: styles.root({
|
|
103
|
+
className
|
|
104
|
+
}),
|
|
105
|
+
"aria-busy": "true",
|
|
106
|
+
"aria-label": "Loading content",
|
|
107
|
+
...props,
|
|
108
|
+
children: children
|
|
109
|
+
})
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
Skeleton.Circle = function({ size = 'md', speed, isLoaded, variant, children, className, ref, ...props }) {
|
|
113
|
+
const resolved = useResolvedSkeletonProps({
|
|
114
|
+
isLoaded,
|
|
115
|
+
variant,
|
|
116
|
+
speed
|
|
117
|
+
});
|
|
118
|
+
const styles = skeletonVariants({
|
|
119
|
+
size,
|
|
120
|
+
variant: resolved.variant,
|
|
121
|
+
speed: resolved.speed
|
|
122
|
+
});
|
|
123
|
+
if (resolved.isLoaded) return /*#__PURE__*/ jsx(Fragment, {
|
|
124
|
+
children: children
|
|
125
|
+
});
|
|
126
|
+
return /*#__PURE__*/ jsx("div", {
|
|
127
|
+
ref: ref,
|
|
128
|
+
className: styles.root({
|
|
129
|
+
className: styles.circle({
|
|
130
|
+
className
|
|
131
|
+
})
|
|
132
|
+
}),
|
|
133
|
+
"aria-busy": "true",
|
|
134
|
+
"aria-label": "Loading content",
|
|
135
|
+
...props
|
|
136
|
+
});
|
|
137
|
+
};
|
|
138
|
+
Skeleton.Text = function({ noOfLines = 3, size = 'md', speed, lastLineWidth = '80%', isLoaded, variant, children, containerClassName, className, ref, ...props }) {
|
|
139
|
+
const resolved = useResolvedSkeletonProps({
|
|
140
|
+
isLoaded,
|
|
141
|
+
variant,
|
|
142
|
+
speed
|
|
143
|
+
});
|
|
144
|
+
const styles = skeletonVariants({
|
|
145
|
+
size,
|
|
146
|
+
variant: resolved.variant,
|
|
147
|
+
speed: resolved.speed
|
|
148
|
+
});
|
|
149
|
+
if (resolved.isLoaded) return /*#__PURE__*/ jsx(Fragment, {
|
|
150
|
+
children: children
|
|
151
|
+
});
|
|
152
|
+
const lineCount = Number.isFinite(noOfLines) ? Math.max(1, noOfLines) : 1;
|
|
153
|
+
return /*#__PURE__*/ jsx("div", {
|
|
154
|
+
ref: ref,
|
|
155
|
+
className: styles.textContainer({
|
|
156
|
+
className: containerClassName
|
|
157
|
+
}),
|
|
158
|
+
"aria-busy": "true",
|
|
159
|
+
"aria-label": "Loading content",
|
|
160
|
+
...props,
|
|
161
|
+
children: Array.from({
|
|
162
|
+
length: lineCount
|
|
163
|
+
}).map((_, index)=>{
|
|
164
|
+
const isLastLine = index === lineCount - 1;
|
|
165
|
+
const width = isLastLine && lineCount > 1 ? lastLineWidth : '100%';
|
|
166
|
+
return /*#__PURE__*/ jsx("div", {
|
|
167
|
+
className: styles.root({
|
|
168
|
+
className: styles.textLine({
|
|
169
|
+
className
|
|
170
|
+
})
|
|
171
|
+
}),
|
|
172
|
+
style: {
|
|
173
|
+
width
|
|
174
|
+
}
|
|
175
|
+
}, index);
|
|
176
|
+
})
|
|
177
|
+
});
|
|
178
|
+
};
|
|
179
|
+
Skeleton.Rectangle = function({ aspectRatio, height, width = '100%', speed, isLoaded, variant, children, className, style, ref, ...props }) {
|
|
180
|
+
const resolved = useResolvedSkeletonProps({
|
|
181
|
+
isLoaded,
|
|
182
|
+
variant,
|
|
183
|
+
speed
|
|
184
|
+
});
|
|
185
|
+
const styles = skeletonVariants({
|
|
186
|
+
variant: resolved.variant,
|
|
187
|
+
speed: resolved.speed
|
|
188
|
+
});
|
|
189
|
+
if (resolved.isLoaded) return /*#__PURE__*/ jsx(Fragment, {
|
|
190
|
+
children: children
|
|
191
|
+
});
|
|
192
|
+
return /*#__PURE__*/ jsx("div", {
|
|
193
|
+
ref: ref,
|
|
194
|
+
className: styles.root({
|
|
195
|
+
className: styles.rectangle({
|
|
196
|
+
className
|
|
197
|
+
})
|
|
198
|
+
}),
|
|
199
|
+
style: {
|
|
200
|
+
...style,
|
|
201
|
+
width,
|
|
202
|
+
height,
|
|
203
|
+
aspectRatio
|
|
204
|
+
},
|
|
205
|
+
"aria-busy": "true",
|
|
206
|
+
"aria-label": "Loading content",
|
|
207
|
+
...props,
|
|
208
|
+
children: children
|
|
209
|
+
});
|
|
210
|
+
};
|
|
211
|
+
export { Skeleton };
|
package/dist/atoms/textarea.js
CHANGED
|
@@ -54,7 +54,7 @@ const textareaVariants = tv({
|
|
|
54
54
|
auto: 'resize-none field-sizing-content'
|
|
55
55
|
},
|
|
56
56
|
readonly: {
|
|
57
|
-
true: 'bg-textarea-bg-disabled cursor-default
|
|
57
|
+
true: 'bg-textarea-bg-disabled cursor-default text-textarea-fg-disabled border-textarea-border-disabled'
|
|
58
58
|
}
|
|
59
59
|
},
|
|
60
60
|
defaultVariants: {
|
|
@@ -19,7 +19,13 @@ const checkboxVariants = tv({
|
|
|
19
19
|
'bg-checkbox data-[state=checked]:bg-checkbox-checked',
|
|
20
20
|
'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',
|
|
21
21
|
'data-[state=checked]:after:token-icon-checkbox text-icon-fg data-[state=checked]:text-checkbox-icon-md',
|
|
22
|
-
'data-[disabled]:
|
|
22
|
+
'data-[disabled]:cursor-not-allowed',
|
|
23
|
+
'data-[disabled]:bg-checkbox-bg-disabled',
|
|
24
|
+
'data-[disabled]:text-checkbox-fg-disabled',
|
|
25
|
+
'data-[disabled]:border-checkbox-border-disabled',
|
|
26
|
+
'data-[disabled]:data-[state=checked]:bg-checkbox-bg-disabled',
|
|
27
|
+
'data-[disabled]:data-[state=checked]:text-checkbox-fg-disabled',
|
|
28
|
+
'data-[disabled]:data-[state=checked]:border-checkbox-border-disabled',
|
|
23
29
|
'transition-all duration-200',
|
|
24
30
|
'data-[focus]:outline-none',
|
|
25
31
|
'data-[focus]:ring',
|
package/dist/molecules/menu.js
CHANGED
|
@@ -29,9 +29,8 @@ const menuVariants = tv({
|
|
|
29
29
|
'rounded-menu-item',
|
|
30
30
|
'hover:bg-menu-item-hover',
|
|
31
31
|
'focus:bg-menu-item-hover focus:outline-none',
|
|
32
|
-
'data-[disabled]:
|
|
33
|
-
'data-[highlighted]:bg-menu-item-hover'
|
|
34
|
-
'data-[disabled]:opacity-50'
|
|
32
|
+
'data-[disabled]:text-menu-fg-disabled data-[disabled]:cursor-not-allowed',
|
|
33
|
+
'data-[highlighted]:bg-menu-item-hover'
|
|
35
34
|
],
|
|
36
35
|
optionItem: [
|
|
37
36
|
'data-[state=checked]:font-semibold'
|
|
@@ -7,9 +7,7 @@ import { tv } from "../utils.js";
|
|
|
7
7
|
const popoverVariants = tv({
|
|
8
8
|
slots: {
|
|
9
9
|
trigger: [
|
|
10
|
-
'p-popover-trigger'
|
|
11
|
-
'disabled:pointer-events-none',
|
|
12
|
-
'disabled:opacity-disabled'
|
|
10
|
+
'p-popover-trigger'
|
|
13
11
|
],
|
|
14
12
|
positioner: [
|
|
15
13
|
'absolute'
|
|
@@ -67,7 +65,7 @@ const popoverVariants = tv({
|
|
|
67
65
|
function Popover({ trigger, children, open, defaultOpen, onOpenChange, placement = 'bottom', offset = {
|
|
68
66
|
mainAxis: 8,
|
|
69
67
|
crossAxis: 0
|
|
70
|
-
}, gutter = 8, sameWidth = false, slide = true, flip = true, overflowPadding = 8, modal = false, closeOnInteractOutside = true, closeOnEscape = true, showArrow = true, autoFocus = true, portalled = true, title, description, id, triggerRef, contentRef, triggerClassName, contentClassName, size = 'md', shadow = true, border = true, onPointerDownOutside }) {
|
|
68
|
+
}, gutter = 8, sameWidth = false, slide = true, flip = true, overflowPadding = 8, modal = false, closeOnInteractOutside = true, closeOnEscape = true, showArrow = true, autoFocus = true, portalled = true, title, description, id, triggerRef, contentRef, triggerClassName, contentClassName, size = 'md', shadow = true, border = true, disabled = false, onPointerDownOutside }) {
|
|
71
69
|
const generatedId = useId();
|
|
72
70
|
const uniqueId = id || generatedId;
|
|
73
71
|
const service = useMachine(machine, {
|
|
@@ -135,6 +133,7 @@ function Popover({ trigger, children, open, defaultOpen, onOpenChange, placement
|
|
|
135
133
|
children: [
|
|
136
134
|
/*#__PURE__*/ jsx(Button, {
|
|
137
135
|
theme: "borderless",
|
|
136
|
+
disabled: disabled,
|
|
138
137
|
...api.getTriggerProps(),
|
|
139
138
|
ref: triggerRef,
|
|
140
139
|
className: triggerStyles({
|
package/dist/molecules/select.js
CHANGED
|
@@ -31,6 +31,9 @@ const selectVariants = tv({
|
|
|
31
31
|
'hover:bg-select-trigger-bg-hover',
|
|
32
32
|
'focus:outline-none focus:border-select-trigger-border-focus',
|
|
33
33
|
'data-[disabled]:cursor-not-allowed',
|
|
34
|
+
'data-[disabled]:bg-select-bg-disabled',
|
|
35
|
+
'data-[disabled]:text-select-fg-disabled',
|
|
36
|
+
'data-[disabled]:border-select-border-disabled',
|
|
34
37
|
'data-[invalid]:border-select-danger data-[invalid]:ring-select-danger'
|
|
35
38
|
],
|
|
36
39
|
clearTrigger: [
|
|
@@ -55,7 +58,7 @@ const selectVariants = tv({
|
|
|
55
58
|
'hover:bg-select-item-bg-hover',
|
|
56
59
|
'data-[state=checked]:bg-select-item-bg-selected',
|
|
57
60
|
'data-[state=checked]:text-select-item-selected-fg',
|
|
58
|
-
'data-[disabled]:
|
|
61
|
+
'data-[disabled]:text-select-fg-disabled data-[disabled]:cursor-not-allowed'
|
|
59
62
|
],
|
|
60
63
|
itemIndicator: [
|
|
61
64
|
'text-select-indicator'
|
package/dist/molecules/slider.js
CHANGED
|
@@ -11,7 +11,7 @@ const sliderVariants = tv({
|
|
|
11
11
|
root: [
|
|
12
12
|
'flex flex-col w-full gap-slider-root',
|
|
13
13
|
'data-[orientation=vertical]:h-full',
|
|
14
|
-
'data-[disabled]:
|
|
14
|
+
'data-[disabled]:cursor-not-allowed'
|
|
15
15
|
],
|
|
16
16
|
header: [
|
|
17
17
|
'flex items-center justify-between'
|
|
@@ -40,7 +40,7 @@ const sliderVariants = tv({
|
|
|
40
40
|
range: [
|
|
41
41
|
'bg-slider-range-bg rounded-slider-track h-full',
|
|
42
42
|
'data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-full',
|
|
43
|
-
'data-[disabled]:bg-slider-bg-disabled',
|
|
43
|
+
'data-[disabled]:bg-slider-range-bg-disabled',
|
|
44
44
|
'hover:bg-slider-range-bg-hover',
|
|
45
45
|
'data-[invalid=true]:bg-slider-range-bg-error'
|
|
46
46
|
],
|
package/dist/molecules/switch.js
CHANGED
|
@@ -10,7 +10,8 @@ const switchVariants = tv({
|
|
|
10
10
|
slots: {
|
|
11
11
|
root: [
|
|
12
12
|
'cursor-pointer',
|
|
13
|
-
'data-[disabled]:cursor-not-allowed'
|
|
13
|
+
'data-[disabled]:cursor-not-allowed',
|
|
14
|
+
'flex items-center'
|
|
14
15
|
],
|
|
15
16
|
control: [
|
|
16
17
|
'me-switch-root p-switch-control',
|
|
@@ -25,6 +26,7 @@ const switchVariants = tv({
|
|
|
25
26
|
'data-[state=checked]:hover:bg-switch-bg-checked-hover',
|
|
26
27
|
'data-[disabled]:bg-switch-bg-disabled',
|
|
27
28
|
'data-[disabled]:border-switch-border-disabled',
|
|
29
|
+
'data-[disabled]:data-[state=checked]:bg-switch-bg-disabled',
|
|
28
30
|
'data-[focus]:outline-none',
|
|
29
31
|
'data-[focus]:ring',
|
|
30
32
|
'data-[focus]:ring-switch-ring',
|
package/dist/molecules/tabs.js
CHANGED
|
@@ -29,7 +29,7 @@ const tabsVariants = tv({
|
|
|
29
29
|
'focus-visible:ring',
|
|
30
30
|
'focus-visible:ring-tabs-ring',
|
|
31
31
|
'data-[selected]:text-tabs-trigger-fg-selected',
|
|
32
|
-
'data-[disabled]:
|
|
32
|
+
'data-[disabled]:text-tabs-fg-disabled data-[disabled]:cursor-not-allowed'
|
|
33
33
|
],
|
|
34
34
|
indicator: [
|
|
35
35
|
'absolute bg-tabs-indicator-bg rounded-tabs-indicator',
|
|
@@ -169,6 +169,7 @@ Tabs.Trigger = function({ value, disabled, children, ref, className, ...props })
|
|
|
169
169
|
const { api, styles } = useTabsContext();
|
|
170
170
|
return /*#__PURE__*/ jsx(Button, {
|
|
171
171
|
ref: ref,
|
|
172
|
+
type: "button",
|
|
172
173
|
theme: "borderless",
|
|
173
174
|
className: styles.trigger({
|
|
174
175
|
className
|
|
@@ -16,7 +16,7 @@ const treeViewVariants = tv({
|
|
|
16
16
|
'focus-visible:ring-tree-ring'
|
|
17
17
|
],
|
|
18
18
|
branch: [
|
|
19
|
-
'data-[disabled]:
|
|
19
|
+
'data-[disabled]:text-tree-fg-disabled data-[disabled]:pointer-events-none'
|
|
20
20
|
],
|
|
21
21
|
branchTrigger: [
|
|
22
22
|
'group flex items-center justify-between',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/atoms/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/atoms/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDA6DjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EACzD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAC5B;AAED,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,GAAG,EACH,gBAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,2CAeZ"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from 'react';
|
|
2
|
+
interface SkeletonRootProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
|
|
3
|
+
isLoaded?: boolean;
|
|
4
|
+
variant?: 'primary' | 'secondary';
|
|
5
|
+
speed?: 'slow' | 'normal' | 'fast';
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
ref?: Ref<HTMLDivElement>;
|
|
8
|
+
}
|
|
9
|
+
export declare function Skeleton({ isLoaded, variant, children, speed, className, ref, ...props }: SkeletonRootProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare namespace Skeleton {
|
|
11
|
+
var Circle: ({ size, speed, isLoaded, variant, children, className, ref, ...props }: SkeletonCircleProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
var Text: ({ noOfLines, size, speed, lastLineWidth, isLoaded, variant, children, containerClassName, className, ref, ...props }: SkeletonTextProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
var Rectangle: ({ aspectRatio, height, width, speed, isLoaded, variant, children, className, style, ref, ...props }: SkeletonRectangleProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
}
|
|
15
|
+
interface SkeletonCircleProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
|
|
16
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
17
|
+
speed?: 'slow' | 'normal' | 'fast';
|
|
18
|
+
isLoaded?: boolean;
|
|
19
|
+
variant?: 'primary' | 'secondary';
|
|
20
|
+
children?: ReactNode;
|
|
21
|
+
ref?: Ref<HTMLDivElement>;
|
|
22
|
+
}
|
|
23
|
+
interface SkeletonTextProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
|
|
24
|
+
noOfLines?: number;
|
|
25
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
26
|
+
speed?: 'slow' | 'normal' | 'fast';
|
|
27
|
+
lastLineWidth?: string;
|
|
28
|
+
isLoaded?: boolean;
|
|
29
|
+
variant?: 'primary' | 'secondary';
|
|
30
|
+
children?: ReactNode;
|
|
31
|
+
containerClassName?: string;
|
|
32
|
+
ref?: Ref<HTMLDivElement>;
|
|
33
|
+
}
|
|
34
|
+
interface SkeletonRectangleProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
|
|
35
|
+
aspectRatio?: string;
|
|
36
|
+
height?: string;
|
|
37
|
+
width?: string;
|
|
38
|
+
speed?: 'slow' | 'normal' | 'fast';
|
|
39
|
+
isLoaded?: boolean;
|
|
40
|
+
variant?: 'primary' | 'secondary';
|
|
41
|
+
children?: ReactNode;
|
|
42
|
+
ref?: Ref<HTMLDivElement>;
|
|
43
|
+
}
|
|
44
|
+
export {};
|
|
45
|
+
//# sourceMappingURL=skeleton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/atoms/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,SAAS,EACd,KAAK,GAAG,EAGT,MAAM,OAAO,CAAA;AA0Fd,UAAU,iBACR,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAED,wBAAgB,QAAQ,CAAC,EACvB,QAAgB,EAChB,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAoBnB;yBA5Be,QAAQ;yFAiDrB,mBAAmB;qIAmDnB,iBAAiB;yHAkEjB,sBAAsB;;AAxIzB,UAAU,mBACR,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAqCD,UAAU,iBACR,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAwDD,UAAU,sBACR,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/molecules/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AAE5C,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,GAAG,EAAS,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/molecules/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AAE5C,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,GAAG,EAAS,MAAM,OAAO,CAAA;AAsCjE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC/D,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,eAAe,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAA;CACpD;AAED,wBAAgB,QAAQ,CAAC,EACvB,EAAE,EACF,IAAI,EACJ,OAAO,EACP,cAAc,EACd,aAAa,EACb,QAAQ,EACR,eAAe,EACf,SAAS,EACT,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,GACX,EAAE,aAAa,2CAgDf;yBA9De,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/molecules/menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,KAAK,YAAY,EAAM,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEnD,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,WAAW,CAAA;IACjB,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,SAAS,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,QAAQ,GAChB,cAAc,GACd,aAAa,GACb,gBAAgB,GAChB,iBAAiB,GACjB,eAAe,CAAA;AAGnB,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../src/molecules/menu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -118,7 +118,8 @@ export interface PopoverProps extends VariantProps<typeof popoverVariants>, popo
|
|
|
118
118
|
contentRef?: Ref<HTMLDivElement>;
|
|
119
119
|
triggerClassName?: string;
|
|
120
120
|
contentClassName?: string;
|
|
121
|
+
disabled?: boolean;
|
|
121
122
|
}
|
|
122
|
-
export declare function Popover({ trigger, children, open, defaultOpen, onOpenChange, placement, offset, gutter, sameWidth, slide, flip, overflowPadding, modal, closeOnInteractOutside, closeOnEscape, showArrow, autoFocus, portalled, title, description, id, triggerRef, contentRef, triggerClassName, contentClassName, size, shadow, border, onPointerDownOutside, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
|
|
123
|
+
export declare function Popover({ trigger, children, open, defaultOpen, onOpenChange, placement, offset, gutter, sameWidth, slide, flip, overflowPadding, modal, closeOnInteractOutside, closeOnEscape, showArrow, autoFocus, portalled, title, description, id, triggerRef, contentRef, triggerClassName, contentClassName, size, shadow, border, disabled, onPointerDownOutside, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
|
|
123
124
|
export {};
|
|
124
125
|
//# sourceMappingURL=popover.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/molecules/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAE1C,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAS,MAAM,OAAO,CAAA;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/molecules/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAE1C,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAS,MAAM,OAAO,CAAA;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAiDnB,CAAA;AAEF,MAAM,WAAW,YACf,SAAQ,YAAY,CAAC,OAAO,eAAe,CAAC,EAC1C,OAAO,CAAC,KAAK;IACf,OAAO,EAAE,SAAS,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAA;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAA;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAA;IAC7C,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAA;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAA;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAA;IACnD,eAAe,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,CAAA;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,UAAU,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;IACnC,UAAU,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,SAAoB,EACpB,MAAsC,EACtC,MAAU,EACV,SAAiB,EACjB,KAAY,EACZ,IAAW,EACX,eAAmB,EACnB,KAAa,EACb,sBAA6B,EAC7B,aAAoB,EACpB,SAAgB,EAChB,SAAgB,EAChB,SAAgB,EAChB,KAAK,EACL,WAAW,EACX,EAAE,EACF,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,gBAAgB,EAChB,IAAW,EACX,MAAa,EACb,MAAa,EACb,QAAgB,EAChB,oBAAoB,GACrB,EAAE,YAAY,2CA0Fd"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/molecules/select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,KAAK,YAAY,EAAM,MAAM,mBAAmB,CAAA;AAQzD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAGD,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/molecules/select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,KAAK,YAAY,EAAM,MAAM,mBAAmB,CAAA;AAQzD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAGD,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwElB,CAAA;AAGF,MAAM,WAAW,WACf,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC,EACzC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACzC,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,KAAK,EACL,WAAgC,EAChC,IAAW,EACX,KAAK,EACL,YAAY,EACZ,QAAgB,EAChB,SAAgB,EAChB,QAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,QAAgB,EAChB,SAAS,EACT,UAAU,EACV,aAAoB,EACpB,SAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,UAAU,GACf,EAAE,WAAW,2CA4Hb;yBArJe,MAAM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/molecules/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAA;AAC7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAMrD,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/molecules/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAA;AAC7C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAMrD,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAuClB,CAAA;AAEF,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACtE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,IAAI,EACJ,KAAK,EACL,OAAO,EACP,cAAc,EACd,QAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,QAAgB,EAChB,GAAW,EACX,QAAQ,EACR,SAAS,EACT,eAAe,EACf,UAAU,EACV,SAAS,GACV,EAAE,WAAW,2CA+Cb"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/molecules/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,GAAG,EAIT,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAsGhB,CAAA;AAuBF,MAAM,WAAW,SACf,SAAQ,YAAY,CAAC,OAAO,YAAY,CAAC,EACvC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IACnB,cAAc,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAA;IACvC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAED,wBAAgB,IAAI,CAAC,EACnB,EAAE,EACF,YAAY,EACZ,KAAK,EACL,WAA0B,EAC1B,GAAW,EACX,cAA4B,EAC5B,SAAgB,EAChB,aAAa,EACb,OAAO,EACP,IAAI,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,2CAkCX;yBAnDe,IAAI;uDA+DjB,aAAa;2EA6Bb,gBAAgB;
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/molecules/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,GAAG,EAIT,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAsGhB,CAAA;AAuBF,MAAM,WAAW,SACf,SAAQ,YAAY,CAAC,OAAO,YAAY,CAAC,EACvC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IACnB,cAAc,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAA;IACvC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAED,wBAAgB,IAAI,CAAC,EACnB,EAAE,EACF,YAAY,EACZ,KAAK,EACL,WAA0B,EAC1B,GAAW,EACX,cAA4B,EAC5B,SAAgB,EAChB,aAAa,EACb,OAAO,EACP,IAAI,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,2CAkCX;yBAnDe,IAAI;uDA+DjB,aAAa;2EA6Bb,gBAAgB;iEA8BhB,gBAAgB;kDAwBhB,kBAAkB;;;AA5FrB,UAAU,aAAc,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAC7D,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAuBD,UAAU,gBAAiB,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IACnE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAC7B;AA4BD,UAAU,gBAAiB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAChE,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAwBD,UAAU,kBAAmB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAClE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B"}
|
package/package.json
CHANGED
package/src/tokens/_semantic.css
CHANGED
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
--state-light-chroma: 0.6; /* Reduce saturation for softer, pastel colors */
|
|
14
14
|
--state-secondary-text: 0.15;
|
|
15
15
|
--state-border: 15%;
|
|
16
|
+
--state-placeholder: 0.25;
|
|
16
17
|
--max-lightness: 0.97;
|
|
17
18
|
--opacity-ring: 80%;
|
|
18
19
|
--opacity-disabled: 60%;
|
|
@@ -28,6 +29,7 @@
|
|
|
28
29
|
--state-hover: 0.08;
|
|
29
30
|
--state-active: 0.12;
|
|
30
31
|
--state-secondary-text: -0.15;
|
|
32
|
+
--state-placeholder: -0.25;
|
|
31
33
|
--surface-increment: -0.05;
|
|
32
34
|
}
|
|
33
35
|
|
|
@@ -37,6 +39,7 @@
|
|
|
37
39
|
--state-hover: 0.08;
|
|
38
40
|
--state-active: 0.12;
|
|
39
41
|
--state-secondary-text: -0.15;
|
|
42
|
+
--state-placeholder: -0.25;
|
|
40
43
|
--surface-increment: -0.05;
|
|
41
44
|
}
|
|
42
45
|
}
|
|
@@ -46,6 +49,7 @@
|
|
|
46
49
|
--state-hover: 0.08;
|
|
47
50
|
--state-active: 0.12;
|
|
48
51
|
--state-secondary-text: -0.15;
|
|
52
|
+
--state-placeholder: -0.25;
|
|
49
53
|
--surface-increment: -0.05;
|
|
50
54
|
}
|
|
51
55
|
|
|
@@ -53,6 +57,7 @@
|
|
|
53
57
|
--state-hover: -0.08;
|
|
54
58
|
--state-active: -0.12;
|
|
55
59
|
--state-secondary-text: 0.15;
|
|
60
|
+
--state-placeholder: 0.25;
|
|
56
61
|
--surface-increment: 0.05;
|
|
57
62
|
}
|
|
58
63
|
|
|
@@ -62,6 +67,7 @@
|
|
|
62
67
|
--state-hover: 0.08;
|
|
63
68
|
--state-active: 0.12;
|
|
64
69
|
--state-secondary-text: -0.15;
|
|
70
|
+
--state-placeholder: -0.25;
|
|
65
71
|
--surface-increment: -0.05;
|
|
66
72
|
}
|
|
67
73
|
}
|
|
@@ -71,6 +77,7 @@
|
|
|
71
77
|
--state-hover: -0.08;
|
|
72
78
|
--state-active: -0.12;
|
|
73
79
|
--state-secondary-text: 0.15;
|
|
80
|
+
--state-placeholder: 0.25;
|
|
74
81
|
--surface-increment: 0.05;
|
|
75
82
|
}
|
|
76
83
|
}
|
|
@@ -273,6 +280,9 @@
|
|
|
273
280
|
from var(--color-fg-primary) calc(l + var(--state-secondary-text)) c h
|
|
274
281
|
);
|
|
275
282
|
--color-fg-reverse: light-dark(var(--color-fg-dark), var(--color-fg-light));
|
|
283
|
+
--color-fg-placeholder: oklch(
|
|
284
|
+
from var(--color-fg-secondary) calc(l + var(--state-placeholder)) c h
|
|
285
|
+
);
|
|
276
286
|
|
|
277
287
|
/* Background colors */
|
|
278
288
|
/* All levels of background color in the application, including container, menu, navigation bar, etc. In dark mode, we usually use the background color to distinguish the front and back levels */
|
|
@@ -334,22 +344,17 @@
|
|
|
334
344
|
calc(var(--fill-increment) * 3)
|
|
335
345
|
);
|
|
336
346
|
|
|
337
|
-
/*
|
|
338
|
-
|
|
339
|
-
--color-disabled
|
|
340
|
-
--color-disabled
|
|
341
|
-
var(--color-
|
|
342
|
-
var(--
|
|
343
|
-
);
|
|
344
|
-
--color-disabled-border: --alpha(
|
|
345
|
-
var(--color-border-primary) /
|
|
346
|
-
var(--opacity-disabled)
|
|
347
|
-
);
|
|
348
|
-
--color-disabled-fill: --alpha(
|
|
349
|
-
var(--color-fill-base) /
|
|
350
|
-
var(--opacity-disabled)
|
|
347
|
+
/* Semantic color-based disabled tokens (preferred approach) */
|
|
348
|
+
--color-bg-disabled: light-dark(var(--color-gray-100), var(--color-gray-800));
|
|
349
|
+
--color-fg-disabled: light-dark(var(--color-gray-500), var(--color-gray-500));
|
|
350
|
+
--color-border-disabled: light-dark(
|
|
351
|
+
var(--color-gray-300),
|
|
352
|
+
var(--color-gray-700)
|
|
351
353
|
);
|
|
352
354
|
|
|
355
|
+
/* Disabled fill for form controls and interactive elements */
|
|
356
|
+
--color-fill-disabled: light-dark(var(--color-gray-50), var(--color-gray-850));
|
|
357
|
+
|
|
353
358
|
/* Spacing */
|
|
354
359
|
--spacing: 0.25rem;
|
|
355
360
|
|
|
@@ -183,9 +183,9 @@
|
|
|
183
183
|
);
|
|
184
184
|
|
|
185
185
|
/* === DISABLED STATES === */
|
|
186
|
-
--color-button-bg-disabled: var(--color-disabled
|
|
187
|
-
--color-button-fg-disabled: var(--color-disabled
|
|
188
|
-
--color-button-border-disabled: var(--color-disabled
|
|
186
|
+
--color-button-bg-disabled: var(--color-bg-disabled);
|
|
187
|
+
--color-button-fg-disabled: var(--color-fg-disabled);
|
|
188
|
+
--color-button-border-disabled: var(--color-border-disabled);
|
|
189
189
|
|
|
190
190
|
/* === SPACING === */
|
|
191
191
|
--spacing-button-sm: var(--spacing-150);
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
--color-input: var(--color-fill-base);
|
|
5
5
|
--color-input-border: var(--color-border-primary);
|
|
6
6
|
--color-input-fg: var(--color-fg-primary);
|
|
7
|
-
--color-input-disabled: var(--color-disabled
|
|
7
|
+
--color-input-bg-disabled: var(--color-bg-disabled);
|
|
8
8
|
|
|
9
9
|
/* Validation states - primary colors */
|
|
10
10
|
--color-input-danger: var(--color-danger);
|
|
@@ -24,10 +24,7 @@
|
|
|
24
24
|
from var(--color-input-border) calc(l + var(--state-hover)) c h
|
|
25
25
|
);
|
|
26
26
|
--color-input-border-focus: var(--color-primary);
|
|
27
|
-
--color-input-border-disabled: --
|
|
28
|
-
var(--color-input-border) /
|
|
29
|
-
var(--opacity-disabled)
|
|
30
|
-
);
|
|
27
|
+
--color-input-border-disabled: var(--color-border-disabled);
|
|
31
28
|
|
|
32
29
|
/* Error state - hover/focus */
|
|
33
30
|
--color-input-border-danger: var(--color-input-danger);
|
|
@@ -35,10 +32,6 @@
|
|
|
35
32
|
from var(--color-input-danger) calc(l + var(--state-hover)) c h
|
|
36
33
|
);
|
|
37
34
|
--color-input-border-danger-focus: var(--color-input-danger);
|
|
38
|
-
--color-input-placeholder-danger: --alpha(
|
|
39
|
-
var(--color-input-danger) /
|
|
40
|
-
var(--opacity-disabled)
|
|
41
|
-
);
|
|
42
35
|
|
|
43
36
|
/* Success state - hover/focus */
|
|
44
37
|
--color-input-border-success: var(--color-input-success);
|
|
@@ -46,10 +39,6 @@
|
|
|
46
39
|
from var(--color-input-success) calc(l + var(--state-hover)) c h
|
|
47
40
|
);
|
|
48
41
|
--color-input-border-success-focus: var(--color-input-success);
|
|
49
|
-
--color-input-placeholder-success: --alpha(
|
|
50
|
-
var(--color-input-success) /
|
|
51
|
-
var(--opacity-disabled)
|
|
52
|
-
);
|
|
53
42
|
|
|
54
43
|
/* Warning state - hover/focus */
|
|
55
44
|
--color-input-border-warning: var(--color-input-warning);
|
|
@@ -57,31 +46,15 @@
|
|
|
57
46
|
from var(--color-input-warning) calc(l + var(--state-hover)) c h
|
|
58
47
|
);
|
|
59
48
|
--color-input-border-warning-focus: var(--color-input-warning);
|
|
60
|
-
--color-input-placeholder-warning: --alpha(
|
|
61
|
-
var(--color-input-warning) /
|
|
62
|
-
var(--opacity-disabled)
|
|
63
|
-
);
|
|
64
49
|
|
|
65
50
|
/* Text colors */
|
|
66
|
-
--color-input-fg-disabled: --
|
|
67
|
-
|
|
68
|
-
var(--opacity-disabled)
|
|
69
|
-
);
|
|
70
|
-
--color-input-placeholder: --alpha(
|
|
71
|
-
var(--color-input-fg) /
|
|
72
|
-
var(--opacity-placeholder)
|
|
73
|
-
);
|
|
74
|
-
|
|
75
|
-
--color-input-placeholder-disabled: --alpha(
|
|
76
|
-
var(--color-input-fg) /
|
|
77
|
-
var(--opacity-disabled-placeholder)
|
|
78
|
-
);
|
|
51
|
+
--color-input-fg-disabled: var(--color-fg-disabled);
|
|
52
|
+
--color-input-fg-placeholder: var(--color-fg-placeholder);
|
|
79
53
|
|
|
80
54
|
/* Label colors */
|
|
81
55
|
--color-label-fg: var(--color-input-fg);
|
|
82
56
|
--color-label-disabled: var(--color-input-fg-disabled);
|
|
83
57
|
--color-label-required: var(--color-input-danger);
|
|
84
|
-
--margin-label: var(--spacing-100);
|
|
85
58
|
|
|
86
59
|
/* Error/Helper/Extra colors */
|
|
87
60
|
--color-error-fg: var(--color-danger);
|
|
@@ -4,10 +4,7 @@
|
|
|
4
4
|
--color-rating-fg-active: var(--color-warning);
|
|
5
5
|
|
|
6
6
|
/* === DISABLED STATES === */
|
|
7
|
-
--color-rating-fg-disabled: --
|
|
8
|
-
var(--color-rating-fg-active) /
|
|
9
|
-
var(--opacity-disabled)
|
|
10
|
-
);
|
|
7
|
+
--color-rating-fg-disabled: var(--color-fg-disabled);
|
|
11
8
|
|
|
12
9
|
/* === SPACING === */
|
|
13
10
|
--spacing-rating-sm: var(--spacing-100);
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
@theme static {
|
|
2
|
+
/* === BASE COLOR MAPPING === */
|
|
3
|
+
/* Background colors using reference layer */
|
|
4
|
+
--color-skeleton-bg: var(--color-overlay);
|
|
5
|
+
--color-skeleton-bg-primary: var(--color-skeleton-bg);
|
|
6
|
+
--color-skeleton-bg-secondary: var(--color-surface);
|
|
7
|
+
|
|
8
|
+
/* === ANIMATION === */
|
|
9
|
+
/* Use global motion tokens for consistent behavior */
|
|
10
|
+
--duration-skeleton-pulse-slow: 3s;
|
|
11
|
+
--duration-skeleton-pulse-normal: 2s;
|
|
12
|
+
--duration-skeleton-pulse-fast: 1s;
|
|
13
|
+
|
|
14
|
+
/* === SPACING === */
|
|
15
|
+
--spacing-skeleton-text-sm: var(--spacing-100);
|
|
16
|
+
--spacing-skeleton-text-md: var(--spacing-150);
|
|
17
|
+
--spacing-skeleton-text-lg: var(--spacing-200);
|
|
18
|
+
--spacing-skeleton-text-xl: var(--spacing-250);
|
|
19
|
+
|
|
20
|
+
/* === SIZING === */
|
|
21
|
+
--size-skeleton-circle-sm: 2rem;
|
|
22
|
+
--size-skeleton-circle-md: 3rem;
|
|
23
|
+
--size-skeleton-circle-lg: 4rem;
|
|
24
|
+
--size-skeleton-circle-xl: 6rem;
|
|
25
|
+
--height-skeleton-text-line: 1rem; /* Match text line height */
|
|
26
|
+
|
|
27
|
+
/* === BORDERS & RADIUS === */
|
|
28
|
+
--radius-skeleton-text: var(--radius-sm);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* === ANIMATIONS === */
|
|
32
|
+
@keyframes skeleton-pulse {
|
|
33
|
+
0%,
|
|
34
|
+
100% {
|
|
35
|
+
opacity: 1;
|
|
36
|
+
}
|
|
37
|
+
50% {
|
|
38
|
+
opacity: 0.5;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@utility animate-skeleton-pulse-slow {
|
|
43
|
+
animation: skeleton-pulse var(--duration-skeleton-pulse-slow) ease-in-out
|
|
44
|
+
infinite;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@utility animate-skeleton-pulse-normal {
|
|
48
|
+
animation: skeleton-pulse var(--duration-skeleton-pulse-normal) ease-in-out
|
|
49
|
+
infinite;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@utility animate-skeleton-pulse-fast {
|
|
53
|
+
animation: skeleton-pulse var(--duration-skeleton-pulse-fast) ease-in-out
|
|
54
|
+
infinite;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@layer utilities {
|
|
58
|
+
.animate-skeleton-pulse-slow,
|
|
59
|
+
.animate-skeleton-pulse-normal,
|
|
60
|
+
.animate-skeleton-pulse-fast {
|
|
61
|
+
@media (prefers-reduced-motion: reduce) {
|
|
62
|
+
animation: none;
|
|
63
|
+
opacity: 0.7;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Display reduced motion for storybook without having to
|
|
69
|
+
enable the prefers-reduced-motion feature in DevTools */
|
|
70
|
+
@layer utilities {
|
|
71
|
+
.force-reduced-motion {
|
|
72
|
+
animation: none;
|
|
73
|
+
opacity: 0.7;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
@@ -21,14 +21,14 @@
|
|
|
21
21
|
var(--color-fg-primary) /
|
|
22
22
|
var(--opacity-placeholder)
|
|
23
23
|
);
|
|
24
|
-
--color-textarea-fg-disabled: var(--color-disabled
|
|
24
|
+
--color-textarea-fg-disabled: var(--color-fg-disabled);
|
|
25
25
|
|
|
26
26
|
/* Border colors */
|
|
27
27
|
--color-textarea-border: var(--color-border-primary);
|
|
28
28
|
--color-textarea-border-success: var(--color-textarea-success);
|
|
29
29
|
--color-textarea-border-warning: var(--color-textarea-warning);
|
|
30
30
|
--color-textarea-border-danger: var(--color-textarea-danger);
|
|
31
|
-
--color-textarea-border-disabled: var(--color-disabled
|
|
31
|
+
--color-textarea-border-disabled: var(--color-border-disabled);
|
|
32
32
|
|
|
33
33
|
/* === STATE VARIATIONS === */
|
|
34
34
|
/* Default hover/focus states */
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
--color-textarea-bg-borderless-focus: var(--color-textarea-base);
|
|
73
73
|
|
|
74
74
|
/* === DISABLED STATES === */
|
|
75
|
-
--color-textarea-bg-disabled: var(--color-disabled
|
|
75
|
+
--color-textarea-bg-disabled: var(--color-bg-disabled);
|
|
76
76
|
|
|
77
77
|
/* === SPACING === */
|
|
78
78
|
--padding-textarea-sm: var(--spacing-100) var(--spacing-150);
|
|
@@ -32,10 +32,7 @@
|
|
|
32
32
|
/* Validation states will be added here when needed */
|
|
33
33
|
|
|
34
34
|
/* === DISABLED STATES === */
|
|
35
|
-
--color-accordion-fg-disabled: --
|
|
36
|
-
var(--color-disabled-fg) /
|
|
37
|
-
var(--opacity-disabled)
|
|
38
|
-
);
|
|
35
|
+
--color-accordion-fg-disabled: var(--color-fg-disabled);
|
|
39
36
|
|
|
40
37
|
/* === SPACING === */
|
|
41
38
|
--padding-accordion-title-sm: var(--spacing-100) var(--spacing-150);
|
|
@@ -4,7 +4,12 @@
|
|
|
4
4
|
--color-checkbox-error: var(--color-danger);
|
|
5
5
|
--color-checkbox-checked: var(--color-success);
|
|
6
6
|
--color-checkbox-border: var(--color-border-primary);
|
|
7
|
-
|
|
7
|
+
|
|
8
|
+
/* === DISABLED STATE === */
|
|
9
|
+
/* Using unified disabled tokens for consistency across all components */
|
|
10
|
+
--color-checkbox-bg-disabled: var(--color-bg-disabled);
|
|
11
|
+
--color-checkbox-fg-disabled: var(--color-fg-disabled);
|
|
12
|
+
--color-checkbox-border-disabled: var(--color-border-disabled);
|
|
8
13
|
|
|
9
14
|
--color-checkbox-indeterminate: var(--color-primary);
|
|
10
15
|
|
|
@@ -61,9 +61,9 @@
|
|
|
61
61
|
|
|
62
62
|
/* === DISABLED STATES === */
|
|
63
63
|
/* Disabled appearance */
|
|
64
|
-
--color-combobox-bg-disabled: var(--color-disabled
|
|
65
|
-
--color-combobox-fg-disabled: var(--color-disabled
|
|
66
|
-
--color-combobox-border-disabled: var(--color-disabled
|
|
64
|
+
--color-combobox-bg-disabled: var(--color-bg-disabled);
|
|
65
|
+
--color-combobox-fg-disabled: var(--color-fg-disabled);
|
|
66
|
+
--color-combobox-border-disabled: var(--color-border-disabled);
|
|
67
67
|
|
|
68
68
|
/* === SPACING === */
|
|
69
69
|
/* Padding, margin, gap values */
|
|
@@ -32,15 +32,9 @@
|
|
|
32
32
|
);
|
|
33
33
|
|
|
34
34
|
/* === DISABLED STATES === */
|
|
35
|
-
--color-pagination-bg-disabled: var(--color-disabled
|
|
36
|
-
--color-pagination-fg-disabled: --
|
|
37
|
-
|
|
38
|
-
var(--opacity-disabled)
|
|
39
|
-
);
|
|
40
|
-
--color-pagination-border-disabled: --alpha(
|
|
41
|
-
var(--color-pagination-border) /
|
|
42
|
-
var(--opacity-disabled)
|
|
43
|
-
);
|
|
35
|
+
--color-pagination-bg-disabled: var(--color-bg-disabled);
|
|
36
|
+
--color-pagination-fg-disabled: var(--color-fg-disabled);
|
|
37
|
+
--color-pagination-border-disabled: var(--color-border-disabled);
|
|
44
38
|
|
|
45
39
|
/* === SPACING === */
|
|
46
40
|
--spacing-pagination: var(--spacing-200);
|
|
@@ -51,7 +51,9 @@
|
|
|
51
51
|
);
|
|
52
52
|
|
|
53
53
|
/* === DISABLED STATES === */
|
|
54
|
-
--
|
|
54
|
+
--color-select-bg-disabled: var(--color-bg-disabled);
|
|
55
|
+
--color-select-fg-disabled: var(--color-fg-disabled);
|
|
56
|
+
--color-select-border-disabled: var(--color-border-disabled);
|
|
55
57
|
|
|
56
58
|
/* === SPACING === */
|
|
57
59
|
--spacing-content: var(--spacing-450);
|
|
@@ -15,7 +15,6 @@
|
|
|
15
15
|
--color-slider-track-bg: var(--color-slider-base);
|
|
16
16
|
--color-slider-marker-bg: var(--color-slider-accent);
|
|
17
17
|
--color-slider-thumb-bg: var(--color-base-light);
|
|
18
|
-
--color-slider-bg-disabled: var(--color-disabled-bg);
|
|
19
18
|
|
|
20
19
|
/* Border colors */
|
|
21
20
|
--color-slider-border: var(--color-border-primary);
|
|
@@ -37,9 +36,10 @@
|
|
|
37
36
|
--color-slider-border-error: var(--color-slider-error);
|
|
38
37
|
|
|
39
38
|
/* === DISABLED STATES === */
|
|
40
|
-
|
|
41
|
-
--color-slider-thumb-bg-disabled: var(--color-
|
|
42
|
-
--color-slider-
|
|
39
|
+
--color-slider-bg-disabled: var(--color-bg-disabled);
|
|
40
|
+
--color-slider-thumb-bg-disabled: var(--color-fg-disabled);
|
|
41
|
+
--color-slider-range-bg-disabled: var(--color-fg-disabled);
|
|
42
|
+
--color-slider-border-disabled: var(--color-border-disabled);
|
|
43
43
|
|
|
44
44
|
/* === SPACING === */
|
|
45
45
|
--spacing-slider-root: var(--spacing-200);
|
|
@@ -69,7 +69,4 @@
|
|
|
69
69
|
|
|
70
70
|
/* === FOCUS RINGS === */
|
|
71
71
|
--color-slider-ring: var(--color-ring);
|
|
72
|
-
|
|
73
|
-
/* === OPACITY === */
|
|
74
|
-
--opacity-slider-disabled: var(--opacity-disabled);
|
|
75
72
|
}
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
--color-switch-border: var(--color-border-primary);
|
|
15
15
|
--color-switch-thumb-bg: var(--color-base-light);
|
|
16
16
|
--color-switch-label-fg: var(--color-fg-primary);
|
|
17
|
-
--color-switch-label-fg-disabled: var(--color-disabled
|
|
17
|
+
--color-switch-label-fg-disabled: var(--color-fg-disabled);
|
|
18
18
|
|
|
19
19
|
/* Backgrounds colors */
|
|
20
20
|
--color-switch-bg-checked: var(--color-switch-success);
|
|
@@ -28,12 +28,10 @@
|
|
|
28
28
|
);
|
|
29
29
|
|
|
30
30
|
/* === DISABLED STATES === */
|
|
31
|
-
|
|
32
|
-
--color-switch-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
);
|
|
36
|
-
--color-switch-border-disabled: var(--color-disabled-border);
|
|
31
|
+
/* Using unified disabled tokens for consistency across all components */
|
|
32
|
+
--color-switch-bg-disabled: var(--color-bg-disabled);
|
|
33
|
+
--color-switch-thumb-bg-disabled: var(--color-fg-disabled);
|
|
34
|
+
--color-switch-border-disabled: var(--color-border-disabled);
|
|
37
35
|
|
|
38
36
|
/* === INVALID STATES === */
|
|
39
37
|
--color-switch-bg-invalid: var(--color-switch-invalid);
|