@epilot/volt-ui-experimental-griffel 0.2.1 → 0.3.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/ADOPTING.md +416 -0
- package/README.md +96 -17
- package/dist/_virtual/jsx-dev-runtime.js +5 -0
- package/dist/_virtual/jsx-dev-runtime.js.map +1 -0
- package/dist/_virtual/react-jsx-dev-runtime.development.js +5 -0
- package/dist/_virtual/react-jsx-dev-runtime.development.js.map +1 -0
- package/dist/_virtual/react-jsx-dev-runtime.production.js +5 -0
- package/dist/_virtual/react-jsx-dev-runtime.production.js.map +1 -0
- package/dist/components/accordion/accordion.js +126 -66
- package/dist/components/accordion/accordion.js.map +1 -1
- package/dist/components/alert-dialog/alert-dialog.js +239 -137
- package/dist/components/alert-dialog/alert-dialog.js.map +1 -1
- package/dist/components/avatar/avatar-group.js +102 -47
- package/dist/components/avatar/avatar-group.js.map +1 -1
- package/dist/components/avatar/avatar.js +99 -76
- package/dist/components/avatar/avatar.js.map +1 -1
- package/dist/components/badge/badge.js +56 -40
- package/dist/components/badge/badge.js.map +1 -1
- package/dist/components/breadcrumb/breadcrumb.js +97 -49
- package/dist/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/components/button/button.js +89 -78
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/button-group/button-group.js +57 -33
- package/dist/components/button-group/button-group.js.map +1 -1
- package/dist/components/callout/callout.js +288 -164
- package/dist/components/callout/callout.js.map +1 -1
- package/dist/components/card/card.js +138 -82
- package/dist/components/card/card.js.map +1 -1
- package/dist/components/checkbox/checkbox.js +100 -49
- package/dist/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/collapsible-sidebar/collapsible-sidebar.js +155 -107
- package/dist/components/collapsible-sidebar/collapsible-sidebar.js.map +1 -1
- package/dist/components/command/command.js +295 -156
- package/dist/components/command/command.js.map +1 -1
- package/dist/components/data-table/data-table-body.js +114 -54
- package/dist/components/data-table/data-table-body.js.map +1 -1
- package/dist/components/data-table/data-table-column-header.js +117 -45
- package/dist/components/data-table/data-table-column-header.js.map +1 -1
- package/dist/components/data-table/data-table-column-visibility.js +98 -39
- package/dist/components/data-table/data-table-column-visibility.js.map +1 -1
- package/dist/components/data-table/data-table-content.js +90 -58
- package/dist/components/data-table/data-table-content.js.map +1 -1
- package/dist/components/data-table/data-table-error.js +86 -42
- package/dist/components/data-table/data-table-error.js.map +1 -1
- package/dist/components/data-table/data-table-header.js +88 -54
- package/dist/components/data-table/data-table-header.js.map +1 -1
- package/dist/components/data-table/data-table-loading.js +30 -18
- package/dist/components/data-table/data-table-loading.js.map +1 -1
- package/dist/components/data-table/data-table-pagination.js +27 -19
- package/dist/components/data-table/data-table-pagination.js.map +1 -1
- package/dist/components/data-table/data-table-row.js +87 -64
- package/dist/components/data-table/data-table-row.js.map +1 -1
- package/dist/components/data-table/data-table-toolbar.js +24 -16
- package/dist/components/data-table/data-table-toolbar.js.map +1 -1
- package/dist/components/data-table/data-table.js +182 -145
- package/dist/components/data-table/data-table.js.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.js +342 -214
- package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/date-range-picker/range-calendar.js +132 -92
- package/dist/components/date-range-picker/range-calendar.js.map +1 -1
- package/dist/components/date-time-picker/calendar.js +507 -323
- package/dist/components/date-time-picker/calendar.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker-context.js +64 -60
- package/dist/components/date-time-picker/date-time-picker-context.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker-input.js +249 -149
- package/dist/components/date-time-picker/date-time-picker-input.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker-panel.js +270 -156
- package/dist/components/date-time-picker/date-time-picker-panel.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker-popover.js +22 -14
- package/dist/components/date-time-picker/date-time-picker-popover.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker.js +118 -70
- package/dist/components/date-time-picker/date-time-picker.js.map +1 -1
- package/dist/components/date-time-picker/time-picker.js +204 -132
- package/dist/components/date-time-picker/time-picker.js.map +1 -1
- package/dist/components/density-provider/density-provider.js +48 -0
- package/dist/components/density-provider/density-provider.js.map +1 -0
- package/dist/components/dialog/dialog.js +281 -151
- package/dist/components/dialog/dialog.js.map +1 -1
- package/dist/components/drawer/drawer.js +272 -162
- package/dist/components/drawer/drawer.js.map +1 -1
- package/dist/components/dropdown-menu/dropdown-menu.js +376 -193
- package/dist/components/dropdown-menu/dropdown-menu.js.map +1 -1
- package/dist/components/field/field-combobox.js +447 -240
- package/dist/components/field/field-combobox.js.map +1 -1
- package/dist/components/field/field-select.js +23 -19
- package/dist/components/field/field-select.js.map +1 -1
- package/dist/components/field/field.js +315 -206
- package/dist/components/field/field.js.map +1 -1
- package/dist/components/label/label.js +24 -16
- package/dist/components/label/label.js.map +1 -1
- package/dist/components/list/list.js +623 -369
- package/dist/components/list/list.js.map +1 -1
- package/dist/components/option-card/option-card.js +323 -159
- package/dist/components/option-card/option-card.js.map +1 -1
- package/dist/components/pill/pill.js +91 -72
- package/dist/components/pill/pill.js.map +1 -1
- package/dist/components/popover/popover.js +99 -54
- package/dist/components/popover/popover.js.map +1 -1
- package/dist/components/radio/radio.js +92 -49
- package/dist/components/radio/radio.js.map +1 -1
- package/dist/components/scroll-overflow/scroll-overflow.js +349 -197
- package/dist/components/scroll-overflow/scroll-overflow.js.map +1 -1
- package/dist/components/segmented-control/segmented-control.js +141 -97
- package/dist/components/segmented-control/segmented-control.js.map +1 -1
- package/dist/components/select/select.js +452 -227
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/separator/separator.js +24 -16
- package/dist/components/separator/separator.js.map +1 -1
- package/dist/components/skeleton/skeleton.js +78 -38
- package/dist/components/skeleton/skeleton.js.map +1 -1
- package/dist/components/spinner/spinner.js +44 -20
- package/dist/components/spinner/spinner.js.map +1 -1
- package/dist/components/switch/switch.js +163 -86
- package/dist/components/switch/switch.js.map +1 -1
- package/dist/components/table/table-pagination.js +468 -210
- package/dist/components/table/table-pagination.js.map +1 -1
- package/dist/components/table/table.js +212 -144
- package/dist/components/table/table.js.map +1 -1
- package/dist/components/tabs/tabs.js +94 -58
- package/dist/components/tabs/tabs.js.map +1 -1
- package/dist/components/text/text.js +40 -32
- package/dist/components/text/text.js.map +1 -1
- package/dist/components/toast/toast.js +189 -113
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/components/toggle/toggle-group.js +40 -24
- package/dist/components/toggle/toggle-group.js.map +1 -1
- package/dist/components/toggle/toggle.js +50 -42
- package/dist/components/toggle/toggle.js.map +1 -1
- package/dist/components/tooltip/tooltip.js +101 -55
- package/dist/components/tooltip/tooltip.js.map +1 -1
- package/dist/index.d.ts +1675 -1068
- package/dist/index.js +286 -280
- package/dist/index.js.map +1 -1
- package/dist/lib/clear-button.js +27 -15
- package/dist/lib/clear-button.js.map +1 -1
- package/dist/lib/icons.js +18 -6
- package/dist/lib/icons.js.map +1 -1
- package/dist/packages/volt-runtime/dist/sheet.js +27 -10
- package/dist/packages/volt-runtime/dist/sheet.js.map +1 -1
- package/dist/packages/volt-runtime/dist/styles/recipe.js +76 -0
- package/dist/packages/volt-runtime/dist/styles/recipe.js.map +1 -0
- package/dist/styles/document-context.js +12 -0
- package/dist/styles/document-context.js.map +1 -0
- package/dist/styles/make-styles.js +18 -10
- package/dist/styles/make-styles.js.map +1 -1
- package/dist/tokens/core.generated.js +1239 -1153
- package/dist/tokens/core.generated.js.map +1 -1
- package/dist/tokens/index.d.ts +1103 -1054
- package/dist/tokens/index.js +1045 -996
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/install.js +25 -9
- package/dist/tokens/install.js.map +1 -1
- package/dist/tokens/palette.generated.js +1323 -1293
- package/dist/tokens/palette.generated.js.map +1 -1
- package/dist/tokens/use-palette-tokens.js +20 -0
- package/dist/tokens/use-palette-tokens.js.map +1 -0
- package/dist/tokens.json +127 -2
- package/dist/vendor/react/cjs/react-jsx-dev-runtime.development.js +236 -0
- package/dist/vendor/react/cjs/react-jsx-dev-runtime.development.js.map +1 -0
- package/dist/vendor/react/cjs/react-jsx-dev-runtime.production.js +21 -0
- package/dist/vendor/react/cjs/react-jsx-dev-runtime.production.js.map +1 -0
- package/dist/vendor/react/jsx-dev-runtime.js +9 -0
- package/dist/vendor/react/jsx-dev-runtime.js.map +1 -0
- package/package.json +17 -4
- package/scripts/migration-diagnostics-core.mjs +859 -0
- package/scripts/migration-diagnostics.mjs +353 -0
- package/scripts/migration-sweep.mjs +179 -0
- package/testing/jest-preset.cjs +64 -0
- package/dist/packages/volt-runtime/dist/styles/make-styles.js +0 -22
- package/dist/packages/volt-runtime/dist/styles/make-styles.js.map +0 -1
package/dist/lib/clear-button.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import * as
|
|
1
|
+
import { j as o } from "../vendor/react/jsx-dev-runtime.js";
|
|
2
|
+
import * as n from "react";
|
|
3
3
|
import { SLOT_ATTR as a } from "../packages/volt-runtime/dist/renderer/contract.js";
|
|
4
4
|
import { mergeClasses as m } from "../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
|
|
5
|
-
import { makeVoltStyles as
|
|
6
|
-
import { accentA8 as
|
|
5
|
+
import { makeVoltStyles as u } from "../styles/make-styles.js";
|
|
6
|
+
import { accentA8 as c } from "../tokens/index.js";
|
|
7
7
|
import { CloseIcon as f } from "./icons.js";
|
|
8
|
-
const p =
|
|
8
|
+
const p = u({
|
|
9
9
|
root: {
|
|
10
10
|
display: "inline-flex",
|
|
11
11
|
alignItems: "center",
|
|
@@ -22,7 +22,7 @@ const p = c({
|
|
|
22
22
|
outlineWidth: "2px",
|
|
23
23
|
outlineStyle: "solid",
|
|
24
24
|
outlineOffset: "1px",
|
|
25
|
-
outlineColor:
|
|
25
|
+
outlineColor: c
|
|
26
26
|
}
|
|
27
27
|
},
|
|
28
28
|
icon: {
|
|
@@ -30,23 +30,35 @@ const p = c({
|
|
|
30
30
|
width: "0.75rem",
|
|
31
31
|
height: "0.75rem"
|
|
32
32
|
}
|
|
33
|
-
}),
|
|
34
|
-
const
|
|
35
|
-
return /* @__PURE__ */
|
|
33
|
+
}), C = n.forwardRef(function({ className: r, label: t = "Remove", children: l, ...i }, s) {
|
|
34
|
+
const e = p();
|
|
35
|
+
return /* @__PURE__ */ o.jsxDEV(
|
|
36
36
|
"button",
|
|
37
37
|
{
|
|
38
|
-
ref:
|
|
38
|
+
ref: s,
|
|
39
39
|
type: "button",
|
|
40
40
|
"data-slot": "clear-button",
|
|
41
41
|
[a]: "clear-button",
|
|
42
|
-
"aria-label":
|
|
43
|
-
className: m(
|
|
42
|
+
"aria-label": t,
|
|
43
|
+
className: m(e.root, r),
|
|
44
44
|
...i,
|
|
45
|
-
children:
|
|
46
|
-
|
|
45
|
+
children: l ?? /* @__PURE__ */ o.jsxDEV(f, { className: e.icon }, void 0, !1, {
|
|
46
|
+
fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/lib/clear-button.tsx",
|
|
47
|
+
lineNumber: 74,
|
|
48
|
+
columnNumber: 20
|
|
49
|
+
}, this)
|
|
50
|
+
},
|
|
51
|
+
void 0,
|
|
52
|
+
!1,
|
|
53
|
+
{
|
|
54
|
+
fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/lib/clear-button.tsx",
|
|
55
|
+
lineNumber: 65,
|
|
56
|
+
columnNumber: 5
|
|
57
|
+
},
|
|
58
|
+
this
|
|
47
59
|
);
|
|
48
60
|
});
|
|
49
61
|
export {
|
|
50
|
-
|
|
62
|
+
C as ClearButton
|
|
51
63
|
};
|
|
52
64
|
//# sourceMappingURL=clear-button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clear-button.js","sources":["../../src/lib/clear-button.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../renderer/contract\"\nimport { makeVoltStyles } from \"../styles/make-styles\"\nimport * as tokens from \"../tokens\"\nimport { CloseIcon } from \"./icons\"\n\n/**\n * ClearButton — v1's shared dismiss button ported to Griffel atoms.\n *\n * v1 (`packages/react/src/lib/clear-button.tsx`) paints a round, shrink-proof, hover-tinted icon\n * button and falls back to a size-3 `CloseIcon` when no children are given. Only the mechanism\n * changes here: `rounded-full` becomes a literal fully-rounded radius and `hover:bg-current/10`\n * becomes a single `:hover` atom (`color-mix(in srgb, currentColor 10%, transparent)`) — the colour\n * comes from `currentColor`, so one rule covers every host. The focus-visible ring is 2px solid\n * `accent-a8` with a 1px offset, exactly as v1.\n *\n * Both Callout and Pill compose this instead of inlining their own approximation, so the hover,\n * focus and fallback-icon behaviour lives in one place.\n */\n\nconst useStyles = makeVoltStyles({\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n // rounded-full — no token for a fully rounded radius.\n borderRadius: \"9999px\",\n flexShrink: 0,\n cursor: \"pointer\",\n \":hover\": {\n // v1's `hover:bg-current/10` — a literal because no token expresses a currentColor tint.\n backgroundColor: \"color-mix(in srgb, currentColor 10%, transparent)\",\n },\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"1px\",\n outlineColor: tokens.accentA8,\n },\n },\n icon: {\n // size-3 — the CloseIcon fallback.\n width: \"0.75rem\",\n height: \"0.75rem\",\n },\n})\n\nexport type ClearButtonProps = React.ComponentProps<\"button\"> & {\n label?: string\n}\n\nexport const ClearButton = React.forwardRef<\n HTMLButtonElement,\n ClearButtonProps\n>(function ClearButton(\n { className, label = \"Remove\", children, ...props },\n ref\n) {\n const styles = useStyles()\n\n return (\n <button\n ref={ref}\n type=\"button\"\n data-slot=\"clear-button\"\n {...{ [SLOT_ATTR]: \"clear-button\" }}\n aria-label={label}\n className={mergeClasses(styles.root, className)}\n {...props}\n >\n {children ?? <CloseIcon className={styles.icon} />}\n </button>\n )\n})\n"],"names":["useStyles","makeVoltStyles","tokens.accentA8","ClearButton","React","className","label","children","props","ref","styles","
|
|
1
|
+
{"version":3,"file":"clear-button.js","sources":["../../src/lib/clear-button.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../renderer/contract\"\nimport { makeVoltStyles } from \"../styles/make-styles\"\nimport * as tokens from \"../tokens\"\nimport { CloseIcon } from \"./icons\"\n\n/**\n * ClearButton — v1's shared dismiss button ported to Griffel atoms.\n *\n * v1 (`packages/react/src/lib/clear-button.tsx`) paints a round, shrink-proof, hover-tinted icon\n * button and falls back to a size-3 `CloseIcon` when no children are given. Only the mechanism\n * changes here: `rounded-full` becomes a literal fully-rounded radius and `hover:bg-current/10`\n * becomes a single `:hover` atom (`color-mix(in srgb, currentColor 10%, transparent)`) — the colour\n * comes from `currentColor`, so one rule covers every host. The focus-visible ring is 2px solid\n * `accent-a8` with a 1px offset, exactly as v1.\n *\n * Both Callout and Pill compose this instead of inlining their own approximation, so the hover,\n * focus and fallback-icon behaviour lives in one place.\n */\n\nconst useStyles = makeVoltStyles({\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n // rounded-full — no token for a fully rounded radius.\n borderRadius: \"9999px\",\n flexShrink: 0,\n cursor: \"pointer\",\n \":hover\": {\n // v1's `hover:bg-current/10` — a literal because no token expresses a currentColor tint.\n backgroundColor: \"color-mix(in srgb, currentColor 10%, transparent)\",\n },\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"1px\",\n outlineColor: tokens.accentA8,\n },\n },\n icon: {\n // size-3 — the CloseIcon fallback.\n width: \"0.75rem\",\n height: \"0.75rem\",\n },\n})\n\nexport type ClearButtonProps = React.ComponentProps<\"button\"> & {\n label?: string\n}\n\nexport const ClearButton = React.forwardRef<\n HTMLButtonElement,\n ClearButtonProps\n>(function ClearButton(\n { className, label = \"Remove\", children, ...props },\n ref\n) {\n const styles = useStyles()\n\n return (\n <button\n ref={ref}\n type=\"button\"\n data-slot=\"clear-button\"\n {...{ [SLOT_ATTR]: \"clear-button\" }}\n aria-label={label}\n className={mergeClasses(styles.root, className)}\n {...props}\n >\n {children ?? <CloseIcon className={styles.icon} />}\n </button>\n )\n})\n"],"names":["useStyles","makeVoltStyles","tokens.accentA8","ClearButton","React","className","label","children","props","ref","styles","jsxDEV","SLOT_ATTR","mergeClasses","CloseIcon"],"mappings":";;;;;;;AAuBA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA;AAAA,IAEhB,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,UAAU;AAAA;AAAA,MAER,iBAAiB;AAAA,IAAA;AAAA,IAEnB,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAcC;AAAAA,IAAO;AAAA,EACvB;AAAA,EAEF,MAAM;AAAA;AAAA,IAEJ,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAEZ,CAAC,GAMYC,IAAcC,EAAM,WAG/B,SACA,EAAE,WAAAC,GAAW,OAAAC,IAAQ,UAAU,UAAAC,GAAU,GAAGC,EAAA,GAC5CC,GACA;AACA,QAAMC,IAASV,EAAA;AAEf,SACEW,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,MAAK;AAAA,MACL,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,cAAYN;AAAA,MACZ,WAAWO,EAAaH,EAAO,MAAML,CAAS;AAAA,MAC7C,GAAGG;AAAA,MAEH,UAAAD,KAAYI,gBAAAA,EAAAA,OAACG,GAAA,EAAU,WAAWJ,EAAO,KAAA,GAA7B,QAAA,IAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA,GAAA,IAAmC;AAAA,IAAA;AAAA,IATlD;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA;AAYJ,CAAC;"}
|
package/dist/lib/icons.js
CHANGED
|
@@ -1,15 +1,27 @@
|
|
|
1
|
-
import {
|
|
2
|
-
const
|
|
1
|
+
import { j as e } from "../vendor/react/jsx-dev-runtime.js";
|
|
2
|
+
const r = (l) => /* @__PURE__ */ e.jsxDEV(
|
|
3
3
|
"svg",
|
|
4
4
|
{
|
|
5
5
|
xmlns: "http://www.w3.org/2000/svg",
|
|
6
6
|
viewBox: "0 0 24 24",
|
|
7
7
|
fill: "currentColor",
|
|
8
|
-
...
|
|
9
|
-
children: /* @__PURE__ */
|
|
10
|
-
|
|
8
|
+
...l,
|
|
9
|
+
children: /* @__PURE__ */ e.jsxDEV("path", { d: "M12 13.4L7.10005 18.3C6.91672 18.4833 6.68338 18.575 6.40005 18.575C6.11672 18.575 5.88338 18.4833 5.70005 18.3C5.51672 18.1167 5.42505 17.8833 5.42505 17.6C5.42505 17.3167 5.51672 17.0833 5.70005 16.9L10.6 12L5.70005 7.1C5.51672 6.91667 5.42505 6.68334 5.42505 6.4C5.42505 6.11667 5.51672 5.88334 5.70005 5.7C5.88338 5.51667 6.11672 5.425 6.40005 5.425C6.68338 5.425 6.91672 5.51667 7.10005 5.7L12 10.6L16.9 5.7C17.0834 5.51667 17.3167 5.425 17.6 5.425C17.8834 5.425 18.1167 5.51667 18.3 5.7C18.4834 5.88334 18.575 6.11667 18.575 6.4C18.575 6.68334 18.4834 6.91667 18.3 7.1L13.4 12L18.3 16.9C18.4834 17.0833 18.575 17.3167 18.575 17.6C18.575 17.8833 18.4834 18.1167 18.3 18.3C18.1167 18.4833 17.8834 18.575 17.6 18.575C17.3167 18.575 17.0834 18.4833 16.9 18.3L12 13.4Z" }, void 0, !1, {
|
|
10
|
+
fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/lib/icons.tsx",
|
|
11
|
+
lineNumber: 10,
|
|
12
|
+
columnNumber: 5
|
|
13
|
+
}, void 0)
|
|
14
|
+
},
|
|
15
|
+
void 0,
|
|
16
|
+
!1,
|
|
17
|
+
{
|
|
18
|
+
fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/lib/icons.tsx",
|
|
19
|
+
lineNumber: 4,
|
|
20
|
+
columnNumber: 3
|
|
21
|
+
},
|
|
22
|
+
void 0
|
|
11
23
|
);
|
|
12
24
|
export {
|
|
13
|
-
|
|
25
|
+
r as CloseIcon
|
|
14
26
|
};
|
|
15
27
|
//# sourceMappingURL=icons.js.map
|
package/dist/lib/icons.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icons.js","sources":["../../src/lib/icons.tsx"],"sourcesContent":["import * as React from \"react\"\n\nconst CloseIcon = (props: React.ComponentProps<\"svg\">) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M12 13.4L7.10005 18.3C6.91672 18.4833 6.68338 18.575 6.40005 18.575C6.11672 18.575 5.88338 18.4833 5.70005 18.3C5.51672 18.1167 5.42505 17.8833 5.42505 17.6C5.42505 17.3167 5.51672 17.0833 5.70005 16.9L10.6 12L5.70005 7.1C5.51672 6.91667 5.42505 6.68334 5.42505 6.4C5.42505 6.11667 5.51672 5.88334 5.70005 5.7C5.88338 5.51667 6.11672 5.425 6.40005 5.425C6.68338 5.425 6.91672 5.51667 7.10005 5.7L12 10.6L16.9 5.7C17.0834 5.51667 17.3167 5.425 17.6 5.425C17.8834 5.425 18.1167 5.51667 18.3 5.7C18.4834 5.88334 18.575 6.11667 18.575 6.4C18.575 6.68334 18.4834 6.91667 18.3 7.1L13.4 12L18.3 16.9C18.4834 17.0833 18.575 17.3167 18.575 17.6C18.575 17.8833 18.4834 18.1167 18.3 18.3C18.1167 18.4833 17.8834 18.575 17.6 18.575C17.3167 18.575 17.0834 18.4833 16.9 18.3L12 13.4Z\" />\n </svg>\n)\n\nexport { CloseIcon }\n"],"names":["CloseIcon","props","
|
|
1
|
+
{"version":3,"file":"icons.js","sources":["../../src/lib/icons.tsx"],"sourcesContent":["import * as React from \"react\"\n\nconst CloseIcon = (props: React.ComponentProps<\"svg\">) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M12 13.4L7.10005 18.3C6.91672 18.4833 6.68338 18.575 6.40005 18.575C6.11672 18.575 5.88338 18.4833 5.70005 18.3C5.51672 18.1167 5.42505 17.8833 5.42505 17.6C5.42505 17.3167 5.51672 17.0833 5.70005 16.9L10.6 12L5.70005 7.1C5.51672 6.91667 5.42505 6.68334 5.42505 6.4C5.42505 6.11667 5.51672 5.88334 5.70005 5.7C5.88338 5.51667 6.11672 5.425 6.40005 5.425C6.68338 5.425 6.91672 5.51667 7.10005 5.7L12 10.6L16.9 5.7C17.0834 5.51667 17.3167 5.425 17.6 5.425C17.8834 5.425 18.1167 5.51667 18.3 5.7C18.4834 5.88334 18.575 6.11667 18.575 6.4C18.575 6.68334 18.4834 6.91667 18.3 7.1L13.4 12L18.3 16.9C18.4834 17.0833 18.575 17.3167 18.575 17.6C18.575 17.8833 18.4834 18.1167 18.3 18.3C18.1167 18.4833 17.8834 18.575 17.6 18.575C17.3167 18.575 17.0834 18.4833 16.9 18.3L12 13.4Z\" />\n </svg>\n)\n\nexport { CloseIcon }\n"],"names":["CloseIcon","props","jsxDEV","this"],"mappings":";AAEA,MAAMA,IAAY,CAACC,MACjBC,gBAAAA,EAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAAC,gBAAAA,EAAAA,OAAC,QAAA,EAAK,GAAE,owBAAA,GAAR,QAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA,GAAAC,MAA4wB;AAAA,EAAA;AAAA,EAN9wB;AAAA,EAAA;AAAA,EAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA;AAAA,EAAAA;AAOA;"}
|
|
@@ -1,16 +1,33 @@
|
|
|
1
1
|
import { TOKENS_ATTR as s } from "./renderer/contract.js";
|
|
2
2
|
import { ensureInsertionPoint as u } from "./renderer/insertion-point.js";
|
|
3
|
-
import { GRIFFEL_CLASS_SALT as
|
|
4
|
-
|
|
5
|
-
function
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
3
|
+
import { GRIFFEL_CLASS_SALT as d } from "./class-salt.generated.js";
|
|
4
|
+
let f = /* @__PURE__ */ new WeakMap();
|
|
5
|
+
function w(t, e, c) {
|
|
6
|
+
let n = f.get(t);
|
|
7
|
+
n || (n = /* @__PURE__ */ new Map(), f.set(t, n));
|
|
8
|
+
const o = n.get(e);
|
|
9
|
+
if (o) {
|
|
10
|
+
if (o.isConnected && o.ownerDocument === t && t.contains(o) && o.getAttribute(s) === e)
|
|
11
|
+
return !1;
|
|
12
|
+
n.delete(e);
|
|
13
|
+
}
|
|
14
|
+
const a = t.querySelector(`[${s}="${e}"]`);
|
|
15
|
+
if (a !== null)
|
|
16
|
+
return n.set(e, a), !1;
|
|
17
|
+
const r = t.createElement("style");
|
|
18
|
+
r.setAttribute(s, e), r.setAttribute("data-volt2-owner", d), r.textContent = c;
|
|
19
|
+
const l = u(t), i = l.parentNode;
|
|
20
|
+
if (!i)
|
|
21
|
+
throw new Error(
|
|
22
|
+
`Failed to insert stylesheet [${s}="${e}"]: insertion anchor has no parentNode`
|
|
23
|
+
);
|
|
24
|
+
if (i.insertBefore(r, l.nextSibling), r.parentNode !== i || !t.contains(r))
|
|
25
|
+
throw new Error(
|
|
26
|
+
`Failed to insert stylesheet [${s}="${e}"]: element insertion failed or element detached`
|
|
27
|
+
);
|
|
28
|
+
return n.set(e, r), !0;
|
|
12
29
|
}
|
|
13
30
|
export {
|
|
14
|
-
|
|
31
|
+
w as ensureSheet
|
|
15
32
|
};
|
|
16
33
|
//# sourceMappingURL=sheet.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.js","sources":["../../../../../volt-runtime/dist/sheet.js"],"sourcesContent":["import { TOKENS_ATTR as
|
|
1
|
+
{"version":3,"file":"sheet.js","sources":["../../../../../volt-runtime/dist/sheet.js"],"sourcesContent":["import { TOKENS_ATTR as i } from \"./renderer/contract.js\";\nimport { ensureInsertionPoint as u } from \"./renderer/insertion-point.js\";\nimport { GRIFFEL_CLASS_SALT as p } from \"./class-salt.generated.js\";\nlet l = /* @__PURE__ */ new WeakMap();\nfunction S() {\n l = /* @__PURE__ */ new WeakMap();\n}\nfunction A(t, e, c) {\n let n = l.get(t);\n n || (n = /* @__PURE__ */ new Map(), l.set(t, n));\n const o = n.get(e);\n if (o) {\n if (o.isConnected && o.ownerDocument === t && t.contains(o) && o.getAttribute(i) === e)\n return !1;\n n.delete(e);\n }\n const a = t.querySelector(`[${i}=\"${e}\"]`);\n if (a !== null)\n return n.set(e, a), !1;\n const r = t.createElement(\"style\");\n r.setAttribute(i, e), r.setAttribute(\"data-volt2-owner\", p), r.textContent = c;\n const f = u(t), s = f.parentNode;\n if (!s)\n throw new Error(\n `Failed to insert stylesheet [${i}=\"${e}\"]: insertion anchor has no parentNode`\n );\n if (s.insertBefore(r, f.nextSibling), r.parentNode !== s || !t.contains(r))\n throw new Error(\n `Failed to insert stylesheet [${i}=\"${e}\"]: element insertion failed or element detached`\n );\n return n.set(e, r), !0;\n}\nexport {\n S as __resetInstalledSheets,\n A as ensureSheet\n};\n//# sourceMappingURL=sheet.js.map\n"],"names":["l","A","i","p","f","u","s"],"mappings":";;;AAGA,IAAIA,IAAoB,oBAAI,QAAO;AAInC,SAASC,EAAE,GAAG,GAAG,GAAG;AAClB,MAAI,IAAID,EAAE,IAAI,CAAC;AACf,QAAM,IAAoB,oBAAI,IAAG,GAAIA,EAAE,IAAI,GAAG,CAAC;AAC/C,QAAM,IAAI,EAAE,IAAI,CAAC;AACjB,MAAI,GAAG;AACL,QAAI,EAAE,eAAe,EAAE,kBAAkB,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,aAAaE,CAAC,MAAM;AACnF,aAAO;AACT,MAAE,OAAO,CAAC;AAAA,EACZ;AACA,QAAM,IAAI,EAAE,cAAc,IAAIA,CAAC,KAAK,CAAC,IAAI;AACzC,MAAI,MAAM;AACR,WAAO,EAAE,IAAI,GAAG,CAAC,GAAG;AACtB,QAAM,IAAI,EAAE,cAAc,OAAO;AACjC,IAAE,aAAaA,GAAG,CAAC,GAAG,EAAE,aAAa,oBAAoBC,CAAC,GAAG,EAAE,cAAc;AAC7E,QAAMC,IAAIC,EAAE,CAAC,GAAGC,IAAIF,EAAE;AACtB,MAAI,CAACE;AACH,UAAM,IAAI;AAAA,MACR,gCAAgCJ,CAAC,KAAK,CAAC;AAAA,IAC7C;AACE,MAAII,EAAE,aAAa,GAAGF,EAAE,WAAW,GAAG,EAAE,eAAeE,KAAK,CAAC,EAAE,SAAS,CAAC;AACvE,UAAM,IAAI;AAAA,MACR,gCAAgCJ,CAAC,KAAK,CAAC;AAAA,IAC7C;AACE,SAAO,EAAE,IAAI,GAAG,CAAC,GAAG;AACtB;"}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { getVoltRenderer as u } from "../renderer/index.js";
|
|
2
|
+
import { makeStyles as m } from "../vendor/@griffel/core/src/makeStyles.js";
|
|
3
|
+
import { makeResetStyles as f } from "../vendor/@griffel/core/src/makeResetStyles.js";
|
|
4
|
+
import { defaultCompareMediaQueries as a } from "../vendor/@griffel/core/src/renderer/createDOMRenderer.js";
|
|
5
|
+
import { GRIFFEL_CLASS_SALT as p } from "../class-salt.generated.js";
|
|
6
|
+
const l = {
|
|
7
|
+
id: "volt-recipe-compute",
|
|
8
|
+
classNameHashSalt: p,
|
|
9
|
+
insertionCache: {},
|
|
10
|
+
stylesheets: {},
|
|
11
|
+
compareMediaQueries: a,
|
|
12
|
+
compareContainerQueries: a,
|
|
13
|
+
insertCSSRules() {
|
|
14
|
+
throw new Error(
|
|
15
|
+
"COMPUTATION_ADAPTER has no Document and must never insert CSS. Reaching this means a recipe's custom factory was bypassed — call recipe.install(doc) with a real Document instead."
|
|
16
|
+
);
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
Object.freeze(l);
|
|
20
|
+
Object.freeze(l.insertionCache);
|
|
21
|
+
Object.freeze(l.stylesheets);
|
|
22
|
+
function i(r) {
|
|
23
|
+
return () => function(e, s) {
|
|
24
|
+
r(s);
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
function c(r) {
|
|
28
|
+
const e = /* @__PURE__ */ new WeakSet();
|
|
29
|
+
return function(s) {
|
|
30
|
+
const n = r(), o = u(s);
|
|
31
|
+
e.has(o) || (o.insertCSSRules(n), e.add(o));
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
function y(r) {
|
|
35
|
+
let e = null;
|
|
36
|
+
const s = m(
|
|
37
|
+
r,
|
|
38
|
+
i((t) => {
|
|
39
|
+
e = t;
|
|
40
|
+
})
|
|
41
|
+
);
|
|
42
|
+
function n(t = "ltr") {
|
|
43
|
+
return s({ dir: t, renderer: l });
|
|
44
|
+
}
|
|
45
|
+
const o = c(() => (e === null && n("ltr"), e));
|
|
46
|
+
return {
|
|
47
|
+
getClasses(t = "ltr") {
|
|
48
|
+
return n(t);
|
|
49
|
+
},
|
|
50
|
+
install: o
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
function w(r) {
|
|
54
|
+
let e = null;
|
|
55
|
+
const s = f(
|
|
56
|
+
r,
|
|
57
|
+
i((t) => {
|
|
58
|
+
e = t;
|
|
59
|
+
})
|
|
60
|
+
);
|
|
61
|
+
function n(t = "ltr") {
|
|
62
|
+
return s({ dir: t, renderer: l });
|
|
63
|
+
}
|
|
64
|
+
const o = c(() => (e === null && n("ltr"), e));
|
|
65
|
+
return {
|
|
66
|
+
getClasses(t = "ltr") {
|
|
67
|
+
return n(t);
|
|
68
|
+
},
|
|
69
|
+
install: o
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
export {
|
|
73
|
+
w as createVoltResetStylesRecipe,
|
|
74
|
+
y as createVoltStylesRecipe
|
|
75
|
+
};
|
|
76
|
+
//# sourceMappingURL=recipe.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"recipe.js","sources":["../../../../../../volt-runtime/dist/styles/recipe.js"],"sourcesContent":["import { getVoltRenderer as u } from \"../renderer/index.js\";\nimport { makeStyles as p } from \"../vendor/@griffel/core/src/makeStyles.js\";\nimport { makeResetStyles as m } from \"../vendor/@griffel/core/src/makeResetStyles.js\";\nimport { defaultCompareMediaQueries as a } from \"../vendor/@griffel/core/src/renderer/createDOMRenderer.js\";\nimport { GRIFFEL_CLASS_SALT as f } from \"../class-salt.generated.js\";\nconst o = {\n id: \"volt-recipe-compute\",\n classNameHashSalt: f,\n insertionCache: {},\n stylesheets: {},\n compareMediaQueries: a,\n compareContainerQueries: a,\n insertCSSRules() {\n throw new Error(\n \"COMPUTATION_ADAPTER has no Document and must never insert CSS. Reaching this means a recipe's custom factory was bypassed — call recipe.install(doc) with a real Document instead.\"\n );\n }\n};\nObject.freeze(o);\nObject.freeze(o.insertionCache);\nObject.freeze(o.stylesheets);\nfunction c(n) {\n return () => function(s, r) {\n n(r);\n };\n}\nfunction i(n) {\n const t = /* @__PURE__ */ new WeakSet();\n return function(r) {\n const l = n(), e = u(r);\n t.has(e) || (e.insertCSSRules(l), t.add(e));\n };\n}\nfunction y(n) {\n let t = null;\n const s = p(\n n,\n c((e) => {\n t = e;\n })\n );\n function r(e = \"ltr\") {\n return s({ dir: e, renderer: o });\n }\n const l = i(() => (t === null && r(\"ltr\"), t));\n return {\n getClasses(e = \"ltr\") {\n return r(e);\n },\n install: l\n };\n}\nfunction A(n) {\n let t = null;\n const s = m(\n n,\n c((e) => {\n t = e;\n })\n );\n function r(e = \"ltr\") {\n return s({ dir: e, renderer: o });\n }\n const l = i(() => (t === null && r(\"ltr\"), t));\n return {\n getClasses(e = \"ltr\") {\n return r(e);\n },\n install: l\n };\n}\nexport {\n A as createVoltResetStylesRecipe,\n y as createVoltStylesRecipe\n};\n//# sourceMappingURL=recipe.js.map\n"],"names":["o","f","a","c","n","s","r","i","t","l","e","u","p","A","m"],"mappings":";;;;;AAKA,MAAMA,IAAI;AAAA,EACR,IAAI;AAAA,EACJ,mBAAmBC;AAAAA,EACnB,gBAAgB,CAAA;AAAA,EAChB,aAAa,CAAA;AAAA,EACb,qBAAqBC;AAAAA,EACrB,yBAAyBA;AAAAA,EACzB,iBAAiB;AACf,UAAM,IAAI;AAAA,MACR;AAAA,IACN;AAAA,EACE;AACF;AACA,OAAO,OAAOF,CAAC;AACf,OAAO,OAAOA,EAAE,cAAc;AAC9B,OAAO,OAAOA,EAAE,WAAW;AAC3B,SAASG,EAAEC,GAAG;AACZ,SAAO,MAAM,SAASC,GAAGC,GAAG;AAC1B,IAAAF,EAAEE,CAAC;AAAA,EACL;AACF;AACA,SAASC,EAAEH,GAAG;AACZ,QAAMI,IAAoB,oBAAI,QAAO;AACrC,SAAO,SAASF,GAAG;AACjB,UAAMG,IAAIL,EAAC,GAAIM,IAAIC,EAAEL,CAAC;AACtB,IAAAE,EAAE,IAAIE,CAAC,MAAMA,EAAE,eAAeD,CAAC,GAAGD,EAAE,IAAIE,CAAC;AAAA,EAC3C;AACF;AACA,SAAS,EAAEN,GAAG;AACZ,MAAII,IAAI;AACR,QAAM,IAAII;AAAAA,IACRR;AAAA,IACAD,EAAE,CAACO,MAAM;AACP,MAAAF,IAAIE;AAAA,IACN,CAAC;AAAA,EACL;AACE,WAASJ,EAAEI,IAAI,OAAO;AACpB,WAAO,EAAE,EAAE,KAAKA,GAAG,UAAUV,EAAC,CAAE;AAAA,EAClC;AACA,QAAMS,IAAIF,EAAE,OAAOC,MAAM,QAAQF,EAAE,KAAK,GAAGE,EAAE;AAC7C,SAAO;AAAA,IACL,WAAWE,IAAI,OAAO;AACpB,aAAOJ,EAAEI,CAAC;AAAA,IACZ;AAAA,IACA,SAASD;AAAA,EACb;AACA;AACA,SAASI,EAAET,GAAG;AACZ,MAAII,IAAI;AACR,QAAM,IAAIM;AAAAA,IACRV;AAAA,IACAD,EAAE,CAACO,MAAM;AACP,MAAAF,IAAIE;AAAA,IACN,CAAC;AAAA,EACL;AACE,WAASJ,EAAEI,IAAI,OAAO;AACpB,WAAO,EAAE,EAAE,KAAKA,GAAG,UAAUV,EAAC,CAAE;AAAA,EAClC;AACA,QAAMS,IAAIF,EAAE,OAAOC,MAAM,QAAQF,EAAE,KAAK,GAAGE,EAAE;AAC7C,SAAO;AAAA,IACL,WAAWE,IAAI,OAAO;AACpB,aAAOJ,EAAEI,CAAC;AAAA,IACZ;AAAA,IACA,SAASD;AAAA,EACb;AACA;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as e from "react";
|
|
2
|
+
const o = e.createContext(
|
|
3
|
+
void 0
|
|
4
|
+
);
|
|
5
|
+
function n() {
|
|
6
|
+
const t = e.useContext(o);
|
|
7
|
+
return t || (typeof document > "u" ? void 0 : document);
|
|
8
|
+
}
|
|
9
|
+
export {
|
|
10
|
+
n as useVoltTargetDocument
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=document-context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"document-context.js","sources":["../../src/styles/document-context.ts"],"sourcesContent":["import * as React from \"react\"\n\n/**\n * INTERNAL. Not exported from `src/index.ts` — no public provider/API this slice (WP2B2). Lets a\n * future, separately-gated boundary component (WP4) tell `useVoltStyles`/`useVoltResetStyles` and\n * the palette hooks which `Document` to target, without those hooks reading a ref (refs are not\n * attached yet when `useInsertionEffect` runs — see `useVoltTargetDocument` below) or discovering it\n * any other structural way. `asChild`/`Slot`/compound components frequently do not own the eventual\n * DOM node's ref at all, which is why this is a Context read during render, not a ref lookup.\n *\n * `undefined` means \"no explicit target\" — the accessor hook falls back to the ambient `document`.\n * This module reads no global at import time: the ambient fallback is resolved inside the hook body,\n * only when called, only during a render.\n */\nconst VoltDocumentContext = React.createContext<Document | undefined>(\n undefined\n)\n\n/**\n * Resolves the Document a style/token hook should target this render: the explicit Context value if\n * one is provided, else the ambient global `document` if one exists, else `undefined`.\n *\n * `undefined` is a real, expected outcome — not an error. It means either no DOM is available in\n * this environment (a non-browser-like preparation pass) or none was explicitly provided; callers\n * must treat it as \"skip installation this commit,\" never coerce it to a real Document or throw.\n */\nexport function useVoltTargetDocument(): Document | undefined {\n const explicit = React.useContext(VoltDocumentContext)\n if (explicit) return explicit\n return typeof document === \"undefined\" ? undefined : document\n}\n\n/** Test-only: mounts the internal provider. Not part of the package's public API. */\nexport const __VoltDocumentContextForTests = VoltDocumentContext\n"],"names":["VoltDocumentContext","React","useVoltTargetDocument","explicit"],"mappings":";AAcA,MAAMA,IAAsBC,EAAM;AAAA,EAChC;AACF;AAUO,SAASC,IAA8C;AAC5D,QAAMC,IAAWF,EAAM,WAAWD,CAAmB;AACrD,SAAIG,MACG,OAAO,WAAa,MAAc,SAAY;AACvD;"}
|
|
@@ -1,19 +1,27 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import * as r from "react";
|
|
2
|
+
import { createVoltStylesRecipe as i, createVoltResetStylesRecipe as u } from "../packages/volt-runtime/dist/styles/recipe.js";
|
|
3
|
+
import { ensureCoreTokens as n } from "../tokens/install.js";
|
|
4
|
+
import { useVoltTargetDocument as c } from "./document-context.js";
|
|
5
|
+
function p(s) {
|
|
6
|
+
const t = i(s);
|
|
5
7
|
return function() {
|
|
6
|
-
|
|
8
|
+
const e = c(), o = t.getClasses();
|
|
9
|
+
return r.useInsertionEffect(() => {
|
|
10
|
+
e && (n(e), t.install(e));
|
|
11
|
+
}), o;
|
|
7
12
|
};
|
|
8
13
|
}
|
|
9
|
-
function
|
|
10
|
-
const
|
|
14
|
+
function y(s) {
|
|
15
|
+
const t = u(s);
|
|
11
16
|
return function() {
|
|
12
|
-
|
|
17
|
+
const e = c(), o = t.getClasses();
|
|
18
|
+
return r.useInsertionEffect(() => {
|
|
19
|
+
e && (n(e), t.install(e));
|
|
20
|
+
}), o;
|
|
13
21
|
};
|
|
14
22
|
}
|
|
15
23
|
export {
|
|
16
|
-
|
|
17
|
-
|
|
24
|
+
y as makeVoltResetStyles,
|
|
25
|
+
p as makeVoltStyles
|
|
18
26
|
};
|
|
19
27
|
//# sourceMappingURL=make-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"make-styles.js","sources":["../../src/styles/make-styles.ts"],"sourcesContent":["import {\n
|
|
1
|
+
{"version":3,"file":"make-styles.js","sources":["../../src/styles/make-styles.ts"],"sourcesContent":["import * as React from \"react\"\nimport {\n createVoltStylesRecipe as runtimeCreateVoltStylesRecipe,\n createVoltResetStylesRecipe as runtimeCreateVoltResetStylesRecipe,\n type GriffelResetStyle,\n type GriffelStyle,\n} from \"@epilot/volt-ui-runtime\"\n\nimport { ensureCoreTokens } from \"../tokens/install\"\nimport { useVoltTargetDocument } from \"./document-context\"\n\n/**\n * The runtime's style hooks, with this package's token sheet attached.\n *\n * WHY THIS WRAPPER EXISTS, AND WHY IT IS NOT IN THE RUNTIME. Token installation used to sit inside\n * the renderer. It cannot any more, and not for a packaging reason: the runtime is SHARED, and\n * token values are exactly the thing that must diverge per component-package version — their\n * value-derived property namespace is what lets two versions declare on `:root` without colliding.\n * A shared module cannot own a per-version sheet. So the runtime owns placement (the recipe's\n * `install`, anchored) and this package owns content, and the two meet here.\n *\n * WHY COMMIT-PHASE, NOT RENDER-PHASE (WP2B2). Both calls used to run inline in this hook's body — a\n * side effect during React's render phase, which an abandoned render (Suspense, a superseded\n * transition) still executes even though nothing ever commits. `React.useInsertionEffect` is the\n * hook React documents for exactly this class of problem: it runs before any `useLayoutEffect` in\n * the tree (so token/atom sheets are present before any layout read), but its own timing relative to\n * a specific DOM mutation is NOT guaranteed either way, and it never runs during server rendering —\n * <https://react.dev/reference/react/useInsertionEffect>. `recipe.getClasses()` stays in the render\n * body: it is DOM-free preparation, not mathematically pure (no DOM access, no renderer acquisition\n * — see the recipe contract in `@epilot/volt-ui-runtime` — but Griffel's own definition/debug\n * bookkeeping still runs and still mutates shared, non-DOM state) and its output IS this render's\n * return value, so it cannot be deferred.\n *\n * NO DEPENDENCY ARRAY ON THE EFFECT. It runs after every commit, not only when the target Document\n * changes: a sheet removed between commits by anything external must be restored on the very next\n * committed render even with unchanged props, and both `ensureCoreTokens` and `recipe.install` are\n * cheap, idempotent checks when nothing is actually missing — narrowing this to `[doc]` would\n * silently defeat the WP2A restoration guarantee for the (far more common) case where `doc` never\n * changes at all. That restoration guarantee is specifically about the CORE and PALETTE token\n * sheets `ensureCoreTokens`/`ensurePaletteTokensFor` own — it does not extend to an arbitrary\n * Griffel atom bucket rule removed externally; the recipe's install memo only ever re-attempts\n * `insertCSSRules`, it does not detect or recover a bucket sheet element deleted out from under it.\n *\n * ONE RECIPE PER STYLE FACTORY, CREATED OUTSIDE RENDER. `createVoltStylesRecipe(styles)` runs once,\n * at `makeVoltStyles`'s own call time (module scope) — never inside the returned hook. A fresh\n * recipe per render would recompute Griffel's definition/debug bookkeeping for no reason and would\n * defeat the recipe's own per-renderer install memo (`@epilot/volt-ui-runtime`'s `WeakSet`-keyed\n * dedup), which only helps when the SAME recipe object is reused across renders.\n *\n * Cost per commit is not merely a `WeakSet.has`: `useVoltTargetDocument()` resolves the target\n * Document (a Context read, falling back to the ambient global), `ensureCoreTokens` does its own\n * per-Document `WeakMap` reconciliation check (WP2A), and only then does the recipe's `WeakSet.has`\n * (keyed on renderer object identity) decide whether `insertCSSRules` runs again. All three are\n * cheap, but none of them is skipped merely because the recipe was already installed once.\n */\n\nexport type VoltStyles<Slots extends string> = Record<Slots, GriffelStyle>\n\n/**\n * One class per slot, atoms deduped against whatever is already on the page.\n *\n * **The generic is over the object, not over the key union, and that is load-bearing.** Inferring a\n * type parameter from `Record<Slots, …>` against an object literal widens `Slots` to `string`, so\n * every slot name typechecks including ones that do not exist. OptionCard read `styles.card` in two\n * places with no `card` slot declared and rendered with no card styling at all; tsc was clean and\n * 322 tests passed. Only a pixel diff caught it.\n */\nexport function makeVoltStyles<S extends Record<string, GriffelStyle>>(\n styles: S\n): () => Record<keyof S & string, string> {\n const recipe = runtimeCreateVoltStylesRecipe(styles)\n return function useVoltStyles(): Record<keyof S & string, string> {\n const doc = useVoltTargetDocument()\n const classes = recipe.getClasses()\n React.useInsertionEffect(() => {\n if (!doc) return\n ensureCoreTokens(doc)\n recipe.install(doc)\n })\n return classes\n }\n}\n\n/**\n * One monolithic class for an element's invariant base, rather than atoms.\n *\n * Lands in Griffel's `r` bucket, which sorts before every atom bucket, so variant atoms override it\n * by source order without any specificity escalation. Exactly one reset class per element.\n */\nexport function makeVoltResetStyles(styles: GriffelResetStyle): () => string {\n const recipe = runtimeCreateVoltResetStylesRecipe(styles)\n return function useVoltResetStyles(): string {\n const doc = useVoltTargetDocument()\n const className = recipe.getClasses()\n React.useInsertionEffect(() => {\n if (!doc) return\n ensureCoreTokens(doc)\n recipe.install(doc)\n })\n return className\n }\n}\n"],"names":["makeVoltStyles","styles","recipe","runtimeCreateVoltStylesRecipe","doc","useVoltTargetDocument","classes","React","ensureCoreTokens","makeVoltResetStyles","runtimeCreateVoltResetStylesRecipe","className"],"mappings":";;;;AAmEO,SAASA,EACdC,GACwC;AACxC,QAAMC,IAASC,EAA8BF,CAAM;AACnD,SAAO,WAA2D;AAChE,UAAMG,IAAMC,EAAA,GACNC,IAAUJ,EAAO,WAAA;AACvB,WAAAK,EAAM,mBAAmB,MAAM;AAC7B,MAAKH,MACLI,EAAiBJ,CAAG,GACpBF,EAAO,QAAQE,CAAG;AAAA,IACpB,CAAC,GACME;AAAA,EACT;AACF;AAQO,SAASG,EAAoBR,GAAyC;AAC3E,QAAMC,IAASQ,EAAmCT,CAAM;AACxD,SAAO,WAAsC;AAC3C,UAAMG,IAAMC,EAAA,GACNM,IAAYT,EAAO,WAAA;AACzB,WAAAK,EAAM,mBAAmB,MAAM;AAC7B,MAAKH,MACLI,EAAiBJ,CAAG,GACpBF,EAAO,QAAQE,CAAG;AAAA,IACpB,CAAC,GACMO;AAAA,EACT;AACF;"}
|