seam-react 0.1.1 → 0.2.0

package/dist/index.js

@@ -1,501 +1,630 @@
-import { jsxs as N, jsx as a } from "react/jsx-runtime";
-import { forwardRef as L, useId as S, useMemo as j, createContext as F, useContext as U, useRef as x, useSyncExternalStore as K, useEffect as z, useState as Q, useCallback as C } from "react";
-import { createPortal as q } from "react-dom";
-import { useControllableState as H, useEventCallback as Y, useLockBodyScroll as Z, useFocusTrap as ee } from "seam-hooks";
-function y(...t) {
-  return t.filter(Boolean).join(" ");
+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 te = L(function({
-  variant: n = "primary",
-  size: i = "md",
+const Y = y(function({
+  variant: e = "primary",
+  size: n = "md",
   loading: r = !1,
-  iconOnly: l = !1,
-  type: u = "button",
-  className: s,
-  children: h,
-  ...o
+  iconOnly: a = !1,
+  type: s = "button",
+  className: i,
+  children: d,
+  ...u
 }, c) {
   return /* @__PURE__ */ N(
     "button",
     {
-      ...o,
+      ...u,
       ref: c,
-      type: u,
-      className: y("uk-button", s),
-      "data-variant": n,
-      "data-size": i,
+      type: s,
+      className: h("uk-button", i),
+      "data-variant": e,
+      "data-size": n,
       "data-loading": r ? "true" : void 0,
-      "data-icon-only": l ? "true" : void 0,
-      disabled: o.disabled || r,
+      "data-icon-only": a ? "true" : void 0,
+      disabled: u.disabled || r,
       "aria-busy": r || void 0,
       children: [
-        r ? /* @__PURE__ */ a("span", { className: "uk-button__spinner", "aria-hidden": "true" }) : null,
-        h
+        r ? /* @__PURE__ */ l("span", { className: "uk-button__spinner", "aria-hidden": "true" }) : null,
+        d
       ]
     }
   );
-}), ke = L(function({
-  inputSize: n = "md",
-  invalid: i = !1,
+}), Ae = y(function({
+  inputSize: e = "md",
+  invalid: n = !1,
   className: r,
-  "aria-invalid": l,
-  ...u
-}, s) {
-  return /* @__PURE__ */ a(
+  "aria-invalid": a,
+  ...s
+}, i) {
+  return /* @__PURE__ */ l(
     "input",
     {
-      ...u,
-      ref: s,
-      className: y("uk-input", r),
-      "data-size": n,
-      "aria-invalid": i ? !0 : l
+      ...s,
+      ref: i,
+      className: h("uk-input", r),
+      "data-size": e,
+      "aria-invalid": n ? !0 : a
     }
   );
-}), Te = L(function({
-  checked: n,
-  defaultChecked: i,
+}), 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: l,
-  className: u,
-  children: s,
-  id: h,
-  ...o
+  disabled: a,
+  className: s,
+  children: i,
+  id: d,
+  ...u
 }, c) {
-  const m = S(), g = h ?? m, [_, v] = H({
-    value: n,
-    defaultValue: i ?? !1,
+  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: y("uk-switch", u),
-      "data-disabled": l ? "true" : void 0,
+      className: h("uk-switch", s),
+      "data-disabled": a ? "true" : void 0,
       htmlFor: g,
+      onClickCapture: (t) => {
+        b.current && (t.preventDefault(), t.stopPropagation());
+      },
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ l(
           "input",
           {
-            ...o,
+            ...u,
             ref: c,
             id: g,
             type: "checkbox",
             role: "switch",
             className: "uk-switch__input",
-            checked: _,
-            disabled: l,
-            "aria-checked": _,
-            onChange: (p) => v(p.target.checked)
+            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 } })
           }
         ),
-        /* @__PURE__ */ a("span", { className: "uk-switch__track", "aria-hidden": "true", children: /* @__PURE__ */ a("span", { className: "uk-switch__thumb" }) }),
-        s ? /* @__PURE__ */ a("span", { className: "uk-switch__label", children: s }) : null
+        i ? /* @__PURE__ */ l("span", { className: "uk-switch__label", children: i }) : null
       ]
     }
   );
-}), O = F(null);
-function V(t) {
-  const n = U(O);
-  if (!n)
-    throw new Error(`<${t}> must be rendered inside <Tabs>`);
-  return n;
+}), 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(t, n) {
-  return `${t}-tab-${encodeURIComponent(n)}`;
+function W(o, e) {
+  return `${o}-tab-${encodeURIComponent(e)}`;
 }
-function X(t, n) {
-  return `${t}-panel-${encodeURIComponent(n)}`;
+function J(o, e) {
+  return `${o}-panel-${encodeURIComponent(e)}`;
 }
-function ne({
-  value: t,
-  defaultValue: n,
-  onValueChange: i,
+function ke({
+  value: o,
+  defaultValue: e,
+  onValueChange: n,
   orientation: r = "horizontal",
-  className: l,
-  children: u
+  className: a,
+  children: s
 }) {
-  const s = S(), [h, o] = H({
-    value: t,
-    defaultValue: n ?? "",
-    onChange: i
-  }), c = j(
-    () => ({ baseId: s, value: h, setValue: o, orientation: r }),
-    [s, h, r, o]
+  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__ */ a(O.Provider, { value: c, children: /* @__PURE__ */ a("div", { className: y("uk-tabs", l), "data-orientation": r, children: u }) });
+  return /* @__PURE__ */ l(G.Provider, { value: c, children: /* @__PURE__ */ l("div", { className: h("uk-tabs", a), "data-orientation": r, children: s }) });
 }
-const re = L(function({ className: n, onKeyDown: i, ...r }, l) {
-  const { orientation: u } = V("Tabs.List");
-  return /* @__PURE__ */ a(
+const Ce = y(function({ className: e, onKeyDown: n, ...r }, a) {
+  const { orientation: s } = O("Tabs.List");
+  return /* @__PURE__ */ l(
     "div",
     {
       ...r,
-      ref: l,
+      ref: a,
       role: "tablist",
-      "aria-orientation": u,
+      "aria-orientation": s,
       tabIndex: -1,
-      className: y("uk-tabs__list", n),
-      onKeyDown: (s) => {
-        if (i?.(s), s.defaultPrevented)
+      className: h("uk-tabs__list", e),
+      onKeyDown: (i) => {
+        if (n?.(i), i.defaultPrevented)
           return;
-        const o = s.target?.closest('[role="tab"]');
-        if (!o || o.hasAttribute("disabled"))
+        const u = i.target?.closest('[role="tab"]');
+        if (!u || u.hasAttribute("disabled"))
           return;
         const c = Array.from(
-          s.currentTarget.querySelectorAll(
+          i.currentTarget.querySelectorAll(
             '[role="tab"]:not([disabled])'
           )
-        ), m = c.indexOf(o);
-        if (m === -1)
+        ), p = c.indexOf(u);
+        if (p === -1)
           return;
-        const g = u === "horizontal" ? "ArrowRight" : "ArrowDown", _ = u === "horizontal" ? "ArrowLeft" : "ArrowUp";
-        let v = -1;
-        switch (s.key) {
+        const g = s === "horizontal" ? "ArrowRight" : "ArrowDown", k = s === "horizontal" ? "ArrowLeft" : "ArrowUp";
+        let b = -1;
+        switch (i.key) {
           case g:
-            v = (m + 1) % c.length;
+            b = (p + 1) % c.length;
             break;
-          case _:
-            v = (m - 1 + c.length) % c.length;
+          case k:
+            b = (p - 1 + c.length) % c.length;
             break;
           case "Home":
-            v = 0;
+            b = 0;
             break;
           case "End":
-            v = c.length - 1;
+            b = c.length - 1;
             break;
           default:
             return;
         }
-        s.preventDefault();
-        const p = c[v];
-        p && (p.focus(), p.click());
+        i.preventDefault();
+        const m = c[b];
+        m && (m.focus(), m.click());
       }
     }
   );
-}), ae = L(function({ value: n, type: i = "button", className: r, onClick: l, ...u }, s) {
-  const h = V("Tabs.Trigger"), o = h.value === n;
-  return /* @__PURE__ */ a(
+}), 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",
     {
-      ...u,
-      ref: s,
-      type: i,
+      ...i,
+      ref: d,
+      type: n,
       role: "tab",
-      id: W(h.baseId, n),
-      "aria-selected": o,
-      "aria-controls": X(h.baseId, n),
-      tabIndex: o ? 0 : -1,
-      "data-state": o ? "active" : "inactive",
-      className: y("uk-tabs__trigger", r),
-      onClick: (c) => {
-        l?.(c), c.defaultPrevented || h.setValue(n);
-      }
+      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
+      ]
     }
   );
-}), se = L(function({ value: n, className: i, ...r }, l) {
-  const u = V("Tabs.Content"), s = u.value === n;
-  return /* @__PURE__ */ a(
+}), Te = y(function({ value: e, className: n, ...r }, a) {
+  const s = O("Tabs.Content"), i = s.value === e;
+  return /* @__PURE__ */ l(
     "div",
     {
       ...r,
-      ref: l,
+      ref: a,
       role: "tabpanel",
-      id: X(u.baseId, n),
-      "aria-labelledby": W(u.baseId, n),
-      hidden: !s,
+      id: J(s.baseId, e),
+      "aria-labelledby": W(s.baseId, e),
+      hidden: !i,
       tabIndex: 0,
-      "data-state": s ? "active" : "inactive",
-      className: y("uk-tabs__panel", i)
+      "data-state": i ? "active" : "inactive",
+      className: h("uk-tabs__panel", n)
     }
   );
-}), _e = Object.assign(ne, {
-  List: re,
-  Trigger: ae,
-  Content: se
-}), oe = () => () => {
-}, ie = () => !0, ce = () => !1;
-function Ce({
-  open: t,
-  onOpenChange: n,
-  title: i,
-  description: r,
-  footer: l,
-  children: u,
-  closeLabel: s = "Close",
-  showCloseButton: h = !0,
-  closeOnBackdropClick: o = !0,
-  closeOnEscape: c = !0,
-  initialFocusRef: m,
-  returnFocusRef: g,
-  className: _,
-  "aria-label": v
+}), 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 p = x(null), w = x(null), k = x(t), R = S(), T = S(), E = K(
-    oe,
-    ie,
-    ce
-  ), I = Y(() => {
-    k.current && n(!1);
+  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);
+    })
   });
-  return Z(t), z(() => {
-    k.current = t;
-  }, [t]), z(() => {
-    const d = p.current;
-    d && (t && !d.open ? (w.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, typeof d.showModal == "function" ? d.showModal() : d.setAttribute("open", "")) : !t && d.open && (typeof d.close == "function" ? d.close() : d.removeAttribute("open")));
-  }, [t]), ee({
-    active: t,
-    containerRef: p,
-    initialFocusRef: m,
-    returnFocusRef: g ?? w
-  }), z(() => {
-    const d = p.current;
-    if (!d)
+}
+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 A = () => I(), M = (e) => {
-      c || e.preventDefault();
-    }, $ = (e) => {
-      o && e.target === d && I();
+    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 d.addEventListener("close", A), d.addEventListener("cancel", M), d.addEventListener("click", $), () => {
-      d.removeEventListener("close", A), d.removeEventListener("cancel", M), d.removeEventListener("click", $);
+    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);
     };
-  }, [o, c, I]), E ? q(
-    /* @__PURE__ */ a(
-      "dialog",
+  }, [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,
       {
-        ref: p,
-        className: y("uk-dialog", _),
-        "aria-label": v,
-        "aria-labelledby": i ? R : void 0,
-        "aria-describedby": r ? T : void 0,
-        children: /* @__PURE__ */ N("div", { className: "uk-dialog__panel", children: [
-          i || r || h ? /* @__PURE__ */ N("header", { className: "uk-dialog__header", children: [
-            /* @__PURE__ */ N("div", { className: "uk-dialog__heading", children: [
-              i ? /* @__PURE__ */ a("h2", { id: R, className: "uk-dialog__title", children: i }) : null,
-              r ? /* @__PURE__ */ a("p", { id: T, className: "uk-dialog__description", children: r }) : null
-            ] }),
-            h ? /* @__PURE__ */ a(
-              te,
-              {
-                variant: "ghost",
-                size: "sm",
-                iconOnly: !0,
-                "aria-label": s,
-                className: "uk-dialog__close",
-                onClick: I,
-                children: /* @__PURE__ */ a(
-                  "svg",
-                  {
-                    viewBox: "0 0 20 20",
-                    width: "16",
-                    height: "16",
-                    "aria-hidden": "true",
-                    children: /* @__PURE__ */ a(
-                      "path",
-                      {
-                        d: "M5 5l10 10M15 5L5 15",
-                        stroke: "currentColor",
-                        strokeWidth: "1.8",
-                        strokeLinecap: "round"
-                      }
-                    )
-                  }
-                )
-              }
-            ) : null
-          ] }) : null,
-          /* @__PURE__ */ a("div", { className: "uk-dialog__body", children: u }),
-          l ? /* @__PURE__ */ a("footer", { className: "uk-dialog__footer", children: l }) : null
-        ] })
-      }
-    ),
+        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;
 }
-const G = F(null), le = 200, ue = () => () => {
-}, de = () => !0, fe = () => !1;
-function he({
-  record: t,
-  closeLabel: n,
-  onDismiss: i,
-  onPause: r,
-  onResume: l
+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__ */ N(
-    "div",
+  return /* @__PURE__ */ l(q, { open: o, onOpenChange: e, children: /* @__PURE__ */ N(
+    ie,
     {
-      className: "uk-toast",
-      "data-variant": t.variant,
-      "data-state": t.leaving ? "closed" : "open",
-      onMouseEnter: () => r(t.id),
-      onMouseLeave: () => l(t.id),
-      onFocusCapture: () => r(t.id),
-      onBlurCapture: () => l(t.id),
+      className: k,
+      closeOnBackdropClick: u,
+      closeOnEscape: c,
+      initialFocusRef: p,
+      returnFocusRef: g,
+      "aria-label": b,
       children: [
-        /* @__PURE__ */ N("div", { className: "uk-toast__body", children: [
-          t.title ? /* @__PURE__ */ a("div", { className: "uk-toast__title", children: t.title }) : null,
-          t.description ? /* @__PURE__ */ a("div", { className: "uk-toast__description", children: t.description }) : null
-        ] }),
-        /* @__PURE__ */ a(
-          "button",
-          {
-            type: "button",
-            className: "uk-toast__close",
-            "aria-label": n,
-            onClick: () => i(t.id),
-            children: /* @__PURE__ */ a("svg", { viewBox: "0 0 20 20", width: "14", height: "14", "aria-hidden": "true", children: /* @__PURE__ */ a(
-              "path",
-              {
-                d: "M5 5l10 10M15 5L5 15",
-                stroke: "currentColor",
-                strokeWidth: "1.8",
-                strokeLinecap: "round"
-              }
-            ) })
-          }
-        )
+        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
       ]
     }
-  );
-}
-function we({
-  children: t,
-  placement: n = "top-right",
-  duration: i = 4e3,
-  maxToasts: r = 4,
-  label: l = "Notifications",
-  closeLabel: u = "Close"
-}) {
-  const [s, h] = Q([]), o = x([]), c = x(/* @__PURE__ */ new Map()), m = x(
-    /* @__PURE__ */ new Map()
-  ), g = x(
-    /* @__PURE__ */ new Map()
-  ), _ = x(0), v = S(), p = K(
-    ue,
-    de,
-    fe
-  ), w = C((e) => {
-    o.current = e, h(e);
-  }, []), k = C((e) => {
-    const f = m.current.get(e);
-    f !== void 0 && (clearTimeout(f), m.current.delete(e));
-  }, []), R = C((e) => {
-    const f = g.current.get(e);
-    f !== void 0 && (clearTimeout(f), g.current.delete(e));
-  }, []), T = C(
-    (e) => {
-      k(e), !(g.current.has(e) || !o.current.some((b) => b.id === e)) && (w(
-        o.current.map(
-          (b) => b.id === e ? { ...b, leaving: !0 } : b
-        )
-      ), g.current.set(
-        e,
-        setTimeout(() => {
-          g.current.delete(e), c.current.delete(e), w(o.current.filter((b) => b.id !== e));
-        }, le)
-      ));
-    },
-    [k, w]
-  ), E = C(
-    (e, f) => {
-      k(e), !(f <= 0) && m.current.set(
-        e,
-        setTimeout(() => {
-          m.current.delete(e), T(e);
-        }, f)
-      );
-    },
-    [k, T]
-  ), I = C(
-    (e) => {
-      const f = `${v}-${_.current}`;
-      _.current += 1;
-      const b = {
-        id: f,
-        title: e.title,
-        description: e.description,
-        variant: e.variant ?? "info",
-        duration: e.duration ?? i,
-        leaving: !1
-      }, D = [...o.current, b], P = Math.max(0, D.length - r);
-      (P > 0 ? D.slice(0, P) : []).forEach((B) => {
-        k(B.id), R(B.id), c.current.delete(B.id);
-      });
-      const J = P > 0 ? D.slice(P) : D;
-      return c.current.set(f, b.duration), w(J), E(f, b.duration), f;
-    },
-    [
-      v,
-      k,
-      R,
-      w,
-      i,
-      r,
-      E
-    ]
-  ), d = C(
-    (e) => {
-      k(e);
-    },
-    [k]
-  ), A = C(
-    (e) => {
-      const f = c.current.get(e);
-      f !== void 0 && E(e, f);
-    },
-    [E]
-  ), M = C(() => {
-    o.current.forEach((e) => T(e.id));
-  }, [T]), $ = j(
-    () => ({ toast: I, dismiss: T, dismissAll: M }),
-    [T, M, I]
-  );
-  return z(() => {
-    const e = m.current, f = g.current;
-    return () => {
-      e.forEach((b) => clearTimeout(b)), f.forEach((b) => clearTimeout(b)), e.clear(), f.clear();
-    };
-  }, []), /* @__PURE__ */ N(G.Provider, { value: $, children: [
-    t,
-    p ? q(
-      /* @__PURE__ */ a(
-        "section",
-        {
-          className: "uk-toast-viewport",
-          "data-placement": n,
-          "aria-label": l,
-          "aria-live": "polite",
-          "aria-atomic": "false",
-          children: s.map((e) => /* @__PURE__ */ a(
-            he,
-            {
-              record: e,
-              closeLabel: u,
-              onDismiss: T,
-              onPause: d,
-              onResume: A
-            },
-            e.id
-          ))
-        }
-      ),
-      document.body
-    ) : null
-  ] });
-}
-function xe() {
-  const t = U(G);
-  if (!t)
-    throw new Error("useToast must be used within <ToastProvider>");
-  return t;
+  ) });
 }
+const $e = Object.assign(Pe, {
+  Root: q,
+  Trigger: we,
+  Content: ie,
+  Header: te,
+  Title: ne,
+  Description: re,
+  Body: oe,
+  Footer: ae,
+  Close: ee
+});
 export {
-  te as Button,
-  Ce as Dialog,
-  ke as Input,
-  Te as Switch,
-  _e as Tabs,
-  we as ToastProvider,
-  xe as useToast
+  Y as Button,
+  $e as Dialog,
+  Ae as Input,
+  He as Switch,
+  Oe as Tabs
 };
 //# sourceMappingURL=index.js.map