@cladd-ui/react 0.0.23 → 0.0.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/components/Button.d.ts +3 -3
- package/components/Button.d.ts.map +1 -1
- package/components/Chip.js +8 -8
- package/components/Chip.js.map +1 -1
- package/components/Slider.d.ts +1 -1
- package/components/Slider.d.ts.map +1 -1
- package/components/Slider.js +3 -3
- package/components/Slider.js.map +1 -1
- package/components/Spinner.d.ts +2 -2
- package/components/Spinner.d.ts.map +1 -1
- package/components/Switch.d.ts +9 -9
- package/components/Switch.d.ts.map +1 -1
- package/components/Switch.js +2 -2
- package/components/Switch.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/components/Button.d.ts
CHANGED
|
@@ -44,11 +44,11 @@ interface ButtonOwnProps<C extends ElementType = 'button'> {
|
|
|
44
44
|
* - `'cut'` - uses `SurfaceCut` (inset/recessed look - for buttons that sit inside another surface).
|
|
45
45
|
*/
|
|
46
46
|
surface?: ButtonSurface;
|
|
47
|
-
/** Forwarded to the underlying surface. Defaults to `true
|
|
47
|
+
/** Forwarded to the underlying surface. Defaults to `true`. Suppressed automatically when `disabled` or `readOnly`. */
|
|
48
48
|
clickable?: boolean;
|
|
49
|
-
/** Forwarded to the underlying surface. Defaults to `true
|
|
49
|
+
/** Forwarded to the underlying surface. Defaults to `true`. Suppressed automatically when `disabled` or `readOnly`. */
|
|
50
50
|
hoverable?: boolean;
|
|
51
|
-
/**
|
|
51
|
+
/** Renders a `FocusableLayer` ring on keyboard focus. Defaults to `true`. Suppressed automatically when `disabled` or `readOnly`. */
|
|
52
52
|
focusable?: boolean;
|
|
53
53
|
/** Forwarded to the underlying `Surface` as `level` - see `SurfaceProps.level` for the relative-offset (`"+1"`/`"-1"`) syntax. */
|
|
54
54
|
surfaceLevel?: string | number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,SAAS,EACT,GAAG,EACH,aAAa,EACb,wBAAwB,EACzB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,OAAO,EAAW,cAAc,EAAE,MAAM,WAAW,CAAC;AAGpD,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAC1E,KAAK,aAAa,GAAG,SAAS,GAAG,KAAK,CAAC;AAEvC,UAAU,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ;IACvD,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wGAAwG;IACxG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;OACG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,qFAAqF;IACrF,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,sGAAsG;IACtG,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qIAAqI;IACrI,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,SAAS,EACT,GAAG,EACH,aAAa,EACb,wBAAwB,EACzB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,OAAO,EAAW,cAAc,EAAE,MAAM,WAAW,CAAC;AAGpD,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAC1E,KAAK,aAAa,GAAG,SAAS,GAAG,KAAK,CAAC;AAEvC,UAAU,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ;IACvD,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wGAAwG;IACxG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;OACG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,qFAAqF;IACrF,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,sGAAsG;IACtG,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qIAAqI;IACrI,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,wHAAwH;IACxH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wHAAwH;IACxH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qIAAqI;IACrI,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kIAAkI;IAClI,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAAI,cAAc,CAAC,CAAC,CAAC,GAC3E,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAE7D,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAQtD,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,WAAW,GAAG,QAAQ,EACrD,OAAO,WAAW,CAAC,CAAC,CAAC,4CAiItB,CAAC"}
|
package/components/Chip.js
CHANGED
|
@@ -8,13 +8,13 @@ export const Chip = (props) => {
|
|
|
8
8
|
const { children, disabled, className = '', contentClassName = '', rounded = false, size = 'md', as: Component = 'span', outline, hoverable, clickable, color = '', icon: IconComponent, iconProps = {}, surfaceLevel, ref, ...rest } = props;
|
|
9
9
|
const height = nestedSizeClasses(size, 'height');
|
|
10
10
|
const paddings = {
|
|
11
|
-
'2xs': 'px-1 [&:has(>svg)]:pl-1',
|
|
12
|
-
xs: 'px-1 [&:has(>svg)]:pl-1',
|
|
13
|
-
sm: 'px-2 [&:has(>svg)]:pl-1',
|
|
14
|
-
md: 'px-2 [&:has(>svg)]:pl-1',
|
|
15
|
-
lg: 'px-2.5 [&:has(>svg)]:pl-
|
|
16
|
-
xl: 'px-
|
|
17
|
-
'2xl': 'px-2',
|
|
11
|
+
'2xs': 'px-1 [&:has(>svg:first-child)]:pl-1 [&:has(>svg:last-child)]:pr-1',
|
|
12
|
+
xs: 'px-1 [&:has(>svg:first-child)]:pl-1 [&:has(>svg:last-child)]:pr-1',
|
|
13
|
+
sm: 'px-2 [&:has(>svg:first-child)]:pl-1.5 [&:has(>svg:last-child)]:pr-1.5',
|
|
14
|
+
md: 'px-2 [&:has(>svg:first-child)]:pl-1.5 [&:has(>svg:last-child)]:pr-1.5',
|
|
15
|
+
lg: 'px-2.5 [&:has(>svg:first-child)]:pl-2 [&:has(>svg:last-child)]:pr-2',
|
|
16
|
+
xl: 'px-2.5 [&:has(>svg:first-child)]:pl-2 [&:has(>svg:last-child)]:pr-2',
|
|
17
|
+
'2xl': 'px-2.5',
|
|
18
18
|
};
|
|
19
19
|
const fontSizes = {
|
|
20
20
|
'2xs': 'text-cladd-4xs',
|
|
@@ -29,7 +29,7 @@ export const Chip = (props) => {
|
|
|
29
29
|
'2xs': '[&>svg]:size-1.5',
|
|
30
30
|
xs: '[&>svg]:size-2.5',
|
|
31
31
|
sm: '[&>svg]:size-3',
|
|
32
|
-
md: '[&>svg]:size-
|
|
32
|
+
md: '[&>svg]:size-3.5',
|
|
33
33
|
lg: '[&>svg]:size-4',
|
|
34
34
|
xl: '[&>svg]:size-4',
|
|
35
35
|
'2xl': '[&>svg]:size-4',
|
package/components/Chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/Chip.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,GAMP,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAiDpC,MAAM,CAAC,MAAM,IAAI,GAAG,CAAiC,KAAmB,EAAE,EAAE;IAC1E,MAAM,KAAK,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAC/C,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,IAAI,EACX,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,OAAO,EACP,SAAS,EACT,SAAS,EACT,KAAK,GAAG,EAAE,EACV,IAAI,EAAE,aAAa,EACnB,SAAS,GAAG,EAAE,EACd,YAAY,EACZ,GAAG,EACH,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IACV,MAAM,MAAM,GAAG,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IACjD,MAAM,QAAQ,GAA6B;QACzC,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/Chip.tsx"],"names":[],"mappings":"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"}
|
package/components/Slider.d.ts
CHANGED
|
@@ -24,7 +24,7 @@ export interface SliderProps {
|
|
|
24
24
|
onChange?: (value: number, event?: ChangeEvent<HTMLInputElement>) => void;
|
|
25
25
|
/** Extra classes for the slider container. */
|
|
26
26
|
className?: string;
|
|
27
|
-
/** Accent color for the active track segment and
|
|
27
|
+
/** Accent color for the active track segment and thumb. Default: theme accent. */
|
|
28
28
|
color?: Color;
|
|
29
29
|
/**
|
|
30
30
|
* Reserved - currently unused in the rendered output (the underlying `<input type="range">` is always present). Kept for parity with other form components.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,WAAW,EAAc,MAAM,OAAO,CAAC;AAI7E,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,MAAM,WAAW,WAAW;IAC1B,0GAA0G;IAC1G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1E,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,
|
|
1
|
+
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,WAAW,EAAc,MAAM,OAAO,CAAC;AAI7E,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,MAAM,WAAW,WAAW;IAC1B,0GAA0G;IAC1G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1E,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,2CAuLxC"}
|
package/components/Slider.js
CHANGED
|
@@ -12,7 +12,7 @@ export function Slider(props) {
|
|
|
12
12
|
const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
|
|
13
13
|
const value = isControlled ? valueProp : uncontrolledValue;
|
|
14
14
|
const elRef = useRef(null);
|
|
15
|
-
const
|
|
15
|
+
const thumbElRef = useRef(null);
|
|
16
16
|
const progress = (value - min) / (max - min);
|
|
17
17
|
const debounceTimer = useRef(null);
|
|
18
18
|
const isTouched = useRef(false);
|
|
@@ -68,9 +68,9 @@ export function Slider(props) {
|
|
|
68
68
|
width: `calc((100% - ${size === 'sm' ? 'var(--spacing-cladd-thumb-sm)' : 'var(--spacing-cladd-thumb-md)'}) * ${progress})`,
|
|
69
69
|
} }) }), _jsxs("span", { "data-part": "thumb-wrapper", className: cn('pointer-events-none absolute inset-0 flex items-center ease-out', durationClass), style: {
|
|
70
70
|
paddingLeft: `calc((100% - ${size === 'sm' ? 20 : 24}px) * ${progress})`,
|
|
71
|
-
}, children: [_jsx("span", { className: "relative top-0 h-0 w-0", "data-part": "value", children: _jsx(Surface, { color: color, variant: "gradient", outline: true, className: cn(size === 'sm' && '-left-1.5', size === 'md' && '-left-1', '
|
|
71
|
+
}, children: [_jsx("span", { className: "relative top-0 h-0 w-0", "data-part": "value", children: _jsx(Surface, { color: color, variant: "gradient", outline: true, className: cn(size === 'sm' && '-left-1.5', size === 'md' && '-left-1', 'absolute -bottom-4 w-8 scale-0 rounded-full pt-2.5 pb-8 text-center text-cladd-xs leading-none font-medium text-cladd-primary duration-300', !disabled &&
|
|
72
72
|
!readOnly &&
|
|
73
73
|
'group-focus-within/cladd-slider:scale-100 group-active/cladd-slider:scale-100'), beforeContent: !readOnly &&
|
|
74
|
-
!disabled && (_jsx(FocusableLayer, { group: "slider", className: "rounded-full" })), children: value }) }), _jsx(Surface, { "data-part": "thumb", className: cn('z-10 shrink-0 rounded-full', size === 'sm' && 'size-cladd-thumb-sm', size === 'md' && 'size-cladd-thumb-md'), outline: true, variant: "gradient-fill", color: color, ref:
|
|
74
|
+
!disabled && (_jsx(FocusableLayer, { group: "slider", className: "rounded-full" })), children: value }) }), _jsx(Surface, { "data-part": "thumb", className: cn('z-10 shrink-0 rounded-full', size === 'sm' && 'size-cladd-thumb-sm', size === 'md' && 'size-cladd-thumb-md'), outline: true, variant: "gradient-fill", color: color, ref: thumbElRef })] }), _jsx("input", { "data-part": "input", className: "relative m-0 block w-full appearance-none border-transparent bg-transparent p-0 focus:outline-none", type: "range", disabled: disabled || readOnly, readOnly: readOnly, value: value, min: min, max: max, step: step, onChange: onChangeInternal })] }));
|
|
75
75
|
}
|
|
76
76
|
//# sourceMappingURL=Slider.js.map
|
package/components/Slider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAA2B,MAAM,OAAO,CAAC;AAE7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAoC1C,MAAM,UAAU,MAAM,CAAC,KAAkB;IACvC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,MAAM,EACJ,KAAK,EAAE,SAAS,EAChB,YAAY,GAAG,CAAC,EAChB,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,IAAI,GAAG,CAAC,EACR,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EACnB,SAAS,EACT,KAAK,GAAG,WAAW,EACnB,KAAK,EAAE,MAAM,GAAG,KAAK,EACrB,QAAQ,GAAG,CAAC,GACb,GAAG,KAAK,CAAC;IAEV,MAAM,YAAY,GAAG,SAAS,KAAK,SAAS,CAAC;IAC7C,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACzE,MAAM,KAAK,GAAG,YAAY,CAAC,CAAC,CAAE,SAAoB,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAEvE,MAAM,KAAK,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAClD,MAAM,
|
|
1
|
+
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider.tsx"],"names":[],"mappings":"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"}
|
package/components/Spinner.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { Color } from '../types.js';
|
|
2
2
|
export type SpinnerSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
3
3
|
export interface SpinnerProps {
|
|
4
|
-
/** Spinner dimension. Default `'sm'`.
|
|
4
|
+
/** Spinner dimension. Default `'sm'`. */
|
|
5
5
|
size?: SpinnerSize;
|
|
6
|
-
/** Accent color for the spinning
|
|
6
|
+
/** Accent color for the spinning ring. Default: theme accent. */
|
|
7
7
|
color?: Color;
|
|
8
8
|
/** Extra classes for the spinner root element. */
|
|
9
9
|
className?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAE3E,MAAM,WAAW,YAAY;IAC3B
|
|
1
|
+
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAE3E,MAAM,WAAW,YAAY;IAC3B,yCAAyC;IACzC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAwB1C"}
|
package/components/Switch.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ interface SwitchOwnProps<C extends ElementType = 'label'> {
|
|
|
11
11
|
readOnly?: boolean;
|
|
12
12
|
/** Fires when the user toggles. First arg is the new checked state, second is the raw event. */
|
|
13
13
|
onChange?: (checked: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
|
|
14
|
-
/** Accent color for the checked state
|
|
14
|
+
/** Accent color for the checked state thumb fill. Default: theme accent. */
|
|
15
15
|
color?: Color;
|
|
16
16
|
/**
|
|
17
17
|
* Polymorphic root element. Defaults to `'label'` so a wrapping `<label>` activates the hidden input on click.
|
|
@@ -20,7 +20,7 @@ interface SwitchOwnProps<C extends ElementType = 'label'> {
|
|
|
20
20
|
*/
|
|
21
21
|
as?: C;
|
|
22
22
|
/**
|
|
23
|
-
* Icon rendered inside the
|
|
23
|
+
* Icon rendered inside the thumb. Pass either a static `ReactNode`, or a function `(checked) => ReactNode` to render different content based on the switch state.
|
|
24
24
|
*
|
|
25
25
|
* If omitted, the built-in animated cross/check glyph is used.
|
|
26
26
|
*/
|
|
@@ -43,7 +43,7 @@ interface SwitchOwnProps<C extends ElementType = 'label'> {
|
|
|
43
43
|
/**
|
|
44
44
|
* Auto-computed when omitted: `true` if `as === 'label'` OR `input` is `true`.
|
|
45
45
|
*
|
|
46
|
-
* Drives whether the focus ring (`FocusableLayer`) is rendered on the
|
|
46
|
+
* Drives whether the focus ring (`FocusableLayer`) is rendered on the thumb.
|
|
47
47
|
*/
|
|
48
48
|
focusable?: boolean;
|
|
49
49
|
/** Outline ring on the **track** (background surface). Default `true`. */
|
|
@@ -56,14 +56,14 @@ interface SwitchOwnProps<C extends ElementType = 'label'> {
|
|
|
56
56
|
surfaceLevel?: string | number;
|
|
57
57
|
/** Surface variant for the **track**. Default `'solid'`. */
|
|
58
58
|
variant?: SurfaceVariant;
|
|
59
|
-
/** Outline ring on the **
|
|
60
|
-
|
|
61
|
-
/** Surface variant for the **
|
|
62
|
-
|
|
59
|
+
/** Outline ring on the **thumb**. Default `true`. */
|
|
60
|
+
thumbOutline?: boolean;
|
|
61
|
+
/** Surface variant for the **thumb**. Default `'gradient'`. */
|
|
62
|
+
thumbVariant?: SurfaceVariant;
|
|
63
63
|
/**
|
|
64
|
-
* Surface level for the **
|
|
64
|
+
* Surface level for the **thumb**. Default `'+2'` - two levels deeper than the parent surface, so the thumb reads as a raised piece on top of the track.
|
|
65
65
|
*/
|
|
66
|
-
|
|
66
|
+
thumbSurfaceLevel?: string | number;
|
|
67
67
|
}
|
|
68
68
|
export type SwitchProps<C extends ElementType = 'label'> = SwitchOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof SwitchOwnProps<C>>;
|
|
69
69
|
export declare function Switch<C extends ElementType = 'label'>(props: SwitchProps<C>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,SAAS,EAET,wBAAwB,EACzB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,OAAO,EAAW,cAAc,EAAE,MAAM,WAAW,CAAC;AAEpD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,UAAU,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO;IACtD,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,CACT,OAAO,EAAE,OAAO,EAChB,KAAK,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KACxC,IAAI,CAAC;IACV,
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,SAAS,EAET,wBAAwB,EACzB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,OAAO,EAAW,cAAc,EAAE,MAAM,WAAW,CAAC;AAEpD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,UAAU,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO;IACtD,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gGAAgG;IAChG,QAAQ,CAAC,EAAE,CACT,OAAO,EAAE,OAAO,EAChB,KAAK,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KACxC,IAAI,CAAC;IACV,4EAA4E;IAC5E,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC;IACrD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,4DAA4D;IAC5D,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,qDAAqD;IACrD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACrC;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,IAAI,cAAc,CAAC,CAAC,CAAC,GAC1E,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAE7D,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,2CA8K5E"}
|
package/components/Switch.js
CHANGED
|
@@ -6,7 +6,7 @@ import { FocusableLayer } from './FocusableLayer.js';
|
|
|
6
6
|
import { Surface } from './Surface.js';
|
|
7
7
|
export function Switch(props) {
|
|
8
8
|
const accentColor = useAccentColor();
|
|
9
|
-
const { checked = false, disabled = false, readOnly, onChange = () => { }, color = accentColor, as: asProp = 'label', icon, size = 'md', className, input = true, hoverable, focusable, outline = true, variant = 'solid', surfaceLevel = '+1',
|
|
9
|
+
const { checked = false, disabled = false, readOnly, onChange = () => { }, color = accentColor, as: asProp = 'label', icon, size = 'md', className, input = true, hoverable, focusable, outline = true, variant = 'solid', surfaceLevel = '+1', thumbOutline = true, thumbVariant = 'gradient', thumbSurfaceLevel = '+2', } = props;
|
|
10
10
|
const elRef = useRef(null);
|
|
11
11
|
let hoverableComputed = hoverable;
|
|
12
12
|
let focusableComputed = focusable;
|
|
@@ -39,7 +39,7 @@ export function Switch(props) {
|
|
|
39
39
|
},
|
|
40
40
|
}
|
|
41
41
|
: {};
|
|
42
|
-
return (_jsxs(Component, { "data-checked": checked || undefined, "data-unchecked": !checked || undefined, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, className: cn('cladd-switch group/cladd-switch relative flex shrink-0 rounded-full select-none', size === 'sm' && 'w-10 p-1', size === 'md' && 'w-12 p-1', className), onContextMenuCapture: (e) => e.preventDefault(), ref: elRef, ...ariaFallback, children: [input && (_jsx("input", { "data-part": "input", checked: checked, type: "checkbox", role: "switch", "aria-checked": checked, disabled: disabled || readOnly, readOnly: readOnly, className: "pointer-events-none absolute inset-0 z-10 opacity-0", onChange: (e) => onChange(!checked, e) })), _jsx(Surface, { "data-part": "track", level: surfaceLevel, className: "absolute inset-0 rounded-full", outline: outline, variant: variant, wrapContent: false }), _jsxs(Surface, { "data-part": "thumb", className: cn('z-10 rounded-full duration-300', size === 'sm' && 'size-cladd-thumb-xs', size === 'md' && 'size-cladd-thumb-sm', checked && size === 'sm' && `translate-x-cladd-thumb-xs`, checked && size === 'md' && `translate-x-cladd-thumb-sm`, disabled && 'opacity-50'), contentClassName: "flex items-center justify-center", variant:
|
|
42
|
+
return (_jsxs(Component, { "data-checked": checked || undefined, "data-unchecked": !checked || undefined, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, className: cn('cladd-switch group/cladd-switch relative flex shrink-0 rounded-full select-none', size === 'sm' && 'w-10 p-1', size === 'md' && 'w-12 p-1', className), onContextMenuCapture: (e) => e.preventDefault(), ref: elRef, ...ariaFallback, children: [input && (_jsx("input", { "data-part": "input", checked: checked, type: "checkbox", role: "switch", "aria-checked": checked, disabled: disabled || readOnly, readOnly: readOnly, className: "pointer-events-none absolute inset-0 z-10 opacity-0", onChange: (e) => onChange(!checked, e) })), _jsx(Surface, { "data-part": "track", level: surfaceLevel, className: "absolute inset-0 rounded-full", outline: outline, variant: variant, wrapContent: false }), _jsxs(Surface, { "data-part": "thumb", className: cn('z-10 rounded-full duration-300', size === 'sm' && 'size-cladd-thumb-xs', size === 'md' && 'size-cladd-thumb-sm', checked && size === 'sm' && `translate-x-cladd-thumb-xs`, checked && size === 'md' && `translate-x-cladd-thumb-sm`, disabled && 'opacity-50'), contentClassName: "flex items-center justify-center", variant: thumbVariant, outline: thumbOutline, level: thumbSurfaceLevel, clickable: !disabled && !readOnly, hoverable: !disabled && !readOnly, beforeContent: _jsx(Surface, { className: cn('absolute inset-0 size-full shrink-0 rounded-full duration-200', !checked && 'scale-0', checked ? 'opacity-100' : 'opacity-0'), color: color, outline: true, level: '+0', variant: 'gradient-fill', clickable: !disabled && !readOnly, hoverable: !disabled && !readOnly }), children: [icon && typeof icon === 'function' && icon(checked), icon && typeof icon !== 'function' && icon, !icon && (_jsx("span", { "data-part": "indicator", className: cn('absolute inset-0', size === 'sm' && 'scale-80', checked && `cladd-color-${color}`), children: _jsxs("span", { className: cn('absolute inset-0 duration-300 group-active/cladd-switch:scale-90', checked && 'rotate-180', !checked && size === 'sm' && 'rotate-90'), children: [_jsx("span", { className: cn('absolute top-1/2 left-1/2 -mt-px -ml-2 h-0.5 w-4 rotate-45 rounded-full duration-300', checked ? 'bg-cladd-on-primary' : 'bg-cladd-fg-soft', checked
|
|
43
43
|
? 'translate-x-0.5 translate-y-[-1.75px] scale-x-40'
|
|
44
44
|
: 'scale-x-75') }), _jsx("span", { className: cn('absolute top-1/2 left-1/2 -mt-px -ml-2 h-0.5 w-4 -rotate-45 rounded-full duration-300', checked ? 'bg-cladd-on-primary' : 'bg-cladd-fg-soft', checked
|
|
45
45
|
? 'translate-x-[-1.5px] scale-x-60 -rotate-60'
|
package/components/Switch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,GAKP,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAkB,MAAM,WAAW,CAAC;AA0EpD,MAAM,UAAU,MAAM,CAAkC,KAAqB;IAC3E,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,MAAM,EACJ,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EACnB,KAAK,GAAG,WAAW,EACnB,EAAE,EAAE,MAAM,GAAG,OAAO,EACpB,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,SAAS,EACT,KAAK,GAAG,IAAI,EACZ,SAAS,EACT,SAAS,EACT,OAAO,GAAG,IAAI,EACd,OAAO,GAAG,OAAO,EACjB,YAAY,GAAG,IAAI,EACnB,
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch.tsx"],"names":[],"mappings":"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"}
|