@cladd-ui/react 0.0.36 → 0.0.38
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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../src/components/NumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,
|
|
1
|
+
{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../src/components/NumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAuB,MAAM,OAAO,CAAC;AAI5D,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,OAAO,EAAW,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAGlE,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEhE,UAAU,mBAAmB;IAC3B,mGAAmG;IACnG,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kGAAkG;IAClG,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qDAAqD;IACrD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,yGAAyG;IACzG,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mBAAmB;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,+CAA+C;IAC/C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,gBAAgB,GAAG,mBAAmB,GAChD,IAAI,CAAC,YAAY,EAAE,MAAM,mBAAmB,CAAC,CAAC;AAEhD,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAgMlD,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
2
3
|
import { cn } from '../shared/cn.js';
|
|
3
4
|
import { roundedClasses } from '../shared/rounded-classes.js';
|
|
4
5
|
import { Button } from './Button.js';
|
|
@@ -7,6 +8,10 @@ import { Surface } from './Surface.js';
|
|
|
7
8
|
import { SurfaceCut } from './SurfaceCut.js';
|
|
8
9
|
export const NumberField = (props) => {
|
|
9
10
|
const { children, input = true, inputClassName = '', className = '', contentClassName = '', disabled = false, readOnly = false, rounded = true, valueRounded = false, size = 'md', color = '', outline = true, variant = 'gradient', buttonVariant = 'transparent', buttonOutline = false, surfaceLevel, min = 0, max = 1000000, value = 0, step = 1, onChange = () => { }, ref, ...rest } = props;
|
|
11
|
+
const [draft, setDraft] = useState(String(value));
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
setDraft(String(value));
|
|
14
|
+
}, [value]);
|
|
10
15
|
const decrease = () => {
|
|
11
16
|
if (value <= min || disabled)
|
|
12
17
|
return;
|
|
@@ -26,6 +31,36 @@ export const NumberField = (props) => {
|
|
|
26
31
|
};
|
|
27
32
|
const { itemRoundedClasses } = roundedClasses(size, valueRounded, false);
|
|
28
33
|
const { wrapRoundedClasses } = roundedClasses(size, rounded, false);
|
|
29
|
-
|
|
34
|
+
const isFill = variant === 'solid-fill' || variant === 'gradient-fill';
|
|
35
|
+
const buttonVariantComputed = isFill && buttonVariant && !buttonVariant.includes('fill')
|
|
36
|
+
? buttonVariant === 'transparent' || buttonVariant === 'solid'
|
|
37
|
+
? 'solid-fill'
|
|
38
|
+
: 'gradient-fill'
|
|
39
|
+
: buttonVariant;
|
|
40
|
+
return (_jsxs(Surface, { "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, className: cn('cladd-number-field flex items-center gap-0.5', wrapRoundedClasses, className), outline: outline, variant: variant, level: surfaceLevel, color: color, contentClassName: cn('flex items-center p-1', contentClassName), ref: ref, ...rest, children: [_jsx(Button, { "data-part": "decrease", size: size, color: color, variant: buttonVariantComputed, outline: buttonOutline, rounded: rounded, readOnly: readOnly, disabled: value <= min || disabled, onClick: decrease, className: cn(size === 'xl' && 'min-w-11', size === '2xl' && 'min-w-13'), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", children: _jsx("g", { fill: "currentColor", children: _jsx("path", { d: "M14.75,9.75H3.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.75c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z" }) }) }) }), input ? (_jsx(Input, { "data-part": "control", size: size, value: draft, disabled: disabled, readOnly: readOnly, rounded: valueRounded, className: "w-auto min-w-0 shrink", inputClassName: cn('w-auto min-w-9 text-center', isFill && 'text-cladd-fg', inputClassName), type: "number", onChange: (next) => {
|
|
41
|
+
if (next === '') {
|
|
42
|
+
setDraft(next);
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
const parsed = Number(next);
|
|
46
|
+
if (Number.isNaN(parsed)) {
|
|
47
|
+
setDraft(next);
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
const clamped = Math.min(max, Math.max(min, parsed));
|
|
51
|
+
setDraft(String(clamped));
|
|
52
|
+
if (clamped !== value)
|
|
53
|
+
onChange(clamped);
|
|
54
|
+
}, onBlur: () => {
|
|
55
|
+
const parsed = Number(draft);
|
|
56
|
+
if (draft === '' || Number.isNaN(parsed)) {
|
|
57
|
+
setDraft(String(value));
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
const clamped = Math.min(max, Math.max(min, parsed));
|
|
61
|
+
setDraft(String(clamped));
|
|
62
|
+
if (clamped !== value)
|
|
63
|
+
onChange(clamped);
|
|
64
|
+
} })) : (_jsx(SurfaceCut, { "data-part": "control", className: cn('w-auto min-w-9 self-stretch text-center', itemRoundedClasses), contentClassName: cn('flex items-center justify-center text-cladd-xs', inputPaddingNoIcon[size]), children: value })), _jsx(Button, { "data-part": "increase", size: size, color: color, variant: buttonVariantComputed, outline: buttonOutline, rounded: rounded, readOnly: readOnly, disabled: value >= max || disabled, onClick: increase, className: cn(size === 'xl' && 'min-w-11', size === '2xl' && 'min-w-13'), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", children: _jsxs("g", { fill: "currentColor", children: [_jsx("path", { d: "M14.75,9.75H3.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.75c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z" }), _jsx("path", { d: "M9,15.5c-.414,0-.75-.336-.75-.75V3.25c0-.414,.336-.75,.75-.75s.75,.336,.75,.75V14.75c0,.414-.336,.75-.75,.75Z" })] }) }) })] }));
|
|
30
65
|
};
|
|
31
66
|
//# sourceMappingURL=NumberField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../src/components/NumberField.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../src/components/NumberField.tsx"],"names":[],"mappings":"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"}
|