@epilot/zenith-react 0.1.0-next.0 → 0.1.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/README.md +95 -15
- package/dist/components/appearance-boundary/appearance-boundary.js +32 -34
- package/dist/components/appearance-boundary/appearance-boundary.js.map +1 -1
- package/dist/components/badge/badge.js +1 -1
- package/dist/components/badge/badge.js.map +1 -1
- package/dist/components/breadcrumb/breadcrumb.js +10 -10
- package/dist/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/components/button/button.js +28 -28
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/button-group/button-group.js.map +1 -1
- package/dist/components/callout/callout.js +13 -13
- package/dist/components/callout/callout.js.map +1 -1
- package/dist/components/card/card.js.map +1 -1
- package/dist/components/checkbox/checkbox.js +13 -13
- package/dist/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/code-block/code-block.js +6 -6
- package/dist/components/code-block/code-block.js.map +1 -1
- package/dist/components/code-editor/code-editor.js +1 -1
- package/dist/components/code-editor/code-editor.js.map +1 -1
- package/dist/components/code-editor/indent.js.map +1 -1
- package/dist/components/command/command.js +7 -13
- package/dist/components/command/command.js.map +1 -1
- package/dist/components/data-table/data-table-body.js +120 -66
- package/dist/components/data-table/data-table-body.js.map +1 -1
- package/dist/components/data-table/data-table-column-header.js +7 -7
- package/dist/components/data-table/data-table-column-header.js.map +1 -1
- package/dist/components/data-table/data-table-column-order.js +277 -0
- package/dist/components/data-table/data-table-column-order.js.map +1 -0
- package/dist/components/data-table/data-table-content.js +72 -58
- package/dist/components/data-table/data-table-content.js.map +1 -1
- package/dist/components/data-table/data-table-context.js +8 -4
- package/dist/components/data-table/data-table-context.js.map +1 -1
- package/dist/components/data-table/data-table-footer.js +31 -0
- package/dist/components/data-table/data-table-footer.js.map +1 -0
- package/dist/components/data-table/data-table-header-draggable.js +151 -0
- package/dist/components/data-table/data-table-header-draggable.js.map +1 -0
- package/dist/components/data-table/data-table-header.js +130 -57
- package/dist/components/data-table/data-table-header.js.map +1 -1
- package/dist/components/data-table/data-table-resize-handle.js +137 -0
- package/dist/components/data-table/data-table-resize-handle.js.map +1 -0
- package/dist/components/data-table/data-table.js +184 -156
- package/dist/components/data-table/data-table.js.map +1 -1
- package/dist/components/data-table/hooks/use-data-table-virtualizer.js +9 -0
- package/dist/components/data-table/hooks/use-data-table-virtualizer.js.map +1 -0
- package/dist/components/date-range-picker/date-range-picker.js +197 -195
- package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/date-time-picker/calendar.js +29 -29
- package/dist/components/date-time-picker/calendar.js.map +1 -1
- package/dist/components/date-time-picker/time-picker.js +55 -55
- package/dist/components/date-time-picker/time-picker.js.map +1 -1
- package/dist/components/density-provider/density-provider.js.map +1 -1
- package/dist/components/dialog/dialog.js +1 -1
- package/dist/components/dialog/dialog.js.map +1 -1
- package/dist/components/drawer/drawer.js +5 -5
- package/dist/components/drawer/drawer.js.map +1 -1
- package/dist/components/dropdown-menu/dropdown-menu.js +36 -36
- package/dist/components/dropdown-menu/dropdown-menu.js.map +1 -1
- package/dist/components/field/field-combobox.js +4 -4
- package/dist/components/field/field-combobox.js.map +1 -1
- package/dist/components/field/field.js +40 -40
- package/dist/components/field/field.js.map +1 -1
- package/dist/components/label/label.js +0 -28
- package/dist/components/label/label.js.map +1 -1
- package/dist/components/list/list.js +42 -52
- package/dist/components/list/list.js.map +1 -1
- package/dist/components/option-card/option-card.js +27 -25
- package/dist/components/option-card/option-card.js.map +1 -1
- package/dist/components/pill/pill.js +9 -9
- package/dist/components/pill/pill.js.map +1 -1
- package/dist/components/radio/radio.js +14 -14
- package/dist/components/radio/radio.js.map +1 -1
- package/dist/components/scroll-area/scroll-area.js +9 -9
- package/dist/components/scroll-area/scroll-area.js.map +1 -1
- package/dist/components/segmented-control/segmented-control.js +1 -1
- package/dist/components/segmented-control/segmented-control.js.map +1 -1
- package/dist/components/select/select.js +11 -11
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/separator/separator.js.map +1 -1
- package/dist/components/skeleton/skeleton.js.map +1 -1
- package/dist/components/slot/compose-as-child.js.map +1 -1
- package/dist/components/spinner/spinner.js.map +1 -1
- package/dist/components/switch/switch.js +11 -11
- package/dist/components/switch/switch.js.map +1 -1
- package/dist/components/table/table-pagination.js +1 -1
- package/dist/components/table/table-pagination.js.map +1 -1
- package/dist/components/table/table.js +15 -15
- package/dist/components/table/table.js.map +1 -1
- package/dist/components/text/text.js +10 -1
- package/dist/components/text/text.js.map +1 -1
- package/dist/components/toast/toast.js +30 -32
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/components/toggle/toggle.js +20 -20
- package/dist/components/toggle/toggle.js.map +1 -1
- package/dist/delivery/index.d.ts +10 -44
- package/dist/delivery/index.js +5 -9
- package/dist/index.d.ts +1994 -2272
- package/dist/index.js +133 -121
- package/dist/index.js.map +1 -1
- package/dist/lib/clear-button.js.map +1 -1
- package/dist/lib/code-highlight.js.map +1 -1
- package/dist/lib/code-tokens.js.map +1 -1
- package/dist/lib/pagination.js.map +1 -1
- package/dist/packages/tokens/dist/delivery/index.js +18 -48
- package/dist/packages/tokens/dist/delivery/index.js.map +1 -1
- package/dist/packages/tokens/dist/generated/core.generated.js +18 -0
- package/dist/packages/tokens/dist/generated/core.generated.js.map +1 -0
- package/dist/packages/tokens/dist/generated/palette.generated.js +5 -5
- package/dist/packages/tokens/dist/generated/palette.generated.js.map +1 -1
- package/dist/packages/tokens/dist/install.js +9 -9
- package/dist/packages/tokens/dist/install.js.map +1 -1
- package/dist/styles/document-context.js.map +1 -1
- package/dist/styles/make-styles.js.map +1 -1
- package/dist/tokens/core.meta.generated.js +2 -2
- package/dist/tokens/core.meta.generated.js.map +1 -1
- package/dist/tokens/index.d.ts +1029 -1104
- package/dist/tokens/index.js +1031 -1106
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/palette.generated.js +2 -2
- package/dist/tokens/palette.generated.js.map +1 -1
- package/dist/tokens/use-palette-tokens.js.map +1 -1
- package/dist/tokens.json +605 -755
- package/dist/vendor/.bun/@dnd-kit_core@6.3.1_6f4b9a1cfb20c0ae/vendor/@dnd-kit/core/dist/core.esm.js +385 -340
- package/dist/vendor/.bun/@dnd-kit_core@6.3.1_6f4b9a1cfb20c0ae/vendor/@dnd-kit/core/dist/core.esm.js.map +1 -1
- package/dist/vendor/.bun/@dnd-kit_sortable@10.0.0_1d291640e1250bbe/vendor/@dnd-kit/sortable/dist/sortable.esm.js +344 -229
- package/dist/vendor/.bun/@dnd-kit_sortable@10.0.0_1d291640e1250bbe/vendor/@dnd-kit/sortable/dist/sortable.esm.js.map +1 -1
- package/dist/vendor/.bun/@dnd-kit_utilities@3.2.2_62547eec5a2188e3/vendor/@dnd-kit/utilities/dist/utilities.esm.js +1 -1
- package/dist/vendor/.bun/@tanstack_react-virtual@3.11.2_6f4b9a1cfb20c0ae/vendor/@tanstack/react-virtual/dist/esm/index.js +36 -0
- package/dist/vendor/.bun/@tanstack_react-virtual@3.11.2_6f4b9a1cfb20c0ae/vendor/@tanstack/react-virtual/dist/esm/index.js.map +1 -0
- package/dist/vendor/.bun/@tanstack_virtual-core@3.11.2/vendor/@tanstack/virtual-core/dist/esm/index.js +450 -0
- package/dist/vendor/.bun/@tanstack_virtual-core@3.11.2/vendor/@tanstack/virtual-core/dist/esm/index.js.map +1 -0
- package/dist/vendor/.bun/@tanstack_virtual-core@3.11.2/vendor/@tanstack/virtual-core/dist/esm/utils.js +50 -0
- package/dist/vendor/.bun/@tanstack_virtual-core@3.11.2/vendor/@tanstack/virtual-core/dist/esm/utils.js.map +1 -0
- package/package.json +5 -4
- package/scripts/migration-diagnostics-core.mjs +19 -90
- package/scripts/migration-diagnostics.mjs +1 -16
- package/scripts/migration-sweep.mjs +2 -12
- package/ADOPTING.md +0 -73
- package/dist/packages/tokens/dist/delivery/internal.js +0 -181
- package/dist/packages/tokens/dist/delivery/internal.js.map +0 -1
- package/dist/packages/tokens/dist/generated/core.meta.generated.js +0 -10
- package/dist/packages/tokens/dist/generated/core.meta.generated.js.map +0 -1
- package/dist/token-assets/core/5cd4072decf5df2a664f0b1d5f2ec250a3309101ded3056c1f87c8bbe3738d50.css +0 -22
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
1
|
+
import { jsx as t, jsxs as k } from "react/jsx-runtime";
|
|
2
2
|
import * as a from "react";
|
|
3
3
|
import { Root as x, Thumb as y } from "../../vendor/.bun/@radix-ui_react-switch@1.2.6_2b23df507bdda662/vendor/@radix-ui/react-switch/dist/index.js";
|
|
4
4
|
import { mergeClasses as g, SLOT_ATTR as n, shorthands as r } from "@epilot/zenith-runtime/v1";
|
|
5
5
|
import { makeZenithStyles as b } from "../../styles/make-styles.js";
|
|
6
|
-
import { errorA3 as C,
|
|
7
|
-
const
|
|
6
|
+
import { errorA3 as C, errorSolid as v, errorA8 as u, grayA3 as S, accentSolid as T, grayA8 as m, focusRing as R, errorA11 as z, errorContrast as A, accentA11 as D, grayContrast as I } from "../../tokens/index.js";
|
|
7
|
+
const V = a.forwardRef(
|
|
8
8
|
function(i, e) {
|
|
9
9
|
const o = w();
|
|
10
10
|
return /* @__PURE__ */ t(
|
|
@@ -22,7 +22,7 @@ const I = a.forwardRef(
|
|
|
22
22
|
}
|
|
23
23
|
);
|
|
24
24
|
}
|
|
25
|
-
),
|
|
25
|
+
), E = a.forwardRef(
|
|
26
26
|
function(i, e) {
|
|
27
27
|
const o = w();
|
|
28
28
|
return /* @__PURE__ */ t(
|
|
@@ -177,15 +177,15 @@ const I = a.forwardRef(
|
|
|
177
177
|
}
|
|
178
178
|
},
|
|
179
179
|
default: {
|
|
180
|
-
backgroundColor:
|
|
180
|
+
backgroundColor: I,
|
|
181
181
|
color: m,
|
|
182
182
|
"&[data-state='checked']": { color: D },
|
|
183
183
|
"&[data-state='unchecked']": { color: m }
|
|
184
184
|
},
|
|
185
185
|
destructive: {
|
|
186
|
-
backgroundColor:
|
|
186
|
+
backgroundColor: A,
|
|
187
187
|
color: u,
|
|
188
|
-
"&[data-state='checked']": { color:
|
|
188
|
+
"&[data-state='checked']": { color: z },
|
|
189
189
|
"&[data-state='unchecked']": { color: u }
|
|
190
190
|
},
|
|
191
191
|
sm: {
|
|
@@ -215,12 +215,12 @@ const I = a.forwardRef(
|
|
|
215
215
|
className: o,
|
|
216
216
|
showThumbIcon: d = !1,
|
|
217
217
|
...s
|
|
218
|
-
},
|
|
218
|
+
}, f) {
|
|
219
219
|
const l = H(), h = _(), p = i === "primary" ? "default" : i;
|
|
220
220
|
return /* @__PURE__ */ t(
|
|
221
221
|
x,
|
|
222
222
|
{
|
|
223
|
-
ref:
|
|
223
|
+
ref: f,
|
|
224
224
|
"data-slot": "switch",
|
|
225
225
|
[n]: "switch",
|
|
226
226
|
className: g(
|
|
@@ -230,7 +230,7 @@ const I = a.forwardRef(
|
|
|
230
230
|
o
|
|
231
231
|
),
|
|
232
232
|
...s,
|
|
233
|
-
children: /* @__PURE__ */
|
|
233
|
+
children: /* @__PURE__ */ k(
|
|
234
234
|
y,
|
|
235
235
|
{
|
|
236
236
|
"data-slot": "switch-thumb",
|
|
@@ -241,8 +241,8 @@ const I = a.forwardRef(
|
|
|
241
241
|
h[e]
|
|
242
242
|
),
|
|
243
243
|
children: [
|
|
244
|
-
d && !s.disabled && /* @__PURE__ */ t(I, {}),
|
|
245
244
|
d && !s.disabled && /* @__PURE__ */ t(V, {}),
|
|
245
|
+
d && !s.disabled && /* @__PURE__ */ t(E, {}),
|
|
246
246
|
d && s.disabled && /* @__PURE__ */ t(N, {})
|
|
247
247
|
]
|
|
248
248
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.js","sources":["../../../src/components/switch/switch.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst ThumbIconChecked = React.forwardRef<SVGSVGElement>(\n function ThumbIconChecked(_props, ref) {\n const styles = useThumbIconStyles()\n\n return (\n <svg\n ref={ref}\n data-slot=\"switch-thumb-icon-checked\"\n {...{ [SLOT_ATTR]: \"switch-thumb-icon-checked\" }}\n role=\"presentation\"\n className={styles.checked}\n viewBox=\"0 0 1 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect width=\"1\" height=\"6\" fill=\"currentColor\" />\n </svg>\n )\n }\n)\n\nconst ThumbIconUnchecked = React.forwardRef<SVGSVGElement>(\n function ThumbIconUnchecked(_props, ref) {\n const styles = useThumbIconStyles()\n\n return (\n <svg\n ref={ref}\n data-slot=\"switch-thumb-icon-unchecked\"\n {...{ [SLOT_ATTR]: \"switch-thumb-icon-unchecked\" }}\n role=\"presentation\"\n className={styles.unchecked}\n viewBox=\"0 0 4 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect\n x=\"0.5\"\n y=\"0.5\"\n width=\"3\"\n height=\"5\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n />\n </svg>\n )\n }\n)\n\nconst ThumbIconDisabled = React.forwardRef<SVGSVGElement>(\n function ThumbIconDisabled(_props, ref) {\n const styles = useThumbIconStyles()\n\n return (\n <svg\n ref={ref}\n data-slot=\"switch-thumb-icon-disabled\"\n {...{ [SLOT_ATTR]: \"switch-thumb-icon-disabled\" }}\n className={styles.disabled}\n viewBox=\"0 0 4 5\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M0 5V1.875H0.666667V1.25C0.666667 0.90625 0.797223 0.611979 1.05833 0.367188C1.31944 0.122396 1.63333 0 2 0C2.36667 0 2.68056 0.122396 2.94167 0.367188C3.20278 0.611979 3.33333 0.90625 3.33333 1.25V1.875H4V5H0ZM1.33333 1.875H2.66667V1.25C2.66667 1.07292 2.60278 0.924479 2.475 0.804687C2.34722 0.684896 2.18889 0.625 2 0.625C1.81111 0.625 1.65278 0.684896 1.525 0.804687C1.39722 0.924479 1.33333 1.07292 1.33333 1.25V1.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n }\n)\n\nconst useThumbIconStyles = makeZenithStyles({\n checked: {\n display: \"none\",\n position: \"absolute\",\n pointerEvents: \"none\",\n ...shorthands.inset(0),\n color: \"currentColor\",\n ...shorthands.margin(\"auto\"),\n },\n unchecked: {\n display: \"none\",\n position: \"absolute\",\n pointerEvents: \"none\",\n ...shorthands.inset(0),\n color: \"currentColor\",\n ...shorthands.margin(\"auto\"),\n },\n disabled: {\n display: \"inline-block\",\n position: \"absolute\",\n pointerEvents: \"none\",\n ...shorthands.inset(0),\n color: \"currentColor\",\n ...shorthands.margin(\"auto\"),\n },\n})\n\nconst useRootStyles = makeZenithStyles({\n root: {\n boxSizing: \"border-box\",\n display: \"inline-flex\",\n alignItems: \"center\",\n flexShrink: 0,\n cursor: \"pointer\",\n borderRadius: \"9999px\",\n ...shorthands.border(\"1px\", \"solid\", \"transparent\"),\n boxShadow: \"0 1px 2px 0 #0000000d\",\n transitionProperty: \"all\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n transitionDuration: \"150ms\",\n \"@media (prefers-reduced-motion: reduce)\": {\n transitionDuration: \"0.01ms\",\n },\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n outlineColor: tokens.semFocusRing,\n },\n \":disabled, &[data-disabled]\": {\n pointerEvents: \"none\",\n opacity: 0.5,\n },\n },\n default: {\n color: tokens.grayA8,\n \"&[data-state='checked']\": { backgroundColor: tokens.semAccentSolid },\n \"&[data-state='unchecked']\": { backgroundColor: tokens.grayA3 },\n },\n destructive: {\n color: tokens.errorA8,\n \"&[data-state='checked']\": { backgroundColor: tokens.semErrorSolid },\n \"&[data-state='unchecked']\": { backgroundColor: tokens.errorA3 },\n },\n sm: {\n width: \"1.625rem\",\n height: \"1rem\",\n \"& svg\": { width: \"0.25rem\", height: \"0.375rem\" },\n },\n base: {\n width: \"2.125rem\",\n height: \"1.25rem\",\n \"& svg\": { width: \"0.4375rem\", height: \"0.5rem\" },\n },\n lg: {\n width: \"2.625rem\",\n height: \"1.5rem\",\n \"& svg\": { width: \"0.5rem\", height: \"0.625rem\" },\n },\n})\n\nconst useThumbStyles = makeZenithStyles({\n thumb: {\n position: \"relative\",\n display: \"block\",\n pointerEvents: \"none\",\n borderRadius: \"9999px\",\n boxShadow: \"0 1px 2px 0 #0000000d\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n transitionDuration: \"150ms\",\n \"@media (prefers-reduced-motion: reduce)\": {\n transitionDuration: \"0.01ms\",\n },\n \"&[data-state='checked']\": {\n transform: \"translateX(calc(100% - 1px))\",\n },\n \"&[data-state='unchecked']\": {\n transform: \"translateX(1px)\",\n },\n \"&[data-state='checked'] [data-zenith-slot='switch-thumb-icon-checked']\": {\n display: \"inline-block\",\n },\n \"&[data-state='unchecked'] [data-zenith-slot='switch-thumb-icon-unchecked']\":\n {\n display: \"inline-block\",\n },\n },\n default: {\n backgroundColor: tokens.grayContrast,\n color: tokens.grayA8,\n \"&[data-state='checked']\": { color: tokens.accentA11 },\n \"&[data-state='unchecked']\": { color: tokens.grayA8 },\n },\n destructive: {\n backgroundColor: tokens.errorContrast,\n color: tokens.errorA8,\n \"&[data-state='checked']\": { color: tokens.errorA11 },\n \"&[data-state='unchecked']\": { color: tokens.errorA8 },\n },\n sm: {\n width: \"0.75rem\",\n height: \"0.75rem\",\n \"& svg[data-zenith-slot='switch-thumb-icon-disabled']\": {\n width: \"0.25rem\",\n },\n },\n base: {\n width: \"1rem\",\n height: \"1rem\",\n \"& svg[data-zenith-slot='switch-thumb-icon-disabled']\": {\n width: \"0.375rem\",\n },\n },\n lg: {\n width: \"1.25rem\",\n height: \"1.25rem\",\n \"& svg[data-zenith-slot='switch-thumb-icon-disabled']\": {\n width: \"0.4375rem\",\n },\n },\n})\n\n/**\n * `primary` is a deprecated alias of `default`, carried because v1 has it and real consumers still\n * pass it — entity-sidepanel's SettingsControls does. v1's own comment marks it deprecated and its\n * styles are byte-identical to `default`, so it is mapped rather than duplicated.\n *\n * @remarks `primary` is deprecated; use `default`.\n */\nexport type SwitchVariant = \"default\" | \"destructive\" | \"primary\"\nexport type SwitchSize = \"sm\" | \"base\" | \"lg\"\n\nexport type SwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root> & {\n /**\n * `default` or `destructive`.\n *\n * `primary` is a **deprecated alias of `default`** with byte-identical styles,\n * kept because v1 had it and consumers still pass it. Choosing it changes\n * nothing; use `default`.\n *\n * @default \"default\"\n */\n variant?: SwitchVariant\n /** @default \"base\" */\n size?: SwitchSize\n showThumbIcon?: boolean\n}\n\nexport const Switch = React.forwardRef<\n React.ComponentRef<typeof SwitchPrimitive.Root>,\n SwitchProps\n>(function Switch(\n {\n variant = \"default\",\n size = \"base\",\n className,\n showThumbIcon = false,\n ...props\n },\n ref\n) {\n const rootStyles = useRootStyles()\n const thumbStyles = useThumbStyles()\n // See SwitchVariant: `primary` is v1's deprecated alias for `default`, same styles.\n const variantKey = variant === \"primary\" ? \"default\" : variant\n\n return (\n <SwitchPrimitive.Root\n ref={ref}\n data-slot=\"switch\"\n {...{ [SLOT_ATTR]: \"switch\" }}\n className={mergeClasses(\n rootStyles.root,\n rootStyles[variantKey],\n rootStyles[size],\n className\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n {...{ [SLOT_ATTR]: \"switch-thumb\" }}\n className={mergeClasses(\n thumbStyles.thumb,\n thumbStyles[variantKey],\n thumbStyles[size]\n )}\n >\n {showThumbIcon && !props.disabled && <ThumbIconChecked />}\n {showThumbIcon && !props.disabled && <ThumbIconUnchecked />}\n {showThumbIcon && props.disabled && <ThumbIconDisabled />}\n </SwitchPrimitive.Thumb>\n </SwitchPrimitive.Root>\n )\n})\n"],"names":["ThumbIconChecked","React","_props","ref","styles","useThumbIconStyles","jsx","SLOT_ATTR","ThumbIconUnchecked","ThumbIconDisabled","makeZenithStyles","shorthands","useRootStyles","tokens.semFocusRing","tokens.grayA8","tokens.semAccentSolid","tokens.grayA3","tokens.errorA8","tokens.semErrorSolid","tokens.errorA3","useThumbStyles","tokens.grayContrast","tokens.accentA11","tokens.errorContrast","tokens.errorA11","Switch","variant","size","className","showThumbIcon","props","rootStyles","thumbStyles","variantKey","SwitchPrimitive.Root","mergeClasses","jsxs","SwitchPrimitive.Thumb"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"switch.js","sources":["../../../src/components/switch/switch.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst ThumbIconChecked = React.forwardRef<SVGSVGElement>(\n function ThumbIconChecked(_props, ref) {\n const styles = useThumbIconStyles()\n\n return (\n <svg\n ref={ref}\n data-slot=\"switch-thumb-icon-checked\"\n {...{ [SLOT_ATTR]: \"switch-thumb-icon-checked\" }}\n role=\"presentation\"\n className={styles.checked}\n viewBox=\"0 0 1 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect width=\"1\" height=\"6\" fill=\"currentColor\" />\n </svg>\n )\n }\n)\n\nconst ThumbIconUnchecked = React.forwardRef<SVGSVGElement>(\n function ThumbIconUnchecked(_props, ref) {\n const styles = useThumbIconStyles()\n\n return (\n <svg\n ref={ref}\n data-slot=\"switch-thumb-icon-unchecked\"\n {...{ [SLOT_ATTR]: \"switch-thumb-icon-unchecked\" }}\n role=\"presentation\"\n className={styles.unchecked}\n viewBox=\"0 0 4 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <rect\n x=\"0.5\"\n y=\"0.5\"\n width=\"3\"\n height=\"5\"\n rx=\"1.5\"\n stroke=\"currentColor\"\n />\n </svg>\n )\n }\n)\n\nconst ThumbIconDisabled = React.forwardRef<SVGSVGElement>(\n function ThumbIconDisabled(_props, ref) {\n const styles = useThumbIconStyles()\n\n return (\n <svg\n ref={ref}\n data-slot=\"switch-thumb-icon-disabled\"\n {...{ [SLOT_ATTR]: \"switch-thumb-icon-disabled\" }}\n className={styles.disabled}\n viewBox=\"0 0 4 5\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M0 5V1.875H0.666667V1.25C0.666667 0.90625 0.797223 0.611979 1.05833 0.367188C1.31944 0.122396 1.63333 0 2 0C2.36667 0 2.68056 0.122396 2.94167 0.367188C3.20278 0.611979 3.33333 0.90625 3.33333 1.25V1.875H4V5H0ZM1.33333 1.875H2.66667V1.25C2.66667 1.07292 2.60278 0.924479 2.475 0.804687C2.34722 0.684896 2.18889 0.625 2 0.625C1.81111 0.625 1.65278 0.684896 1.525 0.804687C1.39722 0.924479 1.33333 1.07292 1.33333 1.25V1.875Z\"\n fill=\"currentColor\"\n />\n </svg>\n )\n }\n)\n\nconst useThumbIconStyles = makeZenithStyles({\n checked: {\n display: \"none\",\n position: \"absolute\",\n pointerEvents: \"none\",\n ...shorthands.inset(0),\n color: \"currentColor\",\n ...shorthands.margin(\"auto\"),\n },\n unchecked: {\n display: \"none\",\n position: \"absolute\",\n pointerEvents: \"none\",\n ...shorthands.inset(0),\n color: \"currentColor\",\n ...shorthands.margin(\"auto\"),\n },\n disabled: {\n display: \"inline-block\",\n position: \"absolute\",\n pointerEvents: \"none\",\n ...shorthands.inset(0),\n color: \"currentColor\",\n ...shorthands.margin(\"auto\"),\n },\n})\n\nconst useRootStyles = makeZenithStyles({\n root: {\n boxSizing: \"border-box\",\n display: \"inline-flex\",\n alignItems: \"center\",\n flexShrink: 0,\n cursor: \"pointer\",\n borderRadius: \"9999px\",\n ...shorthands.border(\"1px\", \"solid\", \"transparent\"),\n boxShadow: \"0 1px 2px 0 #0000000d\",\n transitionProperty: \"all\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n transitionDuration: \"150ms\",\n \"@media (prefers-reduced-motion: reduce)\": {\n transitionDuration: \"0.01ms\",\n },\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineOffset: \"2px\",\n outlineColor: tokens.focusRing,\n },\n \":disabled, &[data-disabled]\": {\n pointerEvents: \"none\",\n opacity: 0.5,\n },\n },\n default: {\n color: tokens.grayA8,\n \"&[data-state='checked']\": { backgroundColor: tokens.accentSolid },\n \"&[data-state='unchecked']\": { backgroundColor: tokens.grayA3 },\n },\n destructive: {\n color: tokens.errorA8,\n \"&[data-state='checked']\": { backgroundColor: tokens.errorSolid },\n \"&[data-state='unchecked']\": { backgroundColor: tokens.errorA3 },\n },\n sm: {\n width: \"1.625rem\",\n height: \"1rem\",\n \"& svg\": { width: \"0.25rem\", height: \"0.375rem\" },\n },\n base: {\n width: \"2.125rem\",\n height: \"1.25rem\",\n \"& svg\": { width: \"0.4375rem\", height: \"0.5rem\" },\n },\n lg: {\n width: \"2.625rem\",\n height: \"1.5rem\",\n \"& svg\": { width: \"0.5rem\", height: \"0.625rem\" },\n },\n})\n\nconst useThumbStyles = makeZenithStyles({\n thumb: {\n position: \"relative\",\n display: \"block\",\n pointerEvents: \"none\",\n borderRadius: \"9999px\",\n boxShadow: \"0 1px 2px 0 #0000000d\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n transitionDuration: \"150ms\",\n \"@media (prefers-reduced-motion: reduce)\": {\n transitionDuration: \"0.01ms\",\n },\n \"&[data-state='checked']\": {\n transform: \"translateX(calc(100% - 1px))\",\n },\n \"&[data-state='unchecked']\": {\n transform: \"translateX(1px)\",\n },\n \"&[data-state='checked'] [data-zenith-slot='switch-thumb-icon-checked']\": {\n display: \"inline-block\",\n },\n \"&[data-state='unchecked'] [data-zenith-slot='switch-thumb-icon-unchecked']\":\n {\n display: \"inline-block\",\n },\n },\n default: {\n backgroundColor: tokens.grayContrast,\n color: tokens.grayA8,\n \"&[data-state='checked']\": { color: tokens.accentA11 },\n \"&[data-state='unchecked']\": { color: tokens.grayA8 },\n },\n destructive: {\n backgroundColor: tokens.errorContrast,\n color: tokens.errorA8,\n \"&[data-state='checked']\": { color: tokens.errorA11 },\n \"&[data-state='unchecked']\": { color: tokens.errorA8 },\n },\n sm: {\n width: \"0.75rem\",\n height: \"0.75rem\",\n \"& svg[data-zenith-slot='switch-thumb-icon-disabled']\": {\n width: \"0.25rem\",\n },\n },\n base: {\n width: \"1rem\",\n height: \"1rem\",\n \"& svg[data-zenith-slot='switch-thumb-icon-disabled']\": {\n width: \"0.375rem\",\n },\n },\n lg: {\n width: \"1.25rem\",\n height: \"1.25rem\",\n \"& svg[data-zenith-slot='switch-thumb-icon-disabled']\": {\n width: \"0.4375rem\",\n },\n },\n})\n\n/**\n * `primary` is a deprecated alias of `default`, carried because v1 has it and real consumers still\n * pass it — entity-sidepanel's SettingsControls does. v1's own comment marks it deprecated and its\n * styles are byte-identical to `default`, so it is mapped rather than duplicated.\n *\n * @remarks `primary` is deprecated; use `default`.\n */\nexport type SwitchVariant = \"default\" | \"destructive\" | \"primary\"\nexport type SwitchSize = \"sm\" | \"base\" | \"lg\"\n\nexport type SwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root> & {\n /**\n * `default` or `destructive`. `primary` is a **deprecated alias of `default`** with byte-\n * identical styles, kept because v1 had it and consumers still pass it. Choosing it changes\n * nothing; use `default`.\n */\n variant?: SwitchVariant\n /** @default \"base\" */\n size?: SwitchSize\n showThumbIcon?: boolean\n}\n\nexport const Switch = React.forwardRef<\n React.ComponentRef<typeof SwitchPrimitive.Root>,\n SwitchProps\n>(function Switch(\n {\n variant = \"default\",\n size = \"base\",\n className,\n showThumbIcon = false,\n ...props\n },\n ref\n) {\n const rootStyles = useRootStyles()\n const thumbStyles = useThumbStyles()\n // See SwitchVariant: `primary` is v1's deprecated alias for `default`, same styles.\n const variantKey = variant === \"primary\" ? \"default\" : variant\n\n return (\n <SwitchPrimitive.Root\n ref={ref}\n data-slot=\"switch\"\n {...{ [SLOT_ATTR]: \"switch\" }}\n className={mergeClasses(\n rootStyles.root,\n rootStyles[variantKey],\n rootStyles[size],\n className\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n {...{ [SLOT_ATTR]: \"switch-thumb\" }}\n className={mergeClasses(\n thumbStyles.thumb,\n thumbStyles[variantKey],\n thumbStyles[size]\n )}\n >\n {showThumbIcon && !props.disabled && <ThumbIconChecked />}\n {showThumbIcon && !props.disabled && <ThumbIconUnchecked />}\n {showThumbIcon && props.disabled && <ThumbIconDisabled />}\n </SwitchPrimitive.Thumb>\n </SwitchPrimitive.Root>\n )\n})\n"],"names":["ThumbIconChecked","React","_props","ref","styles","useThumbIconStyles","jsx","SLOT_ATTR","ThumbIconUnchecked","ThumbIconDisabled","makeZenithStyles","shorthands","useRootStyles","tokens.focusRing","tokens.grayA8","tokens.accentSolid","tokens.grayA3","tokens.errorA8","tokens.errorSolid","tokens.errorA3","useThumbStyles","tokens.grayContrast","tokens.accentA11","tokens.errorContrast","tokens.errorA11","Switch","variant","size","className","showThumbIcon","props","rootStyles","thumbStyles","variantKey","SwitchPrimitive.Root","mergeClasses","jsxs","SwitchPrimitive.Thumb"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import * as U from "react";
|
|
|
3
3
|
import { Root as X, Trigger as Z, Value as J, Icon as q, Portal as K, Content as Q, Viewport as Y, Group as ee, Label as te, Item as oe, ItemIndicator as ne, ItemText as re } from "../../vendor/.bun/@radix-ui_react-select@2.2.6_2b23df507bdda662/vendor/@radix-ui/react-select/dist/index.js";
|
|
4
4
|
import { mergeClasses as ie, SLOT_ATTR as ae, shorthands as i } from "@epilot/zenith-runtime/v1";
|
|
5
5
|
import { makeZenithStyles as se } from "../../styles/make-styles.js";
|
|
6
|
-
import { accentA3 as z, leadingSm as m, textSm as u, grayA11 as k, fontWeightSemibold as ce, leadingXs as le, textXs as ge,
|
|
6
|
+
import { accentA3 as z, leadingSm as m, textSm as u, grayA11 as k, fontWeightSemibold as ce, leadingXs as le, textXs as ge, body as de, accent8 as pe, grayA4 as x, grayA3 as g, spacingElement1 as he, spacingGroup1 as R, accent11 as C, trackingNormal as me, accentA8 as ue, spacingElement2 as ve, radiusMd as fe, grayA6 as we, radiusLg as W, spacingElement3 as ke } from "../../tokens/index.js";
|
|
7
7
|
import { useAppearanceAttributes as xe } from "../appearance-boundary/appearance-boundary.js";
|
|
8
8
|
import { useDensity as Ce } from "../density-provider/density-provider.js";
|
|
9
9
|
import { calculatePagination as Pe, getPageNumbers as ye, clampPage as Ie } from "../../lib/pagination.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-pagination.js","sources":["../../../src/components/table/table-pagination.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { SVGProps, ComponentProps } from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { useAppearanceAttributes } from \"../appearance-boundary/appearance-boundary\"\nimport { useDensity } from \"../density-provider/density-provider\"\nimport {\n calculatePagination,\n clampPage,\n getPageNumbers,\n} from \"../../lib/pagination\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"../tooltip/tooltip\"\nimport { Button } from \"../button/button\"\n\n// Navigation icons\nconst IconFirstPage = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"M6 6v12\" />\n <path d=\"m15 18-6-6 6-6\" />\n </svg>\n)\n\nconst IconChevronLeft = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"m15 18-6-6 6-6\" />\n </svg>\n)\n\nconst IconChevronRight = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n)\n\nconst IconLastPage = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"m9 18 6-6-6-6\" />\n <path d=\"M18 6v12\" />\n </svg>\n)\n\n// Select icons\nconst ChevronDownIcon = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n)\n\nconst CheckIcon = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"M20 6 9 17l-5-5\" />\n </svg>\n)\n\nconst DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100]\n\nconst useStyles = makeZenithStyles({\n root: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: tokens.spacingGroup1,\n ...shorthands.paddingBlock(tokens.spacingElement3),\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n },\n left: {\n display: \"flex\",\n alignItems: \"center\",\n gap: tokens.spacingElement2,\n },\n navButton: {\n backgroundColor: tokens.grayA3,\n color: tokens.accent11,\n \":hover\": {\n backgroundColor: tokens.grayA4,\n },\n \":disabled\": {\n backgroundColor: tokens.grayA3,\n color: tokens.accentA8,\n pointerEvents: \"none\",\n },\n },\n pageButtonActive: {\n pointerEvents: \"none\",\n },\n pageButtonInactive: {\n backgroundColor: \"transparent\",\n color: tokens.accent11,\n \":hover\": {\n backgroundColor: tokens.grayA3,\n },\n \":active\": {\n backgroundColor: tokens.grayA4,\n },\n },\n ellipsisButton: {\n letterSpacing: tokens.trackingNormal,\n backgroundColor: \"transparent\",\n color: tokens.accent11,\n \":hover\": {\n backgroundColor: tokens.grayA3,\n },\n },\n right: {\n display: \"flex\",\n alignItems: \"center\",\n gap: tokens.spacingGroup1,\n paddingRight: \"0.125rem\",\n },\n range: {\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n color: tokens.grayA11,\n fontVariantNumeric: \"tabular-nums\",\n },\n selectTrigger: {\n display: \"flex\",\n height: \"2rem\",\n width: \"auto\",\n minWidth: \"4rem\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: tokens.spacingElement1,\n ...shorthands.borderRadius(tokens.radiusLg),\n backgroundColor: tokens.grayA3,\n ...shorthands.paddingInline(\"0.75rem\"),\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n cursor: \"pointer\",\n ...shorthands.borderWidth(0),\n \":hover\": {\n backgroundColor: tokens.grayA4,\n },\n \":focus\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineColor: tokens.accent8,\n outlineOffset: \"2px\",\n },\n \":disabled\": {\n cursor: \"not-allowed\",\n opacity: 0.5,\n },\n },\n selectIcon: {\n display: \"flex\",\n alignItems: \"center\",\n color: tokens.grayA11,\n },\n selectContent: {\n position: \"relative\",\n zIndex: 50,\n ...shorthands.overflow(\"hidden\"),\n ...shorthands.borderRadius(tokens.radiusLg),\n ...shorthands.border(\"1px\", \"solid\", tokens.grayA6),\n backgroundColor: tokens.semBody,\n boxShadow:\n \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)\",\n },\n selectViewport: {\n ...shorthands.padding(\"0.25rem\"),\n },\n selectLabel: {\n ...shorthands.padding(\"0.375rem\", \"0.5rem\"),\n fontSize: tokens.textXs,\n lineHeight: tokens.leadingXs,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.grayA11,\n },\n selectItem: {\n position: \"relative\",\n display: \"flex\",\n cursor: \"pointer\",\n userSelect: \"none\",\n alignItems: \"center\",\n ...shorthands.borderRadius(tokens.radiusMd),\n ...shorthands.padding(\"0.375rem\", \"0.5rem\", \"0.375rem\", \"2rem\"),\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n outlineStyle: \"none\",\n \":focus\": {\n backgroundColor: tokens.accentA3,\n },\n \"&[data-state='checked']\": {\n backgroundColor: tokens.accentA3,\n },\n },\n selectItemIndicator: {\n position: \"absolute\",\n left: \"0.5rem\",\n display: \"flex\",\n width: \"1rem\",\n height: \"1rem\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n})\n\nconst DEFAULT_PAGINATION_LABELS = {\n navigation: \"Pagination\",\n firstPage: \"First page\",\n previousPage: \"Previous page\",\n nextPage: \"Next page\",\n lastPage: \"Last page\",\n goToPage: (page: number) => `Page ${page}`,\n jumpToPage: (page: number) => `Jump to page ${page}`,\n pageSizeSelector: (size: number) => `Rows per page: ${size}`,\n} as const satisfies TablePaginationLabels\n\nexport type TablePaginationLabels = {\n /** Label for the pagination navigation region. */\n navigation?: string\n /** Label for first page button. */\n firstPage?: string\n /** Label for previous page button. */\n previousPage?: string\n /** Label for next page button. */\n nextPage?: string\n /** Label for last page button. */\n lastPage?: string\n /** Label generator for page number buttons. Receives 1-indexed page number. */\n goToPage?: (page: number) => string\n /** Label generator for ellipsis jump buttons. Receives target page number. */\n jumpToPage?: (page: number) => string\n /** Label generator for page size selector. Receives current page size. */\n pageSizeSelector?: (pageSize: number) => string\n /** Label for page size dropdown header. */\n resultsPerPage?: string\n /** Label generator for the range display. Receives start, end, and total. */\n rangeDisplay?: (start: number, end: number, total: number) => string\n}\n\nexport type TablePaginationProps = Omit<ComponentProps<\"div\">, \"onChange\"> & {\n /** Current page number (1-indexed) */\n page: number\n /** Total number of items across all pages */\n totalItems: number\n /** Current page size (items per page) */\n pageSize: number\n /** Callback fired when the page changes */\n onPageChange: (page: number) => void\n /** Callback fired when the page size changes */\n onPageSizeChange: (pageSize: number) => void\n /** Available page size options for the dropdown */\n pageSizeOptions?: number[]\n /** Number of sibling pages to show on each side of current page */\n siblingCount?: number\n /** Whether the pagination controls are disabled */\n disabled?: boolean\n /** Labels for i18n. All labels are optional for backwards compatibility but recommended. */\n labels?: TablePaginationLabels\n}\n\nexport const TablePagination = React.forwardRef<\n HTMLDivElement,\n TablePaginationProps\n>(function TablePagination(\n {\n page,\n totalItems,\n pageSize,\n onPageChange,\n onPageSizeChange,\n pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n siblingCount = 2,\n disabled = false,\n labels: labelsProp,\n className,\n ...props\n },\n ref\n) {\n /**\n * Accessible names for the controls. Every button here is icon-only, so\n * without a name it reaches assistive technology as an unlabelled button --\n * which is what `actions.mdx` forbids, and what this component shipped\n * whenever a caller omitted `labels`. The caller's values still win; these\n * only fill the gaps, so a localised app overrides them exactly as before.\n */\n const labels = { ...DEFAULT_PAGINATION_LABELS, ...labelsProp }\n const styles = useStyles()\n // Closes the previously deferred inline Select portal — stamp\n // an explicit override only when one exists in the React tree (Table/DataTable's own explicit\n // density, via DensityContextBoundary), never a fabricated default; an omitted override still\n // inherits live shell density through ordinary DOM/CSS since the portal container is a\n // descendant of <html>. Same pattern as select.tsx's SelectContent.\n const densityOverride = useDensity()\n // SPEC.md §2 rule 3 — the same portal asymmetry, for the appearance pair: re-stamp the\n // nearest explicit AppearanceBoundary's mode+surface, or neither attribute when there is\n // none, leaving live shell inheritance in place.\n const appearance = useAppearanceAttributes()\n const { totalPages, start, end, isFirstPage, isLastPage } =\n calculatePagination({\n page,\n pageSize,\n totalItems,\n })\n\n const safePage = clampPage(page, totalPages)\n const pageItems = getPageNumbers(safePage, totalPages, siblingCount)\n\n const handlePageSizeChange = (value: string) => {\n const newSize = parseInt(value, 10)\n if (!isNaN(newSize)) {\n onPageSizeChange(newSize)\n }\n }\n\n // Don't render if no items\n if (totalItems === 0) {\n return null\n }\n\n return (\n <TooltipProvider>\n <div\n ref={ref}\n data-slot=\"table-pagination\"\n {...{ [SLOT_ATTR]: \"table-pagination\" }}\n data-fs-element=\"TablePagination\"\n role=\"navigation\"\n aria-label={labels?.navigation}\n className={mergeClasses(styles.root, className)}\n {...props}\n >\n {/* LEFT SIDE: Navigation and page buttons */}\n <div className={styles.left}>\n {/* First page button */}\n <Button\n variant=\"secondary\"\n size=\"icon-sm\"\n shape=\"normal\"\n disabled={disabled || isFirstPage}\n onClick={() => onPageChange(1)}\n aria-label={labels?.firstPage}\n className={styles.navButton}\n >\n <IconFirstPage />\n </Button>\n\n {/* Previous page button */}\n <Button\n variant=\"secondary\"\n size=\"icon-sm\"\n shape=\"normal\"\n disabled={disabled || isFirstPage}\n onClick={() => onPageChange(safePage - 1)}\n aria-label={labels?.previousPage}\n className={styles.navButton}\n >\n <IconChevronLeft />\n </Button>\n\n {/* Page number buttons */}\n {pageItems.map((item, index) => {\n const key =\n item.type === \"ellipsis\"\n ? `ellipsis-${index}-${item.targetPage}`\n : `page-${item.page}`\n\n if (item.type === \"ellipsis\") {\n return (\n <Tooltip key={key}>\n <TooltipTrigger asChild>\n <Button\n variant=\"tertiary\"\n size=\"icon-sm\"\n shape=\"normal\"\n disabled={disabled}\n onClick={() => onPageChange(item.targetPage)}\n aria-label={labels?.jumpToPage?.(item.targetPage)}\n className={styles.ellipsisButton}\n >\n ...\n </Button>\n </TooltipTrigger>\n <TooltipContent>\n {labels?.jumpToPage?.(item.targetPage)}\n </TooltipContent>\n </Tooltip>\n )\n }\n\n const isCurrentPage = item.page === safePage\n\n return (\n <Button\n key={key}\n variant={isCurrentPage ? \"secondary\" : \"tertiary\"}\n size=\"icon-sm\"\n shape=\"normal\"\n disabled={disabled}\n onClick={() => onPageChange(item.page)}\n aria-label={labels?.goToPage?.(item.page)}\n aria-current={isCurrentPage ? \"page\" : undefined}\n className={\n isCurrentPage\n ? styles.pageButtonActive\n : styles.pageButtonInactive\n }\n >\n {item.page}\n </Button>\n )\n })}\n\n {/* Next page button */}\n <Button\n variant=\"secondary\"\n size=\"icon-sm\"\n shape=\"normal\"\n disabled={disabled || isLastPage}\n onClick={() => onPageChange(safePage + 1)}\n aria-label={labels?.nextPage}\n className={styles.navButton}\n >\n <IconChevronRight />\n </Button>\n\n {/* Last page button */}\n <Button\n variant=\"secondary\"\n size=\"icon-sm\"\n shape=\"normal\"\n disabled={disabled || isLastPage}\n onClick={() => onPageChange(totalPages)}\n aria-label={labels?.lastPage}\n className={styles.navButton}\n >\n <IconLastPage />\n </Button>\n </div>\n\n {/* RIGHT SIDE: Range display and page size selector */}\n <div className={styles.right}>\n {/* Range display */}\n <span\n data-slot=\"table-pagination-range\"\n className={styles.range}\n aria-live=\"polite\"\n >\n {labels?.rangeDisplay\n ? labels.rangeDisplay(start, end, totalItems)\n : `${start}-${end} / ${totalItems}`}\n </span>\n\n {/* Page size selector */}\n <SelectPrimitive.Root\n value={String(pageSize)}\n onValueChange={handlePageSizeChange}\n disabled={disabled}\n >\n <SelectPrimitive.Trigger\n className={styles.selectTrigger}\n aria-label={labels?.pageSizeSelector?.(pageSize)}\n >\n <SelectPrimitive.Value />\n <SelectPrimitive.Icon className={styles.selectIcon}>\n <ChevronDownIcon />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n className={styles.selectContent}\n {...(densityOverride !== undefined\n ? { \"data-density\": densityOverride }\n : {})}\n {...appearance}\n position=\"popper\"\n sideOffset={4}\n >\n <SelectPrimitive.Viewport className={styles.selectViewport}>\n <SelectPrimitive.Group>\n {labels?.resultsPerPage && (\n <SelectPrimitive.Label className={styles.selectLabel}>\n {labels.resultsPerPage}\n </SelectPrimitive.Label>\n )}\n {pageSizeOptions.map((option) => (\n <SelectPrimitive.Item\n key={option}\n value={String(option)}\n className={styles.selectItem}\n >\n <span className={styles.selectItemIndicator}>\n <SelectPrimitive.ItemIndicator>\n <CheckIcon style={{ width: 16, height: 16 }} />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>\n {option}\n </SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n ))}\n </SelectPrimitive.Group>\n </SelectPrimitive.Viewport>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n </SelectPrimitive.Root>\n </div>\n </div>\n </TooltipProvider>\n )\n})\n"],"names":["IconFirstPage","props","jsxs","jsx","IconChevronLeft","IconChevronRight","IconLastPage","ChevronDownIcon","CheckIcon","DEFAULT_PAGE_SIZE_OPTIONS","useStyles","makeZenithStyles","tokens.spacingGroup1","shorthands","tokens.spacingElement3","tokens.textSm","tokens.leadingSm","tokens.spacingElement2","tokens.grayA3","tokens.accent11","tokens.grayA4","tokens.accentA8","tokens.trackingNormal","tokens.grayA11","tokens.spacingElement1","tokens.radiusLg","tokens.accent8","tokens.grayA6","tokens.semBody","tokens.textXs","tokens.leadingXs","tokens.fontWeightSemibold","tokens.radiusMd","tokens.accentA3","DEFAULT_PAGINATION_LABELS","page","size","TablePagination","React","totalItems","pageSize","onPageChange","onPageSizeChange","pageSizeOptions","siblingCount","disabled","labelsProp","className","ref","labels","styles","densityOverride","useDensity","appearance","useAppearanceAttributes","totalPages","start","end","isFirstPage","isLastPage","calculatePagination","safePage","clampPage","pageItems","getPageNumbers","handlePageSizeChange","value","newSize","TooltipProvider","SLOT_ATTR","mergeClasses","Button","item","index","key","Tooltip","TooltipTrigger","_a","TooltipContent","_b","isCurrentPage","_c","SelectPrimitive.Root","SelectPrimitive.Trigger","SelectPrimitive.Value","SelectPrimitive.Icon","SelectPrimitive.Portal","SelectPrimitive.Content","SelectPrimitive.Viewport","SelectPrimitive.Group","SelectPrimitive.Label","option","SelectPrimitive.Item","SelectPrimitive.ItemIndicator","SelectPrimitive.ItemText"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"table-pagination.js","sources":["../../../src/components/table/table-pagination.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { SVGProps, ComponentProps } from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { useAppearanceAttributes } from \"../appearance-boundary/appearance-boundary\"\nimport { useDensity } from \"../density-provider/density-provider\"\nimport {\n calculatePagination,\n clampPage,\n getPageNumbers,\n} from \"../../lib/pagination\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"../tooltip/tooltip\"\nimport { Button } from \"../button/button\"\n\n// Navigation icons\nconst IconFirstPage = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"M6 6v12\" />\n <path d=\"m15 18-6-6 6-6\" />\n </svg>\n)\n\nconst IconChevronLeft = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"m15 18-6-6 6-6\" />\n </svg>\n)\n\nconst IconChevronRight = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n)\n\nconst IconLastPage = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"m9 18 6-6-6-6\" />\n <path d=\"M18 6v12\" />\n </svg>\n)\n\n// Select icons\nconst ChevronDownIcon = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n)\n\nconst CheckIcon = (props: SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"M20 6 9 17l-5-5\" />\n </svg>\n)\n\nconst DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100]\n\nconst useStyles = makeZenithStyles({\n root: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: tokens.spacingGroup1,\n ...shorthands.paddingBlock(tokens.spacingElement3),\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n },\n left: {\n display: \"flex\",\n alignItems: \"center\",\n gap: tokens.spacingElement2,\n },\n navButton: {\n backgroundColor: tokens.grayA3,\n color: tokens.accent11,\n \":hover\": {\n backgroundColor: tokens.grayA4,\n },\n \":disabled\": {\n backgroundColor: tokens.grayA3,\n color: tokens.accentA8,\n pointerEvents: \"none\",\n },\n },\n pageButtonActive: {\n pointerEvents: \"none\",\n },\n pageButtonInactive: {\n backgroundColor: \"transparent\",\n color: tokens.accent11,\n \":hover\": {\n backgroundColor: tokens.grayA3,\n },\n \":active\": {\n backgroundColor: tokens.grayA4,\n },\n },\n ellipsisButton: {\n letterSpacing: tokens.trackingNormal,\n backgroundColor: \"transparent\",\n color: tokens.accent11,\n \":hover\": {\n backgroundColor: tokens.grayA3,\n },\n },\n right: {\n display: \"flex\",\n alignItems: \"center\",\n gap: tokens.spacingGroup1,\n paddingRight: \"0.125rem\",\n },\n range: {\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n color: tokens.grayA11,\n fontVariantNumeric: \"tabular-nums\",\n },\n selectTrigger: {\n display: \"flex\",\n height: \"2rem\",\n width: \"auto\",\n minWidth: \"4rem\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n gap: tokens.spacingElement1,\n ...shorthands.borderRadius(tokens.radiusLg),\n backgroundColor: tokens.grayA3,\n ...shorthands.paddingInline(\"0.75rem\"),\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n cursor: \"pointer\",\n ...shorthands.borderWidth(0),\n \":hover\": {\n backgroundColor: tokens.grayA4,\n },\n \":focus\": {\n outlineWidth: \"2px\",\n outlineStyle: \"solid\",\n outlineColor: tokens.accent8,\n outlineOffset: \"2px\",\n },\n \":disabled\": {\n cursor: \"not-allowed\",\n opacity: 0.5,\n },\n },\n selectIcon: {\n display: \"flex\",\n alignItems: \"center\",\n color: tokens.grayA11,\n },\n selectContent: {\n position: \"relative\",\n zIndex: 50,\n ...shorthands.overflow(\"hidden\"),\n ...shorthands.borderRadius(tokens.radiusLg),\n ...shorthands.border(\"1px\", \"solid\", tokens.grayA6),\n backgroundColor: tokens.body,\n boxShadow:\n \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)\",\n },\n selectViewport: {\n ...shorthands.padding(\"0.25rem\"),\n },\n selectLabel: {\n ...shorthands.padding(\"0.375rem\", \"0.5rem\"),\n fontSize: tokens.textXs,\n lineHeight: tokens.leadingXs,\n fontWeight: tokens.fontWeightSemibold,\n color: tokens.grayA11,\n },\n selectItem: {\n position: \"relative\",\n display: \"flex\",\n cursor: \"pointer\",\n userSelect: \"none\",\n alignItems: \"center\",\n ...shorthands.borderRadius(tokens.radiusMd),\n ...shorthands.padding(\"0.375rem\", \"0.5rem\", \"0.375rem\", \"2rem\"),\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n outlineStyle: \"none\",\n \":focus\": {\n backgroundColor: tokens.accentA3,\n },\n \"&[data-state='checked']\": {\n backgroundColor: tokens.accentA3,\n },\n },\n selectItemIndicator: {\n position: \"absolute\",\n left: \"0.5rem\",\n display: \"flex\",\n width: \"1rem\",\n height: \"1rem\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n})\n\nconst DEFAULT_PAGINATION_LABELS = {\n navigation: \"Pagination\",\n firstPage: \"First page\",\n previousPage: \"Previous page\",\n nextPage: \"Next page\",\n lastPage: \"Last page\",\n goToPage: (page: number) => `Page ${page}`,\n jumpToPage: (page: number) => `Jump to page ${page}`,\n pageSizeSelector: (size: number) => `Rows per page: ${size}`,\n} as const satisfies TablePaginationLabels\n\nexport type TablePaginationLabels = {\n /** Label for the pagination navigation region. */\n navigation?: string\n /** Label for first page button. */\n firstPage?: string\n /** Label for previous page button. */\n previousPage?: string\n /** Label for next page button. */\n nextPage?: string\n /** Label for last page button. */\n lastPage?: string\n /** Label generator for page number buttons. Receives 1-indexed page number. */\n goToPage?: (page: number) => string\n /** Label generator for ellipsis jump buttons. Receives target page number. */\n jumpToPage?: (page: number) => string\n /** Label generator for page size selector. Receives current page size. */\n pageSizeSelector?: (pageSize: number) => string\n /** Label for page size dropdown header. */\n resultsPerPage?: string\n /** Label generator for the range display. Receives start, end, and total. */\n rangeDisplay?: (start: number, end: number, total: number) => string\n}\n\nexport type TablePaginationProps = Omit<ComponentProps<\"div\">, \"onChange\"> & {\n /** Current page number (1-indexed) */\n page: number\n /** Total number of items across all pages */\n totalItems: number\n /** Current page size (items per page) */\n pageSize: number\n /** Callback fired when the page changes */\n onPageChange: (page: number) => void\n /** Callback fired when the page size changes */\n onPageSizeChange: (pageSize: number) => void\n /** Available page size options for the dropdown */\n pageSizeOptions?: number[]\n /** Number of sibling pages to show on each side of current page */\n siblingCount?: number\n /** Whether the pagination controls are disabled */\n disabled?: boolean\n /** Labels for i18n. All labels are optional for backwards compatibility but recommended. */\n labels?: TablePaginationLabels\n}\n\nexport const TablePagination = React.forwardRef<\n HTMLDivElement,\n TablePaginationProps\n>(function TablePagination(\n {\n page,\n totalItems,\n pageSize,\n onPageChange,\n onPageSizeChange,\n pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n siblingCount = 2,\n disabled = false,\n labels: labelsProp,\n className,\n ...props\n },\n ref\n) {\n /**\n * Accessible names for the controls. Every button here is icon-only, so\n * without a name it reaches assistive technology as an unlabelled button --\n * which is what `actions.mdx` forbids, and what this component shipped\n * whenever a caller omitted `labels`. The caller's values still win; these\n * only fill the gaps, so a localised app overrides them exactly as before.\n */\n const labels = { ...DEFAULT_PAGINATION_LABELS, ...labelsProp }\n const styles = useStyles()\n // Closes the previously deferred inline Select portal — stamp\n // an explicit override only when one exists in the React tree (Table/DataTable's own explicit\n // density, via DensityContextBoundary), never a fabricated default; an omitted override still\n // inherits live shell density through ordinary DOM/CSS since the portal container is a\n // descendant of <html>. Same pattern as select.tsx's SelectContent.\n const densityOverride = useDensity()\n // SPEC.md §2 rule 3 — the same portal asymmetry, for the appearance pair: re-stamp the\n // nearest explicit AppearanceBoundary's mode+surface, or neither attribute when there is\n // none, leaving live shell inheritance in place.\n const appearance = useAppearanceAttributes()\n const { totalPages, start, end, isFirstPage, isLastPage } =\n calculatePagination({\n page,\n pageSize,\n totalItems,\n })\n\n const safePage = clampPage(page, totalPages)\n const pageItems = getPageNumbers(safePage, totalPages, siblingCount)\n\n const handlePageSizeChange = (value: string) => {\n const newSize = parseInt(value, 10)\n if (!isNaN(newSize)) {\n onPageSizeChange(newSize)\n }\n }\n\n // Don't render if no items\n if (totalItems === 0) {\n return null\n }\n\n return (\n <TooltipProvider>\n <div\n ref={ref}\n data-slot=\"table-pagination\"\n {...{ [SLOT_ATTR]: \"table-pagination\" }}\n data-fs-element=\"TablePagination\"\n role=\"navigation\"\n aria-label={labels?.navigation}\n className={mergeClasses(styles.root, className)}\n {...props}\n >\n {/* LEFT SIDE: Navigation and page buttons */}\n <div className={styles.left}>\n {/* First page button */}\n <Button\n variant=\"secondary\"\n size=\"icon-sm\"\n shape=\"normal\"\n disabled={disabled || isFirstPage}\n onClick={() => onPageChange(1)}\n aria-label={labels?.firstPage}\n className={styles.navButton}\n >\n <IconFirstPage />\n </Button>\n\n {/* Previous page button */}\n <Button\n variant=\"secondary\"\n size=\"icon-sm\"\n shape=\"normal\"\n disabled={disabled || isFirstPage}\n onClick={() => onPageChange(safePage - 1)}\n aria-label={labels?.previousPage}\n className={styles.navButton}\n >\n <IconChevronLeft />\n </Button>\n\n {/* Page number buttons */}\n {pageItems.map((item, index) => {\n const key =\n item.type === \"ellipsis\"\n ? `ellipsis-${index}-${item.targetPage}`\n : `page-${item.page}`\n\n if (item.type === \"ellipsis\") {\n return (\n <Tooltip key={key}>\n <TooltipTrigger asChild>\n <Button\n variant=\"tertiary\"\n size=\"icon-sm\"\n shape=\"normal\"\n disabled={disabled}\n onClick={() => onPageChange(item.targetPage)}\n aria-label={labels?.jumpToPage?.(item.targetPage)}\n className={styles.ellipsisButton}\n >\n ...\n </Button>\n </TooltipTrigger>\n <TooltipContent>\n {labels?.jumpToPage?.(item.targetPage)}\n </TooltipContent>\n </Tooltip>\n )\n }\n\n const isCurrentPage = item.page === safePage\n\n return (\n <Button\n key={key}\n variant={isCurrentPage ? \"secondary\" : \"tertiary\"}\n size=\"icon-sm\"\n shape=\"normal\"\n disabled={disabled}\n onClick={() => onPageChange(item.page)}\n aria-label={labels?.goToPage?.(item.page)}\n aria-current={isCurrentPage ? \"page\" : undefined}\n className={\n isCurrentPage\n ? styles.pageButtonActive\n : styles.pageButtonInactive\n }\n >\n {item.page}\n </Button>\n )\n })}\n\n {/* Next page button */}\n <Button\n variant=\"secondary\"\n size=\"icon-sm\"\n shape=\"normal\"\n disabled={disabled || isLastPage}\n onClick={() => onPageChange(safePage + 1)}\n aria-label={labels?.nextPage}\n className={styles.navButton}\n >\n <IconChevronRight />\n </Button>\n\n {/* Last page button */}\n <Button\n variant=\"secondary\"\n size=\"icon-sm\"\n shape=\"normal\"\n disabled={disabled || isLastPage}\n onClick={() => onPageChange(totalPages)}\n aria-label={labels?.lastPage}\n className={styles.navButton}\n >\n <IconLastPage />\n </Button>\n </div>\n\n {/* RIGHT SIDE: Range display and page size selector */}\n <div className={styles.right}>\n {/* Range display */}\n <span\n data-slot=\"table-pagination-range\"\n className={styles.range}\n aria-live=\"polite\"\n >\n {labels?.rangeDisplay\n ? labels.rangeDisplay(start, end, totalItems)\n : `${start}-${end} / ${totalItems}`}\n </span>\n\n {/* Page size selector */}\n <SelectPrimitive.Root\n value={String(pageSize)}\n onValueChange={handlePageSizeChange}\n disabled={disabled}\n >\n <SelectPrimitive.Trigger\n className={styles.selectTrigger}\n aria-label={labels?.pageSizeSelector?.(pageSize)}\n >\n <SelectPrimitive.Value />\n <SelectPrimitive.Icon className={styles.selectIcon}>\n <ChevronDownIcon />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n className={styles.selectContent}\n {...(densityOverride !== undefined\n ? { \"data-density\": densityOverride }\n : {})}\n {...appearance}\n position=\"popper\"\n sideOffset={4}\n >\n <SelectPrimitive.Viewport className={styles.selectViewport}>\n <SelectPrimitive.Group>\n {labels?.resultsPerPage && (\n <SelectPrimitive.Label className={styles.selectLabel}>\n {labels.resultsPerPage}\n </SelectPrimitive.Label>\n )}\n {pageSizeOptions.map((option) => (\n <SelectPrimitive.Item\n key={option}\n value={String(option)}\n className={styles.selectItem}\n >\n <span className={styles.selectItemIndicator}>\n <SelectPrimitive.ItemIndicator>\n <CheckIcon style={{ width: 16, height: 16 }} />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>\n {option}\n </SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n ))}\n </SelectPrimitive.Group>\n </SelectPrimitive.Viewport>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n </SelectPrimitive.Root>\n </div>\n </div>\n </TooltipProvider>\n )\n})\n"],"names":["IconFirstPage","props","jsxs","jsx","IconChevronLeft","IconChevronRight","IconLastPage","ChevronDownIcon","CheckIcon","DEFAULT_PAGE_SIZE_OPTIONS","useStyles","makeZenithStyles","tokens.spacingGroup1","shorthands","tokens.spacingElement3","tokens.textSm","tokens.leadingSm","tokens.spacingElement2","tokens.grayA3","tokens.accent11","tokens.grayA4","tokens.accentA8","tokens.trackingNormal","tokens.grayA11","tokens.spacingElement1","tokens.radiusLg","tokens.accent8","tokens.grayA6","tokens.body","tokens.textXs","tokens.leadingXs","tokens.fontWeightSemibold","tokens.radiusMd","tokens.accentA3","DEFAULT_PAGINATION_LABELS","page","size","TablePagination","React","totalItems","pageSize","onPageChange","onPageSizeChange","pageSizeOptions","siblingCount","disabled","labelsProp","className","ref","labels","styles","densityOverride","useDensity","appearance","useAppearanceAttributes","totalPages","start","end","isFirstPage","isLastPage","calculatePagination","safePage","clampPage","pageItems","getPageNumbers","handlePageSizeChange","value","newSize","TooltipProvider","SLOT_ATTR","mergeClasses","Button","item","index","key","Tooltip","TooltipTrigger","_a","TooltipContent","_b","isCurrentPage","_c","SelectPrimitive.Root","SelectPrimitive.Trigger","SelectPrimitive.Value","SelectPrimitive.Icon","SelectPrimitive.Portal","SelectPrimitive.Content","SelectPrimitive.Viewport","SelectPrimitive.Group","SelectPrimitive.Label","option","SelectPrimitive.Item","SelectPrimitive.ItemIndicator","SelectPrimitive.ItemText"],"mappings":"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"}
|
|
@@ -2,9 +2,9 @@ import { jsx as l } from "react/jsx-runtime";
|
|
|
2
2
|
import * as i from "react";
|
|
3
3
|
import { mergeClasses as c, SLOT_ATTR as d, shorthands as f } from "@epilot/zenith-runtime/v1";
|
|
4
4
|
import { makeZenithStyles as A } from "../../styles/make-styles.js";
|
|
5
|
-
import { spacingGroup2 as w, grayA11 as B, leadingSm as x, textSm as R, grayA12 as C, fontWeightNormal as H, tableCellPaddingY as N, spacingElement3 as
|
|
5
|
+
import { spacingGroup2 as w, grayA11 as B, leadingSm as x, textSm as R, grayA12 as C, fontWeightNormal as H, tableCellPaddingY as N, spacingElement3 as h, fontWeightMedium as v, tableHeadHeight as S, accentA3 as k, graySoft as W, grayA5 as u } from "../../tokens/index.js";
|
|
6
6
|
import { DensityContextBoundary as T, canonicalDensity as y } from "../density-provider/density-provider.js";
|
|
7
|
-
const
|
|
7
|
+
const j = i.createContext("normal"), s = A({
|
|
8
8
|
wrapper: {
|
|
9
9
|
position: "relative",
|
|
10
10
|
width: "100%",
|
|
@@ -49,8 +49,8 @@ const P = i.createContext("normal"), s = A({
|
|
|
49
49
|
},
|
|
50
50
|
head: {
|
|
51
51
|
// px-3
|
|
52
|
-
paddingLeft:
|
|
53
|
-
paddingRight:
|
|
52
|
+
paddingLeft: h,
|
|
53
|
+
paddingRight: h,
|
|
54
54
|
// Density-bound: cascades from the nearest [data-density] ancestor — 32/36/40px for
|
|
55
55
|
// compact/normal/comfortable. No JS density switch needed.
|
|
56
56
|
height: S,
|
|
@@ -76,8 +76,8 @@ const P = i.createContext("normal"), s = A({
|
|
|
76
76
|
},
|
|
77
77
|
cell: {
|
|
78
78
|
// px-3
|
|
79
|
-
paddingLeft:
|
|
80
|
-
paddingRight:
|
|
79
|
+
paddingLeft: h,
|
|
80
|
+
paddingRight: h,
|
|
81
81
|
// Density-bound: cascades from the nearest [data-density] ancestor — 6/8/12px for
|
|
82
82
|
// compact/normal/comfortable. No JS density switch needed.
|
|
83
83
|
paddingTop: N,
|
|
@@ -111,7 +111,7 @@ const P = i.createContext("normal"), s = A({
|
|
|
111
111
|
// mt-4
|
|
112
112
|
marginTop: w
|
|
113
113
|
}
|
|
114
|
-
}),
|
|
114
|
+
}), E = i.forwardRef(
|
|
115
115
|
function({ className: a, density: t, children: e, ...o }, r) {
|
|
116
116
|
const g = s();
|
|
117
117
|
return /* @__PURE__ */ l("div", { className: g.wrapper, children: /* @__PURE__ */ l(
|
|
@@ -127,7 +127,7 @@ const P = i.createContext("normal"), s = A({
|
|
|
127
127
|
}
|
|
128
128
|
) });
|
|
129
129
|
}
|
|
130
|
-
),
|
|
130
|
+
), G = i.forwardRef(function({ className: a, ...t }, e) {
|
|
131
131
|
const o = s();
|
|
132
132
|
return /* @__PURE__ */ l(
|
|
133
133
|
"thead",
|
|
@@ -182,12 +182,12 @@ const P = i.createContext("normal"), s = A({
|
|
|
182
182
|
);
|
|
183
183
|
}
|
|
184
184
|
), Y = i.forwardRef(
|
|
185
|
-
function({ className: a, align: t = "left", density: e, scope: o = "col", children: r, ...g },
|
|
185
|
+
function({ className: a, align: t = "left", density: e, scope: o = "col", children: r, ...g }, m) {
|
|
186
186
|
const n = s(), p = t === "center" ? n.alignCenter : t === "right" ? n.alignRight : n.alignLeft;
|
|
187
187
|
return /* @__PURE__ */ l(
|
|
188
188
|
"th",
|
|
189
189
|
{
|
|
190
|
-
ref:
|
|
190
|
+
ref: m,
|
|
191
191
|
"data-slot": "table-head",
|
|
192
192
|
[d]: "table-head",
|
|
193
193
|
scope: o,
|
|
@@ -199,12 +199,12 @@ const P = i.createContext("normal"), s = A({
|
|
|
199
199
|
);
|
|
200
200
|
}
|
|
201
201
|
), Z = i.forwardRef(
|
|
202
|
-
function({ className: a, align: t = "left", numeric: e, density: o, children: r, ...g },
|
|
202
|
+
function({ className: a, align: t = "left", numeric: e, density: o, children: r, ...g }, m) {
|
|
203
203
|
const n = s(), p = t === "center" ? n.alignCenter : t === "right" ? n.alignRight : n.alignLeft;
|
|
204
204
|
return /* @__PURE__ */ l(
|
|
205
205
|
"td",
|
|
206
206
|
{
|
|
207
|
-
ref:
|
|
207
|
+
ref: m,
|
|
208
208
|
"data-slot": "table-cell",
|
|
209
209
|
[d]: "table-cell",
|
|
210
210
|
className: c(
|
|
@@ -237,14 +237,14 @@ const P = i.createContext("normal"), s = A({
|
|
|
237
237
|
);
|
|
238
238
|
});
|
|
239
239
|
export {
|
|
240
|
-
|
|
240
|
+
E as Table,
|
|
241
241
|
M as TableBody,
|
|
242
242
|
_ as TableCaption,
|
|
243
243
|
Z as TableCell,
|
|
244
|
-
|
|
244
|
+
j as TableDensityContext,
|
|
245
245
|
O as TableFooter,
|
|
246
246
|
Y as TableHead,
|
|
247
|
-
|
|
247
|
+
G as TableHeader,
|
|
248
248
|
V as TableRow
|
|
249
249
|
};
|
|
250
250
|
//# sourceMappingURL=table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.js","sources":["../../../src/components/table/table.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport {\n canonicalDensity,\n DensityContextBoundary,\n} from \"../density-provider/density-provider\"\n\n/**\n * Table — the primitive set (Table, TableHeader, TableBody, TableFooter, TableRow, TableHead,\n * TableCell, TableCaption) in Card's compound pattern: one `makeZenithStyles` call, one slot per\n * sub-component, each reading its own slot.\n *\n * Density (approved 2026-09-09, replacing the earlier context-only mechanism — and with it the\n * open question of whether Table and List could agree on one, now resolved; corrected in review\n * the same day, see the two notes below):\n * `TableHead`/`TableCell` read `tokens.tableHeadHeight`/`tokens.tableCellPaddingY` directly —\n * generated CSS custom properties that cascade from the nearest `[data-density]` ancestor, exactly\n * like Button/Field/Select. `Table`'s own `density` prop, when explicit, stamps `data-density` on\n * the `<table>` element itself; when omitted, no attribute is stamped and ambient shell density\n * (or an outer `DensityProvider`) inherits through ordinary DOM/CSS with no React involvement — a\n * shell attribute mutation restyles an already-mounted table without a rerender. Per-cell\n * `TableHead`/`TableCell` `density` props stamp their own `data-density` the same way, overriding\n * locally. `TableDensityContext` (below) is a deprecated, now-inert compatibility export — see its\n * own doc comment.\n *\n * Two corrections from that review, both applied identically to `Table`, `DataTable`\n * (`data-table.tsx`), `TableHead` and `TableCell`:\n *\n * 1. An explicit `density` establishes a `DensityContextBoundary`, not just a DOM stamp. A DOM\n * attribute alone reaches ordinary CSS-inheriting descendants, but a Radix `Portal` (a real\n * `Select`/`Popover`/etc. rendered inside a cell) is a DOM sibling, not descendant, of that cell\n * — its own `useDensity()` read needs the REACT context updated too, or it silently reports a\n * stale ancestor value instead of the cell's own override.\n * 2. The DOM stamp and the context value both run through the SAME `canonicalDensity` function\n * (from `density-provider.tsx`, package-internal). Before this fix, `DensityContextBoundary`\n * normalized invalid runtime input (e.g. a bad string bypassing TypeScript) for the context, but\n * the DOM attribute was written raw/unnormalized — an invalid value could stamp `data-density`\n * with something no generated CSS selector matches while `useDensity()` reported the normalized\n * `\"normal\"`, disagreeing about what density is actually in effect.\n *\n * Selectors carry over untouched where they do not involve `data-slot`: `[&_tr]:border-b`,\n * `[&_tr:last-child]:border-0`, `data-[state=selected]:bg-accent-a3` (Radix selection state) and\n * the `role=\"checkbox\"` column-reflow rules all obey the original attribute.\n *\n * Values explicit where no token exists: `px-3` (0.75rem) on head/cell. The row's\n * `transition-colors` expands to Tailwind v4's default property list plus the 150ms\n * `cubic-bezier(0.4, 0, 0.2, 1)` easing — visible motion from the framework's default theme,\n * which the v1 file does not state (Rule 0: flagged, not approximated away). The checkbox\n * `translate-y-[2px]` maps to the modern `translate` property, which is what Tailwind v4 emits.\n */\n\nexport type TableDensity = \"compact\" | \"normal\" | \"comfortable\"\n\n/**\n * @deprecated No longer a supported way to control Table/DataTable geometry (approved\n * 2026-09-09). `Table`/`DataTable` no longer provide a value into this\n * context, and `TableHead`/`TableCell` no longer read it — density now flows entirely through CSS\n * custom-property inheritance from the nearest `[data-density]` ancestor (ambient shell or\n * `DensityProvider`), plus each component's own `density` prop stamping its own `data-density`\n * when explicit. This context simply no longer controls or reports Table/DataTable geometry —\n * `useContext(TableDensityContext)` still returns whatever a consumer's own raw\n * `TableDensityContext.Provider` sets (or the bare `\"normal\"` default with no such Provider), it\n * just has no bearing on what actually renders any more. Kept only so existing\n * `import { TableDensityContext }` statements and `useContext(TableDensityContext)` call sites do\n * not hard-error. Use the `density` prop on `Table`/`DataTable`/`TableHead`/`TableCell`, or wrap a\n * subtree in `DensityProvider`, instead. This is a disclosed behavioural change; the context's own\n * type and default value are unchanged.\n */\nconst TableDensityContext = React.createContext<TableDensity>(\"normal\")\n\nconst useStyles = makeZenithStyles({\n wrapper: {\n position: \"relative\",\n width: \"100%\",\n ...shorthands.overflow(\"auto\"),\n },\n root: {\n width: \"100%\",\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n },\n header: {\n \"& tr\": {\n ...shorthands.borderBottom(\"1px\", \"solid\", tokens.grayA5),\n },\n },\n body: {\n \"& tr:last-child\": {\n ...shorthands.borderWidth(0),\n },\n },\n footer: {\n ...shorthands.borderTop(\"1px\", \"solid\", tokens.grayA5),\n backgroundColor: tokens.semGraySoft,\n fontWeight: tokens.fontWeightMedium,\n \"& > tr:last-child\": {\n borderBottomWidth: 0,\n },\n },\n row: {\n ...shorthands.borderBottom(\"1px\", \"solid\", tokens.grayA5),\n transitionProperty:\n \"color, background-color, border-color, text-decoration-color, fill, stroke\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n \"&[data-state='selected']\": {\n backgroundColor: tokens.accentA3,\n },\n },\n rowHover: {\n \":hover\": {\n backgroundColor: tokens.accentA3,\n },\n },\n head: {\n // px-3\n paddingLeft: tokens.spacingElement3,\n paddingRight: tokens.spacingElement3,\n // Density-bound: cascades from the nearest [data-density] ancestor — 32/36/40px for\n // compact/normal/comfortable. No JS density switch needed.\n height: tokens.tableHeadHeight,\n verticalAlign: \"middle\",\n fontWeight: tokens.fontWeightMedium,\n color: tokens.grayA12,\n \"&:has([role='checkbox'])\": {\n paddingRight: 0,\n },\n \"& > [role='checkbox']\": {\n // v1 `translate-y-[2px]`.\n translate: \"0 2px\",\n },\n },\n alignLeft: {\n textAlign: \"left\",\n },\n alignCenter: {\n textAlign: \"center\",\n },\n alignRight: {\n textAlign: \"right\",\n },\n cell: {\n // px-3\n paddingLeft: tokens.spacingElement3,\n paddingRight: tokens.spacingElement3,\n // Density-bound: cascades from the nearest [data-density] ancestor — 6/8/12px for\n // compact/normal/comfortable. No JS density switch needed.\n paddingTop: tokens.tableCellPaddingY,\n paddingBottom: tokens.tableCellPaddingY,\n verticalAlign: \"middle\",\n fontWeight: tokens.fontWeightNormal,\n color: tokens.grayA12,\n \"&:has([role='checkbox'])\": {\n paddingRight: 0,\n },\n \"& > [role='checkbox']\": {\n // v1 `translate-y-[2px]`.\n translate: \"0 2px\",\n },\n },\n cellNumeric: {\n fontVariantNumeric: \"tabular-nums\",\n },\n caption: {\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n color: tokens.grayA11,\n },\n captionTop: {\n captionSide: \"top\",\n // mb-4\n marginBottom: tokens.spacingGroup2,\n },\n captionBottom: {\n captionSide: \"bottom\",\n // mt-4\n marginTop: tokens.spacingGroup2,\n },\n})\n\nexport type TableProps = React.ComponentProps<\"table\"> & {\n density?: TableDensity\n}\n\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n function Table({ className, density, children, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <div className={styles.wrapper}>\n <table\n ref={ref}\n data-slot=\"table\"\n {...{ [SLOT_ATTR]: \"table\" }}\n className={mergeClasses(styles.root, className)}\n {...props}\n // Authoritative, spread last: a raw caller data-density prop (part of {...props}, since\n // TableProps extends every native table prop) must never win over the normalized density\n // prop — same invariant DensityProvider enforces for its own data-density stamp.\n // canonicalDensity here is the SAME normalization DensityContextBoundary below applies to\n // the context value, so an invalid density can never make the DOM and context disagree\n // (correction 2 in this file's header comment).\n {...(density !== undefined\n ? { \"data-density\": canonicalDensity(density) }\n : {})}\n >\n <DensityContextBoundary density={density}>\n {children}\n </DensityContextBoundary>\n </table>\n </div>\n )\n }\n)\n\nexport const TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.ComponentProps<\"thead\">\n>(function TableHeader({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <thead\n ref={ref}\n data-slot=\"table-header\"\n {...{ [SLOT_ATTR]: \"table-header\" }}\n className={mergeClasses(styles.header, className)}\n {...props}\n />\n )\n})\n\nexport const TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.ComponentProps<\"tbody\">\n>(function TableBody({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <tbody\n ref={ref}\n data-slot=\"table-body\"\n {...{ [SLOT_ATTR]: \"table-body\" }}\n className={mergeClasses(styles.body, className)}\n {...props}\n />\n )\n})\n\nexport const TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.ComponentProps<\"tfoot\">\n>(function TableFooter({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <tfoot\n ref={ref}\n data-slot=\"table-footer\"\n {...{ [SLOT_ATTR]: \"table-footer\" }}\n className={mergeClasses(styles.footer, className)}\n {...props}\n />\n )\n})\n\nexport type TableRowProps = React.ComponentProps<\"tr\"> & {\n /** Disable hover background effect */\n noHover?: boolean\n}\n\nexport const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n function TableRow({ className, noHover, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <tr\n ref={ref}\n data-slot=\"table-row\"\n {...{ [SLOT_ATTR]: \"table-row\" }}\n className={mergeClasses(\n styles.row,\n !noHover && styles.rowHover,\n className\n )}\n {...props}\n />\n )\n }\n)\n\nexport type TableHeadProps = React.ComponentProps<\"th\"> & {\n align?: \"left\" | \"center\" | \"right\"\n density?: TableDensity\n}\n\nexport const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n function TableHead(\n { className, align = \"left\", density, scope = \"col\", children, ...props },\n ref\n ) {\n const styles = useStyles()\n\n const alignment =\n align === \"center\"\n ? styles.alignCenter\n : align === \"right\"\n ? styles.alignRight\n : styles.alignLeft\n\n return (\n <th\n ref={ref}\n data-slot=\"table-head\"\n {...{ [SLOT_ATTR]: \"table-head\" }}\n scope={scope}\n className={mergeClasses(styles.head, alignment, className)}\n {...props}\n // Authoritative, normalized, spread last — see the matching comment on Table above.\n {...(density !== undefined\n ? { \"data-density\": canonicalDensity(density) }\n : {})}\n >\n {/* Correction 1 above: an explicit per-cell override must also establish the\n context boundary, not just the DOM stamp — a real portal (Select/Popover/etc.) rendered\n inside this cell is a DOM sibling, not a descendant, so only useDensity() reaches it. */}\n <DensityContextBoundary density={density}>\n {children}\n </DensityContextBoundary>\n </th>\n )\n }\n)\n\nexport type TableCellProps = React.ComponentProps<\"td\"> & {\n align?: \"left\" | \"center\" | \"right\"\n numeric?: boolean\n density?: TableDensity\n}\n\nexport const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n function TableCell(\n { className, align = \"left\", numeric, density, children, ...props },\n ref\n ) {\n const styles = useStyles()\n\n const alignment =\n align === \"center\"\n ? styles.alignCenter\n : align === \"right\"\n ? styles.alignRight\n : styles.alignLeft\n\n return (\n <td\n ref={ref}\n data-slot=\"table-cell\"\n {...{ [SLOT_ATTR]: \"table-cell\" }}\n className={mergeClasses(\n styles.cell,\n alignment,\n numeric && styles.cellNumeric,\n className\n )}\n {...props}\n // Authoritative, normalized, spread last — see the matching comment on Table above.\n {...(density !== undefined\n ? { \"data-density\": canonicalDensity(density) }\n : {})}\n >\n {/* Correction 1 above: see the matching comment on TableHead. */}\n <DensityContextBoundary density={density}>\n {children}\n </DensityContextBoundary>\n </td>\n )\n }\n)\n\nexport type TableCaptionProps = React.ComponentProps<\"caption\"> & {\n position?: \"top\" | \"bottom\"\n}\n\nexport const TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n TableCaptionProps\n>(function TableCaption({ className, position = \"bottom\", ...props }, ref) {\n const styles = useStyles()\n\n return (\n <caption\n ref={ref}\n data-slot=\"table-caption\"\n {...{ [SLOT_ATTR]: \"table-caption\" }}\n className={mergeClasses(\n styles.caption,\n position === \"top\" ? styles.captionTop : styles.captionBottom,\n className\n )}\n {...props}\n />\n )\n})\n\nexport { TableDensityContext }\n"],"names":["TableDensityContext","React","useStyles","makeZenithStyles","shorthands","tokens.textSm","tokens.leadingSm","tokens.grayA5","tokens.semGraySoft","tokens.fontWeightMedium","tokens.accentA3","tokens.spacingElement3","tokens.tableHeadHeight","tokens.grayA12","tokens.tableCellPaddingY","tokens.fontWeightNormal","tokens.grayA11","tokens.spacingGroup2","Table","className","density","children","props","ref","styles","jsx","SLOT_ATTR","mergeClasses","canonicalDensity","DensityContextBoundary","TableHeader","TableBody","TableFooter","TableRow","noHover","TableHead","align","scope","alignment","TableCell","numeric","TableCaption","position"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"table.js","sources":["../../../src/components/table/table.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport {\n canonicalDensity,\n DensityContextBoundary,\n} from \"../density-provider/density-provider\"\n\n/**\n * Table — the primitive set (Table, TableHeader, TableBody, TableFooter, TableRow, TableHead,\n * TableCell, TableCaption) in Card's compound pattern: one `makeZenithStyles` call, one slot per\n * sub-component, each reading its own slot.\n */\n\nexport type TableDensity = \"compact\" | \"normal\" | \"comfortable\"\n\n/**\n * 2026-09-09).\n * @deprecated No longer a supported way to control Table/DataTable geometry (approved\n */\nconst TableDensityContext = React.createContext<TableDensity>(\"normal\")\n\nconst useStyles = makeZenithStyles({\n wrapper: {\n position: \"relative\",\n width: \"100%\",\n ...shorthands.overflow(\"auto\"),\n },\n root: {\n width: \"100%\",\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n },\n header: {\n \"& tr\": {\n ...shorthands.borderBottom(\"1px\", \"solid\", tokens.grayA5),\n },\n },\n body: {\n \"& tr:last-child\": {\n ...shorthands.borderWidth(0),\n },\n },\n footer: {\n ...shorthands.borderTop(\"1px\", \"solid\", tokens.grayA5),\n backgroundColor: tokens.graySoft,\n fontWeight: tokens.fontWeightMedium,\n \"& > tr:last-child\": {\n borderBottomWidth: 0,\n },\n },\n row: {\n ...shorthands.borderBottom(\"1px\", \"solid\", tokens.grayA5),\n transitionProperty:\n \"color, background-color, border-color, text-decoration-color, fill, stroke\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n \"&[data-state='selected']\": {\n backgroundColor: tokens.accentA3,\n },\n },\n rowHover: {\n \":hover\": {\n backgroundColor: tokens.accentA3,\n },\n },\n head: {\n // px-3\n paddingLeft: tokens.spacingElement3,\n paddingRight: tokens.spacingElement3,\n // Density-bound: cascades from the nearest [data-density] ancestor — 32/36/40px for\n // compact/normal/comfortable. No JS density switch needed.\n height: tokens.tableHeadHeight,\n verticalAlign: \"middle\",\n fontWeight: tokens.fontWeightMedium,\n color: tokens.grayA12,\n \"&:has([role='checkbox'])\": {\n paddingRight: 0,\n },\n \"& > [role='checkbox']\": {\n // v1 `translate-y-[2px]`.\n translate: \"0 2px\",\n },\n },\n alignLeft: {\n textAlign: \"left\",\n },\n alignCenter: {\n textAlign: \"center\",\n },\n alignRight: {\n textAlign: \"right\",\n },\n cell: {\n // px-3\n paddingLeft: tokens.spacingElement3,\n paddingRight: tokens.spacingElement3,\n // Density-bound: cascades from the nearest [data-density] ancestor — 6/8/12px for\n // compact/normal/comfortable. No JS density switch needed.\n paddingTop: tokens.tableCellPaddingY,\n paddingBottom: tokens.tableCellPaddingY,\n verticalAlign: \"middle\",\n fontWeight: tokens.fontWeightNormal,\n color: tokens.grayA12,\n \"&:has([role='checkbox'])\": {\n paddingRight: 0,\n },\n \"& > [role='checkbox']\": {\n // v1 `translate-y-[2px]`.\n translate: \"0 2px\",\n },\n },\n cellNumeric: {\n fontVariantNumeric: \"tabular-nums\",\n },\n caption: {\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n color: tokens.grayA11,\n },\n captionTop: {\n captionSide: \"top\",\n // mb-4\n marginBottom: tokens.spacingGroup2,\n },\n captionBottom: {\n captionSide: \"bottom\",\n // mt-4\n marginTop: tokens.spacingGroup2,\n },\n})\n\nexport type TableProps = React.ComponentProps<\"table\"> & {\n density?: TableDensity\n}\n\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n function Table({ className, density, children, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <div className={styles.wrapper}>\n <table\n ref={ref}\n data-slot=\"table\"\n {...{ [SLOT_ATTR]: \"table\" }}\n className={mergeClasses(styles.root, className)}\n {...props}\n // Authoritative, spread last: a raw caller data-density prop (part of {...props}, since\n // TableProps extends every native table prop) must never win over the normalized density\n // prop — same invariant DensityProvider enforces for its own data-density stamp.\n {...(density !== undefined\n ? { \"data-density\": canonicalDensity(density) }\n : {})}\n >\n <DensityContextBoundary density={density}>\n {children}\n </DensityContextBoundary>\n </table>\n </div>\n )\n }\n)\n\nexport const TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.ComponentProps<\"thead\">\n>(function TableHeader({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <thead\n ref={ref}\n data-slot=\"table-header\"\n {...{ [SLOT_ATTR]: \"table-header\" }}\n className={mergeClasses(styles.header, className)}\n {...props}\n />\n )\n})\n\nexport const TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.ComponentProps<\"tbody\">\n>(function TableBody({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <tbody\n ref={ref}\n data-slot=\"table-body\"\n {...{ [SLOT_ATTR]: \"table-body\" }}\n className={mergeClasses(styles.body, className)}\n {...props}\n />\n )\n})\n\nexport const TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.ComponentProps<\"tfoot\">\n>(function TableFooter({ className, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <tfoot\n ref={ref}\n data-slot=\"table-footer\"\n {...{ [SLOT_ATTR]: \"table-footer\" }}\n className={mergeClasses(styles.footer, className)}\n {...props}\n />\n )\n})\n\nexport type TableRowProps = React.ComponentProps<\"tr\"> & {\n /** Disable hover background effect */\n noHover?: boolean\n}\n\nexport const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n function TableRow({ className, noHover, ...props }, ref) {\n const styles = useStyles()\n\n return (\n <tr\n ref={ref}\n data-slot=\"table-row\"\n {...{ [SLOT_ATTR]: \"table-row\" }}\n className={mergeClasses(\n styles.row,\n !noHover && styles.rowHover,\n className\n )}\n {...props}\n />\n )\n }\n)\n\nexport type TableHeadProps = React.ComponentProps<\"th\"> & {\n align?: \"left\" | \"center\" | \"right\"\n density?: TableDensity\n}\n\nexport const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n function TableHead(\n { className, align = \"left\", density, scope = \"col\", children, ...props },\n ref\n ) {\n const styles = useStyles()\n\n const alignment =\n align === \"center\"\n ? styles.alignCenter\n : align === \"right\"\n ? styles.alignRight\n : styles.alignLeft\n\n return (\n <th\n ref={ref}\n data-slot=\"table-head\"\n {...{ [SLOT_ATTR]: \"table-head\" }}\n scope={scope}\n className={mergeClasses(styles.head, alignment, className)}\n {...props}\n // Authoritative, normalized, spread last — see the matching comment on Table above.\n {...(density !== undefined\n ? { \"data-density\": canonicalDensity(density) }\n : {})}\n >\n {/* Correction 1 above: an explicit per-cell override must also establish the\n context boundary, not just the DOM stamp — a real portal (Select/Popover/etc.) rendered\n inside this cell is a DOM sibling, not a descendant, so only useDensity() reaches it. */}\n <DensityContextBoundary density={density}>\n {children}\n </DensityContextBoundary>\n </th>\n )\n }\n)\n\nexport type TableCellProps = React.ComponentProps<\"td\"> & {\n align?: \"left\" | \"center\" | \"right\"\n numeric?: boolean\n density?: TableDensity\n}\n\nexport const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n function TableCell(\n { className, align = \"left\", numeric, density, children, ...props },\n ref\n ) {\n const styles = useStyles()\n\n const alignment =\n align === \"center\"\n ? styles.alignCenter\n : align === \"right\"\n ? styles.alignRight\n : styles.alignLeft\n\n return (\n <td\n ref={ref}\n data-slot=\"table-cell\"\n {...{ [SLOT_ATTR]: \"table-cell\" }}\n className={mergeClasses(\n styles.cell,\n alignment,\n numeric && styles.cellNumeric,\n className\n )}\n {...props}\n // Authoritative, normalized, spread last — see the matching comment on Table above.\n {...(density !== undefined\n ? { \"data-density\": canonicalDensity(density) }\n : {})}\n >\n {/* Correction 1 above: see the matching comment on TableHead. */}\n <DensityContextBoundary density={density}>\n {children}\n </DensityContextBoundary>\n </td>\n )\n }\n)\n\nexport type TableCaptionProps = React.ComponentProps<\"caption\"> & {\n position?: \"top\" | \"bottom\"\n}\n\nexport const TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n TableCaptionProps\n>(function TableCaption({ className, position = \"bottom\", ...props }, ref) {\n const styles = useStyles()\n\n return (\n <caption\n ref={ref}\n data-slot=\"table-caption\"\n {...{ [SLOT_ATTR]: \"table-caption\" }}\n className={mergeClasses(\n styles.caption,\n position === \"top\" ? styles.captionTop : styles.captionBottom,\n className\n )}\n {...props}\n />\n )\n})\n\nexport { TableDensityContext }\n"],"names":["TableDensityContext","React","useStyles","makeZenithStyles","shorthands","tokens.textSm","tokens.leadingSm","tokens.grayA5","tokens.graySoft","tokens.fontWeightMedium","tokens.accentA3","tokens.spacingElement3","tokens.tableHeadHeight","tokens.grayA12","tokens.tableCellPaddingY","tokens.fontWeightNormal","tokens.grayA11","tokens.spacingGroup2","Table","className","density","children","props","ref","styles","jsx","SLOT_ATTR","mergeClasses","canonicalDensity","DensityContextBoundary","TableHeader","TableBody","TableFooter","TableRow","noHover","TableHead","align","scope","alignment","TableCell","numeric","TableCaption","position"],"mappings":";;;;;;AAwBA,MAAMA,IAAsBC,EAAM,cAA4B,QAAQ,GAEhEC,IAAYC,EAAiB;AAAA,EACjC,SAAS;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,IACP,GAAGC,EAAW,SAAS,MAAM;AAAA,EAAA;AAAA,EAE/B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAUC;AAAAA,IACV,YAAYC;AAAAA,EAAO;AAAA,EAErB,QAAQ;AAAA,IACN,QAAQ;AAAA,MACN,GAAGF,EAAW,aAAa,OAAO,SAASG,CAAa;AAAA,IAAA;AAAA,EAC1D;AAAA,EAEF,MAAM;AAAA,IACJ,mBAAmB;AAAA,MACjB,GAAGH,EAAW,YAAY,CAAC;AAAA,IAAA;AAAA,EAC7B;AAAA,EAEF,QAAQ;AAAA,IACN,GAAGA,EAAW,UAAU,OAAO,SAASG,CAAa;AAAA,IACrD,iBAAiBC;AAAAA,IACjB,YAAYC;AAAAA,IACZ,qBAAqB;AAAA,MACnB,mBAAmB;AAAA,IAAA;AAAA,EACrB;AAAA,EAEF,KAAK;AAAA,IACH,GAAGL,EAAW,aAAa,OAAO,SAASG,CAAa;AAAA,IACxD,oBACE;AAAA,IACF,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,4BAA4B;AAAA,MAC1B,iBAAiBG;AAAAA,IAAO;AAAA,EAC1B;AAAA,EAEF,UAAU;AAAA,IACR,UAAU;AAAA,MACR,iBAAiBA;AAAAA,IAAO;AAAA,EAC1B;AAAA,EAEF,MAAM;AAAA;AAAA,IAEJ,aAAaC;AAAAA,IACb,cAAcA;AAAAA;AAAAA;AAAAA,IAGd,QAAQC;AAAAA,IACR,eAAe;AAAA,IACf,YAAYH;AAAAA,IACZ,OAAOI;AAAAA,IACP,4BAA4B;AAAA,MAC1B,cAAc;AAAA,IAAA;AAAA,IAEhB,yBAAyB;AAAA;AAAA,MAEvB,WAAW;AAAA,IAAA;AAAA,EACb;AAAA,EAEF,WAAW;AAAA,IACT,WAAW;AAAA,EAAA;AAAA,EAEb,aAAa;AAAA,IACX,WAAW;AAAA,EAAA;AAAA,EAEb,YAAY;AAAA,IACV,WAAW;AAAA,EAAA;AAAA,EAEb,MAAM;AAAA;AAAA,IAEJ,aAAaF;AAAAA,IACb,cAAcA;AAAAA;AAAAA;AAAAA,IAGd,YAAYG;AAAAA,IACZ,eAAeA;AAAAA,IACf,eAAe;AAAA,IACf,YAAYC;AAAAA,IACZ,OAAOF;AAAAA,IACP,4BAA4B;AAAA,MAC1B,cAAc;AAAA,IAAA;AAAA,IAEhB,yBAAyB;AAAA;AAAA,MAEvB,WAAW;AAAA,IAAA;AAAA,EACb;AAAA,EAEF,aAAa;AAAA,IACX,oBAAoB;AAAA,EAAA;AAAA,EAEtB,SAAS;AAAA,IACP,UAAUR;AAAAA,IACV,YAAYC;AAAAA,IACZ,OAAOU;AAAAA,EAAO;AAAA,EAEhB,YAAY;AAAA,IACV,aAAa;AAAA;AAAA,IAEb,cAAcC;AAAAA,EAAO;AAAA,EAEvB,eAAe;AAAA,IACb,aAAa;AAAA;AAAA,IAEb,WAAWA;AAAAA,EAAO;AAEtB,CAAC,GAMYC,IAAQjB,EAAM;AAAA,EACzB,SAAe,EAAE,WAAAkB,GAAW,SAAAC,GAAS,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AAC9D,UAAMC,IAAStB,EAAA;AAEf,WACE,gBAAAuB,EAAC,OAAA,EAAI,WAAWD,EAAO,SACrB,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,aAAU;AAAA,QACJ,CAACG,CAAS,GAAG;AAAA,QACnB,WAAWC,EAAaH,EAAO,MAAML,CAAS;AAAA,QAC7C,GAAGG;AAAA,QAIH,GAAIF,MAAY,SACb,EAAE,gBAAgBQ,EAAiBR,CAAO,EAAA,IAC1C,CAAA;AAAA,QAEJ,UAAA,gBAAAK,EAACI,GAAA,EAAuB,SAAAT,GACrB,UAAAC,EAAA,CACH;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF,GAEaS,IAAc7B,EAAM,WAG/B,SAAqB,EAAE,WAAAkB,GAAW,GAAGG,EAAA,GAASC,GAAK;AACnD,QAAMC,IAAStB,EAAA;AAEf,SACE,gBAAAuB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAO,QAAQL,CAAS;AAAA,MAC/C,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAEYS,IAAY9B,EAAM,WAG7B,SAAmB,EAAE,WAAAkB,GAAW,GAAGG,EAAA,GAASC,GAAK;AACjD,QAAMC,IAAStB,EAAA;AAEf,SACE,gBAAAuB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAO,MAAML,CAAS;AAAA,MAC7C,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAEYU,IAAc/B,EAAM,WAG/B,SAAqB,EAAE,WAAAkB,GAAW,GAAGG,EAAA,GAASC,GAAK;AACnD,QAAMC,IAAStB,EAAA;AAEf,SACE,gBAAAuB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAO,QAAQL,CAAS;AAAA,MAC/C,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAOYW,IAAWhC,EAAM;AAAA,EAC5B,SAAkB,EAAE,WAAAkB,GAAW,SAAAe,GAAS,GAAGZ,EAAA,GAASC,GAAK;AACvD,UAAMC,IAAStB,EAAA;AAEf,WACE,gBAAAuB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,aAAU;AAAA,QACJ,CAACG,CAAS,GAAG;AAAA,QACnB,WAAWC;AAAA,UACTH,EAAO;AAAA,UACP,CAACU,KAAWV,EAAO;AAAA,UACnBL;AAAA,QAAA;AAAA,QAED,GAAGG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF,GAOaa,IAAYlC,EAAM;AAAA,EAC7B,SACE,EAAE,WAAAkB,GAAW,OAAAiB,IAAQ,QAAQ,SAAAhB,GAAS,OAAAiB,IAAQ,OAAO,UAAAhB,GAAU,GAAGC,EAAA,GAClEC,GACA;AACA,UAAMC,IAAStB,EAAA,GAEToC,IACJF,MAAU,WACNZ,EAAO,cACPY,MAAU,UACRZ,EAAO,aACPA,EAAO;AAEf,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,aAAU;AAAA,QACJ,CAACG,CAAS,GAAG;AAAA,QACnB,OAAAW;AAAA,QACA,WAAWV,EAAaH,EAAO,MAAMc,GAAWnB,CAAS;AAAA,QACxD,GAAGG;AAAA,QAEH,GAAIF,MAAY,SACb,EAAE,gBAAgBQ,EAAiBR,CAAO,EAAA,IAC1C,CAAA;AAAA,QAKJ,UAAA,gBAAAK,EAACI,GAAA,EAAuB,SAAAT,GACrB,UAAAC,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF,GAQakB,IAAYtC,EAAM;AAAA,EAC7B,SACE,EAAE,WAAAkB,GAAW,OAAAiB,IAAQ,QAAQ,SAAAI,GAAS,SAAApB,GAAS,UAAAC,GAAU,GAAGC,EAAA,GAC5DC,GACA;AACA,UAAMC,IAAStB,EAAA,GAEToC,IACJF,MAAU,WACNZ,EAAO,cACPY,MAAU,UACRZ,EAAO,aACPA,EAAO;AAEf,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,aAAU;AAAA,QACJ,CAACG,CAAS,GAAG;AAAA,QACnB,WAAWC;AAAA,UACTH,EAAO;AAAA,UACPc;AAAA,UACAE,KAAWhB,EAAO;AAAA,UAClBL;AAAA,QAAA;AAAA,QAED,GAAGG;AAAA,QAEH,GAAIF,MAAY,SACb,EAAE,gBAAgBQ,EAAiBR,CAAO,EAAA,IAC1C,CAAA;AAAA,QAGJ,UAAA,gBAAAK,EAACI,GAAA,EAAuB,SAAAT,GACrB,UAAAC,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF,GAMaoB,IAAexC,EAAM,WAGhC,SAAsB,EAAE,WAAAkB,GAAW,UAAAuB,IAAW,UAAU,GAAGpB,EAAA,GAASC,GAAK;AACzE,QAAMC,IAAStB,EAAA;AAEf,SACE,gBAAAuB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWC;AAAA,QACTH,EAAO;AAAA,QACPkB,MAAa,QAAQlB,EAAO,aAAaA,EAAO;AAAA,QAChDL;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
|
|
@@ -55,7 +55,16 @@ const R = m({
|
|
|
55
55
|
letterSpacing: e,
|
|
56
56
|
display: "inline-block"
|
|
57
57
|
},
|
|
58
|
-
// Helper variants
|
|
58
|
+
// Helper variants.
|
|
59
|
+
//
|
|
60
|
+
// `grayA11` is the alpha ink, and it composites against whatever is painted behind it, which is
|
|
61
|
+
// what you want: it tracks the backdrop instead of holding one value. Measured against the solid
|
|
62
|
+
// `gray11` it is equal on the page (5.89 vs 5.90) and ahead on any tinted surface -- 5.51 vs 4.82
|
|
63
|
+
// on a gray-4 row, 5.53 vs 4.88 on accent-4 selected.
|
|
64
|
+
//
|
|
65
|
+
// This was briefly switched to the solid over a 1.07:1 reading, but the alpha was not the cause:
|
|
66
|
+
// AppearanceBoundary declared a mode and painted nothing, so BOTH inks landed on the wrong canvas
|
|
67
|
+
// (alpha 1.08, solid 2.09). That is fixed in the boundary, which now paints the mode it declares.
|
|
59
68
|
helper2: {
|
|
60
69
|
fontSize: n,
|
|
61
70
|
lineHeight: i,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text.js","sources":["../../../src/components/text/text.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * Text — the v1 text scale ported to Griffel atoms
|
|
1
|
+
{"version":3,"file":"text.js","sources":["../../../src/components/text/text.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * Text — the v1 text scale ported to Griffel atoms. v1 expressed the ten variants as cva classes\n * (`text-3xl tracking-tighter font-bold` etc.), one per variant.\n */\n\nexport type TextVariant =\n | \"title3\"\n | \"title2\"\n | \"title1\"\n | \"heading3\"\n | \"heading2\"\n | \"heading1\"\n | \"body2\"\n | \"body1\"\n | \"helper2\"\n | \"helper1\"\n\nconst useStyles = makeZenithStyles({\n // Title variants\n title3: {\n fontSize: tokens.text3xl,\n lineHeight: tokens.leading3xl,\n letterSpacing: tokens.trackingTighter,\n fontWeight: tokens.fontWeightBold,\n },\n title2: {\n fontSize: tokens.text2xl,\n lineHeight: tokens.leading2xl,\n letterSpacing: tokens.trackingTight,\n fontWeight: tokens.fontWeightBold,\n },\n title1: {\n fontSize: tokens.textXl,\n lineHeight: tokens.leadingXl,\n letterSpacing: tokens.trackingTight,\n fontWeight: tokens.fontWeightBold,\n },\n // Heading variants\n heading3: {\n fontSize: tokens.textLg,\n lineHeight: tokens.leadingLg,\n letterSpacing: tokens.trackingTight,\n fontWeight: tokens.fontWeightBold,\n },\n heading2: {\n fontSize: tokens.textBase,\n lineHeight: tokens.leadingBase,\n letterSpacing: tokens.trackingNormal,\n fontWeight: tokens.fontWeightBold,\n },\n heading1: {\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n letterSpacing: tokens.trackingNormal,\n fontWeight: tokens.fontWeightBold,\n },\n // Body variants\n body2: {\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n letterSpacing: tokens.trackingNormal,\n display: \"inline-block\",\n },\n body1: {\n fontSize: tokens.textXs,\n lineHeight: tokens.leadingXs,\n letterSpacing: tokens.trackingNormal,\n display: \"inline-block\",\n },\n // Helper variants.\n //\n // `grayA11` is the alpha ink, and it composites against whatever is painted behind it, which is\n // what you want: it tracks the backdrop instead of holding one value. Measured against the solid\n // `gray11` it is equal on the page (5.89 vs 5.90) and ahead on any tinted surface -- 5.51 vs 4.82\n // on a gray-4 row, 5.53 vs 4.88 on accent-4 selected.\n //\n // This was briefly switched to the solid over a 1.07:1 reading, but the alpha was not the cause:\n // AppearanceBoundary declared a mode and painted nothing, so BOTH inks landed on the wrong canvas\n // (alpha 1.08, solid 2.09). That is fixed in the boundary, which now paints the mode it declares.\n helper2: {\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n letterSpacing: tokens.trackingNormal,\n display: \"inline-block\",\n color: tokens.grayA11,\n },\n helper1: {\n fontSize: tokens.textXs,\n lineHeight: tokens.leadingXs,\n letterSpacing: tokens.trackingNormal,\n display: \"inline-block\",\n color: tokens.grayA11,\n },\n})\n\nexport type TextProps = React.ComponentProps<\"span\"> & {\n /**\n * The role and size of the text, as one value. **The number runs opposite to HTML heading\n * convention: 3 is the largest of its group and 1 the smallest.** `title3` is `text3xl` and\n * `title1` is `textXl`; `heading3` is `textLg` and `heading1` is `textSm`. Reading `title1` as\n * \"the primary title\" gives you the smallest one.\n */\n variant?: TextVariant\n}\n\nexport const Text = React.forwardRef<HTMLSpanElement, TextProps>(function Text(\n { variant = \"body2\", className, ...props },\n ref\n) {\n const styles = useStyles()\n\n return (\n <span\n ref={ref}\n data-slot=\"text\"\n {...{ [SLOT_ATTR]: \"text\" }}\n className={mergeClasses(styles[variant], className)}\n {...props}\n />\n )\n})\n"],"names":["useStyles","makeZenithStyles","tokens.text3xl","tokens.leading3xl","tokens.trackingTighter","tokens.fontWeightBold","tokens.text2xl","tokens.leading2xl","tokens.trackingTight","tokens.textXl","tokens.leadingXl","tokens.textLg","tokens.leadingLg","tokens.textBase","tokens.leadingBase","tokens.trackingNormal","tokens.textSm","tokens.leadingSm","tokens.textXs","tokens.leadingXs","tokens.grayA11","Text","React","variant","className","props","ref","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":";;;;;AAyBA,MAAMA,IAAYC,EAAiB;AAAA;AAAA,EAEjC,QAAQ;AAAA,IACN,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeC;AAAAA,IACf,YAAYC;AAAAA,EAAO;AAAA,EAErB,QAAQ;AAAA,IACN,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeC;AAAAA,IACf,YAAYH;AAAAA,EAAO;AAAA,EAErB,QAAQ;AAAA,IACN,UAAUI;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeF;AAAAA,IACf,YAAYH;AAAAA,EAAO;AAAA;AAAA,EAGrB,UAAU;AAAA,IACR,UAAUM;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeJ;AAAAA,IACf,YAAYH;AAAAA,EAAO;AAAA,EAErB,UAAU;AAAA,IACR,UAAUQ;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeC;AAAAA,IACf,YAAYV;AAAAA,EAAO;AAAA,EAErB,UAAU;AAAA,IACR,UAAUW;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeF;AAAAA,IACf,YAAYV;AAAAA,EAAO;AAAA;AAAA,EAGrB,OAAO;AAAA,IACL,UAAUW;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeF;AAAAA,IACf,SAAS;AAAA,EAAA;AAAA,EAEX,OAAO;AAAA,IACL,UAAUG;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeJ;AAAAA,IACf,SAAS;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYX,SAAS;AAAA,IACP,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeF;AAAAA,IACf,SAAS;AAAA,IACT,OAAOK;AAAAA,EAAO;AAAA,EAEhB,SAAS;AAAA,IACP,UAAUF;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeJ;AAAAA,IACf,SAAS;AAAA,IACT,OAAOK;AAAAA,EAAO;AAElB,CAAC,GAYYC,IAAOC,EAAM,WAAuC,SAC/D,EAAE,SAAAC,IAAU,SAAS,WAAAC,GAAW,GAAGC,EAAA,GACnCC,GACA;AACA,QAAMC,IAAS3B,EAAA;AAEf,SACE,gBAAA4B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAOJ,CAAO,GAAGC,CAAS;AAAA,MACjD,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
|