@spark-ui/components 17.2.3 → 17.2.4-beta.0

package/dist/drawer/index.mjs

@@ -1,314 +1,282 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Dialog as s } from "@base-ui/react/dialog";
-import { createContext as B, useContext as T, useRef as P } from "react";
-import { useMergeRefs as O } from "@spark-ui/hooks/use-merge-refs";
-import { useScrollOverflow as S } from "@spark-ui/hooks/use-scroll-overflow";
-import { cva as v, cx as i } from "class-variance-authority";
-import { u as z } from "../useRenderSlot-Bta2kdp4.mjs";
-import { Close as R } from "@spark-ui/icons/Close";
-import { I as F } from "../Icon-BO327oHU.mjs";
-import { I } from "../IconButton-DdB3Pq13.mjs";
-const C = B(null), H = ({
-  children: e,
-  withFade: a = !1
-}) => /* @__PURE__ */ t(
-  C.Provider,
-  {
-    value: {
-      withFade: a
-    },
-    children: e
-  }
-), $ = () => {
-  const e = T(C);
-  if (!e)
-    throw Error("useDrawer must be used within a Drawer provider");
-  return e;
-}, k = ({ onOpenChange: e, withFade: a = !1, ...r }) => {
-  const o = e ? (l, n) => {
-    e(l);
-  } : void 0;
-  return /* @__PURE__ */ t(H, { withFade: a, children: /* @__PURE__ */ t(s.Root, { "data-spark-component": "drawer", onOpenChange: o, ...r }) });
+import { t as e } from "../icon-D05Uqh8_.mjs";
+import { t } from "../icon-button-6p3O7NIm.mjs";
+import { t as n } from "../useRenderSlot-DP4fYerF.mjs";
+import { cva as r, cx as i } from "class-variance-authority";
+import { createContext as a, useContext as o, useRef as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { useMergeRefs as l } from "@spark-ui/hooks/use-merge-refs";
+import { useScrollOverflow as u } from "@spark-ui/hooks/use-scroll-overflow";
+import { Close as d } from "@spark-ui/icons/Close";
+import { Dialog as f } from "@base-ui/react/dialog";
+//#region src/drawer/DrawerContext.tsx
+var p = a(null), m = ({ children: e, withFade: t = !1 }) => /* @__PURE__ */ c(p.Provider, {
+	value: { withFade: t },
+	children: e
+}), h = () => {
+	let e = o(p);
+	if (!e) throw Error("useDrawer must be used within a Drawer provider");
+	return e;
+}, g = ({ onOpenChange: e, withFade: t = !1, ...n }) => {
+	let r = e ? (t, n) => {
+		e(t);
+	} : void 0;
+	return /* @__PURE__ */ c(m, {
+		withFade: t,
+		children: /* @__PURE__ */ c(f.Root, {
+			"data-spark-component": "drawer",
+			onOpenChange: r,
+			...n
+		})
+	});
 };
-k.displayName = "Drawer.Root";
-const V = v(
-  ["grow", "overflow-y-auto", "outline-hidden", "focus-visible:u-outline"],
-  {
-    variants: {
-      inset: {
-        true: "",
-        false: "px-xl py-lg"
-      }
-    },
-    defaultVariants: {
-      inset: !1
-    }
-  }
-), w = ({
-  children: e,
-  inset: a = !1,
-  className: r,
-  ref: o,
-  ...l
-}) => {
-  const n = P(null), m = O(o, n), { withFade: p } = $(), { overflow: c } = S(n);
-  return /* @__PURE__ */ t(
-    "div",
-    {
-      "data-spark-component": "drawer-body",
-      ref: m,
-      className: V({ inset: a, className: r }),
-      style: {
-        ...p && {
-          maskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",
-          maskSize: `100% calc(100% + ${c.top ? "0px" : "44px"} + ${c.bottom ? "0px" : "44px"})`,
-          maskPosition: `0 ${c.top ? "0px" : "-44px"}`
-        }
-      },
-      ...l,
-      children: e
-    }
-  );
+g.displayName = "Drawer.Root";
+//#endregion
+//#region src/drawer/DrawerBody.styles.ts
+var _ = r([
+	"grow",
+	"overflow-y-auto",
+	"outline-hidden",
+	"focus-visible:u-outline"
+], {
+	variants: { inset: {
+		true: "",
+		false: "px-xl py-lg"
+	} },
+	defaultVariants: { inset: !1 }
+}), v = ({ children: e, inset: t = !1, className: n, ref: r, ...i }) => {
+	let a = s(null), o = l(r, a), { withFade: d } = h(), { overflow: f } = u(a);
+	return /* @__PURE__ */ c("div", {
+		"data-spark-component": "drawer-body",
+		ref: o,
+		className: _({
+			inset: t,
+			className: n
+		}),
+		style: { ...d && {
+			maskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",
+			maskSize: `100% calc(100% + ${f.top ? "0px" : "44px"} + ${f.bottom ? "0px" : "44px"})`,
+			maskPosition: `0 ${f.top ? "0px" : "-44px"}`
+		} },
+		...i,
+		children: e
+	});
 };
-w.displayName = "Drawer.Body";
-const d = ({ asChild: e = !1, ...a }) => {
-  const r = z(e, "button");
-  return /* @__PURE__ */ t(s.Close, { "data-spark-component": "drawer-close", render: r, ...a });
+v.displayName = "Drawer.Body";
+//#endregion
+//#region src/drawer/DrawerClose.tsx
+var y = ({ asChild: e = !1, ...t }) => {
+	let r = n(e, "button");
+	return /* @__PURE__ */ c(f.Close, {
+		"data-spark-component": "drawer-close",
+		render: r,
+		...t
+	});
 };
-d.displayName = "Drawer.Close";
-const f = ({
-  "aria-label": e,
-  className: a,
-  size: r = "md",
-  intent: o = "neutral",
-  design: l = "ghost",
-  children: n = /* @__PURE__ */ t(R, {}),
-  ref: m,
-  ...p
-}) => /* @__PURE__ */ t(
-  d,
-  {
-    "data-spark-component": "drawer-close-button",
-    ref: m,
-    className: i(["absolute", "top-sm", "right-xl"], a),
-    asChild: !0,
-    ...p,
-    children: /* @__PURE__ */ t(I, { intent: o, size: r, design: l, "aria-label": e, children: /* @__PURE__ */ t(F, { children: n }) })
-  }
-);
-f.displayName = "Drawer.CloseButton";
-const j = v(
-  [
-    "fixed z-modal flex flex-col bg-surface shadow-md",
-    // Base UI uses data-open and data-closed for transitions
-    "data-open:animation-duration-400 data-closed:animation-duration-200",
-    // Nested dialog effect
-    "data-nested-dialog-open:after:pointer-events-none",
-    "after:bg-transparent",
-    "after:transition-all",
-    "after:duration-200",
-    "data-nested-dialog-open:after:inset-0",
-    "data-nested-dialog-open:after:absolute",
-    "data-nested-dialog-open:after:rounded-[inherit]",
-    "data-nested-dialog-open:after:bg-overlay/dim-3"
-  ],
-  {
-    variants: {
-      size: {
-        sm: "",
-        md: "",
-        lg: "",
-        fluid: "",
-        fullscreen: "h-screen w-screen"
-      },
-      side: {
-        right: [
-          "inset-y-0 right-0",
-          "data-open:animate-slide-in-right ",
-          "data-closed:animate-slide-out-right"
-        ],
-        left: [
-          "inset-y-0 left-0",
-          "data-open:animate-slide-in-left",
-          "data-closed:animate-slide-out-left"
-        ],
-        top: [
-          "top-0 left-0",
-          "w-screen",
-          "data-open:animate-slide-in-top",
-          "data-closed:animate-slide-out-top"
-        ],
-        bottom: [
-          "bottom-0 left-0",
-          "w-screen",
-          "data-open:animate-slide-in-bottom",
-          "data-closed:animate-slide-out-bottom"
-        ]
-      }
-    },
-    compoundVariants: [
-      {
-        side: ["right", "left"],
-        size: "sm",
-        class: ["w-sz-480", "max-w-full"]
-      },
-      {
-        side: ["right", "left"],
-        size: "md",
-        class: ["w-sz-672", "max-w-full"]
-      },
-      {
-        side: ["right", "left"],
-        size: "lg",
-        class: ["w-sz-864", "max-w-full"]
-      },
-      {
-        side: ["left", "right"],
-        size: "fluid",
-        class: ["w-auto", "max-w-full"]
-      },
-      {
-        side: ["top", "bottom"],
-        size: "sm",
-        class: ["h-sz-480", "max-h-full"]
-      },
-      {
-        side: ["top", "bottom"],
-        size: "md",
-        class: ["h-sz-672", "max-h-full"]
-      },
-      {
-        side: ["top", "bottom"],
-        size: "lg",
-        class: ["h-sz-864", "max-h-full"]
-      },
-      {
-        side: ["top", "bottom"],
-        size: "fluid",
-        class: ["h-auto", "max-h-full"]
-      }
-    ],
-    defaultVariants: {
-      side: "right",
-      size: "md"
-    }
-  }
-), u = ({
-  className: e,
-  size: a = "md",
-  side: r = "right",
-  ref: o,
-  ...l
-}) => /* @__PURE__ */ t(
-  s.Popup,
-  {
-    ref: o,
-    "data-spark-component": "drawer-content",
-    role: "dialog",
-    className: (n) => i(
-      j({
-        size: a,
-        side: r,
-        className: typeof e == "function" ? e(n) : e
-      })
-    ),
-    ...l
-  }
-);
-u.displayName = "Drawer.Content";
-const g = (e) => /* @__PURE__ */ t(s.Description, { "data-spark-component": "drawer-description", ...e });
-g.displayName = "Drawer.Description";
-const y = ({ className: e, ref: a, ...r }) => /* @__PURE__ */ t(
-  "footer",
-  {
-    "data-spark-component": "drawer-footer",
-    ref: a,
-    className: i(["px-xl", "py-lg"], e),
-    ...r
-  }
-);
-y.displayName = "Drawer.Footer";
-const D = ({
-  children: e,
-  className: a,
-  ref: r,
-  ...o
-}) => /* @__PURE__ */ t(
-  "header",
-  {
-    "data-spark-component": "drawer-header",
-    ref: r,
-    className: i(["px-xl", "py-lg"], a),
-    ...o,
-    children: e
-  }
-);
-D.displayName = "Dialog.Header";
-const h = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  s.Backdrop,
-  {
-    "data-spark-component": "drawer-overlay",
-    className: (r) => i(
-      "z-overlay fixed top-0 left-0 h-screen w-screen",
-      "bg-overlay/dim-1",
-      // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes
-      "data-starting-style:animate-fade-in",
-      "data-ending-style:animate-fade-out",
-      typeof e == "function" ? e(r) : e
-    ),
-    ...a
-  }
-);
-h.displayName = "Drawer.Overlay";
-const x = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  s.Portal,
-  {
-    "data-spark-component": "drawer-portal",
-    className: i(e, "z-modal absolute"),
-    ...a
-  }
-);
-x.displayName = "Drawer.Portal";
-const b = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  s.Title,
-  {
-    "data-spark-component": "drawer-title",
-    className: i("text-headline-2 text-on-surface", e),
-    ...a
-  }
-);
-b.displayName = "Drawer.Title";
-const N = ({ asChild: e = !1, ...a }) => {
-  const r = z(e, "button");
-  return /* @__PURE__ */ t(s.Trigger, { "data-spark-component": "drawer-trigger", render: r, ...a });
-};
-N.displayName = "Drawer.Trigger";
-const A = Object.assign(k, {
-  Trigger: N,
-  Portal: x,
-  Overlay: h,
-  Content: u,
-  Header: D,
-  Body: w,
-  Footer: y,
-  Close: d,
-  CloseButton: f,
-  Title: b,
-  Description: g
+y.displayName = "Drawer.Close";
+//#endregion
+//#region src/drawer/DrawerCloseButton.tsx
+var b = ({ "aria-label": n, className: r, size: a = "md", intent: o = "neutral", design: s = "ghost", children: l = /* @__PURE__ */ c(d, {}), ref: u, ...f }) => /* @__PURE__ */ c(y, {
+	"data-spark-component": "drawer-close-button",
+	ref: u,
+	className: i([
+		"absolute",
+		"top-sm",
+		"right-xl"
+	], r),
+	asChild: !0,
+	...f,
+	children: /* @__PURE__ */ c(t, {
+		intent: o,
+		size: a,
+		design: s,
+		"aria-label": n,
+		children: /* @__PURE__ */ c(e, { children: l })
+	})
+});
+b.displayName = "Drawer.CloseButton";
+//#endregion
+//#region src/drawer/DrawerContent.styles.tsx
+var x = r([
+	"fixed z-modal flex flex-col bg-surface shadow-md",
+	"data-open:animation-duration-400 data-closed:animation-duration-200",
+	"data-nested-dialog-open:after:pointer-events-none",
+	"after:bg-transparent",
+	"after:transition-all",
+	"after:duration-200",
+	"data-nested-dialog-open:after:inset-0",
+	"data-nested-dialog-open:after:absolute",
+	"data-nested-dialog-open:after:rounded-[inherit]",
+	"data-nested-dialog-open:after:bg-overlay/dim-3"
+], {
+	variants: {
+		size: {
+			sm: "",
+			md: "",
+			lg: "",
+			fluid: "",
+			fullscreen: "h-screen w-screen"
+		},
+		side: {
+			right: [
+				"inset-y-0 right-0",
+				"data-open:animate-slide-in-right ",
+				"data-closed:animate-slide-out-right"
+			],
+			left: [
+				"inset-y-0 left-0",
+				"data-open:animate-slide-in-left",
+				"data-closed:animate-slide-out-left"
+			],
+			top: [
+				"top-0 left-0",
+				"w-screen",
+				"data-open:animate-slide-in-top",
+				"data-closed:animate-slide-out-top"
+			],
+			bottom: [
+				"bottom-0 left-0",
+				"w-screen",
+				"data-open:animate-slide-in-bottom",
+				"data-closed:animate-slide-out-bottom"
+			]
+		}
+	},
+	compoundVariants: [
+		{
+			side: ["right", "left"],
+			size: "sm",
+			class: ["w-sz-480", "max-w-full"]
+		},
+		{
+			side: ["right", "left"],
+			size: "md",
+			class: ["w-sz-672", "max-w-full"]
+		},
+		{
+			side: ["right", "left"],
+			size: "lg",
+			class: ["w-sz-864", "max-w-full"]
+		},
+		{
+			side: ["left", "right"],
+			size: "fluid",
+			class: ["w-auto", "max-w-full"]
+		},
+		{
+			side: ["top", "bottom"],
+			size: "sm",
+			class: ["h-sz-480", "max-h-full"]
+		},
+		{
+			side: ["top", "bottom"],
+			size: "md",
+			class: ["h-sz-672", "max-h-full"]
+		},
+		{
+			side: ["top", "bottom"],
+			size: "lg",
+			class: ["h-sz-864", "max-h-full"]
+		},
+		{
+			side: ["top", "bottom"],
+			size: "fluid",
+			class: ["h-auto", "max-h-full"]
+		}
+	],
+	defaultVariants: {
+		side: "right",
+		size: "md"
+	}
+}), S = ({ className: e, size: t = "md", side: n = "right", ref: r, ...a }) => /* @__PURE__ */ c(f.Popup, {
+	ref: r,
+	"data-spark-component": "drawer-content",
+	role: "dialog",
+	className: (r) => i(x({
+		size: t,
+		side: n,
+		className: typeof e == "function" ? e(r) : e
+	})),
+	...a
+});
+S.displayName = "Drawer.Content";
+//#endregion
+//#region src/drawer/DrawerDescription.tsx
+var C = (e) => /* @__PURE__ */ c(f.Description, {
+	"data-spark-component": "drawer-description",
+	...e
+});
+C.displayName = "Drawer.Description";
+//#endregion
+//#region src/drawer/DrawerFooter.tsx
+var w = ({ className: e, ref: t, ...n }) => /* @__PURE__ */ c("footer", {
+	"data-spark-component": "drawer-footer",
+	ref: t,
+	className: i(["px-xl", "py-lg"], e),
+	...n
+});
+w.displayName = "Drawer.Footer";
+//#endregion
+//#region src/drawer/DrawerHeader.tsx
+var T = ({ children: e, className: t, ref: n, ...r }) => /* @__PURE__ */ c("header", {
+	"data-spark-component": "drawer-header",
+	ref: n,
+	className: i(["px-xl", "py-lg"], t),
+	...r,
+	children: e
 });
-A.displayName = "Drawer";
-N.displayName = "Drawer.Trigger";
-x.displayName = "Drawer.Portal";
-h.displayName = "Drawer.Overlay";
-u.displayName = "Drawer.Content";
-D.displayName = "Drawer.Header";
-w.displayName = "Drawer.Body";
-y.displayName = "Drawer.Footer";
-d.displayName = "Drawer.Close";
-f.displayName = "Drawer.CloseButton";
-b.displayName = "Drawer.Title";
-g.displayName = "Drawer.Description";
-export {
-  A as Drawer
+T.displayName = "Dialog.Header";
+//#endregion
+//#region src/drawer/DrawerOverlay.tsx
+var E = ({ className: e, ...t }) => /* @__PURE__ */ c(f.Backdrop, {
+	"data-spark-component": "drawer-overlay",
+	className: (t) => i("z-overlay fixed top-0 left-0 h-screen w-screen", "bg-overlay/dim-1", "data-starting-style:animate-fade-in", "data-ending-style:animate-fade-out", typeof e == "function" ? e(t) : e),
+	...t
+});
+E.displayName = "Drawer.Overlay";
+//#endregion
+//#region src/drawer/DrawerPortal.tsx
+var D = ({ className: e, ...t }) => /* @__PURE__ */ c(f.Portal, {
+	"data-spark-component": "drawer-portal",
+	className: i(e, "z-modal absolute"),
+	...t
+});
+D.displayName = "Drawer.Portal";
+//#endregion
+//#region src/drawer/DrawerTitle.tsx
+var O = ({ className: e, ...t }) => /* @__PURE__ */ c(f.Title, {
+	"data-spark-component": "drawer-title",
+	className: i("text-headline-2 text-on-surface", e),
+	...t
+});
+O.displayName = "Drawer.Title";
+//#endregion
+//#region src/drawer/DrawerTrigger.tsx
+var k = ({ asChild: e = !1, ...t }) => {
+	let r = n(e, "button");
+	return /* @__PURE__ */ c(f.Trigger, {
+		"data-spark-component": "drawer-trigger",
+		render: r,
+		...t
+	});
 };
-//# sourceMappingURL=index.mjs.map
+k.displayName = "Drawer.Trigger";
+//#endregion
+//#region src/drawer/index.ts
+var A = Object.assign(g, {
+	Trigger: k,
+	Portal: D,
+	Overlay: E,
+	Content: S,
+	Header: T,
+	Body: v,
+	Footer: w,
+	Close: y,
+	CloseButton: b,
+	Title: O,
+	Description: C
+});
+A.displayName = "Drawer", k.displayName = "Drawer.Trigger", D.displayName = "Drawer.Portal", E.displayName = "Drawer.Overlay", S.displayName = "Drawer.Content", T.displayName = "Drawer.Header", v.displayName = "Drawer.Body", w.displayName = "Drawer.Footer", y.displayName = "Drawer.Close", b.displayName = "Drawer.CloseButton", O.displayName = "Drawer.Title", C.displayName = "Drawer.Description";
+//#endregion
+export { A as Drawer };
+
+//# sourceMappingURL=index.mjs.map