@epilot/volt-ui-experimental-griffel 0.1.0-experiment.1

package/dist/components/dialog/dialog.js

@@ -0,0 +1,333 @@
+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 "../../node_modules/@radix-ui/react-dialog/dist/index.js";
+import { shorthands as s } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as l } from "../../renderer/contract.js";
+import { makeVoltStyles as W } from "../../styles/make-styles.js";
+import { spacingElement2 as f, spacingGroup2 as p, grayA1 as N, textSm as T, grayA11 as L, grayA12 as A, fontWeightSemibold as O, textLg as F, accentA8 as x, semAccentSoft as k, accentA11 as P, container5xl as I, container4xl as X, container3xl as j, container2xl as B, containerXl as E, containerLg as _, containerMd as H, containerSm as M, body as G, radiusXl as V, spacingLayout1 as Z } from "../../tokens/index.js";
+import { mergeClasses as d } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const c = W({
+  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%)",
+    "&[data-state='open']": {
+      animationName: {
+        from: { opacity: 0 },
+        to: { opacity: 1 }
+      },
+      animationDuration: "150ms",
+      animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
+    },
+    "&[data-state='closed']": {
+      animationName: {
+        from: { opacity: 1 },
+        to: { opacity: 0 }
+      },
+      animationDuration: "150ms",
+      animationTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
+    }
+  },
+  content: {
+    backgroundColor: G,
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    // v1's z-1300 is the overlay tier; no z-index token exists in this package.
+    zIndex: 1300,
+    display: "grid",
+    width: "100%",
+    maxWidth: "calc(100% - 2rem)",
+    transform: "translate(-50%, -50%)",
+    ...s.gap(Z),
+    ...s.borderRadius(V),
+    ...s.border("1px", "solid", N),
+    // v1 shadow-lg; elevation has no token in this package.
+    boxShadow: "0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a",
+    "&[data-state='open']": {
+      animationName: {
+        from: {
+          opacity: 0,
+          transform: "translate(-50%, -50%) scale(0.95)"
+        },
+        to: {
+          opacity: 1,
+          transform: "translate(-50%, -50%) scale(1)"
+        }
+      },
+      animationDuration: "150ms",
+      animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
+    },
+    "&[data-state='closed']": {
+      animationName: {
+        from: {
+          opacity: 1,
+          transform: "translate(-50%, -50%) scale(1)"
+        },
+        to: {
+          opacity: 0,
+          transform: "translate(-50%, -50%) scale(0.95)"
+        }
+      },
+      animationDuration: "150ms",
+      animationTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
+    },
+    "&[data-size='sm']": { maxWidth: M },
+    "&[data-size='md']": { maxWidth: H },
+    "&[data-size='lg']": { maxWidth: _ },
+    "&[data-size='xl']": { maxWidth: E },
+    "&[data-size='2xl']": { maxWidth: B },
+    "&[data-size='3xl']": { maxWidth: j },
+    "&[data-size='4xl']": { maxWidth: X },
+    "&[data-size='5xl']": { maxWidth: I },
+    "&[data-size='full-width']": { maxWidth: "100%" }
+  },
+  contentPadding: {
+    ...s.padding(p)
+  },
+  close: {
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: x
+    }
+  },
+  closeButton: {
+    position: "absolute",
+    top: p,
+    right: p,
+    ...s.padding(f),
+    // v1 rounded-full; no full-radius token exists in this package.
+    borderRadius: "9999px",
+    cursor: "pointer",
+    color: P,
+    ":hover": {
+      backgroundColor: k
+    },
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: x
+    },
+    ":disabled": {
+      pointerEvents: "none"
+    },
+    "& svg": {
+      pointerEvents: "none",
+      flexShrink: 0,
+      width: "1rem",
+      height: "1rem"
+    }
+  },
+  header: {
+    display: "flex",
+    flexDirection: "column",
+    ...s.gap(f),
+    textAlign: "left"
+  },
+  footer: {
+    display: "flex",
+    ...s.gap(f),
+    justifyContent: "flex-end"
+  },
+  title: {
+    fontSize: F,
+    fontWeight: O,
+    color: A
+  },
+  description: {
+    color: L,
+    fontSize: T
+  },
+  srOnly: {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: 0,
+    margin: "-1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap"
+  }
+}), q = n.forwardRef(
+  function(o, t) {
+    return /* @__PURE__ */ e(
+      "svg",
+      {
+        ref: t,
+        width: "12",
+        height: "12",
+        viewBox: "0 0 9 9",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...o,
+        children: /* @__PURE__ */ e(
+          "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"
+          }
+        )
+      }
+    );
+  }
+), to = n.forwardRef(
+  function(o, t) {
+    return /* @__PURE__ */ e(D, { "data-slot": "dialog", ...o });
+  }
+), ao = n.forwardRef(function({ className: o, ...t }, a) {
+  return /* @__PURE__ */ e(
+    S,
+    {
+      ref: a,
+      "data-slot": "dialog-trigger",
+      [l]: "dialog-trigger",
+      className: o,
+      ...t
+    }
+  );
+}), io = n.forwardRef(
+  function(o, t) {
+    return /* @__PURE__ */ e(
+      z,
+      {
+        "data-slot": "dialog-portal",
+        [l]: "dialog-portal",
+        ...o
+      }
+    );
+  }
+), eo = n.forwardRef(function({ className: o, ...t }, a) {
+  const i = c();
+  return /* @__PURE__ */ e(
+    v,
+    {
+      ref: a,
+      "data-slot": "dialog-overlay",
+      [l]: "dialog-overlay",
+      className: d(i.overlay, o),
+      ...t
+    }
+  );
+}), no = 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,
+    {
+      ref: C,
+      "data-slot": "dialog-content",
+      [l]: "dialog-content",
+      "data-size": m,
+      className: d(
+        g.content,
+        !i && g.contentPadding,
+        o
+      ),
+      ...y,
+      children: [
+        t,
+        a && /* @__PURE__ */ u(
+          h,
+          {
+            "data-slot": "dialog-close",
+            [l]: "dialog-close",
+            className: g.closeButton,
+            children: [
+              /* @__PURE__ */ e(q, {}),
+              /* @__PURE__ */ e("span", { className: g.srOnly, children: "Close" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}), ro = n.forwardRef(function({ className: o, children: t, ...a }, i) {
+  const m = c();
+  return /* @__PURE__ */ e(
+    h,
+    {
+      ref: i,
+      "data-slot": "dialog-close",
+      [l]: "dialog-close",
+      className: d(m.close, o),
+      ...a,
+      children: t
+    }
+  );
+}), lo = n.forwardRef(
+  function({ className: o, ...t }, a) {
+    const i = c();
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        ref: a,
+        "data-slot": "dialog-header",
+        [l]: "dialog-header",
+        className: d(i.header, o),
+        ...t
+      }
+    );
+  }
+), so = n.forwardRef(
+  function({ className: o, ...t }, a) {
+    const i = c();
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        ref: a,
+        "data-slot": "dialog-footer",
+        [l]: "dialog-footer",
+        className: d(i.footer, o),
+        ...t
+      }
+    );
+  }
+), co = n.forwardRef(function({ className: o, ...t }, a) {
+  const i = c();
+  return /* @__PURE__ */ e(
+    R,
+    {
+      ref: a,
+      "data-slot": "dialog-title",
+      [l]: "dialog-title",
+      className: d(i.title, o),
+      ...t
+    }
+  );
+}), go = n.forwardRef(function({ className: o, ...t }, a) {
+  const i = c();
+  return /* @__PURE__ */ e(
+    b,
+    {
+      ref: a,
+      "data-slot": "dialog-description",
+      [l]: "dialog-description",
+      className: d(i.description, o),
+      ...t
+    }
+  );
+});
+export {
+  to as Dialog,
+  ro as DialogClose,
+  no as DialogContent,
+  go as DialogDescription,
+  so as DialogFooter,
+  lo as DialogHeader,
+  eo as DialogOverlay,
+  io as DialogPortal,
+  co as DialogTitle,
+  ao as DialogTrigger
+};
+//# sourceMappingURL=dialog.js.map

package/dist/components/dialog/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sources":["../../../src/components/dialog/dialog.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { mergeClasses, shorthands } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst useStyles = makeVoltStyles({\n  overlay: {\n    position: \"fixed\",\n    ...shorthands.inset(0),\n    // v1's z-1300 is the overlay tier; no z-index token exists in this package.\n    zIndex: 1300,\n    backgroundColor: \"rgb(0 0 0 / 50%)\",\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { opacity: 0 },\n        to: { opacity: 1 },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { opacity: 1 },\n        to: { opacity: 0 },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  content: {\n    backgroundColor: tokens.body,\n    position: \"fixed\",\n    top: \"50%\",\n    left: \"50%\",\n    // v1's z-1300 is the overlay tier; no z-index token exists in this package.\n    zIndex: 1300,\n    display: \"grid\",\n    width: \"100%\",\n    maxWidth: \"calc(100% - 2rem)\",\n    transform: \"translate(-50%, -50%)\",\n    ...shorthands.gap(tokens.spacingLayout1),\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA1),\n    // v1 shadow-lg; elevation has no token in this package.\n    boxShadow: \"0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a\",\n    \"&[data-state='open']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: \"translate(-50%, -50%) scale(0.95)\",\n        },\n        to: {\n          opacity: 1,\n          transform: \"translate(-50%, -50%) scale(1)\",\n        },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: {\n          opacity: 1,\n          transform: \"translate(-50%, -50%) scale(1)\",\n        },\n        to: {\n          opacity: 0,\n          transform: \"translate(-50%, -50%) scale(0.95)\",\n        },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n    \"&[data-size='sm']\": { maxWidth: tokens.containerSm },\n    \"&[data-size='md']\": { maxWidth: tokens.containerMd },\n    \"&[data-size='lg']\": { maxWidth: tokens.containerLg },\n    \"&[data-size='xl']\": { maxWidth: tokens.containerXl },\n    \"&[data-size='2xl']\": { maxWidth: tokens.container2xl },\n    \"&[data-size='3xl']\": { maxWidth: tokens.container3xl },\n    \"&[data-size='4xl']\": { maxWidth: tokens.container4xl },\n    \"&[data-size='5xl']\": { maxWidth: tokens.container5xl },\n    \"&[data-size='full-width']\": { maxWidth: \"100%\" },\n  },\n  contentPadding: {\n    ...shorthands.padding(tokens.spacingGroup2),\n  },\n  close: {\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  closeButton: {\n    position: \"absolute\",\n    top: tokens.spacingGroup2,\n    right: tokens.spacingGroup2,\n    ...shorthands.padding(tokens.spacingElement2),\n    // v1 rounded-full; no full-radius token exists in this package.\n    borderRadius: \"9999px\",\n    cursor: \"pointer\",\n    color: tokens.accentA11,\n    \":hover\": {\n      backgroundColor: tokens.semAccentSoft,\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    \":disabled\": {\n      pointerEvents: \"none\",\n    },\n    \"& svg\": {\n      pointerEvents: \"none\",\n      flexShrink: 0,\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n  },\n  header: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingElement2),\n    textAlign: \"left\",\n  },\n  footer: {\n    display: \"flex\",\n    ...shorthands.gap(tokens.spacingElement2),\n    justifyContent: \"flex-end\",\n  },\n  title: {\n    fontSize: tokens.textLg,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayA12,\n  },\n  description: {\n    color: tokens.grayA11,\n    fontSize: tokens.textSm,\n  },\n  srOnly: {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    padding: 0,\n    margin: \"-1px\",\n    overflow: \"hidden\",\n    clip: \"rect(0, 0, 0, 0)\",\n    whiteSpace: \"nowrap\",\n  },\n})\n\nconst XIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(\n  function XIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        width=\"12\"\n        height=\"12\"\n        viewBox=\"0 0 9 9\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...props}\n      >\n        <path\n          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\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    )\n  }\n)\n\nexport type DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>\n\nexport const Dialog = React.forwardRef<HTMLElement, DialogProps>(\n  function Dialog(props, _ref) {\n    return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n  }\n)\n\nexport type DialogTriggerProps = React.ComponentProps<\n  typeof DialogPrimitive.Trigger\n>\n\nexport const DialogTrigger = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Trigger>,\n  DialogTriggerProps\n>(function DialogTrigger({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Trigger\n      ref={ref}\n      data-slot=\"dialog-trigger\"\n      {...{ [SLOT_ATTR]: \"dialog-trigger\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport type DialogPortalProps = React.ComponentProps<\n  typeof DialogPrimitive.Portal\n>\n\nexport const DialogPortal = React.forwardRef<HTMLElement, DialogPortalProps>(\n  function DialogPortal(props, _ref) {\n    return (\n      <DialogPrimitive.Portal\n        data-slot=\"dialog-portal\"\n        {...{ [SLOT_ATTR]: \"dialog-portal\" }}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type DialogOverlayProps = React.ComponentProps<\n  typeof DialogPrimitive.Overlay\n>\n\nexport const DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  DialogOverlayProps\n>(function DialogOverlay({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <DialogPrimitive.Overlay\n      ref={ref}\n      data-slot=\"dialog-overlay\"\n      {...{ [SLOT_ATTR]: \"dialog-overlay\" }}\n      className={mergeClasses(styles.overlay, className)}\n      {...props}\n    />\n  )\n})\n\nexport type DialogContentSize =\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"2xl\"\n  | \"3xl\"\n  | \"4xl\"\n  | \"5xl\"\n  | \"full-width\"\n\nexport type DialogContentProps = React.ComponentProps<\n  typeof DialogPrimitive.Content\n> & {\n  showCloseButton?: boolean\n  size?: DialogContentSize\n  flush?: boolean\n}\n\nexport const DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(function DialogContent(\n  {\n    className,\n    children,\n    showCloseButton = true,\n    flush = false,\n    size = \"lg\",\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <DialogPrimitive.Content\n      ref={ref}\n      data-slot=\"dialog-content\"\n      {...{ [SLOT_ATTR]: \"dialog-content\" }}\n      data-size={size}\n      className={mergeClasses(\n        styles.content,\n        !flush && styles.contentPadding,\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close\n          data-slot=\"dialog-close\"\n          {...{ [SLOT_ATTR]: \"dialog-close\" }}\n          className={styles.closeButton}\n        >\n          <XIcon />\n          <span className={styles.srOnly}>Close</span>\n        </DialogPrimitive.Close>\n      )}\n    </DialogPrimitive.Content>\n  )\n})\n\nexport type DialogCloseProps = React.ComponentProps<\n  typeof DialogPrimitive.Close\n>\n\nexport const DialogClose = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Close>,\n  DialogCloseProps\n>(function DialogClose({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <DialogPrimitive.Close\n      ref={ref}\n      data-slot=\"dialog-close\"\n      {...{ [SLOT_ATTR]: \"dialog-close\" }}\n      className={mergeClasses(styles.close, className)}\n      {...props}\n    >\n      {children}\n    </DialogPrimitive.Close>\n  )\n})\n\nexport type DialogHeaderProps = React.ComponentProps<\"div\">\n\nexport const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(\n  function DialogHeader({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"dialog-header\"\n        {...{ [SLOT_ATTR]: \"dialog-header\" }}\n        className={mergeClasses(styles.header, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type DialogFooterProps = React.ComponentProps<\"div\">\n\nexport const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(\n  function DialogFooter({ className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"dialog-footer\"\n        {...{ [SLOT_ATTR]: \"dialog-footer\" }}\n        className={mergeClasses(styles.footer, className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type DialogTitleProps = React.ComponentProps<\n  typeof DialogPrimitive.Title\n>\n\nexport const DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  DialogTitleProps\n>(function DialogTitle({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <DialogPrimitive.Title\n      ref={ref}\n      data-slot=\"dialog-title\"\n      {...{ [SLOT_ATTR]: \"dialog-title\" }}\n      className={mergeClasses(styles.title, className)}\n      {...props}\n    />\n  )\n})\n\nexport type DialogDescriptionProps = React.ComponentProps<\n  typeof DialogPrimitive.Description\n>\n\nexport const DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  DialogDescriptionProps\n>(function DialogDescription({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <DialogPrimitive.Description\n      ref={ref}\n      data-slot=\"dialog-description\"\n      {...{ [SLOT_ATTR]: \"dialog-description\" }}\n      className={mergeClasses(styles.description, className)}\n      {...props}\n    />\n  )\n})\n"],"names":["useStyles","makeVoltStyles","shorthands","tokens.body","tokens.spacingLayout1","tokens.radiusXl","tokens.grayA1","tokens.containerSm","tokens.containerMd","tokens.containerLg","tokens.containerXl","tokens.container2xl","tokens.container3xl","tokens.container4xl","tokens.container5xl","tokens.spacingGroup2","tokens.accentA8","tokens.spacingElement2","tokens.accentA11","tokens.semAccentSoft","tokens.textLg","tokens.fontWeightSemibold","tokens.grayA12","tokens.grayA11","tokens.textSm","XIcon","React","props","ref","jsx","Dialog","_ref","DialogPrimitive.Root","DialogTrigger","className","DialogPrimitive.Trigger","SLOT_ATTR","DialogPortal","DialogPrimitive.Portal","DialogOverlay","styles","DialogPrimitive.Overlay","mergeClasses","DialogContent","children","showCloseButton","flush","size","jsxs","DialogPrimitive.Content","DialogPrimitive.Close","DialogClose","DialogHeader","DialogFooter","DialogTitle","DialogPrimitive.Title","DialogDescription","DialogPrimitive.Description"],"mappings":"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"}

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+export type DrawerProps = React.ComponentProps<typeof DialogPrimitive.Root>;
+export declare const Drawer: React.ForwardRefExoticComponent<DialogPrimitive.DialogProps & React.RefAttributes<HTMLElement>>;
+export type DrawerTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>;
+export declare const DrawerTrigger: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type DrawerPortalProps = React.ComponentProps<typeof DialogPrimitive.Portal>;
+export declare const DrawerPortal: React.ForwardRefExoticComponent<DialogPrimitive.DialogPortalProps & React.RefAttributes<HTMLElement>>;
+export type DrawerOverlayProps = React.ComponentProps<typeof DialogPrimitive.Overlay>;
+export declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type DrawerSide = "left" | "right" | "top" | "bottom";
+export type DrawerContentProps = React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+    side?: DrawerSide;
+    flush?: boolean;
+};
+export declare const DrawerContent: React.ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type DrawerCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>;
+export declare const DrawerClose: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type DrawerHeaderProps = React.ComponentProps<"div">;
+export declare const DrawerHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type DrawerFooterProps = React.ComponentProps<"div">;
+export declare const DrawerFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type DrawerTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>;
+export declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export type DrawerDescriptionProps = React.ComponentProps<typeof DialogPrimitive.Description>;
+export declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;