@clicktap/ui 2.4.5 → 2.4.7

package/components/Checkbox/Checkbox.js

@@ -1 +1 @@
-"use client";import{jsx as n,jsxs as c,Fragment as h}from"react/jsx-runtime";import{Checkbox as s}from"react-aria-components";import{cn as l}from"../../utils/cn.js";function x({control:e,isHovered:u,isFocused:a,isDisabled:t,isIndeterminate:r,isInvalid:o,isSelected:b,isPressed:f,classNames:d,...g}){return e?typeof e=="function"?e({isHovered:u,isFocused:a,isDisabled:t,isIndeterminate:r,isInvalid:o,isSelected:b,isPressed:f,...g}):e:n("div",{className:l("flex items-center justify-center","w-6 h-6","border border-solid border-border rounded","transition-all duration-200 ease-in-out","checkbox-control",u&&["border-border-emphasis"],a&&["border-border-emphasis outline-2 outline outline-border-subtle"],(t||t&&r)&&["border-border-subtle bg-surface-subtle"],o&&["bg-surface-subtle text-danger border-danger-soft"],o&&u&&["border-danger"],o&&a&&["border-danger outline-danger-ring"],o&&b&&r&&["bg-danger-soft border-danger-soft"],o&&b&&r&&f&&["bg-danger border-danger"],(b||r)&&["border-border bg-border"],(b||r)&&f&&["border-border-emphasis bg-border-emphasis"],d?.control),children:n("svg",{viewBox:"0 0 18 18","aria-hidden":"true",style:{strokeDasharray:"22px",strokeDashoffset:b||r?44:66},className:l("w-4 h-4 fill-none","stroke-white stroke-[3px]","transition-all duration-200 ease-in-out",t&&r&&["stroke-none fill-border"],r&&["stroke-none fill-white"]),children:r?n("rect",{x:1,y:7.5,width:15,height:3}):n("polyline",{points:"1 9 7 14 15 4"})})})}function w({children:e,slots:u,className:a,classNames:t,...r}){return n(s,{className:l("flex items-center gap-2 cursor-pointer","text-xs text-fg-muted forced-color-adjust-none disabled:text-fg-subtle disabled:cursor-not-allowed group","invalid:text-danger-soft",a),...r,children:o=>c(h,{children:[n(x,{control:u?.control,classNames:t,...o}),typeof e=="function"?e(o):e]})})}export{w as Checkbox,w as default};
+"use client";import{jsx as n,jsxs as c,Fragment as h}from"react/jsx-runtime";import{Checkbox as s}from"react-aria-components";import{cn as l}from"../../utils/cn.js";function x({control:e,isHovered:a,isFocused:u,isDisabled:t,isIndeterminate:r,isInvalid:o,isSelected:b,isPressed:f,classNames:d,...g}){return e?typeof e=="function"?e({isHovered:a,isFocused:u,isDisabled:t,isIndeterminate:r,isInvalid:o,isSelected:b,isPressed:f,...g}):e:n("div",{className:l("flex items-center justify-center","w-6 h-6","border border-solid border-border rounded","transition-all duration-200 ease-in-out","checkbox-control",a&&["border-border-emphasis"],u&&["border-border-emphasis outline-2 outline outline-border-subtle"],(t||t&&r)&&["border-border-subtle bg-surface-subtle"],o&&["bg-surface-subtle text-danger border-danger-soft"],o&&a&&["border-danger"],o&&u&&["border-danger outline-danger-ring"],o&&b&&r&&["bg-danger-soft border-danger-soft"],o&&b&&r&&f&&["bg-danger border-danger"],(b||r)&&["border-border bg-border"],(b||r)&&f&&["border-border-emphasis bg-border-emphasis"],d?.control),children:n("svg",{viewBox:"0 0 18 18","aria-hidden":"true",style:{strokeDasharray:"22px",strokeDashoffset:b||r?44:66},className:l("w-4 h-4 fill-none","stroke-white stroke-[3px]","transition-all duration-200 ease-in-out",t&&r&&["stroke-none fill-border"],r&&["stroke-none fill-white"]),children:r?n("rect",{x:1,y:7.5,width:15,height:3}):n("polyline",{points:"1 9 7 14 15 4"})})})}function w({children:e,slots:a,className:u,classNames:t,...r}){return n(s,{className:l("flex items-center gap-2 cursor-pointer","text-xs text-fg-muted forced-color-adjust-none disabled:text-fg-subtle disabled:cursor-not-allowed group","data-[invalid]:text-danger-soft",u),...r,children:o=>c(h,{children:[n(x,{control:a?.control,classNames:t,...o}),typeof e=="function"?e(o):e]})})}export{w as Checkbox,w as default};

package/components/CreditCardExpirationInput/CreditCardExpirationInput.js

@@ -1 +1 @@
-"use client";import{jsxs as N,jsx as o}from"react/jsx-runtime";import{N as V}from"../../assets/react-number-format.es-Bf_lGveD.js";import{TextField as v,Label as I,Text as C,FieldError as F,Input as $}from"react-aria-components";import{useState as j}from"react";import{cn as t}from"../../utils/cn.js";function w({className:a,...n}){return o($,{className:t("border-solid border border-border rounded-md","text-sm text-fg placeholder-fg-subtle","h-10 px-2 py-0 m-0 w-full","bg-surface","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus:outline-2 focus:outline focus:outline-border-subtle focus:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","invalid:border-danger-soft invalid:bg-danger-surface invalid:text-danger","invalid:hover:border-danger invalid:focus:border-danger invalid:focus:outline-danger-ring",a),...n})}function L({label:a,description:n,errorMessage:i,placeholder:s,value:u,className:d,classNames:l,onChange:f,...m}){const[b,c]=j(""),x=u??b,g=r=>{if(r==="")return"";let e=r.substring(0,2);const h=r.substring(2,4);return e.length===1&&Number(e[0])>1?e=`0${e[0]}`:e.length===2&&(Number(e)===0?e="01":Number(e)>12&&(e="12")),`${e}/${h}`},p=r=>{c(r.formattedValue),f?.(r.formattedValue)};return N(v,{className:t("flex flex-col w-full text-fg",d),...m,children:[o(I,{className:t("flex text-fg-muted text-xs",l?.label),children:a}),o(V,{format:g,customInput:w,className:t(l?.input),placeholder:s,value:x,onValueChange:p}),n&&o(C,{className:t("flex text-fg-muted text-sm",l?.description),slot:"description",children:n}),o(F,{className:t("flex text-danger-soft text-sm",l?.error),children:i})]})}export{L as CreditCardExpirationInput,L as default};
+"use client";import{jsxs as N,jsx as a}from"react/jsx-runtime";import{N as V}from"../../assets/react-number-format.es-Bf_lGveD.js";import{TextField as v,Label as I,Text as C,FieldError as F,Input as $}from"react-aria-components";import{useState as j}from"react";import{cn as t}from"../../utils/cn.js";function w({className:l,...o}){return a($,{className:t("border-solid border border-border rounded-md","text-sm text-fg placeholder-fg-subtle","h-10 px-2 py-0 m-0 w-full","bg-surface","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus:outline-2 focus:outline focus:outline-border-subtle focus:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","data-[invalid]:border-danger-soft data-[invalid]:bg-danger-surface data-[invalid]:text-danger","data-[invalid]:hover:border-danger data-[invalid]:focus:border-danger data-[invalid]:focus:outline-danger-ring",l),...o})}function L({label:l,description:o,errorMessage:d,placeholder:i,value:s,className:u,classNames:n,onChange:f,...m}){const[b,c]=j(""),x=s??b,g=r=>{if(r==="")return"";let e=r.substring(0,2);const h=r.substring(2,4);return e.length===1&&Number(e[0])>1?e=`0${e[0]}`:e.length===2&&(Number(e)===0?e="01":Number(e)>12&&(e="12")),`${e}/${h}`},p=r=>{c(r.formattedValue),f?.(r.formattedValue)};return N(v,{className:t("flex flex-col w-full text-fg",u),...m,children:[a(I,{className:t("flex text-fg-muted text-xs",n?.label),children:l}),a(V,{format:g,customInput:w,className:t(n?.input),placeholder:i,value:x,onValueChange:p}),o&&a(C,{className:t("flex text-fg-muted text-sm",n?.description),slot:"description",children:o}),a(F,{className:t("flex text-danger-soft text-sm",n?.error),children:d})]})}export{L as CreditCardExpirationInput,L as default};

package/components/CreditCardInput/CreditCardInput.js

@@ -1 +1 @@
-"use client";import{jsxs as I,jsx as l}from"react/jsx-runtime";import{useState as N}from"react";import{N as P}from"../../assets/react-number-format.es-Bf_lGveD.js";import{TextField as j,Label as w,Text as L,FieldError as T,Input as k}from"react-aria-components";import{cn as t}from"../../utils/cn.js";const m=a=>{const s=[{regex:/^4[0-9]{0,15}/,format:"#### #### #### ####"},{regex:/^5[1-5][0-9]{0,14}/,format:"#### #### #### ####"},{regex:/^3[47][0-9]{0,13}/,format:"#### ###### #####"},{regex:/^6(?:011|5[0-9]{2})[0-9]{0,12}/,format:"#### #### #### ####"},{regex:/^3(?:0[0-5]|[68][0-9])[0-9]{0,11}/,format:"#### ###### ####"},{regex:/^(?:2131|1800|35\d{3})\d{0,11}/,format:"#### #### #### ####"}].find(f=>f.regex.test(a));return s?s.format:"#### #### #### #### ###"};function y({className:a,...o}){return l(k,{className:t("border-solid border border-border rounded-md","text-sm text-fg placeholder-fg-subtle","h-10 px-2 py-0 m-0 w-full","bg-surface","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus:outline-2 focus:outline focus:outline-border-subtle focus:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","invalid:border-danger-soft invalid:bg-danger-surface invalid:text-danger","invalid:hover:border-danger invalid:focus:border-danger invalid:focus:outline-danger-ring",a),...o})}function z({label:a,description:o,errorMessage:s,placeholder:f,value:g,onChange:x,className:b,classNames:d,...p}){const[h,v]=N(""),V=g??h,F=i=>{if(i==="")return"";const e=i.replace(/\s+/g,""),u=m(e);let n="",r=0;for(let c=0;c<u.length;c+=1)if(u[c]==="#")if(r<e.length)n+=e[r],r+=1;else break;else n+=u[c];return n},C=i=>{const e=i.value.replace(/\s+/g,""),n=m(e).replace(/[^#]/g,"").length,r=e.slice(0,n);v(r),x?.(r)};return I(j,{className:t("flex flex-col w-full text-fg",b),...p,children:[l(w,{className:t("flex text-fg-muted text-sm",d?.label),children:a}),l(P,{value:V,format:F,customInput:y,className:t(d?.input),placeholder:f,onValueChange:C}),o&&l(L,{className:t("flex text-fg-muted text-sm",d?.description),slot:"description",children:o}),l(T,{className:t("flex text-danger-soft text-sm",d?.error),children:s})]})}export{z as CreditCardInput,z as default};
+"use client";import{jsxs as I,jsx as l}from"react/jsx-runtime";import{useState as N}from"react";import{N as P}from"../../assets/react-number-format.es-Bf_lGveD.js";import{TextField as j,Label as w,Text as L,FieldError as T,Input as k}from"react-aria-components";import{cn as r}from"../../utils/cn.js";const m=a=>{const d=[{regex:/^4[0-9]{0,15}/,format:"#### #### #### ####"},{regex:/^5[1-5][0-9]{0,14}/,format:"#### #### #### ####"},{regex:/^3[47][0-9]{0,13}/,format:"#### ###### #####"},{regex:/^6(?:011|5[0-9]{2})[0-9]{0,12}/,format:"#### #### #### ####"},{regex:/^3(?:0[0-5]|[68][0-9])[0-9]{0,11}/,format:"#### ###### ####"},{regex:/^(?:2131|1800|35\d{3})\d{0,11}/,format:"#### #### #### ####"}].find(f=>f.regex.test(a));return d?d.format:"#### #### #### #### ###"};function y({className:a,...o}){return l(k,{className:r("border-solid border border-border rounded-md","text-sm text-fg placeholder-fg-subtle","h-10 px-2 py-0 m-0 w-full","bg-surface","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus:outline-2 focus:outline focus:outline-border-subtle focus:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","data-[invalid]:border-danger-soft data-[invalid]:bg-danger-surface data-[invalid]:text-danger","data-[invalid]:hover:border-danger data-[invalid]:focus:border-danger data-[invalid]:focus:outline-danger-ring",a),...o})}function z({label:a,description:o,errorMessage:d,placeholder:f,value:g,onChange:x,className:b,classNames:s,...p}){const[h,v]=N(""),V=g??h,F=i=>{if(i==="")return"";const e=i.replace(/\s+/g,""),u=m(e);let n="",t=0;for(let c=0;c<u.length;c+=1)if(u[c]==="#")if(t<e.length)n+=e[t],t+=1;else break;else n+=u[c];return n},C=i=>{const e=i.value.replace(/\s+/g,""),n=m(e).replace(/[^#]/g,"").length,t=e.slice(0,n);v(t),x?.(t)};return I(j,{className:r("flex flex-col w-full text-fg",b),...p,children:[l(w,{className:r("flex text-fg-muted text-sm",s?.label),children:a}),l(P,{value:V,format:F,customInput:y,className:r(s?.input),placeholder:f,onValueChange:C}),o&&l(L,{className:r("flex text-fg-muted text-sm",s?.description),slot:"description",children:o}),l(T,{className:r("flex text-danger-soft text-sm",s?.error),children:d})]})}export{z as CreditCardInput,z as default};

package/components/DateInput/DateInput.js

@@ -1 +1 @@
-"use client";import{jsxs as s,jsx as r}from"react/jsx-runtime";import{DateField as u,Label as f,DateInput as c,DateSegment as b,Text as g,FieldError as x}from"react-aria-components";import{cn as e}from"../../utils/cn.js";function v({label:a,description:i,errorMessage:o,className:d,classNames:t,...n}){return s(u,{className:e("text-fg",d),...n,children:[r(f,{className:e("flex text-fg-muted text-xs",t?.label),children:a}),r(c,{className:e("flex items-center","border-solid border border-border rounded-md","text-sm text-fg","h-10 px-1 py-0 m-0 w-full","bg-surface","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus-within:outline-2 focus-within:outline focus-within:outline-border-subtle focus-within:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","invalid:border-danger-soft invalid:bg-danger-surface invalid:text-danger","invalid:hover:border-danger invalid:focus-within:border-danger invalid:focus-within:outline-danger-ring",t?.input),children:l=>r(b,{segment:l,className:e("p-1 tabular-nums text-end text-fg","invalid:text-danger-soft","disabled:cursor-default disabled:select-none disabled:text-fg-subtle","focus:text-fg focus:bg-border-subtle focus:outline-0 focus:rounded-md focus:caret-transparent focus:invalid:bg-danger-soft focus:invalid:text-fg-inverse","type-literal:p-0","data-[placeholder]:text-fg-subtle data-[placeholder]:invalid:text-danger-soft data-[placeholder]:invalid:focus:text-fg-inverse","aria-[readonly]:focus-visible:outline aria-[readonly]:focus-visible:outline-fg-muted aria-[readonly]:focus-visible:outline-1","aria-[readonly]:focus:outline aria-[readonly]:focus:outline-fg-muted aria-[readonly]:focus:bg-transparent aria-[readonly]:focus:outline-2",t?.segment)})}),i&&r(g,{className:e("flex text-fg-muted text-sm",t?.description),slot:"description",children:i}),r(x,{className:e("flex text-danger-soft text-sm",t?.error),children:o})]})}export{v as DateInput,v as default};
+"use client";import{jsxs as s,jsx as a}from"react/jsx-runtime";import{DateField as u,Label as f,DateInput as c,DateSegment as b,Text as g,FieldError as x}from"react-aria-components";import{cn as e}from"../../utils/cn.js";function v({label:d,description:r,errorMessage:i,className:o,classNames:t,...n}){return s(u,{className:e("text-fg",o),...n,children:[a(f,{className:e("flex text-fg-muted text-xs",t?.label),children:d}),a(c,{className:e("flex items-center","border-solid border border-border rounded-md","text-sm text-fg","h-10 px-1 py-0 m-0 w-full","bg-surface","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus-within:outline-2 focus-within:outline focus-within:outline-border-subtle focus-within:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","data-[invalid]:border-danger-soft data-[invalid]:bg-danger-surface data-[invalid]:text-danger","data-[invalid]:hover:border-danger data-[invalid]:focus-within:border-danger data-[invalid]:focus-within:outline-danger-ring",t?.input),children:l=>a(b,{segment:l,className:e("p-1 tabular-nums text-end text-fg","data-[invalid]:text-danger-soft","disabled:cursor-default disabled:select-none disabled:text-fg-subtle","focus:text-fg focus:bg-border-subtle focus:outline-0 focus:rounded-md focus:caret-transparent focus:data-[invalid]:bg-danger-soft focus:data-[invalid]:text-fg-inverse","type-literal:p-0","data-[placeholder]:text-fg-subtle data-[placeholder]:data-[invalid]:text-danger-soft data-[placeholder]:data-[invalid]:focus:text-fg-inverse","aria-[readonly]:focus-visible:outline aria-[readonly]:focus-visible:outline-fg-muted aria-[readonly]:focus-visible:outline-1","aria-[readonly]:focus:outline aria-[readonly]:focus:outline-fg-muted aria-[readonly]:focus:bg-transparent aria-[readonly]:focus:outline-2",t?.segment)})}),r&&a(g,{className:e("flex text-fg-muted text-sm",t?.description),slot:"description",children:r}),a(x,{className:e("flex text-danger-soft text-sm",t?.error),children:i})]})}export{v as DateInput,v as default};

package/components/DobInput/DobInput.js

@@ -1 +1 @@
-"use client";import{jsxs as j,jsx as o}from"react/jsx-runtime";import{useId as w,useState as C}from"react";import{TextField as k,Label as y,FieldError as A,Input as B}from"react-aria-components";import{N as D}from"../../assets/react-number-format.es-Bf_lGveD.js";import{cn as r}from"../../utils/cn.js";function E({className:l,...s}){return o(B,{className:r("peer h-11",l),...s})}function z({label:l,description:s,errorMessage:u,type:m,className:p,classNames:n,id:f,value:g,onChange:h,...x}){const c=w(),[V,v]=C(""),I=g??V,F=e=>{if(e==="")return"";const b=e.replace(/\s+/g,""),a="##-##-####";let i="",d=0;for(let t=0;t<a.length;t+=1)if(a[t]==="#")if(d<b.length)i+=b[d],d+=1;else break;else i+=a[t];return i},N=e=>{v(e.formattedValue),h?.(e.formattedValue)};return j(k,{className:r("flex flex-col w-full text-fg",p),type:m,...x,children:[o(y,{className:r("flex text-fg-muted text-xs",n?.label),htmlFor:f||c,children:l}),o(D,{id:f||c,value:I,format:F,customInput:E,className:r("border-solid border border-border rounded-md","text-sm text-fg placeholder-fg-subtle","h-10 px-2 py-0 m-0 w-full","bg-surface","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus:outline-2 focus:outline focus:outline-border-subtle focus:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","invalid:border-danger-soft invalid:bg-danger-surface invalid:text-danger","invalid:hover:border-danger invalid:focus:border-danger invalid:focus:outline-danger-ring",n?.input),onValueChange:N}),u&&o(A,{className:r(n?.error),children:u})]})}export{z as DobInput,z as default};
+"use client";import{jsxs as j,jsx as a}from"react/jsx-runtime";import{useId as w,useState as C}from"react";import{TextField as k,Label as y,FieldError as A,Input as B}from"react-aria-components";import{N as D}from"../../assets/react-number-format.es-Bf_lGveD.js";import{cn as r}from"../../utils/cn.js";function E({className:o,...s}){return a(B,{className:r("peer h-11",o),...s})}function z({label:o,description:s,errorMessage:u,type:m,className:p,classNames:l,id:f,value:g,onChange:h,...x}){const c=w(),[V,v]=C(""),I=g??V,F=e=>{if(e==="")return"";const b=e.replace(/\s+/g,""),n="##-##-####";let d="",i=0;for(let t=0;t<n.length;t+=1)if(n[t]==="#")if(i<b.length)d+=b[i],i+=1;else break;else d+=n[t];return d},N=e=>{v(e.formattedValue),h?.(e.formattedValue)};return j(k,{className:r("flex flex-col w-full text-fg",p),type:m,...x,children:[a(y,{className:r("flex text-fg-muted text-xs",l?.label),htmlFor:f||c,children:o}),a(D,{id:f||c,value:I,format:F,customInput:E,className:r("border-solid border border-border rounded-md","text-sm text-fg placeholder-fg-subtle","h-10 px-2 py-0 m-0 w-full","bg-surface","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus:outline-2 focus:outline focus:outline-border-subtle focus:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","data-[invalid]:border-danger-soft data-[invalid]:bg-danger-surface data-[invalid]:text-danger","data-[invalid]:hover:border-danger data-[invalid]:focus:border-danger data-[invalid]:focus:outline-danger-ring",l?.input),onValueChange:N}),u&&a(A,{className:r(l?.error),children:u})]})}export{z as DobInput,z as default};

package/components/Input/Input.js

@@ -1 +1 @@
-"use client";import{jsxs as s,jsx as e}from"react/jsx-runtime";import{Label as f,TextField as v,Input as k,Text as L,FieldError as C}from"react-aria-components";import{forwardRef as I,useState as N}from"react";import{cn as r}from"../../utils/cn.js";import{Skeleton as M}from"../Skeleton/Skeleton.js";import S from"../../hooks/useIsClient.js";function j({className:t}){return s("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:t,children:[e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.64 0 8.577 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.64 0-8.577-3.007-9.963-7.178Z"}),e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"})]})}function y({className:t}){return e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:t,children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"})})}function E({className:t}){return e(M,{className:r("w-full h-10 rounded-md z-20 relative",t)})}const W=I(({inputProps:t,label:l,description:a,errorMessage:m,placeholder:p,className:u,classNames:o,disableSkeleton:x,type:c,...h},b)=>{const g=S(),d=c==="password",[n,w]=N(!1);return!g&&!x?s("div",{className:r("flex flex-col w-full text-fg",u),children:[l?e(f,{className:r("flex text-fg-muted text-xs",o?.label),children:l}):null,e(E,{className:o?.skeleton})]}):s(v,{className:r("flex flex-col w-full text-fg",u),type:d?n?"text":"password":c,...h,children:[e(f,{className:r("flex text-fg-muted text-xs",o?.label),children:l}),s("div",{className:"relative",children:[e(k,{ref:b,placeholder:p,className:r("border-solid border border-border rounded-md","text-sm text-fg placeholder-fg-subtle","h-10 px-2 py-0 m-0 w-full","bg-surface","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus:outline-2 focus:outline focus:outline-border-subtle focus:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","invalid:border-danger-soft invalid:bg-danger-surface invalid:text-danger","invalid:hover:border-danger invalid:focus:border-danger invalid:focus:outline-danger-ring",d&&"pr-10",o?.input),...t}),d&&e("button",{type:"button",className:"absolute right-2 top-1/2 -translate-y-1/2 p-1 text-fg-subtle hover:text-fg-muted bg-transparent border-none cursor-pointer select-none",onMouseDown:i=>i.preventDefault(),onClick:()=>w(i=>!i),"aria-label":n?"Hide password":"Show password","aria-pressed":n,children:n?e(y,{className:"w-5 h-5"}):e(j,{className:"w-5 h-5"})})]}),a&&e(L,{className:r("flex text-fg-muted text-sm",o?.description),slot:"description",children:a}),e(C,{className:r("flex text-danger-soft text-sm",o?.error),children:m})]})});export{W as Input,W as default};
+"use client";import{jsxs as s,jsx as e}from"react/jsx-runtime";import{Label as f,TextField as v,Input as k,Text as L,FieldError as C}from"react-aria-components";import{forwardRef as I,useState as N}from"react";import{cn as r}from"../../utils/cn.js";import{Skeleton as M}from"../Skeleton/Skeleton.js";import S from"../../hooks/useIsClient.js";function j({className:t}){return s("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:t,children:[e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.64 0 8.577 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.64 0-8.577-3.007-9.963-7.178Z"}),e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"})]})}function y({className:t}){return e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:t,children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"})})}function E({className:t}){return e(M,{className:r("w-full h-10 rounded-md z-20 relative",t)})}const W=I(({inputProps:t,label:a,description:i,errorMessage:m,placeholder:p,className:u,classNames:o,disableSkeleton:x,type:c,...h},b)=>{const g=S(),l=c==="password",[n,w]=N(!1);return!g&&!x?s("div",{className:r("flex flex-col w-full text-fg",u),children:[a?e(f,{className:r("flex text-fg-muted text-xs",o?.label),children:a}):null,e(E,{className:o?.skeleton})]}):s(v,{className:r("flex flex-col w-full text-fg",u),type:l?n?"text":"password":c,...h,children:[e(f,{className:r("flex text-fg-muted text-xs",o?.label),children:a}),s("div",{className:"relative",children:[e(k,{ref:b,placeholder:p,className:r("border-solid border border-border rounded-md","text-sm text-fg placeholder-fg-subtle","h-10 px-2 py-0 m-0 w-full","bg-surface","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus:outline-2 focus:outline focus:outline-border-subtle focus:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","data-[invalid]:border-danger-soft data-[invalid]:bg-danger-surface data-[invalid]:text-danger","data-[invalid]:hover:border-danger data-[invalid]:focus:border-danger data-[invalid]:focus:outline-danger-ring",l&&"pr-10",o?.input),...t}),l&&e("button",{type:"button",className:"absolute right-2 top-1/2 -translate-y-1/2 p-1 text-fg-subtle hover:text-fg-muted bg-transparent border-none cursor-pointer select-none",onMouseDown:d=>d.preventDefault(),onClick:()=>w(d=>!d),"aria-label":n?"Hide password":"Show password","aria-pressed":n,children:n?e(y,{className:"w-5 h-5"}):e(j,{className:"w-5 h-5"})})]}),i&&e(L,{className:r("flex text-fg-muted text-sm",o?.description),slot:"description",children:i}),e(C,{className:r("flex text-danger-soft text-sm",o?.error),children:m})]})});export{W as Input,W as default};

package/components/NumberInput/NumberInput.js

@@ -1 +1 @@
-"use client";import{jsxs as u,jsx as e}from"react/jsx-runtime";import{NumberField as p,Label as h,Group as m,Button as a,Input as x,Text as v,FieldError as w}from"react-aria-components";import{cn as r}from"../../utils/cn.js";const k=e("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M5 12H19",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),y=e("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 5V19M5 12H19",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})});function L({label:b,description:n,errorMessage:c,isInvalid:d,isReadOnly:i,slots:s,className:g,classNames:o,...f}){const t=["group-hover:border-border-emphasis","group-disabled:border-border-subtle","group-invalid:border-danger-soft group-invalid:bg-danger-surface group-invalid:text-danger","group-invalid:group-hover:border-danger","group-invalid:group-focus:border-danger"],l=["flex items-center justify-center shrink-0","rounded-md border-solid border","font-semibold text-sm","w-10 h-10 py-0 px-0 cursor-pointer disabled:cursor-default","transition-all duration-200 ease-in-out","focus:outline-2 focus:outline focus:outline-border-subtle pressed:scale-95","bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent","border-border hover:border-border-emphasis focus:border-border-emphasis disabled:border-border-subtle","text-fg disabled:text-fg-muted","group-aria-readonly:bg-surface-subtle group-aria-readonly:text-fg-muted group-aria-readonly:border-border-subtle group-aria-readonly:cursor-default"];return u(p,{isInvalid:d,isReadOnly:i,className:r("flex flex-col w-full",g),...f,children:[e(h,{className:r("flex text-fg-muted text-sm",o?.label),children:b}),u(m,{isInvalid:d,"aria-readonly":i,className:r("flex rounded-md group","focus-within:outline-2 focus-within:outline focus-within:outline-border-subtle","focus-within:invalid:outline-2 focus-within:invalid:outline focus-within:invalid:outline-border-subtle","disabled:bg-surface-subtle",o?.group),children:[e(a,{slot:"decrement",className:r(l,t,"border-r-0 rounded-r-none",o?.decrementBtn),children:s?.decrementIcon||k}),e(x,{className:r("border-solid border border-border text-center","text-sm text-fg placeholder-fg-subtle","h-10 px-2 py-0 m-0 w-full","bg-surface","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus:outline-0 focus:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","invalid:border-danger-soft invalid:bg-danger-surface invalid:text-danger","invalid:hover:border-danger invalid:focus:border-danger",t,o?.input)}),e(a,{slot:"increment",className:r(l,t,"border-l-0 rounded-l-none",o?.incrementBtn),children:s?.incrementIcon||y})]}),n&&e(v,{className:r("flex text-fg-muted text-sm",o?.description),slot:"description",children:n}),e(w,{className:r("flex text-danger-soft text-sm",o?.error),children:c})]})}export{L as NumberInput,L as default};
+"use client";import{jsxs as l,jsx as e}from"react/jsx-runtime";import{NumberField as p,Label as h,Group as m,Button as u,Input as x,Text as v,FieldError as w}from"react-aria-components";import{cn as r}from"../../utils/cn.js";const k=e("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M5 12H19",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),y=e("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 5V19M5 12H19",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})});function L({label:b,description:d,errorMessage:c,isInvalid:n,isReadOnly:a,slots:i,className:g,classNames:o,...f}){const t=["group-hover:border-border-emphasis","group-disabled:border-border-subtle","group-data-[invalid]:border-danger-soft group-data-[invalid]:bg-danger-surface group-data-[invalid]:text-danger","group-data-[invalid]:group-hover:border-danger","group-data-[invalid]:group-focus:border-danger"],s=["flex items-center justify-center shrink-0","rounded-md border-solid border","font-semibold text-sm","w-10 h-10 py-0 px-0 cursor-pointer disabled:cursor-default","transition-all duration-200 ease-in-out","focus:outline-2 focus:outline focus:outline-border-subtle pressed:scale-95","bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent","border-border hover:border-border-emphasis focus:border-border-emphasis disabled:border-border-subtle","text-fg disabled:text-fg-muted","group-aria-readonly:bg-surface-subtle group-aria-readonly:text-fg-muted group-aria-readonly:border-border-subtle group-aria-readonly:cursor-default"];return l(p,{isInvalid:n,isReadOnly:a,className:r("flex flex-col w-full",g),...f,children:[e(h,{className:r("flex text-fg-muted text-sm",o?.label),children:b}),l(m,{isInvalid:n,"aria-readonly":a,className:r("flex rounded-md group","focus-within:outline-2 focus-within:outline focus-within:outline-border-subtle","focus-within:data-[invalid]:outline-2 focus-within:data-[invalid]:outline focus-within:data-[invalid]:outline-border-subtle","disabled:bg-surface-subtle",o?.group),children:[e(u,{slot:"decrement",className:r(s,t,"border-r-0 rounded-r-none",o?.decrementBtn),children:i?.decrementIcon||k}),e(x,{className:r("border-solid border border-border text-center","text-sm text-fg placeholder-fg-subtle","h-10 px-2 py-0 m-0 w-full","bg-surface","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus:outline-0 focus:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","data-[invalid]:border-danger-soft data-[invalid]:bg-danger-surface data-[invalid]:text-danger","data-[invalid]:hover:border-danger data-[invalid]:focus:border-danger",t,o?.input)}),e(u,{slot:"increment",className:r(s,t,"border-l-0 rounded-l-none",o?.incrementBtn),children:i?.incrementIcon||y})]}),d&&e(v,{className:r("flex text-fg-muted text-sm",o?.description),slot:"description",children:d}),e(w,{className:r("flex text-danger-soft text-sm",o?.error),children:c})]})}export{L as NumberInput,L as default};

package/components/Radio/Radio.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as g,Fragment as v}from"react/jsx-runtime";import{Radio as p}from"react-aria-components";import{cn as s}from"../../utils/cn.js";function m({control:e,classNames:i,isHovered:d,isFocused:r,isFocusVisible:n,isDisabled:a,isInvalid:u,isSelected:o,isPressed:l,isReadOnly:b,isRequired:f,defaultChildren:h,...x}){const c={isHovered:d,isFocused:r,isFocusVisible:n,isDisabled:a,isInvalid:u,isSelected:o,isPressed:l,isReadOnly:b,isRequired:f};return e?typeof e=="function"?e(c):e:t("div",{"data-hovered":d,"data-focused":r,"data-disabled":a,"data-invalid":u,"data-selected":o,"data-pressed":l,className:s("flex items-center justify-center w-6 h-6  border-solid border border-border ransition-all duration-300 ease rounded-full",'data-[hovered="true"]:border-border-emphasis','data-[focused="true"]:border-border-emphasis data-[focused="true"]:outline-2 data-[focused="true"]:outline data-[focused="true"]:outline-border-subtle','data-[disabled="true"]:border-border-subtle data-[disabled="true"]:bg-surface-subtle','data-[invalid="true"]:bg-danger-surface data-[invalid="true"]:text-danger data-[invalid="true"]:border-danger-soft','data-[invalid="true"]:data-[disabled="true"]:border-danger-ring data-[invalid="true"]:data-[disabled="true"]:bg-danger-surface','data-[invalid="true"]:data-[hovered="true"]:border-danger','data-[invalid="true"]:data-[focused="true"]:border-danger data-[invalid="true"]:data-[focused="true"]:outline-danger-ring','data-[invalid="true"]:data-[selected="true"]:bg-danger-surface data-[invalid="true"]:data-[selected="true"]:border-danger-soft','data-[invalid="true"]:data-[pressed="true"]:bg-danger data-[invalid="true"]:data-[pressed="true"]:border-danger',i?.control),children:t("div",{"data-invalid":u,className:s('w-3 h-3 rounded-full bg-surface-inverse opacity-0 transition-all duration-300 ease data-[invalid="true"]:bg-danger-soft',{"opacity-100":o})})})}function N({children:e,slots:i,className:d,classNames:r,...n}){return t(p,{className:s("flex items-center gap-2 group","invalid:text-danger-soft invalid:disabled:text-red-300","disabled:text-fg-subtle",d),...n,children:a=>g(v,{children:[t(m,{control:i?.control,classNames:r,...a}),typeof e=="function"?e(a):e]})})}export{N as Radio,N as default};
+"use client";import{jsx as r,jsxs as g,Fragment as v}from"react/jsx-runtime";import{Radio as p}from"react-aria-components";import{cn as s}from"../../utils/cn.js";function m({control:a,classNames:i,isHovered:d,isFocused:t,isFocusVisible:n,isDisabled:e,isInvalid:u,isSelected:o,isPressed:l,isReadOnly:b,isRequired:f,defaultChildren:h,...x}){const c={isHovered:d,isFocused:t,isFocusVisible:n,isDisabled:e,isInvalid:u,isSelected:o,isPressed:l,isReadOnly:b,isRequired:f};return a?typeof a=="function"?a(c):a:r("div",{"data-hovered":d,"data-focused":t,"data-disabled":e,"data-invalid":u,"data-selected":o,"data-pressed":l,className:s("flex items-center justify-center w-6 h-6  border-solid border border-border ransition-all duration-300 ease rounded-full",'data-[hovered="true"]:border-border-emphasis','data-[focused="true"]:border-border-emphasis data-[focused="true"]:outline-2 data-[focused="true"]:outline data-[focused="true"]:outline-border-subtle','data-[disabled="true"]:border-border-subtle data-[disabled="true"]:bg-surface-subtle','data-[invalid="true"]:bg-danger-surface data-[invalid="true"]:text-danger data-[invalid="true"]:border-danger-soft','data-[invalid="true"]:data-[disabled="true"]:border-danger-ring data-[invalid="true"]:data-[disabled="true"]:bg-danger-surface','data-[invalid="true"]:data-[hovered="true"]:border-danger','data-[invalid="true"]:data-[focused="true"]:border-danger data-[invalid="true"]:data-[focused="true"]:outline-danger-ring','data-[invalid="true"]:data-[selected="true"]:bg-danger-surface data-[invalid="true"]:data-[selected="true"]:border-danger-soft','data-[invalid="true"]:data-[pressed="true"]:bg-danger data-[invalid="true"]:data-[pressed="true"]:border-danger',i?.control),children:r("div",{"data-invalid":u,className:s('w-3 h-3 rounded-full bg-surface-inverse opacity-0 transition-all duration-300 ease data-[invalid="true"]:bg-danger-soft',{"opacity-100":o})})})}function N({children:a,slots:i,className:d,classNames:t,...n}){return r(p,{className:s("flex items-center gap-2 group","data-[invalid]:text-danger-soft data-[invalid]:disabled:text-red-300","disabled:text-fg-subtle",d),...n,children:e=>g(v,{children:[r(m,{control:i?.control,classNames:t,...e}),typeof a=="function"?a(e):a]})})}export{N as Radio,N as default};

package/components/Select/ButtonSelect.js

@@ -1 +1 @@
-"use client";import{jsxs as c,jsx as r}from"react/jsx-runtime";import{useRef as l}from"react";import{useSelect as z,useButton as A,HiddenSelect as E}from"react-aria";import{useInteractOutside as G}from"@react-aria/interactions";import{useSelectState as J}from"react-stately";import{cn as e}from"../../utils/cn.js";import{ChevronIcon as Q,SelectPopover as T,SelectListBox as U}from"./parts.js";import"react-aria-components";function se(d){const{label:a,description:u,errorMessage:f,children:g,placeholder:x,slots:h,popoverOffset:v,className:N,classNames:t,isLoading:I,name:b,selectedKey:P,defaultSelectedKey:S,onSelectionChange:y,isRequired:B,items:w,autoFocus:R,isInvalid:C,"aria-label":O,"aria-labelledby":L}=d,n=!!(d.isDisabled||I),m={label:a,children:g,items:w,name:b,selectedKey:P,defaultSelectedKey:S,onSelectionChange:y,isDisabled:n,isRequired:B,autoFocus:R,isInvalid:C,"aria-label":O,"aria-labelledby":L},s=J(m),p=l(null),o=l(null),j=l(null),H=l(null),{labelProps:M,triggerProps:D,valueProps:K,menuProps:_,descriptionProps:k,errorMessageProps:q,isInvalid:i}=z(m,s,o),{buttonProps:F}=A(D,o);return G({ref:p,onInteractOutside:()=>s.close()}),c("div",{ref:p,className:e("flex flex-col","w-full",N),children:[r("label",{...M,className:e("flex","text-xs text-fg-muted",t?.label),children:a}),r(E,{state:s,triggerRef:o,label:a,name:b,isDisabled:n}),c("div",{className:e("flex","relative","w-full",t?.comboBoxContainer),children:[c("button",{...F,ref:o,className:e("flex items-center justify-between gap-2","border border-solid border-border","text-sm text-fg text-left","py-0 px-3","h-10 w-full","m-0","rounded-md","bg-surface","cursor-pointer","transition-all ease-in-out duration-200","hover:border-border-emphasis","focus:outline focus:outline-2 focus:outline-border-subtle focus:border-border-emphasis","disabled:bg-surface-subtle disabled:border-border disabled:cursor-default",i&&"border-danger-soft bg-danger-surface text-danger hover:border-danger focus:border-danger focus:outline-danger-ring",t?.input),children:[r("span",{...K,className:e("truncate",!s.selectedItem&&"text-fg-subtle",t?.value),children:s.selectedItem?s.selectedItem.rendered:x??"Select..."}),r("span",{className:e("shrink-0 [&_svg]:w-4 [&_svg]:h-4",t?.arrowButton),children:r(Q,{isOpen:s.isOpen,isDisabled:n,isInvalid:i,buttonIcon:h?.buttonIcon})})]}),s.isOpen&&r(T,{popoverRef:H,offset:v,className:e(t?.listContainer),children:r(U,{state:s,listBoxProps:_,listBoxRef:j,optionClassName:e(t?.option),sectionHeadingClassName:e(t?.sectionHeading),className:e("max-h-80","overflow-y-auto","outline-none",t?.list)})})]}),u&&r("span",{...k,className:e("flex","text-xs","text-fg-muted",t?.description),children:u}),i&&typeof f=="string"&&r("span",{...q,className:e("flex","text-xs","text-danger-soft",t?.errorMessage),children:f})]})}export{se as ButtonSelect,se as default};
+"use client";import{jsxs as d,jsx as r}from"react/jsx-runtime";import{useRef as l}from"react";import{useSelect as E,useButton as G,HiddenSelect as J}from"react-aria";import{useInteractOutside as Q}from"@react-aria/interactions";import{useSelectState as T}from"react-stately";import{cn as e}from"../../utils/cn.js";import{ChevronIcon as U,SelectPopover as V,SelectListBox as W}from"./parts.js";import"react-aria-components";function oe(c){const{label:a,description:u,errorMessage:f,children:g,placeholder:x,slots:h,popoverOffset:v,className:N,classNames:s,isLoading:y,name:b,selectedKey:I,defaultSelectedKey:P,onSelectionChange:S,isRequired:B,items:w,autoFocus:R,isInvalid:C,id:O,"aria-label":L,"aria-labelledby":j,"aria-describedby":D}=c,n=!!(c.isDisabled||y),m={label:a,children:g,items:w,name:b,selectedKey:I,defaultSelectedKey:P,onSelectionChange:S,isDisabled:n,isRequired:B,autoFocus:R,isInvalid:C,id:O,"aria-label":L,"aria-labelledby":j,"aria-describedby":D},t=T(m),p=l(null),o=l(null),H=l(null),M=l(null),{labelProps:K,triggerProps:_,valueProps:k,menuProps:q,descriptionProps:F,errorMessageProps:z,isInvalid:i}=E(m,t,o),{buttonProps:A}=G(_,o);return Q({ref:p,onInteractOutside:()=>t.close()}),d("div",{ref:p,className:e("flex flex-col","w-full",N),children:[r("label",{...K,className:e("flex","text-xs text-fg-muted",s?.label),children:a}),r(J,{state:t,triggerRef:o,label:a,name:b,isDisabled:n}),d("div",{className:e("flex","relative","w-full",s?.comboBoxContainer),children:[d("button",{...A,ref:o,className:e("flex items-center justify-between gap-2","border border-solid border-border","text-sm text-fg text-left","py-0 px-3","h-10 w-full","m-0","rounded-md","bg-surface","cursor-pointer","transition-all ease-in-out duration-200","hover:border-border-emphasis","focus:outline focus:outline-2 focus:outline-border-subtle focus:border-border-emphasis","disabled:bg-surface-subtle disabled:border-border disabled:cursor-default",i&&"border-danger-soft bg-danger-surface text-danger hover:border-danger focus:border-danger focus:outline-danger-ring",s?.input),children:[r("span",{...k,className:e("truncate",!t.selectedItem&&"text-fg-subtle",s?.value),children:t.selectedItem?t.selectedItem.rendered:x??"Select..."}),r("span",{className:e("shrink-0 [&_svg]:w-4 [&_svg]:h-4",s?.arrowButton),children:r(U,{isOpen:t.isOpen,isDisabled:n,isInvalid:i,buttonIcon:h?.buttonIcon})})]}),t.isOpen&&r(V,{popoverRef:M,offset:v,className:e(s?.listContainer),children:r(W,{state:t,listBoxProps:q,listBoxRef:H,optionClassName:e(s?.option),sectionHeadingClassName:e(s?.sectionHeading),className:e("max-h-80","overflow-y-auto","outline-none",s?.list)})})]}),u&&r("span",{...F,className:e("flex","text-xs","text-fg-muted",s?.description),children:u}),i&&typeof f=="string"&&r("span",{...z,className:e("flex","text-xs","text-danger-soft",s?.errorMessage),children:f})]})}export{oe as ButtonSelect,oe as default};

package/components/TimeInput/TimeInput.js

@@ -1 +1 @@
-"use client";import{jsxs as s,jsx as r}from"react/jsx-runtime";import{TimeField as u,Label as f,DateInput as c,DateSegment as b,Text as g,FieldError as x}from"react-aria-components";import{cn as e}from"../../utils/cn.js";function v({label:a,description:i,errorMessage:o,className:d,classNames:t,...n}){return s(u,{className:e("text-fg",d),...n,children:[r(f,{className:e("flex text-fg-muted text-sm",t?.label),children:a}),r(c,{className:e("flex items-center","border-solid border border-border rounded-md","text-sm text-fg","h-10 px-1 py-0 m-0 w-full","bg-surface","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus-within:outline-2 focus-within:outline focus-within:outline-border-subtle focus-within:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","invalid:border-danger-soft invalid:bg-danger-surface invalid:text-danger","invalid:hover:border-danger invalid:focus-within:border-danger invalid:focus-within:outline-danger-ring",t?.input),children:l=>r(b,{segment:l,className:e("p-1 tabular-nums text-end text-fg","invalid:text-danger-soft","disabled:cursor-default disabled:select-none disabled:text-fg-subtle","focus:text-fg focus:bg-border-subtle focus:outline-0 focus:rounded-md focus:caret-transparent focus:invalid:bg-danger-soft focus:invalid:text-fg-inverse","type-literal:p-0.5","data-[placeholder]:text-fg-subtle data-[placeholder]:invalid:text-danger-soft data-[placeholder]:invalid:focus:text-fg-inverse","aria-[readonly]:focus-visible:outline aria-[readonly]:focus-visible:outline-fg-muted aria-[readonly]:focus-visible:outline-1","aria-[readonly]:focus:outline aria-[readonly]:focus:outline-fg-muted aria-[readonly]:focus:bg-transparent aria-[readonly]:focus:outline-2",t?.segment)})}),i&&r(g,{className:e("flex text-fg-muted text-sm",t?.description),slot:"description",children:i}),r(x,{className:e("flex text-danger-soft text-sm",t?.error),children:o})]})}export{v as TimeInput,v as default};
+"use client";import{jsxs as s,jsx as a}from"react/jsx-runtime";import{TimeField as u,Label as f,DateInput as c,DateSegment as b,Text as g,FieldError as x}from"react-aria-components";import{cn as e}from"../../utils/cn.js";function v({label:d,description:r,errorMessage:i,className:o,classNames:t,...n}){return s(u,{className:e("text-fg",o),...n,children:[a(f,{className:e("flex text-fg-muted text-sm",t?.label),children:d}),a(c,{className:e("flex items-center","border-solid border border-border rounded-md","text-sm text-fg","h-10 px-1 py-0 m-0 w-full","bg-surface","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus-within:outline-2 focus-within:outline focus-within:outline-border-subtle focus-within:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","data-[invalid]:border-danger-soft data-[invalid]:bg-danger-surface data-[invalid]:text-danger","data-[invalid]:hover:border-danger data-[invalid]:focus-within:border-danger data-[invalid]:focus-within:outline-danger-ring",t?.input),children:l=>a(b,{segment:l,className:e("p-1 tabular-nums text-end text-fg","data-[invalid]:text-danger-soft","disabled:cursor-default disabled:select-none disabled:text-fg-subtle","focus:text-fg focus:bg-border-subtle focus:outline-0 focus:rounded-md focus:caret-transparent focus:data-[invalid]:bg-danger-soft focus:data-[invalid]:text-fg-inverse","type-literal:p-0.5","data-[placeholder]:text-fg-subtle data-[placeholder]:data-[invalid]:text-danger-soft data-[placeholder]:data-[invalid]:focus:text-fg-inverse","aria-[readonly]:focus-visible:outline aria-[readonly]:focus-visible:outline-fg-muted aria-[readonly]:focus-visible:outline-1","aria-[readonly]:focus:outline aria-[readonly]:focus:outline-fg-muted aria-[readonly]:focus:bg-transparent aria-[readonly]:focus:outline-2",t?.segment)})}),r&&a(g,{className:e("flex text-fg-muted text-sm",t?.description),slot:"description",children:r}),a(x,{className:e("flex text-danger-soft text-sm",t?.error),children:i})]})}export{v as TimeInput,v as default};

package/docs/migrations/2026/10/ui-2026-10-06-invalid-styling-keys-on-data-invalid.md

@@ -0,0 +1,34 @@
+# Required fields are no longer red before anyone types
+
+**Date:** 2026-10-06
+**Package:** `@clicktap/ui`
+**Affects:** `Input`, `CreditCardInput`, `CreditCardExpirationInput`, `DobInput`, `NumberInput`, `DateInput`, `TimeInput`, `Radio`, `Checkbox`
+**Classification:** BUGFIX
+**Breaking:** No. A field shows its danger styling only when react-aria reports it invalid.
+**Ticket:** CTAP-2225
+
+## What changed
+
+These components styled their invalid state with Tailwind's `invalid:` and `group-invalid:`
+variants, which compile to the CSS `:invalid` pseudo-class. That had two effects:
+
+- A required `<input>` that is empty matches `:invalid` as soon as it renders, so every
+  `isRequired` field (sign-in, password reset, checkout) showed the danger border, background and
+  text before the user had typed or submitted anything.
+- The date, time, radio and checkbox components put those classes on react-aria `div` and `label`
+  elements, which never match `:invalid`, so their invalid styling never showed at all.
+
+They now key on react-aria's `data-invalid` attribute (`data-[invalid]:` and
+`group-data-[invalid]:`), which react-aria sets when the field's invalid state is displayed: after a
+submit or commit fails validation, or when `isInvalid` / `validate` says so.
+
+## Migrate
+
+Nothing for an app that uses the components as they are. An app that passed its own `invalid:`
+classes through `className` / `classNames` has the same on-load problem; switch them to
+`data-[invalid]:` too.
+
+## Verify
+
+Open a form with a required field: it renders with the normal border. Submit it empty, or pass
+`isInvalid`, and the danger styling appears.

package/docs/migrations/index.json

@@ -1,4 +1,14 @@
 [
+  {
+    "path": "2026/10/ui-2026-10-06-invalid-styling-keys-on-data-invalid.md",
+    "module": "libs/frontend-modules/ui",
+    "package": "@clicktap/ui",
+    "date": "2026-10-06",
+    "title": "Required fields are no longer red before anyone types",
+    "classification": "BUGFIX",
+    "breaking": "No. A field shows its danger styling only when react-aria reports it invalid.",
+    "affects": "`Input`, `CreditCardInput`, `CreditCardExpirationInput`, `DobInput`, `NumberInput`, `DateInput`, `TimeInput`, `Radio`, `Checkbox`"
+  },
   {
     "path": "2026/10/ui-2026-10-06-accordion-mounts-collapsed-content-on-expand.md",
     "module": "libs/frontend-modules/ui",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "2.4.5",
+  "version": "2.4.7",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",