@hanzo/ui 8.0.50 → 8.0.52

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.
Files changed (14) hide show
  1. package/dist/backends/gui/grid.cjs +14 -2
  2. package/dist/backends/gui/grid.d.ts +10 -1
  3. package/dist/backends/gui/grid.d.ts.map +1 -1
  4. package/dist/backends/gui/grid.js +14 -2
  5. package/dist/backends/gui/grid.js.map +1 -1
  6. package/dist/gallery.cjs +1 -1
  7. package/dist/gallery.d.ts.map +1 -1
  8. package/dist/gallery.js +1 -1
  9. package/dist/gallery.js.map +1 -1
  10. package/dist/glass.css +49 -4
  11. package/dist/styles/motion.css +13 -7
  12. package/dist/styles.css +62 -11
  13. package/dist/theme.css +49 -4
  14. package/package.json +10 -10
package/dist/backends/gui/grid.cjs CHANGED
@@ -50,11 +50,23 @@ const space = (v, fallback) => {
50
50
  const t = (0, gui_1.getTokenValue)(v, 'space');
51
51
  return typeof t === 'number' ? t : fallback;
52
52
  };
53
- const Grid = ({ min = 240, cols, gap = '$3', style, ...props }) => {
53
+ const Grid = ({ min = 240, cols, max, gap = '$3', style, ...props }) => {
54
54
  const g = space(gap, 12);
55
+ // The track floor, capped. Without `max` it is `min(Npx, 100%)` — N wide, but
56
+ // never wider than the container, which is what keeps a 900px min from
57
+ // overflowing a 390px phone.
58
+ //
59
+ // With `max` the floor also has to be at least "one Mth of the row", so
60
+ // auto-fill can never fit an (M+1)th track: subtract the M-1 gaps first, then
61
+ // divide. Below that width the max() picks Npx again and the grid wraps
62
+ // normally — so the cap costs nothing on small screens, which is the whole
63
+ // point of expressing it as a floor rather than a breakpoint.
64
+ const floor = max
65
+ ? `max(min(${min}px, 100%), calc((100% - ${(max - 1) * g}px) / ${max}))`
66
+ : `min(${min}px, 100%)`;
55
67
  const columns = cols
56
68
  ? `repeat(${cols}, minmax(0, 1fr))`
57
- : `repeat(auto-fill, minmax(min(${min}px, 100%), 1fr))`;
69
+ : `repeat(auto-fill, minmax(${floor}, 1fr))`;
58
70
  const grid = { display: 'grid', gridTemplateColumns: columns, gap: g };
59
71
  return (0, jsx_runtime_1.jsx)("div", { "data-slot": "grid", style: { ...grid, ...style }, ...props });
60
72
  };
package/dist/backends/gui/grid.d.ts CHANGED
@@ -7,10 +7,19 @@ export interface GridProps extends Omit<ComponentProps<'div'>, 'children'> {
7
7
  min?: number;
8
8
  /** Fixed column count. Overrides `min` — use it when the count is the design. */
9
9
  cols?: number;
10
+ /**
11
+ * Never exceed this many columns, while still wrapping down on narrow
12
+ * screens. `<Grid min={160} max={4}>` is 2-up on a phone and 4-up on a
13
+ * desktop, with nothing in between to configure.
14
+ *
15
+ * A single `min` cannot express that: 2-up at 390px needs min ~170, and that
16
+ * same 170 gives SIX columns at 1280. Capping is the missing half.
17
+ */
18
+ max?: number;
10
19
  /** A `$n` space token or a raw px number. */
11
20
  gap?: number | string;
12
21
  children?: ReactNode;
13
22
  }
14
- declare const Grid: ({ min, cols, gap, style, ...props }: GridProps) => import("react/jsx-runtime").JSX.Element;
23
+ declare const Grid: ({ min, cols, max, gap, style, ...props }: GridProps) => import("react/jsx-runtime").JSX.Element;
15
24
  export { Grid };
16
25
  //# sourceMappingURL=grid.d.ts.map
package/dist/backends/gui/grid.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/grid.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAE,cAAc,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAErE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACxE;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAUD,QAAA,MAAM,IAAI,GAAI,qCAAkD,SAAS,4CAOxE,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}
1
+ {"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/grid.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAE,cAAc,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAErE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACxE;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAUD,QAAA,MAAM,IAAI,GAAI,0CAAuD,SAAS,4CAmB7E,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}
package/dist/backends/gui/grid.js CHANGED
@@ -47,11 +47,23 @@ const space = (v, fallback) => {
47
47
  const t = getTokenValue(v, 'space');
48
48
  return typeof t === 'number' ? t : fallback;
49
49
  };
50
- const Grid = ({ min = 240, cols, gap = '$3', style, ...props }) => {
50
+ const Grid = ({ min = 240, cols, max, gap = '$3', style, ...props }) => {
51
51
  const g = space(gap, 12);
52
+ // The track floor, capped. Without `max` it is `min(Npx, 100%)` — N wide, but
53
+ // never wider than the container, which is what keeps a 900px min from
54
+ // overflowing a 390px phone.
55
+ //
56
+ // With `max` the floor also has to be at least "one Mth of the row", so
57
+ // auto-fill can never fit an (M+1)th track: subtract the M-1 gaps first, then
58
+ // divide. Below that width the max() picks Npx again and the grid wraps
59
+ // normally — so the cap costs nothing on small screens, which is the whole
60
+ // point of expressing it as a floor rather than a breakpoint.
61
+ const floor = max
62
+ ? `max(min(${min}px, 100%), calc((100% - ${(max - 1) * g}px) / ${max}))`
63
+ : `min(${min}px, 100%)`;
52
64
  const columns = cols
53
65
  ? `repeat(${cols}, minmax(0, 1fr))`
54
- : `repeat(auto-fill, minmax(min(${min}px, 100%), 1fr))`;
66
+ : `repeat(auto-fill, minmax(${floor}, 1fr))`;
55
67
  const grid = { display: 'grid', gridTemplateColumns: columns, gap: g };
56
68
  return _jsx("div", { "data-slot": "grid", style: { ...grid, ...style }, ...props });
57
69
  };
package/dist/backends/gui/grid.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/backends/gui/grid.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAgB1C,uDAAuD;AACvD,MAAM,KAAK,GAAG,CAAC,CAA8B,EAAE,QAAgB,EAAU,EAAE;IACzE,IAAI,CAAC,IAAI,IAAI;QAAE,OAAO,QAAQ,CAAA;IAC9B,IAAI,OAAO,CAAC,KAAK,QAAQ;QAAE,OAAO,CAAC,CAAA;IACnC,MAAM,CAAC,GAAG,aAAa,CAAC,CAAU,EAAE,OAAO,CAAC,CAAA;IAC5C,OAAO,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;AAC7C,CAAC,CAAA;AAED,MAAM,IAAI,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,EAAE,GAAG,GAAG,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE;IAC3E,MAAM,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;IACxB,MAAM,OAAO,GAAG,IAAI;QAClB,CAAC,CAAC,UAAU,IAAI,mBAAmB;QACnC,CAAC,CAAC,gCAAgC,GAAG,kBAAkB,CAAA;IACzD,MAAM,IAAI,GAAkB,EAAE,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,CAAA;IACrF,OAAO,2BAAe,MAAM,EAAC,KAAK,EAAE,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,GAAI,CAAA;AAC1E,CAAC,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}
1
+ {"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/backends/gui/grid.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAyB1C,uDAAuD;AACvD,MAAM,KAAK,GAAG,CAAC,CAA8B,EAAE,QAAgB,EAAU,EAAE;IACzE,IAAI,CAAC,IAAI,IAAI;QAAE,OAAO,QAAQ,CAAA;IAC9B,IAAI,OAAO,CAAC,KAAK,QAAQ;QAAE,OAAO,CAAC,CAAA;IACnC,MAAM,CAAC,GAAG,aAAa,CAAC,CAAU,EAAE,OAAO,CAAC,CAAA;IAC5C,OAAO,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;AAC7C,CAAC,CAAA;AAED,MAAM,IAAI,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE;IAChF,MAAM,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;IACxB,8EAA8E;IAC9E,uEAAuE;IACvE,6BAA6B;IAC7B,EAAE;IACF,wEAAwE;IACxE,8EAA8E;IAC9E,wEAAwE;IACxE,2EAA2E;IAC3E,8DAA8D;IAC9D,MAAM,KAAK,GAAG,GAAG;QACf,CAAC,CAAC,WAAW,GAAG,2BAA2B,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,SAAS,GAAG,IAAI;QACxE,CAAC,CAAC,OAAO,GAAG,WAAW,CAAA;IACzB,MAAM,OAAO,GAAG,IAAI;QAClB,CAAC,CAAC,UAAU,IAAI,mBAAmB;QACnC,CAAC,CAAC,4BAA4B,KAAK,SAAS,CAAA;IAC9C,MAAM,IAAI,GAAkB,EAAE,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,CAAA;IACrF,OAAO,2BAAe,MAAM,EAAC,KAAK,EAAE,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,KAAM,KAAK,GAAI,CAAA;AAC1E,CAAC,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}
package/dist/gallery.cjs CHANGED
@@ -31,6 +31,6 @@ const Gallery = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex'
31
31
  const el = document.querySelector('[data-palette-selected]');
32
32
  if (el)
33
33
  el.setAttribute('data-palette-selected', v);
34
- }, children: [(0, jsx_runtime_1.jsx)(gui_1.CommandInput, {}), (0, jsx_runtime_1.jsxs)(gui_1.CommandList, { children: [(0, jsx_runtime_1.jsx)(gui_1.CommandEmpty, { children: "No results" }), (0, jsx_runtime_1.jsxs)(gui_1.CommandGroup, { heading: "Palette", children: [(0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "alpha", children: "alpha" }), (0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "beta", children: "beta" }), (0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "gamma", children: "gamma" })] })] })] }), (0, jsx_runtime_1.jsx)("span", { "data-palette-selected": "" })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "overlay", children: [(0, jsx_runtime_1.jsx)(gui_1.Dialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_1.DialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_1.DialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_1.DialogTitle, { children: "Dialog title" }), (0, jsx_runtime_1.jsx)(gui_1.DialogDescription, { children: "Dialog description" })] }), (0, jsx_runtime_1.jsx)(gui_1.DialogFooter, { children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "sm", children: "OK" }) })] }) }), (0, jsx_runtime_1.jsxs)(gui_1.DropdownMenu, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.DropdownMenuTrigger, { children: "Menu" }), (0, jsx_runtime_1.jsxs)(gui_1.DropdownMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_1.DropdownMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_1.DropdownMenuItem, { children: "Item" })] })] }), (0, jsx_runtime_1.jsxs)(gui_1.Popover, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.PopoverTrigger, { children: "Popover" }), (0, jsx_runtime_1.jsx)(gui_1.PopoverContent, { children: "Popover content" })] }), (0, jsx_runtime_1.jsxs)(gui_1.Select, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.SelectTrigger, { children: (0, jsx_runtime_1.jsx)(gui_1.SelectValue, { placeholder: "Select" }) }), (0, jsx_runtime_1.jsx)(gui_1.SelectContent, { children: (0, jsx_runtime_1.jsx)(gui_1.SelectItem, { value: "x", index: 0, children: "Option" }) })] }), (0, jsx_runtime_1.jsx)(gui_1.TooltipProvider, { delay: 0, children: (0, jsx_runtime_1.jsxs)(gui_1.Tooltip, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.TooltipTrigger, { children: "Tooltip" }), (0, jsx_runtime_1.jsx)(gui_1.TooltipContent, { children: "Tooltip content" })] }) }), (0, jsx_runtime_1.jsx)(gui_1.Toaster, {})] }), (0, jsx_runtime_1.jsxs)(Section, { name: "layout", children: [(0, jsx_runtime_1.jsx)(gui_1.Grid, { min: 240, gap: "$3", style: { width: '100%' }, "data-grid": "auto", children: [0, 1, 2, 3, 4, 5, 6].map((i) => ((0, jsx_runtime_1.jsxs)(gui_1.Card, { children: [(0, jsx_runtime_1.jsx)(gui_1.CardMedia, { ratio: 16 / 10, children: (0, jsx_runtime_1.jsx)("img", { src: SWATCH, alt: "" }) }), (0, jsx_runtime_1.jsxs)(gui_1.CardHeader, { children: [(0, jsx_runtime_1.jsxs)(gui_1.CardTitle, { children: ["Card ", i] }), (0, jsx_runtime_1.jsx)(gui_1.CardDescription, { children: "Sized by its content, never by a pinned height." })] })] }, i))) }), (0, jsx_runtime_1.jsxs)(gui_1.Grid, { min: 900, gap: "$3", style: { width: '100%' }, "data-grid": "wide", children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "wide" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "wide" }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsxs)(gui_1.Grid, { cols: 3, gap: "$3", style: { width: '100%' }, "data-grid": "fixed", children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "short" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: (0, jsx_runtime_1.jsx)("span", { style: { whiteSpace: 'nowrap' }, children: "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM" }) }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "short" }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { "data-grid": "growth", style: { display: 'flex', alignItems: 'flex-start', gap: 12, width: '100%' }, children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { "data-card": "lean", children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "one line" }) }), (0, jsx_runtime_1.jsxs)(gui_1.Card, { "data-card": "fat", children: [(0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "one line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "two line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "three line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "four line" })] })] }), (0, jsx_runtime_1.jsx)(gui_1.Card, { interactive: true, "data-card": "interactive", children: (0, jsx_runtime_1.jsx)(gui_1.CardHeader, { children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "Interactive card" }) }) }), (0, jsx_runtime_1.jsx)(gui_1.Section, { maxWidth: 600, "data-section": "demo", children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "Section" }) }), (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { fontFamily: "$mono", "data-type": "mono", children: "1234567890" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { "data-button": "block-child", children: (0, jsx_runtime_1.jsx)("span", { "data-block-child": true, style: { display: 'block', height: 119, width: 119 } }) })] })] }));
34
+ }, children: [(0, jsx_runtime_1.jsx)(gui_1.CommandInput, {}), (0, jsx_runtime_1.jsxs)(gui_1.CommandList, { children: [(0, jsx_runtime_1.jsx)(gui_1.CommandEmpty, { children: "No results" }), (0, jsx_runtime_1.jsxs)(gui_1.CommandGroup, { heading: "Palette", children: [(0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "alpha", children: "alpha" }), (0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "beta", children: "beta" }), (0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "gamma", children: "gamma" })] })] })] }), (0, jsx_runtime_1.jsx)("span", { "data-palette-selected": "" })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "overlay", children: [(0, jsx_runtime_1.jsx)(gui_1.Dialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_1.DialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_1.DialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_1.DialogTitle, { children: "Dialog title" }), (0, jsx_runtime_1.jsx)(gui_1.DialogDescription, { children: "Dialog description" })] }), (0, jsx_runtime_1.jsx)(gui_1.DialogFooter, { children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "sm", children: "OK" }) })] }) }), (0, jsx_runtime_1.jsxs)(gui_1.DropdownMenu, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.DropdownMenuTrigger, { children: "Menu" }), (0, jsx_runtime_1.jsxs)(gui_1.DropdownMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_1.DropdownMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_1.DropdownMenuItem, { children: "Item" })] })] }), (0, jsx_runtime_1.jsxs)(gui_1.Popover, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.PopoverTrigger, { children: "Popover" }), (0, jsx_runtime_1.jsx)(gui_1.PopoverContent, { children: "Popover content" })] }), (0, jsx_runtime_1.jsxs)(gui_1.Select, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.SelectTrigger, { children: (0, jsx_runtime_1.jsx)(gui_1.SelectValue, { placeholder: "Select" }) }), (0, jsx_runtime_1.jsx)(gui_1.SelectContent, { children: (0, jsx_runtime_1.jsx)(gui_1.SelectItem, { value: "x", index: 0, children: "Option" }) })] }), (0, jsx_runtime_1.jsx)(gui_1.TooltipProvider, { delay: 0, children: (0, jsx_runtime_1.jsxs)(gui_1.Tooltip, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.TooltipTrigger, { children: "Tooltip" }), (0, jsx_runtime_1.jsx)(gui_1.TooltipContent, { children: "Tooltip content" })] }) }), (0, jsx_runtime_1.jsx)(gui_1.Toaster, {})] }), (0, jsx_runtime_1.jsxs)(Section, { name: "layout", children: [(0, jsx_runtime_1.jsx)(gui_1.Grid, { min: 240, gap: "$3", style: { width: '100%' }, "data-grid": "auto", children: [0, 1, 2, 3, 4, 5, 6].map((i) => ((0, jsx_runtime_1.jsxs)(gui_1.Card, { children: [(0, jsx_runtime_1.jsx)(gui_1.CardMedia, { ratio: 16 / 10, children: (0, jsx_runtime_1.jsx)("img", { src: SWATCH, alt: "" }) }), (0, jsx_runtime_1.jsxs)(gui_1.CardHeader, { children: [(0, jsx_runtime_1.jsxs)(gui_1.CardTitle, { children: ["Card ", i] }), (0, jsx_runtime_1.jsx)(gui_1.CardDescription, { children: "Sized by its content, never by a pinned height." })] })] }, i))) }), (0, jsx_runtime_1.jsx)(gui_1.Grid, { min: 160, max: 4, gap: "$3", style: { width: '100%' }, "data-grid": "capped", children: [0, 1, 2, 3, 4, 5].map((i) => ((0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsxs)(gui_1.CardContent, { children: ["cap ", i] }) }, i))) }), (0, jsx_runtime_1.jsxs)(gui_1.Grid, { min: 900, gap: "$3", style: { width: '100%' }, "data-grid": "wide", children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "wide" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "wide" }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsxs)(gui_1.Grid, { cols: 3, gap: "$3", style: { width: '100%' }, "data-grid": "fixed", children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "short" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: (0, jsx_runtime_1.jsx)("span", { style: { whiteSpace: 'nowrap' }, children: "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM" }) }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "short" }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { "data-grid": "growth", style: { display: 'flex', alignItems: 'flex-start', gap: 12, width: '100%' }, children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { "data-card": "lean", children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "one line" }) }), (0, jsx_runtime_1.jsxs)(gui_1.Card, { "data-card": "fat", children: [(0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "one line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "two line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "three line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "four line" })] })] }), (0, jsx_runtime_1.jsx)(gui_1.Card, { interactive: true, "data-card": "interactive", children: (0, jsx_runtime_1.jsx)(gui_1.CardHeader, { children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "Interactive card" }) }) }), (0, jsx_runtime_1.jsx)(gui_1.Section, { maxWidth: 600, "data-section": "demo", children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "Section" }) }), (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { fontFamily: "$mono", "data-type": "mono", children: "1234567890" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { "data-button": "block-child", children: (0, jsx_runtime_1.jsx)("span", { "data-block-child": true, style: { display: 'block', height: 119, width: 119 } }) })] })] }));
35
35
  exports.Gallery = Gallery;
36
36
  exports.default = exports.Gallery;
package/dist/gallery.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"gallery.d.ts","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"AAuEA;;;GAGG;AACH,eAAO,MAAM,OAAO,+CAgQnB,CAAA;AAED,eAAe,OAAO,CAAA"}
1
+ {"version":3,"file":"gallery.d.ts","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"AAuEA;;;GAGG;AACH,eAAO,MAAM,OAAO,+CAyQnB,CAAA;AAED,eAAe,OAAO,CAAA"}
package/dist/gallery.js CHANGED
@@ -28,6 +28,6 @@ export const Gallery = () => (_jsxs("div", { style: { display: 'flex', flexDirec
28
28
  const el = document.querySelector('[data-palette-selected]');
29
29
  if (el)
30
30
  el.setAttribute('data-palette-selected', v);
31
- }, children: [_jsx(CommandInput, {}), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results" }), _jsxs(CommandGroup, { heading: "Palette", children: [_jsx(CommandItem, { value: "alpha", children: "alpha" }), _jsx(CommandItem, { value: "beta", children: "beta" }), _jsx(CommandItem, { value: "gamma", children: "gamma" })] })] })] }), _jsx("span", { "data-palette-selected": "" })] }), _jsxs(Section, { name: "overlay", children: [_jsx(Dialog, { open: true, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Dialog title" }), _jsx(DialogDescription, { children: "Dialog description" })] }), _jsx(DialogFooter, { children: _jsx(Button, { size: "sm", children: "OK" }) })] }) }), _jsxs(DropdownMenu, { open: true, children: [_jsx(DropdownMenuTrigger, { children: "Menu" }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "Label" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Item" })] })] }), _jsxs(Popover, { open: true, children: [_jsx(PopoverTrigger, { children: "Popover" }), _jsx(PopoverContent, { children: "Popover content" })] }), _jsxs(Select, { open: true, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "x", index: 0, children: "Option" }) })] }), _jsx(TooltipProvider, { delay: 0, children: _jsxs(Tooltip, { open: true, children: [_jsx(TooltipTrigger, { children: "Tooltip" }), _jsx(TooltipContent, { children: "Tooltip content" })] }) }), _jsx(Toaster, {})] }), _jsxs(Section, { name: "layout", children: [_jsx(Grid, { min: 240, gap: "$3", style: { width: '100%' }, "data-grid": "auto", children: [0, 1, 2, 3, 4, 5, 6].map((i) => (_jsxs(Card, { children: [_jsx(CardMedia, { ratio: 16 / 10, children: _jsx("img", { src: SWATCH, alt: "" }) }), _jsxs(CardHeader, { children: [_jsxs(CardTitle, { children: ["Card ", i] }), _jsx(CardDescription, { children: "Sized by its content, never by a pinned height." })] })] }, i))) }), _jsxs(Grid, { min: 900, gap: "$3", style: { width: '100%' }, "data-grid": "wide", children: [_jsx(Card, { children: _jsx(CardContent, { children: "wide" }) }), _jsx(Card, { children: _jsx(CardContent, { children: "wide" }) })] }), _jsx("div", { style: { width: '100%', overflow: 'hidden' }, children: _jsxs(Grid, { cols: 3, gap: "$3", style: { width: '100%' }, "data-grid": "fixed", children: [_jsx(Card, { children: _jsx(CardContent, { children: "short" }) }), _jsx(Card, { children: _jsx(CardContent, { children: _jsx("span", { style: { whiteSpace: 'nowrap' }, children: "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM" }) }) }), _jsx(Card, { children: _jsx(CardContent, { children: "short" }) })] }) }), _jsxs("div", { "data-grid": "growth", style: { display: 'flex', alignItems: 'flex-start', gap: 12, width: '100%' }, children: [_jsx(Card, { "data-card": "lean", children: _jsx(CardContent, { children: "one line" }) }), _jsxs(Card, { "data-card": "fat", children: [_jsx(CardContent, { children: "one line" }), _jsx(CardContent, { children: "two line" }), _jsx(CardContent, { children: "three line" }), _jsx(CardContent, { children: "four line" })] })] }), _jsx(Card, { interactive: true, "data-card": "interactive", children: _jsx(CardHeader, { children: _jsx(CardTitle, { children: "Interactive card" }) }) }), _jsx(PageSection, { maxWidth: 600, "data-section": "demo", children: _jsx(CardTitle, { children: "Section" }) }), _jsx(CardTitle, { fontFamily: "$mono", "data-type": "mono", children: "1234567890" }), _jsx(Button, { "data-button": "block-child", children: _jsx("span", { "data-block-child": true, style: { display: 'block', height: 119, width: 119 } }) })] })] }));
31
+ }, children: [_jsx(CommandInput, {}), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results" }), _jsxs(CommandGroup, { heading: "Palette", children: [_jsx(CommandItem, { value: "alpha", children: "alpha" }), _jsx(CommandItem, { value: "beta", children: "beta" }), _jsx(CommandItem, { value: "gamma", children: "gamma" })] })] })] }), _jsx("span", { "data-palette-selected": "" })] }), _jsxs(Section, { name: "overlay", children: [_jsx(Dialog, { open: true, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Dialog title" }), _jsx(DialogDescription, { children: "Dialog description" })] }), _jsx(DialogFooter, { children: _jsx(Button, { size: "sm", children: "OK" }) })] }) }), _jsxs(DropdownMenu, { open: true, children: [_jsx(DropdownMenuTrigger, { children: "Menu" }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "Label" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Item" })] })] }), _jsxs(Popover, { open: true, children: [_jsx(PopoverTrigger, { children: "Popover" }), _jsx(PopoverContent, { children: "Popover content" })] }), _jsxs(Select, { open: true, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "x", index: 0, children: "Option" }) })] }), _jsx(TooltipProvider, { delay: 0, children: _jsxs(Tooltip, { open: true, children: [_jsx(TooltipTrigger, { children: "Tooltip" }), _jsx(TooltipContent, { children: "Tooltip content" })] }) }), _jsx(Toaster, {})] }), _jsxs(Section, { name: "layout", children: [_jsx(Grid, { min: 240, gap: "$3", style: { width: '100%' }, "data-grid": "auto", children: [0, 1, 2, 3, 4, 5, 6].map((i) => (_jsxs(Card, { children: [_jsx(CardMedia, { ratio: 16 / 10, children: _jsx("img", { src: SWATCH, alt: "" }) }), _jsxs(CardHeader, { children: [_jsxs(CardTitle, { children: ["Card ", i] }), _jsx(CardDescription, { children: "Sized by its content, never by a pinned height." })] })] }, i))) }), _jsx(Grid, { min: 160, max: 4, gap: "$3", style: { width: '100%' }, "data-grid": "capped", children: [0, 1, 2, 3, 4, 5].map((i) => (_jsx(Card, { children: _jsxs(CardContent, { children: ["cap ", i] }) }, i))) }), _jsxs(Grid, { min: 900, gap: "$3", style: { width: '100%' }, "data-grid": "wide", children: [_jsx(Card, { children: _jsx(CardContent, { children: "wide" }) }), _jsx(Card, { children: _jsx(CardContent, { children: "wide" }) })] }), _jsx("div", { style: { width: '100%', overflow: 'hidden' }, children: _jsxs(Grid, { cols: 3, gap: "$3", style: { width: '100%' }, "data-grid": "fixed", children: [_jsx(Card, { children: _jsx(CardContent, { children: "short" }) }), _jsx(Card, { children: _jsx(CardContent, { children: _jsx("span", { style: { whiteSpace: 'nowrap' }, children: "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM" }) }) }), _jsx(Card, { children: _jsx(CardContent, { children: "short" }) })] }) }), _jsxs("div", { "data-grid": "growth", style: { display: 'flex', alignItems: 'flex-start', gap: 12, width: '100%' }, children: [_jsx(Card, { "data-card": "lean", children: _jsx(CardContent, { children: "one line" }) }), _jsxs(Card, { "data-card": "fat", children: [_jsx(CardContent, { children: "one line" }), _jsx(CardContent, { children: "two line" }), _jsx(CardContent, { children: "three line" }), _jsx(CardContent, { children: "four line" })] })] }), _jsx(Card, { interactive: true, "data-card": "interactive", children: _jsx(CardHeader, { children: _jsx(CardTitle, { children: "Interactive card" }) }) }), _jsx(PageSection, { maxWidth: 600, "data-section": "demo", children: _jsx(CardTitle, { children: "Section" }) }), _jsx(CardTitle, { fontFamily: "$mono", "data-type": "mono", children: "1234567890" }), _jsx(Button, { "data-button": "block-child", children: _jsx("span", { "data-block-child": true, style: { display: 'block', height: 119, width: 119 } }) })] })] }));
32
32
  export default Gallery;
33
33
  //# sourceMappingURL=gallery.js.map
package/dist/gallery.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"gallery.js","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAyBZ,OAAO,EACL,WAAW,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EACjF,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EACzE,kBAAkB,EAAE,kBAAkB,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EACzF,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,EAAE,aAAa,EAClF,iBAAiB,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EACxE,mBAAmB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,qBAAqB,EAC/E,mBAAmB,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EACpF,eAAe,EAAE,cAAc,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,EAAE,aAAa,EACvF,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EACpF,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAClF,cAAc,EAAE,IAAI,EAAE,OAAO,IAAI,WAAW,EAAE,SAAS,EAAE,aAAa,GAEvE,MAAM,gBAAgB,CAAA;AAEvB;;2EAE2E;AAC3E,MAAM,MAAM,GACV,0BAA0B;IAC1B,kBAAkB;IAChB,6EAA6E;IAC7E,6EAA6E;IAC7E,gDAAgD;IAChD,mHAAmH,CACpH,CAAA;AAEH,MAAM,eAAe,GAAoB;IACvC,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW;CACpG,CAAA;AACD,MAAM,YAAY,GAAiB,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;AACxF,MAAM,cAAc,GAAmB,CAAC,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,CAAC,CAAA;AAEzF;;;oEAGoE;AACpE,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAyC,EAAE,EAAE,CAAC,CAC7E,kCACgB,IAAI,EAClB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,YAEzF,QAAQ,GACD,CACX,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,CAC3B,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,aAC3F,MAAC,OAAO,IAAC,IAAI,EAAC,QAAQ,aACnB,eAAe,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAChC,KAAC,MAAM,IAAe,OAAO,EAAE,OAAO,YACnC,OAAO,IADG,OAAO,CAEX,CACV,CAAC,EACD,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC1B,KAAC,MAAM,IAAY,IAAI,EAAE,IAAI,YAC1B,IAAI,IADM,IAAI,CAER,CACV,CAAC,EACF,KAAC,MAAM,IAAC,QAAQ,+BAAkB,EAClC,KAAC,MAAM,IAAC,SAAS,8BAAiB,IAC1B,EAEV,KAAC,OAAO,IAAC,IAAI,EAAC,OAAO,YAClB,cAAc,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAC/B,KAAC,KAAK,IAAe,OAAO,EAAE,OAAO,YAClC,OAAO,IADE,OAAO,CAEX,CACT,CAAC,GACM,EAEV,KAAC,OAAO,IAAC,IAAI,EAAC,MAAM,YAClB,MAAC,IAAI,eACH,MAAC,UAAU,eACT,KAAC,SAAS,6BAAuB,EACjC,KAAC,eAAe,mCAAmC,EACnD,KAAC,UAAU,cACT,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,uBAExB,GACE,IACF,EACb,KAAC,WAAW,+BAA2B,EACvC,KAAC,UAAU,8BAAyB,IAC/B,GACC,EAEV,MAAC,OAAO,IAAC,IAAI,EAAC,MAAM,aAClB,KAAC,KAAK,wBAAc,EACpB,KAAC,KAAK,IAAC,WAAW,EAAC,OAAO,GAAG,EAC7B,KAAC,KAAK,IAAC,WAAW,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAG,EAChD,KAAC,QAAQ,IAAC,WAAW,EAAC,UAAU,GAAG,EACnC,KAAC,QAAQ,KAAG,EACZ,KAAC,QAAQ,IAAC,OAAO,SAAG,EACpB,KAAC,MAAM,KAAG,EACV,KAAC,MAAM,IAAC,OAAO,SAAG,EAClB,KAAC,MAAM,IAAC,YAAY,EAAE,CAAC,EAAE,CAAC,GAAI,EAC9B,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,GAAI,IACf,EAEV,KAAC,OAAO,IAAC,IAAI,EAAC,MAAM,YAClB,MAAC,IAAI,IAAC,YAAY,EAAC,KAAK,aACtB,MAAC,QAAQ,eACP,KAAC,WAAW,IAAC,KAAK,EAAC,KAAK,oBAAkB,EAC1C,KAAC,WAAW,IAAC,KAAK,EAAC,KAAK,oBAAkB,IACjC,EACX,KAAC,WAAW,IAAC,KAAK,EAAC,KAAK,0BAAwB,IAC3C,GACC,EAEV,MAAC,OAAO,IAAC,IAAI,EAAC,SAAS,aACrB,KAAC,SAAS,KAAG,EACb,KAAC,WAAW,IAAC,KAAK,EAAE,EAAE,GAAG,CAAC,GAAI,EAC9B,KAAC,MAAM,cACL,KAAC,cAAc,qBAAoB,GAC5B,EACT,KAAC,UAAU,IAAC,MAAM,EAAE,EAAE,4BAA0B,EAChD,MAAC,mBAAmB,IAAC,SAAS,EAAC,YAAY,aACzC,KAAC,cAAc,KAAG,EAClB,KAAC,eAAe,KAAG,EACnB,KAAC,cAAc,KAAG,IACE,IACd,EAEV,KAAC,OAAO,IAAC,IAAI,EAAC,aAAa,YACzB,MAAC,WAAW,IAAC,IAAI,mBACf,KAAC,kBAAkB,sCAAyC,EAC5D,KAAC,kBAAkB,sCAAyC,IAChD,GACN,EAEV,MAAC,OAAO,IAAC,IAAI,EAAC,SAAS,aACrB,MAAC,OAAO,eACN,KAAC,YAAY,KAAG,EAChB,MAAC,WAAW,eACV,KAAC,YAAY,6BAA0B,EACvC,KAAC,YAAY,IAAC,OAAO,EAAC,OAAO,YAC3B,MAAC,WAAW,IAAC,KAAK,EAAC,GAAG,qBAChB,KAAC,eAAe,0BAAqB,IAC7B,GACD,EACf,KAAC,gBAAgB,KAAG,IACR,IACN,EAQV,MAAC,aAAa,IACZ,IAAI,QACJ,YAAY,EAAC,OAAO,EACpB,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;wBACnB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAA;wBAC5D,IAAI,EAAE;4BAAE,EAAE,CAAC,YAAY,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAA;oBACrD,CAAC,aAED,KAAC,YAAY,KAAG,EAChB,MAAC,WAAW,eACV,KAAC,YAAY,6BAA0B,EACvC,MAAC,YAAY,IAAC,OAAO,EAAC,SAAS,aAC7B,KAAC,WAAW,IAAC,KAAK,EAAC,OAAO,sBAAoB,EAC9C,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,qBAAmB,EAC5C,KAAC,WAAW,IAAC,KAAK,EAAC,OAAO,sBAAoB,IACjC,IACH,IACA,EAChB,wCAA4B,EAAE,GAAG,IACzB,EAIV,MAAC,OAAO,IAAC,IAAI,EAAC,SAAS,aACrB,KAAC,MAAM,IAAC,IAAI,kBACV,MAAC,aAAa,eACZ,MAAC,YAAY,eACX,KAAC,WAAW,+BAA2B,EACvC,KAAC,iBAAiB,qCAAuC,IAC5C,EACf,KAAC,YAAY,cACX,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,mBAAY,GAChB,IACD,GACT,EACT,MAAC,YAAY,IAAC,IAAI,mBAChB,KAAC,mBAAmB,uBAA2B,EAC/C,MAAC,mBAAmB,eAClB,KAAC,iBAAiB,wBAA0B,EAC5C,KAAC,qBAAqB,KAAG,EACzB,KAAC,gBAAgB,uBAAwB,IACrB,IACT,EACf,MAAC,OAAO,IAAC,IAAI,mBACX,KAAC,cAAc,0BAAyB,EACxC,KAAC,cAAc,kCAAiC,IACxC,EACV,MAAC,MAAM,IAAC,IAAI,mBACV,KAAC,aAAa,cACZ,KAAC,WAAW,IAAC,WAAW,EAAC,QAAQ,GAAG,GACtB,EAChB,KAAC,aAAa,cACZ,KAAC,UAAU,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,CAAC,uBAEjB,GACC,IACT,EACT,KAAC,eAAe,IAAC,KAAK,EAAE,CAAC,YACvB,MAAC,OAAO,IAAC,IAAI,mBACX,KAAC,cAAc,0BAAyB,EACxC,KAAC,cAAc,kCAAiC,IACxC,GACM,EAClB,KAAC,OAAO,KAAG,IACH,EACV,MAAC,OAAO,IAAC,IAAI,EAAC,QAAQ,aAKpB,KAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,eAAY,MAAM,YAChE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAChC,MAAC,IAAI,eACH,KAAC,SAAS,IAAC,KAAK,EAAE,EAAE,GAAG,EAAE,YACvB,cAAK,GAAG,EAAE,MAAM,EAAE,GAAG,EAAC,EAAE,GAAG,GACjB,EACZ,MAAC,UAAU,eACT,MAAC,SAAS,wBAAO,CAAC,IAAa,EAC/B,KAAC,eAAe,kEAAkE,IACvE,KAPJ,CAAC,CAQL,CACR,CAAC,GACG,EAMP,MAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,eAAY,MAAM,aACjE,KAAC,IAAI,cAAC,KAAC,WAAW,uBAAmB,GAAO,EAC5C,KAAC,IAAI,cAAC,KAAC,WAAW,uBAAmB,GAAO,IACvC,EAOP,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAC/C,MAAC,IAAI,IAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,eAAY,OAAO,aACjE,KAAC,IAAI,cAAC,KAAC,WAAW,wBAAoB,GAAO,EAC7C,KAAC,IAAI,cACH,KAAC,WAAW,cAKV,eAAM,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,iEAE9B,GACK,GACT,EACP,KAAC,IAAI,cAAC,KAAC,WAAW,wBAAoB,GAAO,IACxC,GACH,EAGN,4BACY,QAAQ,EAClB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAE5E,KAAC,IAAI,iBAAW,MAAM,YAAC,KAAC,WAAW,2BAAuB,GAAO,EACjE,MAAC,IAAI,iBAAW,KAAK,aACnB,KAAC,WAAW,2BAAuB,EACnC,KAAC,WAAW,2BAAuB,EACnC,KAAC,WAAW,6BAAyB,EACrC,KAAC,WAAW,4BAAwB,IAC/B,IACH,EAEN,KAAC,IAAI,IAAC,WAAW,qBAAW,aAAa,YACvC,KAAC,UAAU,cAAC,KAAC,SAAS,mCAA6B,GAAa,GAC3D,EAEP,KAAC,WAAW,IAAC,QAAQ,EAAE,GAAG,kBAAe,MAAM,YAC7C,KAAC,SAAS,0BAAoB,GAClB,EAQd,KAAC,SAAS,IAAC,UAAU,EAAC,OAAO,eAAW,MAAM,2BAAuB,EAErE,KAAC,MAAM,mBAAa,aAAa,YAC/B,yCAAuB,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,GAAI,GACxE,IACD,IACN,CACP,CAAA;AAED,eAAe,OAAO,CAAA"}
1
+ {"version":3,"file":"gallery.js","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"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"}
package/dist/glass.css CHANGED
@@ -17,6 +17,18 @@
17
17
  * declaration (an undefined var() invalidates the whole property). They are a
18
18
  * mirror, not a second opinion — glass.test.ts reads @hanzo/design/styles.css
19
19
  * and fails if any of them stops matching, so the copy cannot drift.
20
+ *
21
+ * Reached BY ROLE, never by size. A role name (--edge-highlight,
22
+ * --surface-scrim) is coined for one job and only design declares it. The
23
+ * t-shirt ramp — --shadow-sm/md/lg/xl — is the opposite: a generic scale that
24
+ * every token package ships, and @hanzo/brand ships one too, at :root, tuned
25
+ * for a WHITE canvas (.05/.1 against design's .40/.55). Same names, same
26
+ * specificity, so the winner is whichever sheet the bundler ordered last, and
27
+ * it was brand. A declared variable also beats a var() fallback outright — so
28
+ * the mirror above could not save the rungs that read a ramp name, and on
29
+ * #080808 their drops resolved to a shadow you cannot see. The lit edge kept
30
+ * the ladder from vanishing, which is why it read as flat rather than as
31
+ * broken. The ladder therefore declares its own drops below; see there.
20
32
  */
21
33
 
22
34
  /* ── The material ───────────────────────────────────────────────────────────
@@ -77,11 +89,44 @@
77
89
 
78
90
  Glass over glass (a select opened inside a dialog) is deliberately left to
79
91
  stack: two 72% grounds land near 92%, so the nested surface reads as MORE
80
- solid than its parent, which is the right answer and the one macOS gives. */
92
+ solid than its parent, which is the right answer and the one macOS gives.
93
+
94
+ ── The rungs' drops are this package's own, and that is the fix ────────────
95
+ A rung used to read the ramp by size — var(--shadow-sm | --shadow-lg) — and
96
+ a name you do not own is a value somebody else gets to set. @hanzo/brand
97
+ sets exactly those, at :root, for a white canvas, and won on load order.
98
+ Three values are three names, so they are declared here: nothing else ships
99
+ a --glass-shadow-*, so no sheet can outrank them and no load order can
100
+ change the answer. A theme that wants a different ladder declares these
101
+ three and gets one; that is a hook, where reading the ramp was an accident.
102
+
103
+ Only the DROP is owned. --edge-highlight stays design's, because it is
104
+ role-named, uncollided, and design's `.light` zeroing of it is the half of
105
+ the composition that makes one rule work on both canvases.
106
+
107
+ Both themes are stated for the same reason design states them: on white the
108
+ drop does all the work and must be light enough not to smudge, on near-black
109
+ it must be heavy enough to exist at all. The values are design's own, and
110
+ glass.test.ts fails if either column stops matching what design publishes.
111
+ `:root.t_light` alongside `.light` is gui's spelling of the same idea —
112
+ compose-theme teaches design's sheet that alias, and this file, which also
113
+ ships on its own, says it outright. */
114
+ :root {
115
+ --glass-shadow-1: 0 1px 2px 0 rgb(0 0 0 / .40);
116
+ --glass-shadow-2: 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55);
117
+ --glass-shadow-3: 0 24px 60px -16px rgb(0 0 0 / .75);
118
+ }
119
+
120
+ .light, :root.t_light {
121
+ --glass-shadow-1: 0 1px 2px 0 rgb(0 0 0 / .06);
122
+ --glass-shadow-2: 0 10px 15px -3px rgb(0 0 0 / .09), 0 4px 6px -4px rgb(0 0 0 / .07);
123
+ --glass-shadow-3: 0 24px 60px -16px rgb(0 0 0 / .18);
124
+ }
125
+
81
126
  .elevation-1 {
82
127
  box-shadow:
83
128
  var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
84
- var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .40)) !important;
129
+ var(--glass-shadow-1) !important;
85
130
  }
86
131
 
87
132
  .elevation-2,
@@ -92,14 +137,14 @@
92
137
  [data-slot="tooltip-content"] {
93
138
  box-shadow:
94
139
  var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
95
- var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55)) !important;
140
+ var(--glass-shadow-2) !important;
96
141
  }
97
142
 
98
143
  .elevation-3,
99
144
  [data-slot="dialog-content"] {
100
145
  box-shadow:
101
146
  var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
102
- var(--shadow-floating, 0 24px 60px -16px rgb(0 0 0 / .75)) !important;
147
+ var(--glass-shadow-3) !important;
103
148
  }
104
149
 
105
150
  /* ── The scrim ──────────────────────────────────────────────────────────────
package/dist/styles/motion.css CHANGED
@@ -158,16 +158,22 @@
158
158
  }
159
159
 
160
160
  /* Paper — a ringed sheet: the ladder's lit edge and drop, plus a hairline all
161
- the way round. The three values are @hanzo/design's, reached by their real
162
- names. They used to be `--hz-ring` / `--hz-paper-highlight` /
163
- `--hz-elevation-3`, none of which is defined in this repo, in @hanzo/design
164
- or in any consumer — so all three resolved to hardcoded fallbacks, and the
165
- comment above promising that "a host that defines its own --hz-* tokens still
166
- wins" described a hook nobody could reach. */
161
+ the way round. The three values are reached by their real names. They used to
162
+ be `--hz-ring` / `--hz-paper-highlight` / `--hz-elevation-3`, none of which is
163
+ defined in this repo, in @hanzo/design or in any consumer — so all three
164
+ resolved to hardcoded fallbacks, and the comment above promising that "a host
165
+ that defines its own --hz-* tokens still wins" described a hook nobody could
166
+ reach.
167
+
168
+ The drop is rung 2's, by the ladder's own name. It read `--shadow-lg` — a
169
+ t-shirt size @hanzo/brand also declares, for a white canvas, winning on load
170
+ order — so paper lost its drop on dark exactly the way the rungs did. The
171
+ fallback stays because this sheet ships on its own: a host that imports
172
+ motion.css without glass.css has no ladder to read. */
167
173
  .paper {
168
174
  box-shadow: var(--shadow-inset-hairline, inset 0 0 0 1px rgb(255 255 255 / .10)),
169
175
  var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
170
- var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55));
176
+ var(--glass-shadow-2, 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55));
171
177
  }
172
178
 
173
179
  @keyframes menu-in {
package/dist/styles.css CHANGED
@@ -1095,6 +1095,18 @@
1095
1095
  * declaration (an undefined var() invalidates the whole property). They are a
1096
1096
  * mirror, not a second opinion — glass.test.ts reads @hanzo/design/styles.css
1097
1097
  * and fails if any of them stops matching, so the copy cannot drift.
1098
+ *
1099
+ * Reached BY ROLE, never by size. A role name (--edge-highlight,
1100
+ * --surface-scrim) is coined for one job and only design declares it. The
1101
+ * t-shirt ramp — --shadow-sm/md/lg/xl — is the opposite: a generic scale that
1102
+ * every token package ships, and @hanzo/brand ships one too, at :root, tuned
1103
+ * for a WHITE canvas (.05/.1 against design's .40/.55). Same names, same
1104
+ * specificity, so the winner is whichever sheet the bundler ordered last, and
1105
+ * it was brand. A declared variable also beats a var() fallback outright — so
1106
+ * the mirror above could not save the rungs that read a ramp name, and on
1107
+ * #080808 their drops resolved to a shadow you cannot see. The lit edge kept
1108
+ * the ladder from vanishing, which is why it read as flat rather than as
1109
+ * broken. The ladder therefore declares its own drops below; see there.
1098
1110
  */
1099
1111
 
1100
1112
  /* ── The material ───────────────────────────────────────────────────────────
@@ -1155,11 +1167,44 @@
1155
1167
 
1156
1168
  Glass over glass (a select opened inside a dialog) is deliberately left to
1157
1169
  stack: two 72% grounds land near 92%, so the nested surface reads as MORE
1158
- solid than its parent, which is the right answer and the one macOS gives. */
1170
+ solid than its parent, which is the right answer and the one macOS gives.
1171
+
1172
+ ── The rungs' drops are this package's own, and that is the fix ────────────
1173
+ A rung used to read the ramp by size — var(--shadow-sm | --shadow-lg) — and
1174
+ a name you do not own is a value somebody else gets to set. @hanzo/brand
1175
+ sets exactly those, at :root, for a white canvas, and won on load order.
1176
+ Three values are three names, so they are declared here: nothing else ships
1177
+ a --glass-shadow-*, so no sheet can outrank them and no load order can
1178
+ change the answer. A theme that wants a different ladder declares these
1179
+ three and gets one; that is a hook, where reading the ramp was an accident.
1180
+
1181
+ Only the DROP is owned. --edge-highlight stays design's, because it is
1182
+ role-named, uncollided, and design's `.light` zeroing of it is the half of
1183
+ the composition that makes one rule work on both canvases.
1184
+
1185
+ Both themes are stated for the same reason design states them: on white the
1186
+ drop does all the work and must be light enough not to smudge, on near-black
1187
+ it must be heavy enough to exist at all. The values are design's own, and
1188
+ glass.test.ts fails if either column stops matching what design publishes.
1189
+ `:root.t_light` alongside `.light` is gui's spelling of the same idea —
1190
+ compose-theme teaches design's sheet that alias, and this file, which also
1191
+ ships on its own, says it outright. */
1192
+ :root {
1193
+ --glass-shadow-1: 0 1px 2px 0 rgb(0 0 0 / .40);
1194
+ --glass-shadow-2: 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55);
1195
+ --glass-shadow-3: 0 24px 60px -16px rgb(0 0 0 / .75);
1196
+ }
1197
+
1198
+ .light, :root.t_light {
1199
+ --glass-shadow-1: 0 1px 2px 0 rgb(0 0 0 / .06);
1200
+ --glass-shadow-2: 0 10px 15px -3px rgb(0 0 0 / .09), 0 4px 6px -4px rgb(0 0 0 / .07);
1201
+ --glass-shadow-3: 0 24px 60px -16px rgb(0 0 0 / .18);
1202
+ }
1203
+
1159
1204
  .elevation-1 {
1160
1205
  box-shadow:
1161
1206
  var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
1162
- var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .40)) !important;
1207
+ var(--glass-shadow-1) !important;
1163
1208
  }
1164
1209
 
1165
1210
  .elevation-2,
@@ -1170,14 +1215,14 @@
1170
1215
  [data-slot="tooltip-content"] {
1171
1216
  box-shadow:
1172
1217
  var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
1173
- var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55)) !important;
1218
+ var(--glass-shadow-2) !important;
1174
1219
  }
1175
1220
 
1176
1221
  .elevation-3,
1177
1222
  [data-slot="dialog-content"] {
1178
1223
  box-shadow:
1179
1224
  var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
1180
- var(--shadow-floating, 0 24px 60px -16px rgb(0 0 0 / .75)) !important;
1225
+ var(--glass-shadow-3) !important;
1181
1226
  }
1182
1227
 
1183
1228
  /* ── The scrim ──────────────────────────────────────────────────────────────
@@ -1377,16 +1422,22 @@
1377
1422
  }
1378
1423
 
1379
1424
  /* Paper — a ringed sheet: the ladder's lit edge and drop, plus a hairline all
1380
- the way round. The three values are @hanzo/design's, reached by their real
1381
- names. They used to be `--hz-ring` / `--hz-paper-highlight` /
1382
- `--hz-elevation-3`, none of which is defined in this repo, in @hanzo/design
1383
- or in any consumer — so all three resolved to hardcoded fallbacks, and the
1384
- comment above promising that "a host that defines its own --hz-* tokens still
1385
- wins" described a hook nobody could reach. */
1425
+ the way round. The three values are reached by their real names. They used to
1426
+ be `--hz-ring` / `--hz-paper-highlight` / `--hz-elevation-3`, none of which is
1427
+ defined in this repo, in @hanzo/design or in any consumer — so all three
1428
+ resolved to hardcoded fallbacks, and the comment above promising that "a host
1429
+ that defines its own --hz-* tokens still wins" described a hook nobody could
1430
+ reach.
1431
+
1432
+ The drop is rung 2's, by the ladder's own name. It read `--shadow-lg` — a
1433
+ t-shirt size @hanzo/brand also declares, for a white canvas, winning on load
1434
+ order — so paper lost its drop on dark exactly the way the rungs did. The
1435
+ fallback stays because this sheet ships on its own: a host that imports
1436
+ motion.css without glass.css has no ladder to read. */
1386
1437
  .paper {
1387
1438
  box-shadow: var(--shadow-inset-hairline, inset 0 0 0 1px rgb(255 255 255 / .10)),
1388
1439
  var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
1389
- var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55));
1440
+ var(--glass-shadow-2, 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55));
1390
1441
  }
1391
1442
 
1392
1443
  @keyframes menu-in {
package/dist/theme.css CHANGED
@@ -1093,6 +1093,18 @@
1093
1093
  * declaration (an undefined var() invalidates the whole property). They are a
1094
1094
  * mirror, not a second opinion — glass.test.ts reads @hanzo/design/styles.css
1095
1095
  * and fails if any of them stops matching, so the copy cannot drift.
1096
+ *
1097
+ * Reached BY ROLE, never by size. A role name (--edge-highlight,
1098
+ * --surface-scrim) is coined for one job and only design declares it. The
1099
+ * t-shirt ramp — --shadow-sm/md/lg/xl — is the opposite: a generic scale that
1100
+ * every token package ships, and @hanzo/brand ships one too, at :root, tuned
1101
+ * for a WHITE canvas (.05/.1 against design's .40/.55). Same names, same
1102
+ * specificity, so the winner is whichever sheet the bundler ordered last, and
1103
+ * it was brand. A declared variable also beats a var() fallback outright — so
1104
+ * the mirror above could not save the rungs that read a ramp name, and on
1105
+ * #080808 their drops resolved to a shadow you cannot see. The lit edge kept
1106
+ * the ladder from vanishing, which is why it read as flat rather than as
1107
+ * broken. The ladder therefore declares its own drops below; see there.
1096
1108
  */
1097
1109
 
1098
1110
  /* ── The material ───────────────────────────────────────────────────────────
@@ -1153,11 +1165,44 @@
1153
1165
 
1154
1166
  Glass over glass (a select opened inside a dialog) is deliberately left to
1155
1167
  stack: two 72% grounds land near 92%, so the nested surface reads as MORE
1156
- solid than its parent, which is the right answer and the one macOS gives. */
1168
+ solid than its parent, which is the right answer and the one macOS gives.
1169
+
1170
+ ── The rungs' drops are this package's own, and that is the fix ────────────
1171
+ A rung used to read the ramp by size — var(--shadow-sm | --shadow-lg) — and
1172
+ a name you do not own is a value somebody else gets to set. @hanzo/brand
1173
+ sets exactly those, at :root, for a white canvas, and won on load order.
1174
+ Three values are three names, so they are declared here: nothing else ships
1175
+ a --glass-shadow-*, so no sheet can outrank them and no load order can
1176
+ change the answer. A theme that wants a different ladder declares these
1177
+ three and gets one; that is a hook, where reading the ramp was an accident.
1178
+
1179
+ Only the DROP is owned. --edge-highlight stays design's, because it is
1180
+ role-named, uncollided, and design's `.light` zeroing of it is the half of
1181
+ the composition that makes one rule work on both canvases.
1182
+
1183
+ Both themes are stated for the same reason design states them: on white the
1184
+ drop does all the work and must be light enough not to smudge, on near-black
1185
+ it must be heavy enough to exist at all. The values are design's own, and
1186
+ glass.test.ts fails if either column stops matching what design publishes.
1187
+ `:root.t_light` alongside `.light` is gui's spelling of the same idea —
1188
+ compose-theme teaches design's sheet that alias, and this file, which also
1189
+ ships on its own, says it outright. */
1190
+ :root {
1191
+ --glass-shadow-1: 0 1px 2px 0 rgb(0 0 0 / .40);
1192
+ --glass-shadow-2: 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55);
1193
+ --glass-shadow-3: 0 24px 60px -16px rgb(0 0 0 / .75);
1194
+ }
1195
+
1196
+ .light, :root.t_light {
1197
+ --glass-shadow-1: 0 1px 2px 0 rgb(0 0 0 / .06);
1198
+ --glass-shadow-2: 0 10px 15px -3px rgb(0 0 0 / .09), 0 4px 6px -4px rgb(0 0 0 / .07);
1199
+ --glass-shadow-3: 0 24px 60px -16px rgb(0 0 0 / .18);
1200
+ }
1201
+
1157
1202
  .elevation-1 {
1158
1203
  box-shadow:
1159
1204
  var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
1160
- var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .40)) !important;
1205
+ var(--glass-shadow-1) !important;
1161
1206
  }
1162
1207
 
1163
1208
  .elevation-2,
@@ -1168,14 +1213,14 @@
1168
1213
  [data-slot="tooltip-content"] {
1169
1214
  box-shadow:
1170
1215
  var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
1171
- var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55)) !important;
1216
+ var(--glass-shadow-2) !important;
1172
1217
  }
1173
1218
 
1174
1219
  .elevation-3,
1175
1220
  [data-slot="dialog-content"] {
1176
1221
  box-shadow:
1177
1222
  var(--edge-highlight, inset 0 1px 0 0 rgb(255 255 255 / .10)),
1178
- var(--shadow-floating, 0 24px 60px -16px rgb(0 0 0 / .75)) !important;
1223
+ var(--glass-shadow-3) !important;
1179
1224
  }
1180
1225
 
1181
1226
  /* ── The scrim ──────────────────────────────────────────────────────────────
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hanzo/ui",
3
- "version": "8.0.50",
3
+ "version": "8.0.52",
4
4
  "type": "module",
5
5
  "description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/design. ONE substrate: every component renders through @hanzo/gui primitives, so the same import works on web, native (expo) and desktop (Tauri). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
6
6
  "exports": {
@@ -166,9 +166,9 @@
166
166
  "@hanzo/design": "^0.4.6",
167
167
  "@hanzo/logo": "^1.0.13",
168
168
  "@hanzo/products": "^0.2.0",
169
- "@hanzogui/lucide-icons-2": "^8.0.0",
170
- "@hanzogui/telemetry": "^8.0.0",
171
- "@hanzogui/toast": "^8.0.0",
169
+ "@hanzogui/lucide-icons-2": "^8.1.0",
170
+ "@hanzogui/telemetry": "^8.1.0",
171
+ "@hanzogui/toast": "^8.1.0",
172
172
  "clsx": "^2.1.1"
173
173
  },
174
174
  "peerDependencies": {
@@ -210,12 +210,12 @@
210
210
  },
211
211
  "devDependencies": {
212
212
  "@hanzo/data": "1.2.1",
213
- "@hanzo/gui": "8.0.0",
214
- "@hanzogui/config": "8.0.0",
215
- "@hanzogui/core": "8.0.0",
216
- "@hanzogui/lucide-icons-2": "8.0.0",
217
- "@hanzogui/next-theme": "8.0.0",
218
- "@hanzogui/web": "8.0.0",
213
+ "@hanzo/gui": "8.1.0",
214
+ "@hanzogui/config": "8.1.0",
215
+ "@hanzogui/core": "8.1.0",
216
+ "@hanzogui/lucide-icons-2": "8.1.0",
217
+ "@hanzogui/next-theme": "8.1.0",
218
+ "@hanzogui/web": "8.1.0",
219
219
  "@playwright/test": "^1.61.0",
220
220
  "@types/react": "^19.1.10",
221
221
  "@types/react-dom": "^19.1.0",