@cladd-ui/react 0.2.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 CHANGED
@@ -1,5 +1,28 @@
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
+
20
+ ## 0.3.0 (2026-05-14)
21
+
22
+ ### Refactoring
23
+
24
+ - default Chip variant to 'gradient' (2e59aa3)
25
+
3
26
  ## 0.2.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
- @custom-variant cladd-surface-hover (&:is(:where(.group\/cladd-surface):hover:not(:active, :has(.cladd-hoverable:hover)) *));
7
- @custom-variant cladd-surface-press (&:is(:where(.group\/cladd-surface):active:not(:has(.cladd-clickable:active)) *));
8
- @custom-variant cladd-surface-cut-hover (&:is(:where(.group\/cladd-surface-cut-hoverable):hover:not(:active, :has(.cladd-hoverable:hover)) *));
9
- @custom-variant cladd-surface-cut-press (&:is(:where(.group\/cladd-surface-cut):active:not(:has(.cladd-clickable:active)) *));
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";
@@ -21,7 +21,7 @@ interface ChipOwnProps<C extends ElementType = 'span'> {
21
21
  as?: C;
22
22
  /** Render an outline ring around the chip. Forwarded to the underlying `Surface`. Default `true`. */
23
23
  outline?: boolean;
24
- /** Surface variant. Forwarded to the underlying `Surface`. Default `'transparent'`. */
24
+ /** Surface variant. Forwarded to the underlying `Surface`. Default `'gradient'`. */
25
25
  variant?: SurfaceVariant;
26
26
  /** Show hover affordance. Implicitly enabled when the chip is clickable. */
27
27
  hoverable?: boolean;
@@ -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;AAIf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAW,cAAc,EAAE,MAAM,WAAW,CAAC;AAEpD,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAExE,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,8EAA8E;IAC9E,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,qGAAqG;IACrG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uFAAuF;IACvF,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oGAAoG;IACpG,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,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,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,4CA2GvE,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;AACjC,OAAO,EAAW,cAAc,EAAE,MAAM,WAAW,CAAC;AAEpD,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAExE,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,8EAA8E;IAC9E,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,qGAAqG;IACrG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oFAAoF;IACpF,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oGAAoG;IACpG,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,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,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,4CA2GvE,CAAC"}
@@ -5,7 +5,7 @@ import { nestedSizeClasses } from '../shared/size-utls.js';
5
5
  import { Surface } from './Surface.js';
6
6
  export const Chip = (props) => {
7
7
  const elRef = useRef(null);
8
- const { children, disabled, className = '', contentClassName = '', rounded = false, size = 'md', as: Component = 'span', outline = true, variant = 'transparent', hoverable, clickable, color = '', icon: IconComponent, iconProps = {}, surfaceLevel, ref, ...rest } = props;
8
+ const { children, disabled, className = '', contentClassName = '', rounded = false, size = 'md', as: Component = 'span', outline = true, variant = 'gradient', hoverable, clickable, color = '', icon: IconComponent, iconProps = {}, surfaceLevel, ref, ...rest } = props;
9
9
  const height = nestedSizeClasses(size, 'height');
10
10
  const paddings = {
11
11
  '2xs': 'px-1 [&:has(>svg:first-child)]:pl-1 [&:has(>svg:last-child)]:pr-1',
@@ -1 +1 @@
1
- {"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/Chip.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/Chip.tsx"],"names":[],"mappings":"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"}
@@ -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,4CA8HvB,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"}
@@ -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
- return (_jsxs(Component, { className: cn('cladd-surface relative', `cladd-surface-level-${currentLevel}`, color && `cladd-color-${color}`, isFill ? 'text-cladd-on-primary' : 'text-cladd-fg', (clickable || hoverable) && 'group/cladd-surface', 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' &&
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: (hoverable || clickable) && (_jsx("div", { className: cn('absolute inset-0 rounded-[inherit] opacity-0 duration-200', hoverable &&
30
- !pressed &&
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":"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"}
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,4CA0E1B,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"}
@@ -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
- return (_jsxs(Component, { className: cn('cladd-surface-cut group/cladd-surface-cut relative', color && `cladd-color-${color}`, hoverable && 'cladd-hoverable group/cladd-surface-cut-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'), children: (hoverable || clickable) && (_jsx("div", { className: cn('absolute inset-0 rounded-[inherit] opacity-0 duration-200', hoverable &&
11
- 'cladd-surface-cut-hover:bg-cladd-surface-hover cladd-surface-cut-hover:opacity-100', clickable &&
12
- (pressed
13
- ? 'bg-cladd-surface-pressed opacity-100'
14
- : 'cladd-surface-cut-press:bg-cladd-surface-pressed cladd-surface-cut-press:opacity-100')) })) }), _jsxs(SurfaceContextProvider, { level: contextLevel - 1, children: [beforeContent, wrapContent ? (_jsx(SurfaceCutContent, { className: cn(clickable &&
15
- 'duration-200 cladd-surface-cut-press:scale-95 cladd-surface-cut-press:opacity-75', contentClassName), children: children })) : (children)] })] }));
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;AAuCxD,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,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,OAAO,CACL,MAAC,SAAS,IACR,SAAS,EAAE,EAAE,CACX,oDAAoD,EACpD,KAAK,IAAI,eAAe,KAAK,EAAE,EAC/B,SAAS,IAAI,mDAAmD,EAChE,SAAS,IAAI,iBAAiB,EAC9B,SAAS,CACV,KACG,IAAI,EACR,GAAG,EAAE,GAAG,aAGR,cACE,SAAS,EAAE,EAAE,CACX,6EAA6E,EAC7E,OAAO,IAAI,0BAA0B,CACtC,YAGA,CAAC,SAAS,IAAI,SAAS,CAAC,IAAI,CAC3B,cACE,SAAS,EAAE,EAAE,CACX,2DAA2D,EAC3D,SAAS;wBACP,oFAAoF,EACtF,SAAS;wBACP,CAAC,OAAO;4BACN,CAAC,CAAC,sCAAsC;4BACxC,CAAC,CAAC,sFAAsF,CAAC,CAC9F,GACD,CACH,GACG,EACN,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,kFAAkF,EACpF,gBAAgB,CACjB,YAEA,QAAQ,GACS,CACrB,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,IACsB,IACf,CACb,CAAC;AACJ,CAAC,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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cladd-ui/react",
3
- "version": "0.2.0",
3
+ "version": "0.4.0",
4
4
  "description": "",
5
5
  "homepage": "https://cladd.io",
6
6
  "bugs": {