@forgedevstack/bear 1.0.4 → 1.0.6

package/dist/components/PhoneInput/PhoneInput.const.js

@@ -0,0 +1,82 @@
+const a = {
+  placeholder: "Phone number",
+  searchCountry: "Search country...",
+  noResults: "No countries found"
+}, e = {
+  sm: "bear-py-1.5 bear-px-3 bear-text-sm",
+  md: "bear-py-2 bear-px-4 bear-text-sm",
+  lg: "bear-py-2.5 bear-px-5 bear-text-base"
+}, o = {
+  default: "bear-bg-white dark:bear-bg-zinc-800 bear-border-zinc-300 dark:bear-border-zinc-600",
+  filled: "bear-bg-zinc-100 dark:bear-bg-zinc-700 bear-border-transparent",
+  outline: "bear-bg-transparent bear-border-zinc-300 dark:bear-border-zinc-500"
+}, d = 9999, l = [
+  { code: "US", name: "United States", dialCode: "+1", flag: "🇺🇸", format: "(###) ###-####" },
+  { code: "GB", name: "United Kingdom", dialCode: "+44", flag: "🇬🇧", format: "#### ### ####" },
+  { code: "CA", name: "Canada", dialCode: "+1", flag: "🇨🇦", format: "(###) ###-####" },
+  { code: "AU", name: "Australia", dialCode: "+61", flag: "🇦🇺", format: "#### ### ###" },
+  { code: "DE", name: "Germany", dialCode: "+49", flag: "🇩🇪", format: "#### #######" },
+  { code: "FR", name: "France", dialCode: "+33", flag: "🇫🇷", format: "## ## ## ## ##" },
+  { code: "IT", name: "Italy", dialCode: "+39", flag: "🇮🇹", format: "### ### ####" },
+  { code: "ES", name: "Spain", dialCode: "+34", flag: "🇪🇸", format: "### ## ## ##" },
+  { code: "NL", name: "Netherlands", dialCode: "+31", flag: "🇳🇱", format: "## ### ####" },
+  { code: "BE", name: "Belgium", dialCode: "+32", flag: "🇧🇪", format: "### ## ## ##" },
+  { code: "CH", name: "Switzerland", dialCode: "+41", flag: "🇨🇭", format: "## ### ## ##" },
+  { code: "AT", name: "Austria", dialCode: "+43", flag: "🇦🇹", format: "### #######" },
+  { code: "SE", name: "Sweden", dialCode: "+46", flag: "🇸🇪", format: "##-### ## ##" },
+  { code: "NO", name: "Norway", dialCode: "+47", flag: "🇳🇴", format: "### ## ###" },
+  { code: "DK", name: "Denmark", dialCode: "+45", flag: "🇩🇰", format: "## ## ## ##" },
+  { code: "FI", name: "Finland", dialCode: "+358", flag: "🇫🇮", format: "## ### ####" },
+  { code: "PL", name: "Poland", dialCode: "+48", flag: "🇵🇱", format: "### ### ###" },
+  { code: "PT", name: "Portugal", dialCode: "+351", flag: "🇵🇹", format: "### ### ###" },
+  { code: "IE", name: "Ireland", dialCode: "+353", flag: "🇮🇪", format: "## ### ####" },
+  { code: "GR", name: "Greece", dialCode: "+30", flag: "🇬🇷", format: "### ### ####" },
+  { code: "CZ", name: "Czech Republic", dialCode: "+420", flag: "🇨🇿", format: "### ### ###" },
+  { code: "HU", name: "Hungary", dialCode: "+36", flag: "🇭🇺", format: "## ### ####" },
+  { code: "RO", name: "Romania", dialCode: "+40", flag: "🇷🇴", format: "### ### ###" },
+  { code: "BG", name: "Bulgaria", dialCode: "+359", flag: "🇧🇬", format: "### ### ###" },
+  { code: "HR", name: "Croatia", dialCode: "+385", flag: "🇭🇷", format: "## ### ####" },
+  { code: "SK", name: "Slovakia", dialCode: "+421", flag: "🇸🇰", format: "### ### ###" },
+  { code: "SI", name: "Slovenia", dialCode: "+386", flag: "🇸🇮", format: "## ### ###" },
+  { code: "LT", name: "Lithuania", dialCode: "+370", flag: "🇱🇹", format: "### #####" },
+  { code: "LV", name: "Latvia", dialCode: "+371", flag: "🇱🇻", format: "## ### ###" },
+  { code: "EE", name: "Estonia", dialCode: "+372", flag: "🇪🇪", format: "### ####" },
+  { code: "JP", name: "Japan", dialCode: "+81", flag: "🇯🇵", format: "##-####-####" },
+  { code: "KR", name: "South Korea", dialCode: "+82", flag: "🇰🇷", format: "##-####-####" },
+  { code: "CN", name: "China", dialCode: "+86", flag: "🇨🇳", format: "### #### ####" },
+  { code: "IN", name: "India", dialCode: "+91", flag: "🇮🇳", format: "##### #####" },
+  { code: "SG", name: "Singapore", dialCode: "+65", flag: "🇸🇬", format: "#### ####" },
+  { code: "HK", name: "Hong Kong", dialCode: "+852", flag: "🇭🇰", format: "#### ####" },
+  { code: "TW", name: "Taiwan", dialCode: "+886", flag: "🇹🇼", format: "### ### ###" },
+  { code: "TH", name: "Thailand", dialCode: "+66", flag: "🇹🇭", format: "## ### ####" },
+  { code: "MY", name: "Malaysia", dialCode: "+60", flag: "🇲🇾", format: "##-### ####" },
+  { code: "ID", name: "Indonesia", dialCode: "+62", flag: "🇮🇩", format: "### ### ####" },
+  { code: "PH", name: "Philippines", dialCode: "+63", flag: "🇵🇭", format: "### ### ####" },
+  { code: "VN", name: "Vietnam", dialCode: "+84", flag: "🇻🇳", format: "### ### ####" },
+  { code: "RU", name: "Russia", dialCode: "+7", flag: "🇷🇺", format: "### ###-##-##" },
+  { code: "UA", name: "Ukraine", dialCode: "+380", flag: "🇺🇦", format: "## ### ## ##" },
+  { code: "TR", name: "Turkey", dialCode: "+90", flag: "🇹🇷", format: "### ### ## ##" },
+  { code: "IL", name: "Israel", dialCode: "+972", flag: "🇮🇱", format: "##-###-####" },
+  { code: "AE", name: "United Arab Emirates", dialCode: "+971", flag: "🇦🇪", format: "## ### ####" },
+  { code: "SA", name: "Saudi Arabia", dialCode: "+966", flag: "🇸🇦", format: "## ### ####" },
+  { code: "EG", name: "Egypt", dialCode: "+20", flag: "🇪🇬", format: "### ### ####" },
+  { code: "ZA", name: "South Africa", dialCode: "+27", flag: "🇿🇦", format: "## ### ####" },
+  { code: "NG", name: "Nigeria", dialCode: "+234", flag: "🇳🇬", format: "### ### ####" },
+  { code: "KE", name: "Kenya", dialCode: "+254", flag: "🇰🇪", format: "### ### ###" },
+  { code: "BR", name: "Brazil", dialCode: "+55", flag: "🇧🇷", format: "(##) #####-####" },
+  { code: "MX", name: "Mexico", dialCode: "+52", flag: "🇲🇽", format: "## #### ####" },
+  { code: "AR", name: "Argentina", dialCode: "+54", flag: "🇦🇷", format: "## ####-####" },
+  { code: "CO", name: "Colombia", dialCode: "+57", flag: "🇨🇴", format: "### ### ####" },
+  { code: "CL", name: "Chile", dialCode: "+56", flag: "🇨🇱", format: "# #### ####" },
+  { code: "PE", name: "Peru", dialCode: "+51", flag: "🇵🇪", format: "### ### ###" },
+  { code: "VE", name: "Venezuela", dialCode: "+58", flag: "🇻🇪", format: "### ### ####" },
+  { code: "NZ", name: "New Zealand", dialCode: "+64", flag: "🇳🇿", format: "## ### ####" }
+], m = "US";
+export {
+  l as COUNTRIES,
+  m as DEFAULT_COUNTRY_CODE,
+  a as PHONE_INPUT_DEFAULT_TRANSLATIONS,
+  d as PHONE_INPUT_DROPDOWN_Z_INDEX,
+  e as PHONE_INPUT_SIZE_CLASSES,
+  o as PHONE_INPUT_VARIANT_CLASSES
+};

package/dist/components/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { PhoneInputProps } from './PhoneInput.types';
+/**
+ * PhoneInput - International phone number input
+ *
+ * @example
+ * ```tsx
+ * <PhoneInput
+ *   value={phoneValue}
+ *   onChange={setPhoneValue}
+ *   defaultCountry="US"
+ *   preferredCountries={['US', 'GB', 'CA']}
+ * />
+ * ```
+ */
+export declare const PhoneInput: FC<PhoneInputProps>;

package/dist/components/PhoneInput/PhoneInput.js

@@ -0,0 +1,194 @@
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { useState as u, useRef as x, useMemo as _, useEffect as N, useCallback as M } from "react";
+import { createPortal as re } from "react-dom";
+import { cn as s } from "../../utils/cn.js";
+import { PHONE_INPUT_DEFAULT_TRANSLATIONS as te, COUNTRIES as ae, DEFAULT_COUNTRY_CODE as ne, PHONE_INPUT_SIZE_CLASSES as Q, PHONE_INPUT_VARIANT_CLASSES as oe, PHONE_INPUT_DROPDOWN_Z_INDEX as be } from "./PhoneInput.const.js";
+import { sortCountriesWithPreferred as ce, getCountryByCode as de, filterCountries as se, formatPhoneNumber as X, createPhoneValue as Y, parsePhoneDigits as ie } from "./PhoneInput.utils.js";
+const xe = ({
+  value: r,
+  onChange: b,
+  defaultCountry: E = ne,
+  placeholder: Z,
+  label: S,
+  helperText: O,
+  error: m,
+  disabled: f = !1,
+  required: F = !1,
+  size: R = "md",
+  variant: q = "default",
+  onlyCountries: i,
+  excludeCountries: l,
+  preferredCountries: T = [],
+  searchable: g = !0,
+  showFlags: L = !0,
+  showDialCode: G = !0,
+  className: J,
+  testId: K,
+  translations: D,
+  icon: $
+}) => {
+  const [c, k] = u(!1), [P, w] = u(""), [I, U] = u(""), [A, C] = u({ top: 0, left: 0 }), V = x(null), z = x(null), H = x(null), y = x(null), B = _(() => ({
+    ...te,
+    ...D
+  }), [D]), p = _(() => {
+    let e = [...ae];
+    if (i != null && i.length) {
+      const o = new Set(i.map((a) => a.toUpperCase()));
+      e = e.filter((a) => o.has(a.code));
+    }
+    if (l != null && l.length) {
+      const o = new Set(l.map((a) => a.toUpperCase()));
+      e = e.filter((a) => !o.has(a.code));
+    }
+    return ce(e, T);
+  }, [i, l, T]), t = _(() => {
+    const e = (r == null ? void 0 : r.countryCode) || E;
+    return de(p, e) || p[0];
+  }, [r == null ? void 0 : r.countryCode, E, p]), j = _(() => se(p, P), [p, P]);
+  N(() => {
+    if ((r == null ? void 0 : r.number) !== void 0) {
+      const e = X(r.number, t == null ? void 0 : t.format);
+      U(e);
+    }
+  }, [r == null ? void 0 : r.number, t == null ? void 0 : t.format]), N(() => {
+    if (c && z.current) {
+      const e = z.current.getBoundingClientRect(), o = window.scrollY || document.documentElement.scrollTop, a = window.scrollX || document.documentElement.scrollLeft;
+      C({
+        top: e.bottom + o + 4,
+        left: e.left + a
+      });
+    }
+  }, [c]), N(() => {
+    c && g && y.current && y.current.focus();
+  }, [c, g]), N(() => {
+    const e = (o) => {
+      var h, W;
+      const a = o.target;
+      (h = V.current) != null && h.contains(a) || (W = a.closest) != null && W.call(a, "[data-bear-phone-dropdown]") || (k(!1), w(""));
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []);
+  const v = M((e) => {
+    var a;
+    const o = Y(e, (r == null ? void 0 : r.number) || I);
+    b == null || b(o), k(!1), w(""), (a = H.current) == null || a.focus();
+  }, [r == null ? void 0 : r.number, I, b]), ee = M((e) => {
+    const o = ie(e.target.value), a = X(o, t == null ? void 0 : t.format);
+    if (U(a), t) {
+      const h = Y(t, o);
+      b == null || b(h);
+    }
+  }, [t, b]);
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: V,
+      className: s("Bear-PhoneInput bear-relative", J),
+      "data-testid": K,
+      children: [
+        S && /* @__PURE__ */ d("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: [
+          S,
+          F && /* @__PURE__ */ n("span", { className: "bear-text-red-500 bear-ml-0.5", children: "*" })
+        ] }),
+        /* @__PURE__ */ d("div", { className: s(
+          "Bear-PhoneInput__wrapper bear-flex bear-items-center bear-rounded-lg bear-border bear-transition-colors",
+          oe[q],
+          m ? "bear-border-red-500" : "focus-within:bear-border-pink-500",
+          f && "bear-opacity-50 bear-cursor-not-allowed"
+        ), children: [
+          /* @__PURE__ */ d(
+            "button",
+            {
+              ref: z,
+              type: "button",
+              onClick: () => !f && k(!c),
+              disabled: f,
+              className: s(
+                "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",
+                Q[R]
+              ),
+              children: [
+                L && t && /* @__PURE__ */ n("span", { className: "Bear-PhoneInput__flag bear-text-lg", children: t.flag }),
+                G && t && /* @__PURE__ */ n("span", { className: "Bear-PhoneInput__dial-code bear-text-gray-600 dark:bear-text-zinc-400", children: t.dialCode }),
+                $ ?? /* @__PURE__ */ n(
+                  "svg",
+                  {
+                    className: s(
+                      "Bear-PhoneInput__chevron bear-w-4 bear-h-4 bear-text-gray-500 dark:bear-text-zinc-400 bear-transition-transform",
+                      c && "bear-rotate-180"
+                    ),
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ n(
+            "input",
+            {
+              ref: H,
+              type: "tel",
+              value: I,
+              onChange: ee,
+              placeholder: Z || B.placeholder,
+              disabled: f,
+              className: s(
+                "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",
+                Q[R]
+              )
+            }
+          )
+        ] }),
+        m && /* @__PURE__ */ n("p", { className: "Bear-PhoneInput__error bear-mt-1 bear-text-xs bear-text-red-400", children: m }),
+        O && !m && /* @__PURE__ */ n("p", { className: "Bear-PhoneInput__helper bear-mt-1 bear-text-xs bear-text-zinc-500 dark:bear-text-zinc-400", children: O }),
+        c && typeof document < "u" && re(
+          /* @__PURE__ */ d(
+            "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: A.top, left: A.left, zIndex: be },
+              children: [
+                g && /* @__PURE__ */ n("div", { className: "Bear-PhoneInput__search bear-p-2 bear-border-b bear-border-zinc-200 dark:bear-border-zinc-700", children: /* @__PURE__ */ n(
+                  "input",
+                  {
+                    ref: y,
+                    type: "text",
+                    value: P,
+                    onChange: (e) => w(e.target.value),
+                    placeholder: B.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"
+                  }
+                ) }),
+                /* @__PURE__ */ n("div", { className: "Bear-PhoneInput__country-list bear-max-h-60 bear-overflow-y-auto", children: j.length === 0 ? /* @__PURE__ */ n("div", { className: "bear-px-3 bear-py-4 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-zinc-500", children: B.noResults }) : j.map((e) => /* @__PURE__ */ d(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => v(e),
+                    className: s(
+                      "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",
+                      (t == null ? void 0 : t.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: [
+                      L && /* @__PURE__ */ n("span", { className: "Bear-PhoneInput__country-flag bear-text-lg", children: e.flag }),
+                      /* @__PURE__ */ n("span", { className: "Bear-PhoneInput__country-name bear-flex-1", children: e.name }),
+                      /* @__PURE__ */ n("span", { className: "Bear-PhoneInput__country-dial bear-text-gray-500 dark:bear-text-zinc-500", children: e.dialCode })
+                    ]
+                  },
+                  e.code
+                )) })
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+};
+export {
+  xe as PhoneInput
+};

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

@@ -0,0 +1,108 @@
+import { ReactNode } from 'react';
+/**
+ * Country data interface
+ */
+export interface CountryData {
+    /** ISO 3166-1 alpha-2 country code (e.g., 'US', 'GB') */
+    code: string;
+    /** Country name */
+    name: string;
+    /** Dial code (e.g., '+1', '+44') */
+    dialCode: string;
+    /** Flag emoji */
+    flag: string;
+    /** Phone number format mask (e.g., '(###) ###-####') */
+    format?: string;
+}
+/**
+ * Phone number value
+ */
+export interface PhoneValue {
+    /** Country code */
+    countryCode: string;
+    /** Dial code */
+    dialCode: string;
+    /** Phone number (without dial code) */
+    number: string;
+    /** Full formatted phone number */
+    formattedNumber: string;
+    /** Raw phone number (digits only) */
+    rawNumber: string;
+}
+/**
+ * PhoneInput size variants
+ */
+export type PhoneInputSize = 'sm' | 'md' | 'lg';
+/**
+ * PhoneInput variant styles
+ */
+export type PhoneInputVariant = 'default' | 'filled' | 'outline';
+/**
+ * PhoneInput translations
+ */
+export interface PhoneInputTranslations {
+    placeholder: string;
+    searchCountry: string;
+    noResults: string;
+}
+/**
+ * PhoneInput component props
+ */
+export interface PhoneInputProps {
+    /** Current phone value */
+    value?: PhoneValue;
+    /** Callback when value changes */
+    onChange?: (value: PhoneValue) => void;
+    /** Default country code */
+    defaultCountry?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Input label */
+    label?: string;
+    /** Helper text */
+    helperText?: string;
+    /** Error message */
+    error?: string;
+    /** Whether input is disabled */
+    disabled?: boolean;
+    /** Whether input is required */
+    required?: boolean;
+    /** Size variant */
+    size?: PhoneInputSize;
+    /** Style variant */
+    variant?: PhoneInputVariant;
+    /** Only allow specific countries */
+    onlyCountries?: string[];
+    /** Exclude specific countries */
+    excludeCountries?: string[];
+    /** Preferred countries (shown at top) */
+    preferredCountries?: string[];
+    /** Whether to show country search */
+    searchable?: boolean;
+    /** Whether to show flags */
+    showFlags?: boolean;
+    /** Whether to show dial code in input */
+    showDialCode?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+    /** Translation strings */
+    translations?: Partial<PhoneInputTranslations>;
+    /** Custom country selector icon */
+    icon?: ReactNode;
+}
+/**
+ * CountrySelector component props
+ */
+export interface CountrySelectorProps {
+    countries: CountryData[];
+    selectedCountry: CountryData | null;
+    onSelect: (country: CountryData) => void;
+    isOpen: boolean;
+    onToggle: () => void;
+    searchable: boolean;
+    showFlags: boolean;
+    translations: PhoneInputTranslations;
+    disabled?: boolean;
+}

package/dist/components/PhoneInput/PhoneInput.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=(e,t)=>{if(!t)return e;const o=e.replace(/\D/g,"");let r="",s=0;for(const n of t){if(s>=o.length)break;n==="#"?(r+=o[s],s++):r+=n}return r},d=e=>e.replace(/\D/g,""),l=(e,t)=>{const o=i(t,e.format);return{countryCode:e.code,dialCode:e.dialCode,number:t,formattedNumber:`${e.dialCode} ${o}`,rawNumber:d(t)}},c=(e,t)=>{if(!t.trim())return e;const o=t.toLowerCase();return e.filter(r=>r.name.toLowerCase().includes(o)||r.code.toLowerCase().includes(o)||r.dialCode.includes(t))},f=(e,t)=>{if(t.length===0)return e;const o=new Set(t.map(n=>n.toUpperCase())),r=e.filter(n=>o.has(n.code)),s=e.filter(n=>!o.has(n.code));return r.sort((n,a)=>t.indexOf(n.code)-t.indexOf(a.code)),[...r,...s]},C=(e,t)=>e.find(o=>o.code.toUpperCase()===t.toUpperCase());exports.createPhoneValue=l;exports.filterCountries=c;exports.formatPhoneNumber=i;exports.getCountryByCode=C;exports.parsePhoneDigits=d;exports.sortCountriesWithPreferred=f;

package/dist/components/PhoneInput/PhoneInput.utils.d.ts

@@ -0,0 +1,25 @@
+import { CountryData, PhoneValue } from './PhoneInput.types';
+/**
+ * Format phone number according to country format
+ */
+export declare const formatPhoneNumber: (number: string, format?: string) => string;
+/**
+ * Parse raw phone input to digits only
+ */
+export declare const parsePhoneDigits: (input: string) => string;
+/**
+ * Create phone value object
+ */
+export declare const createPhoneValue: (country: CountryData, rawNumber: string) => PhoneValue;
+/**
+ * Filter countries by search query
+ */
+export declare const filterCountries: (countries: CountryData[], query: string) => CountryData[];
+/**
+ * Sort countries with preferred countries first
+ */
+export declare const sortCountriesWithPreferred: (countries: CountryData[], preferred: string[]) => CountryData[];
+/**
+ * Get country by code
+ */
+export declare const getCountryByCode: (countries: CountryData[], code: string) => CountryData | undefined;

package/dist/components/PhoneInput/PhoneInput.utils.js

@@ -0,0 +1,39 @@
+const i = (e, t) => {
+  if (!t) return e;
+  const o = e.replace(/\D/g, "");
+  let r = "", s = 0;
+  for (const n of t) {
+    if (s >= o.length) break;
+    n === "#" ? (r += o[s], s++) : r += n;
+  }
+  return r;
+}, a = (e) => e.replace(/\D/g, ""), l = (e, t) => {
+  const o = i(t, e.format);
+  return {
+    countryCode: e.code,
+    dialCode: e.dialCode,
+    number: t,
+    formattedNumber: `${e.dialCode} ${o}`,
+    rawNumber: a(t)
+  };
+}, c = (e, t) => {
+  if (!t.trim()) return e;
+  const o = t.toLowerCase();
+  return e.filter(
+    (r) => r.name.toLowerCase().includes(o) || r.code.toLowerCase().includes(o) || r.dialCode.includes(t)
+  );
+}, f = (e, t) => {
+  if (t.length === 0) return e;
+  const o = new Set(t.map((n) => n.toUpperCase())), r = e.filter((n) => o.has(n.code)), s = e.filter((n) => !o.has(n.code));
+  return r.sort(
+    (n, d) => t.indexOf(n.code) - t.indexOf(d.code)
+  ), [...r, ...s];
+}, C = (e, t) => e.find((o) => o.code.toUpperCase() === t.toUpperCase());
+export {
+  l as createPhoneValue,
+  c as filterCountries,
+  i as formatPhoneNumber,
+  C as getCountryByCode,
+  a as parsePhoneDigits,
+  f as sortCountriesWithPreferred
+};

package/dist/components/PhoneInput/index.d.ts

@@ -0,0 +1,2 @@
+export { PhoneInput } from './PhoneInput';
+export type { PhoneInputProps, PhoneValue, CountryData, PhoneInputSize, PhoneInputVariant, PhoneInputTranslations, } from './PhoneInput.types';

package/dist/components/Select/Select.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("react"),a=require("../../utils/cn.cjs"),x=require("../Icon/index.cjs"),N={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},p=({options:i,value:b,onChange:s,placeholder:m="Select an option",label:f,error:l,disabled:n=!1,size:g="md",fullWidth:h=!1,className:y})=>{const[c,o]=d.useState(!1),u=d.useRef(null),w=!!l,t=i.find(e=>e.value===b);d.useEffect(()=>{const e=j=>{u.current&&!u.current.contains(j.target)&&o(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const v=e=>{s==null||s(e),o(!1)};return r.jsxs("div",{ref:u,className:a.cn("bear-relative bear-flex bear-flex-col bear-gap-1.5",h&&"bear-w-full"),children:[f&&r.jsx("label",{className:"bear-text-sm bear-font-medium bear-text-gray-300",children:f}),r.jsxs("button",{type:"button",disabled:n,onClick:()=>!n&&o(!c),className:a.cn("bear-flex bear-items-center bear-justify-between bear-w-full","bear-rounded-lg bear-border bear-bg-gray-800 bear-text-left","bear-outline-none bear-transition-all bear-duration-200","focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-gray-900",w?"bear-border-red-500 focus:bear-ring-red-500":"bear-border-gray-600 focus:bear-border-bear-500 focus:bear-ring-bear-500",n&&"bear-opacity-50 bear-cursor-not-allowed",N[g],y),children:[r.jsx("span",{className:t?"bear-text-white":"bear-text-gray-500",children:(t==null?void 0:t.label)||m}),r.jsx(x.ChevronDownIcon,{className:a.cn("bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform",c&&"bear-rotate-180")})]}),c&&r.jsx("div",{className:a.cn("bear-absolute bear-z-50 bear-w-full bear-mt-1","bear-rounded-lg bear-border bear-border-gray-600 bear-bg-gray-800","bear-shadow-lg bear-overflow-hidden","bear-top-full"),children:r.jsx("div",{className:"bear-max-h-60 bear-overflow-y-auto",children:i.map(e=>r.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>!e.disabled&&v(e.value),className:a.cn("bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2","bear-text-left bear-transition-colors",e.disabled?"bear-text-gray-500 bear-cursor-not-allowed":"bear-text-gray-300 hover:bear-bg-gray-700 hover:bear-text-white",e.value===b&&"bear-bg-bear-600/20 bear-text-bear-400"),children:[e.label,e.value===b&&r.jsx(x.CheckIcon,{className:"bear-w-4 bear-h-4 bear-text-bear-400"})]},e.value))})}),l&&r.jsx("p",{className:"bear-text-sm bear-text-red-500",children:l})]})};exports.Select=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),a=require("../../utils/cn.cjs"),f=require("../Icon/index.cjs"),j={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},N=({options:u,value:t,onChange:s,placeholder:g="Select an option",label:x,error:l,disabled:n=!1,size:m="md",fullWidth:y=!1,className:h})=>{const[c,d]=i.useState(!1),o=i.useRef(null),k=!!l,b=u.find(e=>e.value===t);i.useEffect(()=>{const e=v=>{o.current&&!o.current.contains(v.target)&&d(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const w=e=>{s==null||s(e),d(!1)};return r.jsxs("div",{ref:o,className:a.cn("bear-relative bear-flex bear-flex-col bear-gap-1.5",y&&"bear-w-full"),children:[x&&r.jsx("label",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300",children:x}),r.jsxs("button",{type:"button",disabled:n,onClick:()=>!n&&d(!c),className:a.cn("bear-flex bear-items-center bear-justify-between bear-w-full","bear-rounded-lg bear-border bear-text-left bear-outline-none bear-transition-all bear-duration-200","bear-bg-white bear-text-gray-900 bear-border-gray-300","focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-white","dark:bear-bg-gray-800 dark:bear-text-white dark:bear-border-gray-600 dark:focus:bear-ring-offset-gray-900",k?"bear-border-red-500 focus:bear-ring-red-500":"focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",n&&"bear-opacity-50 bear-cursor-not-allowed",j[m],h),children:[r.jsx("span",{className:b?"bear-text-gray-900 dark:bear-text-white":"bear-text-gray-500 dark:bear-text-gray-500",children:(b==null?void 0:b.label)||g}),r.jsx(f.ChevronDownIcon,{className:a.cn("bear-w-4 bear-h-4 bear-text-gray-500 dark:bear-text-gray-400 bear-transition-transform",c&&"bear-rotate-180")})]}),c&&r.jsx("div",{className:a.cn("bear-absolute bear-z-50 bear-w-full bear-mt-1","bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden bear-top-full","bear-bg-white bear-border-gray-200 dark:bear-bg-gray-800 dark:bear-border-gray-600"),children:r.jsx("div",{className:"bear-max-h-60 bear-overflow-y-auto",children:u.map(e=>r.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>!e.disabled&&w(e.value),className:a.cn("bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2","bear-text-left bear-transition-colors",e.disabled?"bear-text-gray-500 bear-cursor-not-allowed":"bear-text-gray-700 dark:bear-text-gray-300 hover:bear-bg-gray-100 hover:bear-text-gray-900 dark:hover:bear-bg-gray-700 dark:hover:bear-text-white",e.value===t&&"bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300"),children:[e.label,e.value===t&&r.jsx(f.CheckIcon,{className:"bear-w-4 bear-h-4 bear-text-bear-600 dark:bear-text-bear-400"})]},e.value))})}),l&&r.jsx("p",{className:"bear-text-sm bear-text-red-500",children:l})]})};exports.Select=N;

package/dist/components/Select/Select.js

@@ -1,94 +1,94 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import { useState as p, useRef as N, useEffect as j } from "react";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { useState as v, useRef as p, useEffect as N } from "react";
 import { cn as a } from "../../utils/cn.js";
-import { ChevronDownIcon as k, CheckIcon as E } from "../Icon/index.js";
+import { ChevronDownIcon as j, CheckIcon as E } from "../Icon/index.js";
 const S = {
   sm: "bear-h-8 bear-text-sm bear-px-3",
   md: "bear-h-10 bear-text-base bear-px-4",
   lg: "bear-h-12 bear-text-lg bear-px-5"
 }, O = ({
-  options: i,
+  options: f,
   value: t,
   onChange: s,
-  placeholder: m = "Select an option",
+  placeholder: g = "Select an option",
   label: u,
   error: l,
   disabled: o = !1,
   size: x = "md",
-  fullWidth: g = !1,
-  className: h
+  fullWidth: m = !1,
+  className: y
 }) => {
-  const [n, c] = p(!1), d = N(null), w = !!l, b = i.find((e) => e.value === t);
-  j(() => {
-    const e = (v) => {
-      d.current && !d.current.contains(v.target) && c(!1);
+  const [d, n] = v(!1), c = p(null), h = !!l, b = f.find((e) => e.value === t);
+  N(() => {
+    const e = (w) => {
+      c.current && !c.current.contains(w.target) && n(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   }, []);
-  const y = (e) => {
-    s == null || s(e), c(!1);
+  const k = (e) => {
+    s == null || s(e), n(!1);
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ i(
     "div",
     {
-      ref: d,
-      className: a("bear-relative bear-flex bear-flex-col bear-gap-1.5", g && "bear-w-full"),
+      ref: c,
+      className: a("bear-relative bear-flex bear-flex-col bear-gap-1.5", m && "bear-w-full"),
       children: [
-        u && /* @__PURE__ */ r("label", { className: "bear-text-sm bear-font-medium bear-text-gray-300", children: u }),
-        /* @__PURE__ */ f(
+        u && /* @__PURE__ */ r("label", { className: "bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300", children: u }),
+        /* @__PURE__ */ i(
           "button",
           {
             type: "button",
             disabled: o,
-            onClick: () => !o && c(!n),
+            onClick: () => !o && n(!d),
             className: a(
               "bear-flex bear-items-center bear-justify-between bear-w-full",
-              "bear-rounded-lg bear-border bear-bg-gray-800 bear-text-left",
-              "bear-outline-none bear-transition-all bear-duration-200",
-              "focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-gray-900",
-              w ? "bear-border-red-500 focus:bear-ring-red-500" : "bear-border-gray-600 focus:bear-border-bear-500 focus:bear-ring-bear-500",
+              "bear-rounded-lg bear-border bear-text-left bear-outline-none bear-transition-all bear-duration-200",
+              "bear-bg-white bear-text-gray-900 bear-border-gray-300",
+              "focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-white",
+              "dark:bear-bg-gray-800 dark:bear-text-white dark:bear-border-gray-600 dark:focus:bear-ring-offset-gray-900",
+              h ? "bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",
               o && "bear-opacity-50 bear-cursor-not-allowed",
               S[x],
-              h
+              y
             ),
             children: [
-              /* @__PURE__ */ r("span", { className: b ? "bear-text-white" : "bear-text-gray-500", children: (b == null ? void 0 : b.label) || m }),
+              /* @__PURE__ */ r("span", { className: b ? "bear-text-gray-900 dark:bear-text-white" : "bear-text-gray-500 dark:bear-text-gray-500", children: (b == null ? void 0 : b.label) || g }),
               /* @__PURE__ */ r(
-                k,
+                j,
                 {
                   className: a(
-                    "bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform",
-                    n && "bear-rotate-180"
+                    "bear-w-4 bear-h-4 bear-text-gray-500 dark:bear-text-gray-400 bear-transition-transform",
+                    d && "bear-rotate-180"
                   )
                 }
               )
             ]
           }
         ),
-        n && /* @__PURE__ */ r(
+        d && /* @__PURE__ */ r(
           "div",
           {
             className: a(
               "bear-absolute bear-z-50 bear-w-full bear-mt-1",
-              "bear-rounded-lg bear-border bear-border-gray-600 bear-bg-gray-800",
-              "bear-shadow-lg bear-overflow-hidden",
-              "bear-top-full"
+              "bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden bear-top-full",
+              "bear-bg-white bear-border-gray-200 dark:bear-bg-gray-800 dark:bear-border-gray-600"
             ),
-            children: /* @__PURE__ */ r("div", { className: "bear-max-h-60 bear-overflow-y-auto", children: i.map((e) => /* @__PURE__ */ f(
+            children: /* @__PURE__ */ r("div", { className: "bear-max-h-60 bear-overflow-y-auto", children: f.map((e) => /* @__PURE__ */ i(
               "button",
               {
                 type: "button",
                 disabled: e.disabled,
-                onClick: () => !e.disabled && y(e.value),
+                onClick: () => !e.disabled && k(e.value),
                 className: a(
                   "bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2",
                   "bear-text-left bear-transition-colors",
-                  e.disabled ? "bear-text-gray-500 bear-cursor-not-allowed" : "bear-text-gray-300 hover:bear-bg-gray-700 hover:bear-text-white",
-                  e.value === t && "bear-bg-bear-600/20 bear-text-bear-400"
+                  e.disabled ? "bear-text-gray-500 bear-cursor-not-allowed" : "bear-text-gray-700 dark:bear-text-gray-300 hover:bear-bg-gray-100 hover:bear-text-gray-900 dark:hover:bear-bg-gray-700 dark:hover:bear-text-white",
+                  e.value === t && "bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300"
                 ),
                 children: [
                   e.label,
-                  e.value === t && /* @__PURE__ */ r(E, { className: "bear-w-4 bear-h-4 bear-text-bear-400" })
+                  e.value === t && /* @__PURE__ */ r(E, { className: "bear-w-4 bear-h-4 bear-text-bear-600 dark:bear-text-bear-400" })
                 ]
               },
               e.value

package/dist/components/Sidebar/Sidebar.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../utils/cn.cjs"),s=require("../Icon/index.cjs"),R=require("./components/SidebarItem/SidebarItem.cjs"),a=require("./Sidebar.const.cjs"),D=S=>{const{items:b,collapsed:r=!1,onCollapsedChange:n,width:_=a.SIDEBAR_WIDTH,collapsedWidth:I=a.SIDEBAR_COLLAPSED_WIDTH,header:o,footer:c,activeItemId:E,onItemClick:h,variant:t="default",position:l="left",className:u,style:A,testId:C,id:f}=S,x=r?I:_,B=l==="left"?"bear-border-r":"bear-border-l";return e.jsxs("aside",{id:f,"data-testid":C,className:i.cn("Bear-Sidebar",`Bear-Sidebar--${t}`,r&&"Bear-Sidebar--collapsed","bear-flex bear-flex-col bear-h-full bear-transition-all bear-duration-300",t==="default"&&B,a.SIDEBAR_VARIANT_STYLES[t],u),style:{width:x,...A},children:[o&&e.jsxs("div",{className:i.cn("Bear-Sidebar__header",a.SIDEBAR_HEADER_CLASSES),children:[!r&&o,n&&e.jsx("button",{type:"button",onClick:()=>n(!r),className:i.cn("Bear-Sidebar__toggle",a.SIDEBAR_TOGGLE_CLASSES),"aria-label":r?"Expand sidebar":"Collapse sidebar",children:r?l==="left"?e.jsx(s.ChevronRightIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE}):e.jsx(s.ChevronLeftIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE}):l==="left"?e.jsx(s.ChevronLeftIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE}):e.jsx(s.ChevronRightIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE})})]}),e.jsx("nav",{className:"Bear-Sidebar__nav bear-flex-1 bear-overflow-y-auto bear-px-2 bear-py-3 bear-space-y-1",children:b.map(d=>e.jsx(R.SidebarItem,{item:d,isActive:d.id===E,collapsed:r,onClick:h},d.id))}),c&&e.jsx("div",{className:i.cn("Bear-Sidebar__footer",a.SIDEBAR_FOOTER_CLASSES),children:r?null:c})]})};exports.Sidebar=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../utils/cn.cjs"),t=require("../Icon/index.cjs"),p=require("./components/SidebarItem/SidebarItem.cjs"),a=require("./Sidebar.const.cjs"),L=S=>{const{items:b,collapsed:r=!1,onCollapsedChange:d,width:_=a.SIDEBAR_WIDTH,collapsedWidth:I=a.SIDEBAR_COLLAPSED_WIDTH,header:o,footer:c,showHeader:E=!0,activeItemId:h,onItemClick:u,activeVariant:f="fill",fullHeight:A=!1,variant:s="default",position:l="left",className:C,style:x,testId:B,id:R}=S,m=r?I:_,v=l==="left"?"bear-border-r":"bear-border-l",D=E&&o;return e.jsxs("aside",{id:R,"data-testid":B,className:i.cn("Bear-Sidebar",`Bear-Sidebar--${s}`,r&&"Bear-Sidebar--collapsed","bear-flex bear-flex-col bear-h-full bear-transition-all bear-duration-300",A&&"bear-min-h-full",s==="default"&&v,a.SIDEBAR_VARIANT_STYLES[s],C),style:{width:m,...x},children:[D&&e.jsxs("div",{className:i.cn("Bear-Sidebar__header",a.SIDEBAR_HEADER_CLASSES),children:[!r&&o,d&&e.jsx("button",{type:"button",onClick:()=>d(!r),className:i.cn("Bear-Sidebar__toggle",a.SIDEBAR_TOGGLE_CLASSES),"aria-label":r?"Expand sidebar":"Collapse sidebar",children:r?l==="left"?e.jsx(t.ChevronRightIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE}):e.jsx(t.ChevronLeftIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE}):l==="left"?e.jsx(t.ChevronLeftIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE}):e.jsx(t.ChevronRightIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE})})]}),e.jsx("nav",{className:"Bear-Sidebar__nav bear-flex-1 bear-overflow-y-auto bear-px-2 bear-py-3 bear-space-y-1 bear-min-h-0",children:b.map(n=>e.jsx(p.SidebarItem,{item:n,isActive:n.id===h,collapsed:r,onClick:u,activeVariant:f},n.id))}),c&&e.jsx("div",{className:i.cn("Bear-Sidebar__footer",a.SIDEBAR_FOOTER_CLASSES),children:r?null:c})]})};exports.Sidebar=L;