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

package/README.md

@@ -48,6 +48,40 @@ Use `AppearanceBoundary` for a scoped appearance that must also reach portalled
 content — a theme or surface attribute on a subtree does not follow a Dialog,
 Popover, Select, Tooltip or menu into `document.body`.
 
+## Lay your own screens out
+
+Zenith ships components, not a layout system: there is no `Grid`, `Stack`,
+`Box` or `Spacer`, and there never will be. The space between components is
+yours.
+
+`makeZenithStyles` is **public API for that purpose**, exported from the
+package root alongside `mergeClasses` and `shorthands`. It is the same Griffel
+API Zenith's own components use, so your layout ships its CSS with your
+components and depends on no stylesheet loaded from somewhere else.
+
+```tsx
+import { makeZenithStyles, shorthands } from "@epilot/zenith-react"
+import { spacingLayout1, containerXl } from "@epilot/zenith-react/tokens"
+
+const useStyles = makeZenithStyles({
+  page: {
+    display: "flex",
+    flexDirection: "column",
+    maxWidth: containerXl,
+    ...shorthands.gap(spacingLayout1),
+  },
+})
+```
+
+Take every value from `@epilot/zenith-react/tokens`. A literal hex, a utility
+class from another stylesheet, or a raw pixel value is how a screen drifts away
+from the system and stops following a token change.
+
+A utility-class framework works too, but understand what you are depending on:
+those classes come from a stylesheet your component does not ship, so what your
+screen looks like is decided by whichever version of that stylesheet is
+deployed beside it.
+
 ## Validate the host
 
 - Exercise the application under its real content-security policy.

package/dist/components/accordion/accordion.js

@@ -1,33 +1,39 @@
-import { jsx as i, jsxs as h } from "react/jsx-runtime";
+import { jsx as i, jsxs as w } from "react/jsx-runtime";
 import * as r from "react";
-import { Root as x, Content as w, Item as y, Header as A, Trigger as b } from "../../vendor/.bun/@radix-ui_react-accordion@1.2.12_2b23df507bdda662/vendor/@radix-ui/react-accordion/dist/index.js";
-import { SLOT_ATTR as a, mergeClasses as m } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as S } from "../../styles/make-styles.js";
-import { spacingElement2 as v, spacingElement1 as T, spacingElement3 as l, leadingSm as f, textSm as u, grayA11 as C, grayA3 as R, fontWeightMedium as I, radiusMd as k, accentA8 as E } from "../../tokens/index.js";
-const g = S({
+import { Root as b, Content as y, Item as A, Header as S, Trigger as v } from "../../vendor/.bun/@radix-ui_react-accordion@1.2.12_2b23df507bdda662/vendor/@radix-ui/react-accordion/dist/index.js";
+import { SLOT_ATTR as a, mergeClasses as f, shorthands as l } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as C } from "../../styles/make-styles.js";
+import { boxModel as m, nativeControl as T } from "../../styles/host-reset.js";
+import { spacingElement2 as R, spacingElement1 as I, spacingElement3 as g, leadingSm as p, textSm as u, grayA11 as k, grayA3 as z, fontWeightMedium as E, radiusMd as N, accentA8 as q } from "../../tokens/index.js";
+const h = C({
   header: {
+    // Radix renders the header as an `<h3>`, whose UA margin and type would otherwise show.
+    ...l.margin(0),
+    fontSize: "inherit",
+    fontWeight: "inherit",
     display: "flex"
   },
   trigger: {
-    outlineColor: E,
-    paddingInline: l,
-    paddingBlock: "1rem",
+    ...T,
+    outlineColor: q,
+    ...l.paddingInline(g),
+    ...l.paddingBlock("1rem"),
     cursor: "pointer",
     display: "flex",
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: "0%",
     alignItems: "flex-start",
-    gap: l,
-    borderRadius: k,
+    gap: g,
+    borderRadius: N,
     textAlign: "left",
     fontSize: u,
-    lineHeight: f,
-    fontWeight: I,
+    lineHeight: p,
+    fontWeight: E,
     transitionProperty: "all",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
     transitionDuration: "150ms",
-    ":hover": { backgroundColor: R },
+    ":hover": { backgroundColor: z },
     ":focus-visible": {
       outlineOffset: "2px",
       outlineWidth: "2px",
@@ -48,9 +54,10 @@ const g = S({
     justifyContent: "space-between"
   },
   icon: {
+    ...m,
     width: "1.25rem",
     height: "1.25rem",
-    color: C,
+    color: k,
     pointerEvents: "none",
     flexShrink: 0,
     transform: "translateY(0)",
@@ -59,12 +66,13 @@ const g = S({
     transitionDuration: "150ms"
   },
   panel: {
+    ...m,
     overflow: "hidden",
     fontSize: u,
-    lineHeight: f,
-    paddingInline: l,
-    paddingBlockStart: T,
-    paddingBlockEnd: v,
+    lineHeight: p,
+    paddingInline: g,
+    paddingBlockStart: I,
+    paddingBlockEnd: R,
     "&[data-state='open']": {
       animationName: {
         from: { height: "0" },
@@ -83,86 +91,87 @@ const g = S({
     }
   },
   inner: {
+    ...m,
     paddingInline: "0",
     paddingBlock: "0"
   }
-}), j = r.forwardRef(function({ className: t, ...n }, o) {
+}), H = r.forwardRef(function({ className: n, ...t }, o) {
   return /* @__PURE__ */ i(
-    x,
+    b,
     {
       ref: o,
       "data-slot": "accordion",
       [a]: "accordion",
-      className: t,
-      ...n
+      className: n,
+      ...t
     }
   );
-}), F = r.forwardRef(function({ className: t, ...n }, o) {
+}), L = r.forwardRef(function({ className: n, ...t }, o) {
   return /* @__PURE__ */ i(
-    y,
+    A,
     {
       ref: o,
       "data-slot": "accordion-item",
       [a]: "accordion-item",
-      className: t,
-      ...n
+      className: n,
+      ...t
     }
   );
-}), p = r.forwardRef(function({ className: t, ...n }, o) {
-  const e = g();
+}), x = r.forwardRef(function({ className: n, ...t }, o) {
+  const e = h();
   return /* @__PURE__ */ i(
     "svg",
     {
       ref: o,
       "data-slot": "accordion-icon",
       [a]: "accordion-icon",
-      className: m(e.icon, t),
+      className: f(e.icon, n),
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 -960 960 960",
       fill: "currentColor",
-      ...n,
+      ...t,
       children: /* @__PURE__ */ i("path", { d: "M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z" })
     }
   );
-}), H = r.forwardRef(function({ className: t, align: n = "end", children: o, ...e }, s) {
-  const d = g();
-  return /* @__PURE__ */ i(A, { className: d.header, children: /* @__PURE__ */ h(
-    b,
+}), O = r.forwardRef(function({ className: n, align: t = "end", children: o, ...e }, s) {
+  const d = h();
+  return /* @__PURE__ */ i(S, { className: d.header, children: /* @__PURE__ */ w(
+    v,
     {
       ref: s,
       "data-slot": "accordion-trigger",
       [a]: "accordion-trigger",
-      className: m(
+      className: f(
         d.trigger,
-        n === "start" ? d.alignStart : d.alignEnd,
-        t
+        t === "start" ? d.alignStart : d.alignEnd,
+        n
       ),
       ...e,
       children: [
-        n === "start" && /* @__PURE__ */ i(p, {}),
+        t === "start" && /* @__PURE__ */ i(x, {}),
         o,
-        n === "end" && /* @__PURE__ */ i(p, {})
+        t === "end" && /* @__PURE__ */ i(x, {})
       ]
     }
   ) });
-}), L = r.forwardRef(function({ className: t, children: n, ...o }, e) {
-  const s = g();
+}), P = r.forwardRef(function({ className: n, children: t, ...o }, e) {
+  const s = h();
   return /* @__PURE__ */ i(
-    w,
+    y,
     {
       ref: e,
       "data-slot": "accordion-content",
       [a]: "accordion-content",
       className: s.panel,
       ...o,
-      children: /* @__PURE__ */ i("div", { className: m(s.inner, t), children: n })
+      children: /* @__PURE__ */ i("div", { className: f(s.inner, n), children: t })
     }
   );
 });
 export {
-  j as Accordion,
-  L as AccordionContent,
-  F as AccordionItem,
-  H as AccordionTrigger
+  H as Accordion,
+  P as AccordionContent,
+  L as AccordionItem,
+  O as AccordionTrigger
 };
 //# sourceMappingURL=accordion.js.map

package/dist/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":["../../../src/components/accordion/accordion.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst useStyles = makeZenithStyles({\n  header: {\n    display: \"flex\",\n  },\n  trigger: {\n    outlineColor: tokens.accentA8,\n    paddingInline: tokens.spacingElement3,\n    paddingBlock: \"1rem\",\n    cursor: \"pointer\",\n    display: \"flex\",\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    alignItems: \"flex-start\",\n    gap: tokens.spacingElement3,\n    borderRadius: tokens.radiusMd,\n    textAlign: \"left\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    fontWeight: tokens.fontWeightMedium,\n    transitionProperty: \"all\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \":hover\": { backgroundColor: tokens.grayA3 },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"&[data-state='open'] > [data-zenith-slot='accordion-icon']\": {\n      transform: \"rotate(180deg)\",\n    },\n  },\n  alignStart: {\n    justifyContent: \"flex-start\",\n  },\n  alignEnd: {\n    justifyContent: \"space-between\",\n  },\n  icon: {\n    width: \"1.25rem\",\n    height: \"1.25rem\",\n    color: tokens.grayA11,\n    pointerEvents: \"none\",\n    flexShrink: 0,\n    transform: \"translateY(0)\",\n    transitionProperty: \"transform\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n  },\n  panel: {\n    overflow: \"hidden\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    paddingInline: tokens.spacingElement3,\n    paddingBlockStart: tokens.spacingElement1,\n    paddingBlockEnd: tokens.spacingElement2,\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { height: \"0\" },\n        to: { height: \"var(--radix-accordion-content-height)\" },\n      },\n      animationDuration: \"200ms\",\n      animationTimingFunction: \"cubic-bezier(0, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { height: \"var(--radix-accordion-content-height)\" },\n        to: { height: \"0\" },\n      },\n      animationDuration: \"200ms\",\n      animationTimingFunction: \"cubic-bezier(0, 0, 0.2, 1)\",\n    },\n  },\n  inner: {\n    paddingInline: \"0\",\n    paddingBlock: \"0\",\n  },\n})\n\nexport type AccordionType = \"single\" | \"multiple\"\nexport type AccordionAlign = \"start\" | \"end\"\n\nexport type AccordionProps = React.ComponentProps<\n  typeof AccordionPrimitive.Root\n>\n\nexport type AccordionItemProps = React.ComponentProps<\n  typeof AccordionPrimitive.Item\n>\n\nexport type AccordionTriggerProps = React.ComponentProps<\n  typeof AccordionPrimitive.Trigger\n> & {\n  align?: AccordionAlign\n}\n\nexport type AccordionContentProps = React.ComponentProps<\n  typeof AccordionPrimitive.Content\n>\n\nexport const Accordion = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Root>,\n  AccordionProps\n>(function Accordion({ className, ...props }, ref) {\n  return (\n    <AccordionPrimitive.Root\n      ref={ref}\n      data-slot=\"accordion\"\n      {...{ [SLOT_ATTR]: \"accordion\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport const AccordionItem = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Item>,\n  AccordionItemProps\n>(function AccordionItem({ className, ...props }, ref) {\n  return (\n    <AccordionPrimitive.Item\n      ref={ref}\n      data-slot=\"accordion-item\"\n      {...{ [SLOT_ATTR]: \"accordion-item\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nconst AccordionDownIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function AccordionDownIcon({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"accordion-icon\"\n      {...{ [SLOT_ATTR]: \"accordion-icon\" }}\n      className={mergeClasses(styles.icon, className)}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 -960 960 960\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z\" />\n    </svg>\n  )\n})\n\nexport const AccordionTrigger = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(function AccordionTrigger(\n  { className, align = \"end\", children, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <AccordionPrimitive.Header className={styles.header}>\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        data-slot=\"accordion-trigger\"\n        {...{ [SLOT_ATTR]: \"accordion-trigger\" }}\n        className={mergeClasses(\n          styles.trigger,\n          align === \"start\" ? styles.alignStart : styles.alignEnd,\n          className\n        )}\n        {...props}\n      >\n        {align === \"start\" && <AccordionDownIcon />}\n        {children}\n        {align === \"end\" && <AccordionDownIcon />}\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n})\n\nexport const AccordionContent = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Content>,\n  AccordionContentProps\n>(function AccordionContent({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AccordionPrimitive.Content\n      ref={ref}\n      data-slot=\"accordion-content\"\n      {...{ [SLOT_ATTR]: \"accordion-content\" }}\n      className={styles.panel}\n      {...props}\n    >\n      <div className={mergeClasses(styles.inner, className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","tokens.accentA8","tokens.spacingElement3","tokens.radiusMd","tokens.textSm","tokens.leadingSm","tokens.fontWeightMedium","tokens.grayA3","tokens.grayA11","tokens.spacingElement1","tokens.spacingElement2","Accordion","React","className","props","ref","jsx","AccordionPrimitive.Root","SLOT_ATTR","AccordionItem","AccordionPrimitive.Item","AccordionDownIcon","styles","mergeClasses","AccordionTrigger","align","children","AccordionPrimitive.Header","jsxs","AccordionPrimitive.Trigger","AccordionContent","AccordionPrimitive.Content"],"mappings":"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"}
+{"version":3,"file":"accordion.js","sources":["../../../src/components/accordion/accordion.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\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 useStyles = makeZenithStyles({\n  header: {\n    // Radix renders the header as an `<h3>`, whose UA margin and type would otherwise show.\n    ...shorthands.margin(0),\n    fontSize: \"inherit\",\n    fontWeight: \"inherit\",\n    display: \"flex\",\n  },\n  trigger: {\n    ...nativeControl,\n    outlineColor: tokens.accentA8,\n    ...shorthands.paddingInline(tokens.spacingElement3),\n    ...shorthands.paddingBlock(\"1rem\"),\n    cursor: \"pointer\",\n    display: \"flex\",\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    alignItems: \"flex-start\",\n    gap: tokens.spacingElement3,\n    borderRadius: tokens.radiusMd,\n    textAlign: \"left\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    fontWeight: tokens.fontWeightMedium,\n    transitionProperty: \"all\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \":hover\": { backgroundColor: tokens.grayA3 },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"&[data-state='open'] > [data-zenith-slot='accordion-icon']\": {\n      transform: \"rotate(180deg)\",\n    },\n  },\n  alignStart: {\n    justifyContent: \"flex-start\",\n  },\n  alignEnd: {\n    justifyContent: \"space-between\",\n  },\n  icon: {\n    ...boxModel,\n    width: \"1.25rem\",\n    height: \"1.25rem\",\n    color: tokens.grayA11,\n    pointerEvents: \"none\",\n    flexShrink: 0,\n    transform: \"translateY(0)\",\n    transitionProperty: \"transform\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n  },\n  panel: {\n    ...boxModel,\n    overflow: \"hidden\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    paddingInline: tokens.spacingElement3,\n    paddingBlockStart: tokens.spacingElement1,\n    paddingBlockEnd: tokens.spacingElement2,\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { height: \"0\" },\n        to: { height: \"var(--radix-accordion-content-height)\" },\n      },\n      animationDuration: \"200ms\",\n      animationTimingFunction: \"cubic-bezier(0, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { height: \"var(--radix-accordion-content-height)\" },\n        to: { height: \"0\" },\n      },\n      animationDuration: \"200ms\",\n      animationTimingFunction: \"cubic-bezier(0, 0, 0.2, 1)\",\n    },\n  },\n  inner: {\n    ...boxModel,\n    paddingInline: \"0\",\n    paddingBlock: \"0\",\n  },\n})\n\nexport type AccordionType = \"single\" | \"multiple\"\nexport type AccordionAlign = \"start\" | \"end\"\n\nexport type AccordionProps = React.ComponentProps<\n  typeof AccordionPrimitive.Root\n>\n\nexport type AccordionItemProps = React.ComponentProps<\n  typeof AccordionPrimitive.Item\n>\n\nexport type AccordionTriggerProps = React.ComponentProps<\n  typeof AccordionPrimitive.Trigger\n> & {\n  align?: AccordionAlign\n}\n\nexport type AccordionContentProps = React.ComponentProps<\n  typeof AccordionPrimitive.Content\n>\n\nexport const Accordion = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Root>,\n  AccordionProps\n>(function Accordion({ className, ...props }, ref) {\n  return (\n    <AccordionPrimitive.Root\n      ref={ref}\n      data-slot=\"accordion\"\n      {...{ [SLOT_ATTR]: \"accordion\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport const AccordionItem = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Item>,\n  AccordionItemProps\n>(function AccordionItem({ className, ...props }, ref) {\n  return (\n    <AccordionPrimitive.Item\n      ref={ref}\n      data-slot=\"accordion-item\"\n      {...{ [SLOT_ATTR]: \"accordion-item\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nconst AccordionDownIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function AccordionDownIcon({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"accordion-icon\"\n      {...{ [SLOT_ATTR]: \"accordion-icon\" }}\n      className={mergeClasses(styles.icon, className)}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 -960 960 960\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z\" />\n    </svg>\n  )\n})\n\nexport const AccordionTrigger = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(function AccordionTrigger(\n  { className, align = \"end\", children, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <AccordionPrimitive.Header className={styles.header}>\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        data-slot=\"accordion-trigger\"\n        {...{ [SLOT_ATTR]: \"accordion-trigger\" }}\n        className={mergeClasses(\n          styles.trigger,\n          align === \"start\" ? styles.alignStart : styles.alignEnd,\n          className\n        )}\n        {...props}\n      >\n        {align === \"start\" && <AccordionDownIcon />}\n        {children}\n        {align === \"end\" && <AccordionDownIcon />}\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n})\n\nexport const AccordionContent = React.forwardRef<\n  React.ComponentRef<typeof AccordionPrimitive.Content>,\n  AccordionContentProps\n>(function AccordionContent({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <AccordionPrimitive.Content\n      ref={ref}\n      data-slot=\"accordion-content\"\n      {...{ [SLOT_ATTR]: \"accordion-content\" }}\n      className={styles.panel}\n      {...props}\n    >\n      <div className={mergeClasses(styles.inner, className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","shorthands","nativeControl","tokens.accentA8","tokens.spacingElement3","tokens.radiusMd","tokens.textSm","tokens.leadingSm","tokens.fontWeightMedium","tokens.grayA3","boxModel","tokens.grayA11","tokens.spacingElement1","tokens.spacingElement2","Accordion","React","className","props","ref","jsx","AccordionPrimitive.Root","SLOT_ATTR","AccordionItem","AccordionPrimitive.Item","AccordionDownIcon","styles","mergeClasses","AccordionTrigger","align","children","AccordionPrimitive.Header","jsxs","AccordionPrimitive.Trigger","AccordionContent","AccordionPrimitive.Content"],"mappings":"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"}

package/dist/components/alert-dialog/alert-dialog.js

@@ -1,20 +1,27 @@
-import { jsx as r, jsxs as D, Fragment as x } from "react/jsx-runtime";
+import { jsx as r, jsxs as b, Fragment as R } from "react/jsx-runtime";
 import * as i from "react";
-import { Root as h, Action as b, Cancel as R, Content as T, Description as w, Overlay as C, Portal as v, Title as S, Trigger as N } from "../../vendor/.bun/@radix-ui_react-alert-dialog@1.1.15_2b23df507bdda662/vendor/@radix-ui/react-alert-dialog/dist/index.js";
-import { SLOT_ATTR as n, mergeClasses as d, shorthands as c } from "@epilot/zenith-runtime/v1";
-import { useAppearanceAttributes as z } from "../appearance-boundary/appearance-boundary.js";
-import { useDensity as F } from "../density-provider/density-provider.js";
-import { makeZenithStyles as W } from "../../styles/make-styles.js";
-import { grayA11 as O, leadingSm as H, textSm as P, grayA12 as X, fontWeightSemibold as j, leadingXl as k, textXl as _, containerXl as I, containerLg as L, containerMd as B, containerSm as E, body as G, spacingElement2 as p, spacingGroup2 as u, grayA1 as M, radiusXl as Z } from "../../tokens/index.js";
-import { Button as y } from "../button/button.js";
-const g = W({
+import { Root as T, Action as C, Cancel as v, Content as w, Description as N, Overlay as S, Portal as z, Title as F, Trigger as W } from "../../vendor/.bun/@radix-ui_react-alert-dialog@1.1.15_2b23df507bdda662/vendor/@radix-ui/react-alert-dialog/dist/index.js";
+import { SLOT_ATTR as l, mergeClasses as d, shorthands as s } from "@epilot/zenith-runtime/v1";
+import { useAppearanceAttributes as A } from "../appearance-boundary/appearance-boundary.js";
+import { useDensity as O } from "../density-provider/density-provider.js";
+import { makeZenithStyles as X } from "../../styles/make-styles.js";
+import { boxModel as f, nativeControl as _ } from "../../styles/host-reset.js";
+import { OVERLAY_Z_INDEX as u } from "../../styles/overlay-layer.js";
+import { grayA11 as H, leadingSm as I, textSm as P, grayA12 as j, fontWeightSemibold as k, leadingXl as E, textXl as L, containerXl as M, containerLg as Z, containerMd as B, containerSm as G, body as V, spacingElement2 as y, spacingGroup2 as D, grayA1 as Y, radiusXl as q } from "../../tokens/index.js";
+import { Button as x } from "../button/button.js";
+const m = X({
+  // For the bare native `<button>` a Trigger/Close renders. Not applied under `asChild`, where the
+  // child owns its own element and two atom sets would race for the same properties.
+  nativeTrigger: {
+    ..._
+  },
   overlay: {
     position: "fixed",
     top: 0,
     right: 0,
     bottom: 0,
     left: 0,
-    zIndex: 50,
+    zIndex: u,
     backgroundColor: "rgba(0, 0, 0, 0.5)",
     "&[data-state='open']": {
       animationName: {
@@ -34,22 +41,33 @@ const g = W({
     }
   },
   content: {
-    backgroundColor: G,
+    ...f,
+    backgroundColor: V,
     position: "fixed",
     top: "50%",
     left: "50%",
     transform: "translate(-50%, -50%)",
-    zIndex: 50,
+    zIndex: u,
     display: "grid",
     width: "100%",
     maxWidth: "calc(100% - 2rem)",
-    ...c.gap(u),
-    ...c.borderRadius(Z),
-    ...c.border("1px", "solid", M),
-    ...c.padding(u),
+    ...s.gap(D),
+    ...s.borderRadius(q),
+    ...s.border("1px", "solid", Y),
+    ...s.padding(D),
     // v1 shadow-lg
     boxShadow: "0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a",
     outlineStyle: "none",
+    "@media (prefers-reduced-motion: reduce)": {
+      animationDuration: "0.01ms",
+      animationIterationCount: "1",
+      "&[data-state='open']": {
+        animationDuration: "0.01ms"
+      },
+      "&[data-state='closed']": {
+        animationDuration: "0.01ms"
+      }
+    },
     "&[data-state='open']": {
       animationName: {
         from: {
@@ -80,195 +98,206 @@ const g = W({
     }
   },
   sm: {
-    maxWidth: E
+    ...f,
+    maxWidth: G
   },
   md: {
+    ...f,
     maxWidth: B
   },
   lg: {
-    maxWidth: L
+    ...f,
+    maxWidth: Z
   },
   xl: {
+    ...f,
     "@media (min-width: 640px)": {
-      maxWidth: I
+      maxWidth: M
     }
   },
   header: {
     display: "flex",
     flexDirection: "column",
-    ...c.gap(p),
+    ...s.gap(y),
     textAlign: "left"
   },
   footer: {
     display: "flex",
-    ...c.gap(p),
+    ...s.gap(y),
     justifyContent: "flex-end"
   },
   title: {
-    fontSize: _,
-    lineHeight: k,
-    fontWeight: j,
-    color: X
+    ...s.margin(0),
+    fontSize: L,
+    lineHeight: E,
+    fontWeight: k,
+    color: j
   },
   description: {
+    ...s.margin(0),
     fontSize: P,
-    lineHeight: H,
-    color: O
+    lineHeight: I,
+    color: H
   }
-}), at = i.forwardRef(
+}), nt = i.forwardRef(
   function(t, a) {
-    return /* @__PURE__ */ r(h, { "data-slot": "alert-dialog", ...t });
+    return /* @__PURE__ */ r(T, { "data-slot": "alert-dialog", ...t });
   }
-), ot = i.forwardRef(function({ className: t, ...a }, o) {
+), lt = i.forwardRef(function({ className: t, ...a }, o) {
+  const e = m();
   return /* @__PURE__ */ r(
-    N,
+    W,
     {
       ref: o,
       "data-slot": "alert-dialog-trigger",
-      [n]: "alert-dialog-trigger",
-      className: t,
+      [l]: "alert-dialog-trigger",
+      className: d(
+        !a.asChild && e.nativeTrigger,
+        t
+      ),
       ...a
     }
   );
-}), et = i.forwardRef(function(t, a) {
+}), st = i.forwardRef(function(t, a) {
   return /* @__PURE__ */ r(
-    v,
+    z,
     {
       "data-slot": "alert-dialog-portal",
-      [n]: "alert-dialog-portal",
+      [l]: "alert-dialog-portal",
       ...t
     }
   );
-}), q = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = g();
+}), J = i.forwardRef(function({ className: t, ...a }, o) {
+  const e = m(), c = A();
   return /* @__PURE__ */ r(
-    C,
+    S,
     {
       ref: o,
       "data-slot": "alert-dialog-overlay",
-      [n]: "alert-dialog-overlay",
+      [l]: "alert-dialog-overlay",
+      ...c,
       className: d(e.overlay, t),
       ...a
     }
   );
-}), rt = i.forwardRef(function({ className: t, size: a = "xl", children: o, ...e }, m) {
-  const s = g(), f = F(), A = z();
-  return /* @__PURE__ */ D(x, { children: [
-    /* @__PURE__ */ r(q, {}),
+}), ct = i.forwardRef(function({ className: t, size: a = "xl", children: o, ...e }, c) {
+  const g = m(), p = O(), h = A();
+  return /* @__PURE__ */ b(R, { children: [
+    /* @__PURE__ */ r(J, {}),
     /* @__PURE__ */ r(
-      T,
+      w,
       {
-        ref: m,
+        ref: c,
         "data-slot": "alert-dialog-content",
-        [n]: "alert-dialog-content",
-        ...f !== void 0 ? { "data-density": f } : {},
-        ...A,
-        className: d(s.content, s[a], t),
+        [l]: "alert-dialog-content",
+        ...p !== void 0 ? { "data-density": p } : {},
+        ...h,
+        className: d(g.content, g[a], t),
         ...e,
         children: o
       }
     )
   ] });
-}), it = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = g();
+}), dt = i.forwardRef(function({ className: t, ...a }, o) {
+  const e = m();
   return /* @__PURE__ */ r(
     "div",
     {
       ref: o,
       "data-slot": "alert-dialog-header",
-      [n]: "alert-dialog-header",
+      [l]: "alert-dialog-header",
       className: d(e.header, t),
       ...a
     }
   );
-}), lt = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = g();
+}), mt = i.forwardRef(function({ className: t, ...a }, o) {
+  const e = m();
   return /* @__PURE__ */ r(
     "div",
     {
       ref: o,
       "data-slot": "alert-dialog-footer",
-      [n]: "alert-dialog-footer",
+      [l]: "alert-dialog-footer",
       className: d(e.footer, t),
       ...a
     }
   );
-}), nt = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = g();
+}), gt = i.forwardRef(function({ className: t, ...a }, o) {
+  const e = m();
   return /* @__PURE__ */ r(
-    S,
+    F,
     {
       ref: o,
       "data-slot": "alert-dialog-title",
-      [n]: "alert-dialog-title",
+      [l]: "alert-dialog-title",
       className: d(e.title, t),
       ...a
     }
   );
-}), st = i.forwardRef(function({ className: t, ...a }, o) {
-  const e = g();
+}), ft = i.forwardRef(function({ className: t, ...a }, o) {
+  const e = m();
   return /* @__PURE__ */ r(
-    w,
+    N,
     {
       ref: o,
       "data-slot": "alert-dialog-description",
-      [n]: "alert-dialog-description",
+      [l]: "alert-dialog-description",
       className: d(e.description, t),
       ...a
     }
   );
-}), ct = i.forwardRef(function({
+}), pt = i.forwardRef(function({
   variant: t = "primary",
   size: a = "base",
   destructive: o = !1,
   className: e,
-  ...m
-}, s) {
-  return /* @__PURE__ */ r(b, { asChild: !0, children: /* @__PURE__ */ r(
-    y,
+  ...c
+}, g) {
+  return /* @__PURE__ */ r(C, { asChild: !0, children: /* @__PURE__ */ r(
+    x,
     {
-      ref: s,
+      ref: g,
       "data-slot": "alert-dialog-action",
-      [n]: "alert-dialog-action",
+      [l]: "alert-dialog-action",
       variant: t,
       size: a,
       destructive: o,
       className: e,
-      ...m
+      ...c
     }
   ) });
-}), dt = i.forwardRef(function({
+}), ut = i.forwardRef(function({
   variant: t = "secondary",
   size: a = "base",
   destructive: o = !1,
   className: e,
-  ...m
-}, s) {
-  return /* @__PURE__ */ r(R, { asChild: !0, children: /* @__PURE__ */ r(
-    y,
+  ...c
+}, g) {
+  return /* @__PURE__ */ r(v, { asChild: !0, children: /* @__PURE__ */ r(
+    x,
     {
-      ref: s,
+      ref: g,
       "data-slot": "alert-dialog-cancel",
-      [n]: "alert-dialog-cancel",
+      [l]: "alert-dialog-cancel",
       variant: t,
       size: a,
       destructive: o,
       className: e,
-      ...m
+      ...c
     }
   ) });
 });
 export {
-  at as AlertDialog,
-  ct as AlertDialogAction,
-  dt as AlertDialogCancel,
-  rt as AlertDialogContent,
-  st as AlertDialogDescription,
-  lt as AlertDialogFooter,
-  it as AlertDialogHeader,
-  q as AlertDialogOverlay,
-  et as AlertDialogPortal,
-  nt as AlertDialogTitle,
-  ot as AlertDialogTrigger
+  nt as AlertDialog,
+  pt as AlertDialogAction,
+  ut as AlertDialogCancel,
+  ct as AlertDialogContent,
+  ft as AlertDialogDescription,
+  mt as AlertDialogFooter,
+  dt as AlertDialogHeader,
+  J as AlertDialogOverlay,
+  st as AlertDialogPortal,
+  gt as AlertDialogTitle,
+  lt as AlertDialogTrigger
 };
 //# sourceMappingURL=alert-dialog.js.map