@forgedevstack/bear 1.1.9 → 1.2.1

package/dist/components/CreditInput/CreditInput.cjs

@@ -1 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),a=require("../../utils/cn.cjs"),N=require("./CreditInput.const.cjs"),x=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:b,mode:U="single",showName:f=!1,size:O="md",variant:V="default",disabled:n=!1,required:W=!1,label:_,helperText:I,error:h,acceptedCards:y,validateOnInput:B=!0,className:Y,testId:$,translations:k,icon:S})=>{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(()=>({...N.CREDIT_INPUT_DEFAULT_TRANSLATIONS,...k}),[k]);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 c=x.createCreditCardValue(p,m,C,f?j:void 0);b==null||b(c)},[p,m,C,j,f,b]);t.useEffect(()=>{L()},[L]);const v=t.useCallback(c=>{const i=c.target.value.replace(/\D/g,""),o=x.detectCardType(i);P(o);const J=x.getMaxCardLength(o),X=i.slice(0,J),Z=x.formatCardNumber(X,o);M(Z),B&&y&&!y.includes(o)&&o!=="unknown"?A(w=>({...w,number:s.invalidCard})):A(w=>{const{number:K,...G}=w;return G})},[y,B,s.invalidCard]),R=t.useCallback(c=>{const i=x.formatExpiry(c.target.value);T(i)},[]),D=t.useCallback(c=>{const i=c.target.value.replace(/\D/g,""),o=x.getMaxCvvLength(u);E(i.slice(0,o))},[u]),F=t.useCallback(c=>{z(c.target.value)},[]),l=a.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",N.CREDIT_INPUT_SIZE_CLASSES[O]),d=a.cn("bear-flex bear-items-center bear-rounded-lg bear-border bear-transition-colors",N.CREDIT_INPUT_VARIANT_CLASSES[V],h||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:a.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:a.cn("Bear-CreditInput__single bear-flex bear-flex-wrap bear-items-center bear-gap-2 sm:bear-gap-0",d),children:[e.jsxs("div",{className:"Bear-CreditInput__row-main bear-flex bear-min-w-0 bear-flex-1 bear-basis-full sm:bear-basis-0 sm:bear-flex-1 bear-items-center",children:[e.jsx("div",{className:"Bear-CreditInput__icon bear-pl-3 bear-pr-1 bear-shrink-0",children:S??q[u]}),e.jsx("input",{type:"text",inputMode:"numeric",autoComplete:"cc-number",value:p,onChange:v,placeholder:s.cardNumberPlaceholder,disabled:n,className:a.cn("Bear-CreditInput__number bear-min-w-0 bear-flex-1",l)})]}),e.jsx("input",{type:"text",inputMode:"numeric",autoComplete:"cc-exp",value:m,onChange:R,placeholder:s.expiryPlaceholder,disabled:n,className:a.cn("Bear-CreditInput__expiry bear-w-20 sm:bear-w-16 bear-text-center bear-shrink-0",l)}),e.jsx("input",{type:"text",inputMode:"numeric",autoComplete:"cc-csc",value:C,onChange:D,placeholder:s.cvvPlaceholder,disabled:n,className:a.cn("Bear-CreditInput__cvv bear-w-14 sm:bear-w-12 bear-text-center bear-pr-3 bear-shrink-0",l)})]}):e.jsxs("div",{className:"Bear-CreditInput__split bear-space-y-3",children:[e.jsxs("div",{className:d,children:[e.jsx("div",{className:"Bear-CreditInput__icon bear-pl-3 bear-pr-1",children:S??q[u]}),e.jsx("input",{type:"text",inputMode:"numeric",autoComplete:"cc-number",value:p,onChange:v,placeholder:s.cardNumberPlaceholder,disabled:n,className:a.cn("Bear-CreditInput__number bear-flex-1",l)})]}),e.jsxs("div",{className:"bear-flex bear-gap-3",children:[e.jsx("div",{className:a.cn(d,"bear-flex-1"),children:e.jsx("input",{type:"text",inputMode:"numeric",autoComplete:"cc-exp",value:m,onChange:R,placeholder:s.expiryPlaceholder,disabled:n,className:a.cn("Bear-CreditInput__expiry bear-w-full",l)})}),e.jsx("div",{className:a.cn(d,"bear-w-24"),children:e.jsx("input",{type:"text",inputMode:"numeric",autoComplete:"cc-csc",value:C,onChange:D,placeholder:s.cvvPlaceholder,disabled:n,className:a.cn("Bear-CreditInput__cvv bear-w-full bear-text-center",l)})})]}),f&&e.jsx("div",{className:d,children:e.jsx("input",{type:"text",autoComplete:"cc-name",value:j,onChange:F,placeholder:s.namePlaceholder,disabled:n,className:a.cn("Bear-CreditInput__name bear-w-full",l)})})]}),h&&e.jsx("p",{className:"Bear-CreditInput__error bear-mt-1 bear-text-xs bear-text-red-400",children:h}),Object.values(g).map((c,i)=>e.jsx("p",{className:"Bear-CreditInput__error bear-mt-1 bear-text-xs bear-text-red-400",children:c},i)),I&&!h&&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.js

@@ -1,41 +1,41 @@
-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 { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { useState as d, useMemo as K, useEffect as U, useCallback as m } from "react";
+import { cn as a } 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";
+import { createCreditCardValue as te, detectCardType as ae, getMaxCardLength as ce, formatCardNumber as ie, formatExpiry as ne, getMaxCvvLength as se } 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: [
+  mastercard: /* @__PURE__ */ t("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: [
+  amex: /* @__PURE__ */ t("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: [
+  discover: /* @__PURE__ */ t("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: [
+  diners: /* @__PURE__ */ t("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: [
+  jcb: /* @__PURE__ */ t("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: [
+  unionpay: /* @__PURE__ */ t("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: [
+  unknown: /* @__PURE__ */ t("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 = ({
+}, pe = ({
   value: e,
-  onChange: m,
+  onChange: h,
   mode: W = "single",
   showName: g = !1,
   size: Y = "md",
@@ -44,80 +44,82 @@ const V = {
   required: O = !1,
   label: B,
   helperText: I,
-  error: b,
-  acceptedCards: N,
-  validateOnInput: M = !0,
+  error: p,
+  acceptedCards: w,
+  validateOnInput: k = !0,
   className: F,
   testId: J,
-  translations: k,
+  translations: M,
   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(() => ({
+  ), [C, z] = d((e == null ? void 0 : e.cvv) || ""), [N, A] = d((e == null ? void 0 : e.name) || ""), [y, P] = d("unknown"), [_, L] = d({}), i = K(() => ({
     ...Q,
-    ...k
-  }), [k]);
+    ...M
+  }), [M]);
   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]);
+  const j = m(() => {
+    const c = te(x, f, C, g ? N : void 0);
+    h == null || h(c);
+  }, [x, f, C, N, g, h]);
   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;
+  const v = m((c) => {
+    const s = c.target.value.replace(/\D/g, ""), o = ae(s);
+    P(o);
+    const Z = ce(o), q = s.slice(0, Z), G = ie(q, o);
+    E(G), k && w && !w.includes(o) && o !== "unknown" ? L((u) => ({ ...u, number: i.invalidCard })) : L((u) => {
+      const { number: le, ...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) => {
+  }, [w, k, i.invalidCard]), D = m((c) => {
+    const s = ne(c.target.value);
+    S(s);
+  }, []), R = m((c) => {
+    const s = c.target.value.replace(/\D/g, ""), o = se(y);
+    z(s.slice(0, o));
+  }, [y]), X = m((c) => {
     A(c.target.value);
-  }, []), s = t(
+  }, []), l = a(
     "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(
+  ), b = a(
     "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",
+    p || 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(
+  return /* @__PURE__ */ t(
     "div",
     {
-      className: t("Bear-CreditInput", F),
+      className: a("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 && /* @__PURE__ */ t("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)
-            }
-          ),
+        W === "single" ? /* @__PURE__ */ t("div", { className: a("Bear-CreditInput__single bear-flex bear-flex-wrap bear-items-center bear-gap-2 sm:bear-gap-0", b), children: [
+          /* @__PURE__ */ t("div", { className: "Bear-CreditInput__row-main bear-flex bear-min-w-0 bear-flex-1 bear-basis-full sm:bear-basis-0 sm:bear-flex-1 bear-items-center", children: [
+            /* @__PURE__ */ r("div", { className: "Bear-CreditInput__icon bear-pl-3 bear-pr-1 bear-shrink-0", children: T ?? V[y] }),
+            /* @__PURE__ */ r(
+              "input",
+              {
+                type: "text",
+                inputMode: "numeric",
+                autoComplete: "cc-number",
+                value: x,
+                onChange: v,
+                placeholder: i.cardNumberPlaceholder,
+                disabled: n,
+                className: a("Bear-CreditInput__number bear-min-w-0 bear-flex-1", l)
+              }
+            )
+          ] }),
           /* @__PURE__ */ r(
             "input",
             {
@@ -125,10 +127,10 @@ const V = {
               inputMode: "numeric",
               autoComplete: "cc-exp",
               value: f,
-              onChange: v,
+              onChange: D,
               placeholder: i.expiryPlaceholder,
               disabled: n,
-              className: t("Bear-CreditInput__expiry bear-w-16 bear-text-center", s)
+              className: a("Bear-CreditInput__expiry bear-w-20 sm:bear-w-16 bear-text-center bear-shrink-0", l)
             }
           ),
           /* @__PURE__ */ r(
@@ -141,11 +143,11 @@ const V = {
               onChange: R,
               placeholder: i.cvvPlaceholder,
               disabled: n,
-              className: t("Bear-CreditInput__cvv bear-w-12 bear-text-center bear-pr-3", s)
+              className: a("Bear-CreditInput__cvv bear-w-14 sm:bear-w-12 bear-text-center bear-pr-3 bear-shrink-0", l)
             }
           )
-        ] }) : /* @__PURE__ */ a("div", { className: "Bear-CreditInput__split bear-space-y-3", children: [
-          /* @__PURE__ */ a("div", { className: h, children: [
+        ] }) : /* @__PURE__ */ t("div", { className: "Bear-CreditInput__split bear-space-y-3", children: [
+          /* @__PURE__ */ t("div", { className: b, children: [
             /* @__PURE__ */ r("div", { className: "Bear-CreditInput__icon bear-pl-3 bear-pr-1", children: T ?? V[y] }),
             /* @__PURE__ */ r(
               "input",
@@ -154,28 +156,28 @@ const V = {
                 inputMode: "numeric",
                 autoComplete: "cc-number",
                 value: x,
-                onChange: D,
+                onChange: v,
                 placeholder: i.cardNumberPlaceholder,
                 disabled: n,
-                className: t("Bear-CreditInput__number bear-flex-1", s)
+                className: a("Bear-CreditInput__number bear-flex-1", l)
               }
             )
           ] }),
-          /* @__PURE__ */ a("div", { className: "bear-flex bear-gap-3", children: [
-            /* @__PURE__ */ r("div", { className: t(h, "bear-flex-1"), children: /* @__PURE__ */ r(
+          /* @__PURE__ */ t("div", { className: "bear-flex bear-gap-3", children: [
+            /* @__PURE__ */ r("div", { className: a(b, "bear-flex-1"), children: /* @__PURE__ */ r(
               "input",
               {
                 type: "text",
                 inputMode: "numeric",
                 autoComplete: "cc-exp",
                 value: f,
-                onChange: v,
+                onChange: D,
                 placeholder: i.expiryPlaceholder,
                 disabled: n,
-                className: t("Bear-CreditInput__expiry bear-w-full", s)
+                className: a("Bear-CreditInput__expiry bear-w-full", l)
               }
             ) }),
-            /* @__PURE__ */ r("div", { className: t(h, "bear-w-24"), children: /* @__PURE__ */ r(
+            /* @__PURE__ */ r("div", { className: a(b, "bear-w-24"), children: /* @__PURE__ */ r(
               "input",
               {
                 type: "text",
@@ -185,30 +187,30 @@ const V = {
                 onChange: R,
                 placeholder: i.cvvPlaceholder,
                 disabled: n,
-                className: t("Bear-CreditInput__cvv bear-w-full bear-text-center", s)
+                className: a("Bear-CreditInput__cvv bear-w-full bear-text-center", l)
               }
             ) })
           ] }),
-          g && /* @__PURE__ */ r("div", { className: h, children: /* @__PURE__ */ r(
+          g && /* @__PURE__ */ r("div", { className: b, children: /* @__PURE__ */ r(
             "input",
             {
               type: "text",
               autoComplete: "cc-name",
-              value: w,
+              value: N,
               onChange: X,
               placeholder: i.namePlaceholder,
               disabled: n,
-              className: t("Bear-CreditInput__name bear-w-full", s)
+              className: a("Bear-CreditInput__name bear-w-full", l)
             }
           ) })
         ] }),
-        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 })
+        p && /* @__PURE__ */ r("p", { className: "Bear-CreditInput__error bear-mt-1 bear-text-xs bear-text-red-400", children: p }),
+        Object.values(_).map((c, s) => /* @__PURE__ */ r("p", { className: "Bear-CreditInput__error bear-mt-1 bear-text-xs bear-text-red-400", children: c }, s)),
+        I && !p && 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
+  pe as CreditInput
 };

package/dist/components/DatePicker/DatePicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),J=require("react-dom"),K=require("../Calendar/Calendar.cjs"),D=require("../../utils/cn.cjs"),Q=require("../../hooks/useBearStyles.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const U=require("./DatePicker.utils.cjs"),X=({value:c,onChange:t,minDate:y,maxDate:j,disabled:b=!1,placeholder:z="Select date",label:p,error:o,helperText:m,format:B="MM/DD/YYYY",clearable:P=!0,className:_,style:h,bis:v,showWeekNumbers:S=!1,disabledDates:N=[],highlightedDates:g=[],slots:q,weekdayLabels:R,firstDayOfWeek:V=0,size:H="md",variant:M="default",icon:O})=>{const[i,n]=a.useState(!1),[E,L]=a.useState(c??new Date),[x,Y]=a.useState({top:0,left:0}),k=a.useRef(null),d=a.useRef(null),w=Q.useBearStyles(v,h);a.useEffect(()=>{if(i&&d.current){const e=d.current.getBoundingClientRect(),l=8,s=360,G=window.innerHeight-e.bottom<s&&e.top>s;Y({top:G?e.top-s-l:e.bottom+l,left:e.left})}},[i]),a.useEffect(()=>{const e=l=>{var u,f;const s=l.target;(u=k.current)!=null&&u.contains(s)||(f=s.closest)!=null&&f.call(s,"[data-bear-datepicker-calendar]")||n(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const T=a.useCallback(e=>{t==null||t(e),n(!1)},[t]),A=a.useCallback(()=>{t==null||t(null),n(!1)},[t]),I=a.useCallback(e=>{L(e)},[]),W={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4",lg:"bear-py-2.5 bear-px-5 bear-text-lg"},F={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-400 dark:bear-border-zinc-500"};return r.jsxs("div",{ref:k,className:D.cn("Bear-DatePicker bear-relative",_),style:Object.keys(w).length?w:void 0,children:[p&&r.jsx("label",{className:"Bear-DatePicker__label bear-block bear-text-sm bear-font-medium bear-text-zinc-700 dark:bear-text-zinc-300 bear-mb-1.5",children:p}),r.jsxs("button",{ref:d,type:"button",onClick:()=>!b&&n(!i),disabled:b,className:D.cn("Bear-DatePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",W[H],F[M],o?"bear-border-red-500":"focus:bear-border-pink-500",b&&"bear-opacity-50 bear-cursor-not-allowed",c?"bear-text-zinc-900 dark:bear-text-white":"bear-text-zinc-500"),children:[r.jsx("span",{className:"Bear-DatePicker__value",children:c?U.formatDate(c,B):z}),r.jsx("span",{className:"Bear-DatePicker__icon",children:O??r.jsx("svg",{className:"bear-w-5 bear-h-5 bear-text-zinc-400 bear-shrink-0",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"})})})]}),o&&r.jsx("p",{className:"Bear-DatePicker__error bear-mt-1 bear-text-xs bear-text-red-400",children:o}),m&&!o&&r.jsx("p",{className:"Bear-DatePicker__helper bear-mt-1 bear-text-xs bear-text-zinc-500",children:m}),i&&typeof document<"u"&&J.createPortal(r.jsx("div",{"data-bear-datepicker-calendar":!0,className:"Bear-DatePicker__dropdown bear-fixed bear-z-[9999]",style:{top:x.top,left:x.left},children:r.jsx(K.Calendar,{viewDate:E,onViewChange:I,value:c??null,onSelect:T,minDate:y,maxDate:j,disabledDates:N,highlightedDates:g,slots:q,weekdayLabels:R,firstDayOfWeek:V,showWeekNumbers:S,clearable:P,onClear:A,showTodayButton:!0,onToday:()=>{t==null||t(new Date),n(!1)}})}),document.body)]})};exports.DatePicker=X;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),J=require("react-dom"),K=require("../Calendar/Calendar.cjs"),D=require("../../utils/cn.cjs"),Q=require("../../hooks/useBearStyles.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");require("../../context/BearProvider.cjs");const U=require("./DatePicker.utils.cjs"),X=({value:c,onChange:t,minDate:y,maxDate:j,disabled:b=!1,placeholder:z="Select date",label:p,error:i,helperText:m,format:B="MM/DD/YYYY",clearable:P=!0,className:_,style:h,bis:v,showWeekNumbers:S=!1,disabledDates:q=[],highlightedDates:N=[],slots:g,weekdayLabels:R,firstDayOfWeek:V=0,size:H="md",variant:M="default",icon:O})=>{const[o,n]=a.useState(!1),[E,L]=a.useState(c??new Date),[x,Y]=a.useState({top:0,left:0}),k=a.useRef(null),d=a.useRef(null),w=Q.useBearStyles(v,h);a.useEffect(()=>{if(o&&d.current){const e=d.current.getBoundingClientRect(),l=8,s=360,G=window.innerHeight-e.bottom<s&&e.top>s;Y({top:G?e.top-s-l:e.bottom+l,left:e.left})}},[o]),a.useEffect(()=>{const e=l=>{var u,f;const s=l.target;(u=k.current)!=null&&u.contains(s)||(f=s.closest)!=null&&f.call(s,"[data-bear-datepicker-calendar]")||n(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const T=a.useCallback(e=>{t==null||t(e),n(!1)},[t]),A=a.useCallback(()=>{t==null||t(null),n(!1)},[t]),I=a.useCallback(e=>{L(e)},[]),W={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4",lg:"bear-py-2.5 bear-px-5 bear-text-lg"},F={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-400 dark:bear-border-zinc-500"};return r.jsxs("div",{ref:k,className:D.cn("Bear-DatePicker bear-relative",_),style:Object.keys(w).length?w:void 0,children:[p&&r.jsx("label",{className:"Bear-DatePicker__label bear-block bear-text-sm bear-font-medium bear-text-zinc-700 dark:bear-text-zinc-300 bear-mb-1.5",children:p}),r.jsxs("button",{ref:d,type:"button",onClick:()=>!b&&n(!o),disabled:b,className:D.cn("Bear-DatePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",W[H],F[M],i?"bear-border-red-500":"focus:bear-border-pink-500",b&&"bear-opacity-50 bear-cursor-not-allowed",c?"bear-text-zinc-900 dark:bear-text-white":"bear-text-zinc-500"),children:[r.jsx("span",{className:"Bear-DatePicker__value",children:c?U.formatDate(c,B):z}),r.jsx("span",{className:"Bear-DatePicker__icon",children:O??r.jsx("svg",{className:"bear-w-5 bear-h-5 bear-text-zinc-400 bear-shrink-0",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"})})})]}),i&&r.jsx("p",{className:"Bear-DatePicker__error bear-mt-1 bear-text-xs bear-text-red-400",children:i}),m&&!i&&r.jsx("p",{className:"Bear-DatePicker__helper bear-mt-1 bear-text-xs bear-text-zinc-500",children:m}),o&&typeof document<"u"&&J.createPortal(r.jsx("div",{"data-bear-datepicker-calendar":!0,className:"Bear-DatePicker__dropdown bear-fixed bear-z-[9999]",style:{top:x.top,left:x.left},children:r.jsx(K.Calendar,{viewDate:E,onViewChange:I,value:c??null,onSelect:T,minDate:y,maxDate:j,disabledDates:q,highlightedDates:N,slots:g,weekdayLabels:R,firstDayOfWeek:V,showWeekNumbers:S,clearable:P,onClear:A,showTodayButton:!0,onToday:()=>{t==null||t(new Date),n(!1)}})}),document.body)]})};exports.DatePicker=X;

package/dist/components/DatePicker/DatePicker.js

@@ -5,8 +5,9 @@ import { Calendar as Z } from "../Calendar/Calendar.js";
 import { cn as B } from "../../utils/cn.js";
 import { useBearStyles as $ } from "../../hooks/useBearStyles.js";
 import "../../hooks/useBearComponent/useBearComponent.js";
+import "../../context/BearProvider.js";
 import { formatDate as C } from "./DatePicker.utils.js";
-const ie = ({
+const le = ({
   value: o,
   onChange: t,
   minDate: _,
@@ -31,19 +32,19 @@ const ie = ({
   variant: A = "default",
   icon: I
 }) => {
-  const [c, s] = p(!1), [T, W] = p(o ?? /* @__PURE__ */ new Date()), [w, q] = p({ top: 0, left: 0 }), x = y(null), b = y(null), D = $(j, V);
+  const [i, s] = p(!1), [T, W] = p(o ?? /* @__PURE__ */ new Date()), [w, q] = p({ top: 0, left: 0 }), x = y(null), b = y(null), D = $(j, V);
   h(() => {
-    if (c && b.current) {
-      const e = b.current.getBoundingClientRect(), i = 8, a = 360, U = window.innerHeight - e.bottom < a && e.top > a;
+    if (i && b.current) {
+      const e = b.current.getBoundingClientRect(), c = 8, a = 360, U = window.innerHeight - e.bottom < a && e.top > a;
       q({
-        top: U ? e.top - a - i : e.bottom + i,
+        top: U ? e.top - a - c : e.bottom + c,
         left: e.left
       });
     }
-  }, [c]), h(() => {
-    const e = (i) => {
+  }, [i]), h(() => {
+    const e = (c) => {
       var d, m;
-      const a = i.target;
+      const a = c.target;
       (d = x.current) != null && d.contains(a) || (m = a.closest) != null && m.call(a, "[data-bear-datepicker-calendar]") || s(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
@@ -69,7 +70,7 @@ const ie = ({
       {
         ref: b,
         type: "button",
-        onClick: () => !l && s(!c),
+        onClick: () => !l && s(!i),
         disabled: l,
         className: B(
           "Bear-DatePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",
@@ -87,7 +88,7 @@ const ie = ({
     ),
     n && /* @__PURE__ */ r("p", { className: "Bear-DatePicker__error bear-mt-1 bear-text-xs bear-text-red-400", children: n }),
     k && !n && /* @__PURE__ */ r("p", { className: "Bear-DatePicker__helper bear-mt-1 bear-text-xs bear-text-zinc-500", children: k }),
-    c && typeof document < "u" && X(
+    i && typeof document < "u" && X(
       /* @__PURE__ */ r(
         "div",
         {
@@ -124,5 +125,5 @@ const ie = ({
   ] });
 };
 export {
-  ie as DatePicker
+  le as DatePicker
 };

package/dist/components/DateRangePicker/DateRangePicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),X=require("react-dom"),h=require("../../utils/cn.cjs"),r=require("./DateRangePicker.const.cjs"),b=require("./DateRangePicker.utils.cjs"),O=({year:E,month:d,range:a,onDayClick:k,onNav:L,minDate:u,maxDate:A})=>{const C=b.getCalendarDays(E,d),x=new Date;return x.setHours(0,0,0,0),e.jsxs("div",{className:"bear-w-64",children:[e.jsxs("div",{className:r.CALENDAR_HEADER_CLASSES,children:[e.jsx("button",{type:"button",onClick:()=>L(-1),className:r.NAV_BTN_CLASSES,"aria-label":"Previous month",children:e.jsx("svg",{className:"bear-w-4 bear-h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 19l-7-7 7-7"})})}),e.jsxs("span",{className:"bear-text-sm bear-font-semibold bear-text-gray-900 dark:bear-text-white",children:[r.MONTH_LABELS[d]," ",E]}),e.jsx("button",{type:"button",onClick:()=>L(1),className:r.NAV_BTN_CLASSES,"aria-label":"Next month",children:e.jsx("svg",{className:"bear-w-4 bear-h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})})})]}),e.jsx("div",{className:"bear-grid bear-grid-cols-7 bear-gap-0.5 bear-mb-1",children:r.DAY_LABELS.map(n=>e.jsx("div",{className:"bear-text-xs bear-text-center bear-font-medium bear-text-gray-400 dark:bear-text-zinc-500 bear-py-1",children:n},n))}),e.jsx("div",{className:"bear-grid bear-grid-cols-7 bear-gap-0.5",children:C.map((n,_)=>{if(!n)return e.jsx("div",{},`e-${_}`);const p=u&&n<u||A&&n>A,i=b.isSameDay(n,a.start)||b.isSameDay(n,a.end),S=b.isInRange(n,a.start,a.end),D=b.isSameDay(n,x);return e.jsx("button",{type:"button",disabled:!!p,onClick:()=>k(n),className:h.cn(r.DAY_BASE_CLASSES,p?r.DAY_DISABLED_CLASSES:r.DAY_HOVER_CLASSES,i&&r.DAY_SELECTED_CLASSES,!i&&S&&r.DAY_IN_RANGE_CLASSES,!i&&!S&&D&&r.DAY_TODAY_CLASSES,!i&&!S&&!p&&"bear-text-gray-700 dark:bear-text-zinc-300"),children:n.getDate()},n.getTime())})})]})},ee=E=>{const{value:d,onChange:a,label:k,placeholder:L="Select date range",disabled:u=!1,clearable:A=!0,minDate:C,maxDate:x,presets:n,showPresets:_=!0,size:p="md",error:i,helperText:S,className:D,testId:I,...q}=E,[N,w]=s.useState(!1),[P,V]=s.useState({top:0,left:0}),[c,f]=s.useState(d??{start:null,end:null}),[T,j]=s.useState("start"),B=s.useRef(null),R=s.useRef(null),Y=s.useRef(null),M=new Date,[m,$]=s.useState(M.getMonth()),[g,G]=s.useState(M.getFullYear()),W=m===11?0:m+1,F=m===11?g+1:g;s.useEffect(()=>{d&&f(d)},[d]),s.useEffect(()=>{if(N&&R.current){const t=R.current.getBoundingClientRect(),o=8,l=400,U=window.innerHeight-t.bottom<l&&t.top>l;V({top:U?t.top-l-o:t.bottom+o,left:t.left})}},[N]),s.useEffect(()=>{const t=o=>{var v,y;const l=o.target;(v=B.current)!=null&&v.contains(l)||(y=Y.current)!=null&&y.contains(l)||w(!1)};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[]);const H=s.useCallback(t=>{if(T==="start")f({start:t,end:null}),j("end");else{const o=t>=(c.start??t)?{start:c.start,end:t}:{start:t,end:c.start};f(o),j("start"),a==null||a(o)}},[T,c.start,a]),Z=s.useCallback(t=>{f(t),a==null||a(t),w(!1),j("start")},[a]),J=s.useCallback(()=>{const t={start:null,end:null};f(t),a==null||a(t),j("start")},[a]),K=s.useCallback(t=>{let o=m+t,l=g;o<0&&(o=11,l--),o>11&&(o=0,l++),$(o),G(l)},[m,g]),z=n??(_?r.getDefaultPresets():[]),Q=c.start?`${b.formatDate(c.start)}${c.end?` – ${b.formatDate(c.end)}`:""}`:L;return e.jsxs("div",{ref:B,className:h.cn(r.ROOT_CLASSES,D),"data-testid":I,...q,children:[k&&e.jsx("label",{className:r.LABEL_CLASSES,children:k}),e.jsxs("button",{ref:R,type:"button",disabled:u,onClick:()=>!u&&w(!N),className:h.cn(r.TRIGGER_CLASSES,r.SIZE_CLASSES[p],u&&"bear-opacity-50 bear-cursor-not-allowed"),children:[e.jsx("span",{className:h.cn(!c.start&&"bear-text-gray-400 dark:bear-text-zinc-500"),children:Q}),e.jsx("svg",{className:"bear-w-4 bear-h-4 bear-ml-2 bear-text-gray-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"})})]}),N&&typeof document<"u"&&X.createPortal(e.jsx("div",{ref:Y,"data-bear-daterangepicker-dropdown":!0,className:h.cn("bear-fixed bear-z-[9999] bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-p-4"),style:{top:P.top,left:P.left},children:e.jsxs("div",{className:"bear-flex bear-gap-4",children:[z.length>0&&e.jsxs("div",{className:"bear-border-r bear-border-gray-200 dark:bear-border-zinc-700 bear-pr-3 bear-space-y-1 bear-min-w-[120px]",children:[z.map(t=>e.jsx("button",{type:"button",onClick:()=>Z(t.range()),className:r.PRESET_BTN_CLASSES,children:t.label},t.label)),A&&c.start&&e.jsx("button",{type:"button",onClick:J,className:h.cn(r.PRESET_BTN_CLASSES,"bear-text-red-500"),children:"Clear"})]}),e.jsx(O,{year:g,month:m,range:c,onDayClick:H,onNav:K,minDate:C,maxDate:x}),e.jsx(O,{year:F,month:W,range:c,onDayClick:H,onNav:()=>{},minDate:C,maxDate:x})]})}),document.body),i&&e.jsx("p",{className:r.ERROR_CLASSES,children:i}),!i&&S&&e.jsx("p",{className:r.HELPER_CLASSES,children:S})]})};exports.DateRangePicker=ee;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),te=require("react-dom"),x=require("../../utils/cn.cjs"),r=require("./DateRangePicker.const.cjs"),u=require("./DateRangePicker.utils.cjs"),I=({year:L,month:b,range:a,onDayClick:k,onNav:A,minDate:S,maxDate:v})=>{const C=u.getCalendarDays(L,b),p=new Date;return p.setHours(0,0,0,0),e.jsxs("div",{className:"bear-w-64",children:[e.jsxs("div",{className:r.CALENDAR_HEADER_CLASSES,children:[e.jsx("button",{type:"button",onClick:()=>A(-1),className:r.NAV_BTN_CLASSES,"aria-label":"Previous month",children:e.jsx("svg",{className:"bear-w-4 bear-h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 19l-7-7 7-7"})})}),e.jsxs("span",{className:"bear-text-sm bear-font-semibold bear-text-gray-900 dark:bear-text-white",children:[r.MONTH_LABELS[b]," ",L]}),e.jsx("button",{type:"button",onClick:()=>A(1),className:r.NAV_BTN_CLASSES,"aria-label":"Next month",children:e.jsx("svg",{className:"bear-w-4 bear-h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})})})]}),e.jsx("div",{className:"bear-grid bear-grid-cols-7 bear-gap-0.5 bear-mb-1",children:r.DAY_LABELS.map(n=>e.jsx("div",{className:"bear-text-xs bear-text-center bear-font-medium bear-text-gray-400 dark:bear-text-zinc-500 bear-py-1",children:n},n))}),e.jsx("div",{className:"bear-grid bear-grid-cols-7 bear-gap-0.5",children:C.map((n,_)=>{if(!n)return e.jsx("div",{},`e-${_}`);const f=S&&n<S||v&&n>v,i=u.isSameDay(n,a.start)||u.isSameDay(n,a.end),m=u.isInRange(n,a.start,a.end),D=u.isSameDay(n,p);return e.jsx("button",{type:"button",disabled:!!f,onClick:()=>k(n),className:x.cn(r.DAY_BASE_CLASSES,f?r.DAY_DISABLED_CLASSES:r.DAY_HOVER_CLASSES,i&&r.DAY_SELECTED_CLASSES,!i&&m&&r.DAY_IN_RANGE_CLASSES,!i&&!m&&D&&r.DAY_TODAY_CLASSES,!i&&!m&&!f&&"bear-text-gray-700 dark:bear-text-zinc-300"),children:n.getDate()},n.getTime())})})]})},re=L=>{const{value:b,onChange:a,label:k,placeholder:A="Select date range",disabled:S=!1,clearable:v=!0,minDate:C,maxDate:p,presets:n,showPresets:_=!0,size:f="md",error:i,helperText:m,className:D,testId:q,...V}=L,[N,R]=s.useState(!1),[M,W]=s.useState({top:0,left:0}),[c,E]=s.useState(b??{start:null,end:null}),[T,j]=s.useState("start"),B=s.useRef(null),y=s.useRef(null),Y=s.useRef(null),z=new Date,[h,$]=s.useState(z.getMonth()),[g,G]=s.useState(z.getFullYear()),F=h===11?0:h+1,Z=h===11?g+1:g;s.useEffect(()=>{b&&E(b)},[b]),s.useEffect(()=>{if(!N||!y.current)return;const t=8,o=420,l=()=>{const d=y.current.getBoundingClientRect(),w=window.innerHeight;let P=w-d.bottom<o&&d.top>o?d.top-o-t:d.bottom+t;P=Math.max(8,Math.min(P,w-o-8));const X=Math.min(640,window.innerWidth-16);let ee=Math.max(8,Math.min(d.left,window.innerWidth-X-8));W({top:P,left:ee})};return l(),window.addEventListener("resize",l),window.addEventListener("scroll",l,!0),()=>{window.removeEventListener("resize",l),window.removeEventListener("scroll",l,!0)}},[N]),s.useEffect(()=>{const t=o=>{var d,w;const l=o.target;(d=B.current)!=null&&d.contains(l)||(w=Y.current)!=null&&w.contains(l)||R(!1)};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[]);const H=s.useCallback(t=>{if(T==="start")E({start:t,end:null}),j("end");else{const o=t>=(c.start??t)?{start:c.start,end:t}:{start:t,end:c.start};E(o),j("start"),a==null||a(o)}},[T,c.start,a]),J=s.useCallback(t=>{E(t),a==null||a(t),R(!1),j("start")},[a]),K=s.useCallback(()=>{const t={start:null,end:null};E(t),a==null||a(t),j("start")},[a]),Q=s.useCallback(t=>{let o=h+t,l=g;o<0&&(o=11,l--),o>11&&(o=0,l++),$(o),G(l)},[h,g]),O=n??(_?r.getDefaultPresets():[]),U=c.start?`${u.formatDate(c.start)}${c.end?` – ${u.formatDate(c.end)}`:""}`:A;return e.jsxs("div",{ref:B,className:x.cn(r.ROOT_CLASSES,D),"data-testid":q,...V,children:[k&&e.jsx("label",{className:r.LABEL_CLASSES,children:k}),e.jsxs("button",{ref:y,type:"button",disabled:S,onClick:()=>!S&&R(!N),className:x.cn(r.TRIGGER_CLASSES,r.SIZE_CLASSES[f],S&&"bear-opacity-50 bear-cursor-not-allowed"),children:[e.jsx("span",{className:x.cn(!c.start&&"bear-text-gray-400 dark:bear-text-zinc-500"),children:U}),e.jsx("svg",{className:"bear-w-4 bear-h-4 bear-ml-2 bear-text-gray-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"})})]}),N&&typeof document<"u"&&te.createPortal(e.jsx("div",{ref:Y,"data-bear-daterangepicker-dropdown":!0,className:x.cn("bear-fixed bear-z-[10000] bear-max-w-[calc(100vw-16px)] bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-p-4 bear-overflow-x-auto"),style:{top:M.top,left:M.left},children:e.jsxs("div",{className:"bear-flex bear-gap-4",children:[O.length>0&&e.jsxs("div",{className:"bear-border-r bear-border-gray-200 dark:bear-border-zinc-700 bear-pr-3 bear-space-y-1 bear-min-w-[120px]",children:[O.map(t=>e.jsx("button",{type:"button",onClick:()=>J(t.range()),className:r.PRESET_BTN_CLASSES,children:t.label},t.label)),v&&c.start&&e.jsx("button",{type:"button",onClick:K,className:x.cn(r.PRESET_BTN_CLASSES,"bear-text-red-500"),children:"Clear"})]}),e.jsx(I,{year:g,month:h,range:c,onDayClick:H,onNav:Q,minDate:C,maxDate:p}),e.jsx(I,{year:Z,month:F,range:c,onDayClick:H,onNav:()=>{},minDate:C,maxDate:p})]})}),document.body),i&&e.jsx("p",{className:r.ERROR_CLASSES,children:i}),!i&&m&&e.jsx("p",{className:r.HELPER_CLASSES,children:m})]})};exports.DateRangePicker=re;