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

package/dist/components/drawer/drawer.js

@@ -1,15 +1,16 @@
-import { jsx as e, jsxs as w } from "react/jsx-runtime";
+import { j as t } from "../../vendor/react/jsx-dev-runtime.js";
 import * as s from "react";
-import { Root as T, Close as x, Content as v, Description as N, Overlay as R, Portal as S, Title as z, Trigger as F } from "../../vendor/@radix-ui/react-dialog/dist/index.js";
-import { shorthands as i } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as c } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as m } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as L } from "../../styles/make-styles.js";
-import { spacingElement2 as g, grayA1 as p, spacingElement3 as y, leadingSm as X, textSm as A, grayA11 as O, grayA12 as Y, fontWeightSemibold as k, leadingLg as E, textLg as P, accentA8 as h, semAccentSoft as B, accentA11 as H, spacingGroup2 as b, spacingElement1 as n, gray2 as I, radius2xl as W } from "../../tokens/index.js";
-const d = L({
+import { Root as y, Close as h, Content as C, Description as k, Overlay as E, Portal as T, Title as j, Trigger as R } from "../../vendor/@radix-ui/react-dialog/dist/index.js";
+import { shorthands as n } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as m } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as c } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { useDensity as S } from "../density-provider/density-provider.js";
+import { makeVoltStyles as V } from "../../styles/make-styles.js";
+import { spacingElement2 as w, grayA1 as u, spacingElement3 as x, radius2xl as U, spacingGroup2 as b, leadingSm as z, textSm as F, grayA11 as L, grayA12 as X, fontWeightSemibold as A, leadingLg as O, textLg as Y, accentA8 as N, semAccentSoft as P, accentA11 as B, spacingElement1 as i, gray2 as H } from "../../tokens/index.js";
+const d = V({
   overlay: {
     position: "fixed",
-    ...i.inset(0),
+    ...n.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%)",
@@ -31,27 +32,27 @@ const d = L({
     }
   },
   content: {
-    backgroundColor: I,
+    backgroundColor: H,
     position: "fixed",
     // v1's z-1300 is the overlay tier; no z-index token exists in this package.
     zIndex: 1300,
     display: "flex",
     flexDirection: "column",
-    ...i.gap(b),
-    ...i.borderRadius(W),
+    ...n.gap(b),
+    ...n.borderRadius(U),
     // v1 shadow-lg; elevation has no token in this package.
     boxShadow: "0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a"
   },
   contentPadding: {
     // v1 p-3 is 0.75rem; no spacing token for 0.75rem exists in this package.
-    ...i.padding(y)
+    ...n.padding(x)
   },
   right: {
-    top: n,
-    bottom: n,
-    right: n,
+    top: i,
+    bottom: i,
+    right: i,
     height: "calc(100% - 0.5rem)",
-    ...i.borderLeft("1px", "solid", p),
+    ...n.borderLeft("1px", "solid", u),
     "&[data-state='open']": {
       animationName: {
         from: {
@@ -82,11 +83,11 @@ const d = L({
     }
   },
   left: {
-    top: n,
-    bottom: n,
-    left: n,
+    top: i,
+    bottom: i,
+    left: i,
     height: "calc(100% - 0.5rem)",
-    ...i.borderRight("1px", "solid", p),
+    ...n.borderRight("1px", "solid", u),
     "&[data-state='open']": {
       animationName: {
         from: {
@@ -117,11 +118,11 @@ const d = L({
     }
   },
   top: {
-    left: n,
-    right: n,
-    top: n,
+    left: i,
+    right: i,
+    top: i,
     width: "calc(100% - 0.5rem)",
-    ...i.borderBottom("1px", "solid", p),
+    ...n.borderBottom("1px", "solid", u),
     "&[data-state='open']": {
       animationName: {
         from: {
@@ -152,11 +153,11 @@ const d = L({
     }
   },
   bottom: {
-    left: n,
-    right: n,
-    bottom: n,
+    left: i,
+    right: i,
+    bottom: i,
     width: "calc(100% - 0.5rem)",
-    ...i.borderTop("1px", "solid", p),
+    ...n.borderTop("1px", "solid", u),
     "&[data-state='open']": {
       animationName: {
         from: {
@@ -191,27 +192,27 @@ const d = L({
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: h
+      outlineColor: N
     }
   },
   closeButton: {
     position: "absolute",
     // v1 top-3 is 0.75rem; no spacing token for 0.75rem exists in this package.
-    top: y,
+    top: x,
     right: b,
-    ...i.padding(g),
+    ...n.padding(w),
     // v1 rounded-full; no full-radius token exists in this package.
     borderRadius: "9999px",
     cursor: "pointer",
-    color: H,
+    color: B,
     ":hover": {
-      backgroundColor: B
+      backgroundColor: P
     },
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: h
+      outlineColor: N
     },
     ":disabled": {
       pointerEvents: "none"
@@ -227,26 +228,26 @@ const d = L({
     display: "flex",
     flexShrink: 0,
     flexDirection: "column",
-    ...i.gap(g),
+    ...n.gap(w),
     textAlign: "left"
   },
   footer: {
     marginTop: "auto",
     display: "flex",
     flexShrink: 0,
-    ...i.gap(g),
+    ...n.gap(w),
     justifyContent: "flex-end"
   },
   title: {
-    fontSize: P,
-    lineHeight: E,
-    fontWeight: k,
-    color: Y
+    fontSize: Y,
+    lineHeight: O,
+    fontWeight: A,
+    color: X
   },
   description: {
-    color: O,
-    fontSize: A,
-    lineHeight: X
+    color: L,
+    fontSize: F,
+    lineHeight: z
   },
   srOnly: {
     position: "absolute",
@@ -258,182 +259,291 @@ const d = L({
     clip: "rect(0, 0, 0, 0)",
     whiteSpace: "nowrap"
   }
-}), j = s.forwardRef(
-  function(t, a) {
-    return /* @__PURE__ */ e(
+}), I = s.forwardRef(
+  function(e, r) {
+    return /* @__PURE__ */ t.jsxDEV(
       "svg",
       {
-        ref: a,
+        ref: r,
         width: "12",
         height: "12",
         viewBox: "0 0 9 9",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        ...t,
-        children: /* @__PURE__ */ e(
+        ...e,
+        children: /* @__PURE__ */ t.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/drawer/drawer.tsx",
+            lineNumber: 277,
+            columnNumber: 9
+          },
+          this
         )
-      }
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/drawer/drawer.tsx",
+        lineNumber: 268,
+        columnNumber: 7
+      },
+      this
     );
   }
-), J = s.forwardRef(
-  function(t, a) {
-    return /* @__PURE__ */ e(T, { "data-slot": "drawer", ...t });
+), K = s.forwardRef(
+  function(e, r) {
+    return /* @__PURE__ */ t.jsxDEV(y, { "data-slot": "drawer", ...e }, void 0, !1, {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/drawer/drawer.tsx",
+      lineNumber: 290,
+      columnNumber: 12
+    }, this);
   }
-), K = s.forwardRef(function({ className: t, ...a }, o) {
-  return /* @__PURE__ */ e(
-    F,
+), $ = s.forwardRef(function({ className: e, ...r }, a) {
+  return /* @__PURE__ */ t.jsxDEV(
+    R,
     {
-      ref: o,
+      ref: a,
       "data-slot": "drawer-trigger",
-      [c]: "drawer-trigger",
-      className: t,
-      ...a
-    }
+      [m]: "drawer-trigger",
+      className: e,
+      ...r
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/drawer/drawer.tsx",
+      lineNumber: 303,
+      columnNumber: 5
+    },
+    this
   );
-}), U = s.forwardRef(
-  function(t, a) {
-    return /* @__PURE__ */ e(
-      S,
+}), ee = s.forwardRef(
+  function(e, r) {
+    return /* @__PURE__ */ t.jsxDEV(
+      T,
       {
         "data-slot": "drawer-portal",
-        [c]: "drawer-portal",
-        ...t
-      }
+        [m]: "drawer-portal",
+        ...e
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/drawer/drawer.tsx",
+        lineNumber: 320,
+        columnNumber: 7
+      },
+      this
     );
   }
-), $ = s.forwardRef(function({ className: t, ...a }, o) {
-  const r = d();
-  return /* @__PURE__ */ e(
-    R,
+), re = s.forwardRef(function({ className: e, ...r }, a) {
+  const o = d();
+  return /* @__PURE__ */ t.jsxDEV(
+    E,
     {
-      ref: o,
+      ref: a,
       "data-slot": "drawer-overlay",
-      [c]: "drawer-overlay",
-      className: m(r.overlay, t),
-      ...a
-    }
+      [m]: "drawer-overlay",
+      className: c(o.overlay, e),
+      ...r
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/drawer/drawer.tsx",
+      lineNumber: 340,
+      columnNumber: 5
+    },
+    this
   );
-}), tt = s.forwardRef(function({
-  className: t,
-  children: a,
-  showCloseButton: o = !0,
-  side: r = "right",
-  flush: u = !1,
-  ...D
-}, C) {
-  const f = d();
-  return /* @__PURE__ */ w(
-    v,
+}), ae = s.forwardRef(function({
+  className: e,
+  children: r,
+  showCloseButton: a = !0,
+  side: o = "right",
+  flush: p = !1,
+  ...v
+}, D) {
+  const f = d(), g = S();
+  return /* @__PURE__ */ t.jsxDEV(
+    C,
     {
-      ref: C,
+      ref: D,
       "data-slot": "drawer-content",
-      [c]: "drawer-content",
-      "data-side": r,
-      className: m(
+      [m]: "drawer-content",
+      ...g !== void 0 ? { "data-density": g } : {},
+      "data-side": o,
+      className: c(
         f.content,
-        f[r],
-        !u && f.contentPadding,
-        t
+        f[o],
+        !p && f.contentPadding,
+        e
       ),
-      ...D,
+      ...v,
       children: [
-        a,
-        o && /* @__PURE__ */ w(
-          x,
+        r,
+        a && /* @__PURE__ */ t.jsxDEV(
+          h,
           {
             "data-slot": "drawer-close",
-            [c]: "drawer-close",
+            [m]: "drawer-close",
             className: f.closeButton,
             children: [
-              /* @__PURE__ */ e(j, {}),
-              /* @__PURE__ */ e("span", { className: f.srOnly, children: "Close" })
+              /* @__PURE__ */ t.jsxDEV(I, {}, void 0, !1, {
+                fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/drawer/drawer.tsx",
+                lineNumber: 400,
+                columnNumber: 11
+              }, this),
+              /* @__PURE__ */ t.jsxDEV("span", { className: f.srOnly, children: "Close" }, void 0, !1, {
+                fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/drawer/drawer.tsx",
+                lineNumber: 401,
+                columnNumber: 11
+              }, this)
             ]
-          }
+          },
+          void 0,
+          !0,
+          {
+            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/drawer/drawer.tsx",
+            lineNumber: 395,
+            columnNumber: 9
+          },
+          this
         )
       ]
-    }
+    },
+    void 0,
+    !0,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/drawer/drawer.tsx",
+      lineNumber: 379,
+      columnNumber: 5
+    },
+    this
   );
-}), at = s.forwardRef(function({ className: t, children: a, ...o }, r) {
-  const u = d();
-  return /* @__PURE__ */ e(
-    x,
+}), te = s.forwardRef(function({ className: e, children: r, ...a }, o) {
+  const p = d();
+  return /* @__PURE__ */ t.jsxDEV(
+    h,
     {
-      ref: r,
+      ref: o,
       "data-slot": "drawer-close",
-      [c]: "drawer-close",
-      className: m(u.close, t),
-      ...o,
-      children: a
-    }
+      [m]: "drawer-close",
+      className: c(p.close, e),
+      ...a,
+      children: r
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/drawer/drawer.tsx",
+      lineNumber: 419,
+      columnNumber: 5
+    },
+    this
   );
-}), ot = s.forwardRef(
-  function({ className: t, ...a }, o) {
-    const r = d();
-    return /* @__PURE__ */ e(
+}), oe = s.forwardRef(
+  function({ className: e, ...r }, a) {
+    const o = d();
+    return /* @__PURE__ */ t.jsxDEV(
       "div",
       {
-        ref: o,
+        ref: a,
         "data-slot": "drawer-header",
-        [c]: "drawer-header",
-        className: m(r.header, t),
-        ...a
-      }
+        [m]: "drawer-header",
+        className: c(o.header, e),
+        ...r
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/drawer/drawer.tsx",
+        lineNumber: 438,
+        columnNumber: 7
+      },
+      this
     );
   }
-), rt = s.forwardRef(
-  function({ className: t, ...a }, o) {
-    const r = d();
-    return /* @__PURE__ */ e(
+), ie = s.forwardRef(
+  function({ className: e, ...r }, a) {
+    const o = d();
+    return /* @__PURE__ */ t.jsxDEV(
       "div",
       {
-        ref: o,
+        ref: a,
         "data-slot": "drawer-footer",
-        [c]: "drawer-footer",
-        className: m(r.footer, t),
-        ...a
-      }
+        [m]: "drawer-footer",
+        className: c(o.footer, e),
+        ...r
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/drawer/drawer.tsx",
+        lineNumber: 456,
+        columnNumber: 7
+      },
+      this
     );
   }
-), et = s.forwardRef(function({ className: t, ...a }, o) {
-  const r = d();
-  return /* @__PURE__ */ e(
-    z,
+), ne = s.forwardRef(function({ className: e, ...r }, a) {
+  const o = d();
+  return /* @__PURE__ */ t.jsxDEV(
+    j,
     {
-      ref: o,
+      ref: a,
       "data-slot": "drawer-title",
-      [c]: "drawer-title",
-      className: m(r.title, t),
-      ...a
-    }
+      [m]: "drawer-title",
+      className: c(o.title, e),
+      ...r
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/drawer/drawer.tsx",
+      lineNumber: 478,
+      columnNumber: 5
+    },
+    this
   );
-}), nt = s.forwardRef(function({ className: t, ...a }, o) {
-  const r = d();
-  return /* @__PURE__ */ e(
-    N,
+}), se = s.forwardRef(function({ className: e, ...r }, a) {
+  const o = d();
+  return /* @__PURE__ */ t.jsxDEV(
+    k,
     {
-      ref: o,
+      ref: a,
       "data-slot": "drawer-description",
-      [c]: "drawer-description",
-      className: m(r.description, t),
-      ...a
-    }
+      [m]: "drawer-description",
+      className: c(o.description, e),
+      ...r
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/drawer/drawer.tsx",
+      lineNumber: 499,
+      columnNumber: 5
+    },
+    this
   );
 });
 export {
-  J as Drawer,
-  at as DrawerClose,
-  tt as DrawerContent,
-  nt as DrawerDescription,
-  rt as DrawerFooter,
-  ot as DrawerHeader,
-  $ as DrawerOverlay,
-  U as DrawerPortal,
-  et as DrawerTitle,
-  K as DrawerTrigger
+  K as Drawer,
+  te as DrawerClose,
+  ae as DrawerContent,
+  se as DrawerDescription,
+  ie as DrawerFooter,
+  oe as DrawerHeader,
+  re as DrawerOverlay,
+  ee as DrawerPortal,
+  ne as DrawerTitle,
+  $ as DrawerTrigger
 };
 //# sourceMappingURL=drawer.js.map