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

package/dist/components/dialog/dialog.js

@@ -1,18 +1,29 @@
-import { jsx as e, jsxs as u } from "react/jsx-runtime";
-import * as n from "react";
-import { Root as D, Close as h, Content as w, Description as b, Overlay as v, Portal as z, Title as R, Trigger as S } from "../../vendor/@radix-ui/react-dialog/dist/index.js";
+import { j as a } from "../../vendor/react/jsx-dev-runtime.js";
+import * as l from "react";
+import { Root as v, Close as h, Content as D, Description as w, Overlay as y, Portal as C, Title as k, Trigger as E } from "../../vendor/@radix-ui/react-dialog/dist/index.js";
 import { shorthands as s } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as l } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as d } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as W } from "../../styles/make-styles.js";
-import { spacingElement2 as f, spacingGroup2 as p, grayA1 as L, leadingSm as N, textSm as T, grayA11 as A, grayA12 as O, fontWeightSemibold as F, leadingLg as k, textLg as P, accentA8 as x, semAccentSoft as H, accentA11 as I, container5xl as X, container4xl as j, container3xl as B, container2xl as E, containerXl as _, containerLg as M, containerMd as G, containerSm as Q, body as V, radiusXl as Z, spacingLayout1 as q } from "../../tokens/index.js";
-const c = W({
+import { SLOT_ATTR as n } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as m } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { useDensity as j } from "../density-provider/density-provider.js";
+import { makeVoltStyles as z } from "../../styles/make-styles.js";
+import { spacingElement2 as u, spacingGroup2 as f, grayA1 as R, radiusXl as V, spacingLayout1 as S, leadingSm as U, textSm as W, grayA11 as L, grayA12 as T, fontWeightSemibold as O, leadingLg as A, textLg as F, semFocusRing as x, semAccentSoft as I, accentA11 as P, container5xl as H, container4xl as X, container3xl as B, container2xl as _, containerXl as M, containerLg as G, containerMd as Q, containerSm as Z, body as q } from "../../tokens/index.js";
+const d = z({
   overlay: {
     position: "fixed",
     ...s.inset(0),
     // v1's z-1300 is the overlay tier; no z-index token exists in this package.
     zIndex: 1300,
     backgroundColor: "rgb(0 0 0 / 50%)",
+    "@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: { opacity: 0 },
@@ -31,7 +42,7 @@ const c = W({
     }
   },
   content: {
-    backgroundColor: V,
+    backgroundColor: q,
     position: "fixed",
     top: "50%",
     left: "50%",
@@ -41,11 +52,21 @@ const c = W({
     width: "100%",
     maxWidth: "calc(100% - 2rem)",
     transform: "translate(-50%, -50%)",
-    ...s.gap(q),
-    ...s.borderRadius(Z),
-    ...s.border("1px", "solid", L),
+    ...s.gap(S),
+    ...s.borderRadius(V),
+    ...s.border("1px", "solid", R),
     // v1 shadow-lg; elevation has no token in this package.
     boxShadow: "0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a",
+    "@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: {
@@ -74,18 +95,18 @@ const c = W({
       animationDuration: "150ms",
       animationTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
     },
-    "&[data-size='sm']": { maxWidth: Q },
-    "&[data-size='md']": { maxWidth: G },
-    "&[data-size='lg']": { maxWidth: M },
-    "&[data-size='xl']": { maxWidth: _ },
-    "&[data-size='2xl']": { maxWidth: E },
+    "&[data-size='sm']": { maxWidth: Z },
+    "&[data-size='md']": { maxWidth: Q },
+    "&[data-size='lg']": { maxWidth: G },
+    "&[data-size='xl']": { maxWidth: M },
+    "&[data-size='2xl']": { maxWidth: _ },
     "&[data-size='3xl']": { maxWidth: B },
-    "&[data-size='4xl']": { maxWidth: j },
-    "&[data-size='5xl']": { maxWidth: X },
+    "&[data-size='4xl']": { maxWidth: X },
+    "&[data-size='5xl']": { maxWidth: H },
     "&[data-size='full-width']": { maxWidth: "100%" }
   },
   contentPadding: {
-    ...s.padding(p)
+    ...s.padding(f)
   },
   close: {
     ":focus-visible": {
@@ -97,15 +118,15 @@ const c = W({
   },
   closeButton: {
     position: "absolute",
-    top: p,
-    right: p,
-    ...s.padding(f),
+    top: f,
+    right: f,
+    ...s.padding(u),
     // v1 rounded-full; no full-radius token exists in this package.
     borderRadius: "9999px",
     cursor: "pointer",
-    color: I,
+    color: P,
     ":hover": {
-      backgroundColor: H
+      backgroundColor: I
     },
     ":focus-visible": {
       outlineWidth: "2px",
@@ -126,24 +147,24 @@ const c = W({
   header: {
     display: "flex",
     flexDirection: "column",
-    ...s.gap(f),
+    ...s.gap(u),
     textAlign: "left"
   },
   footer: {
     display: "flex",
-    ...s.gap(f),
+    ...s.gap(u),
     justifyContent: "flex-end"
   },
   title: {
-    fontSize: P,
-    lineHeight: k,
-    fontWeight: F,
-    color: O
+    fontSize: F,
+    lineHeight: A,
+    fontWeight: O,
+    color: T
   },
   description: {
-    color: A,
-    fontSize: T,
-    lineHeight: N
+    color: L,
+    fontSize: W,
+    lineHeight: U
   },
   srOnly: {
     position: "absolute",
@@ -155,181 +176,290 @@ const c = W({
     clip: "rect(0, 0, 0, 0)",
     whiteSpace: "nowrap"
   }
-}), J = n.forwardRef(
-  function(o, t) {
-    return /* @__PURE__ */ e(
+}), J = l.forwardRef(
+  function(e, o) {
+    return /* @__PURE__ */ a.jsxDEV(
       "svg",
       {
-        ref: t,
+        ref: o,
         width: "12",
         height: "12",
         viewBox: "0 0 9 9",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        ...o,
-        children: /* @__PURE__ */ e(
+        ...e,
+        children: /* @__PURE__ */ a.jsxDEV(
           "path",
           {
             d: "M4.38333 5.31667L1.11667 8.58333C0.994445 8.70556 0.838889 8.76667 0.65 8.76667C0.461111 8.76667 0.305556 8.70556 0.183333 8.58333C0.0611111 8.46111 0 8.30556 0 8.11667C0 7.92778 0.0611111 7.77222 0.183333 7.65L3.45 4.38333L0.183333 1.11667C0.0611111 0.994445 0 0.838889 0 0.65C0 0.461111 0.0611111 0.305556 0.183333 0.183333C0.305556 0.0611111 0.461111 0 0.65 0C0.838889 0 0.994445 0.0611111 1.11667 0.183333L4.38333 3.45L7.65 0.183333C7.77222 0.0611111 7.92778 0 8.11667 0C8.30556 0 8.46111 0.0611111 8.58333 0.183333C8.70556 0.305556 8.76667 0.461111 8.76667 0.65C8.76667 0.838889 8.70556 0.994445 8.58333 1.11667L5.31667 4.38333L8.58333 7.65C8.70556 7.77222 8.76667 7.92778 8.76667 8.11667C8.76667 8.30556 8.70556 8.46111 8.58333 8.58333C8.46111 8.70556 8.30556 8.76667 8.11667 8.76667C7.92778 8.76667 7.77222 8.70556 7.65 8.58333L4.38333 5.31667Z",
             fill: "currentColor"
-          }
+          },
+          void 0,
+          !1,
+          {
+            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/dialog/dialog.tsx",
+            lineNumber: 194,
+            columnNumber: 9
+          },
+          this
         )
-      }
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/dialog/dialog.tsx",
+        lineNumber: 185,
+        columnNumber: 7
+      },
+      this
     );
   }
-), io = n.forwardRef(
-  function(o, t) {
-    return /* @__PURE__ */ e(D, { "data-slot": "dialog", ...o });
+), le = l.forwardRef(
+  function(e, o) {
+    return /* @__PURE__ */ a.jsxDEV(v, { "data-slot": "dialog", ...e }, void 0, !1, {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/dialog/dialog.tsx",
+      lineNumber: 207,
+      columnNumber: 12
+    }, this);
   }
-), eo = n.forwardRef(function({ className: o, ...t }, a) {
-  return /* @__PURE__ */ e(
-    S,
+), re = l.forwardRef(function({ className: e, ...o }, i) {
+  return /* @__PURE__ */ a.jsxDEV(
+    E,
     {
-      ref: a,
+      ref: i,
       "data-slot": "dialog-trigger",
-      [l]: "dialog-trigger",
-      className: o,
-      ...t
-    }
+      [n]: "dialog-trigger",
+      className: e,
+      ...o
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/dialog/dialog.tsx",
+      lineNumber: 220,
+      columnNumber: 5
+    },
+    this
   );
-}), no = n.forwardRef(
-  function(o, t) {
-    return /* @__PURE__ */ e(
-      z,
+}), ne = l.forwardRef(
+  function(e, o) {
+    return /* @__PURE__ */ a.jsxDEV(
+      C,
       {
         "data-slot": "dialog-portal",
-        [l]: "dialog-portal",
-        ...o
-      }
+        [n]: "dialog-portal",
+        ...e
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/dialog/dialog.tsx",
+        lineNumber: 237,
+        columnNumber: 7
+      },
+      this
     );
   }
-), ro = n.forwardRef(function({ className: o, ...t }, a) {
-  const i = c();
-  return /* @__PURE__ */ e(
-    v,
+), se = l.forwardRef(function({ className: e, ...o }, i) {
+  const t = d();
+  return /* @__PURE__ */ a.jsxDEV(
+    y,
     {
-      ref: a,
+      ref: i,
       "data-slot": "dialog-overlay",
-      [l]: "dialog-overlay",
-      className: d(i.overlay, o),
-      ...t
-    }
+      [n]: "dialog-overlay",
+      className: m(t.overlay, e),
+      ...o
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/dialog/dialog.tsx",
+      lineNumber: 257,
+      columnNumber: 5
+    },
+    this
   );
-}), lo = n.forwardRef(function({
-  className: o,
-  children: t,
-  showCloseButton: a = !0,
-  flush: i = !1,
-  size: m = "lg",
-  ...y
-}, C) {
-  const g = c();
-  return /* @__PURE__ */ u(
-    w,
+}), me = l.forwardRef(function({
+  className: e,
+  children: o,
+  showCloseButton: i = !0,
+  flush: t = !1,
+  size: g = "lg",
+  ...N
+}, b) {
+  const c = d(), p = j();
+  return /* @__PURE__ */ a.jsxDEV(
+    D,
     {
-      ref: C,
+      ref: b,
       "data-slot": "dialog-content",
-      [l]: "dialog-content",
-      "data-size": m,
-      className: d(
-        g.content,
-        !i && g.contentPadding,
-        o
+      [n]: "dialog-content",
+      ...p !== void 0 ? { "data-density": p } : {},
+      "data-size": g,
+      className: m(
+        c.content,
+        !t && c.contentPadding,
+        e
       ),
-      ...y,
+      ...N,
       children: [
-        t,
-        a && /* @__PURE__ */ u(
+        o,
+        i && /* @__PURE__ */ a.jsxDEV(
           h,
           {
             "data-slot": "dialog-close",
-            [l]: "dialog-close",
-            className: g.closeButton,
+            [n]: "dialog-close",
+            className: c.closeButton,
             children: [
-              /* @__PURE__ */ e(J, {}),
-              /* @__PURE__ */ e("span", { className: g.srOnly, children: "Close" })
+              /* @__PURE__ */ a.jsxDEV(J, {}, void 0, !1, {
+                fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/dialog/dialog.tsx",
+                lineNumber: 327,
+                columnNumber: 11
+              }, this),
+              /* @__PURE__ */ a.jsxDEV("span", { className: c.srOnly, children: "Close" }, void 0, !1, {
+                fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/dialog/dialog.tsx",
+                lineNumber: 328,
+                columnNumber: 11
+              }, this)
             ]
-          }
+          },
+          void 0,
+          !0,
+          {
+            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/dialog/dialog.tsx",
+            lineNumber: 322,
+            columnNumber: 9
+          },
+          this
         )
       ]
-    }
+    },
+    void 0,
+    !0,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/dialog/dialog.tsx",
+      lineNumber: 307,
+      columnNumber: 5
+    },
+    this
   );
-}), so = n.forwardRef(function({ className: o, children: t, ...a }, i) {
-  const m = c();
-  return /* @__PURE__ */ e(
+}), de = l.forwardRef(function({ className: e, children: o, ...i }, t) {
+  const g = d();
+  return /* @__PURE__ */ a.jsxDEV(
     h,
     {
-      ref: i,
+      ref: t,
       "data-slot": "dialog-close",
-      [l]: "dialog-close",
-      className: d(m.close, o),
-      ...a,
-      children: t
-    }
+      [n]: "dialog-close",
+      className: m(g.close, e),
+      ...i,
+      children: o
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/dialog/dialog.tsx",
+      lineNumber: 346,
+      columnNumber: 5
+    },
+    this
   );
-}), co = n.forwardRef(
-  function({ className: o, ...t }, a) {
-    const i = c();
-    return /* @__PURE__ */ e(
+}), ce = l.forwardRef(
+  function({ className: e, ...o }, i) {
+    const t = d();
+    return /* @__PURE__ */ a.jsxDEV(
       "div",
       {
-        ref: a,
+        ref: i,
         "data-slot": "dialog-header",
-        [l]: "dialog-header",
-        className: d(i.header, o),
-        ...t
-      }
+        [n]: "dialog-header",
+        className: m(t.header, e),
+        ...o
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/dialog/dialog.tsx",
+        lineNumber: 365,
+        columnNumber: 7
+      },
+      this
     );
   }
-), go = n.forwardRef(
-  function({ className: o, ...t }, a) {
-    const i = c();
-    return /* @__PURE__ */ e(
+), ge = l.forwardRef(
+  function({ className: e, ...o }, i) {
+    const t = d();
+    return /* @__PURE__ */ a.jsxDEV(
       "div",
       {
-        ref: a,
+        ref: i,
         "data-slot": "dialog-footer",
-        [l]: "dialog-footer",
-        className: d(i.footer, o),
-        ...t
-      }
+        [n]: "dialog-footer",
+        className: m(t.footer, e),
+        ...o
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/dialog/dialog.tsx",
+        lineNumber: 383,
+        columnNumber: 7
+      },
+      this
     );
   }
-), mo = n.forwardRef(function({ className: o, ...t }, a) {
-  const i = c();
-  return /* @__PURE__ */ e(
-    R,
+), ue = l.forwardRef(function({ className: e, ...o }, i) {
+  const t = d();
+  return /* @__PURE__ */ a.jsxDEV(
+    k,
     {
-      ref: a,
+      ref: i,
       "data-slot": "dialog-title",
-      [l]: "dialog-title",
-      className: d(i.title, o),
-      ...t
-    }
+      [n]: "dialog-title",
+      className: m(t.title, e),
+      ...o
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/dialog/dialog.tsx",
+      lineNumber: 405,
+      columnNumber: 5
+    },
+    this
   );
-}), fo = n.forwardRef(function({ className: o, ...t }, a) {
-  const i = c();
-  return /* @__PURE__ */ e(
-    b,
+}), fe = l.forwardRef(function({ className: e, ...o }, i) {
+  const t = d();
+  return /* @__PURE__ */ a.jsxDEV(
+    w,
     {
-      ref: a,
+      ref: i,
       "data-slot": "dialog-description",
-      [l]: "dialog-description",
-      className: d(i.description, o),
-      ...t
-    }
+      [n]: "dialog-description",
+      className: m(t.description, e),
+      ...o
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/dialog/dialog.tsx",
+      lineNumber: 426,
+      columnNumber: 5
+    },
+    this
   );
 });
 export {
-  io as Dialog,
-  so as DialogClose,
-  lo as DialogContent,
-  fo as DialogDescription,
-  go as DialogFooter,
-  co as DialogHeader,
-  ro as DialogOverlay,
-  no as DialogPortal,
-  mo as DialogTitle,
-  eo as DialogTrigger
+  le as Dialog,
+  de as DialogClose,
+  me as DialogContent,
+  fe as DialogDescription,
+  ge as DialogFooter,
+  ce as DialogHeader,
+  se as DialogOverlay,
+  ne as DialogPortal,
+  ue as DialogTitle,
+  re as DialogTrigger
 };
 //# sourceMappingURL=dialog.js.map