@konstructio/ui 0.1.2-alpha.12 → 0.1.2-alpha.121

package/dist/components/Datepicker/DatePicker.variants.js

@@ -1,5 +1,5 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const r = t("w-fit py-4 px-6");
+import { t as a } from "../../dist-B9GE4SXf.js";
+var t = a("w-fit py-4 px-6");
 export {
-  r as datePickerVariants
+  t as datePickerVariants
 };

package/dist/components/Datepicker/components/DatePickerContent/DatePickerContent.js

@@ -0,0 +1,51 @@
+import { t } from "../../../../utils-DnIJruo0.js";
+import { t as h } from "../../../../chevron-left-B1zWfqll.js";
+import { t as f } from "../../../../chevron-right-D4OkgIIT.js";
+import { datePickerVariants as p } from "../../DatePicker.variants.js";
+import '../../../../style.css';/* empty css                         */
+import { t as k } from "../../../../DayPicker-D7KFB2bI.js";
+import { useState as g } from "react";
+import { jsx as a } from "react/jsx-runtime";
+var w = ({ className: o, showOutsideDays: l = !0, animate: n = !0, arrowClassName: d, monthsClassName: s, defaultSelected: i, onSelect: m, ...u }) => {
+  const [c, x] = g(() => i), b = (e) => {
+    e && (x(e), m?.(e));
+  };
+  return /* @__PURE__ */ a(k, {
+    className: t(p({ className: o })),
+    animate: n,
+    mode: "single",
+    selected: c,
+    onSelect: b,
+    showOutsideDays: l,
+    role: "dialog",
+    "aria-label": "Datepicker",
+    classNames: {
+      chevron: t("cursor-pointer", "text-slate-500", "w-5", "h-5", "text-slate-500", "w-4", "h-4", "dark:text-metal-200"),
+      day_button: t("h-7.5", "aria-selected:opacity-100", "font-semibold", "hover:rounded-full", "cursor-pointer", "rounded-full", "w-7.5"),
+      day: "text-center text-sm leading-5",
+      month_caption: t("text-slate-700", "font-semibold", "text-sm", "pl-1", "h-8", "flex", "items-center", "dark:text-white"),
+      months: t("flex", "flex-col", "relative", "px-5", "py-4", "rounded-lg", "shadow-md", "px-6", "py-4", "w-[307px]", "justify-center", "items-center", "border", "border-transparent", "dark:bg-metal-800", "dark:border-metal-700", s),
+      month: "flex flex-col gap-4",
+      nav: t("absolute", "right-4", "top-3.5", "flex", "justify-center", "items-center", "gap-1", d),
+      outside: "text-slate-400 dark:text-metal-500",
+      selected: t("[&>button]:bg-blue-600", "[&>button]:text-white", "[&>button]:hover:bg-blue-700", "[&>button]:transition-all", "[&>button]:duration-300", "[&>button]:rounded-full", "dark:[&>button]:bg-aurora-500", "dark:[&>button]:hover:bg-aurora-500", "dark:[&>button]:text-metal-900"),
+      weekdays: "text-slate-500 dark:text-metal-300",
+      weeks: t("text-slate-700", "[&>tr>td]:border-transparent", "[&>tr>td]:border-r-[8px]", "[&>tr>td]:last:border-r-0", "dark:text-white"),
+      weekday: "font-semibold text-sm uppercase text-sm",
+      today: "text-blue-600 dark:text-aurora-500 data-[selected=true]:text-white",
+      month_grid: t("w-full", "[&>thead]:table-header-group", "[&>thead]:relative", "[&>thead]:after:block", '[&>thead]:after:content-[" "]', "[&>thead]:after:h-4")
+    },
+    components: { Chevron: ({ className: e, ...r }) => r.orientation === "left" ? /* @__PURE__ */ a(h, {
+      className: t(e),
+      ...r
+    }) : /* @__PURE__ */ a(f, {
+      className: t(e),
+      ...r
+    }) },
+    ...u
+  });
+};
+w.displayName = "DatePickerContent";
+export {
+  w as DatePickerContent
+};

package/dist/components/Divider/Divider.js

@@ -1,11 +1,11 @@
-import { jsx as m } from "react/jsx-runtime";
-import { cn as o } from "../../utils/index.js";
-import { dividerVariants as a } from "./Divider.variants.js";
-const d = ({
-  className: i,
-  ...r
-}) => /* @__PURE__ */ m("div", { className: o(a({ className: i })), ...r });
-d.displayName = "Divider";
+import { t as m } from "../../utils-DnIJruo0.js";
+import { dividerVariants as e } from "./Divider.variants.js";
+import { jsx as o } from "react/jsx-runtime";
+var t = ({ className: r, component: i = "div", ...a }) => /* @__PURE__ */ o(i, {
+  className: m(e({ className: r })),
+  ...a
+});
+t.displayName = "Divider";
 export {
-  d as Divider
+  t as Divider
 };

package/dist/components/Divider/Divider.variants.js

@@ -1,14 +1,12 @@
-import { c as a } from "../../index-D29mdTf5.js";
-const i = a(["h-[1px]", "bg-zinc-200", "w-full"], {
-  variants: {
-    variant: {
-      default: ""
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
+import { t as a } from "../../dist-B9GE4SXf.js";
+var r = a([
+  "h-px",
+  "bg-zinc-200",
+  "w-full"
+], {
+  variants: { variant: { default: "" } },
+  defaultVariants: { variant: "default" }
 });
 export {
-  i as dividerVariants
+  r as dividerVariants
 };

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,103 @@
+"use client";
+import { t as Y } from "../../x-BmNOD9Gr.js";
+import { t as _ } from "../../dist-C_jtUTU9.js";
+import { t as o } from "../../utils-DnIJruo0.js";
+import { t as j } from "../../Combination-CnMM05mt.js";
+import { t as k } from "../../es2015-BvX7Yq5Q.js";
+import { DrawerContext as A } from "./contexts/Drawer.context.js";
+import { Header as K } from "./components/Header/Header.js";
+import { Body as L } from "./components/Body/Body.js";
+import { Footer as O } from "./components/Footer/Footer.js";
+import { buttonCloseVariants as U, drawerVariants as W, overlayVariants as q, resizeHandleVariants as G } from "./Drawer.variants.js";
+import "./constants/index.js";
+import { useDrawer as J } from "./hooks/useDrawer.js";
+import { useId as N, useMemo as Q, useRef as Z } from "react";
+import { createPortal as $ } from "react-dom";
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+var f = ({ canResize: i = !1, children: y, className: w, classNames: t, container: b, defaultWidth: h = 500, isOpen: x, maxWidth: v, minWidth: D, position: n = "right", showCloseButton: H = !0, closeOnSwipe: T = !0, fullScreenOnMobile: V = !0, initialFocus: S = "first", theme: E, onClose: a }) => {
+  const l = N(), c = Z(null), I = (d) => {
+    const r = d.touches?.[0];
+    c.current = r ? {
+      x: r.clientX,
+      y: r.clientY
+    } : null;
+  }, M = (d) => {
+    const r = c.current, s = d.changedTouches?.[0];
+    if (c.current = null, !T || !r || !s) return;
+    const u = s.clientX - r.x, P = s.clientY - r.y;
+    (n === "left" ? u <= -60 : u >= 60) && Math.abs(u) > Math.abs(P) && a?.();
+  }, { handleKeyDown: g, handleMouseDown: F, isAnimating: p, isVisible: R, translateClass: X, width: z } = J({
+    canResize: i,
+    defaultWidth: h,
+    isOpen: x,
+    maxWidth: v,
+    minWidth: D,
+    position: n,
+    onClose: a
+  }), B = Q(() => ({
+    classNames: t,
+    headerId: l
+  }), [t, l]);
+  if (!R) return null;
+  const C = /* @__PURE__ */ e(A.Provider, {
+    value: B,
+    children: /* @__PURE__ */ e(j, { children: /* @__PURE__ */ m("div", {
+      className: o("fixed inset-0 z-40", t?.root),
+      "data-theme": E,
+      children: [/* @__PURE__ */ e("div", {
+        className: o(q(), {
+          "opacity-55": p,
+          "opacity-0": !p
+        }, t?.overlay),
+        "aria-hidden": "true",
+        onClick: a,
+        role: "presentation"
+      }), /* @__PURE__ */ e(k, {
+        returnFocus: !0,
+        className: "contents",
+        children: /* @__PURE__ */ m("div", {
+          className: o(W({
+            position: n,
+            fullScreenOnMobile: V
+          }), X, t?.panel, w),
+          style: { width: i ? z : h },
+          onTouchStart: I,
+          onTouchEnd: M,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": l,
+          ...S === "panel" ? {
+            tabIndex: -1,
+            "data-autofocus": !0
+          } : {},
+          children: [
+            i && /* @__PURE__ */ e("button", {
+              type: "button",
+              "aria-label": "Resize drawer",
+              className: o(G({ position: n }), t?.resizeHandle),
+              onMouseDown: F,
+              onKeyDown: g
+            }),
+            H && /* @__PURE__ */ m("button", {
+              className: o(U(), t?.closeButton),
+              onClick: a,
+              type: "button",
+              children: [/* @__PURE__ */ e(Y, { size: 20 }), /* @__PURE__ */ e(_, { children: "Dismiss drawer" })]
+            }),
+            /* @__PURE__ */ e("div", {
+              className: o("flex flex-1 flex-col h-full overflow-hidden", t?.content),
+              children: y
+            })
+          ]
+        })
+      })]
+    }) })
+  });
+  return $(C, b || document.body);
+};
+f.Header = K;
+f.Body = L;
+f.Footer = O;
+export {
+  f as Drawer
+};

package/dist/components/Drawer/Drawer.variants.js

@@ -0,0 +1,96 @@
+import { t as r } from "../../dist-B9GE4SXf.js";
+var e = r([
+  "bg-white",
+  "dark:bg-metal-900",
+  "duration-300",
+  "ease-in-out",
+  "fixed",
+  "flex",
+  "flex-col",
+  "group/drawer",
+  "inset-y-0",
+  "shadow-xl",
+  "transform",
+  "transition-transform",
+  "z-50"
+], {
+  variants: {
+    fullScreenOnMobile: {
+      true: ["max-md:w-full!", "max-md:border-0"],
+      false: ""
+    },
+    position: {
+      left: [
+        "left-0",
+        "border-r",
+        "border-slate-200",
+        "dark:border-metal-700"
+      ],
+      right: [
+        "right-0",
+        "border-l",
+        "border-slate-200",
+        "dark:border-metal-700"
+      ]
+    }
+  },
+  defaultVariants: {
+    position: "right",
+    fullScreenOnMobile: !0
+  }
+}), a = r([
+  "fixed",
+  "inset-0",
+  "z-40",
+  "bg-black",
+  "transition-opacity",
+  "duration-300"
+]), o = r([
+  "absolute",
+  "rounded",
+  "outline-none",
+  "focus-visible:ring-1",
+  "focus-visible:ring-aurora-500",
+  "flex",
+  "items-center",
+  "justify-center",
+  "pointer-coarse:min-h-11",
+  "pointer-coarse:min-w-11",
+  "right-3",
+  "top-3",
+  "cursor-pointer",
+  "text-slate-500",
+  "hover:text-slate-700",
+  "dark:text-metal-400",
+  "dark:hover:text-metal-300",
+  "transition-colors",
+  "z-10"
+]), i = r([
+  "absolute",
+  "bg-slate-200",
+  "dark:bg-metal-700",
+  "border-none",
+  "cursor-col-resize",
+  "h-full",
+  "opacity-0",
+  "p-0",
+  "top-0",
+  "transition-opacity",
+  "w-1",
+  "z-50",
+  "group-hover/drawer:opacity-100",
+  "hover:opacity-100!",
+  "focus:outline-none"
+], {
+  variants: { position: {
+    left: ["right-0"],
+    right: ["left-0"]
+  } },
+  defaultVariants: { position: "right" }
+});
+export {
+  o as buttonCloseVariants,
+  e as drawerVariants,
+  a as overlayVariants,
+  i as resizeHandleVariants
+};

package/dist/components/Drawer/components/Body/Body.js

@@ -0,0 +1,15 @@
+import { t as e } from "../../../../utils-DnIJruo0.js";
+import { useDrawerContext as a } from "../../contexts/Drawer.context.js";
+import { memo as t } from "react";
+import { jsx as s } from "react/jsx-runtime";
+var p = t(({ children: o, className: r }) => {
+  const { classNames: m } = a();
+  return /* @__PURE__ */ s("div", {
+    className: e("flex-1", "overflow-y-auto", "p-4", m?.body, r),
+    children: o
+  });
+});
+p.displayName = "Drawer.Body";
+export {
+  p as Body
+};

package/dist/components/Drawer/components/Body/index.js

@@ -0,0 +1,4 @@
+import { Body as r } from "./Body.js";
+export {
+  r as Body
+};

package/dist/components/Drawer/components/Footer/Footer.js

@@ -0,0 +1,15 @@
+import { t } from "../../../../utils-DnIJruo0.js";
+import { useDrawerContext as a } from "../../contexts/Drawer.context.js";
+import { memo as m } from "react";
+import { jsx as s } from "react/jsx-runtime";
+var i = m(({ children: r, className: e }) => {
+  const { classNames: o } = a();
+  return /* @__PURE__ */ s("div", {
+    className: t("flex-shrink-0", "border-t", "border-slate-200", "dark:border-metal-700", "p-4", "max-md:pb-[calc(1rem+env(safe-area-inset-bottom))]", o?.footer, e),
+    children: r
+  });
+});
+i.displayName = "Drawer.Footer";
+export {
+  i as Footer
+};

package/dist/components/Drawer/components/Footer/index.js

@@ -0,0 +1,4 @@
+import { Footer as r } from "./Footer.js";
+export {
+  r as Footer
+};

package/dist/components/Drawer/components/Header/Header.js

@@ -0,0 +1,16 @@
+import { t as d } from "../../../../utils-DnIJruo0.js";
+import { useDrawerContext as s } from "../../contexts/Drawer.context.js";
+import { memo as t } from "react";
+import { jsx as i } from "react/jsx-runtime";
+var p = t(({ children: r, className: e, id: a }) => {
+  const { classNames: o, headerId: m } = s();
+  return /* @__PURE__ */ i("div", {
+    id: a ?? m,
+    className: d("flex-shrink-0", "border-b", "border-slate-200", "dark:border-metal-700", "p-4", o?.header, e),
+    children: r
+  });
+});
+p.displayName = "Drawer.Header";
+export {
+  p as Header
+};

package/dist/components/Drawer/components/Header/index.js

@@ -0,0 +1,4 @@
+import { Header as e } from "./Header.js";
+export {
+  e as Header
+};

package/dist/components/Drawer/components/index.js

@@ -0,0 +1,8 @@
+import { Header as r } from "./Header/Header.js";
+import { Body as t } from "./Body/Body.js";
+import { Footer as p } from "./Footer/Footer.js";
+export {
+  t as Body,
+  p as Footer,
+  r as Header
+};

package/dist/components/Drawer/constants/index.js

@@ -0,0 +1,10 @@
+var _ = 500, A = 400, I = 800, T = 10, D = 300, E = 20, r = 60;
+export {
+  T as ANIMATION_DELAY_MS,
+  D as ANIMATION_DURATION_MS,
+  I as DEFAULT_MAX_WIDTH,
+  A as DEFAULT_MIN_WIDTH,
+  _ as DEFAULT_WIDTH,
+  E as KEYBOARD_RESIZE_STEP,
+  r as SWIPE_THRESHOLD
+};

package/dist/components/Drawer/contexts/Drawer.context.js

@@ -0,0 +1,6 @@
+import { createContext as e, useContext as t } from "react";
+var r = e({}), a = () => t(r);
+export {
+  r as DrawerContext,
+  a as useDrawerContext
+};

package/dist/components/Drawer/contexts/index.js

@@ -0,0 +1,5 @@
+import { DrawerContext as e, useDrawerContext as t } from "./Drawer.context.js";
+export {
+  e as DrawerContext,
+  t as useDrawerContext
+};

package/dist/components/Drawer/hooks/index.js

@@ -0,0 +1,4 @@
+import { useDrawer as e } from "./useDrawer.js";
+export {
+  e as useDrawer
+};

package/dist/components/Drawer/hooks/useDrawer.js

@@ -0,0 +1,57 @@
+import "../constants/index.js";
+import { useCallback as b, useEffect as u, useRef as y, useState as D } from "react";
+var F = ({ canResize: o = !1, defaultWidth: g = 500, isOpen: n, maxWidth: l = 800, minWidth: a = 400, position: r = "right", onClose: w }) => {
+  const [I, h] = D(!1), [E, M] = D(!1), [T, c] = D(g), f = y(!1), i = y(() => {
+  }), d = y(() => {
+  });
+  u(() => {
+    let e;
+    return n ? (h(!0), e = setTimeout(() => M(!0), 10)) : (M(!1), e = setTimeout(() => h(!1), 300)), () => {
+      clearTimeout(e);
+    };
+  }, [n]), u(() => {
+    if (!n) return;
+    const e = new AbortController(), t = (m) => {
+      m.code === "Escape" && w?.();
+    };
+    return window.addEventListener("keydown", t, { signal: e.signal }), () => {
+      e.abort();
+    };
+  }, [n, w]);
+  const s = b(() => {
+    document.removeEventListener("mousemove", i.current), document.removeEventListener("mouseup", d.current), document.body.style.cursor = "", document.body.style.userSelect = "";
+  }, []);
+  u(() => {
+    i.current = (e) => {
+      if (!f.current || !o) return;
+      let t;
+      r === "right" ? t = window.innerWidth - e.clientX : t = e.clientX, t = Math.max(a, Math.min(l, t)), c(t);
+    }, d.current = () => {
+      f.current = !1, s();
+    };
+  }, [
+    r,
+    a,
+    l,
+    o,
+    s
+  ]);
+  const L = () => {
+    f.current = !0, document.addEventListener("mousemove", i.current), document.addEventListener("mouseup", d.current), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
+  }, _ = (e) => {
+    if (!o) return;
+    const t = r === "right" && e.key === "ArrowLeft" || r === "left" && e.key === "ArrowRight", m = r === "right" && e.key === "ArrowRight" || r === "left" && e.key === "ArrowLeft";
+    t ? (e.preventDefault(), c((A) => Math.min(l, A + 20))) : m && (e.preventDefault(), c((A) => Math.max(a, A - 20)));
+  };
+  return u(() => s, [s]), {
+    isAnimating: E,
+    isVisible: I,
+    width: T,
+    translateClass: E ? "translate-x-0" : r === "left" ? "-translate-x-full" : "translate-x-full",
+    handleMouseDown: L,
+    handleKeyDown: _
+  };
+};
+export {
+  F as useDrawer
+};

package/dist/components/DropdownButton/DropdownButton.js

@@ -1,135 +1,4 @@
-import { jsxs as h, jsx as p } from "react/jsx-runtime";
-import v, { forwardRef as x, useState as C, useRef as w, useCallback as b, useEffect as E } from "react";
-import { cn as l } from "../../utils/index.js";
-import { Button as P } from "../Button/Button.js";
-import { P as c } from "../../index-N2OStZoU.js";
-function m() {
-  return m = Object.assign || function(e) {
-    for (var i = 1; i < arguments.length; i++) {
-      var n = arguments[i];
-      for (var t in n)
-        Object.prototype.hasOwnProperty.call(n, t) && (e[t] = n[t]);
-    }
-    return e;
-  }, m.apply(this, arguments);
-}
-function z(e, i) {
-  if (e == null) return {};
-  var n = L(e, i), t, r;
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < o.length; r++)
-      t = o[r], !(i.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (n[t] = e[t]);
-  }
-  return n;
-}
-function L(e, i) {
-  if (e == null) return {};
-  var n = {}, t = Object.keys(e), r, o;
-  for (o = 0; o < t.length; o++)
-    r = t[o], !(i.indexOf(r) >= 0) && (n[r] = e[r]);
-  return n;
-}
-var g = x(function(e, i) {
-  var n = e.color, t = n === void 0 ? "currentColor" : n, r = e.size, o = r === void 0 ? 24 : r, s = z(e, ["color", "size"]);
-  return /* @__PURE__ */ v.createElement("svg", m({
-    ref: i,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: o,
-    height: o,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: t,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, s), /* @__PURE__ */ v.createElement("polyline", {
-    points: "6 9 12 15 18 9"
-  }));
-});
-g.propTypes = {
-  color: c.string,
-  size: c.oneOfType([c.string, c.number])
-};
-g.displayName = "ChevronDown";
-const I = ({
-  buttonClassName: e,
-  className: i,
-  itemClassName: n,
-  listClassName: t,
-  options: r
-}) => {
-  const [o, s] = C(!1), y = w(null), f = w(null), O = b(() => s((a) => !a), []), k = b((a) => {
-    s(!1), a?.();
-  }, []);
-  return E(() => {
-    const a = new AbortController(), u = (d) => {
-      d.key === "Escape" && s(!1);
-    }, j = (d) => {
-      f.current?.contains(d.target) || s(!1);
-    };
-    return document.addEventListener("keydown", u, {
-      signal: a.signal
-    }), document.addEventListener("mousedown", j, {
-      signal: a.signal
-    }), document.addEventListener(
-      "visibilitychange",
-      () => {
-        document.hidden && s(!1);
-      },
-      {
-        signal: a.signal
-      }
-    ), () => {
-      a.abort();
-    };
-  }, [f]), /* @__PURE__ */ h("div", { ref: f, className: l("relative w-full", i), children: [
-    /* @__PURE__ */ h(
-      P,
-      {
-        ref: y,
-        className: l(
-          "flex gap-2 items-center justify-between w-full",
-          e
-        ),
-        onClick: O,
-        children: [
-          "Download Invoice as",
-          /* @__PURE__ */ p(
-            g,
-            {
-              className: l({
-                "transform rotate-180": o,
-                "transition-transform duration-200": !0
-              })
-            }
-          )
-        ]
-      }
-    ),
-    o && /* @__PURE__ */ p(
-      "ul",
-      {
-        className: l(
-          "absolute z-10 mt-1 w-full bg-white border border-gray-200 rounded shadow-xs animate-in fade-in-0 py-2",
-          t
-        ),
-        children: r.map((a, u) => /* @__PURE__ */ p(
-          "li",
-          {
-            className: l(
-              "hover:bg-gray-50 px-6 py-1.5 hover:cursor-pointer",
-              n
-            ),
-            onClick: () => k(a.onClick),
-            children: a.label
-          },
-          u
-        ))
-      }
-    )
-  ] });
-};
+import { t } from "../../DropdownButton-B2pGss52.js";
 export {
-  I as DropdownButton
+  t as DropdownButton
 };

package/dist/components/DropdownButton/components/ActionSheet/ActionSheet.js

@@ -0,0 +1,36 @@
+import { t } from "../../../../utils-DnIJruo0.js";
+import { Sheet as u } from "../../../Sheet/Sheet.js";
+import { Fragment as v } from "react";
+import { jsx as a, jsxs as r } from "react/jsx-runtime";
+var w = ({ isOpen: d, onClose: s, title: i, options: m, itemClassName: b, className: n, headerClassName: c, titleClassName: o, position: x = "bottom", theme: h }) => /* @__PURE__ */ a(u, {
+  isOpen: d,
+  onClose: s,
+  title: i,
+  position: x,
+  theme: h,
+  className: t("px-4", n),
+  headerClassName: t("px-2", c),
+  titleClassName: o,
+  bodyClassName: "overflow-visible",
+  children: /* @__PURE__ */ a("div", {
+    className: "flex flex-col",
+    children: m.map((e, f) => {
+      const l = e.disabled || !!e.disabledReason;
+      return /* @__PURE__ */ r(v, { children: [e.separator && /* @__PURE__ */ a("hr", { className: "-mx-4 my-2 border-slate-200 dark:border-metal-700" }), /* @__PURE__ */ r("button", {
+        type: "button",
+        disabled: l,
+        className: t("flex min-h-11 w-full items-center justify-between gap-4 rounded px-2 text-left text-base", "hover:bg-slate-50 focus-visible:bg-slate-50 dark:hover:bg-metal-700 dark:focus-visible:bg-metal-700", "outline-none disabled:cursor-not-allowed disabled:hover:bg-transparent", e.destructive && "text-red-600 dark:text-red-400", l && "text-slate-400 dark:text-metal-400", b),
+        onClick: () => {
+          e.onClick?.(), s();
+        },
+        children: [/* @__PURE__ */ a("span", { children: e.label }), e.disabledReason && /* @__PURE__ */ a("span", {
+          className: "shrink-0 text-xs text-slate-400 dark:text-metal-400",
+          children: e.disabledReason
+        })]
+      })] }, f);
+    })
+  })
+});
+export {
+  w as ActionSheet
+};