@forgedevstack/bear 1.0.5 → 1.0.7

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

@@ -0,0 +1,117 @@
+import { ReactNode } from 'react';
+/**
+ * Notification types
+ */
+export type NotificationType = 'info' | 'success' | 'warning' | 'error';
+/**
+ * Notification priority levels
+ */
+export type NotificationPriority = 'low' | 'medium' | 'high' | 'urgent';
+/**
+ * Single notification item
+ */
+export interface NotificationItem {
+    /** Unique identifier */
+    id: string;
+    /** Notification type */
+    type: NotificationType;
+    /** Title text */
+    title: string;
+    /** Description/message */
+    description?: string;
+    /** Timestamp */
+    timestamp: Date;
+    /** Whether the notification has been read */
+    read: boolean;
+    /** Priority level */
+    priority?: NotificationPriority;
+    /** Custom icon */
+    icon?: ReactNode;
+    /** Link URL (if notification is clickable) */
+    href?: string;
+    /** Action buttons */
+    actions?: NotificationAction[];
+    /** Avatar/image URL */
+    avatar?: string;
+    /** Category/group */
+    category?: string;
+    /** Custom metadata */
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Notification action button
+ */
+export interface NotificationAction {
+    /** Action label */
+    label: string;
+    /** Action handler */
+    onClick: () => void;
+    /** Action variant */
+    variant?: 'primary' | 'secondary' | 'danger';
+}
+/**
+ * Notification center position
+ */
+export type NotificationCenterPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+/**
+ * Notification center translations
+ */
+export interface NotificationCenterTranslations {
+    title: string;
+    noNotifications: string;
+    markAllRead: string;
+    clearAll: string;
+    showMore: string;
+    justNow: string;
+    minutesAgo: string;
+    hoursAgo: string;
+    daysAgo: string;
+    new: string;
+}
+/**
+ * NotificationCenter component props
+ */
+export interface NotificationCenterProps {
+    /** List of notifications */
+    notifications: NotificationItem[];
+    /** Callback when notification is clicked */
+    onNotificationClick?: (notification: NotificationItem) => void;
+    /** Callback when notification is marked as read */
+    onMarkAsRead?: (id: string) => void;
+    /** Callback when all notifications are marked as read */
+    onMarkAllAsRead?: () => void;
+    /** Callback when notification is dismissed */
+    onDismiss?: (id: string) => void;
+    /** Callback when all notifications are cleared */
+    onClearAll?: () => void;
+    /** Maximum notifications to show */
+    maxVisible?: number;
+    /** Whether to group notifications by category */
+    groupByCategory?: boolean;
+    /** Position of the notification panel */
+    position?: NotificationCenterPosition;
+    /** Custom trigger element */
+    trigger?: ReactNode;
+    /** Whether panel is open (controlled mode) */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+    /** Translation strings */
+    translations?: Partial<NotificationCenterTranslations>;
+    /** Custom bell icon */
+    icon?: ReactNode;
+}
+/**
+ * NotificationItem component props
+ */
+export interface NotificationItemProps {
+    notification: NotificationItem;
+    onRead?: (id: string) => void;
+    onDismiss?: (id: string) => void;
+    onClick?: (notification: NotificationItem) => void;
+    translations: NotificationCenterTranslations;
+}

package/dist/components/NotificationCenter/NotificationCenter.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./NotificationCenter.const.cjs"),T=(n,o)=>{const e=new Date().getTime()-n.getTime();if(e<t.TIME_THRESHOLDS.MINUTE)return o.justNow;if(e<t.TIME_THRESHOLDS.HOUR){const r=Math.floor(e/t.TIME_THRESHOLDS.MINUTE);return o.minutesAgo.replace("{count}",String(r))}if(e<t.TIME_THRESHOLDS.DAY){const r=Math.floor(e/t.TIME_THRESHOLDS.HOUR);return o.hoursAgo.replace("{count}",String(r))}const i=Math.floor(e/t.TIME_THRESHOLDS.DAY);return o.daysAgo.replace("{count}",String(i))};exports.formatRelativeTime=T;

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

@@ -0,0 +1,11 @@
+import { NotificationCenterTranslations } from './NotificationCenter.types';
+/**
+ * Format relative time
+ */
+export declare const formatRelativeTime: (date: Date, translations: NotificationCenterTranslations) => string;
+/**
+ * Group notifications by category
+ */
+export declare const groupNotificationsByCategory: <T extends {
+    category?: string;
+}>(notifications: T[]) => Record<string, T[]>;

package/dist/components/NotificationCenter/NotificationCenter.utils.js

@@ -0,0 +1,19 @@
+import { TIME_THRESHOLDS as t } from "./NotificationCenter.const.js";
+const f = (n, e) => {
+  const o = (/* @__PURE__ */ new Date()).getTime() - n.getTime();
+  if (o < t.MINUTE)
+    return e.justNow;
+  if (o < t.HOUR) {
+    const r = Math.floor(o / t.MINUTE);
+    return e.minutesAgo.replace("{count}", String(r));
+  }
+  if (o < t.DAY) {
+    const r = Math.floor(o / t.HOUR);
+    return e.hoursAgo.replace("{count}", String(r));
+  }
+  const c = Math.floor(o / t.DAY);
+  return e.daysAgo.replace("{count}", String(c));
+};
+export {
+  f as formatRelativeTime
+};

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

@@ -0,0 +1,2 @@
+export { NotificationCenter } from './NotificationCenter';
+export type { NotificationCenterProps, NotificationItem, NotificationAction, NotificationType, NotificationPriority, NotificationCenterPosition, NotificationCenterTranslations, } from './NotificationCenter.types';

package/dist/components/PhoneInput/PhoneInput.cjs

@@ -0,0 +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;

package/dist/components/PhoneInput/PhoneInput.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});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:"## ### ####"}],r="US";exports.COUNTRIES=l;exports.DEFAULT_COUNTRY_CODE=r;exports.PHONE_INPUT_DEFAULT_TRANSLATIONS=a;exports.PHONE_INPUT_DROPDOWN_Z_INDEX=d;exports.PHONE_INPUT_SIZE_CLASSES=e;exports.PHONE_INPUT_VARIANT_CLASSES=o;

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

@@ -0,0 +1,33 @@
+import { PhoneInputTranslations, CountryData } from './PhoneInput.types';
+/**
+ * Default translations
+ */
+export declare const PHONE_INPUT_DEFAULT_TRANSLATIONS: PhoneInputTranslations;
+/**
+ * Size classes
+ */
+export declare const PHONE_INPUT_SIZE_CLASSES: {
+    readonly sm: "bear-py-1.5 bear-px-3 bear-text-sm";
+    readonly md: "bear-py-2 bear-px-4 bear-text-sm";
+    readonly lg: "bear-py-2.5 bear-px-5 bear-text-base";
+};
+/**
+ * Variant classes (light/dark)
+ */
+export declare const PHONE_INPUT_VARIANT_CLASSES: {
+    readonly default: "bear-bg-white dark:bear-bg-zinc-800 bear-border-zinc-300 dark:bear-border-zinc-600";
+    readonly filled: "bear-bg-zinc-100 dark:bear-bg-zinc-700 bear-border-transparent";
+    readonly outline: "bear-bg-transparent bear-border-zinc-300 dark:bear-border-zinc-500";
+};
+/**
+ * Dropdown z-index
+ */
+export declare const PHONE_INPUT_DROPDOWN_Z_INDEX = 9999;
+/**
+ * Common countries data
+ */
+export declare const COUNTRIES: CountryData[];
+/**
+ * Default country code
+ */
+export declare const DEFAULT_COUNTRY_CODE = "US";

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;