@forgedevstack/bear 1.2.0 → 1.2.1

package/dist/components/NotificationCenter/NotificationCenter.js

@@ -1,20 +1,20 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { useState as y, useRef as O, useMemo as C, useEffect as E, useCallback as Y } from "react";
-import { createPortal as H } from "react-dom";
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { useState as C, useRef as M, useMemo as _, useEffect as j, useCallback as Y } from "react";
+import { createPortal as Z } from "react-dom";
 import { cn as c } from "../../utils/cn.js";
-import { NOTIFICATION_CENTER_DEFAULT_TRANSLATIONS as U, NOTIFICATION_CENTER_MAX_VISIBLE as Z, NOTIFICATION_CENTER_Z_INDEX as q, NOTIFICATION_TYPE_COLORS as j } from "./NotificationCenter.const.js";
-import { formatRelativeTime as G } from "./NotificationCenter.utils.js";
-const J = ({
+import { NOTIFICATION_CENTER_DEFAULT_TRANSLATIONS as q, NOTIFICATION_CENTER_MAX_VISIBLE as G, NOTIFICATION_CENTER_Z_INDEX as J, NOTIFICATION_TYPE_COLORS as A } from "./NotificationCenter.const.js";
+import { formatRelativeTime as K } from "./NotificationCenter.utils.js";
+const Q = ({
   notification: e,
-  onRead: d,
+  onRead: h,
   onDismiss: p,
-  onClick: i,
+  onClick: l,
   translations: k
-}) => /* @__PURE__ */ n(
+}) => /* @__PURE__ */ t(
   "div",
   {
     onClick: () => {
-      e.read || d == null || d(e.id), i == null || i(e);
+      e.read || h == null || h(e.id), l == null || l(e);
     },
     className: c(
       "Bear-NotificationCenter__item bear-flex bear-gap-3 bear-p-3 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700 last:bear-border-b-0 bear-cursor-pointer bear-transition-colors hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700/50",
@@ -30,18 +30,18 @@ const J = ({
         }
       ) : e.icon ? /* @__PURE__ */ r("div", { className: c(
         "bear-w-10 bear-h-10 bear-rounded-full bear-flex bear-items-center bear-justify-center",
-        j[e.type]
-      ), children: e.icon }) : /* @__PURE__ */ n("div", { className: c(
+        A[e.type]
+      ), children: e.icon }) : /* @__PURE__ */ t("div", { className: c(
         "bear-w-10 bear-h-10 bear-rounded-full bear-flex bear-items-center bear-justify-center",
-        j[e.type]
+        A[e.type]
       ), children: [
         e.type === "success" && /* @__PURE__ */ r("svg", { className: "bear-w-5 bear-h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
         e.type === "error" && /* @__PURE__ */ r("svg", { className: "bear-w-5 bear-h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
         e.type === "warning" && /* @__PURE__ */ r("svg", { className: "bear-w-5 bear-h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
         e.type === "info" && /* @__PURE__ */ r("svg", { className: "bear-w-5 bear-h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })
       ] }) }),
-      /* @__PURE__ */ n("div", { className: "Bear-NotificationCenter__item-content bear-flex-1 bear-min-w-0", children: [
-        /* @__PURE__ */ n("div", { className: "bear-flex bear-items-start bear-justify-between bear-gap-2", children: [
+      /* @__PURE__ */ t("div", { className: "Bear-NotificationCenter__item-content bear-flex-1 bear-min-w-0", children: [
+        /* @__PURE__ */ t("div", { className: "bear-flex bear-items-start bear-justify-between bear-gap-2", children: [
           /* @__PURE__ */ r("p", { className: c(
             "Bear-NotificationCenter__item-title bear-text-sm bear-font-medium bear-truncate",
             e.read ? "bear-text-gray-600 dark:bear-text-zinc-300" : "bear-text-gray-900 dark:bear-text-white"
@@ -49,13 +49,13 @@ const J = ({
           !e.read && /* @__PURE__ */ r("span", { className: "Bear-NotificationCenter__item-badge bear-w-2 bear-h-2 bear-rounded-full bear-bg-pink-500 bear-shrink-0 bear-mt-1.5" })
         ] }),
         e.description && /* @__PURE__ */ r("p", { className: "Bear-NotificationCenter__item-description bear-text-xs bear-text-gray-500 dark:bear-text-zinc-400 bear-mt-0.5 bear-line-clamp-2", children: e.description }),
-        /* @__PURE__ */ r("p", { className: "Bear-NotificationCenter__item-time bear-text-xs bear-text-gray-400 dark:bear-text-zinc-500 bear-mt-1", children: G(e.timestamp, k) }),
-        e.actions && e.actions.length > 0 && /* @__PURE__ */ r("div", { className: "Bear-NotificationCenter__item-actions bear-flex bear-gap-2 bear-mt-2", children: e.actions.map((a, _) => /* @__PURE__ */ r(
+        /* @__PURE__ */ r("p", { className: "Bear-NotificationCenter__item-time bear-text-xs bear-text-gray-400 dark:bear-text-zinc-500 bear-mt-1", children: K(e.timestamp, k) }),
+        e.actions && e.actions.length > 0 && /* @__PURE__ */ r("div", { className: "Bear-NotificationCenter__item-actions bear-flex bear-gap-2 bear-mt-2", children: e.actions.map((a, z) => /* @__PURE__ */ r(
           "button",
           {
             type: "button",
-            onClick: (h) => {
-              h.stopPropagation(), a.onClick();
+            onClick: (u) => {
+              u.stopPropagation(), a.onClick();
             },
             className: c(
               "bear-px-2 bear-py-1 bear-text-xs bear-rounded bear-transition-colors",
@@ -66,7 +66,7 @@ const J = ({
             ),
             children: a.label
           },
-          _
+          z
         )) })
       ] }),
       p && /* @__PURE__ */ r(
@@ -82,124 +82,130 @@ const J = ({
       )
     ]
   }
-), ae = ({
+), ne = ({
   notifications: e,
-  onNotificationClick: d,
+  onNotificationClick: h,
   onMarkAsRead: p,
-  onMarkAllAsRead: i,
+  onMarkAllAsRead: l,
   onDismiss: k,
-  onClearAll: N,
-  maxVisible: a = Z,
-  groupByCategory: _ = !1,
-  position: h = "top-right",
-  trigger: w,
-  open: M,
-  onOpenChange: A,
-  className: R,
-  testId: P,
-  translations: B,
-  icon: S
+  onClearAll: v,
+  maxVisible: a = G,
+  groupByCategory: z = !1,
+  position: u = "top-right",
+  trigger: B,
+  open: W,
+  onOpenChange: R,
+  className: P,
+  testId: S,
+  translations: L,
+  icon: F
 }) => {
-  const [W, F] = y(!1), [z, X] = y({ top: 0, left: 0 }), [v, D] = y(!1), L = O(null), f = O(null), m = M ?? W, g = A ?? F, b = C(() => ({
-    ...U,
-    ...B
-  }), [B]), l = C(
-    () => e.filter((t) => !t.read).length,
+  const [H, D] = C(!1), [I, X] = C({ top: 0, left: 0 }), [N, U] = C(!1), E = M(null), f = M(null), m = W ?? H, g = R ?? D, b = _(() => ({
+    ...q,
+    ...L
+  }), [L]), d = _(
+    () => e.filter((n) => !n.read).length,
     [e]
-  ), I = C(() => v ? e : e.slice(0, a), [e, a, v]);
-  E(() => {
-    if (m && f.current) {
-      const t = f.current.getBoundingClientRect(), x = window.scrollY || document.documentElement.scrollTop, o = window.scrollX || document.documentElement.scrollLeft;
-      let u = t.bottom + x + 8, s = t.left + o;
-      h.includes("left") ? s = t.left + o : s = t.right + o - 360, h.includes("bottom") && (u = t.top + x - 8), X({ top: u, left: Math.max(8, s) });
-    }
-  }, [m, h]), E(() => {
-    const t = (x) => {
-      var u, s;
-      const o = x.target;
-      (u = L.current) != null && u.contains(o) || (s = o.closest) != null && s.call(o, "[data-bear-notification-center]") || g(!1);
+  ), T = _(() => N ? e : e.slice(0, a), [e, a, N]);
+  j(() => {
+    if (!m || !f.current) return;
+    const n = 360, x = 400, i = 8, o = () => {
+      const s = f.current.getBoundingClientRect();
+      let y = u.includes("left") ? s.left : s.right - n;
+      y = Math.max(8, Math.min(y, window.innerWidth - n - 8));
+      let w = s.bottom + i;
+      w + x > window.innerHeight - 8 && (w = Math.max(8, s.top - x - i)), X({ top: w, left: y });
+    };
+    return o(), window.addEventListener("resize", o), window.addEventListener("scroll", o, !0), () => {
+      window.removeEventListener("resize", o), window.removeEventListener("scroll", o, !0);
+    };
+  }, [m, u]), j(() => {
+    const n = (x) => {
+      var o, s;
+      const i = x.target;
+      (o = E.current) != null && o.contains(i) || (s = i.closest) != null && s.call(i, "[data-bear-notification-center]") || g(!1);
     };
-    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+    return document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
   }, [g]);
-  const T = Y(() => {
+  const O = Y(() => {
     g(!m);
   }, [m, g]);
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ t(
     "div",
     {
-      ref: L,
-      className: c("Bear-NotificationCenter bear-relative bear-inline-block", R),
-      "data-testid": P,
+      ref: E,
+      className: c("Bear-NotificationCenter bear-relative bear-inline-block", P),
+      "data-testid": S,
       children: [
-        w ? /* @__PURE__ */ r("div", { onClick: T, children: w }) : /* @__PURE__ */ n(
+        B ? /* @__PURE__ */ r("div", { onClick: O, children: B }) : /* @__PURE__ */ t(
           "button",
           {
             ref: f,
             type: "button",
-            onClick: T,
+            onClick: O,
             className: "Bear-NotificationCenter__trigger bear-relative bear-p-2 bear-rounded-lg bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-900 dark:hover:bear-text-white hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-800 bear-transition-colors",
             children: [
-              S ?? /* @__PURE__ */ r("svg", { className: "bear-w-6 bear-h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) }),
-              l > 0 && /* @__PURE__ */ r("span", { className: "Bear-NotificationCenter__badge bear-absolute bear-top-0 bear-right-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center bear-text-xs bear-font-medium bear-text-white bear-bg-pink-500 bear-rounded-full", children: l > 99 ? "99+" : l })
+              F ?? /* @__PURE__ */ r("svg", { className: "bear-w-6 bear-h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) }),
+              d > 0 && /* @__PURE__ */ r("span", { className: "Bear-NotificationCenter__badge bear-absolute bear-top-0 bear-right-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center bear-text-xs bear-font-medium bear-text-white bear-bg-pink-500 bear-rounded-full", children: d > 99 ? "99+" : d })
             ]
           }
         ),
-        m && typeof document < "u" && H(
-          /* @__PURE__ */ n(
+        m && typeof document < "u" && Z(
+          /* @__PURE__ */ t(
             "div",
             {
               "data-bear-notification-center": !0,
               className: "Bear-NotificationCenter__dropdown bear-fixed bear-w-[360px] bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-overflow-hidden",
-              style: { top: z.top, left: z.left, zIndex: q },
+              style: { top: I.top, left: I.left, zIndex: J },
               children: [
-                /* @__PURE__ */ n("div", { className: "Bear-NotificationCenter__header bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700", children: [
-                  /* @__PURE__ */ n("h3", { className: "Bear-NotificationCenter__title bear-text-sm bear-font-semibold bear-text-gray-900 dark:bear-text-white", children: [
+                /* @__PURE__ */ t("div", { className: "Bear-NotificationCenter__header bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700", children: [
+                  /* @__PURE__ */ t("h3", { className: "Bear-NotificationCenter__title bear-text-sm bear-font-semibold bear-text-gray-900 dark:bear-text-white", children: [
                     b.title,
-                    l > 0 && /* @__PURE__ */ n("span", { className: "bear-ml-2 bear-text-xs bear-font-normal bear-text-gray-500 dark:bear-text-zinc-400", children: [
+                    d > 0 && /* @__PURE__ */ t("span", { className: "bear-ml-2 bear-text-xs bear-font-normal bear-text-gray-500 dark:bear-text-zinc-400", children: [
                       "(",
-                      l,
+                      d,
                       " ",
                       b.new.toLowerCase(),
                       ")"
                     ] })
                   ] }),
-                  /* @__PURE__ */ n("div", { className: "bear-flex bear-gap-2", children: [
-                    i && l > 0 && /* @__PURE__ */ r(
+                  /* @__PURE__ */ t("div", { className: "bear-flex bear-gap-2", children: [
+                    l && d > 0 && /* @__PURE__ */ r(
                       "button",
                       {
                         type: "button",
-                        onClick: i,
+                        onClick: l,
                         className: "Bear-NotificationCenter__mark-all bear-text-xs bear-text-pink-400 hover:bear-text-pink-300 bear-transition-colors",
                         children: b.markAllRead
                       }
                     ),
-                    N && e.length > 0 && /* @__PURE__ */ r(
+                    v && e.length > 0 && /* @__PURE__ */ r(
                       "button",
                       {
                         type: "button",
-                        onClick: N,
+                        onClick: v,
                         className: "Bear-NotificationCenter__clear-all bear-text-xs bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-700 dark:hover:bear-text-zinc-300 bear-transition-colors",
                         children: b.clearAll
                       }
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ r("div", { className: "Bear-NotificationCenter__list bear-max-h-[400px] bear-overflow-y-auto", children: I.length === 0 ? /* @__PURE__ */ r("div", { className: "Bear-NotificationCenter__empty bear-py-8 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-zinc-500", children: b.noNotifications }) : I.map((t) => /* @__PURE__ */ r(
-                  J,
+                /* @__PURE__ */ r("div", { className: "Bear-NotificationCenter__list bear-max-h-[400px] bear-overflow-y-auto", children: T.length === 0 ? /* @__PURE__ */ r("div", { className: "Bear-NotificationCenter__empty bear-py-8 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-zinc-500", children: b.noNotifications }) : T.map((n) => /* @__PURE__ */ r(
+                  Q,
                   {
-                    notification: t,
+                    notification: n,
                     onRead: p,
                     onDismiss: k,
-                    onClick: d,
+                    onClick: h,
                     translations: b
                   },
-                  t.id
+                  n.id
                 )) }),
-                !v && e.length > a && /* @__PURE__ */ r("div", { className: "Bear-NotificationCenter__footer bear-border-t bear-border-gray-200 dark:bear-border-zinc-700", children: /* @__PURE__ */ n(
+                !N && e.length > a && /* @__PURE__ */ r("div", { className: "Bear-NotificationCenter__footer bear-border-t bear-border-gray-200 dark:bear-border-zinc-700", children: /* @__PURE__ */ t(
                   "button",
                   {
                     type: "button",
-                    onClick: () => D(!0),
+                    onClick: () => U(!0),
                     className: "bear-w-full bear-py-2 bear-text-sm bear-text-pink-500 dark:bear-text-pink-400 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700/50 bear-transition-colors",
                     children: [
                       b.showMore,
@@ -219,5 +225,5 @@ const J = ({
   );
 };
 export {
-  ae as NotificationCenter
+  ne as NotificationCenter
 };

package/dist/components/OTPInput/OTPInput.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),i=require("react"),j=require("../../utils/cn.cjs"),z=({length:t=6,value:f,onChange:l,onComplete:o,disabled:m=!1,error:k=!1,autoFocus:w=!0,mask:D=!1,size:x="md",separator:v,className:A})=>{const[u,d]=i.useState(Array(t).fill("")),s=i.useRef([]);i.useEffect(()=>{f!==void 0&&d(f.split("").concat(Array(t-f.length).fill("")).slice(0,t))},[f,t]),i.useEffect(()=>{w&&s.current[0]&&s.current[0].focus()},[w]);const p=i.useCallback(e=>{d(e);const r=e.join("");l==null||l(r),r.length===t&&e.every(a=>a!=="")&&(o==null||o(r))},[l,o,t]),P=(e,r)=>{var b;const a=r.target.value.slice(-1);if(!/^\d*$/.test(a)&&a!=="")return;const c=[...u];c[e]=a,p(c),a&&e<t-1&&((b=s.current[e+1])==null||b.focus())},R=(e,r)=>{var a,c,b;if(r.key==="Backspace")if(u[e]===""&&e>0){(a=s.current[e-1])==null||a.focus();const n=[...u];n[e-1]="",p(n)}else{const n=[...u];n[e]="",p(n)}else r.key==="ArrowLeft"&&e>0?(c=s.current[e-1])==null||c.focus():r.key==="ArrowRight"&&e<t-1&&((b=s.current[e+1])==null||b.focus())},g=e=>{var c;e.preventDefault();const r=e.clipboardData.getData("text").replace(/\D/g,"").slice(0,t),a=r.split("").concat(Array(t-r.length).fill(""));p(a),(c=s.current[Math.min(r.length,t-1)])==null||c.focus()},h={sm:"bear-w-8 bear-h-10 bear-text-lg",md:"bear-w-10 bear-h-12 bear-text-xl",lg:"bear-w-12 bear-h-14 bear-text-2xl"};return y.jsx("div",{className:j.cn("bear-flex bear-items-center bear-gap-2",A),children:u.map((e,r)=>y.jsxs("div",{className:"bear-flex bear-items-center",children:[y.jsx("input",{ref:a=>{s.current[r]=a},type:D?"password":"text",inputMode:"numeric",maxLength:1,value:e,onChange:a=>P(r,a),onKeyDown:a=>R(r,a),onPaste:g,disabled:m,className:j.cn("bear-text-center bear-font-semibold bear-rounded-lg bear-border bear-bg-zinc-800 bear-text-white bear-outline-none bear-transition-all",h[x],k?"bear-border-red-500":"bear-border-zinc-600 focus:bear-border-pink-500 focus:bear-ring-2 focus:bear-ring-pink-500/30",m&&"bear-opacity-50 bear-cursor-not-allowed")}),v&&(r+1)%v===0&&r<t-1&&y.jsx("span",{className:"bear-mx-2 bear-text-zinc-500 bear-text-xl",children:"-"})]},r))})};exports.OTPInput=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),f=require("react"),T=require("./OTPInput.const.cjs"),y=require("../../utils/cn.cjs"),M=({length:t=6,value:i,onChange:o,onComplete:n,onFinish:m,disabled:j=!1,error:d=!1,autoFocus:g=!0,mask:D=!1,size:S="md",separator:A,className:E,variant:w="boxed",layout:v="horizontal",stackOnNarrow:O=!0,cancelAutoJump:_=!1})=>{const[b,k]=f.useState(Array(t).fill("")),s=f.useRef([]);f.useEffect(()=>{i!==void 0&&k(i.split("").concat(Array(t-i.length).fill("")).slice(0,t))},[i,t]),f.useEffect(()=>{g&&s.current[0]&&s.current[0].focus()},[g]);const P=f.useCallback(e=>{n==null||n(e),m==null||m(e)},[n,m]),p=f.useCallback(e=>{k(e);const r=e.join("");o==null||o(r),r.length===t&&e.every(a=>a!=="")&&P(r)},[o,P,t]),z=(e,r)=>{var l;const a=r.target.value.slice(-1);if(!/^\d*$/.test(a)&&a!=="")return;const c=[...b];c[e]=a,p(c),a&&e<t-1&&!_&&((l=s.current[e+1])==null||l.focus())},L=(e,r)=>{var a,c,l;if(r.key==="Backspace")if(b[e]===""&&e>0){(a=s.current[e-1])==null||a.focus();const u=[...b];u[e-1]="",p(u)}else{const u=[...b];u[e]="",p(u)}else r.key==="ArrowLeft"&&e>0?(c=s.current[e-1])==null||c.focus():r.key==="ArrowRight"&&e<t-1&&((l=s.current[e+1])==null||l.focus())},N=e=>{var c;e.preventDefault();const r=e.clipboardData.getData("text").replace(/\D/g,"").slice(0,t),a=r.split("").concat(Array(t-r.length).fill(""));p(a),(c=s.current[Math.min(r.length,t-1)])==null||c.focus()},q=T.OTP_VARIANT_FRAME[w],R=T.OTP_CELL_RECT_CLASSES[S],I=w==="circle"?R.circle:R.rect;return x.jsx("div",{className:y.cn(v==="vertical"?"bear-flex bear-flex-col bear-items-center bear-gap-2":w==="circle"?"bear-flex bear-flex-row bear-flex-wrap bear-justify-center bear-gap-2":O?"max-sm:bear-grid max-sm:bear-grid-cols-3 max-sm:bear-gap-2 max-sm:bear-justify-items-center sm:bear-flex sm:bear-flex-row sm:bear-flex-wrap sm:bear-justify-center sm:bear-gap-2":"bear-flex bear-flex-row bear-flex-wrap bear-justify-center bear-gap-2",E),children:b.map((e,r)=>x.jsxs("div",{className:y.cn("bear-flex bear-items-center",v==="vertical"?"bear-flex-col":"bear-flex-row"),children:[x.jsx("input",{ref:a=>{s.current[r]=a},type:D?"password":"text",inputMode:"numeric",maxLength:1,value:e,onChange:a=>z(r,a),onKeyDown:a=>L(r,a),onPaste:N,disabled:j,className:y.cn("bear-text-center bear-font-semibold bear-outline-none bear-transition-all",I,q,"bear-bg-[var(--bear-bg-primary,#18181b)] bear-text-[var(--bear-text-primary,#fafafa)]",d?"bear-border-red-500":"bear-border-zinc-600 focus:bear-border-pink-500 focus:bear-ring-2 focus:bear-ring-pink-500/30",j&&"bear-opacity-50 bear-cursor-not-allowed")}),A&&(r+1)%A===0&&r<t-1&&x.jsx("span",{className:y.cn("bear-text-zinc-500 bear-text-xl",v==="vertical"?"bear-my-1":"bear-mx-2"),children:"—"})]},r))})};exports.OTPInput=M;

package/dist/components/OTPInput/OTPInput.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={sm:{rect:"bear-w-8 bear-h-10 bear-text-lg",circle:"bear-w-10 bear-h-10 bear-text-lg"},md:{rect:"bear-w-10 bear-h-12 bear-text-xl",circle:"bear-w-12 bear-h-12 bear-text-xl"},lg:{rect:"bear-w-12 bear-h-14 bear-text-2xl",circle:"bear-w-14 bear-h-14 bear-text-2xl"}},r={boxed:"bear-border bear-rounded-lg",outline:"bear-border-2 bear-rounded-lg",underline:"bear-border-0 bear-border-b-2 bear-rounded-none",circle:"bear-border bear-rounded-full"};exports.OTP_CELL_RECT_CLASSES=e;exports.OTP_VARIANT_FRAME=r;

package/dist/components/OTPInput/OTPInput.const.d.ts

@@ -0,0 +1,6 @@
+import { OTPInputVariant } from './OTPInput.types';
+export declare const OTP_CELL_RECT_CLASSES: Record<'sm' | 'md' | 'lg', {
+    rect: string;
+    circle: string;
+}>;
+export declare const OTP_VARIANT_FRAME: Record<OTPInputVariant, string>;

package/dist/components/OTPInput/OTPInput.const.js

@@ -0,0 +1,14 @@
+const e = {
+  sm: { rect: "bear-w-8 bear-h-10 bear-text-lg", circle: "bear-w-10 bear-h-10 bear-text-lg" },
+  md: { rect: "bear-w-10 bear-h-12 bear-text-xl", circle: "bear-w-12 bear-h-12 bear-text-xl" },
+  lg: { rect: "bear-w-12 bear-h-14 bear-text-2xl", circle: "bear-w-14 bear-h-14 bear-text-2xl" }
+}, r = {
+  boxed: "bear-border bear-rounded-lg",
+  outline: "bear-border-2 bear-rounded-lg",
+  underline: "bear-border-0 bear-border-b-2 bear-rounded-none",
+  circle: "bear-border bear-rounded-full"
+};
+export {
+  e as OTP_CELL_RECT_CLASSES,
+  r as OTP_VARIANT_FRAME
+};

package/dist/components/OTPInput/OTPInput.js

@@ -1,83 +1,117 @@
-import { jsx as p, jsxs as R } from "react/jsx-runtime";
-import { useState as g, useRef as K, useEffect as d, useCallback as L } from "react";
-import { cn as k } from "../../utils/cn.js";
-const I = ({
+import { jsx as w, jsxs as K } from "react/jsx-runtime";
+import { useState as V, useRef as B, useEffect as R, useCallback as d } from "react";
+import { OTP_CELL_RECT_CLASSES as $, OTP_VARIANT_FRAME as q } from "./OTPInput.const.js";
+import { cn as n } from "../../utils/cn.js";
+const U = ({
   length: t = 6,
   value: o,
   onChange: i,
-  onComplete: l,
-  disabled: m = !1,
-  error: D = !1,
-  autoFocus: w = !0,
-  mask: A = !1,
-  size: h = "md",
-  separator: y,
-  className: j
+  onComplete: u,
+  onFinish: m,
+  disabled: v = !1,
+  error: z = !1,
+  autoFocus: A = !0,
+  mask: E = !1,
+  size: L = "md",
+  separator: g,
+  className: N,
+  variant: x = "boxed",
+  layout: y = "horizontal",
+  stackOnNarrow: P = !0,
+  cancelAutoJump: S = !1
 }) => {
-  const [b, v] = g(Array(t).fill("")), s = K([]);
-  d(() => {
-    o !== void 0 && v(o.split("").concat(Array(t - o.length).fill("")).slice(0, t));
-  }, [o, t]), d(() => {
-    w && s.current[0] && s.current[0].focus();
-  }, [w]);
-  const n = L((e) => {
-    v(e);
+  const [f, j] = V(Array(t).fill("")), s = B([]);
+  R(() => {
+    o !== void 0 && j(o.split("").concat(Array(t - o.length).fill("")).slice(0, t));
+  }, [o, t]), R(() => {
+    A && s.current[0] && s.current[0].focus();
+  }, [A]);
+  const k = d((e) => {
+    u == null || u(e), m == null || m(e);
+  }, [u, m]), p = d((e) => {
+    j(e);
     const r = e.join("");
-    i == null || i(r), r.length === t && e.every((a) => a !== "") && (l == null || l(r));
-  }, [i, l, t]), x = (e, r) => {
-    var f;
+    i == null || i(r), r.length === t && e.every((a) => a !== "") && k(r);
+  }, [i, k, t]), T = (e, r) => {
+    var b;
     const a = r.target.value.slice(-1);
     if (!/^\d*$/.test(a) && a !== "") return;
-    const c = [...b];
-    c[e] = a, n(c), a && e < t - 1 && ((f = s.current[e + 1]) == null || f.focus());
-  }, z = (e, r) => {
-    var a, c, f;
+    const c = [...f];
+    c[e] = a, p(c), a && e < t - 1 && !S && ((b = s.current[e + 1]) == null || b.focus());
+  }, _ = (e, r) => {
+    var a, c, b;
     if (r.key === "Backspace")
-      if (b[e] === "" && e > 0) {
+      if (f[e] === "" && e > 0) {
         (a = s.current[e - 1]) == null || a.focus();
-        const u = [...b];
-        u[e - 1] = "", n(u);
+        const l = [...f];
+        l[e - 1] = "", p(l);
       } else {
-        const u = [...b];
-        u[e] = "", n(u);
+        const l = [...f];
+        l[e] = "", p(l);
       }
-    else r.key === "ArrowLeft" && e > 0 ? (c = s.current[e - 1]) == null || c.focus() : r.key === "ArrowRight" && e < t - 1 && ((f = s.current[e + 1]) == null || f.focus());
-  }, N = (e) => {
+    else r.key === "ArrowLeft" && e > 0 ? (c = s.current[e - 1]) == null || c.focus() : r.key === "ArrowRight" && e < t - 1 && ((b = s.current[e + 1]) == null || b.focus());
+  }, M = (e) => {
     var c;
     e.preventDefault();
     const r = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, t), a = r.split("").concat(Array(t - r.length).fill(""));
-    n(a), (c = s.current[Math.min(r.length, t - 1)]) == null || c.focus();
-  }, P = {
-    sm: "bear-w-8 bear-h-10 bear-text-lg",
-    md: "bear-w-10 bear-h-12 bear-text-xl",
-    lg: "bear-w-12 bear-h-14 bear-text-2xl"
-  };
-  return /* @__PURE__ */ p("div", { className: k("bear-flex bear-items-center bear-gap-2", j), children: b.map((e, r) => /* @__PURE__ */ R("div", { className: "bear-flex bear-items-center", children: [
-    /* @__PURE__ */ p(
-      "input",
-      {
-        ref: (a) => {
-          s.current[r] = a;
+    p(a), (c = s.current[Math.min(r.length, t - 1)]) == null || c.focus();
+  }, O = q[x], D = $[L], I = x === "circle" ? D.circle : D.rect;
+  return /* @__PURE__ */ w(
+    "div",
+    {
+      className: n(
+        y === "vertical" ? "bear-flex bear-flex-col bear-items-center bear-gap-2" : x === "circle" ? "bear-flex bear-flex-row bear-flex-wrap bear-justify-center bear-gap-2" : P ? "max-sm:bear-grid max-sm:bear-grid-cols-3 max-sm:bear-gap-2 max-sm:bear-justify-items-center sm:bear-flex sm:bear-flex-row sm:bear-flex-wrap sm:bear-justify-center sm:bear-gap-2" : "bear-flex bear-flex-row bear-flex-wrap bear-justify-center bear-gap-2",
+        N
+      ),
+      children: f.map((e, r) => /* @__PURE__ */ K(
+        "div",
+        {
+          className: n(
+            "bear-flex bear-items-center",
+            y === "vertical" ? "bear-flex-col" : "bear-flex-row"
+          ),
+          children: [
+            /* @__PURE__ */ w(
+              "input",
+              {
+                ref: (a) => {
+                  s.current[r] = a;
+                },
+                type: E ? "password" : "text",
+                inputMode: "numeric",
+                maxLength: 1,
+                value: e,
+                onChange: (a) => T(r, a),
+                onKeyDown: (a) => _(r, a),
+                onPaste: M,
+                disabled: v,
+                className: n(
+                  "bear-text-center bear-font-semibold bear-outline-none bear-transition-all",
+                  I,
+                  O,
+                  "bear-bg-[var(--bear-bg-primary,#18181b)] bear-text-[var(--bear-text-primary,#fafafa)]",
+                  z ? "bear-border-red-500" : "bear-border-zinc-600 focus:bear-border-pink-500 focus:bear-ring-2 focus:bear-ring-pink-500/30",
+                  v && "bear-opacity-50 bear-cursor-not-allowed"
+                )
+              }
+            ),
+            g && (r + 1) % g === 0 && r < t - 1 && /* @__PURE__ */ w(
+              "span",
+              {
+                className: n(
+                  "bear-text-zinc-500 bear-text-xl",
+                  y === "vertical" ? "bear-my-1" : "bear-mx-2"
+                ),
+                children: "—"
+              }
+            )
+          ]
         },
-        type: A ? "password" : "text",
-        inputMode: "numeric",
-        maxLength: 1,
-        value: e,
-        onChange: (a) => x(r, a),
-        onKeyDown: (a) => z(r, a),
-        onPaste: N,
-        disabled: m,
-        className: k(
-          "bear-text-center bear-font-semibold bear-rounded-lg bear-border bear-bg-zinc-800 bear-text-white bear-outline-none bear-transition-all",
-          P[h],
-          D ? "bear-border-red-500" : "bear-border-zinc-600 focus:bear-border-pink-500 focus:bear-ring-2 focus:bear-ring-pink-500/30",
-          m && "bear-opacity-50 bear-cursor-not-allowed"
-        )
-      }
-    ),
-    y && (r + 1) % y === 0 && r < t - 1 && /* @__PURE__ */ p("span", { className: "bear-mx-2 bear-text-zinc-500 bear-text-xl", children: "-" })
-  ] }, r)) });
+        r
+      ))
+    }
+  );
 };
 export {
-  I as OTPInput
+  U as OTPInput
 };

package/dist/components/OTPInput/OTPInput.types.d.ts

@@ -1,8 +1,11 @@
+export type OTPInputVariant = 'boxed' | 'outline' | 'underline' | 'circle';
+export type OTPInputLayout = 'horizontal' | 'vertical';
 export interface OTPInputProps {
     length?: number;
     value?: string;
     onChange?: (value: string) => void;
     onComplete?: (value: string) => void;
+    onFinish?: (value: string) => void;
     disabled?: boolean;
     error?: boolean;
     autoFocus?: boolean;
@@ -10,4 +13,8 @@ export interface OTPInputProps {
     size?: 'sm' | 'md' | 'lg';
     separator?: number;
     className?: string;
+    variant?: OTPInputVariant;
+    layout?: OTPInputLayout;
+    stackOnNarrow?: boolean;
+    cancelAutoJump?: boolean;
 }

package/dist/components/PhoneInput/PhoneInput.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("react"),J=require("react-dom"),l=require("../../utils/cn.cjs"),i=require("./PhoneInput.const.cjs"),b=require("./PhoneInput.utils.cjs"),K=({value:t,onChange:c,defaultCountry:j=i.DEFAULT_COUNTRY_CODE,placeholder:q,label:E,helperText:y,error:m,disabled:h=!1,required:M=!1,size:z="md",variant:H="default",onlyCountries:p,excludeCountries:u,preferredCountries:B=[],searchable:_=!0,showFlags:R=!0,showDialCode:W=!0,className:Z,testId:Q,translations:O,icon:X})=>{const[d,P]=o.useState(!1),[N,g]=o.useState(""),[I,T]=o.useState(""),[L,Y]=o.useState({top:0,left:0}),D=o.useRef(null),k=o.useRef(null),U=o.useRef(null),w=o.useRef(null),S=o.useMemo(()=>({...i.PHONE_INPUT_DEFAULT_TRANSLATIONS,...O}),[O]),f=o.useMemo(()=>{let e=[...i.COUNTRIES];if(p!=null&&p.length){const s=new Set(p.map(n=>n.toUpperCase()));e=e.filter(n=>s.has(n.code))}if(u!=null&&u.length){const s=new Set(u.map(n=>n.toUpperCase()));e=e.filter(n=>!s.has(n.code))}return b.sortCountriesWithPreferred(e,B)},[p,u,B]),a=o.useMemo(()=>{const e=(t==null?void 0:t.countryCode)||j;return b.getCountryByCode(f,e)||f[0]},[t==null?void 0:t.countryCode,j,f]),A=o.useMemo(()=>b.filterCountries(f,N),[f,N]);o.useEffect(()=>{if((t==null?void 0:t.number)!==void 0){const e=b.formatPhoneNumber(t.number,a==null?void 0:a.format);T(e)}},[t==null?void 0:t.number,a==null?void 0:a.format]),o.useEffect(()=>{if(d&&k.current){const e=k.current.getBoundingClientRect(),s=window.scrollY||document.documentElement.scrollTop,n=window.scrollX||document.documentElement.scrollLeft;Y({top:e.bottom+s+4,left:e.left+n})}},[d]),o.useEffect(()=>{d&&_&&w.current&&w.current.focus()},[d,_]),o.useEffect(()=>{const e=s=>{var x,V;const n=s.target;(x=D.current)!=null&&x.contains(n)||(V=n.closest)!=null&&V.call(n,"[data-bear-phone-dropdown]")||(P(!1),g(""))};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const F=o.useCallback(e=>{var n;const s=b.createPhoneValue(e,(t==null?void 0:t.number)||I);c==null||c(s),P(!1),g(""),(n=U.current)==null||n.focus()},[t==null?void 0:t.number,I,c]),G=o.useCallback(e=>{const s=b.parsePhoneDigits(e.target.value),n=b.formatPhoneNumber(s,a==null?void 0:a.format);if(T(n),a){const x=b.createPhoneValue(a,s);c==null||c(x)}},[a,c]);return r.jsxs("div",{ref:D,className:l.cn("Bear-PhoneInput bear-relative",Z),"data-testid":Q,children:[E&&r.jsxs("label",{className:"Bear-PhoneInput__label bear-block bear-text-sm bear-font-medium bear-text-zinc-700 dark:bear-text-zinc-300 bear-mb-1.5",children:[E,M&&r.jsx("span",{className:"bear-text-red-500 bear-ml-0.5",children:"*"})]}),r.jsxs("div",{className:l.cn("Bear-PhoneInput__wrapper bear-flex bear-items-center bear-rounded-lg bear-border bear-transition-colors",i.PHONE_INPUT_VARIANT_CLASSES[H],m?"bear-border-red-500":"focus-within:bear-border-pink-500",h&&"bear-opacity-50 bear-cursor-not-allowed"),children:[r.jsxs("button",{ref:k,type:"button",onClick:()=>!h&&P(!d),disabled:h,className:l.cn("Bear-PhoneInput__country-trigger bear-flex bear-items-center bear-gap-1 bear-border-r bear-border-zinc-300 dark:bear-border-zinc-600 bear-shrink-0 bear-text-gray-900 dark:bear-text-white",i.PHONE_INPUT_SIZE_CLASSES[z]),children:[R&&a&&r.jsx("span",{className:"Bear-PhoneInput__flag bear-text-lg",children:a.flag}),W&&a&&r.jsx("span",{className:"Bear-PhoneInput__dial-code bear-text-gray-600 dark:bear-text-zinc-400",children:a.dialCode}),X??r.jsx("svg",{className:l.cn("Bear-PhoneInput__chevron bear-w-4 bear-h-4 bear-text-gray-500 dark:bear-text-zinc-400 bear-transition-transform",d&&"bear-rotate-180"),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]}),r.jsx("input",{ref:U,type:"tel",value:I,onChange:G,placeholder:q||S.placeholder,disabled:h,className:l.cn("Bear-PhoneInput__input bear-flex-1 bear-bg-transparent bear-border-0 bear-outline-none bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-400 dark:placeholder:bear-text-zinc-500",i.PHONE_INPUT_SIZE_CLASSES[z])})]}),m&&r.jsx("p",{className:"Bear-PhoneInput__error bear-mt-1 bear-text-xs bear-text-red-400",children:m}),y&&!m&&r.jsx("p",{className:"Bear-PhoneInput__helper bear-mt-1 bear-text-xs bear-text-zinc-500 dark:bear-text-zinc-400",children:y}),d&&typeof document<"u"&&J.createPortal(r.jsxs("div",{"data-bear-phone-dropdown":!0,className:"Bear-PhoneInput__dropdown bear-fixed bear-w-64 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-zinc-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-overflow-hidden",style:{top:L.top,left:L.left,zIndex:i.PHONE_INPUT_DROPDOWN_Z_INDEX},children:[_&&r.jsx("div",{className:"Bear-PhoneInput__search bear-p-2 bear-border-b bear-border-zinc-200 dark:bear-border-zinc-700",children:r.jsx("input",{ref:w,type:"text",value:N,onChange:e=>g(e.target.value),placeholder:S.searchCountry,className:"bear-w-full bear-px-3 bear-py-2 bear-bg-gray-50 dark:bear-bg-zinc-700 bear-border bear-border-zinc-200 dark:bear-border-zinc-600 bear-rounded bear-text-sm bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-400 dark:placeholder:bear-text-zinc-500 bear-outline-none focus:bear-border-pink-500"})}),r.jsx("div",{className:"Bear-PhoneInput__country-list bear-max-h-60 bear-overflow-y-auto",children:A.length===0?r.jsx("div",{className:"bear-px-3 bear-py-4 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-zinc-500",children:S.noResults}):A.map(e=>r.jsxs("button",{type:"button",onClick:()=>F(e),className:l.cn("Bear-PhoneInput__country-option bear-w-full bear-flex bear-items-center bear-gap-3 bear-px-3 bear-py-2 bear-text-left bear-text-sm bear-transition-colors",(a==null?void 0:a.code)===e.code?"bear-bg-pink-500/20 bear-text-pink-600 dark:bear-text-pink-400":"bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700"),children:[R&&r.jsx("span",{className:"Bear-PhoneInput__country-flag bear-text-lg",children:e.flag}),r.jsx("span",{className:"Bear-PhoneInput__country-name bear-flex-1",children:e.name}),r.jsx("span",{className:"Bear-PhoneInput__country-dial bear-text-gray-500 dark:bear-text-zinc-500",children:e.dialCode})]},e.code))})]}),document.body)]})};exports.PhoneInput=K;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("react"),G=require("react-dom"),p=require("../../utils/cn.cjs"),l=require("./PhoneInput.const.cjs"),i=require("./PhoneInput.utils.cjs"),J=({value:a,onChange:c,defaultCountry:E=l.DEFAULT_COUNTRY_CODE,placeholder:V,label:j,helperText:z,error:m,disabled:x=!1,required:q=!1,size:y="md",variant:H="default",onlyCountries:u,excludeCountries:f,preferredCountries:B=[],searchable:_=!0,showFlags:R=!0,showDialCode:W=!0,className:Z,testId:Q,translations:O,icon:F})=>{const[d,P]=o.useState(!1),[N,w]=o.useState(""),[g,L]=o.useState(""),[T,X]=o.useState({top:0,left:0}),D=o.useRef(null),I=o.useRef(null),U=o.useRef(null),k=o.useRef(null),S=o.useMemo(()=>({...l.PHONE_INPUT_DEFAULT_TRANSLATIONS,...O}),[O]),h=o.useMemo(()=>{let e=[...l.COUNTRIES];if(u!=null&&u.length){const s=new Set(u.map(t=>t.toUpperCase()));e=e.filter(t=>s.has(t.code))}if(f!=null&&f.length){const s=new Set(f.map(t=>t.toUpperCase()));e=e.filter(t=>!s.has(t.code))}return i.sortCountriesWithPreferred(e,B)},[u,f,B]),n=o.useMemo(()=>{const e=(a==null?void 0:a.countryCode)||E;return i.getCountryByCode(h,e)||h[0]},[a==null?void 0:a.countryCode,E,h]),A=o.useMemo(()=>i.filterCountries(h,N),[h,N]);o.useEffect(()=>{if((a==null?void 0:a.number)!==void 0){const e=i.formatPhoneNumber(a.number,n==null?void 0:n.format);L(e)}},[a==null?void 0:a.number,n==null?void 0:n.format]),o.useEffect(()=>{if(!d||!I.current)return;const e=256,s=()=>{const t=I.current.getBoundingClientRect();let b=t.left;b=Math.max(8,Math.min(b,window.innerWidth-e-8)),X({top:t.bottom+4,left:b})};return s(),window.addEventListener("resize",s),window.addEventListener("scroll",s,!0),()=>{window.removeEventListener("resize",s),window.removeEventListener("scroll",s,!0)}},[d]),o.useEffect(()=>{d&&_&&k.current&&k.current.focus()},[d,_]),o.useEffect(()=>{const e=s=>{var b,M;const t=s.target;(b=D.current)!=null&&b.contains(t)||(M=t.closest)!=null&&M.call(t,"[data-bear-phone-dropdown]")||(P(!1),w(""))};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const Y=o.useCallback(e=>{var t;const s=i.createPhoneValue(e,(a==null?void 0:a.number)||g);c==null||c(s),P(!1),w(""),(t=U.current)==null||t.focus()},[a==null?void 0:a.number,g,c]),v=o.useCallback(e=>{const s=i.parsePhoneDigits(e.target.value),t=i.formatPhoneNumber(s,n==null?void 0:n.format);if(L(t),n){const b=i.createPhoneValue(n,s);c==null||c(b)}},[n,c]);return r.jsxs("div",{ref:D,className:p.cn("Bear-PhoneInput bear-relative",Z),"data-testid":Q,children:[j&&r.jsxs("label",{className:"Bear-PhoneInput__label bear-block bear-text-sm bear-font-medium bear-text-zinc-700 dark:bear-text-zinc-300 bear-mb-1.5",children:[j,q&&r.jsx("span",{className:"bear-text-red-500 bear-ml-0.5",children:"*"})]}),r.jsxs("div",{className:p.cn("Bear-PhoneInput__wrapper bear-flex bear-items-center bear-rounded-lg bear-border bear-transition-colors",l.PHONE_INPUT_VARIANT_CLASSES[H],m?"bear-border-red-500":"focus-within:bear-border-pink-500",x&&"bear-opacity-50 bear-cursor-not-allowed"),children:[r.jsxs("button",{ref:I,type:"button",onClick:()=>!x&&P(!d),disabled:x,className:p.cn("Bear-PhoneInput__country-trigger bear-flex bear-items-center bear-gap-1 bear-border-r bear-border-zinc-300 dark:bear-border-zinc-600 bear-shrink-0 bear-text-gray-900 dark:bear-text-white",l.PHONE_INPUT_SIZE_CLASSES[y]),children:[R&&n&&r.jsx("span",{className:"Bear-PhoneInput__flag bear-text-lg",children:n.flag}),W&&n&&r.jsx("span",{className:"Bear-PhoneInput__dial-code bear-text-gray-600 dark:bear-text-zinc-400",children:n.dialCode}),F??r.jsx("svg",{className:p.cn("Bear-PhoneInput__chevron bear-w-4 bear-h-4 bear-text-gray-500 dark:bear-text-zinc-400 bear-transition-transform",d&&"bear-rotate-180"),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]}),r.jsx("input",{ref:U,type:"tel",value:g,onChange:v,placeholder:V||S.placeholder,disabled:x,className:p.cn("Bear-PhoneInput__input bear-flex-1 bear-bg-transparent bear-border-0 bear-outline-none bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-400 dark:placeholder:bear-text-zinc-500",l.PHONE_INPUT_SIZE_CLASSES[y])})]}),m&&r.jsx("p",{className:"Bear-PhoneInput__error bear-mt-1 bear-text-xs bear-text-red-400",children:m}),z&&!m&&r.jsx("p",{className:"Bear-PhoneInput__helper bear-mt-1 bear-text-xs bear-text-zinc-500 dark:bear-text-zinc-400",children:z}),d&&typeof document<"u"&&G.createPortal(r.jsxs("div",{"data-bear-phone-dropdown":!0,className:"Bear-PhoneInput__dropdown bear-fixed bear-w-64 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-zinc-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-overflow-hidden",style:{top:T.top,left:T.left,zIndex:l.PHONE_INPUT_DROPDOWN_Z_INDEX},children:[_&&r.jsx("div",{className:"Bear-PhoneInput__search bear-p-2 bear-border-b bear-border-zinc-200 dark:bear-border-zinc-700",children:r.jsx("input",{ref:k,type:"text",value:N,onChange:e=>w(e.target.value),placeholder:S.searchCountry,className:"bear-w-full bear-px-3 bear-py-2 bear-bg-gray-50 dark:bear-bg-zinc-700 bear-border bear-border-zinc-200 dark:bear-border-zinc-600 bear-rounded bear-text-sm bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-400 dark:placeholder:bear-text-zinc-500 bear-outline-none focus:bear-border-pink-500"})}),r.jsx("div",{className:"Bear-PhoneInput__country-list bear-max-h-60 bear-overflow-y-auto",children:A.length===0?r.jsx("div",{className:"bear-px-3 bear-py-4 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-zinc-500",children:S.noResults}):A.map(e=>r.jsxs("button",{type:"button",onClick:()=>Y(e),className:p.cn("Bear-PhoneInput__country-option bear-w-full bear-flex bear-items-center bear-gap-3 bear-px-3 bear-py-2 bear-text-left bear-text-sm bear-transition-colors",(n==null?void 0:n.code)===e.code?"bear-bg-pink-500/20 bear-text-pink-600 dark:bear-text-pink-400":"bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700"),children:[R&&r.jsx("span",{className:"Bear-PhoneInput__country-flag bear-text-lg",children:e.flag}),r.jsx("span",{className:"Bear-PhoneInput__country-name bear-flex-1",children:e.name}),r.jsx("span",{className:"Bear-PhoneInput__country-dial bear-text-gray-500 dark:bear-text-zinc-500",children:e.dialCode})]},e.code))})]}),document.body)]})};exports.PhoneInput=J;