@clicktap/ui 0.14.19 → 0.14.25

package/components/ContextMenu/ContextMenu.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{Popover as x,Menu as h}from"react-aria-components";import{forwardRef as c}from"react";import{motion as _}from"framer-motion";import{cn as m}from"../../utils/cn.js";const b=c(({style:o,...e},n)=>{const r=typeof o=="function"?o(e):o;return t(x,{...e,ref:n,style:r})}),l=_.create(b);function P({children:o,key:e,onAction:n,setAnimation:r,animation:d="hidden",className:a,classNames:i,...u}){return t(l,{className:m("px-0 py-1.5","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]","rounded-md","w-56","bg-white","border border-solid border-slate-300",a),isExiting:d==="hidden",onAnimationComplete:f=>{r(p=>f==="hidden"&&p==="hidden"?"unmounted":p)},variants:{hidden:{opacity:0,y:-10},visible:{opacity:1,y:0}},initial:"hidden",animate:d,...u,children:t(h,{className:m("outline-none",i==null?void 0:i.menu),onAction:n,children:o})},e)}export{P as ContextMenu,P as default};
+import{jsx as r}from"react/jsx-runtime";import{Popover as v,Menu as h}from"react-aria-components";import{forwardRef as w}from"react";import{motion as c}from"framer-motion";import{cn as d}from"../../utils/cn.js";const a=w(({style:o,...e},t)=>{const i=typeof o=="function"?o(e):o;return r(v,{...e,ref:t,style:i})});let p=null;function y(){return typeof window>"u"?null:(p||(p=c.create(a)),p)}function E({children:o,key:e,onAction:t,setAnimation:i,animation:u="hidden",className:_,classNames:n,...f}){const m=y(),x=d("px-0 py-1.5","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]","rounded-md","w-56","bg-white","border border-solid border-slate-300",_);return m?r(m,{className:x,isExiting:u==="hidden",onAnimationComplete:b=>{i(l=>b==="hidden"&&l==="hidden"?"unmounted":l)},variants:{hidden:{opacity:0,y:-10},visible:{opacity:1,y:0}},initial:"hidden",animate:u,...f,children:r(h,{className:d("outline-none",n==null?void 0:n.menu),onAction:t,children:o})},e):r(a,{className:x,...f,children:r(h,{className:d("outline-none",n==null?void 0:n.menu),onAction:t,children:o})},e)}export{E as ContextMenu,E as default};

package/components/Dialog/Dialog.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Dialog as s}from"react-aria-components";import{motion as l}from"framer-motion";import{cn as m}from"../../utils/cn.js";const f=i(({style:a,animationVariants:o,...r},t)=>{const n=typeof a=="function"?a(r):a;return e(s,{...r,ref:t,style:n})}),c=l.create(f);function x({className:a,children:o,animationVariants:r,...t}){return e(c,{className:m("p-8 outline-0 max-w-max w-screen absolute top-2/4 left-2/4","shadow-[0_8px_24px_rgba(0,0,0,0.1)] rounded-lg bg-white border border-solid border-slate-400","transform -translate-x-1/2 -translate-y-1/2",a),...t,variants:r||{hidden:{transform:"translate(-50%, -50%) scale(0.8)",transition:{ease:"backIn"}},visible:{transform:"translate(-50%, -50%) scale(1)",transition:{ease:"backOut"}}},children:o})}export{x as Dialog,x as default};
+import{jsx as i}from"react/jsx-runtime";import{forwardRef as f}from"react";import{Dialog as m}from"react-aria-components";import{motion as u}from"framer-motion";import{cn as c}from"../../utils/cn.js";const l=f(({style:o,animationVariants:a,...t},n)=>{const r=typeof o=="function"?o(t):o;return i(m,{...t,ref:n,style:r})});let e=null;function d(){return typeof window>"u"?null:(e||(e=u.create(l)),e)}function D({className:o,children:a,animationVariants:t,...n}){const r=d(),s={className:c("p-8 outline-0 max-w-max w-screen absolute top-2/4 left-2/4","shadow-[0_8px_24px_rgba(0,0,0,0.1)] rounded-lg bg-white border border-solid border-slate-400","transform -translate-x-1/2 -translate-y-1/2",o),...n};return r?i(r,{...s,variants:t||{hidden:{transform:"translate(-50%, -50%) scale(0.8)",transition:{ease:"backIn"}},visible:{transform:"translate(-50%, -50%) scale(1)",transition:{ease:"backOut"}}},children:a}):i(l,{...s,children:a})}export{D as Dialog,D as default};

package/components/DialogTrigger/DialogTrigger.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{createContext as s,useContext as m,useState as u,useMemo as l}from"react";import{DialogTrigger as c}from"react-aria-components";const i=s({animation:"unmounted",setAnimation:()=>{},onOpenChange:()=>{}}),x=()=>m(i);function C(r){const[e,n]=u("unmounted"),o=g=>{n(g?"visible":"hidden")},a=l(()=>({animation:e,setAnimation:n,onOpenChange:o}),[e]);return t(i.Provider,{value:a,children:t(c,{...r,onOpenChange:o})})}export{C as DialogTrigger,C as default,x as useDialogTrigger};
+import{jsx as r}from"react/jsx-runtime";import{createContext as u,useContext as c,useState as l,useMemo as d}from"react";import{DialogTrigger as f}from"react-aria-components";const a=u({animation:"unmounted",setAnimation:()=>{},onOpenChange:()=>{}}),D=()=>c(a);function T(g){const{onOpenChange:o,...s}=g,[e,n]=l("unmounted"),t=i=>{n(i?"visible":"hidden"),o==null||o(i)},m=d(()=>({animation:e,setAnimation:n,onOpenChange:t}),[e,o]);return r(a.Provider,{value:m,children:r(f,{...s,onOpenChange:t})})}export{T as DialogTrigger,T as default,D as useDialogTrigger};

package/components/Drawer/Drawer.js

@@ -1 +1 @@
-import{jsx as i}from"react/jsx-runtime";import{forwardRef as s}from"react";import{Dialog as n}from"react-aria-components";import{motion as d}from"framer-motion";import{cn as b}from"../../utils/cn.js";const m={top:{hidden:{y:"-100%",transition:{ease:"easeIn"}},visible:{y:0,transition:{ease:"easeOut"}}},bottom:{hidden:{y:"100%",transition:{ease:"easeIn"}},visible:{y:0,transition:{ease:"easeOut"}}},right:{hidden:{x:"100%",transition:{ease:"easeIn"}},visible:{x:0,transition:{ease:"easeOut"}}},left:{hidden:{x:"-100%",transition:{ease:"easeIn"}},visible:{x:0,transition:{ease:"easeOut"}}}},h=s(({style:t,size:r="20rem",...e},a)=>{const o=typeof t=="function"?t(e):{...t,"--drawer-size":`${r}`};return i(n,{...e,ref:a,style:o})}),l=d.create(h);function g({direction:t="right",children:r,className:e,animationVariants:a,...o}){return i(l,{className:b("fixed p-8 outline-0 bg-white","border-solid border-slate-200","max-w-full max-h-[var(--visual-viewport-height)]",t==="top"&&"top-0 left-0 right-0 bottom-auto border-b shadow-[0_8px_24px_rgba(0,0,0,0.1)] h-[var(--drawer-size)]",t==="right"&&"top-0 left-auto bottom-0 right-0 border-l shadow-[-8px_0_24px_rgba(0,0,0,0.1)] w-[var(--drawer-size)]",t==="bottom"&&"bottom-0 left-0 right-0 top-auto border-t shadow-[0_-8px_24px_rgba(0,0,0,0.1)] h-[var(--drawer-size)]",t==="left"&&"top-0 bottom-0 left-0 right-auto border-r shadow-[8px_0_24px_rgba(0,0,0,0.1)] w-[var(--drawer-size)]",e),"data-direction":t,variants:a||m[t],...o,children:r})}export{g as Drawer,g as default};
+import{jsx as n}from"react/jsx-runtime";import{forwardRef as l}from"react";import{Dialog as m}from"react-aria-components";import{motion as p}from"framer-motion";import{cn as u}from"../../utils/cn.js";const b={top:{hidden:{y:"-100%",transition:{ease:"easeIn"}},visible:{y:0,transition:{ease:"easeOut"}}},bottom:{hidden:{y:"100%",transition:{ease:"easeIn"}},visible:{y:0,transition:{ease:"easeOut"}}},right:{hidden:{x:"100%",transition:{ease:"easeIn"}},visible:{x:0,transition:{ease:"easeOut"}}},left:{hidden:{x:"-100%",transition:{ease:"easeIn"}},visible:{x:0,transition:{ease:"easeOut"}}}},f=l(({style:t,size:e="20rem",...r},o)=>{const a=typeof t=="function"?t(r):{...t,"--drawer-size":`${e}`};return n(m,{...r,ref:o,style:a})});let i=null;function w(){return typeof window>"u"?null:(i||(i=p.create(f)),i)}function c({direction:t="right",children:e,className:r,animationVariants:o,...a}){const s=w(),d={className:u("fixed p-8 outline-0 bg-white","border-solid border-slate-200","max-w-full max-h-[var(--visual-viewport-height)]",t==="top"&&"top-0 left-0 right-0 bottom-auto border-b shadow-[0_8px_24px_rgba(0,0,0,0.1)] h-[var(--drawer-size)]",t==="right"&&"top-0 left-auto bottom-0 right-0 border-l shadow-[-8px_0_24px_rgba(0,0,0,0.1)] w-[var(--drawer-size)]",t==="bottom"&&"bottom-0 left-0 right-0 top-auto border-t shadow-[0_-8px_24px_rgba(0,0,0,0.1)] h-[var(--drawer-size)]",t==="left"&&"top-0 bottom-0 left-0 right-auto border-r shadow-[8px_0_24px_rgba(0,0,0,0.1)] w-[var(--drawer-size)]",r),"data-direction":t,...a};return s?n(s,{variants:o||b[t],...d,children:e}):n(f,{...d,children:e})}export{c as Drawer,c as default};

package/components/ModalOverlay/ModalOverlay.js

@@ -1 +1 @@
-import{jsx as o}from"react/jsx-runtime";import{forwardRef as p,useId as v}from"react";import{ModalOverlay as y}from"react-aria-components";import{motion as h,AnimatePresence as b}from"framer-motion";import{useDialogTrigger as x}from"../DialogTrigger/DialogTrigger.js";import{cn as M}from"../../utils/cn.js";const O=p(({style:i,...e},t)=>{const n=typeof i=="function"?i(e):i;return o(y,{...e,ref:t,style:n})}),g=h.create(O);function a({animate:i,animation:e,setAnimation:t,className:n,animationVariants:d,children:l,...m}){const s=v(),{key:c,...f}=m;return o(g,{isExiting:e==="hidden",onAnimationComplete:u=>{t(r=>u==="hidden"&&r==="hidden"?"unmounted":r)},variants:d||{hidden:{opacity:0,backdropFilter:"blur(0px)",transition:{delay:.08}},visible:{opacity:1,backdropFilter:"blur(8px)"}},initial:"hidden",animate:i,exit:"hidden",className:M("bg-black/30","fixed top-0 left-0","z-50","w-screen h-[var(--visual-viewport-height)]",n),...f,children:l},c||s)}function j(i){const{isOpen:e}=i,{animation:t,setAnimation:n}=x();return e!==void 0?o(b,{children:e&&o(a,{...i,animate:"visible",animation:t,setAnimation:n})}):o(a,{...i,animate:t,animation:t,setAnimation:n})}export{j as ModalOverlay,j as default};
+import{jsx as t}from"react/jsx-runtime";import{forwardRef as h,useId as b}from"react";import{ModalOverlay as c}from"react-aria-components";import{AnimatePresence as O,motion as g}from"framer-motion";import{useDialogTrigger as x}from"../DialogTrigger/DialogTrigger.js";import{cn as w}from"../../utils/cn.js";const k=h(({style:i,...e},n)=>{const o=typeof i=="function"?i(e):i;return t(c,{...e,ref:n,style:o})});let r=null;function A(){return typeof window>"u"?null:(r||(r=g.create(k)),r)}function s({animate:i,animation:e,setAnimation:n,className:o,animationVariants:f,children:a,...u}){const p=b(),d=A(),{key:v,...y}=u,l={className:w("bg-black/30","fixed top-0 left-0","z-50","w-screen h-[var(--visual-viewport-height)]",o),...y};return d?t(d,{isExiting:e==="hidden",onAnimationComplete:M=>{n(m=>M==="hidden"&&m==="hidden"?"unmounted":m)},variants:f||{hidden:{opacity:0,backdropFilter:"blur(0px)",transition:{delay:.08}},visible:{opacity:1,backdropFilter:"blur(8px)"}},initial:"hidden",animate:i,exit:"hidden",...l,children:a},v||p):t(c,{...l,children:a})}function D(i){const{isOpen:e}=i,{animation:n,setAnimation:o}=x();return e!==void 0?t(O,{children:e&&t(s,{...i,animate:"visible",animation:n,setAnimation:o})}):t(s,{...i,animate:n,animation:n,setAnimation:o})}export{D as ModalOverlay,D as default};

package/components/PinInput/PinInput.js

@@ -1 +1 @@
-import{jsxs as T,jsx as s}from"react/jsx-runtime";import{useState as j,useRef as J,useEffect as z}from"react";import{Group as M,Label as U,TextField as E,Input as K,Text as Z,FieldError as H}from"react-aria-components";import{cn as f}from"../../utils/cn.js";function q({description:D,errorMessage:P,isDisabled:k=!1,isInvalid:A=!1,isMasked:L=!1,isRequired:V=!0,label:$,length:c=6,name:h,onChange:w,value:v="",type:I="numeric",validationBehavior:m="native",className:F,classNames:r,...R}){const[S,W]=j(v),[i,g]=j(Array(c).fill("")),a=J([]);z(()=>{a.current=a.current.slice(0,c)},[c]),z(()=>{const t=i.join("");W(t),w&&w(t)},[w,i]);const B=t=>{var l,o;const e=t.target.value,u=Number(t.target.getAttribute("data-pin-input-index"));e!==""&&u<i.length-1&&((o=(l=a.current)==null?void 0:l[u+1])==null||o.focus());const d=i.map((x,p)=>p===u?e:x);g(d)},C=t=>{var l,o,x,p;const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));if(t.ctrlKey||t.metaKey)return;const u=["Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Control","Alt","Meta","Shift","Tab","Enter","Escape"],d={alpha:/^[a-z]$/i,alphanumeric:/^[a-z0-9]$/i,numeric:/^[0-9]$/i};if(!t.key.match(d[I])&&!u.includes(t.key)&&t.preventDefault(),i[e]===""&&e>0&&t.key==="Backspace"){const b=i.map((n,y)=>y===e-1?"":n);g(b),(o=(l=a.current)==null?void 0:l[e-1])==null||o.focus(),t.preventDefault()}if(i[e]===""&&e<i.length-1&&t.key==="Delete"){const b=i.map((n,y)=>y===e+1?"":n);g(b),(p=(x=a.current)==null?void 0:x[e+1])==null||p.focus(),t.preventDefault()}},G=t=>{var p,b;const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));t.preventDefault();const u=(p=t.clipboardData)==null?void 0:p.getData("text");if(!u)return;const d=u.split("").filter(n=>{switch(I){case"alpha":return/^[a-zA-Z]$/.test(n);case"alphanumeric":return/^[a-z0-9]$/i.test(n);case"numeric":default:return/^[0-9]$/.test(n)}});if(d.length===0)return;const l=[...i];let o=e;for(let n=0;n<d.length&&e+n<c;n++)l[e+n]=d[n],o=e+n;g(l);const x=o+1<c?o+1:c-1;(b=a.current[x])==null||b.focus()};return T(M,{className:f("flex flex-wrap gap-2",F),"aria-label":$,...R,children:[s(U,{className:f("flex text-slate-500 text-sm grow shrink-0 basis-full",r==null?void 0:r.label),children:$}),i.map((t,e)=>s(E,{className:f("flex flex-col w-full flex-1 text-slate-900",r==null?void 0:r.inputWrap),"aria-label":`Pin Input Digit ${e+1}`,isDisabled:k,isInvalid:A,isRequired:V,validationBehavior:m,children:s(K,{className:f("border-solid border border-slate-300 rounded-md","text-sm text-slate-900 placeholder-slate-400 text-center","h-10 px-2 py-0 m-0 w-full","bg-white","transition-all duration-200 ease-in-out","hover:border-slate-400","focus:outline-2 focus:outline focus:outline-slate-200 focus:border-slate-400","disabled:border-slate-200 disabled:bg-slate-100","invalid:border-red-500 invalid:bg-red-100 invalid:text-red-600","invalid:hover:border-red-600 invalid:focus:border-red-600 invalid:focus:outline-red-200",r==null?void 0:r.input),onChange:B,onKeyDown:C,onPaste:G,type:L?"password":"text",ref:u=>{u&&(a.current[e]=u)},value:t,maxLength:1,name:h&&`${h}-${e}`,"data-pin-input-index":e})},`pin-input-${e}`)),T(E,{className:f("flex flex-row flex-wrap grow shrink-0 basis-full",r==null?void 0:r.textWrap),"aria-label":"Pin Input",isDisabled:k,isInvalid:A,isRequired:V,validationBehavior:m,children:[h&&s(K,{type:"hidden",name:h,value:S}),D&&s(Z,{className:f("flex text-slate-500 text-sm grow shrink-0 basis-full",r==null?void 0:r.description),slot:"description",children:D}),s(H,{className:f("flex text-red-500 text-sm grow shrink-0 basis-full",r==null?void 0:r.error),children:P})]})]})}export{q as PinInput,q as default};
+import{jsxs as T,jsx as h}from"react/jsx-runtime";import{useState as z,useRef as G,useEffect as U}from"react";import{Group as Z,Label as v,TextField as K,Input as H,Text as P}from"react-aria-components";import{cn as b}from"../../utils/cn.js";function C({description:m,errorMessage:y,isDisabled:A=!1,isInvalid:D=!1,isMasked:E=!1,isRequired:I=!0,label:$,length:s=6,name:M,onChange:f,value:L="",type:j="numeric",validationBehavior:J="native",className:R,classNames:r,...S}){const[Q,g]=z(L),[o,V]=z(Array(s).fill("")),x=G([]);U(()=>{x.current=x.current.slice(0,s)},[s]);const W=e=>{var l,d;const t=e.target.value,n=Number(e.target.getAttribute("data-pin-input-index"));t!==""&&n<o.length-1&&((d=(l=x.current)==null?void 0:l[n+1])==null||d.focus());const p=o.map((w,u)=>u===n?t:w);V(p);const a=p.join("");g(a),f&&f(a)},B=e=>{var a,l,d,w;const t=Number(e.currentTarget.getAttribute("data-pin-input-index"));if(e.ctrlKey||e.metaKey)return;const n=["Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Control","Alt","Meta","Shift","Tab","Enter","Escape"],p={alpha:/^[a-z]$/i,alphanumeric:/^[a-z0-9]$/i,numeric:/^[0-9]$/i};if(!e.key.match(p[j])&&!n.includes(e.key)&&e.preventDefault(),o[t]===""&&t>0&&e.key==="Backspace"){const u=o.map((i,k)=>k===t-1?"":i);V(u),(l=(a=x.current)==null?void 0:a[t-1])==null||l.focus(),e.preventDefault();const c=u.join("");g(c),f&&f(c)}if(o[t]===""&&t<o.length-1&&e.key==="Delete"){const u=o.map((i,k)=>k===t+1?"":i);V(u),(w=(d=x.current)==null?void 0:d[t+1])==null||w.focus(),e.preventDefault();const c=u.join("");g(c),f&&f(c)}},F=e=>{var u,c;const t=Number(e.currentTarget.getAttribute("data-pin-input-index"));e.preventDefault();const n=(u=e.clipboardData)==null?void 0:u.getData("text");if(!n)return;const p=n.split("").filter(i=>{switch(j){case"alpha":return/^[a-zA-Z]$/.test(i);case"alphanumeric":return/^[a-z0-9]$/i.test(i);case"numeric":default:return/^[0-9]$/.test(i)}});if(p.length===0)return;const a=[...o];let l=t;for(let i=0;i<p.length&&t+i<s;i++)a[t+i]=p[i],l=t+i;V(a);const d=a.join("");g(d),f&&f(d);const w=l+1<s?l+1:s-1;(c=x.current[w])==null||c.focus()};return T(Z,{className:b("flex flex-wrap gap-2",R),"aria-label":$,...S,children:[h(v,{className:b("flex text-slate-500 text-sm grow shrink-0 basis-full",r==null?void 0:r.label),children:$}),o.map((e,t)=>h(K,{className:b("flex flex-col w-full flex-1 text-slate-900",r==null?void 0:r.inputWrap),"aria-label":`Pin Input Digit ${t+1}`,isDisabled:A,isInvalid:D,isRequired:I,validationBehavior:J,children:h(H,{className:b("border-solid border border-slate-300 rounded-md","text-sm text-slate-900 placeholder-slate-400 text-center","h-10 px-2 py-0 m-0 w-full","bg-white","transition-all duration-200 ease-in-out","hover:border-slate-400","focus:outline-2 focus:outline focus:outline-slate-200 focus:border-slate-400","disabled:border-slate-200 disabled:bg-slate-100","invalid:border-red-500 invalid:bg-red-100 invalid:text-red-600","invalid:hover:border-red-600 invalid:focus:border-red-600 invalid:focus:outline-red-200",r==null?void 0:r.input),onChange:W,onKeyDown:B,onPaste:F,type:E?"password":"text",autoComplete:"one-time-code",ref:n=>{n&&(x.current[t]=n)},value:e,maxLength:1,"data-pin-input-index":t})},`pin-input-${t}`)),T(K,{className:b("flex flex-row flex-wrap grow shrink-0 basis-full",r==null?void 0:r.textWrap),"aria-label":"Pin Input",isDisabled:A,isInvalid:D,isRequired:I,validationBehavior:J,children:[m&&h(P,{className:b("flex text-slate-500 text-sm grow shrink-0 basis-full",r==null?void 0:r.description),slot:"description",children:m}),D&&y&&typeof y=="string"&&h(P,{className:b("flex text-red-500 text-sm grow shrink-0 basis-full",r==null?void 0:r.error),slot:"errorMessage",children:y})]})]})}export{C as PinInput,C as default};

package/components/Select/Select.js

@@ -1 +1 @@
-import{jsx as e,jsxs as v,Fragment as P}from"react/jsx-runtime";import{Popover as j,ComboBox as m,Label as A,Input as D,Button as E,Text as F,FieldError as M,ListBox as T}from"react-aria-components";import{forwardRef as w,useState as g}from"react";import{motion as R}from"framer-motion";import{cn as o}from"../../utils/cn.js";import{Pulse as U}from"../Loader/Pulse.js";const W=w((d,i)=>e(j,{...d,ref:i})),q=R.create(W);function z({buttonIcon:d,...i}){return d?typeof d=="function"?d(i):d:e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:o("transition-all ease-in-out duration-200",i.isOpen?"rotate-180":"rotate-0"),children:e("path",{d:"M6 9L12 15L18 9",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:o(["stroke-slate-900",i.isDisabled&&"stroke-slate-400",i.isInvalid&&"stroke-red-500"])})})}function G({listBoxComponent:d,children:i,...r}){return e(d||T,{...r,children:i})}function H({label:d,description:i,errorMessage:r,children:u,placeholder:C,key:B,isLoading:a,slots:n,popoverPortalContainer:c,popoverOffset:_,selectedKey:x,className:k,classNames:t,autoComplete:y,...b},L){const[l,f]=g("unmounted"),[h,S]=g(!1);return e(m,{onOpenChange:()=>{f(l==="visible"?"hidden":"visible"),S(!h)},isDisabled:b.isDisabled||a,"data-has-value":!!x,selectedKey:x,...b,className:o("flex flex-col","w-full",k),children:I=>v(P,{children:[e(A,{className:o("flex","text-xs text-slate-500",t==null?void 0:t.label),children:d}),v("div",{className:o("flex","relative","w-full",t==null?void 0:t.comboBoxContainer),children:[e(D,{placeholder:C,className:o("border border-solid border-slate-300","text-sm text-slate-900","py-0 px-2","h-10 w-full","m-0","rounded-md","bg-white","transition-all ease-in-out duration-200","data-[hovered]:border-slate-400","data-[focused]:border-slate-400 data-[focused]:outline data-[focused]:outline-2 data-[focused]:outline-slate-200"," data-[disabled]:bg-slate-100 data-[disabled]:border-slate-300",a?"data-[disabled]:text-slate-900":"data-[disabled]:text-slate-500","data-[invalid]:border-red-500 data-[invalid]:bg-red-100 data-[invalid]:text-red-600","data-[invalid]:data-[hovered]:border-red-600","data-[invalid]:data-[focused]:border-red-600 data-[invalid]:data-[focused]:outline data-[invalid]:data-[focused]:outline-2 data-[invalid]:data-[focused]:outline-red-200","data-[invalid]:placeholder:text-slate-400",t==null?void 0:t.input),ref:L,autoComplete:y}),a?e("div",{className:o("absolute top-2 right-2","block",t==null?void 0:t.loader),children:(n==null?void 0:n.loadingIcon)||e(U,{})}):e(E,{className:o("absolute top-2 right-0","block","border-none","bg-none",t==null?void 0:t.arrowButton),children:e(z,{buttonIcon:n==null?void 0:n.buttonIcon,...I})})]}),i&&e(F,{slot:"description",className:o("flex","text-xs","text-slate-500",t==null?void 0:t.description),children:i}),e(M,{className:o("flex","text-xs","text-red-500",t==null?void 0:t.errorMessage),children:r}),e(q,{isOpen:h,isExiting:l==="hidden",offset:_,UNSTABLE_portalContainer:c,onAnimationComplete:O=>{f(p=>O==="hidden"&&p==="hidden"?"unmounted":p)},variants:{hidden:{opacity:0,y:-10},visible:{opacity:1,y:0}},initial:"hidden",animate:l,className:o("px-0 py-1.5","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]","rounded-md","w-[var(--trigger-width)]","bg-white","border border-solid border-slate-300",t==null?void 0:t.listContainer),children:e(G,{listBoxComponent:n==null?void 0:n.listBoxComponent,className:o("max-h-80","overflow-y-scroll",t==null?void 0:t.list),children:u})},B)]})})}const $=w(H);export{$ as Select,$ as default};
+import{jsx as e,jsxs as _,Fragment as j}from"react/jsx-runtime";import{Popover as D,ComboBox as F,Label as T,Input as U,Button as R,Text as W,FieldError as q,ListBox as z}from"react-aria-components";import{forwardRef as L,useState as y}from"react";import{motion as G}from"framer-motion";import{cn as o}from"../../utils/cn.js";import{Pulse as H}from"../Loader/Pulse.js";const S=L((d,n)=>e(D,{...d,ref:n}));let f=null;function J(){return typeof window>"u"?null:(f||(f=G.create(S)),f)}function Q({buttonIcon:d,...n}){return d?typeof d=="function"?d(n):d:e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:o("transition-all ease-in-out duration-200",n.isOpen?"rotate-180":"rotate-0"),children:e("path",{d:"M6 9L12 15L18 9",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:o(["stroke-slate-900",n.isDisabled&&"stroke-slate-400",n.isInvalid&&"stroke-red-500"])})})}function k({listBoxComponent:d,children:n,...r}){return e(d||z,{...r,children:n})}function V({label:d,description:n,errorMessage:r,children:a,placeholder:I,key:b,isLoading:l,slots:i,popoverPortalContainer:p,popoverOffset:h,selectedKey:v,className:M,classNames:t,autoComplete:O,...w},m){const[u,g]=y("unmounted"),[x,A]=y(!1),C=J(),B=o("px-0 py-1.5","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]","rounded-md","w-[var(--trigger-width)]","bg-white","border border-solid border-slate-300",t==null?void 0:t.listContainer);return e(F,{onOpenChange:()=>{g(u==="visible"?"hidden":"visible"),A(!x)},isDisabled:w.isDisabled||l,"data-has-value":!!v,selectedKey:v,...w,className:o("flex flex-col","w-full",M),children:E=>_(j,{children:[e(T,{className:o("flex","text-xs text-slate-500",t==null?void 0:t.label),children:d}),_("div",{className:o("flex","relative","w-full",t==null?void 0:t.comboBoxContainer),children:[e(U,{placeholder:I,className:o("border border-solid border-slate-300","text-sm text-slate-900","py-0 px-2","h-10 w-full","m-0","rounded-md","bg-white","transition-all ease-in-out duration-200","data-[hovered]:border-slate-400","data-[focused]:border-slate-400 data-[focused]:outline data-[focused]:outline-2 data-[focused]:outline-slate-200"," data-[disabled]:bg-slate-100 data-[disabled]:border-slate-300",l?"data-[disabled]:text-slate-900":"data-[disabled]:text-slate-500","data-[invalid]:border-red-500 data-[invalid]:bg-red-100 data-[invalid]:text-red-600","data-[invalid]:data-[hovered]:border-red-600","data-[invalid]:data-[focused]:border-red-600 data-[invalid]:data-[focused]:outline data-[invalid]:data-[focused]:outline-2 data-[invalid]:data-[focused]:outline-red-200","data-[invalid]:placeholder:text-slate-400",t==null?void 0:t.input),ref:m,autoComplete:O}),l?e("div",{className:o("absolute top-2 right-2","block",t==null?void 0:t.loader),children:(i==null?void 0:i.loadingIcon)||e(H,{})}):e(R,{className:o("absolute top-2 right-0","block","border-none","bg-none",t==null?void 0:t.arrowButton),children:e(Q,{buttonIcon:i==null?void 0:i.buttonIcon,...E})})]}),n&&e(W,{slot:"description",className:o("flex","text-xs","text-slate-500",t==null?void 0:t.description),children:n}),e(q,{className:o("flex","text-xs","text-red-500",t==null?void 0:t.errorMessage),children:r}),C?e(C,{isOpen:x,isExiting:u==="hidden",offset:h,UNSTABLE_portalContainer:p,onAnimationComplete:P=>{g(c=>P==="hidden"&&c==="hidden"?"unmounted":c)},variants:{hidden:{opacity:0,y:-10},visible:{opacity:1,y:0}},initial:"hidden",animate:u,className:B,children:e(k,{listBoxComponent:i==null?void 0:i.listBoxComponent,className:o("max-h-80","overflow-y-scroll",t==null?void 0:t.list),children:a})},b):e(S,{isOpen:x,offset:h,UNSTABLE_portalContainer:p,className:B,children:e(k,{listBoxComponent:i==null?void 0:i.listBoxComponent,className:o("max-h-80","overflow-y-scroll",t==null?void 0:t.list),children:a})},b)]})})}const s=L(V);export{s as Select,s as default};

package/components/Tabs/Tabs.context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const TabsOrientationContext: React.Context<'horizontal' | 'vertical'>;
+export default TabsOrientationContext;

package/package.json

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

package/components/Accordion/Accordion.tsx

@@ -1,82 +0,0 @@
-'use client';
-
-import { Accordion as NextUiAccordion } from '@nextui-org/accordion';
-import type { AccordionProps } from '@nextui-org/accordion';
-import { cn } from '../../utils/cn';
-import { DownArrow } from '../Icon/DownArrow';
-
-export function Accordion({
-  children,
-  variant,
-  isCompact,
-  className,
-  itemClasses,
-  ...props
-}: AccordionProps) {
-  return (
-    <NextUiAccordion
-      variant={variant}
-      isCompact={isCompact}
-      dividerProps={{
-        className: cn(
-          'my-2 border-solid border-slate-200',
-          variant === 'shadow' && 'border-slate-300'
-        ),
-      }}
-      className={cn(
-        'px-0',
-        variant === 'bordered' && [
-          'px-4 py-4 rounded-xl border-2 border-slate-200',
-        ],
-        variant === 'shadow' && [
-          'px-4 py-4 rounded-xl bg-slate-100 shadow-slate-200 border border-slate-200',
-        ],
-        className
-      )}
-      itemClasses={{
-        base: cn(
-          'w-full py-2',
-          'data-[disabled="true"]:pointer-events-none data-[disabled="true"]:opacity-50',
-          variant === 'bordered' && ['rounded-xl py-0'],
-          variant === 'splitted' && [
-            'flex flex-col bg-slate-100 rounded-xl border border-slate-200',
-          ],
-          isCompact && 'py-0',
-          itemClasses?.base
-        ),
-        trigger: cn(
-          'w-full h-full flex items-center gap-3 py-0 appearance-none cursor-pointer select-none',
-          'data-[focus-visible="true"]:outline-2 data-[focus-visible="true"]:outline data-[focus-visible="true"]:outline-slate-100',
-          'bg-transparent text-inherit',
-          isCompact && ['py-2'],
-          itemClasses?.trigger
-        ),
-        title: cn(
-          'text-xl font-semibold',
-          isCompact && 'text-base',
-          itemClasses?.title
-        ),
-        subtitle: cn(
-          'text-base',
-          isCompact && 'text-sm',
-          itemClasses?.subtitle
-        ),
-        titleWrapper: cn('text-left', itemClasses?.titleWrapper),
-        startContent: cn('shrink-0', itemClasses?.startContent),
-        content: cn([isCompact ? 'py-1' : 'py-2'], itemClasses?.content),
-        indicator: itemClasses?.indicator,
-        heading: itemClasses?.heading,
-      }}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    >
-      {children}
-    </NextUiAccordion>
-  );
-}
-
-export default Accordion;
-
-export function AccordionItemArrow() {
-  return <DownArrow className="w-4 h-4" />;
-}

package/components/Accordion/index.ts

@@ -1,3 +0,0 @@
-export { Accordion, AccordionItemArrow } from './Accordion';
-export { AccordionItem } from '@nextui-org/accordion';
-export type { AccordionProps } from '@nextui-org/accordion';

package/components/Avatar/Avatar.stories.tsx

@@ -1,99 +0,0 @@
-import type { ReactNode } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Avatar } from './Avatar';
-import type { AvatarProps } from './Avatar.types';
-import { AvatarGroup } from './AvatarGroup/AvatarGroup';
-import type { AvatarGroupProps } from './AvatarGroup/AvatarGroup.types';
-
-function Layout({ children }: { children: ReactNode }) {
-  return children;
-}
-
-function AvatarExample(props: AvatarProps) {
-  return (
-    <Layout>
-      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-      <Avatar {...props} />
-    </Layout>
-  );
-}
-
-function AvatarGroupExample(props: AvatarGroupProps) {
-  return (
-    <Layout>
-      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-      <AvatarGroup {...props}>
-        <Avatar src="https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg" />
-        <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-        <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-        <Avatar src="https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg" />
-        <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-        <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      </AvatarGroup>
-    </Layout>
-  );
-}
-
-type Story = StoryObj<typeof Avatar>;
-type StoryGroup = StoryObj<typeof AvatarGroup>;
-
-const meta: Meta<typeof Layout> = {
-  component: Layout,
-};
-
-export default meta;
-
-export const AvatarComponent: Story = {
-  name: 'Avatar',
-  render: AvatarExample,
-  argTypes: {
-    src: {
-      control: 'text',
-    },
-    name: {
-      control: 'text',
-    },
-    size: {
-      options: ['sm', 'md', 'lg'],
-      control: 'radio',
-    },
-    showFallback: {
-      control: 'boolean',
-    },
-    radius: {
-      options: ['sm', 'md', 'lg', 'none', 'full'],
-      control: 'radio',
-    },
-    isBordered: {
-      control: 'boolean',
-    },
-    isDisabled: {
-      control: 'boolean',
-    },
-    isFocusable: {
-      control: 'boolean',
-    },
-  },
-  args: {
-    src: 'https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg',
-    name: 'Avatar',
-    size: 'md',
-    showFallback: false,
-    radius: 'full',
-    isBordered: false,
-    isDisabled: false,
-    isFocusable: false,
-  },
-};
-export const AvatarGroupComponent: StoryGroup = {
-  name: 'Avatar Group',
-  render: AvatarGroupExample,
-  argTypes: {
-    isGrid: {
-      control: 'boolean',
-    },
-  },
-  args: {
-    isGrid: false,
-  },
-};

package/components/Avatar/Avatar.tsx

@@ -1,120 +0,0 @@
-'use client';
-
-import { useAvatarGroupContext, Avatar as UiAvatar } from '@nextui-org/avatar';
-import { cn } from '../../utils/cn';
-import type { AvatarProps } from './Avatar.types';
-
-export function Avatar({
-  icon,
-  className,
-  isDisabled,
-  size,
-  classNames,
-  isBordered,
-  radius,
-  ...props
-}: AvatarProps) {
-  const avatarGroupContext = useAvatarGroupContext();
-  return (
-    <div
-      className={cn(
-        'group',
-        'z-10',
-        'first:ms-0',
-        !avatarGroupContext?.isGrid && !!avatarGroupContext && '-ms-2',
-        className
-      )}
-    >
-      <UiAvatar
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        isDisabled={isDisabled}
-        size={size}
-        radius={radius}
-        isBordered={isBordered}
-        className={cn(
-          !avatarGroupContext?.isGrid &&
-            !!avatarGroupContext &&
-            'group-hover:-translate-y-3.5',
-          'transition-transform duration-300 ease-in-out',
-          'bg-slate-100',
-          'flex items-center justify-center',
-          'relative',
-          'z-10',
-          'overflow-hidden',
-          isDisabled ? 'opacity-50' : 'opacity-100',
-          [
-            size === 'sm' && 'h-8',
-            size === 'md' && 'h-10',
-            size === 'lg' && 'h-12',
-            size === 'sm' && 'w-8',
-            size === 'md' && 'w-10',
-            size === 'lg' && 'w-12',
-          ],
-          [
-            radius === 'full' && 'rounded-full',
-            radius === 'lg' && 'rounded-2xl',
-            radius === 'md' && 'rounded-xl',
-            radius === 'sm' && 'rounded-lg',
-            radius === 'none' && 'rounded-none',
-          ],
-          isBordered &&
-            'shadow-[#fff_0px_0px_0px_2px,_#f1f5f9_0px_0px_0px_4px,_#00000000_0px_0px_0px_0px]',
-          classNames?.base
-        )}
-        classNames={{
-          icon: cn(
-            'data-[loaded=true]:opacity-100 opacity-0',
-            'absolute',
-            'w-full',
-            'h-full',
-            'overflow-hidden',
-            'object-cover',
-            'object-center',
-            'transition-opacity ease-in-out duration-500',
-            classNames?.icon
-          ),
-          name: cn(
-            'flex items-center justify-center',
-            'absolute top-1/2 left-1/2',
-            '-translate-x-1/2 -translate-y-1/2',
-            'text-xs text-center',
-            'max-w-full',
-            'overflow-hidden',
-            classNames?.name
-          ),
-          fallback: cn(
-            'flex items-center justify-center',
-            'absolute top-1/2 left-1/2',
-            '-translate-x-1/2 -translate-y-1/2',
-            'text-xs text-center',
-            'max-w-full',
-            'overflow-hidden',
-            classNames?.fallback
-          ),
-        }}
-        icon={
-          icon || (
-            <svg
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
-                stroke="black"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          )
-        }
-      />
-    </div>
-  );
-}
-
-export default Avatar;

package/components/Avatar/Avatar.types.ts

@@ -1,3 +0,0 @@
-import type { AvatarProps as NextAvatarProps } from '@nextui-org/avatar';
-
-export type AvatarProps = Omit<NextAvatarProps, 'color'>;

package/components/Avatar/AvatarGroup/AvatarGroup.tsx

@@ -1,32 +0,0 @@
-'use client';
-
-import { AvatarGroup as UIAvatarGroup } from '@nextui-org/avatar';
-import type { PropsWithChildren } from 'react';
-import { cn } from '../../../utils/cn';
-import type { AvatarGroupProps } from './AvatarGroup.types';
-
-export function AvatarGroup({
-  children,
-  isGrid,
-  renderCount,
-  className,
-}: PropsWithChildren<AvatarGroupProps>) {
-  return (
-    <UIAvatarGroup
-      isGrid={isGrid}
-      max={0}
-      renderCount={renderCount ?? undefined}
-      className={cn(
-        isGrid ? 'inline-grid' : 'flex',
-        isGrid ? 'gap-3' : 'gap-0',
-        'grid-cols-4',
-        'items-center',
-        className
-      )}
-    >
-      {children}
-    </UIAvatarGroup>
-  );
-}
-
-export default AvatarGroup;

package/components/Avatar/AvatarGroup/AvatarGroup.types.ts

@@ -1,8 +0,0 @@
-import type { AvatarGroupProps as NextAvatarGroupProps } from '@nextui-org/avatar';
-
-export type AvatarGroupProps = Pick<
-  NextAvatarGroupProps,
-  'isGrid' | 'renderCount'
-> & {
-  className?: string;
-};

package/components/Avatar/index.ts

@@ -1,4 +0,0 @@
-export { Avatar } from './Avatar';
-export { AvatarGroup } from './AvatarGroup/AvatarGroup';
-export type { AvatarProps } from './Avatar.types';
-export type { AvatarGroupProps } from './AvatarGroup/AvatarGroup.types';

package/components/Badge/Badge.stories.tsx

@@ -1,72 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Badge } from './Badge';
-import type { BadgeProps } from './Badge.types';
-import { Avatar } from '../Avatar/Avatar';
-
-type Story = StoryObj<typeof Badge>;
-
-function Component(props: BadgeProps) {
-  return (
-    <Badge {...props}>
-      <Avatar name="Regular" radius="md" />
-    </Badge>
-  );
-}
-
-const meta: Meta<typeof Component> = {
-  component: Component,
-};
-
-export default meta;
-
-export const Example: Story = {
-  render: Component,
-  argTypes: {
-    content: {
-      control: 'text',
-    },
-    variant: {
-      options: ['shadow', 'flat', 'solid', 'faded'],
-      control: 'radio',
-    },
-    size: {
-      options: ['sm', 'md', 'lg'],
-      control: 'radio',
-    },
-    placement: {
-      options: ['top-right', 'bottom-right', 'bottom-left', 'top-left'],
-      control: 'radio',
-    },
-    shape: {
-      options: ['circle', 'rectangle'],
-      control: 'radio',
-    },
-    isInvisible: {
-      control: 'boolean',
-    },
-    isOneChar: {
-      control: 'boolean',
-    },
-    isDot: {
-      control: 'boolean',
-    },
-    disableAnimation: {
-      control: 'boolean',
-    },
-    showOutline: {
-      control: 'boolean',
-    },
-  },
-  args: {
-    content: '5',
-    variant: 'solid',
-    size: 'md',
-    placement: 'top-right',
-    shape: 'rectangle',
-    isInvisible: false,
-    isOneChar: false,
-    isDot: false,
-    disableAnimation: false,
-    showOutline: true,
-  },
-};