@cladd-ui/react 0.3.0 → 0.4.0
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 +17 -0
- package/cladd.css +15 -4
- 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,22 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.4.0 (2026-05-14)
|
|
4
|
+
|
|
5
|
+
### Features
|
|
6
|
+
|
|
7
|
+
- add overlayClassName prop (c77e085)
|
|
8
|
+
- switch default overlay position to "above" (807fd2b)
|
|
9
|
+
- surface/cut overlay position (c57699b)
|
|
10
|
+
- tweak hover/press variants (24b0a4d)
|
|
11
|
+
|
|
12
|
+
### Bug Fixes
|
|
13
|
+
|
|
14
|
+
- nested surface state propagation (182a6e6)
|
|
15
|
+
|
|
16
|
+
### Refactoring
|
|
17
|
+
|
|
18
|
+
- simplify surface hover/press variants (2660da3)
|
|
19
|
+
|
|
3
20
|
## 0.3.0 (2026-05-14)
|
|
4
21
|
|
|
5
22
|
### 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";
|
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"}
|