UNPKG

@szum-tech/design-system

Version:

Szum-Tech design system with tailwindcss support

1 lines 13.5 kB
import {a,b}from'./chunk-4HJVF7MU.js';import {a as a$1}from'./chunk-JUNHRB4B.js';import*as E from'react';import {useDirection}from'@radix-ui/react-direction';import {Slot}from'@radix-ui/react-slot';import {jsx,jsxs}from'react/jsx-runtime';import {useComposedRefs}from'@radix-ui/react-compose-refs';var te="Stepper",Ie="StepperNav",Z="StepperItem",J="StepperTrigger",ue="StepperIndicator",de="StepperTitle",le="StepperDescription",ye="StepperContent",be="StepperPrevTrigger",Pe="StepperNextTrigger",Ce="stepperFocusGroup.onEntryFocus",Te={bubbles:false,cancelable:true},Ne=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"],Ae={ArrowLeft:"prev",ArrowUp:"prev",ArrowRight:"next",ArrowDown:"next",PageUp:"first",Home:"first",PageDown:"last",End:"last"};var me=E.createContext(null);function P(e){let t=E.useContext(me);if(!t)throw new Error(`\`${e}\` must be used within \`${te}\``);return t}function De(e,t,a,c,i,o,m){let s={subscribe:r=>e.current?(e.current.add(r),()=>e.current?.delete(r)):()=>{},getState:()=>t.current??{steps:new Map,value:void 0},setState:(r,n)=>{let p=t.current;!p||Object.is(p[r],n)||(r==="value"&&typeof n=="string"?(p.value=n,a?.(n)):p[r]=n,s.notify());},setStateWithValidation:async(r,n)=>{if(!m)return s.setState("value",r),true;try{let p=await m(r,n);return p&&s.setState("value",r),p}catch{return false}},hasValidation:()=>!!m,addStep:r=>{let n=t.current;n&&(n.steps=new Map(n.steps),n.steps.set(r.value,r),i?.(r.value),s.notify());},removeStep:r=>{let n=t.current;n&&(n.steps=new Map(n.steps),n.steps.delete(r),o?.(r),s.notify());},setStep:({value:r,disabled:n,loading:p,completed:I})=>{let d=t.current;if(d){let f=d.steps.get(r);if(f){let g={...f,completed:I,disabled:n,loading:p};d.steps=new Map(d.steps),d.steps.set(r,g),I!==f.completed&&c?.(r,I),s.notify();}}},notify:()=>{if(e.current)for(let r of e.current)r();}};return s}var fe=E.createContext(null);function O(e){let t=E.useContext(fe);if(!t)throw new Error(`\`${e}\` must be used within \`${te}\``);return t}function v(e){let t=O("useStore"),a=E.useCallback(()=>e(t.getState()),[e,t]);return E.useSyncExternalStore(t.subscribe,a,a)}function Et({value:e,defaultValue:t,onValueChange:a$2,onValueComplete:c,onValueAdd:i,onValueRemove:o,onValidate:m,id:s,dir:r,orientation:n="horizontal",activationMode:p="automatic",asChild:I,disabled:d=false,nonInteractive:f=false,loop:g=false,className:S,indicators:F={},...N}){let z=E.useId(),b$1=s??z,V=a(()=>new Set),L=a(()=>({steps:new Map,value:e??t})),K=E.useMemo(()=>De(V,L,a$2,c,i,o,m),[V,L,a$2,c,i,o,m]);b(()=>{e!==void 0&&K.setState("value",e);},[e]);let R=useDirection(r),D=E.useMemo(()=>({id:b$1,dir:R,orientation:n,activationMode:p,disabled:d,nonInteractive:f,loop:g,indicators:F}),[b$1,R,n,p,d,f,g,F]),U=I?Slot:"div";return jsx(fe.Provider,{value:K,children:jsx(me.Provider,{value:D,children:jsx(U,{id:b$1,"data-disabled":d?"":void 0,"data-orientation":n,"data-slot":"stepper",dir:R,...N,className:a$1("flex w-full flex-col gap-4 data-[orientation=vertical]:flex-row",S)})})})}var bt={FIRST:"first",LAST:"last",PREV:"prev",NEXT:"next"},Pt={HORIZONTAL:"horizontal",VERTICAL:"vertical"},Ct={NEXT:"next",PREV:"prev"},Tt={AUTOMATIC:"automatic",MANUAL:"manual"},Y={INACTIVE:"inactive",ACTIVE:"active",COMPLETED:"completed"};var ve=E.createContext(null);function xe(e){let t=E.useContext(ve);if(!t)throw new Error(`\`${e}\` must be used within \`FocusProvider\``);return t}function ne(e,t=false){let a=document.activeElement;for(let c of e){let i=c.current;if(i&&(i===a||(i.focus({preventScroll:t}),document.activeElement!==a)))return}}function H(e,t,a,c,i="item"){let o=Array.from(c.keys()),m=o.indexOf(t);return a?.completed?Y.COMPLETED:e===t?i==="separator"?Y.INACTIVE:Y.ACTIVE:e&&o.indexOf(e)>m?Y.COMPLETED:Y.INACTIVE}function T(e,t,a){return `${e}-${t}-${a}`}function _e(e,t){return e.map((a,c)=>e[(t+c)%e.length])}function Ue(e,t){return t!=="rtl"?e:e==="ArrowLeft"?"ArrowRight":e==="ArrowRight"?"ArrowLeft":e}function Me(e,t,a){let c=Ue(e.key,t);if(!(a==="horizontal"&&["ArrowUp","ArrowDown"].includes(c))&&!(a==="vertical"&&["ArrowLeft","ArrowRight"].includes(c)))return Ae[c]}function Ut({className:e,children:t,asChild:a,ref:c,...i}){let o=P(Ie),m=o.orientation,s=v(l=>l.value),[r,n]=E.useState(null),[p,I]=E.useState(false),[d,f]=E.useState(0),g=E.useRef(false),S=E.useRef(new Map),F=E.useRef(null),N=useComposedRefs(c,F),z=E.useCallback(l=>{n(l);},[]),b=E.useCallback(()=>{I(true);},[]),V=E.useCallback(()=>{f(l=>l+1);},[]),L=E.useCallback(()=>{f(l=>l-1);},[]),K=E.useCallback(l=>{S.current.set(l.id,l);},[]),R=E.useCallback(l=>{S.current.delete(l);},[]),D=E.useCallback(()=>Array.from(S.current.values()).filter(l=>l.ref.current).sort((l,X)=>{let G=l.ref.current,_=X.ref.current;if(!G||!_)return 0;let W=G.compareDocumentPosition(_);return W&Node.DOCUMENT_POSITION_FOLLOWING?-1:W&Node.DOCUMENT_POSITION_PRECEDING?1:0}),[]),U=E.useCallback(l=>{i.onBlur?.(l),!l.defaultPrevented&&I(false);},[i.onBlur]),pe=E.useCallback(l=>{if(i.onFocus?.(l),l.defaultPrevented)return;let X=!g.current;if(l.target===l.currentTarget&&X&&!p){let G=new CustomEvent(Ce,Te);if(l.currentTarget.dispatchEvent(G),!G.defaultPrevented){let _=Array.from(S.current.values()).filter(x=>!x.disabled),W=s?_.find(x=>x.value===s):void 0,Re=_.find(x=>x.active),u=_.find(x=>x.id===r),M=[W,Re,u,..._].filter(Boolean).map(x=>x.ref);ne(M,false);}}g.current=false;},[i.onFocus,p,s,r]),B=E.useCallback(l=>{i.onMouseDown?.(l),!l.defaultPrevented&&(g.current=true);},[i.onMouseDown]),ae=E.useMemo(()=>({tabStopId:r,onItemFocus:z,onItemShiftTab:b,onFocusableItemAdd:V,onFocusableItemRemove:L,onItemRegister:K,onItemUnregister:R,getItems:D}),[r,z,b,V,L,K,R,D]),j=a?Slot:"nav";return jsx(ve.Provider,{value:ae,children:jsx(j,{role:"tablist","data-slot":"stepper-nav","aria-orientation":m,"data-orientation":m,dir:o.dir,tabIndex:p||d===0?-1:0,ref:N,onBlur:U,onFocus:pe,onMouseDown:B,className:a$1("group/stepper-nav inline-flex gap-4","data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",e),...i,children:t})})}var ge=E.createContext(null);function h(e){let t=E.useContext(ge);if(!t)throw new Error(`\`${e}\` must be used within \`${Z}\``);return t}function jt({value:e,completed:t=false,disabled:a=false,loading:c=false,asChild:i,className:o,children:m,...s}){let{orientation:r,dir:n}=P(Z),p=O(Z),I=v(N=>N.value);b(()=>(p.addStep({value:e,completed:t,disabled:a,loading:c}),()=>{p.removeStep(e);}),[e,t,a,c]),b(()=>{p.setStep({value:e,completed:t,disabled:a,loading:c});},[e,t,a,c]);let d=v(N=>N.steps.get(e)),f=v(N=>N.steps),g=H(I,e,d,f),S=E.useMemo(()=>({value:e,stepState:d}),[e,d]),F=i?Slot:"div";return jsx(ge.Provider,{value:S,children:jsxs(F,{"data-disabled":d?.disabled?"":void 0,"data-orientation":r,"data-state":g,"data-slot":"stepper-item",dir:n,className:a$1("group/step flex flex-1 flex-col justify-end data-[disabled]:opacity-50","",o),...s,children:[m,jsx("div",{"data-state":g,className:a$1("bg-border h-1 w-full transition-colors duration-500","data-[state=active]:bg-primary data-[state=completed]:bg-success")})]})})}function lr({asChild:e,disabled:t,className:a,ref:c,...i}){let o=P(J),m=h(J),s=O(J),r=xe(J),n=v(u=>u.value),p=m.value,I=v(u=>u.steps.get(p)),d=o.activationMode,f=o.orientation,g=o.loop,S=v(u=>u.steps),N=Array.from(S.keys()).indexOf(p)+1,z=S.size,b$1=T(o.id,"trigger",p),V=T(o.id,"content",p),L=T(o.id,"title",p),K=T(o.id,"description",p),R=o.disabled||I?.disabled||t,D=n===p,U=r.tabStopId===b$1,pe=H(n,p,I,S),B=E.useRef(null),ae=useComposedRefs(c,B),j=E.useRef(false),l=E.useRef(false);E.useEffect(()=>{function u(M){Ne.includes(M.key)&&(j.current=true);}function C(){j.current=false;}return document.addEventListener("keydown",u),document.addEventListener("keyup",C),()=>{document.removeEventListener("keydown",u),document.removeEventListener("keyup",C);}},[]),b(()=>(r.onItemRegister({id:b$1,ref:B,value:p,active:U,disabled:!!R}),R||r.onFocusableItemAdd(),()=>{r.onItemUnregister(b$1),R||r.onFocusableItemRemove();}),[r,b$1,p,U,R]);let X=E.useCallback(async u=>{if(i.onClick?.(u),!u.defaultPrevented&&!R&&!o.nonInteractive){let C=Array.from(S.keys()).indexOf(n??""),x=Array.from(S.keys()).indexOf(p)>C?"next":"prev";await s.setStateWithValidation(p,x);}},[R,o.nonInteractive,s,p,n,S,i.onClick]),G=E.useCallback(async u=>{if(i.onFocus?.(u),u.defaultPrevented)return;r.onItemFocus(b$1);let C=!l.current;if(!D&&!R&&d!=="manual"&&!o.nonInteractive&&C){let M=Array.from(S.keys()).indexOf(n||""),w=Array.from(S.keys()).indexOf(p)>M?"next":"prev";await s.setStateWithValidation(p,w);}l.current=false;},[i,r,b$1,D,R,d,o.nonInteractive,S,n,p,s]),_=E.useCallback(async u=>{if(i.onKeyDown?.(u),u.defaultPrevented)return;if(u.key==="Enter"&&o.nonInteractive){u.preventDefault();return}if((u.key==="Enter"||u.key===" ")&&d==="manual"&&!o.nonInteractive){u.preventDefault(),!R&&B.current&&B.current.click();return}if(u.key==="Tab"&&u.shiftKey){r.onItemShiftTab();return}if(u.target!==u.currentTarget)return;let C=Me(u,o.dir,f);if(C!==void 0){if(u.metaKey||u.ctrlKey||u.altKey||u.shiftKey)return;u.preventDefault();let M=r.getItems().filter(w=>!w.disabled),x=M.map(w=>w.ref);if(C==="last")x.reverse();else if(C==="prev"||C==="next"){C==="prev"&&x.reverse();let w=x.findIndex(ee=>ee.current===u.currentTarget);x=g?_e(x,w+1):x.slice(w+1);}if(s.hasValidation()&&x.length>0){let ee=x[0]?.current,q=M.find(se=>se.ref.current===ee);if(q&&q.value!==p){let se=Array.from(S.keys()).indexOf(n||""),Ee=Array.from(S.keys()).indexOf(q.value)>se?"next":"prev";if(Ee==="next"){if(!await s.setStateWithValidation(q.value,Ee))return}else s.setState("value",q.value);queueMicrotask(()=>ee?.focus());return}}queueMicrotask(()=>ne(x));}},[r,o.nonInteractive,o.dir,d,f,g,R,i.onKeyDown,s,p,n,S]),W=E.useCallback(u=>{i.onMouseDown?.(u),!u.defaultPrevented&&(l.current=true,R?u.preventDefault():r.onItemFocus(b$1));},[r,b$1,R,i.onMouseDown]);return jsx(e?Slot:"button",{id:b$1,role:"tab",type:"button",disabled:R,tabIndex:U?0:-1,ref:ae,"data-slot":"stepper-trigger","data-disabled":R?"":void 0,"data-state":pe,"aria-controls":V,"aria-current":D?"step":void 0,"aria-describedby":`${L} ${K}`,"aria-posinset":N,"aria-selected":D,"aria-setsize":z,className:a$1("inline-flex w-full cursor-pointer items-center gap-3 rounded text-left transition-colors duration-500 outline-none","disabled:pointer-events-none","focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",a),onClick:X,onFocus:G,onKeyDown:_,onMouseDown:W,...i})}function yr({className:e,children:t,asChild:a,ref:c,...i}){let{indicators:o,dir:m}=P(ue),s=h(ue),r=v(S=>S.value),n=s.value,p=v(S=>S.steps.get(n)),I=v(S=>S.steps),d=Array.from(I.keys()).indexOf(n)+1,f=H(r,n,p,I);return jsx(a?Slot:"div",{"data-slot":"stepper-indicator","data-state":f,dir:m,ref:c,className:a$1("bg-muted border-border text-muted-foreground relative flex size-6 shrink-0 items-center justify-center self-end overflow-hidden rounded-t border-x border-t text-xs transition-colors duration-500","data-[state=completed]:bg-success/50 data-[state=completed]:border-success data-[state=completed]:text-success-foreground","data-[state=active]:bg-primary/50 data-[state=active]:border-primary data-[state=active]:text-primary-foreground",e),...i,children:jsx("div",{className:"absolute",children:typeof t=="function"?t(f):o&&(s.stepState?.loading&&o.loading||f==="completed"&&o.completed||f==="active"&&o.active||f==="inactive"&&o.inactive)?s.stepState?.loading&&o.loading||f==="completed"&&o.completed||f==="active"&&o.active||f==="inactive"&&o.inactive:t||d})})}function Mr({className:e,asChild:t=false,...a}){let c=P(de),i=h(de),o=T(c.id,"title",i.value);return jsx(t?Slot:"h3",{id:o,"data-slot":"stepper-title",dir:c.dir,className:a$1("text-sm leading-none font-medium",e),...a})}function Ur({className:e,asChild:t,...a}){let c=P(le),i=h(le),o=T(c.id,"description",i.value);return jsx(t?Slot:"span",{id:o,"data-slot":"stepper-description",dir:c.dir,className:a$1("text-muted-foreground text-sm",e),...a})}function Yr({children:e,asChild:t=false,className:a,...c}){let i=v(m=>m.value);return jsx(t?Slot:"div",{"data-slot":"stepper-panel","data-state":i,className:a$1("w-full",a),...c,children:e})}function to({value:e,asChild:t=false,forceMount:a=false,className:c,...i}){let o=P(ye),m=v(I=>I.value),s=T(o.id,"content",e),r=T(o.id,"trigger",e),n=m===e;return !n&&!a?null:jsx(t?Slot:"div",{id:s,role:"tabpanel","data-state":m,"aria-labelledby":r,"data-slot":"stepper-content",dir:o.dir,className:a$1("w-full",c,!n&&a&&"hidden"),hidden:!n&&a,...i})}function ao({asChild:e=false,onClick:t,disabled:a,...c}){let i=O(Pe),o=v(d=>d.value),m=v(d=>d.steps),s=Array.from(m.keys()),r=o?s.indexOf(o):-1,n=a||r>=s.length-1,p=E.useCallback(async d=>{if(t?.(d),d.defaultPrevented||n)return;let f=Math.min(r+1,s.length-1),g=s[f];g&&await i.setStateWithValidation(g,"next");},[t,n,r,s,i]);return jsx(e?Slot:"button",{type:"button","data-slot":"stepper-next-trigger",disabled:n,onClick:p,...c})}function fo({asChild:e=false,disabled:t,onClick:a,...c}){let i=O(be),o=v(d=>d.value),m=v(d=>d.steps),s=Array.from(m.keys()),r=o?s.indexOf(o):-1,n=t||r<=0,p=E.useCallback(async d=>{if(a?.(d),d.defaultPrevented||n)return;let f=Math.max(r-1,0),g=s[f];g&&i.setState("value",g);},[r,n,a,s,i]);return jsx(e?Slot:"button",{type:"button","data-slot":"stepper-prev-trigger",disabled:n,onClick:p,...c})}export{P as a,Et as b,bt as c,Pt as d,Ct as e,Tt as f,Y as g,xe as h,Ut as i,h as j,jt as k,lr as l,yr as m,Mr as n,Ur as o,Yr as p,to as q,ao as r,fo as s};