welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
258 lines (257 loc) • 7.76 kB
JavaScript
"use client";
import './Drawer.css';
import { jsx as e, jsxs as d, Fragment as O } from "react/jsx-runtime";
import { D as R } from "./Z32PU2LQ-DMjfxuT9.js";
import { u as ve } from "./Z32PU2LQ-DMjfxuT9.js";
import { useCallback as y, forwardRef as p } from "react";
import { Window as l } from "./Window.js";
import { c as o } from "./index-B6iGEm-i.js";
import { f as W } from "./forwardRefWithAs-8eP3ZN15.js";
import { Button as Z } from "./Button.js";
import { Icon as $ } from "./Icon.js";
import { Text as v } from "./Text.js";
import { D as J } from "./OCCHVUS4-BJVLPRH8.js";
import { D as K } from "./APVORPDK-i7Z_eBMP.js";
const L = "_content_t51i3_14", Q = "_title_t51i3_68", k = {
"asset-drawer": "_asset-drawer_t51i3_3",
"content-wrapper": "_content-wrapper_t51i3_14",
"content-max-width": "_content-max-width_t51i3_25",
content: L,
"asset-drawer-header": "_asset-drawer-header_t51i3_40",
"back-button": "_back-button_t51i3_58",
title: Q,
"icon-block": "_icon-block_t51i3_76",
"size-md": "_size-md_t51i3_88",
"size-sm": "_size-sm_t51i3_91",
"icon-element": "_icon-element_t51i3_94"
}, f = o(k), F = W(
({
children: t,
className: r,
getPersistentElements: s,
hideOnInteractOutside: a = !0,
maxWidth: n,
store: i,
..._
}, h) => {
const c = y(
() => Array.from(
s ? s() : document.querySelectorAll("[data-wui-persistent]")
),
[s]
), x = y(
(N) => {
if (!a) return !1;
const u = N.target;
return !c().some(
(b) => b.contains(u)
);
},
[c, a]
), g = typeof n == "number" ? `${n}px` : n;
return /* @__PURE__ */ e(
ce,
{
autoFocusOnShow: !1,
className: f("asset-drawer", r),
getPersistentElements: c,
hideOnInteractOutside: x,
placement: "bottom",
ref: h,
store: i,
withBackdrop: !0,
..._,
children: /* @__PURE__ */ e("div", { className: f("content-wrapper"), children: /* @__PURE__ */ e(
"div",
{
className: f("content-max-width"),
style: { "--assetDrawerContentMaxWidth": g },
children: /* @__PURE__ */ e("div", { className: f("content"), children: t })
}
) })
}
);
}
);
F.displayName = "AssetDrawer";
const B = o(k), U = { md: "lg", sm: "md" }, H = ({ iconName: t, size: r = "md" }) => /* @__PURE__ */ e("div", { className: B("icon-block", `size-${r}`), children: /* @__PURE__ */ e($, { className: B("icon-element"), name: t, size: U[r] }) });
H.displayName = "AssetDrawer.IconBlock";
const w = o(k), P = ({
action: t,
className: r,
iconName: s,
onBackButtonClick: a,
subtitle: n,
title: i
}) => /* @__PURE__ */ d("div", { className: w("asset-drawer-header", r), children: [
/* @__PURE__ */ d("div", { className: w("back-button"), children: [
!!a && /* @__PURE__ */ e(Z, { onClick: a, variant: "tertiary", children: /* @__PURE__ */ e($, { name: "arrow-left" }) }),
!!s && /* @__PURE__ */ e(H, { iconName: s }),
/* @__PURE__ */ d("div", { className: w("title"), children: [
/* @__PURE__ */ e(v, { as: "h3", variant: "heading-lg", children: i }),
n
] })
] }),
t ? /* @__PURE__ */ e("div", { className: w("actions"), children: t }) : null
] });
P.displayName = "AssetDrawer.Header";
const V = "_root_hxy3b_3", X = "_fullscreen_hxy3b_124", Y = "_media_hxy3b_142", G = "_backdrop_hxy3b_152", ee = "_content_hxy3b_166", te = "_footer_hxy3b_181", re = "_title_hxy3b_200", m = {
root: V,
"drawer-close": "_drawer-close_hxy3b_44",
"placement-bottom": "_placement-bottom_hxy3b_53",
"placement-left": "_placement-left_hxy3b_57",
"placement-right": "_placement-right_hxy3b_61",
"placement-top": "_placement-top_hxy3b_65",
"size-sm": "_size-sm_hxy3b_69",
"size-md": "_size-md_hxy3b_72",
"size-lg": "_size-lg_hxy3b_75",
fullscreen: X,
media: Y,
backdrop: G,
"drawer-hide-on-interact-outside": "_drawer-hide-on-interact-outside_hxy3b_160",
content: ee,
"content-header": "_content-header_hxy3b_171",
"content-header-subtitle": "_content-header-subtitle_hxy3b_177",
footer: te,
"variant-right": "_variant-right_hxy3b_192",
"variant-full": "_variant-full_hxy3b_196",
title: re
}, se = o(m), z = p(
({ hideOnInteractOutside: t = !0, ...r }, s) => /* @__PURE__ */ e(
"div",
{
className: se("backdrop", t && "drawer-hide-on-interact-outside"),
ref: s,
...r
}
)
);
z.displayName = "Drawer.Backdrop";
const ae = o(m), C = ({ className: t }) => /* @__PURE__ */ e(
J,
{
render: (r) => /* @__PURE__ */ e(
l.Header.CloseButton,
{
"aria-label": "Close",
className: ae("drawer-close", t),
...r
}
)
}
);
C.displayName = "Drawer.Close";
const D = o(m), E = p(
({ children: t, className: r, iconName: s, subtitle: a, title: n, ...i }, _) => {
const h = !!(s || n);
return /* @__PURE__ */ d("div", { className: D("content", r), ref: _, ...i, children: [
h ? /* @__PURE__ */ d("div", { className: D("content-header"), children: [
s ? /* @__PURE__ */ e($, { name: s, size: "lg" }) : null,
n ? /* @__PURE__ */ e(v, { variant: "heading-md-strong", children: n }) : null
] }) : null,
a ? /* @__PURE__ */ e(v, { className: D("content-header-subtitle"), variant: "body-lg", children: a }) : null,
t
] });
}
);
E.displayName = "Drawer.Content";
const ne = o(m), M = p(
({ className: t, variant: r = "right", ...s }, a) => /* @__PURE__ */ e("div", { className: ne("footer", `variant-${r}`, t), ref: a, ...s })
);
M.displayName = "Drawer.Footer";
const oe = o(m), j = p(
({ className: t, ...r }, s) => /* @__PURE__ */ e(l.Media, { className: oe("media", t), ref: s, ...r })
);
j.displayName = "Drawer.Media";
const T = W(
({ as: t, store: r, ...s }, a) => /* @__PURE__ */ e(
K,
{
ref: a,
render: t ? /* @__PURE__ */ e(t, {}) : void 0,
store: r,
...s
}
)
);
T.displayName = "Drawer.Trigger";
const ie = o(m), I = p(
({
children: t,
className: r,
fullscreen: s = !1,
getPersistentElements: a,
hideOnInteractOutside: n = !0,
placement: i = "right",
size: _ = "lg",
store: h,
withBackdrop: c = !1,
withCloseButton: x = !0,
...g
}, N) => {
const u = y(
() => Array.from(
a ? a() : document.querySelectorAll("[data-wui-persistent]")
),
[a]
), A = y(
(b) => {
if (!n) return !1;
if (typeof n == "function")
return n(b);
const S = b.target;
return !u().some(
(q) => q.contains(S)
);
},
[u, n]
);
return /* @__PURE__ */ e(
R,
{
backdrop: c ? /* @__PURE__ */ e(z, { hideOnInteractOutside: n }) : !1,
getPersistentElements: u,
hideOnInteractOutside: A,
modal: c,
ref: N,
render: /* @__PURE__ */ e(
"div",
{
className: ie(
"root",
`placement-${i}`,
`size-${_}`,
s && "fullscreen",
r
)
}
),
store: h,
...g,
children: /* @__PURE__ */ d(O, { children: [
x ? /* @__PURE__ */ e(C, {}) : null,
t
] })
}
);
}
);
I.displayName = "Drawer";
const ce = Object.assign(I, {
Backdrop: z,
Body: l.Body,
BoxText: l.BoxText,
Close: C,
Content: E,
Footer: M,
Header: l.Header,
Media: j,
Trigger: T,
WindowTabPanel: l.TabPanel
}), ge = Object.assign(F, { Header: P, Trigger: T });
export {
ge as AssetDrawer,
ce as Drawer,
m as drawerClasses,
ve as useDrawer
};