@epilot/zenith-react 0.1.0 → 0.2.0-next.1

package/dist/components/card/card.js

@@ -1,28 +1,36 @@
 import { jsx as n } from "react/jsx-runtime";
 import * as i from "react";
 import { mergeClasses as s, SLOT_ATTR as d, shorthands as f } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as p } from "../../styles/make-styles.js";
-import { spacingGroup2 as e, leadingSm as g, textSm as m, grayA11 as u, fontWeightSemibold as C, body as h, spacingElement2 as R, radiusXl as y } from "../../tokens/index.js";
-const c = p({
+import { makeZenithStyles as m } from "../../styles/make-styles.js";
+import { boxModel as p } from "../../styles/host-reset.js";
+import { spacingGroup2 as e, leadingSm as g, textSm as u, grayA11 as C, fontWeightSemibold as h, shadowContainer as R, surfaceContainer as y, spacingElement2 as b, borderContainer as w, borderWidthContainer as S, surfaceRadiusContainer as T } from "../../tokens/index.js";
+const c = m({
   root: {
-    backgroundColor: h,
+    ...p,
+    // The container role recipe Surface's `section` uses: fill, edge, radius and shadow all follow
+    // the theme. In dark mode the role has no border width and no shadow, so the fill is what
+    // separates the card from the page.
+    backgroundColor: y,
     display: "flex",
     flexDirection: "column",
     ...f.gap(e),
-    ...f.borderRadius(y),
-    ...f.border("1px", "solid", "transparent"),
+    ...f.borderRadius(T),
+    ...f.borderWidth(S),
+    ...f.borderStyle("solid"),
+    ...f.borderColor(w),
     paddingTop: e,
     paddingBottom: e,
-    boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
+    boxShadow: R
   },
   header: {
+    ...p,
     containerType: "inline-size",
     containerName: "card-header",
     display: "grid",
     gridAutoRows: "min-content",
     gridTemplateRows: "auto auto",
     alignItems: "start",
-    ...f.gap(R),
+    ...f.gap(b),
     paddingLeft: e,
     paddingRight: e,
     "&:is(.border-b)": {
@@ -35,11 +43,11 @@ const c = p({
   title: {
     // v1 `leading-none` — a literal 1 because no token exists for it.
     lineHeight: 1,
-    fontWeight: C
+    fontWeight: h
   },
   description: {
-    color: u,
-    fontSize: m,
+    color: C,
+    fontSize: u,
     lineHeight: g
   },
   action: {
@@ -50,10 +58,12 @@ const c = p({
     justifySelf: "end"
   },
   content: {
+    ...p,
     paddingLeft: e,
     paddingRight: e
   },
   footer: {
+    ...p,
     display: "flex",
     alignItems: "center",
     paddingLeft: e,
@@ -62,110 +72,110 @@ const c = p({
       paddingTop: e
     }
   }
-}), T = i.forwardRef(function({ className: t, ...r }, a) {
-  const o = c();
+}), L = i.forwardRef(function({ className: t, ...r }, o) {
+  const a = c();
   return /* @__PURE__ */ n(
     "div",
     {
-      ref: a,
+      ref: o,
       "data-slot": "card",
       [d]: "card",
-      className: s(o.root, t),
+      className: s(a.root, t),
       ...r
     }
   );
-}), N = i.forwardRef(
-  function({ className: t, ...r }, a) {
-    const o = c();
+}), W = i.forwardRef(
+  function({ className: t, ...r }, o) {
+    const a = c();
     return /* @__PURE__ */ n(
       "div",
       {
-        ref: a,
+        ref: o,
         "data-slot": "card-header",
         [d]: "card-header",
-        className: s(o.header, t),
+        className: s(a.header, t),
         ...r
       }
     );
   }
-), v = i.forwardRef(
-  function({ className: t, ...r }, a) {
-    const o = c();
+), D = i.forwardRef(
+  function({ className: t, ...r }, o) {
+    const a = c();
     return /* @__PURE__ */ n(
       "div",
       {
-        ref: a,
+        ref: o,
         "data-slot": "card-title",
         [d]: "card-title",
-        className: s(o.title, t),
+        className: s(a.title, t),
         ...r
       }
     );
   }
-), A = i.forwardRef(
-  function({ className: t, ...r }, a) {
-    const o = c();
+), j = i.forwardRef(
+  function({ className: t, ...r }, o) {
+    const a = c();
     return /* @__PURE__ */ n(
       "div",
       {
-        ref: a,
+        ref: o,
         "data-slot": "card-description",
         [d]: "card-description",
-        className: s(o.description, t),
+        className: s(a.description, t),
         ...r
       }
     );
   }
-), H = i.forwardRef(
-  function({ className: t, ...r }, a) {
-    const o = c();
+), k = i.forwardRef(
+  function({ className: t, ...r }, o) {
+    const a = c();
     return /* @__PURE__ */ n(
       "div",
       {
-        ref: a,
+        ref: o,
         "data-slot": "card-action",
         [d]: "card-action",
-        className: s(o.action, t),
+        className: s(a.action, t),
         ...r
       }
     );
   }
-), L = i.forwardRef(
-  function({ className: t, ...r }, a) {
-    const o = c();
+), z = i.forwardRef(
+  function({ className: t, ...r }, o) {
+    const a = c();
     return /* @__PURE__ */ n(
       "div",
       {
-        ref: a,
+        ref: o,
         "data-slot": "card-content",
         [d]: "card-content",
-        className: s(o.content, t),
+        className: s(a.content, t),
         ...r
       }
     );
   }
-), D = i.forwardRef(
-  function({ className: t, ...r }, a) {
-    const o = c();
+), B = i.forwardRef(
+  function({ className: t, ...r }, o) {
+    const a = c();
     return /* @__PURE__ */ n(
       "div",
       {
-        ref: a,
+        ref: o,
         "data-slot": "card-footer",
         [d]: "card-footer",
-        className: s(o.footer, t),
+        className: s(a.footer, t),
         ...r
       }
     );
   }
 );
 export {
-  T as Card,
-  H as CardAction,
-  L as CardContent,
-  A as CardDescription,
-  D as CardFooter,
-  N as CardHeader,
-  v as CardTitle
+  L as Card,
+  k as CardAction,
+  z as CardContent,
+  j as CardDescription,
+  B as CardFooter,
+  W as CardHeader,
+  D as CardTitle
 };
 //# sourceMappingURL=card.js.map

package/dist/components/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../src/components/card/card.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * Card — the first compound component: ONE `makeZenithStyles` call for the whole family, one slot\n * per sub-component, and each sub-component reads its own slot. Callout, Breadcrumb and Table copy\n * this pattern.\n */\n\nconst useStyles = makeZenithStyles({\n  root: {\n    backgroundColor: tokens.body,\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingGroup2),\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.border(\"1px\", \"solid\", \"transparent\"),\n    paddingTop: tokens.spacingGroup2,\n    paddingBottom: tokens.spacingGroup2,\n    boxShadow: \"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)\",\n  },\n  header: {\n    containerType: \"inline-size\",\n    containerName: \"card-header\",\n    display: \"grid\",\n    gridAutoRows: \"min-content\",\n    gridTemplateRows: \"auto auto\",\n    alignItems: \"start\",\n    ...shorthands.gap(tokens.spacingElement2),\n    paddingLeft: tokens.spacingGroup2,\n    paddingRight: tokens.spacingGroup2,\n    \"&:is(.border-b)\": {\n      paddingBottom: tokens.spacingGroup2,\n    },\n    [`&:has([${SLOT_ATTR}=\"card-action\"])`]: {\n      gridTemplateColumns: \"1fr auto\",\n    },\n  },\n  title: {\n    // v1 `leading-none` — a literal 1 because no token exists for it.\n    lineHeight: 1,\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  description: {\n    color: tokens.grayA11,\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n  action: {\n    gridColumnStart: 2,\n    gridRowStart: 1,\n    gridRowEnd: \"span 2\",\n    alignSelf: \"start\",\n    justifySelf: \"end\",\n  },\n  content: {\n    paddingLeft: tokens.spacingGroup2,\n    paddingRight: tokens.spacingGroup2,\n  },\n  footer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    paddingLeft: tokens.spacingGroup2,\n    paddingRight: tokens.spacingGroup2,\n    \"&:is(.border-t)\": {\n      paddingTop: tokens.spacingGroup2,\n    },\n  },\n})\n\nexport type CardProps = React.ComponentProps<\"div\">\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(\n  { className, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"card\"\n      {...{ [SLOT_ATTR]: \"card\" }}\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    />\n  )\n})\n\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardProps>(\n  function CardHeader({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-header\"\n        {...{ [SLOT_ATTR]: \"card-header\" }}\n        className={mergeClasses(styles.header, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport const CardTitle = React.forwardRef<HTMLDivElement, CardProps>(\n  function CardTitle({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-title\"\n        {...{ [SLOT_ATTR]: \"card-title\" }}\n        className={mergeClasses(styles.title, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport const CardDescription = React.forwardRef<HTMLDivElement, CardProps>(\n  function CardDescription({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-description\"\n        {...{ [SLOT_ATTR]: \"card-description\" }}\n        className={mergeClasses(styles.description, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport const CardAction = React.forwardRef<HTMLDivElement, CardProps>(\n  function CardAction({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-action\"\n        {...{ [SLOT_ATTR]: \"card-action\" }}\n        className={mergeClasses(styles.action, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport const CardContent = React.forwardRef<HTMLDivElement, CardProps>(\n  function CardContent({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-content\"\n        {...{ [SLOT_ATTR]: \"card-content\" }}\n        className={mergeClasses(styles.content, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardProps>(\n  function CardFooter({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-footer\"\n        {...{ [SLOT_ATTR]: \"card-footer\" }}\n        className={mergeClasses(styles.footer, className)}\n        {...props}\n      />\n    )\n  }\n)\n"],"names":["useStyles","makeZenithStyles","tokens.body","shorthands","tokens.spacingGroup2","tokens.radiusXl","tokens.spacingElement2","SLOT_ATTR","tokens.fontWeightSemibold","tokens.grayA11","tokens.textSm","tokens.leadingSm","Card","React","className","props","ref","styles","jsx","mergeClasses","CardHeader","CardTitle","CardDescription","CardAction","CardContent","CardFooter"],"mappings":"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"}
+{"version":3,"file":"card.js","sources":["../../../src/components/card/card.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * Card — the first compound component: ONE `makeZenithStyles` call for the whole family, one slot\n * per sub-component, and each sub-component reads its own slot. Callout, Breadcrumb and Table copy\n * this pattern.\n */\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    // The container role recipe Surface's `section` uses: fill, edge, radius and shadow all follow\n    // the theme. In dark mode the role has no border width and no shadow, so the fill is what\n    // separates the card from the page.\n    backgroundColor: tokens.surfaceContainer,\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingGroup2),\n    ...shorthands.borderRadius(tokens.surfaceRadiusContainer),\n    ...shorthands.borderWidth(tokens.borderWidthContainer),\n    ...shorthands.borderStyle(\"solid\"),\n    ...shorthands.borderColor(tokens.borderContainer),\n    paddingTop: tokens.spacingGroup2,\n    paddingBottom: tokens.spacingGroup2,\n    boxShadow: tokens.shadowContainer,\n  },\n  header: {\n    ...boxModel,\n    containerType: \"inline-size\",\n    containerName: \"card-header\",\n    display: \"grid\",\n    gridAutoRows: \"min-content\",\n    gridTemplateRows: \"auto auto\",\n    alignItems: \"start\",\n    ...shorthands.gap(tokens.spacingElement2),\n    paddingLeft: tokens.spacingGroup2,\n    paddingRight: tokens.spacingGroup2,\n    \"&:is(.border-b)\": {\n      paddingBottom: tokens.spacingGroup2,\n    },\n    [`&:has([${SLOT_ATTR}=\"card-action\"])`]: {\n      gridTemplateColumns: \"1fr auto\",\n    },\n  },\n  title: {\n    // v1 `leading-none` — a literal 1 because no token exists for it.\n    lineHeight: 1,\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  description: {\n    color: tokens.grayA11,\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n  action: {\n    gridColumnStart: 2,\n    gridRowStart: 1,\n    gridRowEnd: \"span 2\",\n    alignSelf: \"start\",\n    justifySelf: \"end\",\n  },\n  content: {\n    ...boxModel,\n    paddingLeft: tokens.spacingGroup2,\n    paddingRight: tokens.spacingGroup2,\n  },\n  footer: {\n    ...boxModel,\n    display: \"flex\",\n    alignItems: \"center\",\n    paddingLeft: tokens.spacingGroup2,\n    paddingRight: tokens.spacingGroup2,\n    \"&:is(.border-t)\": {\n      paddingTop: tokens.spacingGroup2,\n    },\n  },\n})\n\nexport type CardProps = React.ComponentProps<\"div\">\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(\n  { className, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"card\"\n      {...{ [SLOT_ATTR]: \"card\" }}\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    />\n  )\n})\n\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardProps>(\n  function CardHeader({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-header\"\n        {...{ [SLOT_ATTR]: \"card-header\" }}\n        className={mergeClasses(styles.header, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport const CardTitle = React.forwardRef<HTMLDivElement, CardProps>(\n  function CardTitle({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-title\"\n        {...{ [SLOT_ATTR]: \"card-title\" }}\n        className={mergeClasses(styles.title, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport const CardDescription = React.forwardRef<HTMLDivElement, CardProps>(\n  function CardDescription({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-description\"\n        {...{ [SLOT_ATTR]: \"card-description\" }}\n        className={mergeClasses(styles.description, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport const CardAction = React.forwardRef<HTMLDivElement, CardProps>(\n  function CardAction({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-action\"\n        {...{ [SLOT_ATTR]: \"card-action\" }}\n        className={mergeClasses(styles.action, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport const CardContent = React.forwardRef<HTMLDivElement, CardProps>(\n  function CardContent({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-content\"\n        {...{ [SLOT_ATTR]: \"card-content\" }}\n        className={mergeClasses(styles.content, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardProps>(\n  function CardFooter({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-footer\"\n        {...{ [SLOT_ATTR]: \"card-footer\" }}\n        className={mergeClasses(styles.footer, className)}\n        {...props}\n      />\n    )\n  }\n)\n"],"names":["useStyles","makeZenithStyles","boxModel","tokens.surfaceContainer","shorthands","tokens.spacingGroup2","tokens.surfaceRadiusContainer","tokens.borderWidthContainer","tokens.borderContainer","tokens.shadowContainer","tokens.spacingElement2","SLOT_ATTR","tokens.fontWeightSemibold","tokens.grayA11","tokens.textSm","tokens.leadingSm","Card","React","className","props","ref","styles","jsx","mergeClasses","CardHeader","CardTitle","CardDescription","CardAction","CardContent","CardFooter"],"mappings":"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"}

package/dist/components/checkbox/checkbox.js

@@ -1,10 +1,11 @@
 import { jsx as o } from "react/jsx-runtime";
 import * as n from "react";
-import { Checkbox as m, CheckboxIndicator as u } 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 x, shorthands as e } from "@epilot/zenith-runtime/v1";
+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 { accentContrast as p, accentSolid as f, accentOnSoft as g, accentA7 as s, focusRing as d, radiusSm as k, accentSoft as w, errorA8 as C, grayA4 as v } from "../../tokens/index.js";
-const S = n.forwardRef(function(r, t) {
+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) {
   return /* @__PURE__ */ o(
     "svg",
     {
@@ -20,7 +21,7 @@ const S = 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" })
     }
   );
-}), y = n.forwardRef(function(r, t) {
+}), q = n.forwardRef(function(r, t) {
   return /* @__PURE__ */ o(
     "svg",
     {
@@ -36,16 +37,17 @@ const S = 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" })
     }
   );
-}), T = b({
+}), R = b({
   root: {
+    ...f,
     ...e.border("1px", "solid", s),
-    backgroundColor: w,
+    backgroundColor: v,
     display: "inline-block",
     boxSizing: "border-box",
     width: "1rem",
     height: "1rem",
     flexShrink: 0,
-    borderRadius: k,
+    borderRadius: w,
     // v1 `shadow-xs` — elevation comes from Tailwind's shadow scale, which has no token (B7).
     boxShadow: "0 1px 2px 0 #0000000d",
     transitionProperty: "box-shadow",
@@ -63,21 +65,21 @@ const S = n.forwardRef(function(r, t) {
     "&[data-disabled]": {
       cursor: "not-allowed",
       opacity: 0.5,
-      ...e.borderColor(v)
+      ...e.borderColor(y)
     },
     "&[aria-invalid='true']": {
       outlineColor: d,
-      ...e.borderColor(C)
+      ...e.borderColor(S)
     },
     "&[data-state='indeterminate']": {
       backgroundColor: s,
       ...e.borderColor("transparent"),
-      color: g
+      color: C
     },
     "&[data-state='checked']": {
-      backgroundColor: f,
+      backgroundColor: k,
       ...e.borderWidth("0px"),
-      color: p
+      color: g
     },
     "&[data-state='checked'] svg, &[data-state='indeterminate'] svg": {
       width: "0.875rem",
@@ -85,6 +87,7 @@ const S = n.forwardRef(function(r, t) {
     }
   },
   indicator: {
+    ...p,
     display: "grid",
     placeContent: "center",
     height: "100%",
@@ -95,8 +98,8 @@ const S = n.forwardRef(function(r, t) {
       height: "0.875rem"
     }
   }
-}), M = n.forwardRef(function({ className: r, checked: t, ...l }, h) {
-  const a = T();
+}), z = n.forwardRef(function({ className: r, checked: t, ...l }, h) {
+  const a = R();
   return /* @__PURE__ */ o(
     m,
     {
@@ -104,21 +107,21 @@ const S = n.forwardRef(function(r, t) {
       checked: t,
       "data-slot": "checkbox",
       [i]: "checkbox",
-      className: x(a.root, r),
+      className: u(a.root, r),
       ...l,
       children: /* @__PURE__ */ o(
-        u,
+        x,
         {
           "data-slot": "checkbox-indicator",
           [i]: "checkbox-indicator",
           className: a.indicator,
-          children: t === "indeterminate" ? /* @__PURE__ */ o(y, {}) : /* @__PURE__ */ o(S, {})
+          children: t === "indeterminate" ? /* @__PURE__ */ o(q, {}) : /* @__PURE__ */ o(T, {})
         }
       )
     }
   );
 });
 export {
-  M as Checkbox
+  z 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 * 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    ...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    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","shorthands","tokens.accentA7","tokens.accentSoft","tokens.radiusSm","tokens.focusRing","tokens.grayA4","tokens.errorA8","tokens.accentOnSoft","tokens.accentSolid","tokens.accentContrast","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 * 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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"}