@alfadocs/ui-kit 0.1.9 → 0.2.0

package/dist/_chunks/{phone-input-C8Op4sEc.js → phone-input-CSHJOJ13.js}

@@ -5,7 +5,7 @@ import { R as Ee, _ as b } from "./index-4xgbg-sn.js";
 import { c as H } from "./index-D2ZczOXr.js";
 import { useTranslation as je } from "react-i18next";
 import { getCountries as Be, parsePhoneNumberFromString as F, AsYouType as M, getCountryCallingCode as De } from "libphonenumber-js/min";
-import { u as Te, F as Ae } from "./form-field-context-94LwgYTQ.js";
+import { u as Te, F as Ae } from "./form-field-context-B3APVHKx.js";
 import { c as Le } from "./compose-refs-C0k0tdqF.js";
 import { n as q } from "./normalize-diacritics-BNGbFNlJ.js";
 import { a as ne } from "./flag-DZ6V7-hU.js";
@@ -336,9 +336,7 @@ const tt = Se(
     ), N = m(() => {
       if (!I || I.length === 0) return [];
       const e = new Map(g.map((t) => [t.code, t]));
-      return I.filter(
-        (t) => z.has(t)
-      ).map((t) => e.get(t)).filter((t) => !!t);
+      return I.filter((t) => z.has(t)).map((t) => e.get(t)).filter((t) => !!t);
     }, [I, g, z]), L = m(
       () => new Set(N.map((e) => e.code)),
       [N]
@@ -348,10 +346,7 @@ const tt = Se(
     ), S = m(
       () => g.find((e) => e.code === l),
       [g, l]
-    ), Q = S ? S.dialCode : "", Ie = S ? S.name : l, X = v(
-      "ui.inputs.phone.countryPickerLabel",
-      "Country"
-    ), Re = `${X}: ${Ie}, +${Q}`, ke = se(
+    ), Q = S ? S.dialCode : "", Ie = S ? S.name : l, X = v("ui.inputs.phone.countryPickerLabel", "Country"), Re = `${X}: ${Ie}, +${Q}`, ke = se(
       (e, t, s) => {
         const c = q(e), x = q(t), te = s == null ? void 0 : s.map(q);
         return Ee(
@@ -510,4 +505,4 @@ export {
   He as c,
   qe as p
 };
-//# sourceMappingURL=phone-input-C8Op4sEc.js.map
+//# sourceMappingURL=phone-input-CSHJOJ13.js.map

package/dist/_chunks/popover-DekUKNBk.js

@@ -0,0 +1,293 @@
+import { jsx as s, jsxs as $ } from "react/jsx-runtime";
+import { useState as C, useCallback as g, useRef as R, useEffect as h, useMemo as q, forwardRef as f, useId as D, useContext as u, createContext as N } from "react";
+import * as v from "@radix-ui/react-popover";
+import { c as G } from "./index-D2ZczOXr.js";
+import { useTranslation as J } from "react-i18next";
+import { I as K } from "./icon-button-C4CGcYuz.js";
+import { u as Q } from "./registry-C9nwlNyL.js";
+import { X as U } from "./x-CCcI3eJp.js";
+const Y = {
+  id: "popover",
+  capabilities: ["open", "close"],
+  state: {
+    isOpen: {
+      type: "boolean",
+      description: "True when the popover is currently open.",
+      read: (e) => e.getIsOpen()
+    }
+  },
+  actions: {
+    open: {
+      safety: "read",
+      description: "Open the popover.",
+      invoke: (e) => {
+        e.open();
+      }
+    },
+    close: {
+      safety: "read",
+      description: "Close the popover.",
+      invoke: (e) => {
+        e.close();
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "popover" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop on Popover.Root."
+    }
+  }
+}, y = N({
+  headingId: void 0,
+  setHeadingId: () => {
+  },
+  descriptionId: void 0,
+  setDescriptionId: () => {
+  }
+}), k = N({
+  isHoverMode: !1,
+  clearHoverTimer: () => {
+  },
+  closeWithDelay: () => {
+  }
+});
+function Z(e) {
+  if (e === "top" || e === "bottom") return e;
+  const o = typeof document < "u" && document.documentElement.dir === "rtl";
+  return e === "start" ? o ? "right" : "left" : o ? "left" : "right";
+}
+const _ = G(
+  [
+    // Border kept (transparent) so the forced-colors override below can
+    // repaint a visible edge in HCM. In normal modes the soft drop-shadow
+    // carries the edge cue; the heavy `--border` (grey-800 since WCAG
+    // 1.4.11 bump in 67fef8c) made the popover read as a charcoal box.
+    "ds:relative ds:bg-[var(--popover)] ds:border ds:border-transparent ds:rounded-[var(--radius-md)]",
+    "ds:p-[var(--spacing-md)]",
+    "ds:shadow-[var(--shadow-lg)]",
+    "ds:z-[var(--z-popover)]",
+    "ds:text-[var(--popover-foreground)] ds:text-[length:var(--font-size-sm)]",
+    "ds:break-words",
+    "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
+    "ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0",
+    "ds:data-[state=closed]:zoom-out-95 ds:data-[state=open]:zoom-in-95",
+    "ds:data-[side=bottom]:slide-in-from-top-2 ds:data-[side=left]:slide-in-from-right-2",
+    "ds:data-[side=right]:slide-in-from-left-2 ds:data-[side=top]:slide-in-from-bottom-2",
+    "ds:motion-reduce:transition-none ds:motion-reduce:animate-none",
+    "ds:forced-colors:border-[CanvasText]",
+    "ds:focus-visible:outline-none"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:max-w-[var(--popover-size-sm)]",
+        md: "ds:max-w-[var(--popover-size-md)]",
+        lg: "ds:max-w-[var(--popover-size-lg)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), M = N(void 0);
+function T({
+  openOn: e = "click",
+  children: o,
+  id: r,
+  open: i,
+  onOpenChange: t,
+  defaultOpen: c,
+  modal: P
+}) {
+  const [I, b] = C(c ?? !1), m = i !== void 0, l = m ? i : I, n = g(
+    (z) => {
+      m || b(z), t == null || t(z);
+    },
+    [m, t]
+  ), d = R(null), p = e === "hover" || e === "hover-or-click", a = g(() => {
+    d.current && (clearTimeout(d.current), d.current = null);
+  }, []), H = g(() => {
+    a(), d.current = setTimeout(() => {
+      n(!0);
+    }, 300);
+  }, [a, n]), x = g(() => {
+    a(), d.current = setTimeout(() => {
+      n(!1);
+    }, 300);
+  }, [a, n]);
+  h(() => () => a(), [a]);
+  const w = R(l);
+  h(() => {
+    w.current = l;
+  }, [l]);
+  const O = q(
+    () => ({
+      getIsOpen: () => w.current,
+      open: () => n(!0),
+      close: () => n(!1)
+    }),
+    [n]
+  );
+  Q(Y, O, r);
+  const [F, L] = C(void 0), [V, S] = C(
+    void 0
+  ), X = p ? {
+    onMouseEnter: H,
+    onMouseLeave: x,
+    onFocus: () => {
+      a(), n(!0);
+    },
+    onBlur: x
+  } : {};
+  return /* @__PURE__ */ s(M.Provider, { value: r, children: /* @__PURE__ */ s(
+    y.Provider,
+    {
+      value: { headingId: F, setHeadingId: L, descriptionId: V, setDescriptionId: S },
+      children: /* @__PURE__ */ s(
+        k.Provider,
+        {
+          value: { isHoverMode: p, clearHoverTimer: a, closeWithDelay: x },
+          children: /* @__PURE__ */ s(
+            v.Root,
+            {
+              open: l,
+              onOpenChange: n,
+              modal: P,
+              children: p ? /* @__PURE__ */ s("span", { className: "ds:inline-flex", ...X, children: o }) : o
+            }
+          )
+        }
+      )
+    }
+  ) });
+}
+T.displayName = "Popover.Root";
+const j = f(({ children: e, ...o }, r) => /* @__PURE__ */ s(v.Trigger, { ref: r, ...o, children: e }));
+j.displayName = "Popover.Trigger";
+const B = f(
+  ({
+    side: e = "bottom",
+    align: o = "center",
+    size: r = "md",
+    showArrow: i = !0,
+    className: t,
+    children: c,
+    ...P
+  }, I) => {
+    const { headingId: b, descriptionId: m } = u(y), l = u(M), {
+      isHoverMode: n,
+      clearHoverTimer: d,
+      closeWithDelay: p
+    } = u(k), a = Z(e), H = n ? {
+      onMouseEnter: d,
+      onMouseLeave: p,
+      onFocus: d,
+      onBlur: p
+    } : {};
+    return /* @__PURE__ */ s(v.Portal, { children: /* @__PURE__ */ $(
+      v.Content,
+      {
+        ref: I,
+        side: a,
+        align: o,
+        sideOffset: 8,
+        collisionPadding: 8,
+        "aria-labelledby": b,
+        "aria-describedby": m,
+        className: _({ size: r, className: t }),
+        "data-component": "popover",
+        "data-component-id": l,
+        ...H,
+        ...P,
+        children: [
+          c,
+          i && /* @__PURE__ */ s(
+            v.Arrow,
+            {
+              width: 12,
+              height: 6,
+              className: "ds:fill-[var(--popover)]"
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+B.displayName = "Popover.Content";
+const A = f(
+  ({ className: e }, o) => {
+    const { t: r } = J();
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        className: [
+          "ds:absolute ds:top-[var(--spacing-sm)] ds:end-[var(--spacing-sm)]",
+          e
+        ].filter(Boolean).join(" "),
+        children: /* @__PURE__ */ s(v.Close, { asChild: !0, children: /* @__PURE__ */ s(
+          K,
+          {
+            ref: o,
+            icon: /* @__PURE__ */ s(U, {}),
+            intent: "ghost",
+            size: "sm",
+            "aria-label": r("ui.common.close", "Close")
+          }
+        ) })
+      }
+    );
+  }
+);
+A.displayName = "Popover.Close";
+const E = f(
+  ({ as: e = "h3", className: o, ...r }, i) => {
+    const t = D(), { setHeadingId: c } = u(y);
+    return h(() => (c(t), () => c(void 0)), [t, c]), /* @__PURE__ */ s(
+      e,
+      {
+        ref: i,
+        id: t,
+        className: [
+          "type-title-item ds:leading-snug ds:break-words",
+          "ds:pe-[var(--spacing-xl)]",
+          o
+        ].filter(Boolean).join(" "),
+        ...r
+      }
+    );
+  }
+);
+E.displayName = "Popover.Heading";
+const W = f(({ className: e, ...o }, r) => {
+  const i = D(), { setDescriptionId: t } = u(y);
+  return h(() => (t(i), () => t(void 0)), [i, t]), /* @__PURE__ */ s(
+    "p",
+    {
+      ref: r,
+      id: i,
+      className: [
+        "ds:text-[var(--muted-foreground)] type-body-sm ds:mt-[var(--spacing-xs)]",
+        e
+      ].filter(Boolean).join(" "),
+      ...o
+    }
+  );
+});
+W.displayName = "Popover.Description";
+const ae = Object.assign(T, {
+  Root: T,
+  Trigger: j,
+  Content: B,
+  Close: A,
+  Heading: E,
+  Description: W
+});
+export {
+  ae as P,
+  Y as p
+};
+//# sourceMappingURL=popover-DekUKNBk.js.map

package/dist/_chunks/{privacy-lock.agent-C1i1-T58.js → privacy-lock-BKsI6ReN.js}

@@ -1,40 +1,84 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { forwardRef as H, useState as F, useCallback as k, useRef as M, useImperativeHandle as q } from "react";
-import { useTranslation as G } from "react-i18next";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { forwardRef as q, useState as G, useCallback as g, useRef as L, useImperativeHandle as J, useMemo as Q } from "react";
+import { useTranslation as V } from "react-i18next";
 import * as i from "@radix-ui/react-dialog";
-import { B as p } from "./button-7mLWcMp_.js";
-import { I as J } from "./icon-button-Wnnde5lc.js";
-import { L as Q } from "./logo-BpFoCL-s.js";
-import { E as L } from "./eye-off-xEXDAh5z.js";
-import { U as V } from "./user-CPxpqFjJ.js";
-import { L as W } from "./log-out-616hnn2-.js";
-const X = H(
+import { B as u } from "./button-DD_0Xdmr.js";
+import { I as W } from "./icon-button-C4CGcYuz.js";
+import { L as X } from "./logo-_Z-jLq80.js";
+import { u as Y } from "./registry-C9nwlNyL.js";
+import { E as h } from "./eye-off-xEXDAh5z.js";
+import { U as Z } from "./user-CPxpqFjJ.js";
+import { L as _ } from "./log-out-616hnn2-.js";
+const $ = {
+  id: "privacy-lock",
+  capabilities: ["submit", "dismiss"],
+  state: {
+    isLocked: {
+      type: "boolean",
+      descriptionKey: "ui.agent.privacyLock.state.isLocked",
+      description: "True when the privacy overlay is open.",
+      read: (t) => t.isLocked()
+    }
+  },
+  actions: {
+    lock: {
+      safety: "write",
+      descriptionKey: "ui.agent.privacyLock.actions.lock",
+      description: "Open the privacy overlay.",
+      invoke: (t) => {
+        t.lock();
+      }
+    },
+    unlock: {
+      safety: "write",
+      descriptionKey: "ui.agent.privacyLock.actions.unlock",
+      description: "Close the privacy overlay (consumer-confirmed action).",
+      invoke: (t) => {
+        t.unlock();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "privacy-lock",
+      description: "Marks the PrivacyLock trigger."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, ee = q(
   ({
     open: t,
-    defaultOpen: g = !1,
+    defaultOpen: x = !1,
     onOpenChange: s,
-    onUnlock: h,
-    onAccountPage: u,
+    onUnlock: b,
+    onAccountPage: m,
     onSignOut: v,
-    triggerIcon: x,
-    triggerAriaLabel: b,
-    triggerTooltip: w,
-    title: D,
-    description: P,
-    unlockLabel: T,
-    accountPageLabel: I,
-    signOutLabel: O,
-    className: N,
-    ...m
-  }, A) => {
-    const { t: r } = G(), [j, z] = F(g), n = t !== void 0, d = n ? t : j, a = k(
+    triggerIcon: w,
+    triggerAriaLabel: D,
+    triggerTooltip: P,
+    title: T,
+    description: I,
+    unlockLabel: O,
+    accountPageLabel: A,
+    signOutLabel: N,
+    className: R,
+    ...c
+  }, j) => {
+    const { t: r } = V(), [z, C] = G(x), d = t !== void 0, l = d ? t : z, a = g(
       (e) => {
-        n || z(e), s == null || s(e);
+        d || C(e), s == null || s(e);
       },
-      [n, s]
-    ), f = M(d);
-    f.current = d, q(
-      A,
+      [d, s]
+    ), f = L(l);
+    f.current = l;
+    const y = L(null);
+    J(j, () => y.current, []);
+    const U = Q(
       () => ({
         isLocked: () => f.current,
         lock: () => a(!0),
@@ -42,29 +86,35 @@ const X = H(
       }),
       [a]
     );
-    const l = k(
-      (e) => (S) => {
-        e == null || e(), S.defaultPrevented || a(!1);
+    Y(
+      $,
+      U,
+      c.id
+    );
+    const p = g(
+      (e) => (F) => {
+        e == null || e(), F.defaultPrevented || a(!1);
       },
       [a]
-    ), C = b ?? r("privacyLock.triggerAriaLabel", "Lock screen for privacy"), R = w ?? r("privacyLock.triggerTooltip", "Lock screen"), y = D ?? r("privacyLock.title", "Screen locked for privacy"), U = P ?? r(
+    ), K = D ?? r("privacyLock.triggerAriaLabel", "Lock screen for privacy"), B = P ?? r("privacyLock.triggerTooltip", "Lock screen"), k = T ?? r("privacyLock.title", "Screen locked for privacy"), E = I ?? r(
       "privacyLock.description",
       "Locking the screen helps protect the privacy of your data."
-    ), K = T ?? r("privacyLock.unlock", "Unlock screen"), B = I ?? r("privacyLock.accountPage", "Account page"), E = O ?? r("privacyLock.signOut", "Log out");
-    return /* @__PURE__ */ c(i.Root, { open: d, onOpenChange: a, children: [
+    ), H = O ?? r("privacyLock.unlock", "Unlock screen"), S = A ?? r("privacyLock.accountPage", "Account page"), M = N ?? r("privacyLock.signOut", "Log out");
+    return /* @__PURE__ */ n(i.Root, { open: l, onOpenChange: a, children: [
       /* @__PURE__ */ o(i.Trigger, { asChild: !0, children: /* @__PURE__ */ o(
-        J,
+        W,
         {
-          icon: x ?? /* @__PURE__ */ o(L, { "aria-hidden": !0 }),
-          "aria-label": C,
-          tooltip: R,
-          className: N,
+          ref: y,
+          icon: w ?? /* @__PURE__ */ o(h, { "aria-hidden": !0 }),
+          "aria-label": K,
+          tooltip: B,
+          className: R,
           "data-component": "privacy-lock",
-          "data-component-id": m.id,
-          ...m
+          "data-component-id": c.id,
+          ...c
         }
       ) }),
-      /* @__PURE__ */ c(i.Portal, { children: [
+      /* @__PURE__ */ n(i.Portal, { children: [
         /* @__PURE__ */ o(
           i.Overlay,
           {
@@ -82,7 +132,7 @@ const X = H(
         /* @__PURE__ */ o(
           i.Content,
           {
-            "aria-label": y,
+            "aria-label": k,
             onEscapeKeyDown: (e) => e.preventDefault(),
             onPointerDownOutside: (e) => e.preventDefault(),
             onInteractOutside: (e) => e.preventDefault(),
@@ -95,39 +145,39 @@ const X = H(
               "ds:data-[state=open]:animate-in ds:data-[state=open]:fade-in",
               "ds:motion-reduce:animate-none"
             ].join(" "),
-            children: /* @__PURE__ */ c("div", { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-lg)] ds:w-[min(22rem,calc(100vw-var(--spacing-xl)))] ds:text-center", children: [
-              /* @__PURE__ */ o(Q, { size: "xl", decorative: !0 }),
-              /* @__PURE__ */ o(i.Title, { className: "ds:sr-only", children: y }),
-              /* @__PURE__ */ c("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:w-full", children: [
+            children: /* @__PURE__ */ n("div", { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-lg)] ds:w-[min(22rem,calc(100vw-var(--spacing-xl)))] ds:text-center", children: [
+              /* @__PURE__ */ o(X, { size: "xl", decorative: !0 }),
+              /* @__PURE__ */ o(i.Title, { className: "ds:sr-only", children: k }),
+              /* @__PURE__ */ n("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:w-full", children: [
                 /* @__PURE__ */ o(
-                  p,
+                  u,
                   {
                     intent: "primary",
-                    startIcon: /* @__PURE__ */ o(L, { "aria-hidden": !0 }),
-                    onClick: l(h),
-                    children: K
+                    startIcon: /* @__PURE__ */ o(h, { "aria-hidden": !0 }),
+                    onClick: p(b),
+                    children: H
                   }
                 ),
-                u ? /* @__PURE__ */ o(
-                  p,
+                m ? /* @__PURE__ */ o(
+                  u,
                   {
                     intent: "secondary",
-                    startIcon: /* @__PURE__ */ o(V, { "aria-hidden": !0 }),
-                    onClick: l(u),
-                    children: B
+                    startIcon: /* @__PURE__ */ o(Z, { "aria-hidden": !0 }),
+                    onClick: p(m),
+                    children: S
                   }
                 ) : null,
                 v ? /* @__PURE__ */ o(
-                  p,
+                  u,
                   {
                     intent: "secondary",
-                    startIcon: /* @__PURE__ */ o(W, { "aria-hidden": !0 }),
-                    onClick: l(v),
-                    children: E
+                    startIcon: /* @__PURE__ */ o(_, { "aria-hidden": !0 }),
+                    onClick: p(v),
+                    children: M
                   }
                 ) : null
               ] }),
-              /* @__PURE__ */ o(i.Description, { className: "type-body-sm ds:opacity-90", children: U })
+              /* @__PURE__ */ o(i.Description, { className: "type-body-sm ds:opacity-90", children: E })
             ] })
           }
         )
@@ -135,51 +185,9 @@ const X = H(
     ] });
   }
 );
-X.displayName = "PrivacyLock";
-const ae = {
-  id: "privacy-lock",
-  capabilities: ["submit", "dismiss"],
-  state: {
-    isLocked: {
-      type: "boolean",
-      descriptionKey: "ui.agent.privacyLock.state.isLocked",
-      description: "True when the privacy overlay is open.",
-      read: (t) => t.isLocked()
-    }
-  },
-  actions: {
-    lock: {
-      safety: "write",
-      descriptionKey: "ui.agent.privacyLock.actions.lock",
-      description: "Open the privacy overlay.",
-      invoke: (t) => {
-        t.lock();
-      }
-    },
-    unlock: {
-      safety: "write",
-      descriptionKey: "ui.agent.privacyLock.actions.unlock",
-      description: "Close the privacy overlay (consumer-confirmed action).",
-      invoke: (t) => {
-        t.unlock();
-      }
-    }
-  },
-  domHooks: {
-    root: {
-      attr: "data-component",
-      value: "privacy-lock",
-      description: "Marks the PrivacyLock trigger."
-    },
-    instanceId: {
-      attr: "data-component-id",
-      sourceProp: "id",
-      description: "Sourced from the id prop."
-    }
-  }
-};
+ee.displayName = "PrivacyLock";
 export {
-  X as P,
-  ae as p
+  ee as P,
+  $ as p
 };
-//# sourceMappingURL=privacy-lock.agent-C1i1-T58.js.map
+//# sourceMappingURL=privacy-lock-BKsI6ReN.js.map