@forgedevstack/bear 1.0.5 → 1.0.6

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

@@ -0,0 +1,90 @@
+import { ReactNode } from 'react';
+/**
+ * Command item interface
+ */
+export interface CommandItem {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional description */
+    description?: string;
+    /** Optional icon */
+    icon?: ReactNode;
+    /** Keyboard shortcut (e.g., 'Ctrl+K') */
+    shortcut?: string;
+    /** Category/group name */
+    category?: string;
+    /** Handler when command is selected */
+    onSelect: () => void;
+    /** Whether the command is disabled */
+    disabled?: boolean;
+    /** Keywords for search (in addition to label) */
+    keywords?: string[];
+    /** Custom metadata */
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Command group interface
+ */
+export interface CommandGroup {
+    /** Group name */
+    name: string;
+    /** Commands in this group */
+    commands: CommandItem[];
+}
+/**
+ * CommandPalette translations
+ */
+export interface CommandPaletteTranslations {
+    placeholder: string;
+    noResults: string;
+    recentCommands: string;
+    allCommands: string;
+    closeHint: string;
+}
+/**
+ * CommandPalette component props
+ */
+export interface CommandPaletteProps {
+    /** Available commands */
+    commands: CommandItem[];
+    /** Whether the palette is open */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether to show recent commands */
+    showRecent?: boolean;
+    /** Maximum recent commands to show */
+    maxRecent?: number;
+    /** Recent command IDs */
+    recentIds?: string[];
+    /** Callback when recent commands change */
+    onRecentChange?: (ids: string[]) => void;
+    /** Whether to group commands by category */
+    groupByCategory?: boolean;
+    /** Custom filter function */
+    filterFn?: (command: CommandItem, query: string) => boolean;
+    /** Trigger keyboard shortcut */
+    triggerKey?: string;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+    /** Translation strings */
+    translations?: Partial<CommandPaletteTranslations>;
+    /** Custom search icon */
+    icon?: ReactNode;
+    /** Footer content */
+    footer?: ReactNode;
+}
+/**
+ * CommandItem component props
+ */
+export interface CommandItemComponentProps {
+    command: CommandItem;
+    isHighlighted: boolean;
+    onSelect: () => void;
+}

package/dist/components/CommandPalette/CommandPalette.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=(t,r)=>{var e,a;const s=r.toLowerCase();return[t.label.toLowerCase(),((e=t.description)==null?void 0:e.toLowerCase())||"",...((a=t.keywords)==null?void 0:a.map(o=>o.toLowerCase()))||[]].some(o=>o.includes(s))},u=t=>{const r={},s=[];t.forEach(e=>{e.category?(r[e.category]||(r[e.category]=[]),r[e.category].push(e)):s.push(e)});const c=Object.entries(r).map(([e,a])=>({name:e,commands:a}));return s.length>0&&c.push({name:"Other",commands:s}),c},l=t=>t.split("+").map(r=>{switch(r.toLowerCase()){case"ctrl":case"control":return"⌃";case"cmd":case"command":case"meta":return"⌘";case"alt":case"option":return"⌥";case"shift":return"⇧";case"enter":case"return":return"↵";case"backspace":return"⌫";case"delete":return"⌦";case"escape":case"esc":return"esc";case"tab":return"⇥";case"space":return"␣";case"up":return"↑";case"down":return"↓";case"left":return"←";case"right":return"→";default:return r.toUpperCase()}});exports.defaultFilterFn=n;exports.formatShortcut=l;exports.groupCommandsByCategory=u;

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

@@ -0,0 +1,17 @@
+import { CommandItem, CommandGroup } from './CommandPalette.types';
+/**
+ * Default filter function
+ */
+export declare const defaultFilterFn: (command: CommandItem, query: string) => boolean;
+/**
+ * Group commands by category
+ */
+export declare const groupCommandsByCategory: (commands: CommandItem[]) => CommandGroup[];
+/**
+ * Parse keyboard shortcut for display
+ */
+export declare const formatShortcut: (shortcut: string) => string[];
+/**
+ * Get flat list of commands from groups
+ */
+export declare const flattenGroups: (groups: CommandGroup[]) => CommandItem[];

package/dist/components/CommandPalette/CommandPalette.utils.js

@@ -0,0 +1,63 @@
+const n = (t, r) => {
+  var e, a;
+  const s = r.toLowerCase();
+  return [
+    t.label.toLowerCase(),
+    ((e = t.description) == null ? void 0 : e.toLowerCase()) || "",
+    ...((a = t.keywords) == null ? void 0 : a.map((o) => o.toLowerCase())) || []
+  ].some((o) => o.includes(s));
+}, u = (t) => {
+  const r = {}, s = [];
+  t.forEach((e) => {
+    e.category ? (r[e.category] || (r[e.category] = []), r[e.category].push(e)) : s.push(e);
+  });
+  const c = Object.entries(r).map(([e, a]) => ({
+    name: e,
+    commands: a
+  }));
+  return s.length > 0 && c.push({ name: "Other", commands: s }), c;
+}, p = (t) => t.split("+").map((r) => {
+  switch (r.toLowerCase()) {
+    case "ctrl":
+    case "control":
+      return "⌃";
+    case "cmd":
+    case "command":
+    case "meta":
+      return "⌘";
+    case "alt":
+    case "option":
+      return "⌥";
+    case "shift":
+      return "⇧";
+    case "enter":
+    case "return":
+      return "↵";
+    case "backspace":
+      return "⌫";
+    case "delete":
+      return "⌦";
+    case "escape":
+    case "esc":
+      return "esc";
+    case "tab":
+      return "⇥";
+    case "space":
+      return "␣";
+    case "up":
+      return "↑";
+    case "down":
+      return "↓";
+    case "left":
+      return "←";
+    case "right":
+      return "→";
+    default:
+      return r.toUpperCase();
+  }
+});
+export {
+  n as defaultFilterFn,
+  p as formatShortcut,
+  u as groupCommandsByCategory
+};

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

@@ -0,0 +1,2 @@
+export { CommandPalette } from './CommandPalette';
+export type { CommandPaletteProps, CommandItem, CommandGroup, CommandPaletteTranslations, } from './CommandPalette.types';

package/dist/components/CreditInput/CreditInput.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),c=require("../../utils/cn.cjs"),w=require("./CreditInput.const.cjs"),d=require("./CreditInput.utils.cjs"),q={visa:e.jsx("svg",{viewBox:"0 0 24 24",className:"bear-w-8 bear-h-5",fill:"currentColor",children:e.jsx("path",{d:"M9.5 8.5l-1.8 7h-1.4l1.8-7h1.4zm6.5 4.5c0-1.1-.9-1.5-1.8-1.9-.6-.2-1-.4-1-.7 0-.2.2-.5.7-.5.5 0 .9.1 1.2.3l.2-1.2c-.3-.1-.9-.3-1.6-.3-1.7 0-2.9.9-2.9 2.2 0 1 .9 1.5 1.5 1.8.7.3 1 .5 1 .8 0 .4-.6.6-1.1.6-.6 0-1.1-.1-1.5-.3l-.2 1.2c.4.2 1 .3 1.7.3 1.8 0 2.9-.9 2.9-2.3h-.1zm2.7-4.5l-1.4 7h-1.3l.1-.5c-.4.4-.9.6-1.5.6-1.3 0-2.2-1.1-2.2-2.5 0-1.7 1.2-3.1 2.9-3.1.5 0 1 .1 1.4.4l.1-.4h1.3l-.4 2.5zm-2.1 2.3c0-.9-.5-1.5-1.2-1.5-.9 0-1.6.9-1.6 1.9 0 .8.5 1.4 1.2 1.4.9 0 1.6-.8 1.6-1.8z"})}),mastercard:e.jsxs("svg",{viewBox:"0 0 24 24",className:"bear-w-8 bear-h-5",fill:"currentColor",children:[e.jsx("circle",{cx:"9",cy:"12",r:"5",opacity:".8",fill:"#eb001b"}),e.jsx("circle",{cx:"15",cy:"12",r:"5",opacity:".8",fill:"#f79e1b"})]}),amex:e.jsxs("svg",{viewBox:"0 0 24 24",className:"bear-w-8 bear-h-5",fill:"#2e77bc",children:[e.jsx("rect",{x:"2",y:"6",width:"20",height:"12",rx:"2"}),e.jsx("text",{x:"12",y:"14",textAnchor:"middle",fontSize:"6",fill:"white",fontWeight:"bold",children:"AMEX"})]}),discover:e.jsxs("svg",{viewBox:"0 0 24 24",className:"bear-w-8 bear-h-5",fill:"#ff6600",children:[e.jsx("rect",{x:"2",y:"6",width:"20",height:"12",rx:"2"}),e.jsx("circle",{cx:"15",cy:"12",r:"3",fill:"white"})]}),diners:e.jsxs("svg",{viewBox:"0 0 24 24",className:"bear-w-8 bear-h-5",fill:"#0079be",children:[e.jsx("rect",{x:"2",y:"6",width:"20",height:"12",rx:"2"}),e.jsx("circle",{cx:"12",cy:"12",r:"4",fill:"white"})]}),jcb:e.jsxs("svg",{viewBox:"0 0 24 24",className:"bear-w-8 bear-h-5",children:[e.jsx("rect",{x:"2",y:"6",width:"20",height:"12",rx:"2",fill:"#0e4c96"}),e.jsx("text",{x:"12",y:"14",textAnchor:"middle",fontSize:"5",fill:"white",fontWeight:"bold",children:"JCB"})]}),unionpay:e.jsxs("svg",{viewBox:"0 0 24 24",className:"bear-w-8 bear-h-5",children:[e.jsx("rect",{x:"2",y:"6",width:"20",height:"12",rx:"2",fill:"#d9222a"}),e.jsx("text",{x:"12",y:"14",textAnchor:"middle",fontSize:"4",fill:"white",fontWeight:"bold",children:"UnionPay"})]}),unknown:e.jsxs("svg",{viewBox:"0 0 24 24",className:"bear-w-8 bear-h-5",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("rect",{x:"2",y:"6",width:"20",height:"12",rx:"2"}),e.jsx("line",{x1:"2",y1:"10",x2:"22",y2:"10"})]})},H=({value:r,onChange:h,mode:U="single",showName:y=!1,size:O="md",variant:V="default",disabled:n=!1,required:W=!1,label:_,helperText:I,error:b,acceptedCards:f,validateOnInput:B=!0,className:Y,testId:$,translations:S,icon:k})=>{const[p,M]=t.useState((r==null?void 0:r.number)||""),[m,T]=t.useState(r!=null&&r.expiryMonth&&(r!=null&&r.expiryYear)?`${r.expiryMonth}/${r.expiryYear}`:""),[C,E]=t.useState((r==null?void 0:r.cvv)||""),[j,z]=t.useState((r==null?void 0:r.name)||""),[u,P]=t.useState("unknown"),[g,A]=t.useState({}),s=t.useMemo(()=>({...w.CREDIT_INPUT_DEFAULT_TRANSLATIONS,...S}),[S]);t.useEffect(()=>{(r==null?void 0:r.number)!==void 0&&M(r.number),r!=null&&r.expiryMonth&&(r!=null&&r.expiryYear)&&T(`${r.expiryMonth}/${r.expiryYear}`),(r==null?void 0:r.cvv)!==void 0&&E(r.cvv),(r==null?void 0:r.name)!==void 0&&z(r.name),(r==null?void 0:r.cardType)!==void 0&&P(r.cardType)},[r]);const L=t.useCallback(()=>{const a=d.createCreditCardValue(p,m,C,y?j:void 0);h==null||h(a)},[p,m,C,j,y,h]);t.useEffect(()=>{L()},[L]);const R=t.useCallback(a=>{const i=a.target.value.replace(/\D/g,""),o=d.detectCardType(i);P(o);const J=d.getMaxCardLength(o),X=i.slice(0,J),Z=d.formatCardNumber(X,o);M(Z),B&&f&&!f.includes(o)&&o!=="unknown"?A(N=>({...N,number:s.invalidCard})):A(N=>{const{number:K,...G}=N;return G})},[f,B,s.invalidCard]),v=t.useCallback(a=>{const i=d.formatExpiry(a.target.value);T(i)},[]),D=t.useCallback(a=>{const i=a.target.value.replace(/\D/g,""),o=d.getMaxCvvLength(u);E(i.slice(0,o))},[u]),F=t.useCallback(a=>{z(a.target.value)},[]),l=c.cn("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",w.CREDIT_INPUT_SIZE_CLASSES[O]),x=c.cn("bear-flex bear-items-center bear-rounded-lg bear-border bear-transition-colors",w.CREDIT_INPUT_VARIANT_CLASSES[V],b||Object.keys(g).length>0?"bear-border-red-500":"focus-within:bear-border-pink-500",n&&"bear-opacity-50 bear-cursor-not-allowed");return e.jsxs("div",{className:c.cn("Bear-CreditInput",Y),"data-testid":$,children:[_&&e.jsxs("label",{className:"Bear-CreditInput__label bear-block bear-text-sm bear-font-medium bear-text-zinc-700 dark:bear-text-zinc-300 bear-mb-1.5",children:[_,W&&e.jsx("span",{className:"bear-text-red-500 bear-ml-0.5",children:"*"})]}),U==="single"?e.jsxs("div",{className:c.cn("Bear-CreditInput__single",x),children:[e.jsx("div",{className:"Bear-CreditInput__icon bear-pl-3 bear-pr-1",children:k??q[u]}),e.jsx("input",{type:"text",inputMode:"numeric",autoComplete:"cc-number",value:p,onChange:R,placeholder:s.cardNumberPlaceholder,disabled:n,className:c.cn("Bear-CreditInput__number bear-flex-1",l)}),e.jsx("input",{type:"text",inputMode:"numeric",autoComplete:"cc-exp",value:m,onChange:v,placeholder:s.expiryPlaceholder,disabled:n,className:c.cn("Bear-CreditInput__expiry bear-w-16 bear-text-center",l)}),e.jsx("input",{type:"text",inputMode:"numeric",autoComplete:"cc-csc",value:C,onChange:D,placeholder:s.cvvPlaceholder,disabled:n,className:c.cn("Bear-CreditInput__cvv bear-w-12 bear-text-center bear-pr-3",l)})]}):e.jsxs("div",{className:"Bear-CreditInput__split bear-space-y-3",children:[e.jsxs("div",{className:x,children:[e.jsx("div",{className:"Bear-CreditInput__icon bear-pl-3 bear-pr-1",children:k??q[u]}),e.jsx("input",{type:"text",inputMode:"numeric",autoComplete:"cc-number",value:p,onChange:R,placeholder:s.cardNumberPlaceholder,disabled:n,className:c.cn("Bear-CreditInput__number bear-flex-1",l)})]}),e.jsxs("div",{className:"bear-flex bear-gap-3",children:[e.jsx("div",{className:c.cn(x,"bear-flex-1"),children:e.jsx("input",{type:"text",inputMode:"numeric",autoComplete:"cc-exp",value:m,onChange:v,placeholder:s.expiryPlaceholder,disabled:n,className:c.cn("Bear-CreditInput__expiry bear-w-full",l)})}),e.jsx("div",{className:c.cn(x,"bear-w-24"),children:e.jsx("input",{type:"text",inputMode:"numeric",autoComplete:"cc-csc",value:C,onChange:D,placeholder:s.cvvPlaceholder,disabled:n,className:c.cn("Bear-CreditInput__cvv bear-w-full bear-text-center",l)})})]}),y&&e.jsx("div",{className:x,children:e.jsx("input",{type:"text",autoComplete:"cc-name",value:j,onChange:F,placeholder:s.namePlaceholder,disabled:n,className:c.cn("Bear-CreditInput__name bear-w-full",l)})})]}),b&&e.jsx("p",{className:"Bear-CreditInput__error bear-mt-1 bear-text-xs bear-text-red-400",children:b}),Object.values(g).map((a,i)=>e.jsx("p",{className:"Bear-CreditInput__error bear-mt-1 bear-text-xs bear-text-red-400",children:a},i)),I&&!b&&Object.keys(g).length===0&&e.jsx("p",{className:"Bear-CreditInput__helper bear-mt-1 bear-text-xs bear-text-zinc-500 dark:bear-text-zinc-400",children:I})]})};exports.CreditInput=H;

package/dist/components/CreditInput/CreditInput.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={cardNumber:"Card Number",expiry:"Expiry",cvv:"CVV",name:"Cardholder Name",cardNumberPlaceholder:"1234 5678 9012 3456",expiryPlaceholder:"MM/YY",cvvPlaceholder:"123",namePlaceholder:"John Doe",invalidCard:"Invalid card number",invalidExpiry:"Invalid expiry date",invalidCvv:"Invalid CVV"},r={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"},a={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"},n={visa:/^4/,mastercard:/^(5[1-5]|2[2-7])/,amex:/^3[47]/,discover:/^(6011|65|64[4-9])/,diners:/^(36|38|30[0-5])/,jcb:/^35/,unionpay:/^62/,unknown:/.*/},d={visa:[13,16,19],mastercard:[16],amex:[15],discover:[16,19],diners:[14,16,19],jcb:[16,19],unionpay:[16,17,18,19],unknown:[16]},i={visa:3,mastercard:3,amex:4,discover:3,diners:3,jcb:3,unionpay:3,unknown:3},b={visa:[4,4,4,4,3],mastercard:[4,4,4,4],amex:[4,6,5],discover:[4,4,4,4,3],diners:[4,6,4,4,1],jcb:[4,4,4,4,3],unionpay:[4,4,4,4,3],unknown:[4,4,4,4]};exports.CARD_FORMATS=b;exports.CARD_NUMBER_LENGTHS=d;exports.CARD_PATTERNS=n;exports.CREDIT_INPUT_DEFAULT_TRANSLATIONS=e;exports.CREDIT_INPUT_SIZE_CLASSES=r;exports.CREDIT_INPUT_VARIANT_CLASSES=a;exports.CVV_LENGTHS=i;

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

@@ -0,0 +1,37 @@
+import { CreditInputTranslations, CardType } from './CreditInput.types';
+/**
+ * Default translations
+ */
+export declare const CREDIT_INPUT_DEFAULT_TRANSLATIONS: CreditInputTranslations;
+/**
+ * Size classes
+ */
+export declare const CREDIT_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 CREDIT_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";
+};
+/**
+ * Card type patterns (regex for detection)
+ */
+export declare const CARD_PATTERNS: Record<CardType, RegExp>;
+/**
+ * Card number lengths by type
+ */
+export declare const CARD_NUMBER_LENGTHS: Record<CardType, number[]>;
+/**
+ * CVV lengths by card type
+ */
+export declare const CVV_LENGTHS: Record<CardType, number>;
+/**
+ * Card format patterns (spacing)
+ */
+export declare const CARD_FORMATS: Record<CardType, number[]>;

package/dist/components/CreditInput/CreditInput.const.js

@@ -0,0 +1,66 @@
+const r = {
+  cardNumber: "Card Number",
+  expiry: "Expiry",
+  cvv: "CVV",
+  name: "Cardholder Name",
+  cardNumberPlaceholder: "1234 5678 9012 3456",
+  expiryPlaceholder: "MM/YY",
+  cvvPlaceholder: "123",
+  namePlaceholder: "John Doe",
+  invalidCard: "Invalid card number",
+  invalidExpiry: "Invalid expiry date",
+  invalidCvv: "Invalid CVV"
+}, 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"
+}, a = {
+  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"
+}, n = {
+  visa: /^4/,
+  mastercard: /^(5[1-5]|2[2-7])/,
+  amex: /^3[47]/,
+  discover: /^(6011|65|64[4-9])/,
+  diners: /^(36|38|30[0-5])/,
+  jcb: /^35/,
+  unionpay: /^62/,
+  unknown: /.*/
+}, d = {
+  visa: [13, 16, 19],
+  mastercard: [16],
+  amex: [15],
+  discover: [16, 19],
+  diners: [14, 16, 19],
+  jcb: [16, 19],
+  unionpay: [16, 17, 18, 19],
+  unknown: [16]
+}, i = {
+  visa: 3,
+  mastercard: 3,
+  amex: 4,
+  discover: 3,
+  diners: 3,
+  jcb: 3,
+  unionpay: 3,
+  unknown: 3
+}, b = {
+  visa: [4, 4, 4, 4, 3],
+  mastercard: [4, 4, 4, 4],
+  amex: [4, 6, 5],
+  discover: [4, 4, 4, 4, 3],
+  diners: [4, 6, 4, 4, 1],
+  jcb: [4, 4, 4, 4, 3],
+  unionpay: [4, 4, 4, 4, 3],
+  unknown: [4, 4, 4, 4]
+};
+export {
+  b as CARD_FORMATS,
+  d as CARD_NUMBER_LENGTHS,
+  n as CARD_PATTERNS,
+  r as CREDIT_INPUT_DEFAULT_TRANSLATIONS,
+  e as CREDIT_INPUT_SIZE_CLASSES,
+  a as CREDIT_INPUT_VARIANT_CLASSES,
+  i as CVV_LENGTHS
+};

package/dist/components/CreditInput/CreditInput.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { CreditInputProps } from './CreditInput.types';
+/**
+ * CreditInput - Credit card input with formatting and validation
+ *
+ * @example
+ * ```tsx
+ * <CreditInput
+ *   value={cardValue}
+ *   onChange={setCardValue}
+ *   showName={true}
+ * />
+ * ```
+ */
+export declare const CreditInput: FC<CreditInputProps>;

package/dist/components/CreditInput/CreditInput.js

@@ -0,0 +1,214 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { useState as d, useMemo as K, useEffect as U, useCallback as p } from "react";
+import { cn as t } from "../../utils/cn.js";
+import { CREDIT_INPUT_DEFAULT_TRANSLATIONS as Q, CREDIT_INPUT_SIZE_CLASSES as ee, CREDIT_INPUT_VARIANT_CLASSES as re } from "./CreditInput.const.js";
+import { createCreditCardValue as te, detectCardType as ae, getMaxCardLength as ce, formatCardNumber as ie, formatExpiry as ne, getMaxCvvLength as oe } from "./CreditInput.utils.js";
+const V = {
+  visa: /* @__PURE__ */ r("svg", { viewBox: "0 0 24 24", className: "bear-w-8 bear-h-5", fill: "currentColor", children: /* @__PURE__ */ r("path", { d: "M9.5 8.5l-1.8 7h-1.4l1.8-7h1.4zm6.5 4.5c0-1.1-.9-1.5-1.8-1.9-.6-.2-1-.4-1-.7 0-.2.2-.5.7-.5.5 0 .9.1 1.2.3l.2-1.2c-.3-.1-.9-.3-1.6-.3-1.7 0-2.9.9-2.9 2.2 0 1 .9 1.5 1.5 1.8.7.3 1 .5 1 .8 0 .4-.6.6-1.1.6-.6 0-1.1-.1-1.5-.3l-.2 1.2c.4.2 1 .3 1.7.3 1.8 0 2.9-.9 2.9-2.3h-.1zm2.7-4.5l-1.4 7h-1.3l.1-.5c-.4.4-.9.6-1.5.6-1.3 0-2.2-1.1-2.2-2.5 0-1.7 1.2-3.1 2.9-3.1.5 0 1 .1 1.4.4l.1-.4h1.3l-.4 2.5zm-2.1 2.3c0-.9-.5-1.5-1.2-1.5-.9 0-1.6.9-1.6 1.9 0 .8.5 1.4 1.2 1.4.9 0 1.6-.8 1.6-1.8z" }) }),
+  mastercard: /* @__PURE__ */ a("svg", { viewBox: "0 0 24 24", className: "bear-w-8 bear-h-5", fill: "currentColor", children: [
+    /* @__PURE__ */ r("circle", { cx: "9", cy: "12", r: "5", opacity: ".8", fill: "#eb001b" }),
+    /* @__PURE__ */ r("circle", { cx: "15", cy: "12", r: "5", opacity: ".8", fill: "#f79e1b" })
+  ] }),
+  amex: /* @__PURE__ */ a("svg", { viewBox: "0 0 24 24", className: "bear-w-8 bear-h-5", fill: "#2e77bc", children: [
+    /* @__PURE__ */ r("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2" }),
+    /* @__PURE__ */ r("text", { x: "12", y: "14", textAnchor: "middle", fontSize: "6", fill: "white", fontWeight: "bold", children: "AMEX" })
+  ] }),
+  discover: /* @__PURE__ */ a("svg", { viewBox: "0 0 24 24", className: "bear-w-8 bear-h-5", fill: "#ff6600", children: [
+    /* @__PURE__ */ r("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2" }),
+    /* @__PURE__ */ r("circle", { cx: "15", cy: "12", r: "3", fill: "white" })
+  ] }),
+  diners: /* @__PURE__ */ a("svg", { viewBox: "0 0 24 24", className: "bear-w-8 bear-h-5", fill: "#0079be", children: [
+    /* @__PURE__ */ r("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2" }),
+    /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "4", fill: "white" })
+  ] }),
+  jcb: /* @__PURE__ */ a("svg", { viewBox: "0 0 24 24", className: "bear-w-8 bear-h-5", children: [
+    /* @__PURE__ */ r("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2", fill: "#0e4c96" }),
+    /* @__PURE__ */ r("text", { x: "12", y: "14", textAnchor: "middle", fontSize: "5", fill: "white", fontWeight: "bold", children: "JCB" })
+  ] }),
+  unionpay: /* @__PURE__ */ a("svg", { viewBox: "0 0 24 24", className: "bear-w-8 bear-h-5", children: [
+    /* @__PURE__ */ r("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2", fill: "#d9222a" }),
+    /* @__PURE__ */ r("text", { x: "12", y: "14", textAnchor: "middle", fontSize: "4", fill: "white", fontWeight: "bold", children: "UnionPay" })
+  ] }),
+  unknown: /* @__PURE__ */ a("svg", { viewBox: "0 0 24 24", className: "bear-w-8 bear-h-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ r("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2" }),
+    /* @__PURE__ */ r("line", { x1: "2", y1: "10", x2: "22", y2: "10" })
+  ] })
+}, be = ({
+  value: e,
+  onChange: m,
+  mode: W = "single",
+  showName: g = !1,
+  size: Y = "md",
+  variant: $ = "default",
+  disabled: n = !1,
+  required: O = !1,
+  label: B,
+  helperText: I,
+  error: b,
+  acceptedCards: N,
+  validateOnInput: M = !0,
+  className: F,
+  testId: J,
+  translations: k,
+  icon: T
+}) => {
+  const [x, E] = d((e == null ? void 0 : e.number) || ""), [f, S] = d(
+    e != null && e.expiryMonth && (e != null && e.expiryYear) ? `${e.expiryMonth}/${e.expiryYear}` : ""
+  ), [C, z] = d((e == null ? void 0 : e.cvv) || ""), [w, A] = d((e == null ? void 0 : e.name) || ""), [y, P] = d("unknown"), [_, L] = d({}), i = K(() => ({
+    ...Q,
+    ...k
+  }), [k]);
+  U(() => {
+    (e == null ? void 0 : e.number) !== void 0 && E(e.number), e != null && e.expiryMonth && (e != null && e.expiryYear) && S(`${e.expiryMonth}/${e.expiryYear}`), (e == null ? void 0 : e.cvv) !== void 0 && z(e.cvv), (e == null ? void 0 : e.name) !== void 0 && A(e.name), (e == null ? void 0 : e.cardType) !== void 0 && P(e.cardType);
+  }, [e]);
+  const j = p(() => {
+    const c = te(x, f, C, g ? w : void 0);
+    m == null || m(c);
+  }, [x, f, C, w, g, m]);
+  U(() => {
+    j();
+  }, [j]);
+  const D = p((c) => {
+    const o = c.target.value.replace(/\D/g, ""), l = ae(o);
+    P(l);
+    const Z = ce(l), q = o.slice(0, Z), G = ie(q, l);
+    E(G), M && N && !N.includes(l) && l !== "unknown" ? L((u) => ({ ...u, number: i.invalidCard })) : L((u) => {
+      const { number: se, ...H } = u;
+      return H;
+    });
+  }, [N, M, i.invalidCard]), v = p((c) => {
+    const o = ne(c.target.value);
+    S(o);
+  }, []), R = p((c) => {
+    const o = c.target.value.replace(/\D/g, ""), l = oe(y);
+    z(o.slice(0, l));
+  }, [y]), X = p((c) => {
+    A(c.target.value);
+  }, []), s = t(
+    "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",
+    ee[Y]
+  ), h = t(
+    "bear-flex bear-items-center bear-rounded-lg bear-border bear-transition-colors",
+    re[$],
+    b || Object.keys(_).length > 0 ? "bear-border-red-500" : "focus-within:bear-border-pink-500",
+    n && "bear-opacity-50 bear-cursor-not-allowed"
+  );
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: t("Bear-CreditInput", F),
+      "data-testid": J,
+      children: [
+        B && /* @__PURE__ */ a("label", { className: "Bear-CreditInput__label bear-block bear-text-sm bear-font-medium bear-text-zinc-700 dark:bear-text-zinc-300 bear-mb-1.5", children: [
+          B,
+          O && /* @__PURE__ */ r("span", { className: "bear-text-red-500 bear-ml-0.5", children: "*" })
+        ] }),
+        W === "single" ? /* @__PURE__ */ a("div", { className: t("Bear-CreditInput__single", h), children: [
+          /* @__PURE__ */ r("div", { className: "Bear-CreditInput__icon bear-pl-3 bear-pr-1", children: T ?? V[y] }),
+          /* @__PURE__ */ r(
+            "input",
+            {
+              type: "text",
+              inputMode: "numeric",
+              autoComplete: "cc-number",
+              value: x,
+              onChange: D,
+              placeholder: i.cardNumberPlaceholder,
+              disabled: n,
+              className: t("Bear-CreditInput__number bear-flex-1", s)
+            }
+          ),
+          /* @__PURE__ */ r(
+            "input",
+            {
+              type: "text",
+              inputMode: "numeric",
+              autoComplete: "cc-exp",
+              value: f,
+              onChange: v,
+              placeholder: i.expiryPlaceholder,
+              disabled: n,
+              className: t("Bear-CreditInput__expiry bear-w-16 bear-text-center", s)
+            }
+          ),
+          /* @__PURE__ */ r(
+            "input",
+            {
+              type: "text",
+              inputMode: "numeric",
+              autoComplete: "cc-csc",
+              value: C,
+              onChange: R,
+              placeholder: i.cvvPlaceholder,
+              disabled: n,
+              className: t("Bear-CreditInput__cvv bear-w-12 bear-text-center bear-pr-3", s)
+            }
+          )
+        ] }) : /* @__PURE__ */ a("div", { className: "Bear-CreditInput__split bear-space-y-3", children: [
+          /* @__PURE__ */ a("div", { className: h, children: [
+            /* @__PURE__ */ r("div", { className: "Bear-CreditInput__icon bear-pl-3 bear-pr-1", children: T ?? V[y] }),
+            /* @__PURE__ */ r(
+              "input",
+              {
+                type: "text",
+                inputMode: "numeric",
+                autoComplete: "cc-number",
+                value: x,
+                onChange: D,
+                placeholder: i.cardNumberPlaceholder,
+                disabled: n,
+                className: t("Bear-CreditInput__number bear-flex-1", s)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ a("div", { className: "bear-flex bear-gap-3", children: [
+            /* @__PURE__ */ r("div", { className: t(h, "bear-flex-1"), children: /* @__PURE__ */ r(
+              "input",
+              {
+                type: "text",
+                inputMode: "numeric",
+                autoComplete: "cc-exp",
+                value: f,
+                onChange: v,
+                placeholder: i.expiryPlaceholder,
+                disabled: n,
+                className: t("Bear-CreditInput__expiry bear-w-full", s)
+              }
+            ) }),
+            /* @__PURE__ */ r("div", { className: t(h, "bear-w-24"), children: /* @__PURE__ */ r(
+              "input",
+              {
+                type: "text",
+                inputMode: "numeric",
+                autoComplete: "cc-csc",
+                value: C,
+                onChange: R,
+                placeholder: i.cvvPlaceholder,
+                disabled: n,
+                className: t("Bear-CreditInput__cvv bear-w-full bear-text-center", s)
+              }
+            ) })
+          ] }),
+          g && /* @__PURE__ */ r("div", { className: h, children: /* @__PURE__ */ r(
+            "input",
+            {
+              type: "text",
+              autoComplete: "cc-name",
+              value: w,
+              onChange: X,
+              placeholder: i.namePlaceholder,
+              disabled: n,
+              className: t("Bear-CreditInput__name bear-w-full", s)
+            }
+          ) })
+        ] }),
+        b && /* @__PURE__ */ r("p", { className: "Bear-CreditInput__error bear-mt-1 bear-text-xs bear-text-red-400", children: b }),
+        Object.values(_).map((c, o) => /* @__PURE__ */ r("p", { className: "Bear-CreditInput__error bear-mt-1 bear-text-xs bear-text-red-400", children: c }, o)),
+        I && !b && Object.keys(_).length === 0 && /* @__PURE__ */ r("p", { className: "Bear-CreditInput__helper bear-mt-1 bear-text-xs bear-text-zinc-500 dark:bear-text-zinc-400", children: I })
+      ]
+    }
+  );
+};
+export {
+  be as CreditInput
+};

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

@@ -0,0 +1,93 @@
+import { ReactNode } from 'react';
+/**
+ * Credit card types
+ */
+export type CardType = 'visa' | 'mastercard' | 'amex' | 'discover' | 'diners' | 'jcb' | 'unionpay' | 'unknown';
+/**
+ * Credit card value
+ */
+export interface CreditCardValue {
+    /** Card number (formatted) */
+    number: string;
+    /** Card number (raw digits only) */
+    rawNumber: string;
+    /** Expiry month */
+    expiryMonth: string;
+    /** Expiry year */
+    expiryYear: string;
+    /** CVV/CVC code */
+    cvv: string;
+    /** Cardholder name */
+    name?: string;
+    /** Detected card type */
+    cardType: CardType;
+    /** Whether the card number is valid (Luhn check) */
+    isValid: boolean;
+}
+/**
+ * CreditInput size variants
+ */
+export type CreditInputSize = 'sm' | 'md' | 'lg';
+/**
+ * CreditInput variant styles
+ */
+export type CreditInputVariant = 'default' | 'filled' | 'outline';
+/**
+ * CreditInput display mode
+ */
+export type CreditInputMode = 'single' | 'split';
+/**
+ * CreditInput translations
+ */
+export interface CreditInputTranslations {
+    cardNumber: string;
+    expiry: string;
+    cvv: string;
+    name: string;
+    cardNumberPlaceholder: string;
+    expiryPlaceholder: string;
+    cvvPlaceholder: string;
+    namePlaceholder: string;
+    invalidCard: string;
+    invalidExpiry: string;
+    invalidCvv: string;
+}
+/**
+ * CreditInput component props
+ */
+export interface CreditInputProps {
+    /** Current credit card value */
+    value?: Partial<CreditCardValue>;
+    /** Callback when value changes */
+    onChange?: (value: CreditCardValue) => void;
+    /** Display mode */
+    mode?: CreditInputMode;
+    /** Whether to show cardholder name field */
+    showName?: boolean;
+    /** Size variant */
+    size?: CreditInputSize;
+    /** Style variant */
+    variant?: CreditInputVariant;
+    /** Whether input is disabled */
+    disabled?: boolean;
+    /** Whether input is required */
+    required?: boolean;
+    /** Label text */
+    label?: string;
+    /** Helper text */
+    helperText?: string;
+    /** Error message */
+    error?: string;
+    /** Accepted card types */
+    acceptedCards?: CardType[];
+    /** Whether to validate on input */
+    validateOnInput?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+    /** Translation strings */
+    translations?: Partial<CreditInputTranslations>;
+    /** Custom card icon */
+    icon?: ReactNode;
+}

package/dist/components/CreditInput/CreditInput.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./CreditInput.const.cjs"),l=e=>{const t=e.replace(/\D/g,""),n=["amex","diners","discover","jcb","unionpay","mastercard","visa"];for(const r of n)if(i.CARD_PATTERNS[r].test(t))return r;return"unknown"},u=(e,t)=>{const n=e.replace(/\D/g,""),r=i.CARD_FORMATS[t]||i.CARD_FORMATS.unknown;let a="",s=0;for(const o of r){if(s>=n.length)break;a&&(a+=" "),a+=n.slice(s,s+o),s+=o}return a},N=e=>{const t=e.replace(/\D/g,"");if(t.length===0)return"";if(t.length===1)return parseInt(t)>1?`0${t}/`:t;if(t.length===2)return parseInt(t)>12?`0${t[0]}/${t[1]}`:`${t}/`;const n=t.slice(0,2),r=t.slice(2,4);return`${n}/${r}`},d=e=>{const t=e.split("/");return{month:t[0]||"",year:t[1]||""}},g=e=>{const t=e.replace(/\D/g,"");if(t.length===0)return!1;let n=0,r=!1;for(let a=t.length-1;a>=0;a--){let s=parseInt(t[a],10);r&&(s*=2,s>9&&(s-=9)),n+=s,r=!r}return n%10===0},p=(e,t)=>{const n=e.replace(/\D/g,"");return(i.CARD_NUMBER_LENGTHS[t]||i.CARD_NUMBER_LENGTHS.unknown).includes(n.length)},f=(e,t)=>{const n=e.replace(/\D/g,""),r=i.CVV_LENGTHS[t]||i.CVV_LENGTHS.unknown;return n.length===r},h=(e,t)=>{const n=parseInt(e,10),r=parseInt(t,10);if(isNaN(n)||isNaN(r)||n<1||n>12)return!1;const a=new Date,s=a.getFullYear()%100,o=a.getMonth()+1;return!(r<s||r===s&&n<o)},y=(e,t,n,r)=>{const a=e.replace(/\D/g,""),s=l(a),{month:o,year:c}=d(t),C=g(a)&&p(a,s),v=h(o,c),m=f(n,s);return{number:u(a,s),rawNumber:a,expiryMonth:o,expiryYear:c,cvv:n.replace(/\D/g,""),name:r,cardType:s,isValid:C&&v&&m}},E=e=>i.CVV_LENGTHS[e]||i.CVV_LENGTHS.unknown,L=e=>{const t=i.CARD_NUMBER_LENGTHS[e]||i.CARD_NUMBER_LENGTHS.unknown;return Math.max(...t)};exports.createCreditCardValue=y;exports.detectCardType=l;exports.formatCardNumber=u;exports.formatExpiry=N;exports.getMaxCardLength=L;exports.getMaxCvvLength=E;exports.parseExpiry=d;exports.validateCardLength=p;exports.validateCvvLength=f;exports.validateExpiry=h;exports.validateLuhn=g;