@orioncactuscorp/ui 1.0.0

package/dist/components/Modal/Modal.js

@@ -0,0 +1,628 @@
+'use client';
+import { jsx as i, jsxs as Q } from "react/jsx-runtime";
+import { useCallback as M, useEffect as V, useRef as D, useState as x, useMemo as de } from "react";
+import { Dialog as P } from "@base-ui-components/react/dialog";
+import me from "@orioncactuscorp/icons/orioncactus/CloseThick";
+import pe from "../Background/Background.js";
+import fe from "../BackgroundIconButton/BackgroundIconButton.js";
+import { ScrollArea as he, ScrollAreaContainer as be } from "../ScrollArea/ScrollArea.js";
+import { useModalContext as X, ModalProvider as ge } from "./contexts.js";
+import { useControllableState as ye } from "./useControllableState.js";
+import { useMeasuredElement as se } from "./useElementSize.js";
+import { useModalDrag as ve } from "./useModalDrag.js";
+import { useModalPlacement as ke } from "./useModalPlacement.js";
+import { useModalStackDepth as Ce } from "./useModalStackDepth.js";
+import { getModalScrollState as Ne } from "./modalScrollArbitration.js";
+import { resolveModalSnapMetrics as Se, resolveModalPopupSnapPositions as Me } from "./snapPoints.js";
+import l from "./Modal.module.scss.js";
+function T(...e) {
+  return e.filter(Boolean).join(" ");
+}
+function we(e) {
+  return e != null && e !== !1 && e !== "";
+}
+function ne(e, t) {
+  typeof e == "function" ? e(t) : e && (e.current = t);
+}
+function Fe(e) {
+  const t = e.trim();
+  return t.endsWith("ms") ? Number.parseFloat(t) || 0 : t.endsWith("s") ? (Number.parseFloat(t) || 0) * 1e3 : 0;
+}
+function le(e) {
+  return e.split(",").reduce((t, n) => Math.max(t, Fe(n)), 0);
+}
+function Re(e) {
+  const t = window.getComputedStyle(e), n = le(t.animationDuration), a = le(t.animationDelay);
+  return n + a + 250;
+}
+function Te({
+  defaultSnapPosition: e,
+  node: t,
+  snapPositions: n
+}) {
+  if (!n?.length) return;
+  const a = Me({
+    defaultSnapPosition: e,
+    snapPositions: n,
+    surfaceMotion: t
+  });
+  a && (t.style.setProperty(
+    "--oc-modal-translate-x",
+    `${a.defaultTarget.x}px`
+  ), t.style.setProperty(
+    "--oc-modal-translate-y",
+    `${a.defaultTarget.y}px`
+  ));
+}
+function He(e) {
+  if (e && typeof e == "object" && "reason" in e && typeof e.reason == "string")
+    return e.reason;
+}
+function re(e) {
+  e && typeof e == "object" && "cancel" in e && typeof e.cancel == "function" && e.cancel();
+}
+function Ae(e, t) {
+  switch (t) {
+    case "drag-dismiss":
+      return e?.drag ?? "auto";
+    case "backdrop-press":
+      return e?.backdrop ?? "auto";
+    case "outside-press":
+      return e?.outsidePress ?? "auto";
+    case "escape-key":
+      return e?.escape ?? "auto";
+    case "focus-out":
+      return e?.focusOut ?? "auto";
+    case "close-button":
+      return e?.closeButton ?? "auto";
+    case "programmatic":
+      return e?.programmatic ?? "auto";
+  }
+}
+function xe(e, t) {
+  return t > 0 && (e === "drag-dismiss" || e === "backdrop-press" || e === "outside-press");
+}
+function Pe(e) {
+  switch (He(e)) {
+    case "close-press":
+      return "close-button";
+    case "outside-press":
+      return "outside-press";
+    case "escape-key":
+      return "escape-key";
+    case "focus-out":
+      return "focus-out";
+    case "imperative-action":
+      return "programmatic";
+    default:
+      return "programmatic";
+  }
+}
+function ie({
+  children: e,
+  open: t,
+  defaultOpen: n,
+  modal: a = !0,
+  onOpenChange: m,
+  canCloseAttempt: p,
+  onCloseAttempt: g,
+  presentationState: f,
+  defaultPresentationState: h = "visible",
+  onPresentationStateChange: y,
+  disablePointerDismissal: d,
+  navigationDepth: v = 0,
+  dismissBehavior: c
+}) {
+  const C = t !== void 0, [j, E] = x(
+    n ?? !1
+  ), z = C ? t : j, [W, o] = x("bottom"), [B, U] = x(!1), [_, u] = x(!1), [q, Y] = x(0), [G, J] = x(null), [$, N] = x({
+    canScroll: !1,
+    scrolledFromTop: !1,
+    scrolledToBottom: !0
+  }), [b, K] = ye({
+    value: f,
+    defaultValue: h,
+    onChange: y
+  }), w = se(), L = se(), H = Math.max(0, v), A = M(
+    (r, s) => {
+      C || E(r), m?.(r, s);
+    },
+    [m, C]
+  ), S = M(
+    (r = { reason: "programmatic" }) => p?.(r) !== !1,
+    [p]
+  ), F = M(
+    (r = { reason: "programmatic" }) => {
+      Y((s) => s + 1);
+    },
+    []
+  ), k = M(
+    (r = { reason: "programmatic" }) => {
+      const s = Ae(c, r.reason);
+      return s === "allow" ? !0 : s === "block" ? !1 : !xe(r.reason, H);
+    },
+    [c, H]
+  ), O = M(
+    (r = { reason: "programmatic" }, s = {}) => {
+      const { commit: R = !0, skipAttempt: I = !1 } = s;
+      return !I && !k(r) || !I && !S(r) || !I && g?.(r) === !1 ? (re(r.eventDetails), F(r), !1) : (R && A(!1, r.eventDetails), !0);
+    },
+    [
+      S,
+      k,
+      A,
+      F,
+      g
+    ]
+  ), te = M(
+    (r, s) => {
+      if (r && b === "peeked" && K("visible"), !r) {
+        O({
+          reason: Pe(s),
+          eventDetails: s
+        });
+        return;
+      }
+      A(r, s);
+    },
+    [A, b, O, K]
+  ), oe = b === "visible" ? a : !1, ae = d || W === "bottom" && B, Z = de(
+    () => ({
+      open: z,
+      placement: W,
+      setPlacement: o,
+      presentationState: b,
+      setPresentationState: K,
+      requestClose: O,
+      canDismissByBehavior: k,
+      canCloseAttempt: S,
+      closeAttemptFeedbackKey: q,
+      notifyCloseAttemptRejected: F,
+      disablePointerDismissal: d ?? !1,
+      canPeek: B,
+      setCanPeek: U,
+      canRenderHandle: _,
+      setCanRenderHandle: u,
+      headerHeight: w.height,
+      footerHeight: L.height,
+      setHeaderNode: w.setNode,
+      setFooterNode: L.setNode,
+      bodyNode: G,
+      setBodyNode: J,
+      scrollState: $,
+      setScrollState: N
+    }),
+    [
+      G,
+      B,
+      _,
+      k,
+      S,
+      q,
+      L.height,
+      L.setNode,
+      w.height,
+      w.setNode,
+      F,
+      z,
+      W,
+      O,
+      $,
+      d,
+      b,
+      K
+    ]
+  );
+  return /* @__PURE__ */ i(ge, { value: Z, children: /* @__PURE__ */ i(
+    P.Root,
+    {
+      open: z,
+      modal: oe,
+      onOpenChange: te,
+      disablePointerDismissal: ae,
+      children: e
+    }
+  ) });
+}
+function Be({
+  className: e = "",
+  children: t,
+  render: n,
+  nativeButton: a
+}) {
+  return n ? /* @__PURE__ */ i(
+    P.Trigger,
+    {
+      render: n,
+      nativeButton: a,
+      "data-oc-component": "modal-trigger",
+      children: t
+    }
+  ) : /* @__PURE__ */ i(
+    P.Trigger,
+    {
+      className: T(l.trigger, e),
+      nativeButton: a,
+      "data-oc-component": "modal-trigger",
+      children: t
+    }
+  );
+}
+function De({
+  className: e = "",
+  children: t,
+  variant: n = "adaptive",
+  size: a = "medium",
+  resize: m = "hug",
+  drag: p = "content",
+  peekable: g = !1,
+  snapPoints: f,
+  defaultSnapPoint: h,
+  snapPositions: y,
+  defaultSnapPosition: d,
+  initialFocus: v,
+  peekHeight: c,
+  closeThreshold: C,
+  scrollLockTimeout: j,
+  container: E,
+  style: z,
+  ...W
+}) {
+  const o = X("ModalContent"), { setCanPeek: B, setCanRenderHandle: U, setPlacement: _ } = o, u = ke(n), q = D(null), Y = D(null), G = D(null), J = D(null), $ = D(0), N = D(null), b = D(null), [K, w] = x(), L = p === "handle" || p === "content", H = u === "popup" && p === "content" && !!y?.length, A = (u === "bottom" || H) && L, S = u === "bottom" && A && g, F = S && c !== void 0 ? c : o.headerHeight > 0 ? o.headerHeight : void 0, k = de(() => {
+    if (!(!f?.length || typeof window > "u"))
+      return Se({
+        snapPoints: f,
+        defaultSnapPoint: h,
+        viewportHeight: window.innerHeight
+      });
+  }, [h, f]), O = Ce(o.open);
+  V(() => {
+    _(u);
+  }, [u, _]), V(() => {
+    o.open || (J.current = null);
+  }, [o.open]), V(() => (B(S), () => B(!1)), [S, B]), V(() => (U(A), () => U(!1)), [A, U]);
+  const te = ve({
+    enabled: p !== !1,
+    drag: p,
+    open: o.open,
+    placement: u,
+    surfaceMotionRef: q,
+    backdropRef: G,
+    bodyNode: o.bodyNode,
+    snapHeights: k?.snapHeights,
+    peekHeight: S ? c : void 0,
+    peekFallback: S ? "header" : void 0,
+    presentationState: o.presentationState,
+    setPresentationState: o.setPresentationState,
+    requestClose: o.requestClose,
+    canCloseAttempt: o.canCloseAttempt,
+    dismissible: !o.disablePointerDismissal && o.canDismissByBehavior({ reason: "drag-dismiss" }),
+    visibleTranslate: k?.visibleTranslate,
+    snapPositions: H ? y : void 0,
+    defaultSnapPosition: d,
+    closeThreshold: C,
+    scrollLockTimeout: j
+  }), oe = M(
+    (s) => {
+      q.current = s, s && o.open && H && J.current !== s && (Te({
+        defaultSnapPosition: d,
+        node: s,
+        snapPositions: y
+      }), J.current = s);
+    },
+    [H, o.open, d, y]
+  );
+  V(() => {
+    const s = o.closeAttemptFeedbackKey;
+    if (s === 0 || u !== "popup" || $.current === s) {
+      $.current = s, w(void 0);
+      return;
+    }
+    const R = Y.current;
+    if (!R) return;
+    $.current = s, N.current !== null && window.cancelAnimationFrame(N.current), b.current !== null && window.clearTimeout(b.current), w(void 0);
+    const I = () => {
+      w(void 0), b.current = null;
+    }, ee = (ce) => {
+      ce.target === R && ce.animationName === "oc-modal-reject-shake" && (R.removeEventListener("animationend", ee), b.current !== null && window.clearTimeout(b.current), I());
+    };
+    return R.addEventListener("animationend", ee), N.current = window.requestAnimationFrame(() => {
+      N.current = null, w("reject"), N.current = window.requestAnimationFrame(() => {
+        N.current = null, b.current = window.setTimeout(() => {
+          R.removeEventListener("animationend", ee), I();
+        }, Re(R));
+      });
+    }), () => {
+      R.removeEventListener("animationend", ee), N.current !== null && (window.cancelAnimationFrame(N.current), N.current = null), b.current !== null && (window.clearTimeout(b.current), b.current = null);
+    };
+  }, [o.closeAttemptFeedbackKey, u]);
+  const ae = {
+    ...o.headerHeight > 0 ? { "--oc-modal-header-height": `${o.headerHeight}px` } : {},
+    ...o.footerHeight > 0 ? { "--oc-modal-footer-height": `${o.footerHeight}px` } : {},
+    ...F !== void 0 ? { "--oc-modal-peek-height": `${F}px` } : {},
+    ...k?.sheetHeight !== void 0 ? { "--oc-modal-sheet-height": `${k.sheetHeight}px` } : {},
+    ...k?.visibleTranslate !== void 0 ? {
+      "--oc-modal-translate-y": `${k.visibleTranslate}px`
+    } : {}
+  }, Z = {
+    // Each modal reserves one backdrop slot and one viewport slot.
+    "--oc-modal-stack-offset": O * 2
+  }, r = v === "content" ? q : v;
+  return /* @__PURE__ */ Q(P.Portal, { container: E, children: [
+    /* @__PURE__ */ i(
+      P.Backdrop,
+      {
+        ref: G,
+        className: l.backdrop,
+        "data-oc-part": "backdrop",
+        "data-oc-component": "modal-backdrop",
+        "data-oc-modal-placement": u,
+        "data-oc-modal-presentation-state": o.presentationState,
+        style: Z,
+        onClick: () => {
+          if (o.disablePointerDismissal) {
+            o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
+            return;
+          }
+          if (!o.canDismissByBehavior({ reason: "backdrop-press" })) {
+            o.notifyCloseAttemptRejected({ reason: "backdrop-press" });
+            return;
+          }
+          if (u === "bottom" && S) {
+            o.presentationState === "visible" && o.setPresentationState("peeked");
+            return;
+          }
+          o.requestClose({ reason: "backdrop-press" });
+        }
+      }
+    ),
+    /* @__PURE__ */ Q(
+      P.Viewport,
+      {
+        className: l.viewport,
+        "data-oc-part": "viewport",
+        "data-oc-component": "modal-viewport",
+        "data-oc-modal-placement": u,
+        style: Z,
+        children: [
+          u === "bottom" ? /* @__PURE__ */ i(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: T(l.bottomFill, l[a]),
+              "data-oc-part": "bottom-fill",
+              "data-oc-component": "modal-bottom-fill",
+              "data-oc-size": a
+            }
+          ) : null,
+          /* @__PURE__ */ i(
+            P.Popup,
+            {
+              ...W,
+              ...te,
+              ref: oe,
+              initialFocus: r,
+              className: T(l.surfaceMotion, l[a]),
+              "data-oc-part": "surface-motion",
+              "data-oc-component": "modal-content",
+              "data-oc-variant": n,
+              "data-oc-size": a,
+              "data-oc-resize": m,
+              "data-oc-modal-feedback": u === "popup" ? K : void 0,
+              "data-oc-modal-placement": u,
+              "data-oc-modal-snapping": k || H ? "true" : void 0,
+              style: ae,
+              children: /* @__PURE__ */ i(
+                "div",
+                {
+                  ref: Y,
+                  className: T(
+                    l.surface,
+                    l[m],
+                    e
+                  ),
+                  "data-oc-part": "surface",
+                  "data-oc-variant": n,
+                  "data-oc-size": a,
+                  "data-oc-resize": m,
+                  "data-oc-modal-placement": u,
+                  style: z,
+                  children: t
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function je({
+  className: e = "",
+  title: t,
+  children: n,
+  leadingContent: a,
+  trailingContent: m,
+  closeLabel: p = "닫기",
+  closeButton: g = !0,
+  handle: f = !0,
+  ref: h,
+  ...y
+}) {
+  const d = X("ModalHeader"), { setHeaderNode: v, scrollState: c } = d, C = M(
+    (E) => {
+      v(E), ne(h, E);
+    },
+    [h, v]
+  ), j = we(a);
+  return /* @__PURE__ */ Q(
+    pe,
+    {
+      ...y,
+      as: "header",
+      ref: C,
+      backdrop: "compact",
+      className: T(l.header, e),
+      backColor: "var(--oc-color-theme-background-elevated-normal)",
+      frontColor: "transparent",
+      "data-oc-part": "header",
+      "data-oc-component": "modal-header",
+      variant: "strong",
+      "data-oc-sticky": c.scrolledFromTop ? "true" : "false",
+      children: [
+        f && d.canRenderHandle ? /* @__PURE__ */ i(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: l.handle,
+            "data-oc-part": "handle"
+          }
+        ) : null,
+        /* @__PURE__ */ Q(
+          "div",
+          {
+            className: l.headerInner,
+            "data-oc-has-leading": j ? "true" : "false",
+            "data-oc-part": "header-inner",
+            children: [
+              j ? /* @__PURE__ */ i("div", { className: l.headerLeading, "data-oc-part": "header-leading", children: a }) : null,
+              /* @__PURE__ */ i("div", { className: l.headerTitle, "data-oc-part": "header-title", children: t ? /* @__PURE__ */ i(P.Title, { children: t }) : n }),
+              /* @__PURE__ */ Q("div", { className: l.headerTrailing, "data-oc-part": "header-trailing", children: [
+                m,
+                g ? /* @__PURE__ */ i(ue, { label: p }) : null
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function Ee({
+  className: e = "",
+  children: t,
+  containerClassName: n = "",
+  containerProps: a,
+  ref: m,
+  ...p
+}) {
+  const g = X("ModalBody"), { bodyNode: f, setBodyNode: h, setScrollState: y } = g, d = M(
+    (c) => {
+      y(Ne(c));
+    },
+    [y]
+  ), v = M(
+    (c) => {
+      h(c), ne(m, c), d(c);
+    },
+    [m, h, d]
+  );
+  return V(() => {
+    const c = f;
+    if (!c || (d(c), typeof ResizeObserver > "u")) return;
+    const C = new ResizeObserver(() => d(c));
+    return C.observe(c), c.firstElementChild && C.observe(c.firstElementChild), () => C.disconnect();
+  }, [f, d]), /* @__PURE__ */ i(
+    he,
+    {
+      ...p,
+      className: T(l.body, e),
+      "data-oc-part": "body",
+      "data-oc-component": "modal-body",
+      children: /* @__PURE__ */ i(
+        be,
+        {
+          ref: v,
+          className: l.bodyContainer,
+          "data-oc-part": "body-container",
+          "data-oc-component": "modal-body-container",
+          onScroll: (c) => {
+            a?.onScroll?.(c), d(c.currentTarget);
+          },
+          children: /* @__PURE__ */ i(
+            "section",
+            {
+              ...a,
+              className: T(l.bodyContent, n),
+              "data-oc-part": "body-content",
+              "data-oc-component": "modal-body-content",
+              children: t
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function qe({
+  className: e = "",
+  children: t,
+  background: n = "auto",
+  ref: a,
+  ...m
+}) {
+  const p = X("ModalFooter"), { scrollState: g, setFooterNode: f } = p, h = M(
+    (v) => {
+      f(v), ne(a, v);
+    },
+    [a, f]
+  ), y = n === !0 || n === "auto" && g.canScroll && !g.scrolledToBottom;
+  return /* @__PURE__ */ i(
+    "footer",
+    {
+      ...m,
+      ref: h,
+      className: T(l.footer, e),
+      "data-oc-part": "footer",
+      "data-oc-component": "modal-footer",
+      "data-oc-background": y ? "true" : "false",
+      children: t
+    }
+  );
+}
+function ue({
+  className: e = "",
+  children: t = /* @__PURE__ */ i(me, {}),
+  label: n = "닫기",
+  size: a = 24,
+  disabled: m,
+  onClick: p,
+  ...g
+}) {
+  const f = X("ModalClose");
+  return /* @__PURE__ */ i(
+    fe,
+    {
+      ...g,
+      className: T(l.close, e),
+      "aria-label": g["aria-label"] ?? n,
+      "data-oc-part": "close",
+      "data-oc-component": "modal-close",
+      disabled: m,
+      onClick: (h) => {
+        p?.(h), !h.defaultPrevented && !m && f.requestClose({ reason: "close-button" });
+      },
+      size: a,
+      children: t
+    }
+  );
+}
+const et = Object.assign(ie, {
+  Root: ie,
+  Trigger: Be,
+  Content: De,
+  Header: je,
+  Body: Ee,
+  Footer: qe,
+  Close: ue
+});
+export {
+  Ee as ModalBody,
+  ue as ModalClose,
+  De as ModalContent,
+  qe as ModalFooter,
+  je as ModalHeader,
+  ie as ModalRoot,
+  Be as ModalTrigger,
+  et as default
+};

package/dist/components/Modal/Modal.module.scss.js

@@ -0,0 +1,48 @@
+import './Modal.css';const o = "oc-Modal-module__trigger__B-N3y", e = "oc-Modal-module__backdrop__jYpTA", d = "oc-Modal-module__viewport__8dW9u", _ = "oc-Modal-module__surfaceMotion__fJnTQ", l = "oc-Modal-module__bottomFill__wKrvv", a = "oc-Modal-module__surface__FnAX8", c = "oc-Modal-module__header__NS30G", t = "oc-Modal-module__footer__Oyz-R", n = "oc-Modal-module__small__qdBEU", r = "oc-Modal-module__medium__JRDXg", s = "oc-Modal-module__large__O42Af", m = "oc-Modal-module__fixed__Gj1Dv", i = "oc-Modal-module__handle__Fan4V", u = "oc-Modal-module__headerInner__F5nxn", M = "oc-Modal-module__headerLeading__v735-", h = "oc-Modal-module__headerTrailing__hQamr", g = "oc-Modal-module__headerTitle__tJ2Qv", f = "oc-Modal-module__close__058gy", b = "oc-Modal-module__body__3zIj9", y = "oc-Modal-module__bodyContainer__t57Y6", p = "oc-Modal-module__bodyContent__fRK23", v = {
+  trigger: o,
+  backdrop: e,
+  viewport: d,
+  surfaceMotion: _,
+  bottomFill: l,
+  surface: a,
+  "oc-modal-reject-shake": "oc-Modal-module__oc-modal-reject-shake__RJrNe",
+  header: c,
+  footer: t,
+  small: n,
+  medium: r,
+  large: s,
+  fixed: m,
+  handle: i,
+  headerInner: u,
+  headerLeading: M,
+  headerTrailing: h,
+  headerTitle: g,
+  close: f,
+  body: b,
+  bodyContainer: y,
+  bodyContent: p
+};
+export {
+  e as backdrop,
+  b as body,
+  y as bodyContainer,
+  p as bodyContent,
+  l as bottomFill,
+  f as close,
+  v as default,
+  m as fixed,
+  t as footer,
+  i as handle,
+  c as header,
+  u as headerInner,
+  M as headerLeading,
+  g as headerTitle,
+  h as headerTrailing,
+  s as large,
+  r as medium,
+  n as small,
+  a as surface,
+  _ as surfaceMotion,
+  o as trigger,
+  d as viewport
+};

package/dist/components/Modal/contexts.js

@@ -0,0 +1,14 @@
+import { useContext as r, createContext as n } from "react";
+const t = n(null), i = t.Provider;
+function s(e) {
+  const o = r(t);
+  if (!o)
+    throw new Error(
+      `[@orioncactuscorp/ui] ${e} must be used inside ModalRoot.`
+    );
+  return o;
+}
+export {
+  i as ModalProvider,
+  s as useModalContext
+};