@epilot/zenith-react 0.2.0-next.3 → 0.2.0-next.4

package/dist/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/components/button/button.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, nativeControl } from \"../../styles/host-reset\"\nimport { capTrim } from \"../../styles/text-box\"\nimport * as tokens from \"../../tokens\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\n/**\n * Base UI's type declarations resolve `react` from the hoisted root's `@types/react` (v19), while\n * this package pins `@types/react` 18 in its own node_modules. Re-typing the primitive onto OUR\n * `React` keeps the button's pass-through props and ref on one React type for this package.\n */\n/**\n * A native `<button>`, no primitive.\n *\n * v1's only Radix use here is `Slot`, purely to implement `asChild`, and this does the same. Base\n * UI's button primitive supplied nothing v1 had: it added a dependency, and with it the\n * `@types/react` 19 requirement, for a plain element.\n */\nconst ButtonBase = \"button\" as const\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...nativeControl,\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontWeight: tokens.fontWeightSemibold,\n    whiteSpace: \"nowrap\",\n    transitionProperty: \"all\",\n    cursor: \"pointer\",\n    flexShrink: 0,\n    // Disabled keeps pointer events so a Tooltip can still explain why, but shows none of the\n    // hover or press feedback (every variant guards those with `:not(:disabled)`) and no pointer.\n    \":disabled\": { opacity: 0.5, cursor: \"not-allowed\" },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.focusRing,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \"& svg\": {\n      flexShrink: 0,\n      pointerEvents: \"none\",\n      color: \"currentColor\",\n    },\n  },\n  label: capTrim,\n  primary: {\n    backgroundColor: tokens.accentSolid,\n    color: tokens.accentContrast,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSolidHover },\n    \":active:not(:disabled)\": { backgroundColor: tokens.accentSolidHover },\n  },\n  secondary: {\n    backgroundColor: tokens.accentSoft,\n    color: tokens.accentOnSoft,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSoftHover },\n  },\n  tertiary: {\n    backgroundColor: \"transparent\",\n    color: tokens.accentA11,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSoft },\n  },\n  ghost: {\n    backgroundColor: \"transparent\",\n    color: tokens.grayA12,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSoft },\n  },\n  primaryDestructive: {\n    backgroundColor: tokens.errorSolid,\n    color: tokens.errorContrast,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.errorSolidHover },\n    \":active:not(:disabled)\": { backgroundColor: tokens.errorSolidHover },\n  },\n  secondaryDestructive: {\n    backgroundColor: tokens.errorSoft,\n    color: tokens.errorOnSoft,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.errorSoftHover },\n  },\n  tertiaryDestructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.errorA11,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.errorSoft },\n  },\n  xs: {\n    ...boxModel,\n    ...shorthands.paddingInline(\"0.5rem\"),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    // Cap trimming removes the line-height's leading from direct text. Keep the established\n    // 24px control geometry explicitly instead of relying on that incidental text height.\n    minHeight: \"1.5rem\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    gap: \"4px\",\n    \"& svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  sm: {\n    ...boxModel,\n    ...shorthands.paddingInline(tokens.spacingElement3),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    // As above, the fixed 28px size is part of Button's contract, independent of its label box.\n    minHeight: \"1.75rem\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    gap: \"0.375rem\",\n    \"& svg\": { width: \"0.875rem\", height: \"0.875rem\" },\n  },\n  base: {\n    ...boxModel,\n    // Density-bound (DENSITY-SPEC.md §2.4, WP9B1-ACCEPTANCE-WP9B2A): padding-inline is the\n    // compact/comfortable lever; min-height is floored by the fixed line-height + padding-block\n    // below and cannot shrink, so it is bound too (compact === normal, comfortable raised via an\n    // explicit minHeight above the natural content box, same mechanism `lg` already uses).\n    ...shorthands.paddingInline(tokens.buttonBasePaddingInline),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    minHeight: tokens.buttonBaseMinHeight,\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    gap: \"0.5rem\",\n    \"& svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  lg: {\n    ...boxModel,\n    ...shorthands.paddingInline(\"1.25rem\"),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    minHeight: \"2.5rem\",\n    fontSize: tokens.textLg,\n    lineHeight: tokens.leadingLg,\n    gap: \"0.5rem\",\n    \"& svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  iconXs: {\n    ...boxModel,\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    \"& svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  iconSm: {\n    ...boxModel,\n    width: \"1.75rem\",\n    height: \"1.75rem\",\n    \"& svg\": { width: \"0.875rem\", height: \"0.875rem\" },\n  },\n  icon: {\n    ...boxModel,\n    // Density-bound: a fixed square, no line-height floor (unlike `base`), so compact/comfortable\n    // both move freely (DENSITY-SPEC.md §2.4).\n    width: tokens.buttonIconSize,\n    height: tokens.buttonIconSize,\n    \"& svg\": { width: \"1.125rem\", height: \"1.125rem\" },\n  },\n  iconLg: {\n    ...boxModel,\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    \"& svg\": { width: \"1.5rem\", height: \"1.5rem\" },\n  },\n  normal: { borderRadius: tokens.radiusLg },\n  rounded: { borderRadius: \"9999px\" },\n})\n\ntype FlatButtonChild = {\n  node: React.ReactNode\n  keyPath: string\n}\n\n/**\n * Fragments do not create boxes, so flatten them to the same leaf order the flex container sees.\n * React.Children.toArray handles nested arrays and gives keyed elements a stable local key; the\n * parent fragment path keeps equal keys from separate fragment scopes distinct.\n */\nfunction flattenButtonChildren(\n  children: React.ReactNode,\n  parentPath = \"button\"\n): FlatButtonChild[] {\n  return React.Children.toArray(children).flatMap((node, index) => {\n    const localKey =\n      React.isValidElement(node) && node.key !== null\n        ? String(node.key)\n        : String(index)\n    const keyPath = `${parentPath}/${localKey}`\n\n    if (\n      React.isValidElement<{ children?: React.ReactNode }>(node) &&\n      node.type === React.Fragment\n    ) {\n      return flattenButtonChildren(node.props.children, keyPath)\n    }\n\n    return [{ node, keyPath }]\n  })\n}\n\n/**\n * A flex container's direct text becomes an anonymous flex item, which `text-box` cannot select.\n * Recreate exactly those contiguous text runs as real label boxes. Consumer elements stay direct\n * children and whitespace-only runs stay raw, preserving today's element order and flex gaps.\n */\nfunction wrapButtonTextRuns(\n  children: React.ReactNode,\n  labelClassName: string\n): React.ReactNode[] {\n  const output: React.ReactNode[] = []\n  let textRun: FlatButtonChild[] = []\n\n  const flushTextRun = () => {\n    if (!textRun.length) return\n\n    const whitespaceOnly = textRun.every(\n      ({ node }) => typeof node === \"string\" && node.trim() === \"\"\n    )\n    if (whitespaceOnly) {\n      output.push(...textRun.map(({ node }) => node))\n    } else {\n      output.push(\n        <span\n          key={`button-label:${textRun[0].keyPath}`}\n          data-slot=\"button-label\"\n          className={labelClassName}\n        >\n          {textRun.map(({ node }) => node)}\n        </span>\n      )\n    }\n    textRun = []\n  }\n\n  for (const child of flattenButtonChildren(children)) {\n    if (typeof child.node === \"string\" || typeof child.node === \"number\") {\n      textRun.push(child)\n      continue\n    }\n\n    flushTextRun()\n    output.push(\n      React.isValidElement(child.node)\n        ? React.cloneElement(child.node, { key: child.keyPath })\n        : child.node\n    )\n  }\n  flushTextRun()\n\n  return output\n}\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\"\nexport type ButtonSize =\n  \"xs\" | \"sm\" | \"base\" | \"lg\" | \"icon-xs\" | \"icon-sm\" | \"icon\" | \"icon-lg\"\nexport type ButtonShape = \"normal\" | \"rounded\"\n\nexport type ButtonProps = Omit<\n  React.ComponentProps<\"button\">,\n  \"variant\" | \"size\" | \"shape\" | \"destructive\" | \"className\" | \"render\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  shape?: ButtonShape\n  destructive?: boolean\n  className?: string\n  /**\n   * Render the child element instead of a `button`, keeping Button's styling and slot markers.\n   * v1 supports this and consumers rely on it to wrap links; it was dropped here while the package\n   * was briefly on Base UI, and restored once it moved back to Radix.\n   */\n  asChild?: boolean\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    {\n      variant = \"primary\",\n      size = \"base\",\n      shape = \"rounded\",\n      destructive = false,\n      className,\n      asChild = false,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const variantSlot:\n      | ButtonVariant\n      | \"primaryDestructive\"\n      | \"secondaryDestructive\"\n      | \"tertiaryDestructive\" =\n      destructive && variant !== \"ghost\"\n        ? (`${variant}Destructive` as\n            | \"primaryDestructive\"\n            | \"secondaryDestructive\"\n            | \"tertiaryDestructive\")\n        : variant\n    const sizeSlot:\n      \"xs\" | \"sm\" | \"base\" | \"lg\" | \"iconXs\" | \"iconSm\" | \"icon\" | \"iconLg\" = (\n      {\n        xs: \"xs\",\n        sm: \"sm\",\n        base: \"base\",\n        lg: \"lg\",\n        \"icon-xs\": \"iconXs\",\n        \"icon-sm\": \"iconSm\",\n        icon: \"icon\",\n        \"icon-lg\": \"iconLg\",\n      } as const\n    )[size]\n\n    const Root = asChild ? Slot : ButtonBase\n    const content = asChild\n      ? children\n      : wrapButtonTextRuns(children, styles.label)\n\n    return (\n      <Root\n        ref={ref}\n        data-slot=\"button\"\n        {...{ [SLOT_ATTR]: \"button\" }}\n        className={mergeClasses(\n          styles.root,\n          styles[variantSlot],\n          styles[sizeSlot],\n          styles[shape],\n          className\n        )}\n        {...props}\n      >\n        {content}\n      </Root>\n    )\n  }\n)\n"],"names":["ButtonBase","useStyles","makeZenithStyles","nativeControl","tokens.fontWeightSemibold","tokens.focusRing","capTrim","tokens.accentSolid","tokens.accentContrast","tokens.accentSolidHover","tokens.accentSoft","tokens.accentOnSoft","tokens.accentSoftHover","tokens.accentA11","tokens.grayA12","tokens.errorSolid","tokens.errorContrast","tokens.errorSolidHover","tokens.errorSoft","tokens.errorOnSoft","tokens.errorSoftHover","tokens.errorA11","boxModel","shorthands","tokens.textXs","tokens.leadingXs","tokens.spacingElement3","tokens.textSm","tokens.leadingSm","tokens.buttonBasePaddingInline","tokens.buttonBaseMinHeight","tokens.textBase","tokens.leadingBase","tokens.textLg","tokens.leadingLg","tokens.buttonIconSize","tokens.radiusLg","flattenButtonChildren","children","parentPath","React","node","index","localKey","keyPath","wrapButtonTextRuns","labelClassName","output","textRun","flushTextRun","jsx","child","Button","variant","size","shape","destructive","className","asChild","props","ref","styles","variantSlot","sizeSlot","Root","Slot","content","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;;;AAuBA,MAAMA,KAAa,UAEbC,KAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,GAAGC;AAAA,IACH,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,YAAYC;AAAAA,IACZ,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,QAAQ;AAAA,IACR,YAAY;AAAA;AAAA;AAAA,IAGZ,aAAa,EAAE,SAAS,KAAK,QAAQ,cAAA;AAAA,IACrC,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAcC;AAAAA,IAAO;AAAA,IAEvB,2CAA2C;AAAA,MACzC,oBAAoB;AAAA,IAAA;AAAA,IAEtB,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,OAAOC;AAAA,EACP,SAAS;AAAA,IACP,iBAAiBC;AAAAA,IACjB,OAAOC;AAAAA,IACP,yBAAyB,EAAE,iBAAiBC,EAAO;AAAA,IACnD,0BAA0B,EAAE,iBAAiBA,EAAO;AAAA,EAAiB;AAAA,EAEvE,WAAW;AAAA,IACT,iBAAiBC;AAAAA,IACjB,OAAOC;AAAAA,IACP,yBAAyB,EAAE,iBAAiBC,EAAO;AAAA,EAAgB;AAAA,EAErE,UAAU;AAAA,IACR,iBAAiB;AAAA,IACjB,OAAOC;AAAAA,IACP,yBAAyB,EAAE,iBAAiBH,EAAO;AAAA,EAAW;AAAA,EAEhE,OAAO;AAAA,IACL,iBAAiB;AAAA,IACjB,OAAOI;AAAAA,IACP,yBAAyB,EAAE,iBAAiBJ,EAAO;AAAA,EAAW;AAAA,EAEhE,oBAAoB;AAAA,IAClB,iBAAiBK;AAAAA,IACjB,OAAOC;AAAAA,IACP,yBAAyB,EAAE,iBAAiBC,EAAO;AAAA,IACnD,0BAA0B,EAAE,iBAAiBA,EAAO;AAAA,EAAgB;AAAA,EAEtE,sBAAsB;AAAA,IACpB,iBAAiBC;AAAAA,IACjB,OAAOC;AAAAA,IACP,yBAAyB,EAAE,iBAAiBC,EAAO;AAAA,EAAe;AAAA,EAEpE,qBAAqB;AAAA,IACnB,iBAAiB;AAAA,IACjB,OAAOC;AAAAA,IACP,yBAAyB,EAAE,iBAAiBH,EAAO;AAAA,EAAU;AAAA,EAE/D,IAAI;AAAA,IACF,GAAGI;AAAA,IACH,GAAGC,EAAW,cAAc,QAAQ;AAAA,IACpC,GAAGA,EAAW,aAAa,SAAS;AAAA;AAAA;AAAA,IAGpC,WAAW;AAAA,IACX,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,KAAK;AAAA,IACL,SAAS,EAAE,OAAO,WAAW,QAAQ,UAAA;AAAA,EAAU;AAAA,EAEjD,IAAI;AAAA,IACF,GAAGH;AAAA,IACH,GAAGC,EAAW,cAAcG,EAAsB;AAAA,IAClD,GAAGH,EAAW,aAAa,SAAS;AAAA;AAAA,IAEpC,WAAW;AAAA,IACX,UAAUI;AAAAA,IACV,YAAYC;AAAAA,IACZ,KAAK;AAAA,IACL,SAAS,EAAE,OAAO,YAAY,QAAQ,WAAA;AAAA,EAAW;AAAA,EAEnD,MAAM;AAAA,IACJ,GAAGN;AAAA;AAAA;AAAA;AAAA;AAAA,IAKH,GAAGC,EAAW,cAAcM,CAA8B;AAAA,IAC1D,GAAGN,EAAW,aAAa,SAAS;AAAA,IACpC,WAAWO;AAAAA,IACX,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,KAAK;AAAA,IACL,SAAS,EAAE,OAAO,QAAQ,QAAQ,OAAA;AAAA,EAAO;AAAA,EAE3C,IAAI;AAAA,IACF,GAAGV;AAAA,IACH,GAAGC,EAAW,cAAc,SAAS;AAAA,IACrC,GAAGA,EAAW,aAAa,SAAS;AAAA,IACpC,WAAW;AAAA,IACX,UAAUU;AAAAA,IACV,YAAYC;AAAAA,IACZ,KAAK;AAAA,IACL,SAAS,EAAE,OAAO,QAAQ,QAAQ,OAAA;AAAA,EAAO;AAAA,EAE3C,QAAQ;AAAA,IACN,GAAGZ;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,EAAE,OAAO,WAAW,QAAQ,UAAA;AAAA,EAAU;AAAA,EAEjD,QAAQ;AAAA,IACN,GAAGA;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,EAAE,OAAO,YAAY,QAAQ,WAAA;AAAA,EAAW;AAAA,EAEnD,MAAM;AAAA,IACJ,GAAGA;AAAA;AAAA;AAAA,IAGH,OAAOa;AAAAA,IACP,QAAQA;AAAAA,IACR,SAAS,EAAE,OAAO,YAAY,QAAQ,WAAA;AAAA,EAAW;AAAA,EAEnD,QAAQ;AAAA,IACN,GAAGb;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,EAAE,OAAO,UAAU,QAAQ,SAAA;AAAA,EAAS;AAAA,EAE/C,QAAQ,EAAE,cAAcc,EAAO;AAAA,EAC/B,SAAS,EAAE,cAAc,SAAA;AAC3B,CAAC;AAYD,SAASC,EACPC,GACAC,IAAa,UACM;AACnB,SAAOC,EAAM,SAAS,QAAQF,CAAQ,EAAE,QAAQ,CAACG,GAAMC,MAAU;AAC/D,UAAMC,IACJH,EAAM,eAAeC,CAAI,KAAKA,EAAK,QAAQ,OACvC,OAAOA,EAAK,GAAG,IACf,OAAOC,CAAK,GACZE,IAAU,GAAGL,CAAU,IAAII,CAAQ;AAEzC,WACEH,EAAM,eAA+CC,CAAI,KACzDA,EAAK,SAASD,EAAM,WAEbH,EAAsBI,EAAK,MAAM,UAAUG,CAAO,IAGpD,CAAC,EAAE,MAAAH,GAAM,SAAAG,GAAS;AAAA,EAC3B,CAAC;AACH;AAOA,SAASC,GACPP,GACAQ,GACmB;AACnB,QAAMC,IAA4B,CAAA;AAClC,MAAIC,IAA6B,CAAA;AAEjC,QAAMC,IAAe,MAAM;AACzB,QAAI,CAACD,EAAQ,OAAQ;AAKrB,IAHuBA,EAAQ;AAAA,MAC7B,CAAC,EAAE,MAAAP,EAAA,MAAW,OAAOA,KAAS,YAAYA,EAAK,WAAW;AAAA,IAAA,IAG1DM,EAAO,KAAK,GAAGC,EAAQ,IAAI,CAAC,EAAE,MAAAP,EAAA,MAAWA,CAAI,CAAC,IAE9CM,EAAO;AAAA,MACL,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,aAAU;AAAA,UACV,WAAWJ;AAAA,UAEV,YAAQ,IAAI,CAAC,EAAE,MAAAL,EAAA,MAAWA,CAAI;AAAA,QAAA;AAAA,QAJ1B,gBAAgBO,EAAQ,CAAC,EAAE,OAAO;AAAA,MAAA;AAAA,IAKzC,GAGJA,IAAU,CAAA;AAAA,EACZ;AAEA,aAAWG,KAASd,EAAsBC,CAAQ,GAAG;AACnD,QAAI,OAAOa,EAAM,QAAS,YAAY,OAAOA,EAAM,QAAS,UAAU;AACpE,MAAAH,EAAQ,KAAKG,CAAK;AAClB;AAAA,IACF;AAEA,IAAAF,EAAA,GACAF,EAAO;AAAA,MACLP,EAAM,eAAeW,EAAM,IAAI,IAC3BX,EAAM,aAAaW,EAAM,MAAM,EAAE,KAAKA,EAAM,QAAA,CAAS,IACrDA,EAAM;AAAA,IAAA;AAAA,EAEd;AACA,SAAAF,EAAA,GAEOF;AACT;AAwBO,MAAMK,KAASZ,EAAM;AAAA,EAC1B,SACE;AAAA,IACE,SAAAa,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,aAAAC,IAAc;AAAA,IACd,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAApB;AAAA,IACA,GAAGqB;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAS5D,GAAA,GACT6D,IAKJN,KAAeH,MAAY,UACtB,GAAGA,CAAO,gBAIXA,GACAU,IAEJ;AAAA,MACE,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,WAAW;AAAA,MACX,WAAW;AAAA,MACX,MAAM;AAAA,MACN,WAAW;AAAA,IAAA,EAEbT,CAAI,GAEAU,IAAON,IAAUO,KAAOjE,IACxBkE,IAAUR,IACZpB,IACAO,GAAmBP,GAAUuB,EAAO,KAAK;AAE7C,WACE,gBAAAX;AAAA,MAACc;AAAA,MAAA;AAAA,QACC,KAAAJ;AAAA,QACA,aAAU;AAAA,QACJ,CAACO,CAAS,GAAG;AAAA,QACnB,WAAWC;AAAA,UACTP,EAAO;AAAA,UACPA,EAAOC,CAAW;AAAA,UAClBD,EAAOE,CAAQ;AAAA,UACfF,EAAON,CAAK;AAAA,UACZE;AAAA,QAAA;AAAA,QAED,GAAGE;AAAA,QAEH,UAAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"button.js","sources":["../../../src/components/button/button.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, nativeControl } from \"../../styles/host-reset\"\nimport { capTrim } from \"../../styles/text-box\"\nimport * as tokens from \"../../tokens\"\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\n// `useRender` runs on every render to keep hook order stable; without an `asChild` child it is\n// disabled and this placeholder is never rendered.\nconst NO_SLOT_CHILD = <span />\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\nconst useStyles = makeZenithStyles({\n  root: {\n    ...nativeControl,\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontWeight: tokens.fontWeightSemibold,\n    whiteSpace: \"nowrap\",\n    transitionProperty: \"all\",\n    cursor: \"pointer\",\n    flexShrink: 0,\n    // Disabled keeps pointer events so a Tooltip can still explain why, but shows none of the\n    // hover or press feedback (every variant guards those with `:not(:disabled)`) and no pointer.\n    \":disabled\": { opacity: 0.5, cursor: \"not-allowed\" },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.focusRing,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \"& svg\": {\n      flexShrink: 0,\n      pointerEvents: \"none\",\n      color: \"currentColor\",\n    },\n  },\n  label: capTrim,\n  primary: {\n    backgroundColor: tokens.accentSolid,\n    color: tokens.accentContrast,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSolidHover },\n    \":active:not(:disabled)\": { backgroundColor: tokens.accentSolidHover },\n  },\n  secondary: {\n    backgroundColor: tokens.accentSoft,\n    color: tokens.accentOnSoft,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSoftHover },\n  },\n  tertiary: {\n    backgroundColor: \"transparent\",\n    color: tokens.accentA11,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSoft },\n  },\n  ghost: {\n    backgroundColor: \"transparent\",\n    color: tokens.grayA12,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSoft },\n  },\n  primaryDestructive: {\n    backgroundColor: tokens.errorSolid,\n    color: tokens.errorContrast,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.errorSolidHover },\n    \":active:not(:disabled)\": { backgroundColor: tokens.errorSolidHover },\n  },\n  secondaryDestructive: {\n    backgroundColor: tokens.errorSoft,\n    color: tokens.errorOnSoft,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.errorSoftHover },\n  },\n  tertiaryDestructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.errorA11,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.errorSoft },\n  },\n  xs: {\n    ...boxModel,\n    ...shorthands.paddingInline(\"0.5rem\"),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    // Cap trimming removes the line-height's leading from direct text. Keep the established\n    // 24px control geometry explicitly instead of relying on that incidental text height.\n    minHeight: \"1.5rem\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    gap: \"4px\",\n    \"& svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  sm: {\n    ...boxModel,\n    ...shorthands.paddingInline(tokens.spacingElement3),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    // As above, the fixed 28px size is part of Button's contract, independent of its label box.\n    minHeight: \"1.75rem\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    gap: \"0.375rem\",\n    \"& svg\": { width: \"0.875rem\", height: \"0.875rem\" },\n  },\n  base: {\n    ...boxModel,\n    // Density-bound (DENSITY-SPEC.md §2.4, WP9B1-ACCEPTANCE-WP9B2A): padding-inline is the\n    // compact/comfortable lever; min-height is floored by the fixed line-height + padding-block\n    // below and cannot shrink, so it is bound too (compact === normal, comfortable raised via an\n    // explicit minHeight above the natural content box, same mechanism `lg` already uses).\n    ...shorthands.paddingInline(tokens.buttonBasePaddingInline),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    minHeight: tokens.buttonBaseMinHeight,\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    gap: \"0.5rem\",\n    \"& svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  lg: {\n    ...boxModel,\n    ...shorthands.paddingInline(\"1.25rem\"),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    minHeight: \"2.5rem\",\n    fontSize: tokens.textLg,\n    lineHeight: tokens.leadingLg,\n    gap: \"0.5rem\",\n    \"& svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  iconXs: {\n    ...boxModel,\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    \"& svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  iconSm: {\n    ...boxModel,\n    width: \"1.75rem\",\n    height: \"1.75rem\",\n    \"& svg\": { width: \"0.875rem\", height: \"0.875rem\" },\n  },\n  icon: {\n    ...boxModel,\n    // Density-bound: a fixed square, no line-height floor (unlike `base`), so compact/comfortable\n    // both move freely (DENSITY-SPEC.md §2.4).\n    width: tokens.buttonIconSize,\n    height: tokens.buttonIconSize,\n    \"& svg\": { width: \"1.125rem\", height: \"1.125rem\" },\n  },\n  iconLg: {\n    ...boxModel,\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    \"& svg\": { width: \"1.5rem\", height: \"1.5rem\" },\n  },\n  normal: { borderRadius: tokens.radiusLg },\n  rounded: { borderRadius: \"9999px\" },\n})\n\ntype FlatButtonChild = {\n  node: React.ReactNode\n  keyPath: string\n}\n\n/**\n * Fragments do not create boxes, so flatten them to the same leaf order the flex container sees.\n * React.Children.toArray handles nested arrays and gives keyed elements a stable local key; the\n * parent fragment path keeps equal keys from separate fragment scopes distinct.\n */\nfunction flattenButtonChildren(\n  children: React.ReactNode,\n  parentPath = \"button\"\n): FlatButtonChild[] {\n  return React.Children.toArray(children).flatMap((node, index) => {\n    const localKey =\n      React.isValidElement(node) && node.key !== null\n        ? String(node.key)\n        : String(index)\n    const keyPath = `${parentPath}/${localKey}`\n\n    if (\n      React.isValidElement<{ children?: React.ReactNode }>(node) &&\n      node.type === React.Fragment\n    ) {\n      return flattenButtonChildren(node.props.children, keyPath)\n    }\n\n    return [{ node, keyPath }]\n  })\n}\n\n/**\n * A flex container's direct text becomes an anonymous flex item, which `text-box` cannot select.\n * Recreate exactly those contiguous text runs as real label boxes. Consumer elements stay direct\n * children and whitespace-only runs stay raw, preserving today's element order and flex gaps.\n */\nfunction wrapButtonTextRuns(\n  children: React.ReactNode,\n  labelClassName: string\n): React.ReactNode[] {\n  const output: React.ReactNode[] = []\n  let textRun: FlatButtonChild[] = []\n\n  const flushTextRun = () => {\n    if (!textRun.length) return\n\n    const whitespaceOnly = textRun.every(\n      ({ node }) => typeof node === \"string\" && node.trim() === \"\"\n    )\n    if (whitespaceOnly) {\n      output.push(...textRun.map(({ node }) => node))\n    } else {\n      output.push(\n        <span\n          key={`button-label:${textRun[0].keyPath}`}\n          data-slot=\"button-label\"\n          className={labelClassName}\n        >\n          {textRun.map(({ node }) => node)}\n        </span>\n      )\n    }\n    textRun = []\n  }\n\n  for (const child of flattenButtonChildren(children)) {\n    if (typeof child.node === \"string\" || typeof child.node === \"number\") {\n      textRun.push(child)\n      continue\n    }\n\n    flushTextRun()\n    output.push(\n      React.isValidElement(child.node)\n        ? React.cloneElement(child.node, { key: child.keyPath })\n        : child.node\n    )\n  }\n  flushTextRun()\n\n  return output\n}\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\"\nexport type ButtonSize =\n  \"xs\" | \"sm\" | \"base\" | \"lg\" | \"icon-xs\" | \"icon-sm\" | \"icon\" | \"icon-lg\"\nexport type ButtonShape = \"normal\" | \"rounded\"\n\nexport type ButtonProps = Omit<\n  React.ComponentProps<\"button\">,\n  \"variant\" | \"size\" | \"shape\" | \"destructive\" | \"className\" | \"render\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  shape?: ButtonShape\n  destructive?: boolean\n  className?: string\n  /**\n   * Render the single child element instead of a `button`, keeping Button's styling and slot\n   * markers. The child keeps its own semantics: a link stays a link. Without exactly one child\n   * element, Button renders its `button`.\n   */\n  asChild?: boolean\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    {\n      variant = \"primary\",\n      size = \"base\",\n      shape = \"rounded\",\n      destructive = false,\n      className,\n      asChild = false,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const variantSlot:\n      | ButtonVariant\n      | \"primaryDestructive\"\n      | \"secondaryDestructive\"\n      | \"tertiaryDestructive\" =\n      destructive && variant !== \"ghost\"\n        ? (`${variant}Destructive` as\n            | \"primaryDestructive\"\n            | \"secondaryDestructive\"\n            | \"tertiaryDestructive\")\n        : variant\n    const sizeSlot:\n      \"xs\" | \"sm\" | \"base\" | \"lg\" | \"iconXs\" | \"iconSm\" | \"icon\" | \"iconLg\" = (\n      {\n        xs: \"xs\",\n        sm: \"sm\",\n        base: \"base\",\n        lg: \"lg\",\n        \"icon-xs\": \"iconXs\",\n        \"icon-sm\": \"iconSm\",\n        icon: \"icon\",\n        \"icon-lg\": \"iconLg\",\n      } as const\n    )[size]\n\n    const rootClassName = mergeClasses(\n      styles.root,\n      styles[variantSlot],\n      styles[sizeSlot],\n      styles[shape],\n      className\n    )\n    const slotChild = asChild ? onlySlotChild(children) : undefined\n\n    // `asChild` decorates an element the caller owns, so it stays a plain prop merge as Radix's\n    // Slot was. Base UI's button would give that element `role=\"button\"`, a tabindex and\n    // Space-to-click, turning a link into a button for assistive technology.\n    const slotted = useRender({\n      render: slotChild ?? NO_SLOT_CHILD,\n      props: {\n        \"data-slot\": \"button\",\n        [SLOT_ATTR]: \"button\",\n        className: rootClassName,\n        ...props,\n      },\n      ref,\n      enabled: slotChild !== undefined,\n    })\n    if (slotted) return slotted\n\n    return (\n      <ButtonPrimitive\n        ref={ref}\n        data-slot=\"button\"\n        {...{ [SLOT_ATTR]: \"button\" }}\n        className={rootClassName}\n        // Base UI's button defaults to `type=\"button\"`; a bare `<button>` submits its form, as this\n        // component always did. A caller's or an overlay trigger's `type` still wins.\n        type=\"submit\"\n        {...props}\n      >\n        {wrapButtonTextRuns(children, styles.label)}\n      </ButtonPrimitive>\n    )\n  }\n)\n"],"names":["NO_SLOT_CHILD","onlySlotChild","children","elements","React","useStyles","makeZenithStyles","nativeControl","tokens.fontWeightSemibold","tokens.focusRing","capTrim","tokens.accentSolid","tokens.accentContrast","tokens.accentSolidHover","tokens.accentSoft","tokens.accentOnSoft","tokens.accentSoftHover","tokens.accentA11","tokens.grayA12","tokens.errorSolid","tokens.errorContrast","tokens.errorSolidHover","tokens.errorSoft","tokens.errorOnSoft","tokens.errorSoftHover","tokens.errorA11","boxModel","shorthands","tokens.textXs","tokens.leadingXs","tokens.spacingElement3","tokens.textSm","tokens.leadingSm","tokens.buttonBasePaddingInline","tokens.buttonBaseMinHeight","tokens.textBase","tokens.leadingBase","tokens.textLg","tokens.leadingLg","tokens.buttonIconSize","tokens.radiusLg","flattenButtonChildren","parentPath","node","index","localKey","keyPath","wrapButtonTextRuns","labelClassName","output","textRun","flushTextRun","jsx","child","Button","variant","size","shape","destructive","className","asChild","props","ref","styles","variantSlot","sizeSlot","rootClassName","mergeClasses","slotChild","slotted","useRender","SLOT_ATTR","ButtonPrimitive"],"mappings":";;;;;;;;;AAcA,MAAMA,uBAAiB,QAAA,EAAK;AAI5B,SAASC,GAAcC,GAA2B;AAChD,QAAMC,IAAWC,EAAM,SAAS,QAAQF,CAAQ,EAAE,OAAOE,EAAM,cAAc;AAC7E,SAAOD,EAAS,WAAW,IAAIA,EAAS,CAAC,IAAI;AAC/C;AAEA,MAAME,KAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,GAAGC;AAAA,IACH,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,YAAYC;AAAAA,IACZ,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,QAAQ;AAAA,IACR,YAAY;AAAA;AAAA;AAAA,IAGZ,aAAa,EAAE,SAAS,KAAK,QAAQ,cAAA;AAAA,IACrC,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAcC;AAAAA,IAAO;AAAA,IAEvB,2CAA2C;AAAA,MACzC,oBAAoB;AAAA,IAAA;AAAA,IAEtB,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,OAAOC;AAAA,EACP,SAAS;AAAA,IACP,iBAAiBC;AAAAA,IACjB,OAAOC;AAAAA,IACP,yBAAyB,EAAE,iBAAiBC,EAAO;AAAA,IACnD,0BAA0B,EAAE,iBAAiBA,EAAO;AAAA,EAAiB;AAAA,EAEvE,WAAW;AAAA,IACT,iBAAiBC;AAAAA,IACjB,OAAOC;AAAAA,IACP,yBAAyB,EAAE,iBAAiBC,EAAO;AAAA,EAAgB;AAAA,EAErE,UAAU;AAAA,IACR,iBAAiB;AAAA,IACjB,OAAOC;AAAAA,IACP,yBAAyB,EAAE,iBAAiBH,EAAO;AAAA,EAAW;AAAA,EAEhE,OAAO;AAAA,IACL,iBAAiB;AAAA,IACjB,OAAOI;AAAAA,IACP,yBAAyB,EAAE,iBAAiBJ,EAAO;AAAA,EAAW;AAAA,EAEhE,oBAAoB;AAAA,IAClB,iBAAiBK;AAAAA,IACjB,OAAOC;AAAAA,IACP,yBAAyB,EAAE,iBAAiBC,EAAO;AAAA,IACnD,0BAA0B,EAAE,iBAAiBA,EAAO;AAAA,EAAgB;AAAA,EAEtE,sBAAsB;AAAA,IACpB,iBAAiBC;AAAAA,IACjB,OAAOC;AAAAA,IACP,yBAAyB,EAAE,iBAAiBC,EAAO;AAAA,EAAe;AAAA,EAEpE,qBAAqB;AAAA,IACnB,iBAAiB;AAAA,IACjB,OAAOC;AAAAA,IACP,yBAAyB,EAAE,iBAAiBH,EAAO;AAAA,EAAU;AAAA,EAE/D,IAAI;AAAA,IACF,GAAGI;AAAA,IACH,GAAGC,EAAW,cAAc,QAAQ;AAAA,IACpC,GAAGA,EAAW,aAAa,SAAS;AAAA;AAAA;AAAA,IAGpC,WAAW;AAAA,IACX,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,KAAK;AAAA,IACL,SAAS,EAAE,OAAO,WAAW,QAAQ,UAAA;AAAA,EAAU;AAAA,EAEjD,IAAI;AAAA,IACF,GAAGH;AAAA,IACH,GAAGC,EAAW,cAAcG,EAAsB;AAAA,IAClD,GAAGH,EAAW,aAAa,SAAS;AAAA;AAAA,IAEpC,WAAW;AAAA,IACX,UAAUI;AAAAA,IACV,YAAYC;AAAAA,IACZ,KAAK;AAAA,IACL,SAAS,EAAE,OAAO,YAAY,QAAQ,WAAA;AAAA,EAAW;AAAA,EAEnD,MAAM;AAAA,IACJ,GAAGN;AAAA;AAAA;AAAA;AAAA;AAAA,IAKH,GAAGC,EAAW,cAAcM,EAA8B;AAAA,IAC1D,GAAGN,EAAW,aAAa,SAAS;AAAA,IACpC,WAAWO;AAAAA,IACX,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,KAAK;AAAA,IACL,SAAS,EAAE,OAAO,QAAQ,QAAQ,OAAA;AAAA,EAAO;AAAA,EAE3C,IAAI;AAAA,IACF,GAAGV;AAAA,IACH,GAAGC,EAAW,cAAc,SAAS;AAAA,IACrC,GAAGA,EAAW,aAAa,SAAS;AAAA,IACpC,WAAW;AAAA,IACX,UAAUU;AAAAA,IACV,YAAYC;AAAAA,IACZ,KAAK;AAAA,IACL,SAAS,EAAE,OAAO,QAAQ,QAAQ,OAAA;AAAA,EAAO;AAAA,EAE3C,QAAQ;AAAA,IACN,GAAGZ;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,EAAE,OAAO,WAAW,QAAQ,UAAA;AAAA,EAAU;AAAA,EAEjD,QAAQ;AAAA,IACN,GAAGA;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,EAAE,OAAO,YAAY,QAAQ,WAAA;AAAA,EAAW;AAAA,EAEnD,MAAM;AAAA,IACJ,GAAGA;AAAA;AAAA;AAAA,IAGH,OAAOa;AAAAA,IACP,QAAQA;AAAAA,IACR,SAAS,EAAE,OAAO,YAAY,QAAQ,WAAA;AAAA,EAAW;AAAA,EAEnD,QAAQ;AAAA,IACN,GAAGb;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,EAAE,OAAO,UAAU,QAAQ,SAAA;AAAA,EAAS;AAAA,EAE/C,QAAQ,EAAE,cAAcc,EAAO;AAAA,EAC/B,SAAS,EAAE,cAAc,SAAA;AAC3B,CAAC;AAYD,SAASC,EACPvC,GACAwC,IAAa,UACM;AACnB,SAAOtC,EAAM,SAAS,QAAQF,CAAQ,EAAE,QAAQ,CAACyC,GAAMC,MAAU;AAC/D,UAAMC,IACJzC,EAAM,eAAeuC,CAAI,KAAKA,EAAK,QAAQ,OACvC,OAAOA,EAAK,GAAG,IACf,OAAOC,CAAK,GACZE,IAAU,GAAGJ,CAAU,IAAIG,CAAQ;AAEzC,WACEzC,EAAM,eAA+CuC,CAAI,KACzDA,EAAK,SAASvC,EAAM,WAEbqC,EAAsBE,EAAK,MAAM,UAAUG,CAAO,IAGpD,CAAC,EAAE,MAAAH,GAAM,SAAAG,GAAS;AAAA,EAC3B,CAAC;AACH;AAOA,SAASC,GACP7C,GACA8C,GACmB;AACnB,QAAMC,IAA4B,CAAA;AAClC,MAAIC,IAA6B,CAAA;AAEjC,QAAMC,IAAe,MAAM;AACzB,QAAI,CAACD,EAAQ,OAAQ;AAKrB,IAHuBA,EAAQ;AAAA,MAC7B,CAAC,EAAE,MAAAP,EAAA,MAAW,OAAOA,KAAS,YAAYA,EAAK,WAAW;AAAA,IAAA,IAG1DM,EAAO,KAAK,GAAGC,EAAQ,IAAI,CAAC,EAAE,MAAAP,EAAA,MAAWA,CAAI,CAAC,IAE9CM,EAAO;AAAA,MACL,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,aAAU;AAAA,UACV,WAAWJ;AAAA,UAEV,YAAQ,IAAI,CAAC,EAAE,MAAAL,EAAA,MAAWA,CAAI;AAAA,QAAA;AAAA,QAJ1B,gBAAgBO,EAAQ,CAAC,EAAE,OAAO;AAAA,MAAA;AAAA,IAKzC,GAGJA,IAAU,CAAA;AAAA,EACZ;AAEA,aAAWG,KAASZ,EAAsBvC,CAAQ,GAAG;AACnD,QAAI,OAAOmD,EAAM,QAAS,YAAY,OAAOA,EAAM,QAAS,UAAU;AACpE,MAAAH,EAAQ,KAAKG,CAAK;AAClB;AAAA,IACF;AAEA,IAAAF,EAAA,GACAF,EAAO;AAAA,MACL7C,EAAM,eAAeiD,EAAM,IAAI,IAC3BjD,EAAM,aAAaiD,EAAM,MAAM,EAAE,KAAKA,EAAM,QAAA,CAAS,IACrDA,EAAM;AAAA,IAAA;AAAA,EAEd;AACA,SAAAF,EAAA,GAEOF;AACT;AAwBO,MAAMK,KAASlD,EAAM;AAAA,EAC1B,SACE;AAAA,IACE,SAAAmD,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,aAAAC,IAAc;AAAA,IACd,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAA1D;AAAA,IACA,GAAG2D;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAAS1D,GAAA,GACT2D,IAKJN,KAAeH,MAAY,UACtB,GAAGA,CAAO,gBAIXA,GACAU,IAEJ;AAAA,MACE,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,WAAW;AAAA,MACX,WAAW;AAAA,MACX,MAAM;AAAA,MACN,WAAW;AAAA,IAAA,EAEbT,CAAI,GAEAU,IAAgBC;AAAA,MACpBJ,EAAO;AAAA,MACPA,EAAOC,CAAW;AAAA,MAClBD,EAAOE,CAAQ;AAAA,MACfF,EAAON,CAAK;AAAA,MACZE;AAAA,IAAA,GAEIS,IAAYR,IAAU3D,GAAcC,CAAQ,IAAI,QAKhDmE,IAAUC,GAAU;AAAA,MACxB,QAAQF,KAAapE;AAAA,MACrB,OAAO;AAAA,QACL,aAAa;AAAA,QACb,CAACuE,CAAS,GAAG;AAAA,QACb,WAAWL;AAAA,QACX,GAAGL;AAAA,MAAA;AAAA,MAEL,KAAAC;AAAA,MACA,SAASM,MAAc;AAAA,IAAA,CACxB;AACD,WAAIC,KAGF,gBAAAjB;AAAA,MAACoB;AAAAA,MAAA;AAAA,QACC,KAAAV;AAAA,QACA,aAAU;AAAA,QACJ,CAACS,CAAS,GAAG;AAAA,QACnB,WAAWL;AAAA,QAGX,MAAK;AAAA,QACJ,GAAGL;AAAA,QAEH,UAAAd,GAAmB7C,GAAU6D,EAAO,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGhD;AACF;"}

package/dist/components/checkbox/checkbox.js

@@ -1,17 +1,17 @@
 import { jsx as o } from "react/jsx-runtime";
-import * as n from "react";
-import { Checkbox as m, CheckboxIndicator as x } from "../../vendor/.bun/@radix-ui_react-checkbox@1.3.3_2b23df507bdda662/vendor/@radix-ui/react-checkbox/dist/index.js";
-import { SLOT_ATTR as i, mergeClasses as u, shorthands as e } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as b } from "../../styles/make-styles.js";
-import { boxModel as p, nativeControl as f } from "../../styles/host-reset.js";
-import { accentContrast as g, accentSolid as k, accentOnSoft as C, accentA7 as s, focusRing as d, radiusSm as w, accentSoft as v, errorA8 as S, grayA4 as y } from "../../tokens/index.js";
-const T = n.forwardRef(function(r, t) {
+import * as i from "react";
+import { Checkbox as u } from "../../_virtual/_zenith-runtime-family_checkbox.js";
+import { SLOT_ATTR as n, mergeClasses as C, shorthands as e } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as v } from "../../styles/make-styles.js";
+import { boxModel as S, nativeControl as T } from "../../styles/host-reset.js";
+import { accentContrast as y, accentSolid as q, accentOnSoft as R, accentA7 as b, focusRing as x, radiusSm as I, accentSoft as M, errorA8 as O, grayA4 as A } from "../../tokens/index.js";
+const L = i.forwardRef(function(r, t) {
   return /* @__PURE__ */ o(
     "svg",
     {
       ref: t,
       "data-slot": "checkbox-check-icon",
-      [i]: "checkbox-check-icon",
+      [n]: "checkbox-check-icon",
       xmlns: "http://www.w3.org/2000/svg",
       height: "24px",
       viewBox: "0 -960 960 960",
@@ -21,13 +21,13 @@ const T = n.forwardRef(function(r, t) {
       children: /* @__PURE__ */ o("path", { d: "m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z" })
     }
   );
-}), q = n.forwardRef(function(r, t) {
+}), B = i.forwardRef(function(r, t) {
   return /* @__PURE__ */ o(
     "svg",
     {
       ref: t,
       "data-slot": "checkbox-minus-icon",
-      [i]: "checkbox-minus-icon",
+      [n]: "checkbox-minus-icon",
       xmlns: "http://www.w3.org/2000/svg",
       height: "24px",
       viewBox: "0 -960 960 960",
@@ -37,17 +37,17 @@ const T = n.forwardRef(function(r, t) {
       children: /* @__PURE__ */ o("path", { d: "M280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280Z" })
     }
   );
-}), R = b({
+}), E = v({
   root: {
-    ...f,
-    ...e.border("1px", "solid", s),
-    backgroundColor: v,
+    ...T,
+    ...e.border("1px", "solid", b),
+    backgroundColor: M,
     display: "inline-block",
     boxSizing: "border-box",
     width: "1rem",
     height: "1rem",
     flexShrink: 0,
-    borderRadius: w,
+    borderRadius: I,
     // v1 `shadow-xs` — elevation comes from Tailwind's shadow scale, which has no token (B7).
     boxShadow: "0 1px 2px 0 #0000000d",
     transitionProperty: "box-shadow",
@@ -60,34 +60,34 @@ const T = n.forwardRef(function(r, t) {
       outlineOffset: "2px",
       outlineWidth: "2px",
       outlineStyle: "solid",
-      outlineColor: d
+      outlineColor: x
     },
     "&[data-disabled]": {
       cursor: "not-allowed",
       opacity: 0.5,
-      ...e.borderColor(y)
+      ...e.borderColor(A)
     },
     "&[aria-invalid='true']": {
-      outlineColor: d,
-      ...e.borderColor(S)
+      outlineColor: x,
+      ...e.borderColor(O)
     },
-    "&[data-state='indeterminate']": {
-      backgroundColor: s,
+    "&[data-indeterminate]": {
+      backgroundColor: b,
       ...e.borderColor("transparent"),
-      color: C
+      color: R
     },
-    "&[data-state='checked']": {
-      backgroundColor: k,
+    "&[data-checked]": {
+      backgroundColor: q,
       ...e.borderWidth("0px"),
-      color: g
+      color: y
     },
-    "&[data-state='checked'] svg, &[data-state='indeterminate'] svg": {
+    "&[data-checked] svg, &[data-indeterminate] svg": {
       width: "0.875rem",
       height: "0.875rem"
     }
   },
   indicator: {
-    ...p,
+    ...S,
     display: "grid",
     placeContent: "center",
     height: "100%",
@@ -98,30 +98,47 @@ const T = n.forwardRef(function(r, t) {
       height: "0.875rem"
     }
   }
-}), z = n.forwardRef(function({ className: r, checked: t, ...l }, h) {
-  const a = R();
-  return /* @__PURE__ */ o(
-    m,
-    {
-      ref: h,
-      checked: t,
-      "data-slot": "checkbox",
-      [i]: "checkbox",
-      className: u(a.root, r),
-      ...l,
-      children: /* @__PURE__ */ o(
-        x,
-        {
-          "data-slot": "checkbox-indicator",
-          [i]: "checkbox-indicator",
-          className: a.indicator,
-          children: t === "indeterminate" ? /* @__PURE__ */ o(q, {}) : /* @__PURE__ */ o(T, {})
-        }
-      )
-    }
-  );
-});
+}), N = /* @__PURE__ */ o("button", {}), F = i.forwardRef(
+  function({
+    className: r,
+    checked: t,
+    defaultChecked: p,
+    onCheckedChange: c,
+    asChild: Z,
+    value: s,
+    ...f
+  }, g) {
+    const l = E(), [k, w] = i.useState(p ?? !1), a = t === void 0 ? k : t;
+    return /* @__PURE__ */ o(
+      u.Root,
+      {
+        ref: g,
+        nativeButton: !0,
+        render: N,
+        checked: a === !0,
+        indeterminate: a === "indeterminate",
+        onCheckedChange: (h, m) => {
+          c == null || c(h, m), m.isCanceled || w(h);
+        },
+        value: s === void 0 ? void 0 : String(s),
+        "data-slot": "checkbox",
+        [n]: "checkbox",
+        className: C(l.root, r),
+        ...f,
+        children: /* @__PURE__ */ o(
+          u.Indicator,
+          {
+            "data-slot": "checkbox-indicator",
+            [n]: "checkbox-indicator",
+            className: l.indicator,
+            children: a === "indeterminate" ? /* @__PURE__ */ o(B, {}) : /* @__PURE__ */ o(L, {})
+          }
+        )
+      }
+    );
+  }
+);
 export {
-  z as Checkbox
+  F as Checkbox
 };
 //# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\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\nconst CheckIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function CheckIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-check-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-check-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n    </svg>\n  )\n})\n\nconst MinusIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function MinusIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-minus-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-minus-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"M280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280Z\" />\n    </svg>\n  )\n})\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...nativeControl,\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.accentSoft,\n    display: \"inline-block\",\n    boxSizing: \"border-box\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: tokens.radiusSm,\n    // v1 `shadow-xs` — elevation comes from Tailwind's shadow scale, which has no token (B7).\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"box-shadow\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.focusRing,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      opacity: 0.5,\n      ...shorthands.borderColor(tokens.grayA4),\n    },\n    \"&[aria-invalid='true']\": {\n      outlineColor: tokens.focusRing,\n      ...shorthands.borderColor(tokens.errorA8),\n    },\n    \"&[data-state='indeterminate']\": {\n      backgroundColor: tokens.accentA7,\n      ...shorthands.borderColor(\"transparent\"),\n      color: tokens.accentOnSoft,\n    },\n    \"&[data-state='checked']\": {\n      backgroundColor: tokens.accentSolid,\n      ...shorthands.borderWidth(\"0px\"),\n      color: tokens.accentContrast,\n    },\n    \"&[data-state='checked'] svg, &[data-state='indeterminate'] svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  indicator: {\n    ...boxModel,\n    display: \"grid\",\n    placeContent: \"center\",\n    height: \"100%\",\n    color: \"currentColor\",\n    transitionProperty: \"none\",\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n})\n\nexport type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root>\n\nexport const Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(function Checkbox({ className, checked, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      checked={checked}\n      data-slot=\"checkbox\"\n      {...{ [SLOT_ATTR]: \"checkbox\" }}\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        {...{ [SLOT_ATTR]: \"checkbox-indicator\" }}\n        className={styles.indicator}\n      >\n        {checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n})\n"],"names":["CheckIcon","React","props","ref","jsx","SLOT_ATTR","MinusIcon","useStyles","makeZenithStyles","nativeControl","shorthands","tokens.accentA7","tokens.accentSoft","tokens.radiusSm","tokens.focusRing","tokens.grayA4","tokens.errorA8","tokens.accentOnSoft","tokens.accentSolid","tokens.accentContrast","boxModel","Checkbox","className","checked","styles","CheckboxPrimitive.Root","mergeClasses","CheckboxPrimitive.Indicator"],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\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\nconst CheckIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function CheckIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-check-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-check-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n    </svg>\n  )\n})\n\nconst MinusIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function MinusIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-minus-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-minus-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"M280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280Z\" />\n    </svg>\n  )\n})\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...nativeControl,\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.accentSoft,\n    display: \"inline-block\",\n    boxSizing: \"border-box\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: tokens.radiusSm,\n    // v1 `shadow-xs` — elevation comes from Tailwind's shadow scale, which has no token (B7).\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"box-shadow\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.focusRing,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      opacity: 0.5,\n      ...shorthands.borderColor(tokens.grayA4),\n    },\n    \"&[aria-invalid='true']\": {\n      outlineColor: tokens.focusRing,\n      ...shorthands.borderColor(tokens.errorA8),\n    },\n    \"&[data-indeterminate]\": {\n      backgroundColor: tokens.accentA7,\n      ...shorthands.borderColor(\"transparent\"),\n      color: tokens.accentOnSoft,\n    },\n    \"&[data-checked]\": {\n      backgroundColor: tokens.accentSolid,\n      ...shorthands.borderWidth(\"0px\"),\n      color: tokens.accentContrast,\n    },\n    \"&[data-checked] svg, &[data-indeterminate] svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  indicator: {\n    ...boxModel,\n    display: \"grid\",\n    placeContent: \"center\",\n    height: \"100%\",\n    color: \"currentColor\",\n    transitionProperty: \"none\",\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n})\n\n/**\n * `checked` and `defaultChecked` accept the same three states as on Radix; Base UI models the third\n * as its own `indeterminate` boolean, which the wrapper sets.\n */\nexport type CheckboxCheckedState = boolean | \"indeterminate\"\n\n/**\n * What `onCheckedChange` 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 CheckboxCheckedChangeDetails = {\n  /** Why the checkbox changed. Base UI reports every checkbox change as `none`. */\n  reason: \"none\"\n  /** The native event behind the change. */\n  event: Event\n  /** Keeps the checkbox in its current state. */\n  cancel: () => void\n  /** Lets the event propagate where the checkbox 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}\n\n/**\n * The checkbox props Base UI adds to a `<button>`'s, declared in Zenith with Base UI's types, apart\n * from the three-state `checked`, `defaultChecked` and `onCheckedChange`, which keep their Radix\n * shape. The root renders a native `<button>`, so the DOM attributes, handlers, `ref`, `key`,\n * `className`, `style` and `value` stay the button's, as they were on Radix; `render`,\n * `nativeButton`, `indeterminate` and `parent` are not part of the surface.\n */\ntype CheckboxRootProps = {\n  /**\n   * Whether the checkbox is currently checked, or `\"indeterminate\"`.\n   *\n   * To render an uncontrolled checkbox, use the `defaultChecked` prop instead.\n   */\n  checked?: CheckboxCheckedState | undefined\n  /** Whether the checkbox is initially checked, or `\"indeterminate\"`. */\n  defaultChecked?: CheckboxCheckedState | undefined\n  /** Whether the component should ignore user interaction. */\n  disabled?: boolean | undefined\n  /** A ref to access the hidden `<input>` element. */\n  inputRef?: React.Ref<HTMLInputElement> | undefined\n  /** Identifies the field when a form is submitted. */\n  name?: string | undefined\n  /**\n   * Identifies the form that owns the hidden input.\n   * Useful when the checkbox is rendered outside the form.\n   */\n  form?: string | undefined\n  /**\n   * Event handler called when the checkbox is checked or unchecked. Clicking an indeterminate\n   * checkbox reports `true`.\n   */\n  onCheckedChange?:\n    | ((\n        checked: CheckboxCheckedState,\n        eventDetails: CheckboxCheckedChangeDetails\n      ) => void)\n    | undefined\n  /** Whether the user should be unable to check or uncheck the checkbox. */\n  readOnly?: boolean | undefined\n  /** Whether the user must check the checkbox before submitting a form. */\n  required?: boolean | undefined\n  /**\n   * The value submitted with the form when the checkbox is unchecked.\n   * By default, unchecked checkboxes do not submit any value, matching native checkbox behavior.\n   */\n  uncheckedValue?: string | undefined\n}\n\nexport type CheckboxProps = Omit<\n  React.ComponentPropsWithRef<\"button\">,\n  keyof CheckboxRootProps\n> &\n  CheckboxRootProps & {\n    /**\n     * @deprecated Has no effect. The indicator is the checkbox's only child, so on Radix this\n     * rendered the indicator as the checkbox rather than an element of yours. Remove it.\n     */\n    asChild?: boolean\n  }\n\n// Base UI renders a <span> by default and moves the caller's id onto its hidden input. A native\n// button keeps the id, the HTMLButtonElement ref, native disabled and <label for> as Radix had them.\nconst ROOT_ELEMENT = <button />\n\nexport const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  function Checkbox(\n    {\n      className,\n      checked,\n      defaultChecked,\n      onCheckedChange,\n      asChild: _asChild,\n      value,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    // Base UI has no third state to start from or to hold uncontrolled, so the state lives here\n    // and Base UI is always controlled; a cancelled change leaves it as it was.\n    const [uncontrolled, setUncontrolled] =\n      React.useState<CheckboxCheckedState>(defaultChecked ?? false)\n    const state = checked === undefined ? uncontrolled : checked\n\n    return (\n      <CheckboxPrimitive.Root\n        ref={ref}\n        nativeButton\n        render={ROOT_ELEMENT}\n        checked={state === true}\n        indeterminate={state === \"indeterminate\"}\n        onCheckedChange={(next, details) => {\n          onCheckedChange?.(next, details)\n          if (!details.isCanceled) setUncontrolled(next)\n        }}\n        // Radix took the button's value type; Base UI submits a string, so it is converted here\n        // the way the button's value attribute stringified it.\n        value={value === undefined ? undefined : String(value)}\n        data-slot=\"checkbox\"\n        {...{ [SLOT_ATTR]: \"checkbox\" }}\n        className={mergeClasses(styles.root, className)}\n        // Base UI types the root's handlers for its default <span>; the element is the button\n        // above, so the caller's button-typed handlers receive exactly the events they declare.\n        {...(props as CheckboxPrimitive.Root.Props)}\n      >\n        <CheckboxPrimitive.Indicator\n          data-slot=\"checkbox-indicator\"\n          {...{ [SLOT_ATTR]: \"checkbox-indicator\" }}\n          className={styles.indicator}\n        >\n          {state === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    )\n  }\n)\n"],"names":["CheckIcon","React","props","ref","jsx","SLOT_ATTR","MinusIcon","useStyles","makeZenithStyles","nativeControl","shorthands","tokens.accentA7","tokens.accentSoft","tokens.radiusSm","tokens.focusRing","tokens.grayA4","tokens.errorA8","tokens.accentOnSoft","tokens.accentSolid","tokens.accentContrast","boxModel","ROOT_ELEMENT","Checkbox","className","checked","defaultChecked","onCheckedChange","_asChild","value","styles","uncontrolled","setUncontrolled","state","CheckboxPrimitive","next","details","mergeClasses"],"mappings":"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"}