seam-react 0.0.0-stage → 0.2.0

package/dist/index.js

@@ -0,0 +1,630 @@
+import { jsxs as N, jsx as l } from "react/jsx-runtime";
+import { forwardRef as y, useId as L, useRef as M, useEffect as R, useMemo as F, createContext as j, useContext as B, isValidElement as se, cloneElement as K, useSyncExternalStore as ce, useState as $, useLayoutEffect as le } from "react";
+import { useReducedMotion as S, useMotionValue as ue, animate as V, motion as A, MotionConfig as de, AnimatePresence as fe, useIsPresent as pe } from "motion/react";
+import { createPortal as ge } from "react-dom";
+import { useControllableState as H, useEventCallback as be, useLockBodyScroll as he, useFocusTrap as me } from "seam-hooks";
+function h(...o) {
+  return o.filter(Boolean).join(" ");
+}
+const Y = y(function({
+  variant: e = "primary",
+  size: n = "md",
+  loading: r = !1,
+  iconOnly: a = !1,
+  type: s = "button",
+  className: i,
+  children: d,
+  ...u
+}, c) {
+  return /* @__PURE__ */ N(
+    "button",
+    {
+      ...u,
+      ref: c,
+      type: s,
+      className: h("uk-button", i),
+      "data-variant": e,
+      "data-size": n,
+      "data-loading": r ? "true" : void 0,
+      "data-icon-only": a ? "true" : void 0,
+      disabled: u.disabled || r,
+      "aria-busy": r || void 0,
+      children: [
+        r ? /* @__PURE__ */ l("span", { className: "uk-button__spinner", "aria-hidden": "true" }) : null,
+        d
+      ]
+    }
+  );
+}), Ae = y(function({
+  inputSize: e = "md",
+  invalid: n = !1,
+  className: r,
+  "aria-invalid": a,
+  ...s
+}, i) {
+  return /* @__PURE__ */ l(
+    "input",
+    {
+      ...s,
+      ref: i,
+      className: h("uk-input", r),
+      "data-size": e,
+      "aria-invalid": n ? !0 : a
+    }
+  );
+}), Ie = [0.23, 1, 0.32, 1], U = {
+  type: "spring",
+  bounce: 0,
+  duration: 0.3
+}, X = {
+  type: "spring",
+  bounce: 0.04,
+  duration: 0.38
+}, ye = {
+  type: "spring",
+  bounce: 0.08,
+  duration: 0.34
+}, z = {
+  duration: 0.12,
+  ease: Ie
+}, He = y(function({
+  checked: e,
+  defaultChecked: n,
+  onCheckedChange: r,
+  disabled: a,
+  className: s,
+  children: i,
+  id: d,
+  ...u
+}, c) {
+  const p = L(), g = d ?? p, k = S() ?? !1, b = M(!1), m = M(null), [C, _] = H({
+    value: e,
+    defaultValue: n ?? !1,
+    onChange: r
+  }), D = ue(C ? 16 : 0);
+  R(() => {
+    if (m.current)
+      return;
+    const t = V(
+      D,
+      C ? 16 : 0,
+      k ? { duration: 0 } : U
+    );
+    return () => t.stop();
+  }, [C, k, D]);
+  const v = (t) => {
+    const f = m.current;
+    if (!(!f || f.pointerId !== t.pointerId)) {
+      if (f.moved) {
+        const T = f.samples[0], x = f.samples[f.samples.length - 1], E = T && x ? Math.max(x.time - T.time, 1) : 1, w = T && x ? (x.x - T.x) / E * 1e3 : 0, I = Math.abs(w) > 220 ? w > 0 : D.get() >= 8;
+        b.current = !0, m.current = null, _(I), V(
+          D,
+          I ? 16 : 0,
+          k ? { duration: 0 } : { ...U, velocity: w }
+        ), window.setTimeout(() => {
+          b.current = !1;
+        }, 0);
+      } else
+        m.current = null;
+      t.currentTarget.hasPointerCapture(t.pointerId) && typeof t.currentTarget.releasePointerCapture == "function" && t.currentTarget.releasePointerCapture(t.pointerId);
+    }
+  };
+  return /* @__PURE__ */ N(
+    "label",
+    {
+      className: h("uk-switch", s),
+      "data-disabled": a ? "true" : void 0,
+      htmlFor: g,
+      onClickCapture: (t) => {
+        b.current && (t.preventDefault(), t.stopPropagation());
+      },
+      children: [
+        /* @__PURE__ */ l(
+          "input",
+          {
+            ...u,
+            ref: c,
+            id: g,
+            type: "checkbox",
+            role: "switch",
+            className: "uk-switch__input",
+            checked: C,
+            disabled: a,
+            "aria-checked": C,
+            onChange: (t) => _(t.target.checked)
+          }
+        ),
+        /* @__PURE__ */ l(
+          "span",
+          {
+            className: "uk-switch__track",
+            "aria-hidden": "true",
+            onPointerDown: (t) => {
+              a || (m.current = {
+                pointerId: t.pointerId,
+                startX: t.clientX,
+                startValue: D.get(),
+                moved: !1,
+                samples: [{ x: t.clientX, time: performance.now() }]
+              }, typeof t.currentTarget.setPointerCapture == "function" && t.currentTarget.setPointerCapture(t.pointerId));
+            },
+            onPointerMove: (t) => {
+              const f = m.current;
+              if (!f || f.pointerId !== t.pointerId)
+                return;
+              const T = t.clientX - f.startX;
+              Math.abs(T) > 4 && (f.moved = !0), f.moved && (t.preventDefault(), D.set(Math.max(0, Math.min(16, f.startValue + T))), f.samples.push({ x: t.clientX, time: performance.now() }), f.samples = f.samples.filter(
+                (x) => performance.now() - x.time < 120
+              ));
+            },
+            onPointerUp: v,
+            onPointerCancel: v,
+            children: /* @__PURE__ */ l(A.span, { className: "uk-switch__thumb", style: { x: D } })
+          }
+        ),
+        i ? /* @__PURE__ */ l("span", { className: "uk-switch__label", children: i }) : null
+      ]
+    }
+  );
+}), G = j(null);
+function O(o) {
+  const e = B(G);
+  if (!e)
+    throw new Error(`<${o}> must be rendered inside <Tabs>`);
+  return e;
+}
+function W(o, e) {
+  return `${o}-tab-${encodeURIComponent(e)}`;
+}
+function J(o, e) {
+  return `${o}-panel-${encodeURIComponent(e)}`;
+}
+function ke({
+  value: o,
+  defaultValue: e,
+  onValueChange: n,
+  orientation: r = "horizontal",
+  className: a,
+  children: s
+}) {
+  const i = L(), [d, u] = H({
+    value: o,
+    defaultValue: e ?? "",
+    onChange: n
+  }), c = F(
+    () => ({
+      baseId: i,
+      value: d,
+      setValue: u,
+      orientation: r,
+      indicatorId: `${i}-indicator`
+    }),
+    [i, d, r, u]
+  );
+  return /* @__PURE__ */ l(G.Provider, { value: c, children: /* @__PURE__ */ l("div", { className: h("uk-tabs", a), "data-orientation": r, children: s }) });
+}
+const Ce = y(function({ className: e, onKeyDown: n, ...r }, a) {
+  const { orientation: s } = O("Tabs.List");
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ...r,
+      ref: a,
+      role: "tablist",
+      "aria-orientation": s,
+      tabIndex: -1,
+      className: h("uk-tabs__list", e),
+      onKeyDown: (i) => {
+        if (n?.(i), i.defaultPrevented)
+          return;
+        const u = i.target?.closest('[role="tab"]');
+        if (!u || u.hasAttribute("disabled"))
+          return;
+        const c = Array.from(
+          i.currentTarget.querySelectorAll(
+            '[role="tab"]:not([disabled])'
+          )
+        ), p = c.indexOf(u);
+        if (p === -1)
+          return;
+        const g = s === "horizontal" ? "ArrowRight" : "ArrowDown", k = s === "horizontal" ? "ArrowLeft" : "ArrowUp";
+        let b = -1;
+        switch (i.key) {
+          case g:
+            b = (p + 1) % c.length;
+            break;
+          case k:
+            b = (p - 1 + c.length) % c.length;
+            break;
+          case "Home":
+            b = 0;
+            break;
+          case "End":
+            b = c.length - 1;
+            break;
+          default:
+            return;
+        }
+        i.preventDefault();
+        const m = c[b];
+        m && (m.focus(), m.click());
+      }
+    }
+  );
+}), De = y(function({ value: e, type: n = "button", className: r, onClick: a, children: s, ...i }, d) {
+  const u = O("Tabs.Trigger"), c = u.value === e, p = S() ?? !1;
+  return /* @__PURE__ */ N(
+    "button",
+    {
+      ...i,
+      ref: d,
+      type: n,
+      role: "tab",
+      id: W(u.baseId, e),
+      "aria-selected": c,
+      "aria-controls": J(u.baseId, e),
+      tabIndex: c ? 0 : -1,
+      "data-state": c ? "active" : "inactive",
+      className: h("uk-tabs__trigger", r),
+      onClick: (g) => {
+        a?.(g), g.defaultPrevented || u.setValue(e);
+      },
+      children: [
+        s,
+        c ? /* @__PURE__ */ l(
+          A.span,
+          {
+            className: "uk-tabs__indicator",
+            layoutId: u.indicatorId,
+            "aria-hidden": "true",
+            transition: p ? { duration: 0 } : ye
+          }
+        ) : null
+      ]
+    }
+  );
+}), Te = y(function({ value: e, className: n, ...r }, a) {
+  const s = O("Tabs.Content"), i = s.value === e;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ...r,
+      ref: a,
+      role: "tabpanel",
+      id: J(s.baseId, e),
+      "aria-labelledby": W(s.baseId, e),
+      hidden: !i,
+      tabIndex: 0,
+      "data-state": i ? "active" : "inactive",
+      className: h("uk-tabs__panel", n)
+    }
+  );
+}), Oe = Object.assign(ke, {
+  List: Ce,
+  Trigger: De,
+  Content: Te
+}), Q = j(null), xe = () => () => {
+}, _e = () => !0, ve = () => !1;
+function P(o) {
+  const e = B(Q);
+  if (!e)
+    throw new Error(`<${o}> must be rendered inside <Dialog.Root>`);
+  return e;
+}
+function Z(o, e) {
+  return (n) => {
+    o?.(n), n.defaultPrevented || e(n);
+  };
+}
+function q({
+  children: o,
+  open: e,
+  defaultOpen: n,
+  onOpenChange: r
+}) {
+  const a = L(), [s, i] = $(!1), [d, u] = $(!1), [c, p] = H({
+    value: e,
+    defaultValue: n ?? !1,
+    onChange: r
+  }), g = F(
+    () => ({
+      open: c,
+      setOpen: p,
+      triggerId: `${a}-trigger`,
+      contentId: `${a}-content`,
+      titleId: `${a}-title`,
+      descriptionId: `${a}-description`,
+      hasTitle: s,
+      setHasTitle: i,
+      hasDescription: d,
+      setHasDescription: u
+    }),
+    [a, c, d, s, p]
+  );
+  return /* @__PURE__ */ l(Q.Provider, { value: g, children: o });
+}
+function we({ children: o }) {
+  const e = P("Dialog.Trigger"), n = o, r = n.props.onClick;
+  return K(n, {
+    id: e.triggerId,
+    "aria-haspopup": "dialog",
+    "aria-expanded": e.open,
+    "aria-controls": e.open ? e.contentId : void 0,
+    onClick: Z(r, () => {
+      e.setOpen(!e.open);
+    })
+  });
+}
+function ee({
+  children: o,
+  label: e = "Close"
+}) {
+  const n = P("Dialog.Close");
+  if (se(o)) {
+    const r = o, a = r.props.onClick;
+    return K(r, {
+      onClick: Z(a, () => {
+        n.setOpen(!1);
+      })
+    });
+  }
+  return /* @__PURE__ */ l(Y, { variant: "ghost", onClick: () => n.setOpen(!1), children: e });
+}
+const te = y(function({ className: e, ...n }, r) {
+  return /* @__PURE__ */ l(
+    "header",
+    {
+      ...n,
+      ref: r,
+      className: h("uk-dialog__header", e)
+    }
+  );
+}), ne = y(function({ className: e, children: n, ...r }, a) {
+  const s = P("Dialog.Title"), i = s.setHasTitle;
+  return R(() => (i(!0), () => i(!1)), [i]), /* @__PURE__ */ l(
+    "h2",
+    {
+      ...r,
+      ref: a,
+      id: s.titleId,
+      className: h("uk-dialog__title", e),
+      children: n
+    }
+  );
+}), re = y(
+  function({ className: e, ...n }, r) {
+    const a = P("Dialog.Description"), s = a.setHasDescription;
+    return R(() => (s(!0), () => s(!1)), [s]), /* @__PURE__ */ l(
+      "p",
+      {
+        ...n,
+        ref: r,
+        id: a.descriptionId,
+        className: h("uk-dialog__description", e)
+      }
+    );
+  }
+), oe = y(function({ className: e, ...n }, r) {
+  return /* @__PURE__ */ l("div", { ...n, ref: r, className: h("uk-dialog__body", e) });
+}), ae = y(function({ className: e, ...n }, r) {
+  return /* @__PURE__ */ l(
+    "footer",
+    {
+      ...n,
+      ref: r,
+      className: h("uk-dialog__footer", e)
+    }
+  );
+});
+function Ne({
+  requestClose: o,
+  contentId: e,
+  titleId: n,
+  descriptionId: r,
+  hasTitle: a,
+  hasDescription: s,
+  children: i,
+  closeOnBackdropClick: d = !0,
+  closeOnEscape: u = !0,
+  initialFocusRef: c,
+  returnFocusRef: p,
+  className: g,
+  "aria-label": k,
+  "aria-labelledby": b,
+  "aria-describedby": m
+}) {
+  const C = M(null), _ = M(null), D = pe(), v = S() ?? !1;
+  return he(!0), le(() => {
+    const t = C.current;
+    t && (_.current ?? (_.current = document.activeElement instanceof HTMLElement ? document.activeElement : null), !t.open && (typeof t.showModal == "function" ? t.showModal() : t.setAttribute("open", "")));
+  }, []), me({
+    active: !0,
+    containerRef: C,
+    initialFocusRef: c,
+    returnFocusRef: p ?? _
+  }), R(() => {
+    const t = C.current;
+    if (!t)
+      return;
+    const f = () => {
+      t.open || (typeof t.showModal == "function" ? t.showModal() : t.setAttribute("open", ""));
+    }, T = () => {
+      if (!u) {
+        f();
+        return;
+      }
+      o();
+    }, x = (I) => {
+      I.preventDefault(), u && o();
+    }, E = (I) => {
+      u || I.key !== "Escape" || I.defaultPrevented || (I.preventDefault(), I.stopPropagation());
+    }, w = (I) => {
+      d && I.target === t && o();
+    };
+    return t.addEventListener("close", T), t.addEventListener("cancel", x), t.addEventListener("keydown", E, !0), t.addEventListener("click", w), () => {
+      t.removeEventListener("close", T), t.removeEventListener("cancel", x), t.removeEventListener("keydown", E, !0), t.removeEventListener("click", w);
+    };
+  }, [d, u, o]), /* @__PURE__ */ l(
+    "dialog",
+    {
+      ref: C,
+      id: e,
+      className: h("uk-dialog", g),
+      closedby: u || d ? "any" : "none",
+      "data-state": D ? "open" : "closed",
+      inert: !D,
+      "aria-label": k,
+      "aria-labelledby": b ?? (k ? void 0 : a ? n : void 0),
+      "aria-describedby": m ?? (s ? r : void 0),
+      children: /* @__PURE__ */ l(
+        A.div,
+        {
+          className: "uk-dialog__panel",
+          initial: v ? { opacity: 0 } : {
+            opacity: 0,
+            transform: "translateY(12px) scale(0.96)"
+          },
+          animate: {
+            opacity: 1,
+            transform: "translateY(0px) scale(1)",
+            transition: v ? z : { ...X, delay: 0.06 }
+          },
+          exit: v ? { opacity: 0, transition: z } : {
+            opacity: 0,
+            transform: "translateY(8px) scale(0.97)",
+            transition: X
+          },
+          children: i
+        }
+      )
+    }
+  );
+}
+function ie({
+  children: o,
+  closeOnBackdropClick: e = !0,
+  closeOnEscape: n = !0,
+  initialFocusRef: r,
+  returnFocusRef: a,
+  className: s,
+  "aria-label": i,
+  "aria-labelledby": d,
+  "aria-describedby": u
+}) {
+  const c = P("Dialog.Content"), p = be(() => {
+    c.setOpen(!1);
+  });
+  return ce(
+    xe,
+    _e,
+    ve
+  ) ? ge(
+    /* @__PURE__ */ l(de, { reducedMotion: "user", children: /* @__PURE__ */ l(fe, { children: c.open ? /* @__PURE__ */ l(
+      Ne,
+      {
+        requestClose: p,
+        contentId: c.contentId,
+        titleId: c.titleId,
+        descriptionId: c.descriptionId,
+        hasTitle: c.hasTitle,
+        hasDescription: c.hasDescription,
+        closeOnBackdropClick: e,
+        closeOnEscape: n,
+        initialFocusRef: r,
+        returnFocusRef: a,
+        className: s,
+        "aria-label": i,
+        "aria-labelledby": d,
+        "aria-describedby": u,
+        children: o
+      },
+      "uk-dialog"
+    ) : null }) }),
+    document.body
+  ) : null;
+}
+function Pe({
+  open: o,
+  onOpenChange: e,
+  title: n,
+  description: r,
+  footer: a,
+  children: s,
+  closeLabel: i = "Close",
+  showCloseButton: d = !0,
+  closeOnBackdropClick: u = !0,
+  closeOnEscape: c = !0,
+  initialFocusRef: p,
+  returnFocusRef: g,
+  className: k,
+  "aria-label": b
+}) {
+  return /* @__PURE__ */ l(q, { open: o, onOpenChange: e, children: /* @__PURE__ */ N(
+    ie,
+    {
+      className: k,
+      closeOnBackdropClick: u,
+      closeOnEscape: c,
+      initialFocusRef: p,
+      returnFocusRef: g,
+      "aria-label": b,
+      children: [
+        n || r || d ? /* @__PURE__ */ N(te, { children: [
+          /* @__PURE__ */ N("div", { className: "uk-dialog__heading", children: [
+            n ? /* @__PURE__ */ l(ne, { children: n }) : null,
+            r ? /* @__PURE__ */ l(re, { children: r }) : null
+          ] }),
+          d ? /* @__PURE__ */ l(ee, { children: /* @__PURE__ */ l(
+            Y,
+            {
+              variant: "ghost",
+              size: "sm",
+              iconOnly: !0,
+              "aria-label": i,
+              className: "uk-dialog__close",
+              children: /* @__PURE__ */ l(
+                "svg",
+                {
+                  viewBox: "0 0 20 20",
+                  width: "16",
+                  height: "16",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ l(
+                    "path",
+                    {
+                      d: "M5 5l10 10M15 5L5 15",
+                      stroke: "currentColor",
+                      strokeWidth: "1.8",
+                      strokeLinecap: "round"
+                    }
+                  )
+                }
+              )
+            }
+          ) }) : null
+        ] }) : null,
+        /* @__PURE__ */ l(oe, { children: s }),
+        a ? /* @__PURE__ */ l(ae, { children: a }) : null
+      ]
+    }
+  ) });
+}
+const $e = Object.assign(Pe, {
+  Root: q,
+  Trigger: we,
+  Content: ie,
+  Header: te,
+  Title: ne,
+  Description: re,
+  Body: oe,
+  Footer: ae,
+  Close: ee
+});
+export {
+  Y as Button,
+  $e as Dialog,
+  Ae as Input,
+  He as Switch,
+  Oe as Tabs
+};
+//# sourceMappingURL=index.js.map