npm - @epilot/zenith-react - Versions diffs - 0.2.0-next.6 → 0.2.0-next.7 - Mend

@epilot/zenith-react 0.2.0-next.6 → 0.2.0-next.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (178) hide show

package/dist/components/table/table.js.map CHANGED Viewed

	@@ -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/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\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 ...boxModel,\n position: \"relative\",\n width: \"100%\",\n ...shorthands.overflow(\"auto\"),\n },\n root: {\n ...boxModel,\n // The UA default is `separate`, which adds the cell spacing and double borders the rows' own\n // bottom borders are drawn against.\n borderCollapse: \"collapse\",\n textIndent: 0,\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 ...boxModel,\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 ...boxModel,\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 ...boxModel,\n // px-3\n paddingLeft: tokens.spacingElement3,\n paddingRight: tokens.spacingElement3,\n // A browser pads a bare `<th>` by 1px; the fixed height below is the whole box.\n paddingTop: 0,\n paddingBottom: 0,\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 ...boxModel,\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","boxModel","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":"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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 { boxModel } from \"../../styles/host-reset\"\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 ...boxModel,\n position: \"relative\",\n width: \"100%\",\n ...shorthands.overflow(\"auto\"),\n },\n root: {\n ...boxModel,\n // The UA default is `separate`, which adds the cell spacing and double borders the rows' own\n // bottom borders are drawn against.\n borderCollapse: \"collapse\",\n textIndent: 0,\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 ...boxModel,\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 ...boxModel,\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 ...boxModel,\n // px-3\n paddingLeft: tokens.spacingElement3,\n paddingRight: tokens.spacingElement3,\n // A browser pads a bare `<th>` by 1px; the fixed height below is the whole box.\n paddingTop: 0,\n paddingBottom: 0,\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 ...boxModel,\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","boxModel","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":"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"}

package/dist/components/tabs/tabs.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { jsx as y } from "react/jsx-runtime";
 import * as o from "react";
 import { Tabs as R } from "../../_virtual/_zenith-runtime-family_tabs.js";
 import { DirectionProvider as _ } from "../../_virtual/_zenith-runtime-family_direction-provider.js";
-import { mergeClasses as V, SLOT_ATTR as L, shorthands as r } from "@epilot/zenith-runtime/v1/core.js";
+import { mergeClasses as V, SLOT_ATTR as L, shorthands as r } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as $ } from "../../styles/make-styles.js";
 import { boxModel as k, nativeControl as q } from "../../styles/host-reset.js";
 import { errorA3 as D, errorA8 as J, errorA4 as Q, errorA11 as X, accentA3 as Y, accentA8 as K, accentA4 as tt, accentA12 as et, grayA3 as P, grayA8 as rt, grayA2 as ot, grayA12 as z, fontWeightSemibold as F, leadingSm as at, textSm as nt, spacingElement3 as G, spacingGroup2 as it, spacingElement2 as v, radiusLg as H, spacingElement1 as st } from "../../tokens/index.js";

package/dist/components/tabs/tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { DirectionProvider } from \"@base-ui/react/direction-provider\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\nexport type TabsSize = \"sm\" \| \"base\" \| \"lg\"\nexport type TabsRootVariant = \"default\" \| \"highlight\"\nexport type TabsTriggerVariant = \"default\" \| \"destructive\"\n\ntype TabsActivationMode = \"automatic\" \| \"manual\"\n\ntype TabsContextValue = {\n size: TabsSize\n variant: TabsRootVariant\n /** The root's `activationMode`, which Base UI reads from the list as `activateOnFocus`. /\n activationMode: TabsActivationMode\n /* The root's `dir`, which Base UI reads from a `DirectionProvider` around the list. /\n dir?: \"ltr\" \| \"rtl\"\n /* Marks the start of a pointer press on a trigger; see `beginPress` in `Tabs`. /\n beginPress?: (value: string, doc: Document) => void\n}\n\nconst TabsContext = React.createContext<TabsContextValue>({\n size: \"base\",\n variant: \"default\",\n activationMode: \"automatic\",\n})\n\nconst useStyles = makeZenithStyles({\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n ...shorthands.gap(tokens.spacingElement2),\n \"&[data-orientation='vertical']\": {\n flexDirection: \"row\",\n alignItems: \"flex-start\",\n ...shorthands.gap(tokens.spacingElement2),\n },\n },\n list: {\n ...boxModel,\n backgroundColor: \"transparent\",\n color: tokens.grayA12,\n height: \"auto\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n ...shorthands.gap(tokens.spacingElement2),\n ...shorthands.borderRadius(tokens.radiusLg),\n ...shorthands.paddingBlock(tokens.spacingElement2),\n \"&[data-orientation='vertical']\": {\n flexDirection: \"column\",\n alignItems: \"stretch\",\n justifyContent: \"flex-start\",\n ...shorthands.gap(tokens.spacingElement1),\n ...shorthands.paddingBlock(0),\n },\n },\n trigger: {\n ...nativeControl,\n display: \"inline-flex\",\n alignItems: \"center\",\n ...shorthands.gap(tokens.spacingElement2),\n backgroundColor: \"transparent\",\n ...shorthands.borderStyle(\"none\"),\n ...shorthands.borderWidth(0),\n ...shorthands.borderRadius(tokens.radiusLg),\n cursor: \"pointer\",\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n // A label never wraps, so selection (and its semibold) can never change a tab's height.\n whiteSpace: \"nowrap\",\n transitionProperty: \"all\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineOffset: \"2px\",\n outlineStyle: \"solid\",\n },\n \"&[data-orientation='vertical']\": {\n justifyContent: \"flex-start\",\n textAlign: \"left\",\n width: \"100%\",\n },\n // A plain-text label reserves its semibold width up front: a hidden, zero-height bold copy\n // stacks under it, so every tab is as wide as its bold label in every state and selecting one\n // never moves its neighbours or the panel. Rich children (icons, elements) are not reserved.\n \"&[data-label]\": {\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n rowGap: 0,\n \"&::after\": {\n content: \"attr(data-label)\",\n height: 0,\n ...shorthands.overflow(\"hidden\"),\n visibility: \"hidden\",\n pointerEvents: \"none\",\n userSelect: \"none\",\n fontWeight: tokens.fontWeightSemibold,\n },\n },\n // A vertical rail keeps its labels left-aligned inside the reserved width.\n \"&[data-orientation='vertical'][data-label]\": {\n alignItems: \"flex-start\",\n },\n // #18: the selected tab is marked by a semibold label, not by colour alone.\n \"&[data-active]\": {\n fontWeight: tokens.fontWeightSemibold,\n },\n },\n // Sizes\n sm: {\n ...boxModel,\n ...shorthands.padding(\"0.375rem\", tokens.spacingElement2),\n },\n base: {\n ...boxModel,\n ...shorthands.padding(tokens.spacingElement2, tokens.spacingElement3),\n },\n lg: {\n ...boxModel,\n ...shorthands.padding(tokens.spacingElement3, tokens.spacingGroup2),\n },\n // Variants\n defaultVariant: {\n color: tokens.grayA12,\n // Hover sits below the selected grayA3, so a hovered tab cannot pass for the current one;\n // the selected tab keeps its fill under the pointer.\n \":hover\": {\n backgroundColor: tokens.grayA2,\n },\n \":focus-visible\": {\n outlineColor: tokens.grayA8,\n },\n \"&[data-active]\": {\n backgroundColor: tokens.grayA3,\n \"&:hover\": {\n backgroundColor: tokens.grayA3,\n },\n },\n },\n highlightVariant: {\n color: tokens.accentA12,\n \":hover\": {\n backgroundColor: tokens.accentA4,\n },\n \":focus-visible\": {\n outlineColor: tokens.accentA8,\n },\n \"&[data-active]\": {\n backgroundColor: tokens.accentA3,\n },\n },\n destructiveVariant: {\n color: tokens.errorA11,\n \":hover\": {\n backgroundColor: tokens.errorA4,\n },\n \":focus-visible\": {\n outlineColor: tokens.errorA8,\n },\n \"&[data-active]\": {\n backgroundColor: tokens.errorA3,\n },\n },\n content: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n outlineStyle: \"none\",\n },\n})\n\n// A single child can arrive wrapped in a one-element array depending on the JSX runtime (MDX call\n// sites do this). Radix's Slot normalised that, so the `asChild` shim has to as well.\nfunction onlySlotChild(children: React.ReactNode) {\n const elements = React.Children.toArray(children).filter(React.isValidElement)\n return elements.length === 1 ? elements[0] : undefined\n}\n\n/\n Radix's `asChild` over Base UI's `render`: the single child element becomes the part and keeps\n * its own children, since Base UI lets the rendered element's props win the merge.\n /\nfunction slotProps(asChild: boolean, children: React.ReactNode) {\n const child = asChild ? onlySlotChild(children) : undefined\n return child ? { render: child } : { children }\n}\n\n/\n What `onValueChange` receives as its second argument: Base UI's change details, declared in\n * Zenith so that none of Base UI's internals reach the published declarations, where TypeScript 4\n * cannot parse them.\n /\ntype TabsValueChangeDetails = {\n /\n Why the tab changed. `Tabs` keeps the selection itself, so every change it reports is a\n * person's (a click, a key, or focus under automatic activation), which Base UI calls `none`.\n /\n reason: \"none\"\n /* The native event behind the change. /\n event: Event\n /* Keeps the current tab selected. /\n cancel: () => void\n /* Lets the event propagate where the tabs would otherwise stop it. /\n allowPropagation: () => void\n isCanceled: boolean\n isPropagationAllowed: boolean\n /* The element that caused the change, if any. /\n trigger: Element \| undefined\n /* Where the newly selected tab sits relative to the previous one. /\n activationDirection: \"left\" \| \"right\" \| \"up\" \| \"down\" \| \"none\"\n}\n\n/\n The root's own props, declared in Zenith rather than taken from Base UI, whose types would leak\n * into the published declarations. The root renders a `<div>`, so the DOM attributes,\n * handlers, `ref`, `key`, `className` and `style` stay the div's.\n /\ntype TabsRootProps = {\n /* The value of the selected tab, when the tabs are controlled. /\n value?: string\n /* The value of the tab selected at first, when the tabs are uncontrolled. Without it no tab is selected. /\n defaultValue?: string\n /\n Called with the newly selected tab's value and Base UI's change details. `eventDetails.cancel()`\n * keeps the current tab selected.\n /\n onValueChange?: (value: string, eventDetails: TabsValueChangeDetails) => void\n /\n How the tabs are laid out, which also sets the arrow keys that move between them (left and\n * right, or up and down).\n * @default \"horizontal\"\n /\n orientation?: \"horizontal\" \| \"vertical\"\n /* The reading direction of the tabs; under `rtl` the left and right arrow keys swap. /\n dir?: \"ltr\" \| \"rtl\"\n /\n Whether a tab is selected as soon as the arrow keys focus it (`automatic`), or only on Enter,\n * Space or a click (`manual`).\n * @default \"automatic\"\n /\n activationMode?: TabsActivationMode\n /* Renders the single child element as the root, merging its props and behaviour onto it. /\n asChild?: boolean\n}\n\nexport type TabsProps = Omit<\n React.ComponentPropsWithRef<\"div\">,\n keyof TabsRootProps\n> &\n TabsRootProps & {\n size?: TabsSize\n variant?: TabsRootVariant\n }\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n {\n className,\n size = \"base\",\n variant = \"default\",\n value: valueProp,\n defaultValue,\n onValueChange,\n activationMode = \"automatic\",\n dir,\n asChild = false,\n children,\n ...props\n },\n ref\n) {\n const styles = useStyles()\n\n // Zenith owns the value, so Base UI always receives it controlled: an uncontrolled Base UI root\n // selects its first tab when there is no defaultValue and reports that as a change, where these\n // tabs select nothing. `null` is Base UI's \"no tab selected\".\n const [uncontrolled, setUncontrolled] = React.useState(defaultValue)\n const isControlled = valueProp !== undefined\n const value = isControlled ? valueProp : uncontrolled\n const latest = React.useRef({ isControlled, onValueChange })\n latest.current = { isControlled, onValueChange }\n\n // One pointer press on a trigger can reach `select` twice for the same tab under automatic\n // activation: Base UI selects on the focus the press causes, then again on its click if the tab\n // is still unselected, which it is when a controlled owner declined (#17). A press opens a\n // window in which only the first report for its tab goes through. The click a release causes is\n // dispatched in the same task as its pointerup, so the window closes on the task after that.\n const press = React.useRef<{ value: string; reported: boolean } \| null>(null)\n const beginPress = React.useCallback((pressed: string, doc: Document) => {\n const token = { value: pressed, reported: false }\n press.current = token\n const end = () => {\n doc.removeEventListener(\"pointerup\", end, true)\n doc.removeEventListener(\"pointercancel\", end, true)\n setTimeout(() => {\n if (press.current === token) press.current = null\n }, 0)\n }\n doc.addEventListener(\"pointerup\", end, true)\n doc.addEventListener(\"pointercancel\", end, true)\n }, [])\n\n const select = React.useCallback(\n (next: string, eventDetails: TabsPrimitive.Root.ChangeEventDetails) => {\n const pressed = press.current\n if (pressed !== null && pressed.value === next) {\n if (pressed.reported) {\n eventDetails.cancel()\n return\n }\n pressed.reported = true\n }\n const current = latest.current\n // Base UI reports `initial`, `disabled` and `missing` only for an uncontrolled root, and this\n // one is always controlled, so the reason is `none`.\n current.onValueChange?.(next, eventDetails as TabsValueChangeDetails)\n if (!current.isControlled && !eventDetails.isCanceled)\n setUncontrolled(next)\n },\n []\n )\n\n const contextValue = React.useMemo(\n () => ({ size, variant, activationMode, dir, beginPress }),\n [size, variant, activationMode, dir, beginPress]\n )\n\n return (\n <TabsContext.Provider value={contextValue}>\n <TabsPrimitive.Root\n ref={ref}\n data-slot=\"tabs\"\n {...{ [SLOT_ATTR]: \"tabs\" }}\n data-size={size}\n data-variant={variant}\n className={mergeClasses(styles.root, className)}\n // Base UI types the root's handlers with its own event wrapper; the element is the same\n // <div>, so the caller's div-typed handlers receive exactly the events they declare.\n {...(props as TabsPrimitive.Root.Props)}\n dir={dir}\n {...slotProps(asChild, children)}\n value={value ?? null}\n onValueChange={select}\n />\n </TabsContext.Provider>\n )\n})\n\nexport type TabsListProps = React.ComponentPropsWithRef<\"div\"> & {\n /* Whether the arrow keys wrap from the last tab to the first and back. @default true /\n loop?: boolean\n /* Renders the single child element as the list, merging its props and behaviour onto it. /\n asChild?: boolean\n}\n\nexport const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(\n function TabsList(\n { className, loop, asChild = false, children, ...props },\n ref\n ) {\n const styles = useStyles()\n const { activationMode, dir } = React.useContext(TabsContext)\n\n const list = (\n <TabsPrimitive.List\n ref={ref}\n data-slot=\"tabs-list\"\n {...{ [SLOT_ATTR]: \"tabs-list\" }}\n className={mergeClasses(styles.list, className)}\n // Radix selected the focused tab by default; Base UI only does when told to.\n activateOnFocus={activationMode === \"automatic\"}\n loopFocus={loop}\n {...(props as TabsPrimitive.List.Props)}\n {...slotProps(asChild, children)}\n />\n )\n\n // Base UI's arrow keys follow the direction a provider gives them, not the root's attribute.\n return dir ? (\n <DirectionProvider direction={dir}>{list}</DirectionProvider>\n ) : (\n list\n )\n }\n)\n\nexport type TabsTriggerProps = Omit<\n React.ComponentPropsWithRef<\"button\">,\n \"value\"\n> & {\n /* Pairs the tab with the `TabsContent` of the same value. /\n value: string\n variant?: TabsTriggerVariant\n /* The tab's label. Plain text (a string, number, or array of them) reserves its semibold width so selection never shifts layout; rich children such as icons or elements are not reserved. /\n children?: React.ReactNode\n /* Renders the single child element as the tab, merging its props and behaviour onto it. /\n asChild?: boolean\n}\n\n/* A string, number, or array of only strings and numbers, as one string; otherwise undefined. /\nfunction plainLabel(children: React.ReactNode): string \| undefined {\n if (typeof children === \"string\" \|\| typeof children === \"number\")\n return String(children)\n if (\n Array.isArray(children) &&\n children.every((c) => typeof c === \"string\" \|\| typeof c === \"number\")\n )\n return children.join(\"\")\n return undefined\n}\n\nexport const TabsTrigger = React.forwardRef<\n HTMLButtonElement,\n TabsTriggerProps\n>(function TabsTrigger(\n {\n className,\n variant = \"default\",\n asChild = false,\n children,\n onClick,\n onKeyDown,\n onPointerDown,\n ...props\n },\n ref\n) {\n const styles = useStyles()\n const {\n size,\n variant: rootVariant,\n beginPress,\n } = React.useContext(TabsContext)\n const child = asChild ? onlySlotChild(children) : undefined\n // Base UI drives a native <button> unless told otherwise; a child that is another intrinsic\n // element gets the ARIA button behaviour Radix's Slot gave it.\n const nativeButton =\n !child \|\| typeof child.type !== \"string\" \|\| child.type === \"button\"\n\n const handlePointerDown: TabsTriggerProps[\"onPointerDown\"] = (event) => {\n onPointerDown?.(event)\n if (event.button === 0 && !props.disabled) {\n beginPress?.(props.value, event.currentTarget.ownerDocument)\n }\n }\n\n // Feeds the reserved-width copy; only plain text can be copied by CSS.\n const label = child ? undefined : plainLabel(children)\n\n const resolvedVariantClass =\n variant === \"destructive\"\n ? styles.destructiveVariant\n : rootVariant === \"highlight\"\n ? styles.highlightVariant\n : styles.defaultVariant\n\n return (\n <TabsPrimitive.Tab\n ref={ref}\n data-slot=\"tabs-trigger\"\n {...{ [SLOT_ATTR]: \"tabs-trigger\" }}\n data-label={label}\n nativeButton={nativeButton}\n className={mergeClasses(\n styles.trigger,\n styles[size],\n resolvedVariantClass,\n className\n )}\n {...(props as TabsPrimitive.Tab.Props)}\n // The caller's handlers run before Base UI's. As under Radix, a click the caller prevented\n // selects nothing, and neither does a ctrl-click, which macOS reserves for the context menu.\n onClick={(event) => {\n onClick?.(event as React.MouseEvent<HTMLButtonElement>)\n if (event.defaultPrevented \|\| event.ctrlKey)\n event.preventBaseUIHandler()\n }}\n // Base UI selects a tab on Space even when the caller prevented the keydown; a prevented\n // key selects nothing, as it does on a native button and did under Radix.\n onKeyDown={(event) => {\n onKeyDown?.(event as React.KeyboardEvent<HTMLButtonElement>)\n if (event.defaultPrevented && event.key === \" \") {\n event.preventBaseUIHandler()\n }\n }}\n onPointerDown={handlePointerDown}\n // The joined label is rendered as one text node, shaped exactly like its reserved copy.\n {...(child\n ? { render: child }\n : { children: label !== undefined ? label : children })}\n />\n )\n})\n\nexport type TabsContentProps = Omit<\n React.ComponentPropsWithRef<\"div\">,\n \"value\"\n> & {\n /* Pairs the panel with the `TabsTrigger` of the same value. /\n value: string\n /* Keeps the panel mounted while its tab is not selected, hidden. /\n forceMount?: true\n /* Renders the single child element as the panel, merging its props and behaviour onto it. */\n asChild?: boolean\n}\n\nexport const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(\n function TabsContent(\n { className, forceMount, asChild = false, children, ...props },\n ref\n ) {\n const styles = useStyles()\n\n return (\n <TabsPrimitive.Panel\n ref={ref}\n data-slot=\"tabs-content\"\n {...{ [SLOT_ATTR]: \"tabs-content\" }}\n className={mergeClasses(styles.content, className)}\n keepMounted={forceMount}\n {...(props as TabsPrimitive.Panel.Props)}\n {...slotProps(asChild, children)}\n />\n )\n }\n)\n"],"names":["TabsContext","React","useStyles","makeZenithStyles","shorthands","tokens.spacingElement2","boxModel","tokens.grayA12","tokens.radiusLg","tokens.spacingElement1","nativeControl","tokens.textSm","tokens.leadingSm","tokens.fontWeightSemibold","tokens.spacingElement3","tokens.spacingGroup2","tokens.grayA2","tokens.grayA8","tokens.grayA3","tokens.accentA12","tokens.accentA4","tokens.accentA8","tokens.accentA3","tokens.errorA11","tokens.errorA4","tokens.errorA8","tokens.errorA3","onlySlotChild","children","elements","slotProps","asChild","child","Tabs","className","size","variant","valueProp","defaultValue","onValueChange","activationMode","dir","props","ref","styles","uncontrolled","setUncontrolled","isControlled","value","latest","press","beginPress","pressed","doc","token","end","select","next","eventDetails","current","_a","contextValue","jsx","TabsPrimitive","SLOT_ATTR","mergeClasses","TabsList","loop","list","DirectionProvider","plainLabel","c","TabsTrigger","onClick","onKeyDown","onPointerDown","rootVariant","nativeButton","handlePointerDown","event","label","resolvedVariantClass","TabsContent","forceMount"],"mappings":";;;;;;;;AA2BA,MAAMA,IAAcC,EAAM,cAAgC;AAAA,EACxD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,gBAAgB;AAClB,CAAC,GAEKC,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,GAAGC,EAAW,IAAIC,CAAsB;AAAA,IACxC,kCAAkC;AAAA,MAChC,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,GAAGD,EAAW,IAAIC,CAAsB;AAAA,IAAA;AAAA,EAC1C;AAAA,EAEF,MAAM;AAAA,IACJ,GAAGC;AAAA,IACH,iBAAiB;AAAA,IACjB,OAAOC;AAAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,GAAGH,EAAW,IAAIC,CAAsB;AAAA,IACxC,GAAGD,EAAW,aAAaI,CAAe;AAAA,IAC1C,GAAGJ,EAAW,aAAaC,CAAsB;AAAA,IACjD,kCAAkC;AAAA,MAChC,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,GAAGD,EAAW,IAAIK,EAAsB;AAAA,MACxC,GAAGL,EAAW,aAAa,CAAC;AAAA,IAAA;AAAA,EAC9B;AAAA,EAEF,SAAS;AAAA,IACP,GAAGM;AAAA,IACH,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAGN,EAAW,IAAIC,CAAsB;AAAA,IACxC,iBAAiB;AAAA,IACjB,GAAGD,EAAW,YAAY,MAAM;AAAA,IAChC,GAAGA,EAAW,YAAY,CAAC;AAAA,IAC3B,GAAGA,EAAW,aAAaI,CAAe;AAAA,IAC1C,QAAQ;AAAA,IACR,UAAUG;AAAAA,IACV,YAAYC;AAAAA;AAAAA,IAEZ,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAc;AAAA,IAAA;AAAA,IAEhB,kCAAkC;AAAA,MAChC,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,OAAO;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA,IAKT,iBAAiB;AAAA,MACf,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,YAAY;AAAA,QACV,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,GAAGR,EAAW,SAAS,QAAQ;AAAA,QAC/B,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,YAAYS;AAAAA,MAAO;AAAA,IACrB;AAAA;AAAA,IAGF,8CAA8C;AAAA,MAC5C,YAAY;AAAA,IAAA;AAAA;AAAA,IAGd,kBAAkB;AAAA,MAChB,YAAYA;AAAAA,IAAO;AAAA,EACrB;AAAA;AAAA,EAGF,IAAI;AAAA,IACF,GAAGP;AAAA,IACH,GAAGF,EAAW,QAAQ,YAAYC,CAAsB;AAAA,EAAA;AAAA,EAE1D,MAAM;AAAA,IACJ,GAAGC;AAAA,IACH,GAAGF,EAAW,QAAQC,GAAwBS,CAAsB;AAAA,EAAA;AAAA,EAEtE,IAAI;AAAA,IACF,GAAGR;AAAA,IACH,GAAGF,EAAW,QAAQU,GAAwBC,EAAoB;AAAA,EAAA;AAAA;AAAA,EAGpE,gBAAgB;AAAA,IACd,OAAOR;AAAAA;AAAAA;AAAAA,IAGP,UAAU;AAAA,MACR,iBAAiBS;AAAAA,IAAO;AAAA,IAE1B,kBAAkB;AAAA,MAChB,cAAcC;AAAAA,IAAO;AAAA,IAEvB,kBAAkB;AAAA,MAChB,iBAAiBC;AAAAA,MACjB,WAAW;AAAA,QACT,iBAAiBA;AAAAA,MAAO;AAAA,IAC1B;AAAA,EACF;AAAA,EAEF,kBAAkB;AAAA,IAChB,OAAOC;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,kBAAkB;AAAA,MAChB,cAAcC;AAAAA,IAAO;AAAA,IAEvB,kBAAkB;AAAA,MAChB,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA,EAEF,oBAAoB;AAAA,IAClB,OAAOC;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,kBAAkB;AAAA,MAChB,cAAcC;AAAAA,IAAO;AAAA,IAEvB,kBAAkB;AAAA,MAChB,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA,EAEF,SAAS;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,cAAc;AAAA,EAAA;AAElB,CAAC;AAID,SAASC,EAAcC,GAA2B;AAChD,QAAMC,IAAW5B,EAAM,SAAS,QAAQ2B,CAAQ,EAAE,OAAO3B,EAAM,cAAc;AAC7E,SAAO4B,EAAS,WAAW,IAAIA,EAAS,CAAC,IAAI;AAC/C;AAMA,SAASC,EAAUC,GAAkBH,GAA2B;AAC9D,QAAMI,IAAQD,IAAUJ,EAAcC,CAAQ,IAAI;AAClD,SAAOI,IAAQ,EAAE,QAAQA,EAAA,IAAU,EAAE,UAAAJ,EAAA;AACvC;AAqEO,MAAMK,KAAOhC,EAAM,WAAsC,SAC9D;AAAA,EACE,WAAAiC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,OAAOC;AAAA,EACP,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,KAAAC;AAAA,EACA,SAAAV,IAAU;AAAA,EACV,UAAAH;AAAA,EACA,GAAGc;AACL,GACAC,GACA;AACA,QAAMC,IAAS1C,EAAA,GAKT,CAAC2C,GAAcC,CAAe,IAAI7C,EAAM,SAASqC,CAAY,GAC7DS,IAAeV,MAAc,QAC7BW,IAAQD,IAAeV,IAAYQ,GACnCI,IAAShD,EAAM,OAAO,EAAE,cAAA8C,GAAc,eAAAR,GAAe;AAC3D,EAAAU,EAAO,UAAU,EAAE,cAAAF,GAAc,eAAAR,EAAA;AAOjC,QAAMW,IAAQjD,EAAM,OAAoD,IAAI,GACtEkD,IAAalD,EAAM,YAAY,CAACmD,GAAiBC,MAAkB;AACvE,UAAMC,IAAQ,EAAE,OAAOF,GAAS,UAAU,GAAA;AAC1C,IAAAF,EAAM,UAAUI;AAChB,UAAMC,IAAM,MAAM;AAChB,MAAAF,EAAI,oBAAoB,aAAaE,GAAK,EAAI,GAC9CF,EAAI,oBAAoB,iBAAiBE,GAAK,EAAI,GAClD,WAAW,MAAM;AACf,QAAIL,EAAM,YAAYI,MAAOJ,EAAM,UAAU;AAAA,MAC/C,GAAG,CAAC;AAAA,IACN;AACA,IAAAG,EAAI,iBAAiB,aAAaE,GAAK,EAAI,GAC3CF,EAAI,iBAAiB,iBAAiBE,GAAK,EAAI;AAAA,EACjD,GAAG,CAAA,CAAE,GAECC,IAASvD,EAAM;AAAA,IACnB,CAACwD,GAAcC,MAAwD;;AACrE,YAAMN,IAAUF,EAAM;AACtB,UAAIE,MAAY,QAAQA,EAAQ,UAAUK,GAAM;AAC9C,YAAIL,EAAQ,UAAU;AACpB,UAAAM,EAAa,OAAA;AACb;AAAA,QACF;AACA,QAAAN,EAAQ,WAAW;AAAA,MACrB;AACA,YAAMO,IAAUV,EAAO;AAGvB,OAAAW,IAAAD,EAAQ,kBAAR,QAAAC,EAAA,KAAAD,GAAwBF,GAAMC,IAC1B,CAACC,EAAQ,gBAAgB,CAACD,EAAa,cACzCZ,EAAgBW,CAAI;AAAA,IACxB;AAAA,IACA,CAAA;AAAA,EAAC,GAGGI,IAAe5D,EAAM;AAAA,IACzB,OAAO,EAAE,MAAAkC,GAAM,SAAAC,GAAS,gBAAAI,GAAgB,KAAAC,GAAK,YAAAU,EAAA;AAAA,IAC7C,CAAChB,GAAMC,GAASI,GAAgBC,GAAKU,CAAU;AAAA,EAAA;AAGjD,SACE,gBAAAW,EAAC9D,EAAY,UAAZ,EAAqB,OAAO6D,GAC3B,UAAA,gBAAAC;AAAA,IAACC,EAAc;AAAA,IAAd;AAAA,MACC,KAAApB;AAAA,MACA,aAAU;AAAA,MACJ,CAACqB,CAAS,GAAG;AAAA,MACnB,aAAW7B;AAAA,MACX,gBAAcC;AAAA,MACd,WAAW6B,EAAarB,EAAO,MAAMV,CAAS;AAAA,MAG7C,GAAIQ;AAAA,MACL,KAAAD;AAAA,MACC,GAAGX,EAAUC,GAASH,CAAQ;AAAA,MAC/B,OAAOoB,KAAS;AAAA,MAChB,eAAeQ;AAAA,IAAA;AAAA,EAAA,GAEnB;AAEJ,CAAC,GASYU,KAAWjE,EAAM;AAAA,EAC5B,SACE,EAAE,WAAAiC,GAAW,MAAAiC,GAAM,SAAApC,IAAU,IAAO,UAAAH,GAAU,GAAGc,EAAA,GACjDC,GACA;AACA,UAAMC,IAAS1C,EAAA,GACT,EAAE,gBAAAsC,GAAgB,KAAAC,EAAA,IAAQxC,EAAM,WAAWD,CAAW,GAEtDoE,IACJ,gBAAAN;AAAA,MAACC,EAAc;AAAA,MAAd;AAAA,QACC,KAAApB;AAAA,QACA,aAAU;AAAA,QACJ,CAACqB,CAAS,GAAG;AAAA,QACnB,WAAWC,EAAarB,EAAO,MAAMV,CAAS;AAAA,QAE9C,iBAAiBM,MAAmB;AAAA,QACpC,WAAW2B;AAAA,QACV,GAAIzB;AAAA,QACJ,GAAGZ,EAAUC,GAASH,CAAQ;AAAA,MAAA;AAAA,IAAA;AAKnC,WAAOa,IACL,gBAAAqB,EAACO,GAAA,EAAkB,WAAW5B,GAAM,aAAK,IAEzC2B;AAAA,EAEJ;AACF;AAgBA,SAASE,GAAW1C,GAA+C;AACjE,MAAI,OAAOA,KAAa,YAAY,OAAOA,KAAa;AACtD,WAAO,OAAOA,CAAQ;AACxB,MACE,MAAM,QAAQA,CAAQ,KACtBA,EAAS,MAAM,CAAC2C,MAAM,OAAOA,KAAM,YAAY,OAAOA,KAAM,QAAQ;AAEpE,WAAO3C,EAAS,KAAK,EAAE;AAE3B;AAEO,MAAM4C,KAAcvE,EAAM,WAG/B,SACA;AAAA,EACE,WAAAiC;AAAA,EACA,SAAAE,IAAU;AAAA,EACV,SAAAL,IAAU;AAAA,EACV,UAAAH;AAAA,EACA,SAAA6C;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGjC;AACL,GACAC,GACA;AACA,QAAMC,IAAS1C,EAAA,GACT;AAAA,IACJ,MAAAiC;AAAA,IACA,SAASyC;AAAA,IACT,YAAAzB;AAAA,EAAA,IACElD,EAAM,WAAWD,CAAW,GAC1BgC,IAAQD,IAAUJ,EAAcC,CAAQ,IAAI,QAG5CiD,IACJ,CAAC7C,KAAS,OAAOA,EAAM,QAAS,YAAYA,EAAM,SAAS,UAEvD8C,IAAuD,CAACC,MAAU;AACtE,IAAAJ,KAAA,QAAAA,EAAgBI,IACZA,EAAM,WAAW,KAAK,CAACrC,EAAM,aAC/BS,KAAA,QAAAA,EAAaT,EAAM,OAAOqC,EAAM,cAAc;AAAA,EAElD,GAGMC,IAAQhD,IAAQ,SAAYsC,GAAW1C,CAAQ,GAE/CqD,IACJ7C,MAAY,gBACRQ,EAAO,qBACPgC,MAAgB,cACdhC,EAAO,mBACPA,EAAO;AAEf,SACE,gBAAAkB;AAAA,IAACC,EAAc;AAAA,IAAd;AAAA,MACC,KAAApB;AAAA,MACA,aAAU;AAAA,MACJ,CAACqB,CAAS,GAAG;AAAA,MACnB,cAAYgB;AAAA,MACZ,cAAAH;AAAA,MACA,WAAWZ;AAAA,QACTrB,EAAO;AAAA,QACPA,EAAOT,CAAI;AAAA,QACX8C;AAAA,QACA/C;AAAA,MAAA;AAAA,MAED,GAAIQ;AAAA,MAGL,SAAS,CAACqC,MAAU;AAClB,QAAAN,KAAA,QAAAA,EAAUM,KACNA,EAAM,oBAAoBA,EAAM,YAClCA,EAAM,qBAAA;AAAA,MACV;AAAA,MAGA,WAAW,CAACA,MAAU;AACpB,QAAAL,KAAA,QAAAA,EAAYK,IACRA,EAAM,oBAAoBA,EAAM,QAAQ,OAC1CA,EAAM,qBAAA;AAAA,MAEV;AAAA,MACA,eAAeD;AAAA,MAEd,GAAI9C,IACD,EAAE,QAAQA,EAAA,IACV,EAAE,UAAUgD,MAAU,SAAYA,IAAQpD,EAAA;AAAA,IAAS;AAAA,EAAA;AAG7D,CAAC,GAcYsD,KAAcjF,EAAM;AAAA,EAC/B,SACE,EAAE,WAAAiC,GAAW,YAAAiD,GAAY,SAAApD,IAAU,IAAO,UAAAH,GAAU,GAAGc,EAAA,GACvDC,GACA;AACA,UAAMC,IAAS1C,EAAA;AAEf,WACE,gBAAA4D;AAAA,MAACC,EAAc;AAAA,MAAd;AAAA,QACC,KAAApB;AAAA,QACA,aAAU;AAAA,QACJ,CAACqB,CAAS,GAAG;AAAA,QACnB,WAAWC,EAAarB,EAAO,SAASV,CAAS;AAAA,QACjD,aAAaiD;AAAA,QACZ,GAAIzC;AAAA,QACJ,GAAGZ,EAAUC,GAASH,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGrC;AACF;"}
1	+ {"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { DirectionProvider } from \"@base-ui/react/direction-provider\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\nexport type TabsSize = \"sm\" \| \"base\" \| \"lg\"\nexport type TabsRootVariant = \"default\" \| \"highlight\"\nexport type TabsTriggerVariant = \"default\" \| \"destructive\"\n\ntype TabsActivationMode = \"automatic\" \| \"manual\"\n\ntype TabsContextValue = {\n size: TabsSize\n variant: TabsRootVariant\n /** The root's `activationMode`, which Base UI reads from the list as `activateOnFocus`. /\n activationMode: TabsActivationMode\n /* The root's `dir`, which Base UI reads from a `DirectionProvider` around the list. /\n dir?: \"ltr\" \| \"rtl\"\n /* Marks the start of a pointer press on a trigger; see `beginPress` in `Tabs`. /\n beginPress?: (value: string, doc: Document) => void\n}\n\nconst TabsContext = React.createContext<TabsContextValue>({\n size: \"base\",\n variant: \"default\",\n activationMode: \"automatic\",\n})\n\nconst useStyles = makeZenithStyles({\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n ...shorthands.gap(tokens.spacingElement2),\n \"&[data-orientation='vertical']\": {\n flexDirection: \"row\",\n alignItems: \"flex-start\",\n ...shorthands.gap(tokens.spacingElement2),\n },\n },\n list: {\n ...boxModel,\n backgroundColor: \"transparent\",\n color: tokens.grayA12,\n height: \"auto\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n ...shorthands.gap(tokens.spacingElement2),\n ...shorthands.borderRadius(tokens.radiusLg),\n ...shorthands.paddingBlock(tokens.spacingElement2),\n \"&[data-orientation='vertical']\": {\n flexDirection: \"column\",\n alignItems: \"stretch\",\n justifyContent: \"flex-start\",\n ...shorthands.gap(tokens.spacingElement1),\n ...shorthands.paddingBlock(0),\n },\n },\n trigger: {\n ...nativeControl,\n display: \"inline-flex\",\n alignItems: \"center\",\n ...shorthands.gap(tokens.spacingElement2),\n backgroundColor: \"transparent\",\n ...shorthands.borderStyle(\"none\"),\n ...shorthands.borderWidth(0),\n ...shorthands.borderRadius(tokens.radiusLg),\n cursor: \"pointer\",\n fontSize: tokens.textSm,\n lineHeight: tokens.leadingSm,\n // A label never wraps, so selection (and its semibold) can never change a tab's height.\n whiteSpace: \"nowrap\",\n transitionProperty: \"all\",\n transitionDuration: \"150ms\",\n transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n \":focus-visible\": {\n outlineWidth: \"2px\",\n outlineOffset: \"2px\",\n outlineStyle: \"solid\",\n },\n \"&[data-orientation='vertical']\": {\n justifyContent: \"flex-start\",\n textAlign: \"left\",\n width: \"100%\",\n },\n // A plain-text label reserves its semibold width up front: a hidden, zero-height bold copy\n // stacks under it, so every tab is as wide as its bold label in every state and selecting one\n // never moves its neighbours or the panel. Rich children (icons, elements) are not reserved.\n \"&[data-label]\": {\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n rowGap: 0,\n \"&::after\": {\n content: \"attr(data-label)\",\n height: 0,\n ...shorthands.overflow(\"hidden\"),\n visibility: \"hidden\",\n pointerEvents: \"none\",\n userSelect: \"none\",\n fontWeight: tokens.fontWeightSemibold,\n },\n },\n // A vertical rail keeps its labels left-aligned inside the reserved width.\n \"&[data-orientation='vertical'][data-label]\": {\n alignItems: \"flex-start\",\n },\n // #18: the selected tab is marked by a semibold label, not by colour alone.\n \"&[data-active]\": {\n fontWeight: tokens.fontWeightSemibold,\n },\n },\n // Sizes\n sm: {\n ...boxModel,\n ...shorthands.padding(\"0.375rem\", tokens.spacingElement2),\n },\n base: {\n ...boxModel,\n ...shorthands.padding(tokens.spacingElement2, tokens.spacingElement3),\n },\n lg: {\n ...boxModel,\n ...shorthands.padding(tokens.spacingElement3, tokens.spacingGroup2),\n },\n // Variants\n defaultVariant: {\n color: tokens.grayA12,\n // Hover sits below the selected grayA3, so a hovered tab cannot pass for the current one;\n // the selected tab keeps its fill under the pointer.\n \":hover\": {\n backgroundColor: tokens.grayA2,\n },\n \":focus-visible\": {\n outlineColor: tokens.grayA8,\n },\n \"&[data-active]\": {\n backgroundColor: tokens.grayA3,\n \"&:hover\": {\n backgroundColor: tokens.grayA3,\n },\n },\n },\n highlightVariant: {\n color: tokens.accentA12,\n \":hover\": {\n backgroundColor: tokens.accentA4,\n },\n \":focus-visible\": {\n outlineColor: tokens.accentA8,\n },\n \"&[data-active]\": {\n backgroundColor: tokens.accentA3,\n },\n },\n destructiveVariant: {\n color: tokens.errorA11,\n \":hover\": {\n backgroundColor: tokens.errorA4,\n },\n \":focus-visible\": {\n outlineColor: tokens.errorA8,\n },\n \"&[data-active]\": {\n backgroundColor: tokens.errorA3,\n },\n },\n content: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n outlineStyle: \"none\",\n },\n})\n\n// A single child can arrive wrapped in a one-element array depending on the JSX runtime (MDX call\n// sites do this). Radix's Slot normalised that, so the `asChild` shim has to as well.\nfunction onlySlotChild(children: React.ReactNode) {\n const elements = React.Children.toArray(children).filter(React.isValidElement)\n return elements.length === 1 ? elements[0] : undefined\n}\n\n/\n Radix's `asChild` over Base UI's `render`: the single child element becomes the part and keeps\n * its own children, since Base UI lets the rendered element's props win the merge.\n /\nfunction slotProps(asChild: boolean, children: React.ReactNode) {\n const child = asChild ? onlySlotChild(children) : undefined\n return child ? { render: child } : { children }\n}\n\n/\n What `onValueChange` receives as its second argument: Base UI's change details, declared in\n * Zenith so that none of Base UI's internals reach the published declarations, where TypeScript 4\n * cannot parse them.\n /\ntype TabsValueChangeDetails = {\n /\n Why the tab changed. `Tabs` keeps the selection itself, so every change it reports is a\n * person's (a click, a key, or focus under automatic activation), which Base UI calls `none`.\n /\n reason: \"none\"\n /* The native event behind the change. /\n event: Event\n /* Keeps the current tab selected. /\n cancel: () => void\n /* Lets the event propagate where the tabs would otherwise stop it. /\n allowPropagation: () => void\n isCanceled: boolean\n isPropagationAllowed: boolean\n /* The element that caused the change, if any. /\n trigger: Element \| undefined\n /* Where the newly selected tab sits relative to the previous one. /\n activationDirection: \"left\" \| \"right\" \| \"up\" \| \"down\" \| \"none\"\n}\n\n/\n The root's own props, declared in Zenith rather than taken from Base UI, whose types would leak\n * into the published declarations. The root renders a `<div>`, so the DOM attributes,\n * handlers, `ref`, `key`, `className` and `style` stay the div's.\n /\ntype TabsRootProps = {\n /* The value of the selected tab, when the tabs are controlled. /\n value?: string\n /* The value of the tab selected at first, when the tabs are uncontrolled. Without it no tab is selected. /\n defaultValue?: string\n /\n Called with the newly selected tab's value and Base UI's change details. `eventDetails.cancel()`\n * keeps the current tab selected.\n /\n onValueChange?: (value: string, eventDetails: TabsValueChangeDetails) => void\n /\n How the tabs are laid out, which also sets the arrow keys that move between them (left and\n * right, or up and down).\n * @default \"horizontal\"\n /\n orientation?: \"horizontal\" \| \"vertical\"\n /* The reading direction of the tabs; under `rtl` the left and right arrow keys swap. /\n dir?: \"ltr\" \| \"rtl\"\n /\n Whether a tab is selected as soon as the arrow keys focus it (`automatic`), or only on Enter,\n * Space or a click (`manual`).\n * @default \"automatic\"\n /\n activationMode?: TabsActivationMode\n /* Renders the single child element as the root, merging its props and behaviour onto it. /\n asChild?: boolean\n}\n\nexport type TabsProps = Omit<\n React.ComponentPropsWithRef<\"div\">,\n keyof TabsRootProps\n> &\n TabsRootProps & {\n size?: TabsSize\n variant?: TabsRootVariant\n }\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n {\n className,\n size = \"base\",\n variant = \"default\",\n value: valueProp,\n defaultValue,\n onValueChange,\n activationMode = \"automatic\",\n dir,\n asChild = false,\n children,\n ...props\n },\n ref\n) {\n const styles = useStyles()\n\n // Zenith owns the value, so Base UI always receives it controlled: an uncontrolled Base UI root\n // selects its first tab when there is no defaultValue and reports that as a change, where these\n // tabs select nothing. `null` is Base UI's \"no tab selected\".\n const [uncontrolled, setUncontrolled] = React.useState(defaultValue)\n const isControlled = valueProp !== undefined\n const value = isControlled ? valueProp : uncontrolled\n const latest = React.useRef({ isControlled, onValueChange })\n latest.current = { isControlled, onValueChange }\n\n // One pointer press on a trigger can reach `select` twice for the same tab under automatic\n // activation: Base UI selects on the focus the press causes, then again on its click if the tab\n // is still unselected, which it is when a controlled owner declined (#17). A press opens a\n // window in which only the first report for its tab goes through. The click a release causes is\n // dispatched in the same task as its pointerup, so the window closes on the task after that.\n const press = React.useRef<{ value: string; reported: boolean } \| null>(null)\n const beginPress = React.useCallback((pressed: string, doc: Document) => {\n const token = { value: pressed, reported: false }\n press.current = token\n const end = () => {\n doc.removeEventListener(\"pointerup\", end, true)\n doc.removeEventListener(\"pointercancel\", end, true)\n setTimeout(() => {\n if (press.current === token) press.current = null\n }, 0)\n }\n doc.addEventListener(\"pointerup\", end, true)\n doc.addEventListener(\"pointercancel\", end, true)\n }, [])\n\n const select = React.useCallback(\n (next: string, eventDetails: TabsPrimitive.Root.ChangeEventDetails) => {\n const pressed = press.current\n if (pressed !== null && pressed.value === next) {\n if (pressed.reported) {\n eventDetails.cancel()\n return\n }\n pressed.reported = true\n }\n const current = latest.current\n // Base UI reports `initial`, `disabled` and `missing` only for an uncontrolled root, and this\n // one is always controlled, so the reason is `none`.\n current.onValueChange?.(next, eventDetails as TabsValueChangeDetails)\n if (!current.isControlled && !eventDetails.isCanceled)\n setUncontrolled(next)\n },\n []\n )\n\n const contextValue = React.useMemo(\n () => ({ size, variant, activationMode, dir, beginPress }),\n [size, variant, activationMode, dir, beginPress]\n )\n\n return (\n <TabsContext.Provider value={contextValue}>\n <TabsPrimitive.Root\n ref={ref}\n data-slot=\"tabs\"\n {...{ [SLOT_ATTR]: \"tabs\" }}\n data-size={size}\n data-variant={variant}\n className={mergeClasses(styles.root, className)}\n // Base UI types the root's handlers with its own event wrapper; the element is the same\n // <div>, so the caller's div-typed handlers receive exactly the events they declare.\n {...(props as TabsPrimitive.Root.Props)}\n dir={dir}\n {...slotProps(asChild, children)}\n value={value ?? null}\n onValueChange={select}\n />\n </TabsContext.Provider>\n )\n})\n\nexport type TabsListProps = React.ComponentPropsWithRef<\"div\"> & {\n /* Whether the arrow keys wrap from the last tab to the first and back. @default true /\n loop?: boolean\n /* Renders the single child element as the list, merging its props and behaviour onto it. /\n asChild?: boolean\n}\n\nexport const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(\n function TabsList(\n { className, loop, asChild = false, children, ...props },\n ref\n ) {\n const styles = useStyles()\n const { activationMode, dir } = React.useContext(TabsContext)\n\n const list = (\n <TabsPrimitive.List\n ref={ref}\n data-slot=\"tabs-list\"\n {...{ [SLOT_ATTR]: \"tabs-list\" }}\n className={mergeClasses(styles.list, className)}\n // Radix selected the focused tab by default; Base UI only does when told to.\n activateOnFocus={activationMode === \"automatic\"}\n loopFocus={loop}\n {...(props as TabsPrimitive.List.Props)}\n {...slotProps(asChild, children)}\n />\n )\n\n // Base UI's arrow keys follow the direction a provider gives them, not the root's attribute.\n return dir ? (\n <DirectionProvider direction={dir}>{list}</DirectionProvider>\n ) : (\n list\n )\n }\n)\n\nexport type TabsTriggerProps = Omit<\n React.ComponentPropsWithRef<\"button\">,\n \"value\"\n> & {\n /* Pairs the tab with the `TabsContent` of the same value. /\n value: string\n variant?: TabsTriggerVariant\n /* The tab's label. Plain text (a string, number, or array of them) reserves its semibold width so selection never shifts layout; rich children such as icons or elements are not reserved. /\n children?: React.ReactNode\n /* Renders the single child element as the tab, merging its props and behaviour onto it. /\n asChild?: boolean\n}\n\n/* A string, number, or array of only strings and numbers, as one string; otherwise undefined. /\nfunction plainLabel(children: React.ReactNode): string \| undefined {\n if (typeof children === \"string\" \|\| typeof children === \"number\")\n return String(children)\n if (\n Array.isArray(children) &&\n children.every((c) => typeof c === \"string\" \|\| typeof c === \"number\")\n )\n return children.join(\"\")\n return undefined\n}\n\nexport const TabsTrigger = React.forwardRef<\n HTMLButtonElement,\n TabsTriggerProps\n>(function TabsTrigger(\n {\n className,\n variant = \"default\",\n asChild = false,\n children,\n onClick,\n onKeyDown,\n onPointerDown,\n ...props\n },\n ref\n) {\n const styles = useStyles()\n const {\n size,\n variant: rootVariant,\n beginPress,\n } = React.useContext(TabsContext)\n const child = asChild ? onlySlotChild(children) : undefined\n // Base UI drives a native <button> unless told otherwise; a child that is another intrinsic\n // element gets the ARIA button behaviour Radix's Slot gave it.\n const nativeButton =\n !child \|\| typeof child.type !== \"string\" \|\| child.type === \"button\"\n\n const handlePointerDown: TabsTriggerProps[\"onPointerDown\"] = (event) => {\n onPointerDown?.(event)\n if (event.button === 0 && !props.disabled) {\n beginPress?.(props.value, event.currentTarget.ownerDocument)\n }\n }\n\n // Feeds the reserved-width copy; only plain text can be copied by CSS.\n const label = child ? undefined : plainLabel(children)\n\n const resolvedVariantClass =\n variant === \"destructive\"\n ? styles.destructiveVariant\n : rootVariant === \"highlight\"\n ? styles.highlightVariant\n : styles.defaultVariant\n\n return (\n <TabsPrimitive.Tab\n ref={ref}\n data-slot=\"tabs-trigger\"\n {...{ [SLOT_ATTR]: \"tabs-trigger\" }}\n data-label={label}\n nativeButton={nativeButton}\n className={mergeClasses(\n styles.trigger,\n styles[size],\n resolvedVariantClass,\n className\n )}\n {...(props as TabsPrimitive.Tab.Props)}\n // The caller's handlers run before Base UI's. As under Radix, a click the caller prevented\n // selects nothing, and neither does a ctrl-click, which macOS reserves for the context menu.\n onClick={(event) => {\n onClick?.(event as React.MouseEvent<HTMLButtonElement>)\n if (event.defaultPrevented \|\| event.ctrlKey)\n event.preventBaseUIHandler()\n }}\n // Base UI selects a tab on Space even when the caller prevented the keydown; a prevented\n // key selects nothing, as it does on a native button and did under Radix.\n onKeyDown={(event) => {\n onKeyDown?.(event as React.KeyboardEvent<HTMLButtonElement>)\n if (event.defaultPrevented && event.key === \" \") {\n event.preventBaseUIHandler()\n }\n }}\n onPointerDown={handlePointerDown}\n // The joined label is rendered as one text node, shaped exactly like its reserved copy.\n {...(child\n ? { render: child }\n : { children: label !== undefined ? label : children })}\n />\n )\n})\n\nexport type TabsContentProps = Omit<\n React.ComponentPropsWithRef<\"div\">,\n \"value\"\n> & {\n /* Pairs the panel with the `TabsTrigger` of the same value. /\n value: string\n /* Keeps the panel mounted while its tab is not selected, hidden. /\n forceMount?: true\n /* Renders the single child element as the panel, merging its props and behaviour onto it. */\n asChild?: boolean\n}\n\nexport const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(\n function TabsContent(\n { className, forceMount, asChild = false, children, ...props },\n ref\n ) {\n const styles = useStyles()\n\n return (\n <TabsPrimitive.Panel\n ref={ref}\n data-slot=\"tabs-content\"\n {...{ [SLOT_ATTR]: \"tabs-content\" }}\n className={mergeClasses(styles.content, className)}\n keepMounted={forceMount}\n {...(props as TabsPrimitive.Panel.Props)}\n {...slotProps(asChild, children)}\n />\n )\n }\n)\n"],"names":["TabsContext","React","useStyles","makeZenithStyles","shorthands","tokens.spacingElement2","boxModel","tokens.grayA12","tokens.radiusLg","tokens.spacingElement1","nativeControl","tokens.textSm","tokens.leadingSm","tokens.fontWeightSemibold","tokens.spacingElement3","tokens.spacingGroup2","tokens.grayA2","tokens.grayA8","tokens.grayA3","tokens.accentA12","tokens.accentA4","tokens.accentA8","tokens.accentA3","tokens.errorA11","tokens.errorA4","tokens.errorA8","tokens.errorA3","onlySlotChild","children","elements","slotProps","asChild","child","Tabs","className","size","variant","valueProp","defaultValue","onValueChange","activationMode","dir","props","ref","styles","uncontrolled","setUncontrolled","isControlled","value","latest","press","beginPress","pressed","doc","token","end","select","next","eventDetails","current","_a","contextValue","jsx","TabsPrimitive","SLOT_ATTR","mergeClasses","TabsList","loop","list","DirectionProvider","plainLabel","c","TabsTrigger","onClick","onKeyDown","onPointerDown","rootVariant","nativeButton","handlePointerDown","event","label","resolvedVariantClass","TabsContent","forceMount"],"mappings":"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"}

package/dist/components/text/text.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx as S } from "react/jsx-runtime";
 import * as p from "react";
-import { mergeClasses as d, SLOT_ATTR as x } from "@epilot/zenith-runtime/v1/core.js";
+import { mergeClasses as d, SLOT_ATTR as x } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as m } from "../../styles/make-styles.js";
 import { grayA11 as o, trackingNormal as e, leadingXs as g, textXs as a, leadingSm as i, textSm as n, fontWeightBold as t, leadingBase as y, textBase as z, trackingTight as l, leadingLg as H, textLg as k, leadingXl as b, textXl as T, leading2xl as W, text2xl as X, trackingTighter as u, leading3xl as B, text3xl as L } from "../../tokens/index.js";
 const R = m({

package/dist/components/text/text.js.map CHANGED Viewed

	@@ -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~~/core~~\"\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;"}
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;"}

package/dist/components/toast/toast.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as n, jsxs as V } from "react/jsx-runtime";
 import * as n1 from "react";
 import { Toast as S } from "../../_virtual/_zenith-runtime-family_toast.js";
-import { mergeClasses as F, SLOT_ATTR as g, shorthands as l } from "@epilot/zenith-runtime/v1/core.js";
+import { mergeClasses as F, SLOT_ATTR as g, shorthands as l } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as l1 } from "../../styles/make-styles.js";
 import { boxModel as h, nativeControl as c1 } from "../../styles/host-reset.js";
 import { errorA11 as d1, errorA12 as f1, error4 as u1, warningA11 as C1, warningA12 as g1, warning3 as m1, infoA11 as h1, infoA12 as p1, info3 as v1, successA11 as b1, successA12 as w1, success4 as y1, fontWeightMedium as q, leadingSm as _, textSm as P, graySoftHover as x1, grayA12 as U, graySoft as S1, grayA8 as J, gray11 as T1, gray12 as $1, accentContrast as E1, leadingXs as A1, textXs as B1, spacingGroup2 as Q, fontWeightSemibold as I1, body as O, ease as t1, motionSlow as z, motionBase as L1, errorUi as N1, warningUi as k1, infoUi as M1, successUi as z1, radiusMd as D1, spacingElement2 as D, grayA6 as o1, radiusXl as R1, spacingElement3 as F1 } from "../../tokens/index.js";