@cladd-ui/react 0.0.16 → 0.0.17
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 +18 -0
- package/cladd.css +11 -0
- package/cladd.css.d.ts +2 -0
- package/components/Backdrop.d.ts.map +1 -1
- package/components/Backdrop.js +1 -1
- package/components/Backdrop.js.map +1 -1
- package/components/Button.d.ts +2 -2
- package/components/Button.d.ts.map +1 -1
- package/components/Button.js +13 -12
- package/components/Button.js.map +1 -1
- package/components/Checkbox.d.ts.map +1 -1
- package/components/Checkbox.js +5 -2
- package/components/Checkbox.js.map +1 -1
- package/components/Chip.d.ts +1 -1
- package/components/Chip.d.ts.map +1 -1
- package/components/Chip.js +11 -16
- package/components/Chip.js.map +1 -1
- package/components/Dialog.d.ts.map +1 -1
- package/components/Dialog.js +8 -6
- package/components/Dialog.js.map +1 -1
- package/components/FocusableLayer.d.ts.map +1 -1
- package/components/FocusableLayer.js +8 -8
- package/components/FocusableLayer.js.map +1 -1
- package/components/Input.d.ts.map +1 -1
- package/components/Input.js +14 -19
- package/components/Input.js.map +1 -1
- package/components/Link.d.ts.map +1 -1
- package/components/Link.js +1 -1
- package/components/Link.js.map +1 -1
- package/components/List.js +1 -1
- package/components/List.js.map +1 -1
- package/components/ListButton.d.ts.map +1 -1
- package/components/ListButton.js +1 -1
- package/components/ListButton.js.map +1 -1
- package/components/ListItem.js +1 -1
- package/components/ListItem.js.map +1 -1
- package/components/ListSeparator.js +1 -1
- package/components/ListSeparator.js.map +1 -1
- package/components/ListTitle.js +1 -1
- package/components/ListTitle.js.map +1 -1
- package/components/NumberField.d.ts +1 -1
- package/components/NumberField.d.ts.map +1 -1
- package/components/NumberField.js +1 -1
- package/components/NumberField.js.map +1 -1
- package/components/OTPField.d.ts.map +1 -1
- package/components/OTPField.js +1 -1
- package/components/OTPField.js.map +1 -1
- package/components/OTPFieldInput.d.ts.map +1 -1
- package/components/OTPFieldInput.js +2 -8
- package/components/OTPFieldInput.js.map +1 -1
- package/components/OTPFieldSeparator.js +1 -1
- package/components/OTPFieldSeparator.js.map +1 -1
- package/components/Popover.d.ts +1 -1
- package/components/Popover.d.ts.map +1 -1
- package/components/Popover.js +10 -8
- package/components/Popover.js.map +1 -1
- package/components/Popup.d.ts.map +1 -1
- package/components/Popup.js +12 -18
- package/components/Popup.js.map +1 -1
- package/components/PopupContent.js +1 -1
- package/components/PopupContent.js.map +1 -1
- package/components/Radio.d.ts.map +1 -1
- package/components/Radio.js +3 -3
- package/components/Radio.js.map +1 -1
- package/components/SearchField.d.ts.map +1 -1
- package/components/SearchField.js +1 -1
- package/components/SearchField.js.map +1 -1
- package/components/SectionTitle.js +1 -1
- package/components/SectionTitle.js.map +1 -1
- package/components/Segmented.js +1 -1
- package/components/Segmented.js.map +1 -1
- package/components/SegmentedButton.d.ts.map +1 -1
- package/components/SegmentedButton.js +1 -1
- package/components/SegmentedButton.js.map +1 -1
- package/components/Select.d.ts +6 -0
- package/components/Select.d.ts.map +1 -1
- package/components/Select.js +5 -5
- package/components/Select.js.map +1 -1
- package/components/Shortcut.d.ts.map +1 -1
- package/components/Shortcut.js +11 -13
- package/components/Shortcut.js.map +1 -1
- package/components/Slider.d.ts.map +1 -1
- package/components/Slider.js +6 -6
- package/components/Slider.js.map +1 -1
- package/components/Spinner.d.ts.map +1 -1
- package/components/Spinner.js +4 -9
- package/components/Spinner.js.map +1 -1
- package/components/Surface.d.ts +3 -3
- package/components/Surface.d.ts.map +1 -1
- package/components/Surface.js +14 -11
- package/components/Surface.js.map +1 -1
- package/components/SurfaceCut.d.ts +1 -1
- package/components/SurfaceCut.d.ts.map +1 -1
- package/components/SurfaceCut.js +5 -5
- package/components/SurfaceCut.js.map +1 -1
- package/components/Switch.d.ts.map +1 -1
- package/components/Switch.js +4 -4
- package/components/Switch.js.map +1 -1
- package/components/TextArea.d.ts +2 -2
- package/components/TextArea.d.ts.map +1 -1
- package/components/TextArea.js +5 -11
- package/components/TextArea.js.map +1 -1
- package/components/ThemeContext.d.ts +4 -1
- package/components/ThemeContext.d.ts.map +1 -1
- package/components/ThemeContext.js +7 -2
- package/components/ThemeContext.js.map +1 -1
- package/components/Toast.d.ts.map +1 -1
- package/components/Toast.js +6 -4
- package/components/Toast.js.map +1 -1
- package/components/Toolbar.d.ts +1 -1
- package/components/Toolbar.d.ts.map +1 -1
- package/components/Toolbar.js +1 -1
- package/components/Toolbar.js.map +1 -1
- package/components/ToolbarSeparator.d.ts.map +1 -1
- package/components/ToolbarSeparator.js +1 -1
- package/components/ToolbarSeparator.js.map +1 -1
- package/components/TooltipPrimitive.d.ts +1 -1
- package/components/TooltipPrimitive.d.ts.map +1 -1
- package/components/TooltipPrimitive.js +6 -4
- package/components/TooltipPrimitive.js.map +1 -1
- package/components/UIProvider.d.ts +4 -0
- package/components/UIProvider.d.ts.map +1 -1
- package/components/UIProvider.js +2 -2
- package/components/UIProvider.js.map +1 -1
- package/hooks/use-focus-trap.d.ts.map +1 -1
- package/hooks/use-focus-trap.js +1 -1
- package/hooks/use-focus-trap.js.map +1 -1
- package/hooks/use-overlays-root.d.ts +2 -0
- package/hooks/use-overlays-root.d.ts.map +1 -0
- package/hooks/use-overlays-root.js +6 -0
- package/hooks/use-overlays-root.js.map +1 -0
- package/index.d.ts +1 -1
- package/index.d.ts.map +1 -1
- package/index.js +1 -1
- package/package.json +6 -6
- package/shared/cn.d.ts.map +1 -1
- package/shared/cn.js +22 -2
- package/shared/cn.js.map +1 -1
- package/shared/rounded-classes.d.ts +1 -5
- package/shared/rounded-classes.d.ts.map +1 -1
- package/shared/rounded-classes.js +42 -30
- package/shared/rounded-classes.js.map +1 -1
- package/shared/size-utls.d.ts +3 -0
- package/shared/size-utls.d.ts.map +1 -0
- package/shared/size-utls.js +110 -0
- package/shared/size-utls.js.map +1 -0
- package/styles/colors.css +329 -295
- package/styles/radius.css +58 -0
- package/styles/safe-areas.css +60 -60
- package/styles/slider.css +16 -14
- package/styles/spacing.css +20 -0
- package/styles/spinner.css +8 -8
- package/styles/popup.css +0 -14
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.0.17 (2026-05-03)
|
|
4
|
+
|
|
5
|
+
### Features
|
|
6
|
+
|
|
7
|
+
- lots of refacotring, css variables and renames (a193ff8)
|
|
8
|
+
- finalize parts and data- states (17450a9)
|
|
9
|
+
- begin parts (a7fcac9)
|
|
10
|
+
- remove unused popup.css (ced8499)
|
|
11
|
+
- namespace CSS vars and props (0b52fa3)
|
|
12
|
+
- class surface-level-n -> [data-level="n"] (a590e85)
|
|
13
|
+
- class color-* to data-color=* (0284752)
|
|
14
|
+
- zed oxfmt (42f4edd)
|
|
15
|
+
- rename classes to scoped (e011fb2)
|
|
16
|
+
|
|
17
|
+
### Build System
|
|
18
|
+
|
|
19
|
+
- fix build (9a795c9)
|
|
20
|
+
|
|
3
21
|
## 0.0.16 (2026-04-29)
|
|
4
22
|
|
|
5
23
|
### Features
|
package/cladd.css
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
@source "./";
|
|
2
|
+
@source "./components";
|
|
3
|
+
|
|
4
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
5
|
+
@custom-variant light (&:where(.light, .light *));
|
|
6
|
+
@import "./styles/colors.css";
|
|
7
|
+
@import "./styles/radius.css";
|
|
8
|
+
@import "./styles/spacing.css";
|
|
9
|
+
@import "./styles/safe-areas.css";
|
|
10
|
+
@import "./styles/spinner.css";
|
|
11
|
+
@import "./styles/slider.css";
|
package/cladd.css.d.ts
ADDED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../../src/components/Backdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,
|
|
1
|
+
{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../../src/components/Backdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,4CAgB5C,CAAC"}
|
package/components/Backdrop.js
CHANGED
|
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { cn } from '../shared/cn.js';
|
|
3
3
|
export const Backdrop = (props) => {
|
|
4
4
|
const { className = '', children, ref, ...rest } = props;
|
|
5
|
-
return (_jsx("div", { ref: ref, className: cn('backdrop fixed inset-0 z-50 bg-backdrop/90', className), ...rest, children: children }));
|
|
5
|
+
return (_jsx("div", { ref: ref, "data-part": "backdrop", className: cn('cladd-backdrop fixed inset-0 z-50 bg-cladd-backdrop/90', className), ...rest, children: children }));
|
|
6
6
|
};
|
|
7
7
|
//# sourceMappingURL=Backdrop.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAQlC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEzD,OAAO,CACL,cACE,GAAG,EAAE,GAAG,
|
|
1
|
+
{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAQlC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEzD,OAAO,CACL,cACE,GAAG,EAAE,GAAG,eACE,UAAU,EACpB,SAAS,EAAE,EAAE,CACX,wDAAwD,EACxD,SAAS,CACV,KACG,IAAI,YAEP,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC"}
|
package/components/Button.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ElementType, ReactNode, Ref, CSSProperties, ComponentPropsWithoutRef } from 'react';
|
|
2
2
|
import { Color } from '../types.js';
|
|
3
3
|
import { SurfaceVariant } from './Surface.js';
|
|
4
|
-
export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
4
|
+
export type ButtonSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
5
5
|
type ButtonSurface = 'surface' | 'cut';
|
|
6
6
|
interface ButtonOwnProps<C extends ElementType = 'button'> {
|
|
7
7
|
/** Button content (label, icons, etc.). */
|
|
@@ -23,7 +23,7 @@ interface ButtonOwnProps<C extends ElementType = 'button'> {
|
|
|
23
23
|
as?: C;
|
|
24
24
|
/** Underlying `Surface` variant - see `SurfaceVariant`. Defaults to `'gradient'`. */
|
|
25
25
|
variant?: SurfaceVariant;
|
|
26
|
-
/** Accent color token. Sets the button's `color
|
|
26
|
+
/** Accent color token. Sets the button's `data-color={name}` attribute - drives text and ring colors. */
|
|
27
27
|
color?: Color;
|
|
28
28
|
/** Render the surface outline ring. Defaults to `true`. */
|
|
29
29
|
outline?: boolean;
|
|
@@ -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;
|
|
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,sKAAsK;IACtK,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;OAIG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,qFAAqF;IACrF,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,yGAAyG;IACzG,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;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,uHAAuH;IACvH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uHAAuH;IACvH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wIAAwI;IACxI,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,4CAgItB,CAAC"}
|
package/components/Button.js
CHANGED
|
@@ -2,10 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { useRef, } from 'react';
|
|
3
3
|
import { cn } from '../shared/cn.js';
|
|
4
4
|
import { roundedClasses } from '../shared/rounded-classes.js';
|
|
5
|
+
import { rootSizeClasses } from '../shared/size-utls.js';
|
|
5
6
|
import { FocusableLayer } from './FocusableLayer.js';
|
|
6
7
|
import { Surface } from './Surface.js';
|
|
7
8
|
import { SurfaceCut } from './SurfaceCut.js';
|
|
8
9
|
export const buttonIconSizes = {
|
|
10
|
+
'2xs': '[&>svg]:size-3',
|
|
11
|
+
xs: '[&>svg]:size-3',
|
|
9
12
|
sm: '[&>svg]:size-4',
|
|
10
13
|
md: '[&>svg]:size-4',
|
|
11
14
|
lg: '[&>svg]:size-4',
|
|
@@ -16,15 +19,13 @@ export const Button = (props) => {
|
|
|
16
19
|
const elRef = useRef(null);
|
|
17
20
|
const { children, className = '', disabled = false, readOnly, rounded = false, size = 'md', as: Component = 'button', color = '', outline = true, contentClassName = '', variant = 'gradient', style, focused = false, pressed, multiline, surface: propSurface = 'surface', clickable = true, hoverable = true, focusable = true, surfaceLevel, ref, ...rest } = props;
|
|
18
21
|
let surface = propSurface || 'surface';
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
lg: multiline ? 'min-h-[32px]' : 'h-8',
|
|
23
|
-
xl: multiline ? 'min-h-[40px]' : 'h-10',
|
|
24
|
-
'2xl': multiline ? 'min-h-[48px]' : 'h-12',
|
|
25
|
-
};
|
|
22
|
+
const height = multiline
|
|
23
|
+
? rootSizeClasses(size, 'min-height')
|
|
24
|
+
: rootSizeClasses(size, 'height');
|
|
26
25
|
const { itemRoundedClasses, focusRoundedClasses } = roundedClasses(size, rounded, multiline);
|
|
27
26
|
const paddings = {
|
|
27
|
+
'2xs': 'px-2.5',
|
|
28
|
+
xs: 'px-2.5',
|
|
28
29
|
sm: 'px-2.5',
|
|
29
30
|
md: 'px-2.5',
|
|
30
31
|
lg: 'px-2.5',
|
|
@@ -32,6 +33,8 @@ export const Button = (props) => {
|
|
|
32
33
|
'2xl': 'px-3.5',
|
|
33
34
|
};
|
|
34
35
|
const fontSizes = {
|
|
36
|
+
'2xs': 'text-xs',
|
|
37
|
+
xs: 'text-xs',
|
|
35
38
|
sm: 'text-xs',
|
|
36
39
|
md: 'text-xs',
|
|
37
40
|
lg: 'text-xs',
|
|
@@ -41,9 +44,9 @@ export const Button = (props) => {
|
|
|
41
44
|
const isSurfaceCut = surface === 'cut';
|
|
42
45
|
const WrapComponent = isSurfaceCut ? SurfaceCut : Surface;
|
|
43
46
|
const isFill = variant === 'solid-fill' || variant === 'gradient-fill';
|
|
44
|
-
return (_jsx(WrapComponent, { as: Component, className: cn(`button group/button inline-block appearance-none text-left font-semibold outline-0 select-none focus:ring-0 focus:outline-0`, color &&
|
|
47
|
+
return (_jsx(WrapComponent, { as: Component, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-pressed": pressed || undefined, className: cn(`cladd-button group/cladd-button inline-block appearance-none text-left font-semibold outline-0 select-none focus:ring-0 focus:outline-0`, color &&
|
|
45
48
|
color !== 'neutral' &&
|
|
46
|
-
cn(isFill ? 'text-on-primary' : 'text-primary'), color && color === 'neutral' && isFill && 'text-on-primary', fontSizes[size],
|
|
49
|
+
cn(isFill ? 'text-cladd-on-primary' : 'text-cladd-primary'), color && color === 'neutral' && isFill && 'text-cladd-on-primary', fontSizes[size], height, disabled && 'pointer-events-none', !disabled && Component === 'a' ? 'cursor-pointer' : 'cursor-auto', itemRoundedClasses, className), contentClassName: cn('flex w-full items-center justify-center gap-2 py-1 [&>svg]:shrink-0', multiline && height, buttonIconSizes[size], disabled && 'opacity-40', paddings[size], contentClassName), pressed: pressed, tabIndex: disabled || readOnly ? -1 : undefined, variant: variant, outline: outline, clickable: clickable && !disabled && !readOnly, hoverable: hoverable && !disabled && !readOnly, disabled: disabled || readOnly, level: surfaceLevel,
|
|
47
50
|
// {...enabledDisabledProps}
|
|
48
51
|
ref: (el) => {
|
|
49
52
|
elRef.current = el;
|
|
@@ -53,8 +56,6 @@ export const Button = (props) => {
|
|
|
53
56
|
else if (ref) {
|
|
54
57
|
ref.current = el;
|
|
55
58
|
}
|
|
56
|
-
}, onContextMenuCapture: (e) => e.preventDefault(), color: color, style: style, beforeContent: focusable &&
|
|
57
|
-
!readOnly &&
|
|
58
|
-
!disabled && (_jsx(FocusableLayer, { group: "button", className: cn(focusRoundedClasses) })), ...rest, children: children }));
|
|
59
|
+
}, onContextMenuCapture: (e) => e.preventDefault(), color: color, style: style, beforeContent: (focused || (focusable && !readOnly && !disabled)) && (_jsx(FocusableLayer, { force: focused, group: "button", className: cn(focusRoundedClasses) })), ...rest, children: children }));
|
|
59
60
|
};
|
|
60
61
|
//# sourceMappingURL=Button.js.map
|
package/components/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,GAMP,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,WAAW,EACX,UAAU,EACV,YAAY,EACZ,wBAAwB,EACzB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvC,UAAU,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO;IACxD,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kJAAkJ;IAClJ,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iEAAiE;IACjE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,IACvD,gBAAgB,CAAC,CAAC,CAAC,GACjB,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEjE,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,EACtD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,WAAW,EACX,UAAU,EACV,YAAY,EACZ,wBAAwB,EACzB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvC,UAAU,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO;IACxD,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kJAAkJ;IAClJ,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iEAAiE;IACjE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,IACvD,gBAAgB,CAAC,CAAC,CAAC,GACjB,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEjE,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,EACtD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,2CAsJxB"}
|
package/components/Checkbox.js
CHANGED
|
@@ -40,9 +40,12 @@ export function Checkbox(props) {
|
|
|
40
40
|
onChange(!checked);
|
|
41
41
|
}
|
|
42
42
|
};
|
|
43
|
-
return (_jsxs(Component, { className: cn('checkbox group/checkbox relative flex shrink-0 items-center justify-center rounded-full p-1 select-none', size === 'sm' && 'size-
|
|
43
|
+
return (_jsxs(Component, { "data-checked": checked || undefined, "data-unchecked": !checked || undefined, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-required": required || undefined, className: cn('cladd-checkbox group/cladd-checkbox relative flex shrink-0 items-center justify-center rounded-full p-1 select-none', size === 'sm' && 'size-cladd-thumb-sm', size === 'md' && 'size-cladd-thumb-md', disabled && 'opacity-50', className), onContextMenuCapture: (e) => e.preventDefault(), onClick: handleClick, onPointerDown: onPointerDown, ref: elRef, ...ariaFallback, ...rest, children: [input && (_jsx("input", { "data-part": "input", id: inputId, disabled: disabled || readOnly, readOnly: readOnly, checked: checked, required: required, type: "checkbox", value: value, name: name, className: "pointer-events-none absolute inset-1 z-10 opacity-0", onChange: (e) => onChange(!checked, e) })), _jsx(Surface, { "data-part": "thumb", className: cn('absolute inset-0 size-full shrink-0 rounded-full duration-200'), outline: true, variant: 'gradient', hoverable: hoverableComputed && !disabled && !readOnly, clickable: hoverableComputed && !disabled && !readOnly }), _jsx(Surface, { "data-part": "thumb-checked", 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, variant: 'gradient-fill', hoverable: hoverableComputed && !disabled && !readOnly, clickable: hoverableComputed && !disabled && !readOnly }), _jsx(CheckIcon, { "data-part": "indicator", ...(checked && { 'data-color': color }), className: cn('pointer-events-none relative duration-200', size === 'sm' && 'size-3', size === 'md' && 'size-4', !checked && 'scale-75 text-cladd-fg-soft', checked &&
|
|
44
44
|
!disabled &&
|
|
45
45
|
!readOnly &&
|
|
46
|
-
'group-
|
|
46
|
+
'group-active/cladd-checkbox:scale-90', !checked &&
|
|
47
|
+
!disabled &&
|
|
48
|
+
!readOnly &&
|
|
49
|
+
'group-active/cladd-checkbox:scale-65', checked && cn('text-cladd-on-primary'), checkClassName) }), focusableComputed && !disabled && !readOnly && (_jsx(FocusableLayer, { className: "rounded-full", group: "checkbox" }))] }));
|
|
47
50
|
}
|
|
48
51
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,GAMP,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,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AA2DpC,MAAM,UAAU,QAAQ,CACtB,KAAuB;IAEvB,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,MAAM,EACJ,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EACnB,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,EAClB,aAAa,GAAG,GAAG,EAAE,GAAE,CAAC,EACxB,KAAK,GAAG,IAAI,EACZ,OAAO,EACP,SAAS,EACT,cAAc,EACd,KAAK,GAAG,WAAW,EACnB,EAAE,EAAE,MAAM,GAAG,OAAO,EACpB,SAAS,EACT,SAAS,EACT,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAE/C,IAAI,iBAAiB,GAAG,SAAS,CAAC;IAClC,IAAI,iBAAiB,GAAG,SAAS,CAAC;IAElC,IAAI,OAAO,iBAAiB,KAAK,WAAW;QAC1C,iBAAiB,GAAG,MAAM,KAAK,OAAO,CAAC;IACzC,IAAI,OAAO,iBAAiB,KAAK,WAAW;QAC1C,iBAAiB,GAAG,MAAM,KAAK,OAAO,IAAI,KAAK,CAAC;IAElD,MAAM,SAAS,GAAG,MAAqB,CAAC;IACxC,MAAM,YAAY,GAAG,CAAC,KAAK;QACzB,CAAC,CAAC;YACE,IAAI,EAAE,UAAU;YAChB,cAAc,EAAE,OAAO;YACvB,eAAe,EAAE,QAAQ,IAAI,SAAS;YACtC,eAAe,EAAE,QAAQ,IAAI,SAAS;YACtC,eAAe,EAAE,QAAQ,IAAI,SAAS;YACtC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC3B,SAAS,EAAE,CAAC,CAAmC,EAAE,EAAE;gBACjD,IAAI,QAAQ,IAAI,QAAQ;oBAAE,OAAO;gBACjC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;oBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;gBACrB,CAAC;YACH,CAAC;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAEP,MAAM,WAAW,GAAG,CAAC,CAAa,EAAE,EAAE;QACpC,OAAO,CAAC,CAAC,CAAC,CAAC;QACX,IAAI,CAAC,KAAK,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;YACrC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox.tsx"],"names":[],"mappings":"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"}
|
package/components/Chip.d.ts
CHANGED
|
@@ -32,7 +32,7 @@ interface ChipOwnProps<C extends ElementType = 'span'> {
|
|
|
32
32
|
* default for an `<a>` used purely as a navigation anchor).
|
|
33
33
|
*/
|
|
34
34
|
clickable?: boolean;
|
|
35
|
-
/** Accent color token. Sets the chip's `color
|
|
35
|
+
/** Accent color token. Sets the chip's `data-color={name}` attribute - drives text and ring colors. */
|
|
36
36
|
color?: Color;
|
|
37
37
|
/** Icon component rendered before `children`. Receives `iconProps`. */
|
|
38
38
|
icon?: ElementType<any>;
|
package/components/Chip.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,GAAG,EACH,WAAW,EAEX,wBAAwB,EACzB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,GAAG,EACH,WAAW,EAEX,wBAAwB,EACzB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEzD,UAAU,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,MAAM;IACnD,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oGAAoG;IACpG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uGAAuG;IACvG,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uEAAuE;IACvE,IAAI,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IACxB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,MAAM,IAAI,YAAY,CAAC,CAAC,CAAC,GACrE,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAE3D,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,WAAW,GAAG,MAAM,EAAE,OAAO,SAAS,CAAC,CAAC,CAAC,4CA6FvE,CAAC"}
|
package/components/Chip.js
CHANGED
|
@@ -1,17 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useRef, } from 'react';
|
|
3
3
|
import { cn } from '../shared/cn.js';
|
|
4
|
+
import { nestedSizeClasses } from '../shared/size-utls.js';
|
|
4
5
|
import { Surface } from './Surface.js';
|
|
5
6
|
export const Chip = (props) => {
|
|
6
7
|
const elRef = useRef(null);
|
|
7
8
|
const { children, disabled, className = '', contentClassName = '', rounded = false, size = 'md', as: Component = 'span', outline, hoverable, clickable, color = '', icon: IconComponent, iconProps = {}, ref, ...rest } = props;
|
|
8
|
-
const
|
|
9
|
-
sm: 'h-4',
|
|
10
|
-
md: 'h-5',
|
|
11
|
-
lg: 'h-7',
|
|
12
|
-
xl: 'h-8',
|
|
13
|
-
'2xl': 'h-10',
|
|
14
|
-
};
|
|
9
|
+
const height = nestedSizeClasses(size, 'height');
|
|
15
10
|
const paddings = {
|
|
16
11
|
sm: 'px-2 [&:has(>svg)]:pl-1',
|
|
17
12
|
md: 'px-2 [&:has(>svg)]:pl-1',
|
|
@@ -23,8 +18,8 @@ export const Chip = (props) => {
|
|
|
23
18
|
sm: 'text-[10px]',
|
|
24
19
|
md: 'text-[10px]',
|
|
25
20
|
lg: 'text-xs',
|
|
26
|
-
xl: 'text-
|
|
27
|
-
'2xl': 'text-
|
|
21
|
+
xl: 'text-xs',
|
|
22
|
+
'2xl': 'text-xs',
|
|
28
23
|
};
|
|
29
24
|
const iconSizes = {
|
|
30
25
|
sm: '[&>svg]:size-3',
|
|
@@ -34,19 +29,19 @@ export const Chip = (props) => {
|
|
|
34
29
|
'2xl': '[&>svg]:size-4',
|
|
35
30
|
};
|
|
36
31
|
const roundedClasses = {
|
|
37
|
-
sm: 'rounded-
|
|
38
|
-
md: 'rounded-
|
|
39
|
-
lg: 'rounded-
|
|
40
|
-
xl: 'rounded-lg',
|
|
41
|
-
'2xl': 'rounded-
|
|
32
|
+
sm: 'rounded-cladd-xs',
|
|
33
|
+
md: 'rounded-cladd-sm',
|
|
34
|
+
lg: 'rounded-cladd-md',
|
|
35
|
+
xl: 'rounded-cladd-lg',
|
|
36
|
+
'2xl': 'rounded-cladd-xl',
|
|
42
37
|
};
|
|
43
38
|
let clickableComputed = clickable === true ||
|
|
44
39
|
(typeof clickable === 'undefined' &&
|
|
45
40
|
(Component === 'a' || Component === 'button'));
|
|
46
41
|
const SurfaceComponent = Surface;
|
|
47
|
-
return (_jsxs(SurfaceComponent, { as: Component, hoverable: hoverable || clickableComputed, clickable: clickableComputed, outline: outline, variant: outline ? 'transparent' : 'gradient', contentClassName: cn('relative flex items-center justify-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap [&>svg]:shrink-0', iconSizes[size], paddings[size], contentClassName), className: cn(`chip group/chip relative inline-flex font-semibold text-primary select-none focus:ring-0 focus:outline-0 focus:outline-none`, rounded ? 'rounded-full' : roundedClasses[size], clickableComputed && 'duration-200', clickableComputed && Component === 'a'
|
|
42
|
+
return (_jsxs(SurfaceComponent, { as: Component, hoverable: hoverable || clickableComputed, clickable: clickableComputed, outline: outline, variant: outline ? 'transparent' : 'gradient', contentClassName: cn('relative flex items-center justify-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap [&>svg]:shrink-0', iconSizes[size], paddings[size], contentClassName), color: color, className: cn(`cladd-chip group/cladd-chip relative inline-flex font-semibold text-cladd-primary select-none focus:ring-0 focus:outline-0 focus:outline-none`, rounded ? 'rounded-full' : roundedClasses[size], clickableComputed && 'duration-200', clickableComputed && Component === 'a'
|
|
48
43
|
? 'cursor-pointer'
|
|
49
|
-
: 'cursor-auto',
|
|
44
|
+
: 'cursor-auto', height, fontSizes[size], className), ref: (el) => {
|
|
50
45
|
elRef.current = el;
|
|
51
46
|
if (ref)
|
|
52
47
|
ref.current = el;
|
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;
|
|
1
|
+
{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/Chip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,SAAS,EACT,GAAG,EAEJ,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,SAAS,EACT,GAAG,EAEJ,MAAM,OAAO,CAAC;AAWf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,OAAO,EAAW,cAAc,EAAE,MAAM,WAAW,CAAC;AASpD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,UAAU,GAAI,0DAKxB;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wGAAwG;IACxG,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,4CAeA,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAalE,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAahE,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,2GAA2G;IAC3G,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wGAAwG;IACxG,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,mFAAmF;IACnF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yFAAyF;IACzF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uGAAuG;IACvG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4GAA4G;IAC5G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4FAA4F;IAC5F,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oHAAoH;IACpH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAC1B,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,6FAA6F;IAC7F,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,sFAAsF;IACtF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0GAA0G;IAC1G,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qFAAqF;IACrF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0FAA0F;IAC1F,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yFAAyF;IACzF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAgOD,eAAO,MAAM,MAAM,GAAI,iCAAiC,WAAW,4CASlE,CAAC"}
|
package/components/Dialog.js
CHANGED
|
@@ -5,6 +5,7 @@ import { useAccentColor } from '../hooks/use-accent-color.js';
|
|
|
5
5
|
import { useDevice } from '../hooks/use-device.js';
|
|
6
6
|
import { useFocusTrap } from '../hooks/use-focus-trap.js';
|
|
7
7
|
import { useModalUtils } from '../hooks/use-modal-utils.js';
|
|
8
|
+
import { useOverlaysRoot } from '../hooks/use-overlays-root.js';
|
|
8
9
|
import { useTheme } from '../hooks/use-theme.js';
|
|
9
10
|
import { cn } from '../shared/cn.js';
|
|
10
11
|
import { nextTick } from '../shared/next-tick.js';
|
|
@@ -92,7 +93,8 @@ export const DialogClose = ({ children }) => {
|
|
|
92
93
|
const DialogInner = (props) => {
|
|
93
94
|
const theme = useTheme();
|
|
94
95
|
const accentColor = useAccentColor();
|
|
95
|
-
const
|
|
96
|
+
const overlaysRoot = useOverlaysRoot();
|
|
97
|
+
const { root = overlaysRoot, inertContainer = '.app-container', phase = 'closed', onPhaseChange = () => { }, onClosed = () => { }, className = '', contentClassName = '', title, text, lazy, buttons, requireConfirmText = '', stopPropagationOnClick, cancelButtonText, confirmButtonText, cancelButtonColor = 'neutral', confirmButtonColor = accentColor, surfaceLevel = 1, variant = 'gradient', outline = theme === 'dark', onCancel, onConfirm, ref, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, } = props;
|
|
96
98
|
const elRef = useRef(null);
|
|
97
99
|
const containerRef = useRef(null);
|
|
98
100
|
const reactId = useId();
|
|
@@ -127,7 +129,7 @@ const DialogInner = (props) => {
|
|
|
127
129
|
},
|
|
128
130
|
onClose() {
|
|
129
131
|
const container = document.querySelector(inertContainer);
|
|
130
|
-
const otherModals = document.querySelectorAll('.popover, .popup');
|
|
132
|
+
const otherModals = document.querySelectorAll('.cladd-popover, .cladd-popup');
|
|
131
133
|
if (container && otherModals.length === 0) {
|
|
132
134
|
container.inert = false;
|
|
133
135
|
}
|
|
@@ -148,20 +150,20 @@ const DialogInner = (props) => {
|
|
|
148
150
|
else if (ref && typeof ref === 'object')
|
|
149
151
|
ref.current = el;
|
|
150
152
|
};
|
|
151
|
-
const content = (_jsxs("div", { className: "dialog", ref: setRefs, role: "dialog", "aria-modal": "true", "aria-label": !ariaLabelledBy ? ariaLabel : undefined, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, children: [_jsx(Backdrop, { className: cn('duration-200', opened ? 'opacity-100' : 'opacity-0'), onClick: (e) => {
|
|
153
|
+
const content = (_jsxs("div", { className: "cladd-dialog", ref: setRefs, role: "dialog", "aria-modal": "true", "aria-label": !ariaLabelledBy ? ariaLabel : undefined, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, children: [_jsx(Backdrop, { className: cn('duration-200', opened ? 'opacity-100' : 'opacity-0'), onClick: (e) => {
|
|
152
154
|
if (stopPropagationOnClick) {
|
|
153
155
|
e.stopPropagation();
|
|
154
156
|
}
|
|
155
157
|
close();
|
|
156
|
-
} }), _jsxs(Surface, { className: cn(`fixed top-1/2 left-1/2 z-50 w-80 max-w-full -translate-x-1/2 -translate-y-1/2 rounded-
|
|
158
|
+
} }), _jsxs(Surface, { "data-part": "content", "data-open": opened || undefined, className: cn(`fixed top-1/2 left-1/2 z-50 w-80 max-w-full -translate-x-1/2 -translate-y-1/2 rounded-cladd-dialog`, !opened && 'scale-75 opacity-0 duration-200 ease-out!', opened &&
|
|
157
159
|
'scale-100 opacity-100 duration-500 ease-[cubic-bezier(0,1,0.2,1.1)]', className), ref: elRef, level: surfaceLevel, variant: variant, outline: outline, contentClassName: cn('space-y-4 p-4', contentClassName), onClick: (e) => {
|
|
158
160
|
if (stopPropagationOnClick) {
|
|
159
161
|
e.stopPropagation();
|
|
160
162
|
}
|
|
161
|
-
}, children: [title && (_jsx("div", { id: titleId, className: "text-base font-semibold", children: title })), text && (_jsx("div", { id: descId, className: "text-sm leading-relaxed", children: text })), children, requireConfirmText && confirmButtonText && (_jsx(Input, { value: inputText, infoMessage: `Type ${requireConfirmText} to confirm`, color: confirmButtonColor, placeholder: `Type ${requireConfirmText} to confirm`, size: "xl", onChange: (v) => setInputText(v) })), (buttons || cancelButtonText || confirmButtonText) && (_jsxs("div", { className: "mt-8! flex flex-wrap items-center justify-end gap-2", children: [cancelButtonText && (_jsx(Button, { tabIndex: 0, rounded: true, size: "lg", variant: "transparent", color: cancelButtonColor, contentClassName: "px-4", onClick: () => {
|
|
163
|
+
}, children: [title && (_jsx("div", { "data-part": "title", id: titleId, className: "text-base font-semibold", children: title })), text && (_jsx("div", { "data-part": "text", id: descId, className: "text-sm leading-relaxed", children: text })), children, requireConfirmText && confirmButtonText && (_jsx(Input, { "data-part": "input", value: inputText, infoMessage: `Type ${requireConfirmText} to confirm`, color: confirmButtonColor, placeholder: `Type ${requireConfirmText} to confirm`, size: "xl", onChange: (v) => setInputText(v) })), (buttons || cancelButtonText || confirmButtonText) && (_jsxs("div", { "data-part": "buttons", className: "mt-8! flex flex-wrap items-center justify-end gap-2", children: [cancelButtonText && (_jsx(Button, { "data-part": "cancel", tabIndex: 0, rounded: true, size: "lg", variant: "transparent", color: cancelButtonColor, contentClassName: "px-4", onClick: () => {
|
|
162
164
|
close();
|
|
163
165
|
onCancel?.();
|
|
164
|
-
}, children: cancelButtonText })), confirmButtonText && (_jsx(Button, { ref: confirmButtonRef, tabIndex: 0, color: !(requireConfirmText && inputText !== requireConfirmText)
|
|
166
|
+
}, children: cancelButtonText })), confirmButtonText && (_jsx(Button, { "data-part": "confirm", ref: confirmButtonRef, tabIndex: 0, color: !(requireConfirmText && inputText !== requireConfirmText)
|
|
165
167
|
? confirmButtonColor
|
|
166
168
|
: undefined, rounded: true, size: "lg", contentClassName: "px-4", disabled: !!(requireConfirmText && inputText !== requireConfirmText), onClick: () => {
|
|
167
169
|
close();
|
package/components/Dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,YAAY,EACZ,aAAa,EACb,UAAU,EACV,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,GAIT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,eAAe,EAAc,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,OAAO,EAAkB,MAAM,WAAW,CAAC;AAOpD,MAAM,iBAAiB,GAAG,aAAa,CAAgC,IAAI,CAAC,CAAC;AAE7E;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,WAAW,GAAG,KAAK,EACnB,IAAI,EAAE,QAAQ,EACd,YAAY,GASb,EAAE,EAAE;IACH,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAG,QAAQ,KAAK,SAAS,CAAC;IAC5C,MAAM,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC;IACpD,MAAM,OAAO,GAAG,CAAC,OAAgB,EAAE,EAAE;QACnC,IAAI,CAAC,YAAY;YAAE,eAAe,CAAC,OAAO,CAAC,CAAC;QAC5C,YAAY,EAAE,CAAC,OAAO,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,YACjD,QAAQ,GACkB,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE;IACrE,MAAM,GAAG,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC1C,IAAI,CAAC,GAAG;QAAE,OAAO,4BAAG,QAAQ,GAAI,CAAC;IAEjC,MAAM,KAAK,GAAG,QAAmC,CAAC;IAClD,MAAM,eAAe,GAAG,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC;IAE9C,MAAM,OAAO,GAAG,CAAC,CAAmB,EAAE,EAAE;QACtC,IAAI,eAAe;YAAE,eAAe,CAAC,CAAC,CAAC,CAAC;QACxC,GAAG,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,YAAY,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;AAC1C,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE;IACnE,MAAM,GAAG,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC1C,IAAI,CAAC,GAAG;QAAE,OAAO,4BAAG,QAAQ,GAAI,CAAC;IAEjC,MAAM,KAAK,GAAG,QAAmC,CAAC;IAClD,MAAM,eAAe,GAAG,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC;IAE9C,MAAM,OAAO,GAAG,CAAC,CAAmB,EAAE,EAAE;QACtC,IAAI,eAAe;YAAE,eAAe,CAAC,CAAC,CAAC,CAAC;QACxC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,YAAY,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;AAC1C,CAAC,CAAC;AAoEF,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IAC9C,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,EACJ,IAAI,GAAG,
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusableLayer.d.ts","sourceRoot":"","sources":["../../../src/components/FocusableLayer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,eAAO,MAAM,cAAc,GAAI,OAAO;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,
|
|
1
|
+
{"version":3,"file":"FocusableLayer.d.ts","sourceRoot":"","sources":["../../../src/components/FocusableLayer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,eAAO,MAAM,cAAc,GAAI,OAAO;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,4CAiCA,CAAC"}
|
|
@@ -5,14 +5,14 @@ export const FocusableLayer = (props) => {
|
|
|
5
5
|
const accentColor = useAccentColor();
|
|
6
6
|
const { className, group, color = accentColor, force } = props;
|
|
7
7
|
const groupClasses = {
|
|
8
|
-
button: 'group-focus-visible/button:scale-100 group-focus-visible/button:opacity-100',
|
|
9
|
-
input: 'group-has-[input:focus]/input:scale-100 group-has-[input:focus]/input:opacity-100',
|
|
10
|
-
textarea: 'group-has-[[contenteditable]:focus]/textarea:scale-100 group-has-[[contenteditable]:focus]/textarea:opacity-100',
|
|
11
|
-
checkbox: 'group-has-[input:focus-visible]/checkbox:scale-100 group-has-[input:focus-visible]/checkbox:opacity-100',
|
|
12
|
-
switch: 'group-has-[input:focus-visible]/switch:scale-100 group-has-[input:focus-visible]/switch:opacity-100',
|
|
13
|
-
radio: 'group-has-[input:focus-visible]/radio:scale-100 group-has-[input:focus-visible]/radio:opacity-100',
|
|
14
|
-
slider: 'group-has-[input:focus-visible]/slider:scale-100 group-has-[input:focus-visible]/slider:opacity-100',
|
|
8
|
+
button: 'group-focus-visible/cladd-button:scale-100 group-focus-visible/cladd-button:opacity-100',
|
|
9
|
+
input: 'group-has-[input:focus]/cladd-input:scale-100 group-has-[input:focus]/cladd-input:opacity-100',
|
|
10
|
+
textarea: 'group-has-[[contenteditable]:focus]/cladd-textarea:scale-100 group-has-[[contenteditable]:focus]/cladd-textarea:opacity-100',
|
|
11
|
+
checkbox: 'group-has-[input:focus-visible]/cladd-checkbox:scale-100 group-has-[input:focus-visible]/cladd-checkbox:opacity-100',
|
|
12
|
+
switch: 'group-has-[input:focus-visible]/cladd-switch:scale-100 group-has-[input:focus-visible]/cladd-switch:opacity-100',
|
|
13
|
+
radio: 'group-has-[input:focus-visible]/cladd-radio:scale-100 group-has-[input:focus-visible]/cladd-radio:opacity-100',
|
|
14
|
+
slider: 'group-has-[input:focus-visible]/cladd-slider:scale-100 group-has-[input:focus-visible]/cladd-slider:opacity-100',
|
|
15
15
|
}[group] || '';
|
|
16
|
-
return (_jsx("span", { className: cn('pointer-events-none absolute -inset-1.5 z-1 scale-95 border-2 border-primary opacity-0 duration-200',
|
|
16
|
+
return (_jsx("span", { "data-part": "focus-ring", "data-color": color, className: cn('pointer-events-none absolute -inset-1.5 z-1 scale-95 border-2 border-cladd-primary opacity-0 duration-200', force && 'scale-100 opacity-100', !force && groupClasses, className) }));
|
|
17
17
|
};
|
|
18
18
|
//# sourceMappingURL=FocusableLayer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusableLayer.js","sourceRoot":"","sources":["../../../src/components/FocusableLayer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAGlC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAsB9B,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,YAAY,GAChB;QACE,MAAM,EACJ,
|
|
1
|
+
{"version":3,"file":"FocusableLayer.js","sourceRoot":"","sources":["../../../src/components/FocusableLayer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAGlC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAsB9B,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,YAAY,GAChB;QACE,MAAM,EACJ,yFAAyF;QAC3F,KAAK,EACH,+FAA+F;QACjG,QAAQ,EACN,6HAA6H;QAC/H,QAAQ,EACN,qHAAqH;QACvH,MAAM,EACJ,iHAAiH;QACnH,KAAK,EACH,+GAA+G;QACjH,MAAM,EACJ,iHAAiH;KACpH,CAAC,KAAqC,CAAC,IAAI,EAAE,CAAC;IACjD,OAAO,CACL,4BACY,YAAY,gBACV,KAAK,EACjB,SAAS,EAAE,EAAE,CACX,2GAA2G,EAE3G,KAAK,IAAI,uBAAuB,EAChC,CAAC,KAAK,IAAI,YAAY,EACtB,SAAS,CACV,GACD,CACH,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EACX,SAAS,EACT,GAAG,EACH,WAAW,EACX,aAAa,EACb,UAAU,EAEV,wBAAwB,EACzB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input.tsx"],"names":[],"mappings":"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"}
|
package/components/Input.js
CHANGED
|
@@ -3,6 +3,7 @@ import { useRef, useState, } from 'react';
|
|
|
3
3
|
import { useAccentColor } from '../hooks/use-accent-color.js';
|
|
4
4
|
import { cn } from '../shared/cn.js';
|
|
5
5
|
import { roundedClasses } from '../shared/rounded-classes.js';
|
|
6
|
+
import { rootSizeClasses } from '../shared/size-utls.js';
|
|
6
7
|
import { Button } from './Button.js';
|
|
7
8
|
import { FocusableLayer } from './FocusableLayer.js';
|
|
8
9
|
import { CloseIcon } from './icons/CloseIcon.js';
|
|
@@ -39,19 +40,13 @@ export const Input = (props) => {
|
|
|
39
40
|
'2xl': 'pl-9.5 pr-4',
|
|
40
41
|
};
|
|
41
42
|
const { itemRoundedClasses, focusRoundedClasses } = roundedClasses(size, rounded, false);
|
|
42
|
-
const
|
|
43
|
-
sm: 'h-6',
|
|
44
|
-
md: 'h-7',
|
|
45
|
-
lg: 'h-8',
|
|
46
|
-
xl: 'h-10',
|
|
47
|
-
'2xl': 'h-12',
|
|
48
|
-
};
|
|
43
|
+
const height = rootSizeClasses(size, 'height');
|
|
49
44
|
const prevSize = {
|
|
50
|
-
sm: '
|
|
51
|
-
md: '
|
|
52
|
-
lg: '
|
|
53
|
-
xl: '
|
|
54
|
-
'2xl': '
|
|
45
|
+
sm: '2xs',
|
|
46
|
+
md: 'xs',
|
|
47
|
+
lg: 'sm',
|
|
48
|
+
xl: 'md',
|
|
49
|
+
'2xl': 'lg',
|
|
55
50
|
}[size];
|
|
56
51
|
const inputPadding = icon
|
|
57
52
|
? inputPaddingWithIcon[size]
|
|
@@ -71,7 +66,7 @@ export const Input = (props) => {
|
|
|
71
66
|
const InputComponent = inputComponent;
|
|
72
67
|
const showDisplayValue = displayValue && (readOnly || !focused);
|
|
73
68
|
const showRealValue = !showDisplayValue;
|
|
74
|
-
return (_jsxs(Component, { className: cn('input group/input relative', disabled && 'opacity-50', className), children: [!readOnly && !disabled && (_jsx(FocusableLayer, { className: cn(focusRoundedClasses
|
|
69
|
+
return (_jsxs(Component, { "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-invalid": valid === false || undefined, "data-required": required || undefined, className: cn('cladd-input group/cladd-input relative', disabled && 'opacity-50', className), children: [!readOnly && !disabled && (_jsx(FocusableLayer, { className: cn(focusRoundedClasses), force: valid === false, color: valid === false ? 'red' : color, group: "input" })), _jsxs(SurfaceCut, { "data-part": "wrapper", className: cn(itemRoundedClasses, surfaceClassName), hoverable: !disabled && !readOnly, contentClassName: cn('flex items-center', contentClassName), onContextMenuCapture: (e) => e.preventDefault(), ref: (el) => {
|
|
75
70
|
elRef.current = el;
|
|
76
71
|
if (externalRef) {
|
|
77
72
|
if (typeof externalRef === 'function')
|
|
@@ -79,7 +74,7 @@ export const Input = (props) => {
|
|
|
79
74
|
else
|
|
80
75
|
externalRef.current = el;
|
|
81
76
|
}
|
|
82
|
-
}, children: [prefix, icon && (_jsx("div", { className: cn('pointer-events-none absolute top-1/2 -translate-y-1/2', iconWrapClasses[size]), children: icon })), _jsx(InputComponent, { tabIndex: disabled || readOnly ? -1 : undefined, autoFocus: autoFocus, readOnly: readOnly, inputMode: inputMode, ref: (el) => {
|
|
77
|
+
}, children: [prefix, icon && (_jsx("div", { "data-part": "icon", className: cn('pointer-events-none absolute top-1/2 -translate-y-1/2', iconWrapClasses[size]), children: icon })), _jsx(InputComponent, { "data-part": "control", tabIndex: disabled || readOnly ? -1 : undefined, autoFocus: autoFocus, readOnly: readOnly, inputMode: inputMode, ref: (el) => {
|
|
83
78
|
inputElRef.current = el;
|
|
84
79
|
if (externalInputRef) {
|
|
85
80
|
if (typeof externalInputRef === 'function')
|
|
@@ -87,10 +82,10 @@ export const Input = (props) => {
|
|
|
87
82
|
else
|
|
88
83
|
externalInputRef.current = el;
|
|
89
84
|
}
|
|
90
|
-
}, id: inputId, type: type, disabled: disabled, value: value, name: name, required: required, placeholder: placeholder, className: cn(inputPadding,
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
85
|
+
}, id: inputId, type: type, disabled: disabled, value: value, name: name, required: required, placeholder: placeholder, className: cn(inputPadding, height, fontSizes[size], itemRoundedClasses, 'w-full appearance-none border-none bg-transparent font-medium shadow-none outline-none', disabled && 'text-cladd-fg-softer', 'placeholder-cladd-fg-softer', !showRealValue && 'text-transparent! placeholder-transparent!', inputClassName), onFocus: onFocusInternal, onBlur: onBlurInternal, onKeyDown: onKeyDown, onChange: (e) => onChange(e.target.value, e), maxLength: maxLength, max: max, min: min, pattern: pattern, step: step, ...inputComponentProps }), showDisplayValue && (_jsx("span", { "data-part": "display-value", className: cn(inputPadding, height, fontSizes[size], 'pointer-events-none absolute inset-0 flex items-center font-medium', disabled && 'text-cladd-fg-softer', inputClassName), children: displayValue })), clearButton && !disabled && !readOnly && (_jsx("div", { className: cn('relative mr-1 shrink-0', rootSizeClasses(size, 'height'), rootSizeClasses(size, 'width')), children: _jsx(Button, { "data-part": "clear", className: cn('absolute top-1 right-0 bottom-1 left-0 h-auto w-auto transform-gpu duration-200', !value && 'pointer-events-none scale-0'), contentClassName: "px-0", disabled: !value, rounded: rounded, size: prevSize, outline: false, onClick: onClear, children: _jsx(CloseIcon, { className: cn('text-cladd-fg-soft', size === 'sm'
|
|
86
|
+
? 'size-3!'
|
|
87
|
+
: size === 'md'
|
|
88
|
+
? 'size-3.5!'
|
|
89
|
+
: 'size-4') }) }) })), suffix] }), infoMessage && valid !== false && !readOnly && (_jsx("div", { "data-part": "info", "data-color": color, className: cn('pointer-events-none absolute -top-1.5 left-2 z-10 translate-y-1 rounded-cladd-sm bg-cladd-primary px-2 py-1.5 text-[10px] leading-none font-semibold text-cladd-on-primary opacity-0 duration-200 group-has-[input:focus]/input:-translate-y-1/2 group-has-[input:focus]/input:opacity-100'), children: infoMessage })), errorMessage && valid === false && (_jsx("div", { "data-part": "error", "data-color": "red", className: cn('pointer-events-none absolute -top-1.5 left-2 z-10 -translate-y-1/2 rounded-cladd-sm bg-cladd-primary px-1 py-0.5 text-[10px] leading-none font-semibold text-cladd-on-primary opacity-100 duration-200'), children: errorMessage }))] }));
|
|
95
90
|
};
|
|
96
91
|
//# sourceMappingURL=Input.js.map
|