@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.
Files changed (39) hide show
  1. package/dist/atoms/input.js +6 -10
  2. package/dist/atoms/skeleton.js +211 -0
  3. package/dist/atoms/textarea.js +1 -1
  4. package/dist/molecules/checkbox.js +7 -1
  5. package/dist/molecules/menu.js +2 -3
  6. package/dist/molecules/popover.js +3 -4
  7. package/dist/molecules/select.js +4 -1
  8. package/dist/molecules/slider.js +2 -2
  9. package/dist/molecules/switch.js +3 -1
  10. package/dist/molecules/tabs.js +2 -1
  11. package/dist/molecules/tree-view.js +1 -1
  12. package/dist/src/atoms/input.d.ts.map +1 -1
  13. package/dist/src/atoms/skeleton.d.ts +45 -0
  14. package/dist/src/atoms/skeleton.d.ts.map +1 -0
  15. package/dist/src/molecules/checkbox.d.ts.map +1 -1
  16. package/dist/src/molecules/menu.d.ts.map +1 -1
  17. package/dist/src/molecules/popover.d.ts +2 -1
  18. package/dist/src/molecules/popover.d.ts.map +1 -1
  19. package/dist/src/molecules/select.d.ts.map +1 -1
  20. package/dist/src/molecules/switch.d.ts.map +1 -1
  21. package/dist/src/molecules/tabs.d.ts.map +1 -1
  22. package/package.json +1 -1
  23. package/src/tokens/_semantic.css +19 -14
  24. package/src/tokens/components/atoms/_button.css +3 -3
  25. package/src/tokens/components/atoms/_input.css +4 -31
  26. package/src/tokens/components/atoms/_rating.css +1 -4
  27. package/src/tokens/components/atoms/_skeleton.css +75 -0
  28. package/src/tokens/components/atoms/_textarea.css +3 -3
  29. package/src/tokens/components/components.css +1 -0
  30. package/src/tokens/components/molecules/_accordion.css +1 -4
  31. package/src/tokens/components/molecules/_checkbox.css +6 -1
  32. package/src/tokens/components/molecules/_combobox.css +3 -3
  33. package/src/tokens/components/molecules/_menu.css +1 -1
  34. package/src/tokens/components/molecules/_pagination.css +3 -9
  35. package/src/tokens/components/molecules/_select.css +3 -1
  36. package/src/tokens/components/molecules/_slider.css +4 -7
  37. package/src/tokens/components/molecules/_switch.css +5 -7
  38. package/src/tokens/components/molecules/_tabs.css +1 -1
  39. package/src/tokens/components/molecules/_tree-view.css +1 -1
@@ -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 };
@@ -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 opacity-90 text-textarea-fg-disabled border-textarea-border-disabled'
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]:opacity-checkbox-disabled data-[disabled]:cursor-not-allowed data-[disabled]:grayscale',
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',
@@ -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]:opacity-menu-disabled data-[disabled]:cursor-not-allowed',
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({
@@ -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]:opacity-select-disabled data-[disabled]:cursor-not-allowed'
61
+ 'data-[disabled]:text-select-fg-disabled data-[disabled]:cursor-not-allowed'
59
62
  ],
60
63
  itemIndicator: [
61
64
  'text-select-indicator'
@@ -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]:opacity-slider-disabled data-[disabled]:cursor-not-allowed'
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
  ],
@@ -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',
@@ -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]:opacity-tabs-disabled data-[disabled]:cursor-not-allowed'
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]:opacity-tree-disabled data-[disabled]:pointer-events-none'
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAiEjB,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"}
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;AAgCjE,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
+ {"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":"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"}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAqDnB,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;CAC1B;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,oBAAoB,GACrB,EAAE,YAAY,2CAyFd"}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAqElB,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
+ {"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAkClB,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
+ {"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;iEA6BhB,gBAAgB;kDAwBhB,kBAAkB;;;AA3FrB,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;AA2BD,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"}
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@techsio/ui-kit",
3
- "version": "0.1.1",
3
+ "version": "0.2.1",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",
@@ -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
- /*Disabled state - Disabled
338
- It is used to fill all kinds of forbidden elements in the interface, such as background, text, stroke, fill, etc*/
339
- --color-disabled-bg: --alpha(var(--color-base-reverse) / 10%);
340
- --color-disabled-fg: --alpha(
341
- var(--color-fg-primary) /
342
- var(--opacity-disabled)
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-bg);
187
- --color-button-fg-disabled: var(--color-disabled-fg);
188
- --color-button-border-disabled: var(--color-disabled-border);
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-bg);
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: --alpha(
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: --alpha(
67
- var(--color-input-fg) /
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: --alpha(
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-fg);
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-border);
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-bg);
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);
@@ -4,6 +4,7 @@
4
4
  @import "./atoms/_input.css";
5
5
  @import "./atoms/_numeric-input.css";
6
6
  @import "./atoms/_rating.css";
7
+ @import "./atoms/_skeleton.css";
7
8
  @import "./atoms/_textarea.css";
8
9
  @import "./atoms/_tooltip.css";
9
10
 
@@ -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: --alpha(
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
- --opacity-checkbox-disabled: var(--opacity-disabled);
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-bg);
65
- --color-combobox-fg-disabled: var(--color-disabled-fg);
66
- --color-combobox-border-disabled: var(--color-disabled-border);
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 */
@@ -31,7 +31,7 @@
31
31
  --spacing-menu-submenu-offset: var(--spacing-200);
32
32
 
33
33
  /* ===== MENU DISABLED STATE ===== */
34
- --opacity-menu-disabled: 50%;
34
+ --color-menu-fg-disabled: var(--color-fg-disabled);
35
35
  }
36
36
 
37
37
  /* Semantic tokens for menu icons */
@@ -32,15 +32,9 @@
32
32
  );
33
33
 
34
34
  /* === DISABLED STATES === */
35
- --color-pagination-bg-disabled: var(--color-disabled-bg);
36
- --color-pagination-fg-disabled: --alpha(
37
- var(--color-pagination-fg) /
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
- --opacity-select-disabled: var(--opacity-disabled);
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
- /* we must avoid transparent paint, otherwise the range would be visible */
41
- --color-slider-thumb-bg-disabled: var(--color-slider-accent);
42
- --color-slider-border-disabled: var(--color-disabled-border);
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-fg);
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
- --color-switch-bg-disabled: var(--color-disabled-bg);
32
- --color-switch-thumb-bg-disabled: --alpha(
33
- var(--color-switch-thumb-bg) /
34
- var(--opacity-disabled)
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);
@@ -65,5 +65,5 @@
65
65
  --radius-tabs-indicator: 0;
66
66
 
67
67
  /* === DISABLED STATE === */
68
- --opacity-tabs-disabled: var(--opacity-disabled);
68
+ --color-tabs-fg-disabled: var(--color-fg-disabled);
69
69
  }
@@ -26,7 +26,7 @@
26
26
  --width-tree-indent: 1px;
27
27
 
28
28
  /* === DISABLED STATES === */
29
- --opacity-tree-disabled: 60%;
29
+ --color-tree-fg-disabled: var(--color-fg-disabled);
30
30
 
31
31
  /* === SPACING === */
32
32
  --tree-indent-per-level: var(--spacing-100);