@cladd-ui/react 0.3.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/cladd.css +15 -4
- package/components/SearchField.d.ts +8 -0
- package/components/SearchField.d.ts.map +1 -1
- package/components/SearchField.js +2 -2
- package/components/SearchField.js.map +1 -1
- package/components/Surface.d.ts +8 -0
- package/components/Surface.d.ts.map +1 -1
- package/components/Surface.js +12 -11
- package/components/Surface.js.map +1 -1
- package/components/SurfaceCut.d.ts +8 -0
- package/components/SurfaceCut.d.ts.map +1 -1
- package/components/SurfaceCut.js +8 -7
- package/components/SurfaceCut.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.4.1 (2026-05-14)
|
|
4
|
+
|
|
5
|
+
### Features
|
|
6
|
+
|
|
7
|
+
- forward rounded, clearButton and input class props in SearchField (81a4634)
|
|
8
|
+
|
|
9
|
+
## 0.4.0 (2026-05-14)
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
- add overlayClassName prop (c77e085)
|
|
14
|
+
- switch default overlay position to "above" (807fd2b)
|
|
15
|
+
- surface/cut overlay position (c57699b)
|
|
16
|
+
- tweak hover/press variants (24b0a4d)
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
- nested surface state propagation (182a6e6)
|
|
21
|
+
|
|
22
|
+
### Refactoring
|
|
23
|
+
|
|
24
|
+
- simplify surface hover/press variants (2660da3)
|
|
25
|
+
|
|
3
26
|
## 0.3.0 (2026-05-14)
|
|
4
27
|
|
|
5
28
|
### Refactoring
|
package/cladd.css
CHANGED
|
@@ -3,10 +3,21 @@
|
|
|
3
3
|
|
|
4
4
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
5
5
|
@custom-variant light (&:where(.light, .light *));
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
|
|
7
|
+
/* Applies to direct children of a hovered surface that is not "self-pressed".
|
|
8
|
+
Direct-child `>` keeps nested surfaces isolated from ancestor state.
|
|
9
|
+
Guarded by `(hover: hover)` so the state doesn't stick on touch devices. */
|
|
10
|
+
@custom-variant cladd-surface-hover {
|
|
11
|
+
@media (hover: hover) {
|
|
12
|
+
&:where(.cladd-hoverable:hover:not(.cladd-clickable:active:not(:has(.cladd-clickable:active))) > *) {
|
|
13
|
+
@slot;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* Applies to direct children of a "self-pressed" surface — :active and not
|
|
19
|
+
wrapping another active clickable, i.e. the deepest pressed surface. */
|
|
20
|
+
@custom-variant cladd-surface-press (&:where(.cladd-clickable:active:not(:has(.cladd-clickable:active)) > *));
|
|
10
21
|
@import "./styles/colors.css";
|
|
11
22
|
@import "./styles/radius.css";
|
|
12
23
|
@import "./styles/spacing.css";
|
|
@@ -14,6 +14,10 @@ interface SearchFieldOwnProps {
|
|
|
14
14
|
inset?: boolean;
|
|
15
15
|
/** Search field input size. Default `'md'`. */
|
|
16
16
|
size?: InputSize;
|
|
17
|
+
/** Apply pill (`rounded-full`) corners to the input. Default `true`. */
|
|
18
|
+
rounded?: boolean;
|
|
19
|
+
/** Show a clear button inside the input. Default `true`. */
|
|
20
|
+
clearButton?: boolean;
|
|
17
21
|
/** Default `'Search'`. */
|
|
18
22
|
placeholder?: string;
|
|
19
23
|
/** Make the input non-editable but still focusable for value display/copying. */
|
|
@@ -22,6 +26,10 @@ interface SearchFieldOwnProps {
|
|
|
22
26
|
disabled?: boolean;
|
|
23
27
|
/** Extra classes for the search field `Surface`. */
|
|
24
28
|
className?: string;
|
|
29
|
+
/** Extra classes forwarded to the inner `Input` root. */
|
|
30
|
+
inputClassName?: string;
|
|
31
|
+
/** Extra classes forwarded to the inner `Input` content wrapper. */
|
|
32
|
+
inputContentClassName?: string;
|
|
25
33
|
/** Fires on every keystroke. Also fires with `''` when the clear button is pressed. */
|
|
26
34
|
onChange?: (value: string, event?: ChangeEvent<HTMLInputElement>) => void;
|
|
27
35
|
/** Forwarded to the search field `Surface` root. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField.d.ts","sourceRoot":"","sources":["../../../src/components/SearchField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAS,SAAS,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAW,YAAY,EAAE,MAAM,WAAW,CAAC;AAElD,UAAU,mBAAmB;IAC3B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1E,oDAAoD;IACpD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,mBAAmB,GAChD,IAAI,CAAC,YAAY,EAAE,MAAM,mBAAmB,CAAC,CAAC;AAEhD,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,
|
|
1
|
+
{"version":3,"file":"SearchField.d.ts","sourceRoot":"","sources":["../../../src/components/SearchField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAS,SAAS,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAW,YAAY,EAAE,MAAM,WAAW,CAAC;AAElD,UAAU,mBAAmB;IAC3B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oEAAoE;IACpE,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1E,oDAAoD;IACpD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,mBAAmB,GAChD,IAAI,CAAC,YAAY,EAAE,MAAM,mBAAmB,CAAC,CAAC;AAEhD,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CA8DlD,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { SearchIcon } from './icons/SearchIcon.js';
|
|
|
4
4
|
import { Input } from './Input.js';
|
|
5
5
|
import { Surface } from './Surface.js';
|
|
6
6
|
export const SearchField = (props) => {
|
|
7
|
-
const { value = '', inset = false, size = 'md', placeholder = 'Search', className = '', readOnly = false, disabled = false, onChange = () => { }, ref, ...rest } = props;
|
|
8
|
-
return (_jsx(Surface, { "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, level: inset ? '+0' : '+1', className: cn('cladd-search-field sticky z-20', !inset && 'top-0 ml-px rounded-t-cladd-popover', inset && 'top-2 mx-2 w-auto rounded-full', className), outline: !inset, ref: ref, ...rest, children: _jsxs("div", { "data-part": "wrapper", className: cn('flex items-center', !inset && 'p-1.5'), children: [_jsx(Input, { className:
|
|
7
|
+
const { value = '', inset = false, size = 'md', rounded = true, clearButton = true, placeholder = 'Search', className = '', inputClassName = '', inputContentClassName = '', readOnly = false, disabled = false, onChange = () => { }, ref, ...rest } = props;
|
|
8
|
+
return (_jsx(Surface, { "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, level: inset ? '+0' : '+1', className: cn('cladd-search-field sticky z-20', !inset && 'top-0 ml-px rounded-t-cladd-popover', inset && 'top-2 mx-2 w-auto rounded-full', className), outline: !inset, ref: ref, ...rest, children: _jsxs("div", { "data-part": "wrapper", className: cn('flex items-center', !inset && 'p-1.5'), children: [_jsx(Input, { className: cn('w-full', inputClassName), placeholder: placeholder, onChange: (v, e) => onChange(v, e), contentClassName: cn('pl-6.5', inputContentClassName), value: value, clearButton: clearButton, rounded: rounded, size: size, readOnly: readOnly, disabled: disabled, onClear: () => onChange('') }), _jsx(SearchIcon, { "data-part": "icon", className: cn('pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 text-cladd-fg-softer', inset ? 'left-2' : 'left-4') })] }) }));
|
|
9
9
|
};
|
|
10
10
|
//# sourceMappingURL=SearchField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField.js","sourceRoot":"","sources":["../../../src/components/SearchField.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"SearchField.js","sourceRoot":"","sources":["../../../src/components/SearchField.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAC;AAwClD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACrD,MAAM,EACJ,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,KAAK,EACb,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,IAAI,EAClB,WAAW,GAAG,QAAQ,EACtB,SAAS,GAAG,EAAE,EACd,cAAc,GAAG,EAAE,EACnB,qBAAqB,GAAG,EAAE,EAC1B,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EACnB,GAAG,EACH,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,KAAC,OAAO,qBACS,QAAQ,IAAI,SAAS,mBACrB,QAAQ,IAAI,SAAS,EACpC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAC1B,SAAS,EAAE,EAAE,CACX,gCAAgC,EAChC,CAAC,KAAK,IAAI,qCAAqC,EAC/C,KAAK,IAAI,gCAAgC,EACzC,SAAS,CACV,EACD,OAAO,EAAE,CAAC,KAAK,EACf,GAAG,EAAE,GAAG,KACJ,IAAI,YAER,4BACY,SAAS,EACnB,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE,CAAC,KAAK,IAAI,OAAO,CAAC,aAErD,KAAC,KAAK,IACJ,SAAS,EAAE,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,EACvC,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,CAAC,CAAS,EAAE,CAAgC,EAAE,EAAE,CACxD,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,EAEhB,gBAAgB,EAAE,EAAE,CAAC,QAAQ,EAAE,qBAAqB,CAAC,EACrD,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,GAC3B,EACF,KAAC,UAAU,iBACC,MAAM,EAChB,SAAS,EAAE,EAAE,CACX,0FAA0F,EAC1F,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAC5B,GACD,IACE,GACE,CACX,CAAC;AACJ,CAAC,CAAC"}
|
package/components/Surface.d.ts
CHANGED
|
@@ -45,6 +45,14 @@ interface SurfaceOwnProps<C extends ElementType = 'div'> {
|
|
|
45
45
|
pressed?: boolean;
|
|
46
46
|
/** Enables hover background overlay. For `variant="transparent"`, also reveals the surface fill on hover. */
|
|
47
47
|
hoverable?: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* Where to stack the hover/press overlay:
|
|
50
|
+
* - `'below'` (default) - inside the background layer, behind content (overlay tints only the bg).
|
|
51
|
+
* - `'above'` - on top of content as a separate sibling layer (overlay tints content too).
|
|
52
|
+
*/
|
|
53
|
+
overlayPosition?: 'below' | 'above';
|
|
54
|
+
/** Extra classes for the hover/press overlay layer. */
|
|
55
|
+
overlayClassName?: string;
|
|
48
56
|
/** Accent color token. Sets the surface's `cladd-color-{name}` class - drives accent-aware borders, fills, and text colors. */
|
|
49
57
|
color?: Color;
|
|
50
58
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Surface.d.ts","sourceRoot":"","sources":["../../../src/components/Surface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,MAAM,MAAM,cAAc,GACtB,aAAa,GACb,OAAO,GACP,UAAU,GACV,YAAY,GACZ,eAAe,CAAC;AAEpB,UAAU,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK;IACrD;;;;;;;;;;;OAWG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8GAA8G;IAC9G,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mGAAmG;IACnG,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0GAA0G;IAC1G,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,mGAAmG;IACnG,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6GAA6G;IAC7G,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+HAA+H;IAC/H,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,eAAe,CAAC,CAAC,CAAC,GAC1E,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EACnD,OAAO,YAAY,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"Surface.d.ts","sourceRoot":"","sources":["../../../src/components/Surface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,MAAM,MAAM,cAAc,GACtB,aAAa,GACb,OAAO,GACP,UAAU,GACV,YAAY,GACZ,eAAe,CAAC;AAEpB,UAAU,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK;IACrD;;;;;;;;;;;OAWG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8GAA8G;IAC9G,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mGAAmG;IACnG,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0GAA0G;IAC1G,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,mGAAmG;IACnG,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6GAA6G;IAC7G,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACpC,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+HAA+H;IAC/H,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,eAAe,CAAC,CAAC,CAAC,GAC1E,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EACnD,OAAO,YAAY,CAAC,CAAC,CAAC,4CAiIvB,CAAC"}
|
package/components/Surface.js
CHANGED
|
@@ -5,7 +5,7 @@ import { SurfaceContent } from './SurfaceContent.js';
|
|
|
5
5
|
import { SurfaceContextProvider } from './SurfaceContext.js';
|
|
6
6
|
export const Surface = (props) => {
|
|
7
7
|
const MAX_LEVEL = 5;
|
|
8
|
-
const { level, children, className = '', contentClassName = '', bgClassName = '', outline = false, variant = 'solid', as: asProp = 'div', clickable = false, pressed, hoverable = false, color = '', wrapContent = true, beforeContent, ref, ...rest } = props;
|
|
8
|
+
const { level, children, className = '', contentClassName = '', bgClassName = '', outline = false, variant = 'solid', as: asProp = 'div', clickable = false, pressed, hoverable = false, overlayPosition = 'above', overlayClassName = '', color = '', wrapContent = true, beforeContent, ref, ...rest } = props;
|
|
9
9
|
const contextLevel = useSurface();
|
|
10
10
|
let levelProp = level;
|
|
11
11
|
if (typeof levelProp === 'string' &&
|
|
@@ -18,7 +18,15 @@ export const Surface = (props) => {
|
|
|
18
18
|
const currentLevel = Math.max(1, Math.min(typeof levelProp === 'undefined' ? contextLevel + 1 : Number(levelProp), MAX_LEVEL));
|
|
19
19
|
const Component = asProp;
|
|
20
20
|
const isFill = variant === 'solid-fill' || variant === 'gradient-fill';
|
|
21
|
-
|
|
21
|
+
const overlay = (hoverable || clickable) && (_jsx("div", { className: cn('pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 duration-200', hoverable &&
|
|
22
|
+
!pressed &&
|
|
23
|
+
cn('cladd-surface-hover:opacity-100', isFill
|
|
24
|
+
? 'cladd-surface-hover:bg-cladd-surface-hover-fill'
|
|
25
|
+
: 'cladd-surface-hover:bg-cladd-surface-hover'), clickable &&
|
|
26
|
+
(pressed
|
|
27
|
+
? 'bg-cladd-surface-pressed opacity-100'
|
|
28
|
+
: 'cladd-surface-press:bg-cladd-surface-pressed cladd-surface-press:opacity-100'), overlayClassName) }));
|
|
29
|
+
return (_jsxs(Component, { className: cn('cladd-surface relative', `cladd-surface-level-${currentLevel}`, color && `cladd-color-${color}`, isFill ? 'text-cladd-on-primary' : 'text-cladd-fg', hoverable && 'cladd-hoverable', clickable && 'cladd-clickable', className), ref: ref, ...rest, children: [_jsx("div", { className: cn('pointer-events-none absolute inset-0 rounded-[inherit]', variant === 'solid' && 'bg-cladd-surface', variant === 'solid-fill' && 'bg-cladd-primary', variant === 'gradient' &&
|
|
22
30
|
'bg-linear-to-br from-cladd-surface-highlight to-cladd-surface', variant === 'gradient-fill' &&
|
|
23
31
|
'bg-linear-to-br from-cladd-primary to-cladd-primary/85 light:from-cladd-primary/80 light:to-cladd-primary', outline &&
|
|
24
32
|
cn(isFill ? 'shadow-cladd-outline-fill' : 'shadow-cladd-outline'), variant === 'transparent' &&
|
|
@@ -26,14 +34,7 @@ export const Surface = (props) => {
|
|
|
26
34
|
'duration-200 cladd-surface-hover:bg-cladd-surface', variant === 'transparent' &&
|
|
27
35
|
hoverable &&
|
|
28
36
|
clickable &&
|
|
29
|
-
'cladd-surface-press:bg-cladd-surface', bgClassName), children:
|
|
30
|
-
|
|
31
|
-
cn('cladd-surface-hover:opacity-100', isFill
|
|
32
|
-
? 'cladd-surface-hover:bg-cladd-surface-hover-fill'
|
|
33
|
-
: 'cladd-surface-hover:bg-cladd-surface-hover'), clickable &&
|
|
34
|
-
(pressed
|
|
35
|
-
? 'bg-cladd-surface-pressed opacity-100'
|
|
36
|
-
: 'cladd-surface-press:bg-cladd-surface-pressed cladd-surface-press:opacity-100')) })) }), _jsxs(SurfaceContextProvider, { level: variant === 'transparent' ? currentLevel - 1 : currentLevel, children: [beforeContent, wrapContent ? (_jsx(SurfaceContent, { className: cn('duration-200', clickable &&
|
|
37
|
-
'cladd-surface-press:scale-95 cladd-surface-press:opacity-75', contentClassName), children: children })) : (children)] })] }));
|
|
37
|
+
'cladd-surface-press:bg-cladd-surface', bgClassName) }), overlayPosition === 'below' && overlay, _jsxs(SurfaceContextProvider, { level: variant === 'transparent' ? currentLevel - 1 : currentLevel, children: [beforeContent, wrapContent ? (_jsx(SurfaceContent, { className: cn('duration-200', clickable &&
|
|
38
|
+
'cladd-surface-press:scale-95 cladd-surface-press:opacity-75', contentClassName), children: children })) : (children), overlayPosition === 'above' && overlay] })] }));
|
|
38
39
|
};
|
|
39
40
|
//# sourceMappingURL=Surface.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Surface.js","sourceRoot":"","sources":["../../../src/components/Surface.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Surface.js","sourceRoot":"","sources":["../../../src/components/Surface.tsx"],"names":[],"mappings":"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"}
|
|
@@ -15,6 +15,14 @@ export interface SurfaceCutOwnProps<C extends ElementType = 'div'> {
|
|
|
15
15
|
beforeContent?: ReactNode;
|
|
16
16
|
/** Show hover overlay on the cut surface. Default `false`. */
|
|
17
17
|
hoverable?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Where to stack the hover/press overlay:
|
|
20
|
+
* - `'below'` (default) - inside the background layer, behind content (overlay tints only the bg).
|
|
21
|
+
* - `'above'` - on top of content as a separate sibling layer (overlay tints content too).
|
|
22
|
+
*/
|
|
23
|
+
overlayPosition?: 'below' | 'above';
|
|
24
|
+
/** Extra classes for the hover/press overlay layer. */
|
|
25
|
+
overlayClassName?: string;
|
|
18
26
|
/** Enable active/pressed visual states (scale + pressed background). Default `false`. */
|
|
19
27
|
clickable?: boolean;
|
|
20
28
|
/** Force the pressed visual state regardless of pointer activity. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SurfaceCut.d.ts","sourceRoot":"","sources":["../../../src/components/SurfaceCut.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK;IAC/D,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yFAAyF;IACzF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qDAAqD;IACrD,EAAE,CAAC,EAAE,CAAC,CAAC;IACP;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sGAAsG;IACtG,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IACvD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnE,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EACtD,OAAO,eAAe,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"SurfaceCut.d.ts","sourceRoot":"","sources":["../../../src/components/SurfaceCut.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK;IAC/D,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACpC,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yFAAyF;IACzF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qDAAqD;IACrD,EAAE,CAAC,EAAE,CAAC,CAAC;IACP;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sGAAsG;IACtG,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IACvD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnE,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EACtD,OAAO,eAAe,CAAC,CAAC,CAAC,4CA8E1B,CAAC"}
|
package/components/SurfaceCut.js
CHANGED
|
@@ -4,14 +4,15 @@ import { cn } from '../shared/cn.js';
|
|
|
4
4
|
import { SurfaceContextProvider } from './SurfaceContext.js';
|
|
5
5
|
import { SurfaceCutContent } from './SurfaceCutContent.js';
|
|
6
6
|
export const SurfaceCut = (props) => {
|
|
7
|
-
const { children, className = '', outline = true, color, beforeContent, hoverable = false, clickable = false, pressed = false, as: asProp = 'div', wrapContent = true, contentClassName = '', ref, ...rest } = props;
|
|
7
|
+
const { children, className = '', outline = true, color, beforeContent, hoverable = false, clickable = false, pressed = false, overlayPosition = 'above', overlayClassName = '', as: asProp = 'div', wrapContent = true, contentClassName = '', ref, ...rest } = props;
|
|
8
8
|
const Component = asProp;
|
|
9
9
|
const contextLevel = useSurface();
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
10
|
+
const overlay = (hoverable || clickable) && (_jsx("div", { className: cn('pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 duration-200', hoverable &&
|
|
11
|
+
'cladd-surface-hover:bg-cladd-surface-hover cladd-surface-hover:opacity-100', clickable &&
|
|
12
|
+
(pressed
|
|
13
|
+
? 'bg-cladd-surface-pressed opacity-100'
|
|
14
|
+
: 'cladd-surface-press:bg-cladd-surface-pressed cladd-surface-press:opacity-100'), overlayClassName) }));
|
|
15
|
+
return (_jsxs(Component, { className: cn('cladd-surface-cut relative', color && `cladd-color-${color}`, hoverable && 'cladd-hoverable', clickable && 'cladd-clickable', className), ...rest, ref: ref, children: [_jsx("div", { className: cn(`pointer-events-none absolute inset-0 rounded-[inherit] bg-cladd-surface-cut`, outline && 'shadow-cladd-cut-outline') }), overlayPosition === 'below' && overlay, _jsxs(SurfaceContextProvider, { level: contextLevel - 1, children: [beforeContent, wrapContent ? (_jsx(SurfaceCutContent, { className: cn(clickable &&
|
|
16
|
+
'duration-200 cladd-surface-press:scale-95 cladd-surface-press:opacity-75', contentClassName), children: children })) : (children), overlayPosition === 'above' && overlay] })] }));
|
|
16
17
|
};
|
|
17
18
|
//# sourceMappingURL=SurfaceCut.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SurfaceCut.js","sourceRoot":"","sources":["../../../src/components/SurfaceCut.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"SurfaceCut.js","sourceRoot":"","sources":["../../../src/components/SurfaceCut.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AA+CxD,MAAM,CAAC,MAAM,UAAU,GAAG,CACxB,KAAyB,EACzB,EAAE;IACF,MAAM,EACJ,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,IAAI,EACd,KAAK,EACL,aAAa,EACb,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,KAAK,EACf,eAAe,GAAG,OAAO,EACzB,gBAAgB,GAAG,EAAE,EACrB,EAAE,EAAE,MAAM,GAAG,KAAK,EAClB,WAAW,GAAG,IAAI,EAClB,gBAAgB,GAAG,EAAE,EACrB,GAAG,EACH,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,MAAqB,CAAC;IAExC,MAAM,YAAY,GAAG,UAAU,EAAE,CAAC;IAElC,MAAM,OAAO,GAAG,CAAC,SAAS,IAAI,SAAS,CAAC,IAAI,CAC1C,cACE,SAAS,EAAE,EAAE,CACX,+EAA+E,EAC/E,SAAS;YACP,4EAA4E,EAC9E,SAAS;YACP,CAAC,OAAO;gBACN,CAAC,CAAC,sCAAsC;gBACxC,CAAC,CAAC,8EAA8E,CAAC,EACrF,gBAAgB,CACjB,GACD,CACH,CAAC;IAEF,OAAO,CACL,MAAC,SAAS,IACR,SAAS,EAAE,EAAE,CACX,4BAA4B,EAC5B,KAAK,IAAI,eAAe,KAAK,EAAE,EAC/B,SAAS,IAAI,iBAAiB,EAC9B,SAAS,IAAI,iBAAiB,EAC9B,SAAS,CACV,KACG,IAAI,EACR,GAAG,EAAE,GAAG,aAGR,cACE,SAAS,EAAE,EAAE,CACX,6EAA6E,EAC7E,OAAO,IAAI,0BAA0B,CACtC,GACD,EACD,eAAe,KAAK,OAAO,IAAI,OAAO,EACvC,MAAC,sBAAsB,IAAC,KAAK,EAAE,YAAY,GAAG,CAAC,aAC5C,aAAa,EACb,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,iBAAiB,IAChB,SAAS,EAAE,EAAE,CACX,SAAS;4BACP,0EAA0E,EAC5E,gBAAgB,CACjB,YAEA,QAAQ,GACS,CACrB,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,EACA,eAAe,KAAK,OAAO,IAAI,OAAO,IAChB,IACf,CACb,CAAC;AACJ,CAAC,CAAC"}
|