welcome-ui/dist/Drawer.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import { jsx as e, jsxs as f, Fragment as y } from "react/jsx-runtime";
import { D as A } from "./NI3IVY7K-DxnarnKs.js";
import { u as ge } from "./NI3IVY7K-DxnarnKs.js";
import { useCallback as g, forwardRef as p } from "react";
import { c as n } from "./index-PAaZGbyz.js";
import { f as b } from "./forwardRefWithAs-8eP3ZN15.js";
import { Button as C } from "./Button.js";
import "./Icon-BisRi8B3.js";
import { A as O } from "./index-C8GsqBDe.js";
import { Text as x } from "./Text.js";
import { D as T } from "./DSAASPLT-COUlh0RL.js";
import { CloseButton as j } from "./CloseButton.js";
import { D as F } from "./ZTXFEM5L-BEA_1pIo.js";
const I = "_content_2lawg_13", B = "_title_2lawg_67", h = {
  "asset-drawer": "_asset-drawer_2lawg_3",
  "content-wrapper": "_content-wrapper_2lawg_13",
  "content-max-width": "_content-max-width_2lawg_24",
  content: I,
  "asset-drawer-header": "_asset-drawer-header_2lawg_39",
  "back-button": "_back-button_2lawg_57",
  title: B,
  "icon-block": "_icon-block_2lawg_72",
  "size-md": "_size-md_2lawg_84",
  "size-sm": "_size-sm_2lawg_87"
}, d = n(h), E = b(
  ({
    children: t,
    className: r,
    getPersistentElements: s,
    maxWidth: o,
    store: c,
    ...i
  }, m) => {
    const l = g(
      () => Array.from(
        s ? s() : document.querySelectorAll("[data-wui-persistent]")
      ),
      [s]
    ), w = g(
      (k) => {
        const D = k.target;
        return !l().some(
          (z) => z.contains(D)
        );
      },
      [l]
    ), u = typeof o == "number" ? `${o}px` : o;
    return /* @__PURE__ */ e(
      te,
      {
        autoFocusOnShow: !1,
        className: d("asset-drawer", r),
        getPersistentElements: l,
        hideOnInteractOutside: w,
        placement: "bottom",
        ref: m,
        store: c,
        withBackdrop: !0,
        ...i,
        children: /* @__PURE__ */ e("div", { className: d("content-wrapper"), children: /* @__PURE__ */ e(
          "div",
          {
            className: d("content-max-width"),
            style: { "--asset-drawer-content-max-width": u },
            children: /* @__PURE__ */ e("div", { className: d("content"), children: t })
          }
        ) })
      }
    );
  }
), P = n(h), R = ({ icon: t, size: r = "md" }) => /* @__PURE__ */ e("div", { className: P("icon-block", `size-${r}`), children: /* @__PURE__ */ e(t, { className: "text-neutral-90", size: r }) }), _ = n(h), S = ({
  action: t,
  className: r,
  icon: s,
  onBackButtonClick: o,
  subtitle: c,
  title: i
}) => /* @__PURE__ */ f("div", { className: _("asset-drawer-header", r), children: [
  /* @__PURE__ */ f("div", { className: _("back-button"), children: [
    !!o && /* @__PURE__ */ e(C, { onClick: o, shape: "circle", size: "lg", variant: "ghost", children: /* @__PURE__ */ e(O, {}) }),
    !!s && /* @__PURE__ */ e(R, { icon: s }),
    /* @__PURE__ */ f("div", { className: _("title"), children: [
      /* @__PURE__ */ e(x, { className: "pr-xl", variant: "h3", children: i }),
      c
    ] })
  ] }),
  t ? /* @__PURE__ */ e("div", { className: _("actions"), children: t }) : null
] }), W = "_root_11f0r_3", q = "_backdrop_11f0r_68", H = "_content_11f0r_85", L = "_footer_11f0r_94", M = "_title_11f0r_108", a = {
  root: W,
  "placement-bottom": "_placement-bottom_11f0r_30",
  "placement-left": "_placement-left_11f0r_34",
  "placement-right": "_placement-right_11f0r_38",
  "placement-top": "_placement-top_11f0r_42",
  "size-sm": "_size-sm_11f0r_46",
  "size-md": "_size-md_11f0r_49",
  "size-lg": "_size-lg_11f0r_52",
  backdrop: q,
  "drawer-hide-on-interact-outside": "_drawer-hide-on-interact-outside_11f0r_79",
  content: H,
  footer: L,
  title: M,
  "drawer-close": "_drawer-close_11f0r_120"
}, J = n(a), N = p(
  ({ hideOnInteractOutside: t = !0, ...r }, s) => /* @__PURE__ */ e(
    "div",
    {
      className: J("backdrop", t && "drawer-hide-on-interact-outside"),
      ref: s,
      ...r
    }
  )
), K = n(a), v = ({ className: t }) => /* @__PURE__ */ e(
  T,
  {
    render: (r) => /* @__PURE__ */ e(j, { className: K("drawer-close", t), ...r })
  }
), Q = n(a), U = p(({ className: t, ...r }, s) => /* @__PURE__ */ e("div", { className: Q("content", t), ref: s, ...r })), V = n(a), X = p(({ className: t, ...r }, s) => /* @__PURE__ */ e("div", { className: V("footer", t), ref: s, ...r })), Y = n(a), Z = ({ children: t, className: r, ...s }) => /* @__PURE__ */ e("div", { className: Y("title", r), ...s, children: /* @__PURE__ */ e(x, { className: "w-full", variant: "h3", children: t }) }), $ = b(
  ({ as: t, store: r, ...s }, o) => /* @__PURE__ */ e(F, { ref: o, render: t ? /* @__PURE__ */ e(t, {}) : void 0, store: r, ...s })
), G = n(a), ee = p(
  ({
    children: t,
    className: r,
    hideOnInteractOutside: s = !0,
    placement: o = "right",
    size: c = "lg",
    store: i,
    withBackdrop: m = !1,
    withCloseButton: l = !0,
    ...w
  }, u) => /* @__PURE__ */ e(
    A,
    {
      backdrop: m ? /* @__PURE__ */ e(N, { hideOnInteractOutside: s }) : !1,
      hideOnInteractOutside: s,
      modal: m,
      ref: u,
      render: /* @__PURE__ */ e("div", { className: G("root", `placement-${o}`, `size-${c}`, r) }),
      store: i,
      ...w,
      children: /* @__PURE__ */ f(y, { children: [
        l ? /* @__PURE__ */ e(v, {}) : null,
        t
      ] })
    }
  )
), te = Object.assign(ee, {
  Backdrop: N,
  Close: v,
  Content: U,
  Footer: X,
  Title: Z,
  Trigger: $
}), we = Object.assign(E, { Header: S, Trigger: $ });
export {
  we as AssetDrawer,
  te as Drawer,
  ge as useDrawer
};