@epilot/volt-ui-experimental-griffel 0.3.0 → 0.3.1

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

@@ -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/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } 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 `makeVoltStyles` call, one slot per\n * sub-component, each reading its own slot.\n *\n * Density (approved 2026-09-09, TABLE-DENSITY-IMPLEMENTATION.md — replaces the earlier\n * context-only mechanism described by `TABLE-LIST-DENSITY-COMPATIBILITY-NOTE.md`, now resolved;\n * corrected 2026-09-09 per TABLE-DENSITY-REVIEW-1.md, 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 (TABLE-DENSITY-REVIEW-1.md), 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 2026-09-09,\n * TABLE-DENSITY-IMPLEMENTATION.md). `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 = makeVoltStyles({\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 (TABLE-DENSITY-IMPLEMENTATION.md): cascades from the nearest [data-density]\n    // ancestor — 32/36/40px for 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 (TABLE-DENSITY-IMPLEMENTATION.md): cascades from the nearest [data-density]\n    // ancestor — 6/8/12px for 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          // (TABLE-DENSITY-REVIEW-1.md #2).\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        {/* TABLE-DENSITY-REVIEW-1.md #1: 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}>{children}</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        {/* TABLE-DENSITY-REVIEW-1.md #1: see the matching comment on TableHead above. */}\n        <DensityContextBoundary density={density}>{children}</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","makeVoltStyles","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","jsxDEV","SLOT_ATTR","mergeClasses","canonicalDensity","DensityContextBoundary","TableHeader","TableBody","TableFooter","TableRow","noHover","TableHead","align","scope","alignment","TableCell","numeric","TableCaption","position"],"mappings":"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"}
+{"version":3,"file":"table.js","sources":["../../../src/components/table/table.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } 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 `makeVoltStyles` call, one slot per\n * sub-component, each reading its own slot.\n *\n * Density (approved 2026-09-09, TABLE-DENSITY-IMPLEMENTATION.md — replaces the earlier\n * context-only mechanism described by `TABLE-LIST-DENSITY-COMPATIBILITY-NOTE.md`, now resolved;\n * corrected 2026-09-09 per TABLE-DENSITY-REVIEW-1.md, 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 (TABLE-DENSITY-REVIEW-1.md), 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 2026-09-09,\n * TABLE-DENSITY-IMPLEMENTATION.md). `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 = makeVoltStyles({\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 (TABLE-DENSITY-IMPLEMENTATION.md): cascades from the nearest [data-density]\n    // ancestor — 32/36/40px for 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 (TABLE-DENSITY-IMPLEMENTATION.md): cascades from the nearest [data-density]\n    // ancestor — 6/8/12px for 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          // (TABLE-DENSITY-REVIEW-1.md #2).\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        {/* TABLE-DENSITY-REVIEW-1.md #1: 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}>{children}</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        {/* TABLE-DENSITY-REVIEW-1.md #1: see the matching comment on TableHead above. */}\n        <DensityContextBoundary density={density}>{children}</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","makeVoltStyles","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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"}

package/dist/components/tabs/tabs.js

@@ -1,15 +1,15 @@
-import { j as l } from "../../vendor/react/jsx-dev-runtime.js";
-import * as n from "react";
-import { Root as C, Content as y, List as N, Trigger as k } from "../../vendor/@radix-ui/react-tabs/dist/index.js";
+import { jsx as l } from "react/jsx-runtime";
+import * as s from "react";
+import { Root as y, Content as v, List as T, Trigger as A } from "../../vendor/@radix-ui/react-tabs/dist/index.js";
 import { shorthands as t } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
 import { SLOT_ATTR as c } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as u } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as T } from "../../styles/make-styles.js";
-import { spacingElement3 as b, spacingGroup2 as V, spacingElement2 as i, radiusLg as p, spacingElement1 as A, errorA3 as w, errorA8 as R, errorA4 as j, errorA11 as D, accentA3 as S, accentA8 as E, accentA4 as L, accentA12 as U, grayA3 as I, grayA8 as z, grayA4 as B, grayA12 as x, leadingSm as G, textSm as O } from "../../tokens/index.js";
-const v = n.createContext({
+import { mergeClasses as d } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as k } from "../../styles/make-styles.js";
+import { spacingElement3 as m, spacingGroup2 as R, spacingElement2 as i, radiusLg as p, spacingElement1 as S, errorA3 as V, errorA8 as w, errorA4 as L, errorA11 as j, accentA3 as D, accentA8 as I, accentA4 as N, accentA12 as z, grayA3 as B, grayA8 as E, grayA4 as G, grayA12 as h, leadingSm as O, textSm as P } from "../../tokens/index.js";
+const x = s.createContext({
   size: "base",
   variant: "default"
-}), m = T({
+}), g = k({
   root: {
     display: "flex",
     flexDirection: "column",
@@ -22,7 +22,7 @@ const v = n.createContext({
   },
   list: {
     backgroundColor: "transparent",
-    color: x,
+    color: h,
     height: "auto",
     display: "inline-flex",
     alignItems: "center",
@@ -34,7 +34,7 @@ const v = n.createContext({
       flexDirection: "column",
       alignItems: "stretch",
       justifyContent: "flex-start",
-      ...t.gap(A),
+      ...t.gap(S),
       ...t.paddingBlock(0)
     }
   },
@@ -47,8 +47,8 @@ const v = n.createContext({
     ...t.borderWidth(0),
     ...t.borderRadius(p),
     cursor: "pointer",
-    fontSize: O,
-    lineHeight: G,
+    fontSize: P,
+    lineHeight: O,
     transitionProperty: "all",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -68,46 +68,46 @@ const v = n.createContext({
     ...t.padding("0.375rem", i)
   },
   base: {
-    ...t.padding(i, b)
+    ...t.padding(i, m)
   },
   lg: {
-    ...t.padding(b, V)
+    ...t.padding(m, R)
   },
   // Variants
   defaultVariant: {
-    color: x,
+    color: h,
     ":hover": {
-      backgroundColor: B
+      backgroundColor: G
     },
     ":focus-visible": {
-      outlineColor: z
+      outlineColor: E
     },
     "&[data-state='active']": {
-      backgroundColor: I
+      backgroundColor: B
     }
   },
   highlightVariant: {
-    color: U,
+    color: z,
     ":hover": {
-      backgroundColor: L
+      backgroundColor: N
     },
     ":focus-visible": {
-      outlineColor: E
+      outlineColor: I
     },
     "&[data-state='active']": {
-      backgroundColor: S
+      backgroundColor: D
     }
   },
   destructiveVariant: {
-    color: D,
+    color: j,
     ":hover": {
-      backgroundColor: j
+      backgroundColor: L
     },
     ":focus-visible": {
-      outlineColor: R
+      outlineColor: w
     },
     "&[data-state='active']": {
-      backgroundColor: w
+      backgroundColor: V
     }
   },
   content: {
@@ -116,102 +116,66 @@ const v = n.createContext({
     flexBasis: "0%",
     outlineStyle: "none"
   }
-}), q = n.forwardRef(function({ className: o, size: e = "base", variant: a = "default", ...r }, s) {
-  const g = m(), d = n.useMemo(() => ({ size: e, variant: a }), [e, a]);
-  return /* @__PURE__ */ l.jsxDEV(v.Provider, { value: d, children: /* @__PURE__ */ l.jsxDEV(
-    C,
+}), J = s.forwardRef(function({ className: o, size: e = "base", variant: a = "default", ...r }, n) {
+  const f = g(), b = s.useMemo(() => ({ size: e, variant: a }), [e, a]);
+  return /* @__PURE__ */ l(x.Provider, { value: b, children: /* @__PURE__ */ l(
+    y,
     {
-      ref: s,
+      ref: n,
       "data-slot": "tabs",
       [c]: "tabs",
       "data-size": e,
       "data-variant": a,
-      className: u(g.root, o),
+      className: d(f.root, o),
       ...r
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/tabs/tabs.tsx",
-      lineNumber: 149,
-      columnNumber: 7
-    },
-    this
-  ) }, void 0, !1, {
-    fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/tabs/tabs.tsx",
-    lineNumber: 148,
-    columnNumber: 5
-  }, this);
-}), J = n.forwardRef(function({ className: o, ...e }, a) {
-  const r = m();
-  return /* @__PURE__ */ l.jsxDEV(
-    N,
+    }
+  ) });
+}), K = s.forwardRef(function({ className: o, ...e }, a) {
+  const r = g();
+  return /* @__PURE__ */ l(
+    T,
     {
       ref: a,
       "data-slot": "tabs-list",
       [c]: "tabs-list",
-      className: u(r.list, o),
+      className: d(r.list, o),
       ...e
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/tabs/tabs.tsx",
-      lineNumber: 171,
-      columnNumber: 5
-    },
-    this
+    }
   );
-}), K = n.forwardRef(function({ className: o, variant: e = "default", ...a }, r) {
-  const s = m(), { size: g, variant: d } = n.useContext(v), h = e === "destructive" ? s.destructiveVariant : d === "highlight" ? s.highlightVariant : s.defaultVariant;
-  return /* @__PURE__ */ l.jsxDEV(
-    k,
+}), U = s.forwardRef(function({ className: o, variant: e = "default", ...a }, r) {
+  const n = g(), { size: f, variant: b } = s.useContext(x), C = e === "destructive" ? n.destructiveVariant : b === "highlight" ? n.highlightVariant : n.defaultVariant;
+  return /* @__PURE__ */ l(
+    A,
     {
       ref: r,
       "data-slot": "tabs-trigger",
       [c]: "tabs-trigger",
-      className: u(
-        s.trigger,
-        s[g],
-        h,
+      className: d(
+        n.trigger,
+        n[f],
+        C,
         o
       ),
       ...a
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/tabs/tabs.tsx",
-      lineNumber: 202,
-      columnNumber: 5
-    },
-    this
+    }
   );
-}), X = n.forwardRef(function({ className: o, ...e }, a) {
-  const r = m();
-  return /* @__PURE__ */ l.jsxDEV(
-    y,
+}), X = s.forwardRef(function({ className: o, ...e }, a) {
+  const r = g();
+  return /* @__PURE__ */ l(
+    v,
     {
       ref: a,
       "data-slot": "tabs-content",
       [c]: "tabs-content",
-      className: u(r.content, o),
+      className: d(r.content, o),
       ...e
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/tabs/tabs.tsx",
-      lineNumber: 228,
-      columnNumber: 5
-    },
-    this
+    }
   );
 });
 export {
-  q as Tabs,
+  J as Tabs,
   X as TabsContent,
-  J as TabsList,
-  K as TabsTrigger
+  K as TabsList,
+  U as TabsTrigger
 };
 //# sourceMappingURL=tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nexport type TabsSize = \"sm\" | \"base\" | \"lg\"\nexport type TabsRootVariant = \"default\" | \"highlight\"\nexport type TabsTriggerVariant = \"default\" | \"destructive\"\n\ntype TabsContextValue = {\n  size: TabsSize\n  variant: TabsRootVariant\n}\n\nconst TabsContext = React.createContext<TabsContextValue>({\n  size: \"base\",\n  variant: \"default\",\n})\n\nconst useStyles = makeVoltStyles({\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    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    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    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  },\n  // Sizes\n  sm: {\n    ...shorthands.padding(\"0.375rem\", tokens.spacingElement2),\n  },\n  base: {\n    ...shorthands.padding(tokens.spacingElement2, tokens.spacingElement3),\n  },\n  lg: {\n    ...shorthands.padding(tokens.spacingElement3, tokens.spacingGroup2),\n  },\n  // Variants\n  defaultVariant: {\n    color: tokens.grayA12,\n    \":hover\": {\n      backgroundColor: tokens.grayA4,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.grayA8,\n    },\n    \"&[data-state='active']\": {\n      backgroundColor: tokens.grayA3,\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-state='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-state='active']\": {\n      backgroundColor: tokens.errorA3,\n    },\n  },\n  content: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    outlineStyle: \"none\",\n  },\n})\n\nexport type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  size?: TabsSize\n  variant?: TabsRootVariant\n}\n\nexport const Tabs = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Root>,\n  TabsProps\n>(function Tabs(\n  { className, size = \"base\", variant = \"default\", ...props },\n  ref\n) {\n  const styles = useStyles()\n  const contextValue = React.useMemo(() => ({ size, variant }), [size, variant])\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        {...props}\n      />\n    </TabsContext.Provider>\n  )\n})\n\nexport type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>\n\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(function TabsList({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      data-slot=\"tabs-list\"\n      {...{ [SLOT_ATTR]: \"tabs-list\" }}\n      className={mergeClasses(styles.list, className)}\n      {...props}\n    />\n  )\n})\n\nexport type TabsTriggerProps = React.ComponentProps<\n  typeof TabsPrimitive.Trigger\n> & {\n  variant?: TabsTriggerVariant\n}\n\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(function TabsTrigger({ className, variant = \"default\", ...props }, ref) {\n  const styles = useStyles()\n  const { size, variant: rootVariant } = React.useContext(TabsContext)\n\n  const resolvedVariantClass =\n    variant === \"destructive\"\n      ? styles.destructiveVariant\n      : rootVariant === \"highlight\"\n        ? styles.highlightVariant\n        : styles.defaultVariant\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      data-slot=\"tabs-trigger\"\n      {...{ [SLOT_ATTR]: \"tabs-trigger\" }}\n      className={mergeClasses(\n        styles.trigger,\n        styles[size],\n        resolvedVariantClass,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n\nexport type TabsContentProps = React.ComponentProps<\n  typeof TabsPrimitive.Content\n>\n\nexport const TabsContent = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Content>,\n  TabsContentProps\n>(function TabsContent({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      data-slot=\"tabs-content\"\n      {...{ [SLOT_ATTR]: \"tabs-content\" }}\n      className={mergeClasses(styles.content, className)}\n      {...props}\n    />\n  )\n})\n"],"names":["TabsContext","React","useStyles","makeVoltStyles","shorthands","tokens.spacingElement2","tokens.grayA12","tokens.radiusLg","tokens.spacingElement1","tokens.textSm","tokens.leadingSm","tokens.spacingElement3","tokens.spacingGroup2","tokens.grayA4","tokens.grayA8","tokens.grayA3","tokens.accentA12","tokens.accentA4","tokens.accentA8","tokens.accentA3","tokens.errorA11","tokens.errorA4","tokens.errorA8","tokens.errorA3","Tabs","className","size","variant","props","ref","styles","contextValue","jsxDEV","TabsPrimitive.Root","SLOT_ATTR","mergeClasses","TabsList","TabsPrimitive.List","TabsTrigger","rootVariant","resolvedVariantClass","TabsPrimitive.Trigger","TabsContent","TabsPrimitive.Content"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nexport type TabsSize = \"sm\" | \"base\" | \"lg\"\nexport type TabsRootVariant = \"default\" | \"highlight\"\nexport type TabsTriggerVariant = \"default\" | \"destructive\"\n\ntype TabsContextValue = {\n  size: TabsSize\n  variant: TabsRootVariant\n}\n\nconst TabsContext = React.createContext<TabsContextValue>({\n  size: \"base\",\n  variant: \"default\",\n})\n\nconst useStyles = makeVoltStyles({\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    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    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    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  },\n  // Sizes\n  sm: {\n    ...shorthands.padding(\"0.375rem\", tokens.spacingElement2),\n  },\n  base: {\n    ...shorthands.padding(tokens.spacingElement2, tokens.spacingElement3),\n  },\n  lg: {\n    ...shorthands.padding(tokens.spacingElement3, tokens.spacingGroup2),\n  },\n  // Variants\n  defaultVariant: {\n    color: tokens.grayA12,\n    \":hover\": {\n      backgroundColor: tokens.grayA4,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.grayA8,\n    },\n    \"&[data-state='active']\": {\n      backgroundColor: tokens.grayA3,\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-state='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-state='active']\": {\n      backgroundColor: tokens.errorA3,\n    },\n  },\n  content: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    outlineStyle: \"none\",\n  },\n})\n\nexport type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  size?: TabsSize\n  variant?: TabsRootVariant\n}\n\nexport const Tabs = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Root>,\n  TabsProps\n>(function Tabs(\n  { className, size = \"base\", variant = \"default\", ...props },\n  ref\n) {\n  const styles = useStyles()\n  const contextValue = React.useMemo(() => ({ size, variant }), [size, variant])\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        {...props}\n      />\n    </TabsContext.Provider>\n  )\n})\n\nexport type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>\n\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(function TabsList({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      data-slot=\"tabs-list\"\n      {...{ [SLOT_ATTR]: \"tabs-list\" }}\n      className={mergeClasses(styles.list, className)}\n      {...props}\n    />\n  )\n})\n\nexport type TabsTriggerProps = React.ComponentProps<\n  typeof TabsPrimitive.Trigger\n> & {\n  variant?: TabsTriggerVariant\n}\n\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(function TabsTrigger({ className, variant = \"default\", ...props }, ref) {\n  const styles = useStyles()\n  const { size, variant: rootVariant } = React.useContext(TabsContext)\n\n  const resolvedVariantClass =\n    variant === \"destructive\"\n      ? styles.destructiveVariant\n      : rootVariant === \"highlight\"\n        ? styles.highlightVariant\n        : styles.defaultVariant\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      data-slot=\"tabs-trigger\"\n      {...{ [SLOT_ATTR]: \"tabs-trigger\" }}\n      className={mergeClasses(\n        styles.trigger,\n        styles[size],\n        resolvedVariantClass,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n\nexport type TabsContentProps = React.ComponentProps<\n  typeof TabsPrimitive.Content\n>\n\nexport const TabsContent = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Content>,\n  TabsContentProps\n>(function TabsContent({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      data-slot=\"tabs-content\"\n      {...{ [SLOT_ATTR]: \"tabs-content\" }}\n      className={mergeClasses(styles.content, className)}\n      {...props}\n    />\n  )\n})\n"],"names":["TabsContext","React","useStyles","makeVoltStyles","shorthands","tokens.spacingElement2","tokens.grayA12","tokens.radiusLg","tokens.spacingElement1","tokens.textSm","tokens.leadingSm","tokens.spacingElement3","tokens.spacingGroup2","tokens.grayA4","tokens.grayA8","tokens.grayA3","tokens.accentA12","tokens.accentA4","tokens.accentA8","tokens.accentA3","tokens.errorA11","tokens.errorA4","tokens.errorA8","tokens.errorA3","Tabs","className","size","variant","props","ref","styles","contextValue","jsx","TabsPrimitive.Root","SLOT_ATTR","mergeClasses","TabsList","TabsPrimitive.List","TabsTrigger","rootVariant","resolvedVariantClass","TabsPrimitive.Trigger","TabsContent","TabsPrimitive.Content"],"mappings":"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"}

package/dist/components/text/text.js

@@ -1,34 +1,34 @@
-import { j as m } from "../../vendor/react/jsx-dev-runtime.js";
-import * as h from "react";
-import { SLOT_ATTR as S } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as x } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as d } from "../../styles/make-styles.js";
-import { grayA11 as o, trackingNormal as e, leadingXs as a, textXs as r, leadingSm as i, textSm as l, fontWeightBold as t, leadingBase as y, textBase as z, trackingTight as n, leadingLg as H, textLg as b, leadingXl as k, textXl as u, leading2xl as T, text2xl as W, trackingTighter as N, leading3xl as R, text3xl as X } from "../../tokens/index.js";
-const j = d({
+import { jsx as h } from "react/jsx-runtime";
+import * as p from "react";
+import { SLOT_ATTR as d } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as m } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as x } 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 = x({
   // Title variants
   title3: {
-    fontSize: X,
-    lineHeight: R,
-    letterSpacing: N,
+    fontSize: L,
+    lineHeight: B,
+    letterSpacing: u,
     fontWeight: t
   },
   title2: {
-    fontSize: W,
-    lineHeight: T,
-    letterSpacing: n,
+    fontSize: X,
+    lineHeight: W,
+    letterSpacing: l,
     fontWeight: t
   },
   title1: {
-    fontSize: u,
-    lineHeight: k,
-    letterSpacing: n,
+    fontSize: T,
+    lineHeight: b,
+    letterSpacing: l,
     fontWeight: t
   },
   // Heading variants
   heading3: {
-    fontSize: b,
+    fontSize: k,
     lineHeight: H,
-    letterSpacing: n,
+    letterSpacing: l,
     fontWeight: t
   },
   heading2: {
@@ -38,61 +38,53 @@ const j = d({
     fontWeight: t
   },
   heading1: {
-    fontSize: l,
+    fontSize: n,
     lineHeight: i,
     letterSpacing: e,
     fontWeight: t
   },
   // Body variants
   body2: {
-    fontSize: l,
+    fontSize: n,
     lineHeight: i,
     letterSpacing: e,
     display: "inline-block"
   },
   body1: {
-    fontSize: r,
-    lineHeight: a,
+    fontSize: a,
+    lineHeight: g,
     letterSpacing: e,
     display: "inline-block"
   },
   // Helper variants
   helper2: {
-    fontSize: l,
+    fontSize: n,
     lineHeight: i,
     letterSpacing: e,
     display: "inline-block",
     color: o
   },
   helper1: {
-    fontSize: r,
-    lineHeight: a,
+    fontSize: a,
+    lineHeight: g,
     letterSpacing: e,
     display: "inline-block",
     color: o
   }
-}), E = h.forwardRef(function({ variant: g = "body2", className: s, ...f }, c) {
-  const p = j();
-  return /* @__PURE__ */ m.jsxDEV(
+}), V = p.forwardRef(function({ variant: r = "body2", className: s, ...f }, c) {
+  const S = R();
+  return /* @__PURE__ */ h(
     "span",
     {
       ref: c,
       "data-slot": "text",
-      [S]: "text",
-      className: x(p[g], s),
+      [d]: "text",
+      className: m(S[r], s),
       ...f
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/text/text.tsx",
-      lineNumber: 118,
-      columnNumber: 5
-    },
-    this
+    }
   );
 });
 export {
-  E as Text
+  V as Text
 };
 //# sourceMappingURL=text.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../src/components/text/text.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * Text — the v1 text scale ported to Griffel atoms.\n *\n * v1 expressed the ten variants as cva classes (`text-3xl tracking-tighter font-bold` etc.), one\n * per variant. Here each variant is a small set of atoms that read design tokens instead of\n * literal values; the variant itself is the whole style, so there is exactly one slot per variant\n * and the caller's `className` is merged on top.\n *\n * Unlike Badge there is no `color` prop, so no palette install and no inline custom properties:\n * the only colour used (the helper variants) is `gray-a11`, a core token that ships in the core\n * sheet.\n *\n * Body and helper variants keep v1's `display: inline-block` — it lets inline text size to its\n * content inside flex/grid parents instead of collapsing to zero width. Titles and headings\n * inherit their display, exactly as v1.\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 = makeVoltStyles({\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  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  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","makeVoltStyles","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","jsxDEV","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;AAqCA,MAAMA,IAAYC,EAAe;AAAA;AAAA,EAE/B,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,EAGX,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,GAMYC,IAAOC,EAAM,WAAuC,SAC/D,EAAE,SAAAC,IAAU,SAAS,WAAAC,GAAW,GAAGC,EAAA,GACnCC,GACA;AACA,QAAMC,IAAS3B,EAAA;AAEf,SACE4B,gBAAAA,EAAAA;AAAAA,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,IALN;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA;AAQJ,CAAC;"}
+{"version":3,"file":"text.js","sources":["../../../src/components/text/text.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * Text — the v1 text scale ported to Griffel atoms.\n *\n * v1 expressed the ten variants as cva classes (`text-3xl tracking-tighter font-bold` etc.), one\n * per variant. Here each variant is a small set of atoms that read design tokens instead of\n * literal values; the variant itself is the whole style, so there is exactly one slot per variant\n * and the caller's `className` is merged on top.\n *\n * Unlike Badge there is no `color` prop, so no palette install and no inline custom properties:\n * the only colour used (the helper variants) is `gray-a11`, a core token that ships in the core\n * sheet.\n *\n * Body and helper variants keep v1's `display: inline-block` — it lets inline text size to its\n * content inside flex/grid parents instead of collapsing to zero width. Titles and headings\n * inherit their display, exactly as v1.\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 = makeVoltStyles({\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  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  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","makeVoltStyles","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":";;;;;;AAqCA,MAAMA,IAAYC,EAAe;AAAA;AAAA,EAE/B,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,EAGX,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,GAMYC,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;"}