visits-style 2.1.2 → 2.1.4

package/README.md

@@ -8,7 +8,7 @@
 VISITS Technologiesのreactデザインコンポーネント
 
 ## Dependencies
-- React, React-dom(>=18)
+- React, React-dom(>=19)
 - tailwindcss(>=4)
 
 ## Install

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("clsx"),ie=require("tailwind-merge"),s=require("react/jsx-runtime"),n=require("react"),d=require("@floating-ui/react"),le=require("react-dom");function N(e,t){return t?ie.twMerge(e,t):e}function Y({className:e,...t}){const o=n.useMemo(()=>g("leading-none peer-disabled:opacity-70",e),[e]);return s.jsx("label",{className:o,...t})}function ae({label:e,children:t,required:o,htmlFor:r,error:l,help:i,helpBefore:a,className:c,innerClass:p,...f}){const m=n.useMemo(()=>g("font-medium",o?'after:content-["*"] after:text-danger after:text-sm after:pl-0.5':""),[o]),x=n.useMemo(()=>N("flex flex-col space-y-2",c),[c]);return s.jsxs("div",{className:x,...f,children:[e?s.jsx(Y,{className:m,htmlFor:r,children:e}):null,i&&a?s.jsx("p",{className:"text-xs text-muted pb-2",children:i}):null,s.jsx("div",{className:p,children:ue(t,!!l)}),i&&!a&&!l?s.jsx("p",{className:"text-xs text-muted",children:i}):null,l?s.jsx("p",{className:"text-xs text-danger",children:l}):null]})}function ue(e,t){const o=n.Children.count(e);if(!o)return null;if(o===1)return n.cloneElement(e,{error:t});const r=n.Children.toArray(e);return r[0]=n.cloneElement(r[0],{error:t}),r}function ce({error:e,unstyled:t,className:o,...r}){const l=n.useMemo(()=>t?o:N(g("flex rounded-md border bg-background px-3 py-2 w-full [&_input]:placeholder:text-muted","[&_input]:disabled:opacity-50 [&_input]:focus-visible:outline-none",e?"border-danger hover:border-danger-fore":"border-input"),o),[o,e,t]);return s.jsx("div",{className:l,...r})}const z=n.forwardRef(({className:e,type:t,error:o,unstyled:r,...l},i)=>{const a=n.useMemo(()=>r?e:N(g("flex rounded-md border bg-background px-3 py-2 w-full placeholder:text-muted","disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring",o?"border-danger hover:border-danger-fore":"border-input not-disabled:hover:border-input-fore",t==="file"?"file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground":null),e),[e,t,o,r]);return s.jsx("input",{ref:i,type:t,className:a,...l})});z.displayName="Input";const Z=n.forwardRef(({className:e,error:t,unstyled:o,...r},l)=>{const i=n.useMemo(()=>o?e:N(g("flex rounded-md border bg-background px-3 py-2 w-full","disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring",t?"border-danger hover:border-danger-fore":"border-input not-disabled:hover:border-input-fore"),e),[e,t,o]);return s.jsx("textarea",{ref:l,className:i,...r})});Z.displayName="Textarea";function de(){return s.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"30",height:"30",viewBox:"0 0 30 30",children:s.jsx("rect",{width:"20",height:"3",y:"13.5",x:"4.5",fill:"currentColor",stroke:"none",rx:"2"})})}function fe({checked:e,indeterminate:t,className:o,id:r,name:l,onChange:i,value:a,checkIcon:c,...p}){const f=n.useMemo(()=>N(g("inline-flex justify-center items-center border w-4.5 h-4.5 rounded","cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",e||t?"bg-primary text-inverted disabled:text-text disabled:bg-input disabled:border-input":"border-input not-disabled:hover:border-input-fore"),o),[e,t,o]),m=()=>{p.disabled||i?.(!e)};return s.jsxs("button",{type:"button",role:"checkbox",id:r||l,className:f,onClick:m,"aria-checked":e,...p,children:[e?c:null,t&&!e?s.jsx(de,{}):null,s.jsx("input",{type:"checkbox","aria-hidden":"true",name:l,checked:e,value:a,onChange:m,disabled:p.disabled,style:{position:"absolute",pointerEvents:"none",top:0,left:0,width:1,height:1,opacity:0}})]})}const pe=typeof window<"u"&&typeof window.document<"u"&&typeof window.document.createElement<"u",q=pe?n.useLayoutEffect:n.useEffect;function E({children:e,container:t,disabled:o}){const[r,l]=n.useState(null);return q(()=>{if(!t){let i=document.getElementById("visits-style-portals");return i||(i=document.createElement("div"),i.id="visits-style-portals",document.body.appendChild(i)),l(i)}l(t)},[t]),o||!r?null:le.createPortal(e,r)}function $(e){e&&(e.stopPropagation(),e.preventDefault())}const me={open:150,close:75},H=n.forwardRef(({position:e,label:t,children:o,disabled:r,offset:l={x:0,y:6},onOpen:i,onClose:a,onManualClose:c,timeout:p=me,unstyled:f,zIndex:m=9996,role:x,...h},C)=>{const[y,u]=n.useState(!1),M=d.useId(),j=n.useRef(i),w=n.useRef(a),{refs:v,floatingStyles:S,context:T}=d.useFloating({nodeId:M,placement:e,middleware:[d.shift(),d.flip({fallbackAxisSideDirection:"end"}),d.offset({mainAxis:l.y,crossAxis:l.x})],open:y,onOpenChange:R=>{R?j.current?.(v.reference.current,v.floating.current):w.current?.(v.reference.current,v.floating.current),u(R)},whileElementsMounted:d.autoUpdate}),{isMounted:P,styles:O}=d.useTransitionStyles(T,{duration:p,initial({side:R}){let I="";return R==="top"?I="translateY(5%) scale(0.95)":R==="bottom"?I="translateY(-5%) scale(0.95)":R==="left"?I="translateX(5%) scale(0.95)":I="translateX(-5%) scale(0.95)",{opacity:0,transform:I}}}),A=n.useCallback(R=>{if($(R),c)return c();u(!1),w.current?.(v.reference.current,v.floating.current)},[c]);n.useEffect(()=>{if(r&&y)return u(!1)},[r,y]),n.useImperativeHandle(C,()=>({open:()=>{u(!0),j.current?.(v.reference.current,v.floating.current)},close:()=>{u(!1),w.current?.(v.reference.current,v.floating.current)}}),[]);const{getFloatingProps:D,getReferenceProps:_}=d.useInteractions([d.useClick(T,{enabled:!r})]);return j.current=i,w.current=a,s.jsxs(s.Fragment,{children:[n.cloneElement(n.Children.only(t),_({ref:v.setReference,tabIndex:0,role:"button","aria-expanded":y,disabled:r,onClick:$})),s.jsx(E,{disabled:r||!P,children:s.jsx(d.FloatingOverlay,{"data-testid":"vs-popover-shadow",onClick:A,style:{zIndex:m},autoFocus:!0,children:s.jsx("div",{role:x||"region",ref:v.setFloating,style:S,children:s.jsx(G,{unstyled:f,styles:O,...D({...h,onClick:$}),children:o})})})})]})});H.displayName="Popover";const G=n.forwardRef(({className:e,unstyled:t,styles:o,style:r={},...l},i)=>{const a=n.useMemo(()=>N(g("z-20 w-auto h-auto outline-none transition-transform ease-in-out",t?null:"border border-accent rounded-md shadow-lg p-1 bg-background"),e),[e,t]);return s.jsx("div",{ref:i,className:a,style:{...o,...r},...l})});G.displayName="PopoverContent";function be({className:e,placeholder:t="",options:o=[],error:r,unstyled:l,disabled:i,value:a,maxHeight:c=408,arrowIcon:p,closeIcon:f,checkIcon:m,onChange:x,onClear:h,renderItem:C,sectionLabelStyle:y,buttonAreaStyle:u,clearLabelText:M,optionStyle:j,...w}){const v=n.useRef(null),[S,T]=n.useState(0),P=n.useMemo(()=>l?e:N(g("flex items-center justify-between rounded-md border bg-background px-3 py-2 w-full overflow-hidden cursor-pointer","disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring",r?"border-danger hover:border-danger-fore":"border-input not-disabled:hover:border-input-fore"),e),[e,r,l]),O=n.useMemo(()=>Array.isArray(a),[]),A=n.useCallback(b=>{x?.(b),O||v.current?.close()},[x,O]),D=n.useCallback(b=>Array.isArray(a)?a.indexOf(b)>-1:a===b,[a]),_=n.useMemo(()=>{const b={},F=o.filter(k=>typeof k!="string");for(let k=0,B=F.length;k<B;k+=1){const X=F[k];b[`${X.value}`]=X.label}return b},[o]),R=n.useMemo(()=>{if(!a)return t;if(Array.isArray(a)){if(!a.length)return t;const b=[...a].sort(),F=[];for(let k=0,B=b.length;k<B;k+=1)F[k]=_[`${b[k]}`]||"";return F.filter(Boolean).join(",")||t}return _[`${a}`]||t},[t,a,_]),I=R===t,re=n.useMemo(()=>g("overflow-hidden overflow-ellipsis whitespace-nowrap",I?"text-muted":"text-text"),[I]),oe=n.useCallback((b,F)=>C?typeof b=="string"?C(b,{index:F,selected:!1,onChange:()=>{}}):C(b,{index:F,selected:D(b.value),onChange:()=>A(b.value)}):typeof b=="string"?s.jsx("h5",{className:g("font-normal py-1 px-2 text-muted",y),children:b},`optionheader-${F}`):s.jsx(ge,{selected:D(b.value),onChange:A,checkIcon:m,className:j,...b},b.label),[C,A,D,y,j,m]),se=n.useMemo(()=>g("relative flex items-center pr-4 space-x-2",u),[u]);return s.jsx(H,{label:s.jsxs("button",{type:"button",className:P,disabled:i,...w,children:[s.jsx("span",{className:re,children:R}),s.jsxs("div",{className:se,children:[h&&!I?s.jsx("div",{tabIndex:-1,role:"button",className:"size-6 p-1.5 rounded hover:bg-accent cursor-pointer","aria-label":M,onKeyDown:b=>{b.key!=="Enter"&&b.key!=="Space"||h()},onClick:b=>{b.stopPropagation(),h()},children:f}):null,p]})]}),ref:v,onOpen:b=>T(b?.getBoundingClientRect().width||0),disabled:i,children:s.jsx("ul",{className:"overflow-y-auto flex flex-col",role:"listbox",style:{minWidth:S,maxWidth:"calc(100vw - 3rem)",maxHeight:c},children:o.map(oe)})})}function ge({className:e,value:t,label:o,selected:r,checkIcon:l,onChange:i}){const a=n.useMemo(()=>g("flex items-center w-full hover:bg-accent rounded p-1 cursor-pointer",e),[e]);return s.jsxs("button",{type:"button",role:"option",className:a,"aria-selected":r,onClick:()=>i?.(t),children:[r&&l?l:s.jsx("div",{className:"w-5 h-1 mr-1"}),o]})}function xe({checked:e,className:t,id:o,name:r,onChange:l,value:i,...a}){const c=n.useMemo(()=>g("relative inline-flex justify-center items-center border border-input w-4.5 h-4.5 rounded-full","cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed not-disabled:hover:border-input-fore",e?"[&_i]:bg-primary disabled:[&_i]:bg-text disabled:border-input":"",t),[t,e]),p=()=>{a.disabled||l?.(!e)};return s.jsxs("button",{type:"button",role:"radio",id:o||r,className:c,onClick:p,"aria-checked":e,...a,children:[s.jsx("i",{className:"block w-2.5 h-2.5 rounded-full transition-transform",style:{transform:e?"":"scale(0.8)",opacity:e?1:0}}),s.jsx("input",{type:"radio","aria-hidden":"true",name:r,checked:e,value:i,onChange:p,disabled:a.disabled,style:{position:"absolute",pointerEvents:"none",top:0,left:0,width:1,height:1,opacity:0}})]})}const K=n.forwardRef(({className:e,checked:t,onChange:o,value:r,id:l,name:i,...a},c)=>{const p=n.useMemo(()=>N(g("inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50","w-11",t?"bg-primary":"bg-input"),e),[e,t]),f=n.useMemo(()=>N("pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",e),[e]),m=()=>{a.disabled||o?.(!t)};return s.jsxs("button",{type:"button",role:"switch",id:l||i,className:p,onClick:m,"aria-checked":t,...a,children:[s.jsx("span",{className:f,style:{transform:t?"translateX(100%)":""}}),s.jsx("input",{ref:c,type:"checkbox","aria-hidden":"true",name:i,checked:t,value:r,onChange:m,disabled:a.disabled,style:{position:"absolute",pointerEvents:"none",top:0,left:0,width:1,height:1,opacity:0}})]})});K.displayName="Switch";function he({header:e,show:t,children:o,timeout:r=300,...l}){const i=n.useRef(null),a=n.useRef(0),c=n.useRef(0),p=n.useRef(!0);return n.useEffect(()=>{c.current=r},[r]),q(()=>{if(!i.current)return;if(i.current.style.overflow="hidden",i.current.style.opacity="1",p.current){p.current=!1,i.current.style.height=t?"auto":"0px",t?window.requestAnimationFrame(()=>{i.current&&(a.current=i.current.offsetHeight)}):(window.requestAnimationFrame(()=>{i.current&&(i.current.style.height="auto",a.current=i.current.offsetHeight,i.current.style.height="0px")}),i.current.style.opacity="0");return}t||(i.current.style.height=`${a.current}px`);const f=[];f[0]=window.requestAnimationFrame(()=>{f[1]=window.requestAnimationFrame(()=>{i.current&&(i.current.style.height=`${t?a.current:0}px`,i.current.style.opacity=t?"1":"0")})});let m;const x=()=>{i.current&&(t?(i.current.style.height="auto",i.current.style.overflow="",i.current.style.opacity="",window.requestAnimationFrame(()=>{i.current&&(a.current=i.current.offsetHeight)})):i.current.style.height="0px")};return c.current===0?x():m=window.setTimeout(x,c.current),()=>{f.forEach(window.cancelAnimationFrame),m&&window.clearTimeout(m)}},[t]),s.jsxs("div",{...l,children:[e,s.jsx("div",{className:"transition-all ease-in-out overflow-hidden",role:"region","aria-hidden":!t,ref:i,style:{transitionDuration:`${r}ms`},children:o})]})}const U=n.forwardRef(({children:e,position:t="bottom",label:o,className:r,timeout:l=150,offset:i={x:0,y:6},clientPoint:a=!1,disabled:c},p)=>{const[f,m]=n.useState(!1),x=d.useId(),{refs:h,floatingStyles:C,context:y}=d.useFloating({nodeId:x,open:f,placement:t,middleware:[d.shift(),d.flip(),d.offset({mainAxis:i.y,crossAxis:i.x})],whileElementsMounted:c?void 0:d.autoUpdate,onOpenChange:m}),{getReferenceProps:u,getFloatingProps:M}=d.useInteractions([d.useHover(y,{enabled:!c}),d.useClientPoint(y,{enabled:a})]),{isMounted:j,styles:w}=d.useTransitionStyles(y,{duration:l,initial:{opacity:0,transform:"scale(0.8)"}});n.useImperativeHandle(p,()=>({floating:h.floating,reference:h.reference,open:()=>m(!0),close:()=>m(!1)})),n.useEffect(()=>{c&&m(!1)},[c]);const v=typeof e=="string"?s.jsx("span",{children:e}):e;return s.jsxs(s.Fragment,{children:[n.cloneElement(n.Children.only(v),{ref:h.setReference,...u()}),s.jsx(E,{disabled:c||!j,children:s.jsx("div",{role:"tooltip",className:"z-[9999]",ref:h.setFloating,...M({style:C}),children:s.jsx(J,{className:r,style:w,children:o})})})]})});U.displayName="Tooltip";const J=n.forwardRef(({className:e,custom:t,...o},r)=>{const l=n.useMemo(()=>N(g("relative w-auto h-auto outline-none transition-transform ease-in-out whitespace-pre",t?null:"border border-accent rounded shadow-md px-3 py-1 bg-background"),e),[e,t]);return s.jsx("div",{ref:r,className:l,...o})});J.displayName="TooltipContent";function Q({variant:e,size:t}){return g("inline-flex items-center justify-center whitespace-nowrap transition-colors rounded-md cursor-pointer","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring","disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-auto",{"bg-primary text-inverted hover:bg-primary-fore":!e||e==="primary","bg-info text-inverted hover:bg-info-fore":e==="info","bg-warn text-inverted hover:bg-warn-fore":e==="warn","bg-danger text-inverted hover:bg-danger-fore":e==="danger","hover:bg-accent":e==="ghost","hover:underline":e==="link","border border-input hover:bg-accent":e==="outline"},{"px-2 py-1":!t,"p-1.5":t==="icon"})}function ye({size:e,variant:t,className:o,...r}){const l=n.useMemo(()=>g(Q({size:e,variant:t}),o),[e,t,o]);return s.jsx("button",{className:l,type:"button",...r})}function we({open:e,children:t,timeout:o=150,padding:r="0.85rem",verticalAlign:l="center",closeOnOverlay:i,closeOnEsc:a,onExited:c,className:p,onOpenChange:f,size:m,...x}){const h=n.useRef(c),C=n.useRef(!1),y=d.useId(),{refs:u,context:M}=d.useFloating({open:e,onOpenChange:f,nodeId:y}),{getFloatingProps:j}=d.useInteractions([d.useDismiss(M,{enabled:a,escapeKey:a,outsidePress:!1})]),{isMounted:w,styles:v}=d.useTransitionStyles(M,{duration:o,initial:{opacity:0,transform:"scale(0.8)"}});n.useEffect(()=>{C.current!==w&&(C.current=w,!w&&h.current?.())},[w]);const S=n.useCallback(()=>{i&&f?.(!1)},[f,i]);h.current=c;const T=n.useMemo(()=>g("grid bg-backdrop z-40 justify-items-center",{"place-items-start items-start":l==="start","place-items-end":l==="end","place-items-center":l==="center"||!l}),[l]),P=n.useMemo(()=>N("transition ease-in-out",p),[p]);return s.jsx(E,{disabled:!w,children:s.jsx(d.FloatingOverlay,{className:T,"data-testid":"vs-dialog-overlay",onClick:S,style:{padding:r,opacity:v.opacity},lockScroll:!0,children:s.jsx(V,{ref:u.setFloating,className:P,role:"dialog",size:m,style:v,onClick:$,...j({...x}),children:t})})})}const V=n.forwardRef(({size:e,className:t,...o},r)=>{const l=n.useMemo(()=>g(e?"flex flex-col bg-background shadow-lg p-5 rounded":null,{"w-full max-w-dialog-sm":e==="small","w-full max-w-dialog-md":e==="medium","w-full max-w-dialog-lg":e==="large"},t),[e,t]);return s.jsx("div",{ref:r,className:l,...o})});V.displayName="DialogContent";const ve={open:250,close:150};function je({open:e,timeout:t=ve,onOpenChange:o,position:r="right",overlay:l,onExited:i,...a}){const c=d.useId(),p=n.useRef(!1),f=n.useRef(i),{refs:m,context:x}=d.useFloating({open:e,onOpenChange:o,nodeId:c}),{isMounted:h,styles:C}=d.useTransitionStyles(x,{duration:t,initial(){let u="translateX(75%)";return r==="left"?u="translateX(-75%)":r==="top"?u="translateY(-75%)":r==="bottom"&&(u="translateY(75%)"),{opacity:0,transform:u}}});n.useEffect(()=>{p.current!==h&&(p.current=h,!h&&f.current?.())},[h]);const y=n.useMemo(()=>g("fixed transition-transform z-30",{"top-0 right-0 h-full max-h-screen":r==="right","top-0 left-0 h-full max-h-screen":r==="left","top-0 left-0 right-0 w-full max-w-screen":r==="top","bottom-0 left-0 right-0 w-full max-w-screen":r==="bottom"}),[r]);return f.current=i,s.jsxs(E,{disabled:!h,children:[l?s.jsx(d.FloatingOverlay,{className:"bg-backdrop",style:{opacity:C.opacity},onClick:()=>o?.(!1)}):null,s.jsx("div",{ref:m.setFloating,className:y,role:"dialog",style:C,children:s.jsx(Ce,{...a})})]})}function Ce({className:e,unstyled:t,...o}){const r=n.useMemo(()=>t?e:N(g("relative bg-background min-w-full min-h-full border border-input shadow-lg"),e),[t,e]);return s.jsx("div",{className:r,...o})}function ee({size:e=20,label:t="Loading...",...o}){return s.jsxs("div",{role:"status",...o,children:[s.jsxs("svg",{"aria-hidden":"true",className:"text-accent animate-spin fill-primary",width:e,height:e,viewBox:"0 0 100 101",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[s.jsx("path",{d:"M100 50.6a50 50 0 1 1-100 0 50 50 0 0 1 100 0Zm-91 0a41 41 0 1 0 82 0 41 41 0 0 0-82 0Z",fill:"currentColor"}),s.jsx("path",{d:"M94 39a4.2 4.2 0 0 0 3-5.4A50 50 0 0 0 41.7 1.3c-2.4.4-3.9 2.9-3.2 5.3a5 5 0 0 0 5.6 3.5A41 41 0 0 1 88 36 5 5 0 0 0 94 39Z",fill:"currentFill"})]}),s.jsx("span",{className:"sr-only",children:t})]})}function te({type:e,label:t,message:o}){const{icons:r}=Re();return s.jsxs("div",{className:"flex items-center px-4 py-3 w-80 text-sm bg-background border border-input rounded-lg shadow-md m-2",children:[e?s.jsxs("figure",{className:"mr-2",children:[e==="success"&&r?.success?r.success:null,e==="info"&&r?.info?r.info:null,e==="error"&&r?.error?r.error:null,e==="warn"&&r?.warn?r.warn:null,e==="loading"?s.jsx(ee,{size:20}):null]}):null,s.jsxs("div",{className:"space-y-2",children:[s.jsx("p",{className:"font-medium leading-none",children:t}),o?s.jsx("p",{children:o}):null]})]})}function W(){}class Me{notify=W;lastId=0;subscribe=t=>(this.notify=t,()=>{this.notify=W});add=(t,o={})=>{this.lastId+=1;const r=`${this.lastId}`;return this.notify({id:r,type:"add",config:{id:r,label:t,...o}}),r};update=(t,o)=>{this.notify({id:t,type:"update",config:o})};remove=t=>{this.notify({id:t,type:"remove"})};clear=()=>{this.lastId=0}}const L=new Me;function Ne({id:e,type:t,index:o,duration:r=5e3,className:l,children:i,inverted:a,timeout:c=250,max:p=3}){const f=n.useRef(!1),[m,x]=n.useState(!1),{context:h,refs:C}=d.useFloating({open:m,onOpenChange:x,nodeId:e}),{isMounted:y,styles:u}=d.useTransitionStyles(h,{duration:c,initial:{opacity:0,transform:`translateY(${a?"":"-"}50%)`}});n.useLayoutEffect(()=>{x(o<=p)},[o,p]),n.useEffect(()=>{f.current!==y&&(y||L.remove(e),f.current=y)},[y,e]),n.useEffect(()=>{if(!r)return;const w=window.setTimeout(()=>x(!1),r);return()=>window.clearTimeout(w)},[r,e]);const M=n.useCallback(()=>{t!=="loading"&&x(!1)},[t]),j=n.useMemo(()=>g("relative flex w-fit transition-transform ease-in-out cursor-pointer",l),[l]);return y?s.jsx("li",{role:"log",tabIndex:-1,ref:C.setFloating,className:j,style:u,onClick:M,children:i}):null}const ne=n.createContext({});function Re(){return n.useContext(ne)}function ke({className:e,margin:t=16,position:o="top-left",max:r,ListItem:l=te,icons:i}){const a=n.useMemo(()=>{const u={position:"fixed"};return o.indexOf("top")>-1?u.top=t:o.indexOf("bottom")>-1&&(u.bottom=t),o.indexOf("left")>-1?(u.left=t,u.alignItems="flex-start"):o.indexOf("right")>-1?(u.right=t,u.alignItems="flex-end"):(u.left="50%",u.alignItems="center",u.transform="translateX(-50%)"),u},[t,o]),c=n.useMemo(()=>g("flex flex-col z-40 overflow-hidden",e),[e]),p=n.useMemo(()=>o?.startsWith("bottom")||!1,[o]),f=n.useRef(new Map),[m,x]=n.useState([]),h=n.useState(0)[1];q(()=>L.subscribe(u=>{n.startTransition(()=>{if(u.type==="add")f.current.set(u.id,u.config),x(M=>[...M,u.id]);else if(u.type==="remove"){if(!f.current.delete(u.id))return;x(j=>{const w=new Set(j);return w.has(u.id)?(w.delete(u.id),Array.from(w)):j})}else if(u.type==="update"){const M=f.current.get(u.id);if(!M)return;f.current.set(u.id,{...M,...u.config}),h(j=>j+1)}})}),[]);const C=n.useMemo(()=>({icons:i}),[i]),y=m.length;return s.jsx(E,{children:s.jsx("ol",{className:c,style:a,"aria-live":"polite",children:s.jsx(ne.Provider,{value:C,children:m.map((u,M)=>{const j=f.current.get(u);if(!j)return null;const{className:w,duration:v,...S}=j;return s.jsx(Ne,{id:u,index:y-M,className:w,duration:v,inverted:p,max:r,children:n.createElement(l,S)},u)})})})})}function Ie({className:e,...t}){const o=n.useMemo(()=>N("inline-block animate-pulse rounded-md bg-accent",e),[e]);return s.jsx("div",{className:o,...t})}function Fe({className:e,...t}){const o=n.useMemo(()=>g("flex items-center justify-center","[&_button]:rounded-none [&_:first-child]:rounded-bl [&_:first-child]:rounded-tl [&_:last-child]:rounded-br [&_:last-child]:rounded-tr","[&_:first-child]:border-r-0 [&_:last-child]:border-l-0",e),[e]);return s.jsx("div",{role:"group",className:o,...t})}function Se({value:e,max:t,className:o,...r}){const l=n.useMemo(()=>e?Math.round(e/t*100):0,[e,t]),i=n.useMemo(()=>N("relative overflow-hidden rounded-full bg-primary",o),[o]);return s.jsx("div",{role:"progressbar",className:i,"aria-valuemax":t,"aria-valuemin":0,...r,children:s.jsx("div",{className:"h-full w-full flex-1 bg-input transition-all origin-right",style:{transform:`translateX(${l>100?100:l}%)`}})})}function Te({className:e,orientation:t="horizontal",...o}){const r=n.useMemo(()=>N(g("border-0 p-0 shrink-0 bg-input",t==="horizontal"?"h-[1px] w-full":"w-[1px] h-full"),e),[e,t]);return s.jsx("hr",{className:r,role:"none",...o})}exports.clsx=g;exports.Accordion=he;exports.Button=ye;exports.ButtonGroup=Fe;exports.Checkbox=fe;exports.Dialog=we;exports.Divider=Te;exports.FormField=ae;exports.FormLabel=Y;exports.Input=z;exports.InputField=ce;exports.Popover=H;exports.Portal=E;exports.Progress=Se;exports.Radio=xe;exports.Select=be;exports.Sheet=je;exports.Skeleton=Ie;exports.Spinner=ee;exports.Switch=K;exports.Textarea=Z;exports.Toast=ke;exports.ToastItem=te;exports.Tooltip=U;exports.merge=N;exports.toast=L;exports.varientButton=Q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("clsx"),ie=require("tailwind-merge"),s=require("react/jsx-runtime"),n=require("react"),d=require("@floating-ui/react"),le=require("react-dom");function R(e,t){return t?ie.twMerge(e,t):e}function Y({className:e,...t}){const o=n.useMemo(()=>x("leading-none peer-disabled:opacity-70",e),[e]);return s.jsx("label",{className:o,...t})}function ae({label:e,children:t,required:o,htmlFor:r,error:l,help:i,helpBefore:a,className:c,innerClass:m,...f}){const p=n.useMemo(()=>x("font-medium",o?'after:content-["*"] after:text-danger after:text-sm after:pl-0.5':""),[o]),y=n.useMemo(()=>R("flex flex-col space-y-2",c),[c]);return s.jsxs("div",{className:y,...f,children:[e?s.jsx(Y,{className:p,htmlFor:r,children:e}):null,i&&a?s.jsx("p",{className:"text-xs text-muted pb-2",children:i}):null,s.jsx("div",{className:m,children:ue(t,!!l)}),i&&!a&&!l?s.jsx("p",{className:"text-xs text-muted",children:i}):null,l?s.jsx("p",{className:"text-xs text-danger",children:l}):null]})}function ue(e,t){const o=n.Children.count(e);if(!o)return null;if(o===1)return n.cloneElement(e,{error:t});const r=n.Children.toArray(e);return r[0]=n.cloneElement(r[0],{error:t}),r}function ce({error:e,unstyled:t,className:o,...r}){const l=n.useMemo(()=>t?o:R(x("flex rounded-md border bg-background px-3 py-2 w-full [&_input]:placeholder:text-muted","[&_input]:disabled:opacity-50 [&_input]:focus-visible:outline-none",e?"border-danger hover:border-danger-fore":"border-input"),o),[o,e,t]);return s.jsx("div",{className:l,...r})}const z=n.forwardRef(({className:e,type:t,error:o,unstyled:r,...l},i)=>{const a=n.useMemo(()=>r?e:R(x("flex rounded-md border bg-background px-3 py-2 w-full placeholder:text-muted","disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring",o?"border-danger hover:border-danger-fore":"border-input not-disabled:hover:border-input-fore",t==="file"?"file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground":null),e),[e,t,o,r]);return s.jsx("input",{ref:i,type:t,className:a,...l})});z.displayName="Input";const Z=n.forwardRef(({className:e,error:t,unstyled:o,...r},l)=>{const i=n.useMemo(()=>o?e:R(x("flex rounded-md border bg-background px-3 py-2 w-full","disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring",t?"border-danger hover:border-danger-fore":"border-input not-disabled:hover:border-input-fore"),e),[e,t,o]);return s.jsx("textarea",{ref:l,className:i,...r})});Z.displayName="Textarea";function de(){return s.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"30",height:"30",viewBox:"0 0 30 30",children:s.jsx("rect",{width:"20",height:"3",y:"13.5",x:"4.5",fill:"currentColor",stroke:"none",rx:"2"})})}function fe({checked:e,indeterminate:t,className:o,id:r,name:l,onChange:i,value:a,checkIcon:c,...m}){const f=n.useMemo(()=>R(x("inline-flex justify-center items-center border w-4.5 h-4.5 rounded","cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",e||t?"bg-primary text-inverted disabled:text-text disabled:bg-input disabled:border-input":"border-input not-disabled:hover:border-input-fore"),o),[e,t,o]),p=()=>{m.disabled||i?.(!e)};return s.jsxs("button",{type:"button",role:"checkbox",id:r||l,className:f,onClick:p,"aria-checked":e,...m,children:[e?c:null,t&&!e?s.jsx(de,{}):null,s.jsx("input",{type:"checkbox","aria-hidden":"true",name:l,checked:e,value:a,onChange:p,disabled:m.disabled,style:{position:"absolute",pointerEvents:"none",top:0,left:0,width:1,height:1,opacity:0}})]})}const pe=typeof window<"u"&&typeof window.document<"u"&&typeof window.document.createElement<"u",q=pe?n.useLayoutEffect:n.useEffect;function E({children:e,container:t,disabled:o}){const[r,l]=n.useState(null);return q(()=>{if(!t){let i=document.getElementById("visits-style-portals");return i||(i=document.createElement("div"),i.id="visits-style-portals",document.body.appendChild(i)),l(i)}l(t)},[t]),o||!r?null:le.createPortal(e,r)}function $(e){e&&(e.stopPropagation(),e.preventDefault())}const me={open:150,close:75},H=n.forwardRef(({position:e,label:t,children:o,disabled:r,offset:l={x:0,y:6},onOpen:i,onClose:a,onManualClose:c,timeout:m=me,unstyled:f,zIndex:p=9996,role:y,...C},M)=>{const[g,u]=n.useState(!1),j=d.useId(),h=n.useRef(i),w=n.useRef(a),{refs:v,floatingStyles:S,context:T}=d.useFloating({nodeId:j,placement:e,middleware:[d.shift(),d.flip({fallbackAxisSideDirection:"end"}),d.offset({mainAxis:l.y,crossAxis:l.x})],open:g,onOpenChange:N=>{N?h.current?.(v.reference.current,v.floating.current):w.current?.(v.reference.current,v.floating.current),u(N)},whileElementsMounted:d.autoUpdate}),{isMounted:P,styles:O}=d.useTransitionStyles(T,{duration:m,initial({side:N}){let I="";return N==="top"?I="translateY(5%) scale(0.95)":N==="bottom"?I="translateY(-5%) scale(0.95)":N==="left"?I="translateX(5%) scale(0.95)":I="translateX(-5%) scale(0.95)",{opacity:0,transform:I}}}),A=n.useCallback(N=>{if($(N),c)return c();u(!1),w.current?.(v.reference.current,v.floating.current)},[c]);n.useEffect(()=>{if(r&&g)return u(!1)},[r,g]),n.useImperativeHandle(M,()=>({open:()=>{u(!0),h.current?.(v.reference.current,v.floating.current)},close:()=>{u(!1),w.current?.(v.reference.current,v.floating.current)}}),[]);const{getFloatingProps:D,getReferenceProps:_}=d.useInteractions([d.useClick(T,{enabled:!r})]);return h.current=i,w.current=a,s.jsxs(s.Fragment,{children:[n.cloneElement(n.Children.only(t),_({ref:v.setReference,tabIndex:0,role:"button","aria-expanded":g,disabled:r,onClick:$})),s.jsx(E,{disabled:r||!P,children:s.jsx(d.FloatingOverlay,{"data-testid":"vs-popover-shadow",onClick:A,style:{zIndex:p},autoFocus:!0,children:s.jsx("div",{role:y||"region",ref:v.setFloating,style:S,children:s.jsx(G,{unstyled:f,styles:O,...D({...C,onClick:$}),children:o})})})})]})});H.displayName="Popover";const G=n.forwardRef(({className:e,unstyled:t,styles:o,style:r={},...l},i)=>{const a=n.useMemo(()=>R(x("z-20 w-auto h-auto outline-none transition-transform ease-in-out",t?null:"border border-accent rounded-md shadow-lg p-1 bg-background"),e),[e,t]);return s.jsx("div",{ref:i,className:a,style:{...o,...r},...l})});G.displayName="PopoverContent";function be({className:e,placeholder:t="",options:o=[],error:r,unstyled:l,disabled:i,value:a,maxHeight:c=408,arrowIcon:m,closeIcon:f,checkIcon:p,onChange:y,onClear:C,renderItem:M,sectionLabelStyle:g,buttonAreaStyle:u,clearLabelText:j,optionStyle:h,...w}){const v=n.useRef(null),[S,T]=n.useState(0),P=n.useMemo(()=>l?e:R(x("flex items-center justify-between rounded-md border bg-background px-3 py-2 w-full overflow-hidden cursor-pointer","disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring",r?"border-danger hover:border-danger-fore":"border-input not-disabled:hover:border-input-fore"),e),[e,r,l]),O=n.useMemo(()=>Array.isArray(a),[]),A=n.useCallback(b=>{y?.(b),O||v.current?.close()},[y,O]),D=n.useCallback(b=>Array.isArray(a)?a.indexOf(b)>-1:a===b,[a]),_=n.useMemo(()=>{const b={},F=o.filter(k=>typeof k!="string");for(let k=0,B=F.length;k<B;k+=1){const X=F[k];b[`${X.value}`]=X.label}return b},[o]),N=n.useMemo(()=>{if(!a)return t;if(Array.isArray(a)){if(!a.length)return t;const b=[...a].sort(),F=[];for(let k=0,B=b.length;k<B;k+=1)F[k]=_[`${b[k]}`]||"";return F.filter(Boolean).join(",")||t}return _[`${a}`]||t},[t,a,_]),I=N===t,re=n.useMemo(()=>x("overflow-hidden overflow-ellipsis whitespace-nowrap",I?"text-muted":"text-text"),[I]),oe=n.useCallback((b,F)=>M?typeof b=="string"?M(b,{index:F,selected:!1,onChange:()=>{}}):M(b,{index:F,selected:D(b.value),onChange:()=>A(b.value)}):typeof b=="string"?s.jsx("h5",{className:x("font-normal py-1 px-2 text-muted",g),children:b},`optionheader-${F}`):s.jsx(ge,{selected:D(b.value),onChange:A,checkIcon:p,className:h,...b},b.label),[M,A,D,g,h,p]),se=n.useMemo(()=>x("relative flex items-center pr-4 space-x-2",u),[u]);return s.jsx(H,{label:s.jsxs("button",{type:"button",className:P,disabled:i,...w,children:[s.jsx("span",{className:re,children:N}),s.jsxs("div",{className:se,children:[C&&!I?s.jsx("div",{tabIndex:-1,role:"button",className:"size-6 p-1.5 rounded hover:bg-accent cursor-pointer","aria-label":j,onKeyDown:b=>{b.key!=="Enter"&&b.key!=="Space"||C()},onClick:b=>{b.stopPropagation(),C()},children:f}):null,m]})]}),ref:v,onOpen:b=>T(b?.getBoundingClientRect().width||0),disabled:i,children:s.jsx("ul",{className:"overflow-y-auto flex flex-col",role:"listbox",style:{minWidth:S,maxWidth:"calc(100vw - 3rem)",maxHeight:c},children:o.map(oe)})})}function ge({className:e,value:t,label:o,selected:r,checkIcon:l,onChange:i}){const a=n.useMemo(()=>x("flex items-center w-full hover:bg-accent rounded p-1 cursor-pointer",e),[e]);return s.jsxs("button",{type:"button",role:"option",className:a,"aria-selected":r,onClick:()=>i?.(t),children:[r&&l?l:s.jsx("div",{className:"w-5 h-1 mr-1"}),o]})}function xe({checked:e,className:t,id:o,name:r,onChange:l,value:i,...a}){const c=n.useMemo(()=>x("relative inline-flex justify-center items-center border border-input w-4.5 h-4.5 rounded-full","cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed not-disabled:hover:border-input-fore",e?"[&_i]:bg-primary disabled:[&_i]:bg-text disabled:border-input":"",t),[t,e]),m=()=>{a.disabled||l?.(!e)};return s.jsxs("button",{type:"button",role:"radio",id:o||r,className:c,onClick:m,"aria-checked":e,...a,children:[s.jsx("i",{className:"block w-2.5 h-2.5 rounded-full transition-transform",style:{transform:e?"":"scale(0.8)",opacity:e?1:0}}),s.jsx("input",{type:"radio","aria-hidden":"true",name:r,checked:e,value:i,onChange:m,disabled:a.disabled,style:{position:"absolute",pointerEvents:"none",top:0,left:0,width:1,height:1,opacity:0}})]})}const K=n.forwardRef(({className:e,checked:t,onChange:o,value:r,id:l,name:i,...a},c)=>{const m=n.useMemo(()=>R(x("inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50","w-11",t?"bg-primary":"bg-input"),e),[e,t]),f=n.useMemo(()=>R("pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",e),[e]),p=()=>{a.disabled||o?.(!t)};return s.jsxs("button",{type:"button",role:"switch",id:l||i,className:m,onClick:p,"aria-checked":t,...a,children:[s.jsx("span",{className:f,style:{transform:t?"translateX(100%)":""}}),s.jsx("input",{ref:c,type:"checkbox","aria-hidden":"true",name:i,checked:t,value:r,onChange:p,disabled:a.disabled,style:{position:"absolute",pointerEvents:"none",top:0,left:0,width:1,height:1,opacity:0}})]})});K.displayName="Switch";function he({header:e,show:t,children:o,timeout:r=300,...l}){const i=n.useRef(null),a=n.useRef(0),c=n.useRef(0),m=n.useRef(!0);return n.useEffect(()=>{c.current=r},[r]),q(()=>{if(!i.current)return;if(i.current.style.overflow="hidden",i.current.style.opacity="1",m.current){m.current=!1,i.current.style.height=t?"auto":"0px",t?window.requestAnimationFrame(()=>{i.current&&(a.current=i.current.offsetHeight)}):(window.requestAnimationFrame(()=>{i.current&&(i.current.style.height="auto",a.current=i.current.offsetHeight,i.current.style.height="0px")}),i.current.style.opacity="0");return}t||(i.current.style.height=`${a.current}px`);const f=[];f[0]=window.requestAnimationFrame(()=>{f[1]=window.requestAnimationFrame(()=>{i.current&&(i.current.style.height=`${t?a.current:0}px`,i.current.style.opacity=t?"1":"0")})});let p;const y=()=>{i.current&&(t?(i.current.style.height="auto",i.current.style.overflow="",i.current.style.opacity="",window.requestAnimationFrame(()=>{i.current&&(a.current=i.current.offsetHeight)})):i.current.style.height="0px")};return c.current===0?y():p=window.setTimeout(y,c.current),()=>{f.forEach(window.cancelAnimationFrame),p&&window.clearTimeout(p)}},[t]),s.jsxs("div",{...l,children:[e,s.jsx("div",{className:"transition-all ease-in-out overflow-hidden",role:"region","aria-hidden":!t,ref:i,style:{transitionDuration:`${r}ms`},children:o})]})}const U=n.forwardRef(({children:e,position:t="bottom",label:o,className:r,timeout:l=150,offset:i={x:0,y:6},clientPoint:a=!1,disabled:c},m)=>{const[f,p]=n.useState(!1),y=d.useId(),{refs:C,floatingStyles:M,context:g}=d.useFloating({nodeId:y,open:f,placement:t,middleware:[d.shift(),d.flip(),d.offset({mainAxis:i.y,crossAxis:i.x})],whileElementsMounted:c?void 0:d.autoUpdate,onOpenChange:p}),{getReferenceProps:u,getFloatingProps:j}=d.useInteractions([d.useHover(g,{enabled:!c}),d.useClientPoint(g,{enabled:a})]),{isMounted:h,styles:w}=d.useTransitionStyles(g,{duration:l,initial:{opacity:0,transform:"scale(0.8)"}});n.useImperativeHandle(m,()=>({floating:C.floating,reference:C.reference,open:()=>p(!0),close:()=>p(!1)})),n.useEffect(()=>{c&&p(!1)},[c]);const v=typeof e=="string"?s.jsx("span",{children:e}):e;return s.jsxs(s.Fragment,{children:[n.cloneElement(n.Children.only(v),{ref:C.setReference,...u()}),s.jsx(E,{disabled:c||!h,children:s.jsx("div",{role:"tooltip",className:"z-[9999]",ref:C.setFloating,...j({style:M}),children:s.jsx(J,{className:r,style:w,children:o})})})]})});U.displayName="Tooltip";const J=n.forwardRef(({className:e,custom:t,...o},r)=>{const l=n.useMemo(()=>R(x("relative w-auto h-auto outline-none transition-transform ease-in-out whitespace-pre",t?null:"border border-accent rounded shadow-md px-3 py-1 bg-background"),e),[e,t]);return s.jsx("div",{ref:r,className:l,...o})});J.displayName="TooltipContent";function Q({variant:e,size:t}){return x("inline-flex items-center justify-center whitespace-nowrap transition-colors rounded-md cursor-pointer","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring","disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-auto",{"bg-primary text-inverted hover:bg-primary-fore":!e||e==="primary","bg-info text-inverted hover:bg-info-fore":e==="info","bg-warn text-inverted hover:bg-warn-fore":e==="warn","bg-danger text-inverted hover:bg-danger-fore":e==="danger","hover:bg-accent":e==="ghost","hover:underline":e==="link","border border-input hover:bg-accent":e==="outline"},{"px-2 py-1":!t,"p-1.5":t==="icon"})}function ye({size:e,variant:t,className:o,...r}){const l=n.useMemo(()=>x(Q({size:e,variant:t}),o),[e,t,o]);return s.jsx("button",{className:l,type:"button",...r})}function we({open:e,children:t,timeout:o=150,padding:r="0.85rem",verticalAlign:l="center",closeOnOverlay:i,closeOnEsc:a,onExited:c,className:m,onOpenChange:f,size:p,...y}){const C=n.useRef(c),M=n.useRef(!1),g=d.useId(),{refs:u,context:j}=d.useFloating({open:e,onOpenChange:f,nodeId:g}),{getFloatingProps:h}=d.useInteractions([d.useDismiss(j,{enabled:a,escapeKey:a,outsidePress:!1})]),{isMounted:w,styles:v}=d.useTransitionStyles(j,{duration:o,initial:{opacity:0,transform:"scale(0.8)"}});n.useEffect(()=>{M.current!==w&&(M.current=w,!w&&C.current?.())},[w]);const S=n.useCallback(()=>{i&&f?.(!1)},[f,i]);C.current=c;const T=n.useMemo(()=>x("grid bg-backdrop z-40 justify-items-center",{"place-items-start items-start":l==="start","place-items-end":l==="end","place-items-center":l==="center"||!l}),[l]),P=n.useMemo(()=>R("transition ease-in-out",m),[m]);return s.jsx(E,{disabled:!w,children:s.jsx(d.FloatingOverlay,{className:T,"data-testid":"vs-dialog-overlay",onClick:S,style:{padding:r,opacity:v.opacity},lockScroll:!0,children:s.jsx(V,{ref:u.setFloating,className:P,role:"dialog",size:p,style:v,onClick:$,...h({...y}),children:t})})})}const V=n.forwardRef(({size:e,className:t,...o},r)=>{const l=n.useMemo(()=>x(e?"flex flex-col bg-background shadow-lg p-5 rounded":null,{"w-full max-w-dialog-sm":e==="small","w-full max-w-dialog-md":e==="medium","w-full max-w-dialog-lg":e==="large"},t),[e,t]);return s.jsx("div",{ref:r,className:l,...o})});V.displayName="DialogContent";const ve={open:250,close:150};function je({open:e,timeout:t=ve,onOpenChange:o,position:r="right",overlay:l,onExited:i,onOpen:a,...c}){const m=d.useId(),f=n.useRef(!1),p=n.useRef(a),y=n.useRef(i),{refs:C,context:M}=d.useFloating({open:e,onOpenChange:o,nodeId:m}),{isMounted:g,styles:u}=d.useTransitionStyles(M,{duration:t,initial(){let h="translateX(75%)";return r==="left"?h="translateX(-75%)":r==="top"?h="translateY(-75%)":r==="bottom"&&(h="translateY(75%)"),{opacity:0,transform:h}}});n.useEffect(()=>{if(f.current!==g){if(f.current=g,g){p.current?.();return}y.current?.()}},[g]);const j=n.useMemo(()=>x("fixed transition-transform z-30",{"top-0 right-0 h-full max-h-screen":r==="right","top-0 left-0 h-full max-h-screen":r==="left","top-0 left-0 right-0 w-full max-w-screen":r==="top","bottom-0 left-0 right-0 w-full max-w-screen":r==="bottom"}),[r]);return y.current=i,p.current=a,s.jsxs(E,{disabled:!g,children:[l?s.jsx(d.FloatingOverlay,{className:"bg-backdrop",style:{opacity:u.opacity},onClick:()=>o?.(!1)}):null,s.jsx("div",{ref:C.setFloating,className:j,role:"dialog",style:u,children:s.jsx(Ce,{...c})})]})}function Ce({className:e,unstyled:t,...o}){const r=n.useMemo(()=>t?e:R(x("relative bg-background min-w-full min-h-full border border-input shadow-lg"),e),[t,e]);return s.jsx("div",{className:r,...o})}function ee({size:e=20,label:t="Loading...",...o}){return s.jsxs("div",{role:"status",...o,children:[s.jsxs("svg",{"aria-hidden":"true",className:"text-accent animate-spin fill-primary",width:e,height:e,viewBox:"0 0 100 101",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[s.jsx("path",{d:"M100 50.6a50 50 0 1 1-100 0 50 50 0 0 1 100 0Zm-91 0a41 41 0 1 0 82 0 41 41 0 0 0-82 0Z",fill:"currentColor"}),s.jsx("path",{d:"M94 39a4.2 4.2 0 0 0 3-5.4A50 50 0 0 0 41.7 1.3c-2.4.4-3.9 2.9-3.2 5.3a5 5 0 0 0 5.6 3.5A41 41 0 0 1 88 36 5 5 0 0 0 94 39Z",fill:"currentFill"})]}),s.jsx("span",{className:"sr-only",children:t})]})}function te({type:e,label:t,message:o}){const{icons:r}=Ne();return s.jsxs("div",{className:"flex items-center px-4 py-3 w-80 text-sm bg-background border border-input rounded-lg shadow-md m-2",children:[e?s.jsxs("figure",{className:"mr-2",children:[e==="success"&&r?.success?r.success:null,e==="info"&&r?.info?r.info:null,e==="error"&&r?.error?r.error:null,e==="warn"&&r?.warn?r.warn:null,e==="loading"?s.jsx(ee,{size:20}):null]}):null,s.jsxs("div",{className:"space-y-2",children:[s.jsx("p",{className:"font-medium leading-none",children:t}),o?s.jsx("p",{children:o}):null]})]})}function W(){}class Me{notify=W;lastId=0;subscribe=t=>(this.notify=t,()=>{this.notify=W});add=(t,o={})=>{this.lastId+=1;const r=`${this.lastId}`;return this.notify({id:r,type:"add",config:{id:r,label:t,...o}}),r};update=(t,o)=>{this.notify({id:t,type:"update",config:o})};remove=t=>{this.notify({id:t,type:"remove"})};clear=()=>{this.lastId=0}}const L=new Me;function Re({id:e,type:t,index:o,duration:r=5e3,className:l,children:i,inverted:a,timeout:c=250,max:m=3}){const f=n.useRef(!1),[p,y]=n.useState(!1),{context:C,refs:M}=d.useFloating({open:p,onOpenChange:y,nodeId:e}),{isMounted:g,styles:u}=d.useTransitionStyles(C,{duration:c,initial:{opacity:0,transform:`translateY(${a?"":"-"}50%)`}});n.useLayoutEffect(()=>{y(o<=m)},[o,m]),n.useEffect(()=>{f.current!==g&&(g||L.remove(e),f.current=g)},[g,e]),n.useEffect(()=>{if(!r)return;const w=window.setTimeout(()=>y(!1),r);return()=>window.clearTimeout(w)},[r,e]);const j=n.useCallback(()=>{t!=="loading"&&y(!1)},[t]),h=n.useMemo(()=>x("relative flex w-fit transition-transform ease-in-out cursor-pointer",l),[l]);return g?s.jsx("li",{role:"log",tabIndex:-1,ref:M.setFloating,className:h,style:u,onClick:j,children:i}):null}const ne=n.createContext({});function Ne(){return n.useContext(ne)}function ke({className:e,margin:t=16,position:o="top-left",max:r,ListItem:l=te,icons:i}){const a=n.useMemo(()=>{const u={position:"fixed"};return o.indexOf("top")>-1?u.top=t:o.indexOf("bottom")>-1&&(u.bottom=t),o.indexOf("left")>-1?(u.left=t,u.alignItems="flex-start"):o.indexOf("right")>-1?(u.right=t,u.alignItems="flex-end"):(u.left="50%",u.alignItems="center",u.transform="translateX(-50%)"),u},[t,o]),c=n.useMemo(()=>x("flex flex-col z-40 overflow-hidden",e),[e]),m=n.useMemo(()=>o?.startsWith("bottom")||!1,[o]),f=n.useRef(new Map),[p,y]=n.useState([]),C=n.useState(0)[1];q(()=>L.subscribe(u=>{n.startTransition(()=>{if(u.type==="add")f.current.set(u.id,u.config),y(j=>[...j,u.id]);else if(u.type==="remove"){if(!f.current.delete(u.id))return;y(h=>{const w=new Set(h);return w.has(u.id)?(w.delete(u.id),Array.from(w)):h})}else if(u.type==="update"){const j=f.current.get(u.id);if(!j)return;f.current.set(u.id,{...j,...u.config}),C(h=>h+1)}})}),[]);const M=n.useMemo(()=>({icons:i}),[i]),g=p.length;return s.jsx(E,{children:s.jsx("ol",{className:c,style:a,"aria-live":"polite",children:s.jsx(ne.Provider,{value:M,children:p.map((u,j)=>{const h=f.current.get(u);if(!h)return null;const{className:w,duration:v,...S}=h;return s.jsx(Re,{id:u,index:g-j,className:w,duration:v,inverted:m,max:r,children:n.createElement(l,S)},u)})})})})}function Ie({className:e,...t}){const o=n.useMemo(()=>R("inline-block animate-pulse rounded-md bg-accent",e),[e]);return s.jsx("div",{className:o,...t})}function Fe({className:e,...t}){const o=n.useMemo(()=>x("flex items-center justify-center","[&_button]:rounded-none [&_:first-child]:rounded-bl [&_:first-child]:rounded-tl [&_:last-child]:rounded-br [&_:last-child]:rounded-tr","[&_:first-child]:border-r-0 [&_:last-child]:border-l-0",e),[e]);return s.jsx("div",{role:"group",className:o,...t})}function Se({value:e,max:t,className:o,...r}){const l=n.useMemo(()=>e?Math.round(e/t*100):0,[e,t]),i=n.useMemo(()=>R("relative overflow-hidden rounded-full bg-primary",o),[o]);return s.jsx("div",{role:"progressbar",className:i,"aria-valuemax":t,"aria-valuemin":0,...r,children:s.jsx("div",{className:"h-full w-full flex-1 bg-input transition-all origin-right",style:{transform:`translateX(${l>100?100:l}%)`}})})}function Te({className:e,orientation:t="horizontal",...o}){const r=n.useMemo(()=>R(x("border-0 p-0 shrink-0 bg-input",t==="horizontal"?"h-[1px] w-full":"w-[1px] h-full"),e),[e,t]);return s.jsx("hr",{className:r,role:"none",...o})}exports.clsx=x;exports.Accordion=he;exports.Button=ye;exports.ButtonGroup=Fe;exports.Checkbox=fe;exports.Dialog=we;exports.Divider=Te;exports.FormField=ae;exports.FormLabel=Y;exports.Input=z;exports.InputField=ce;exports.Popover=H;exports.Portal=E;exports.Progress=Se;exports.Radio=xe;exports.Select=be;exports.Sheet=je;exports.Skeleton=Ie;exports.Spinner=ee;exports.Switch=K;exports.Textarea=Z;exports.Toast=ke;exports.ToastItem=te;exports.Tooltip=U;exports.merge=R;exports.toast=L;exports.varientButton=Q;

package/dist/index.d.ts

@@ -278,7 +278,7 @@ export declare interface SelectProps<T> extends Omit<ButtonHTMLAttributes<HTMLBu
     clearLabelText?: string;
 }
 
-export declare function Sheet({ open, timeout, onOpenChange, position, overlay, onExited, ...rest }: SheetProps): JSX.Element;
+export declare function Sheet({ open, timeout, onOpenChange, position, overlay, onExited, onOpen, ...rest }: SheetProps): JSX.Element;
 
 export declare interface SheetProps extends HTMLAttributes<HTMLDivElement> {
     /** trueの場合、モーダルを表示します。 */
@@ -291,8 +291,9 @@ export declare interface SheetProps extends HTMLAttributes<HTMLDivElement> {
         open: number;
         close: number;
     };
-    /** モーダルのtransition exitが完了した時に発火されるcallback */
     onOpenChange?: (open: boolean) => void;
+    /** 開けた場合のコールバック */
+    onOpen?: () => void;
     /** モーダルのtransition exitが完了した時に発火されるcallback */
     onExited?: () => void;
     overlay?: boolean;

package/dist/index.es.js

@@ -1,15 +1,15 @@
-import m from "clsx";
+import h from "clsx";
 import { default as pt } from "clsx";
 import { twMerge as he } from "tailwind-merge";
 import { jsx as i, jsxs as k, Fragment as te } from "react/jsx-runtime";
-import { useMemo as c, Children as z, cloneElement as Z, forwardRef as S, useLayoutEffect as ne, useEffect as R, useState as E, useRef as F, useCallback as O, useImperativeHandle as re, startTransition as ye, createContext as xe, createElement as we, useContext as ve } from "react";
+import { useMemo as c, Children as z, cloneElement as Z, forwardRef as S, useLayoutEffect as ne, useEffect as M, useState as E, useRef as F, useCallback as j, useImperativeHandle as re, startTransition as ye, createContext as xe, createElement as we, useContext as ve } from "react";
 import { useId as K, useFloating as H, autoUpdate as oe, shift as ie, flip as se, offset as le, useTransitionStyles as L, useInteractions as U, useClick as Ce, FloatingOverlay as J, useHover as Ne, useClientPoint as ke, useDismiss as Ie } from "@floating-ui/react";
 import { createPortal as Fe } from "react-dom";
 function I(e, t) {
   return t ? he(e, t) : e;
 }
 function Te({ className: e, ...t }) {
-  const r = c(() => m("leading-none peer-disabled:opacity-70", e), [e]);
+  const r = c(() => h("leading-none peer-disabled:opacity-70", e), [e]);
   return /* @__PURE__ */ i("label", { className: r, ...t });
 }
 function Je({
@@ -21,17 +21,17 @@ function Je({
   help: o,
   helpBefore: l,
   className: u,
-  innerClass: f,
+  innerClass: p,
   ...d
 }) {
-  const p = c(() => m(
+  const f = c(() => h(
     "font-medium",
     r ? 'after:content-["*"] after:text-danger after:text-sm after:pl-0.5' : ""
-  ), [r]), g = c(() => I("flex flex-col space-y-2", u), [u]);
-  return /* @__PURE__ */ k("div", { className: g, ...d, children: [
-    e ? /* @__PURE__ */ i(Te, { className: p, htmlFor: n, children: e }) : null,
+  ), [r]), y = c(() => I("flex flex-col space-y-2", u), [u]);
+  return /* @__PURE__ */ k("div", { className: y, ...d, children: [
+    e ? /* @__PURE__ */ i(Te, { className: f, htmlFor: n, children: e }) : null,
     o && l ? /* @__PURE__ */ i("p", { className: "text-xs text-muted pb-2", children: o }) : null,
-    /* @__PURE__ */ i("div", { className: f, children: Pe(t, !!s) }),
+    /* @__PURE__ */ i("div", { className: p, children: Pe(t, !!s) }),
     o && !l && !s ? /* @__PURE__ */ i("p", { className: "text-xs text-muted", children: o }) : null,
     s ? /* @__PURE__ */ i("p", { className: "text-xs text-danger", children: s }) : null
   ] });
@@ -45,21 +45,21 @@ function Pe(e, t) {
   return n[0] = Z(n[0], { error: t }), n;
 }
 function Qe({ error: e, unstyled: t, className: r, ...n }) {
-  const s = c(() => t ? r : I(m(
+  const s = c(() => t ? r : I(h(
     "flex rounded-md border bg-background px-3 py-2 w-full [&_input]:placeholder:text-muted",
     "[&_input]:disabled:opacity-50 [&_input]:focus-visible:outline-none",
     e ? "border-danger hover:border-danger-fore" : "border-input"
   ), r), [r, e, t]);
   return /* @__PURE__ */ i("div", { className: s, ...n });
 }
-const Ae = S(({
+const Re = S(({
   className: e,
   type: t,
   error: r,
   unstyled: n,
   ...s
 }, o) => {
-  const l = c(() => n ? e : I(m(
+  const l = c(() => n ? e : I(h(
     "flex rounded-md border bg-background px-3 py-2 w-full placeholder:text-muted",
     "disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring",
     r ? "border-danger hover:border-danger-fore" : "border-input not-disabled:hover:border-input-fore",
@@ -67,22 +67,22 @@ const Ae = S(({
   ), e), [e, t, r, n]);
   return /* @__PURE__ */ i("input", { ref: o, type: t, className: l, ...s });
 });
-Ae.displayName = "Input";
-const Me = S(({
+Re.displayName = "Input";
+const Ae = S(({
   className: e,
   error: t,
   unstyled: r,
   ...n
 }, s) => {
-  const o = c(() => r ? e : I(m(
+  const o = c(() => r ? e : I(h(
     "flex rounded-md border bg-background px-3 py-2 w-full",
     "disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring",
     t ? "border-danger hover:border-danger-fore" : "border-input not-disabled:hover:border-input-fore"
   ), e), [e, t, r]);
   return /* @__PURE__ */ i("textarea", { ref: s, className: o, ...n });
 });
-Me.displayName = "Textarea";
-function Re() {
+Ae.displayName = "Textarea";
+function Me() {
   return /* @__PURE__ */ i("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", children: /* @__PURE__ */ i("rect", { width: "20", height: "3", y: "13.5", x: "4.5", fill: "currentColor", stroke: "none", rx: "2" }) });
 }
 function Ve({
@@ -94,14 +94,14 @@ function Ve({
   onChange: o,
   value: l,
   checkIcon: u,
-  ...f
+  ...p
 }) {
-  const d = c(() => I(m(
+  const d = c(() => I(h(
     "inline-flex justify-center items-center border w-4.5 h-4.5 rounded",
     "cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
     e || t ? "bg-primary text-inverted disabled:text-text disabled:bg-input disabled:border-input" : "border-input not-disabled:hover:border-input-fore"
-  ), r), [e, t, r]), p = () => {
-    f.disabled || o?.(!e);
+  ), r), [e, t, r]), f = () => {
+    p.disabled || o?.(!e);
   };
   return /* @__PURE__ */ k(
     "button",
@@ -110,12 +110,12 @@ function Ve({
       role: "checkbox",
       id: n || s,
       className: d,
-      onClick: p,
+      onClick: f,
       "aria-checked": e,
-      ...f,
+      ...p,
       children: [
         e ? u : null,
-        t && !e ? /* @__PURE__ */ i(Re, {}) : null,
+        t && !e ? /* @__PURE__ */ i(Me, {}) : null,
         /* @__PURE__ */ i(
           "input",
           {
@@ -124,8 +124,8 @@ function Ve({
             name: s,
             checked: e,
             value: l,
-            onChange: p,
-            disabled: f.disabled,
+            onChange: f,
+            disabled: p.disabled,
             style: { position: "absolute", pointerEvents: "none", top: 0, left: 0, width: 1, height: 1, opacity: 0 }
           }
         )
@@ -133,7 +133,7 @@ function Ve({
     }
   );
 }
-const Se = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u", Q = Se ? ne : R;
+const Se = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u", Q = Se ? ne : M;
 function W({ children: e, container: t, disabled: r }) {
   const [n, s] = E(null);
   return Q(() => {
@@ -156,40 +156,40 @@ const _e = { open: 150, close: 75 }, ae = S(({
   onOpen: o,
   onClose: l,
   onManualClose: u,
-  timeout: f = _e,
+  timeout: p = _e,
   unstyled: d,
-  zIndex: p = 9996,
-  role: g,
-  ...h
-}, C) => {
-  const [y, a] = E(!1), N = K(), v = F(o), x = F(l), { refs: w, floatingStyles: _, context: D } = H({
-    nodeId: N,
+  zIndex: f = 9996,
+  role: y,
+  ...C
+}, N) => {
+  const [m, a] = E(!1), v = K(), g = F(o), x = F(l), { refs: w, floatingStyles: _, context: D } = H({
+    nodeId: v,
     placement: e,
     middleware: [
       ie(),
       se({ fallbackAxisSideDirection: "end" }),
       le({ mainAxis: s.y, crossAxis: s.x })
     ],
-    open: y,
+    open: m,
     onOpenChange: (T) => {
-      T ? v.current?.(w.reference.current, w.floating.current) : x.current?.(w.reference.current, w.floating.current), a(T);
+      T ? g.current?.(w.reference.current, w.floating.current) : x.current?.(w.reference.current, w.floating.current), a(T);
     },
     whileElementsMounted: oe
-  }), { isMounted: j, styles: Y } = L(D, {
-    duration: f,
+  }), { isMounted: O, styles: Y } = L(D, {
+    duration: p,
     initial({ side: T }) {
-      let A = "";
-      return T === "top" ? A = "translateY(5%) scale(0.95)" : T === "bottom" ? A = "translateY(-5%) scale(0.95)" : T === "left" ? A = "translateX(5%) scale(0.95)" : A = "translateX(-5%) scale(0.95)", { opacity: 0, transform: A };
+      let R = "";
+      return T === "top" ? R = "translateY(5%) scale(0.95)" : T === "bottom" ? R = "translateY(-5%) scale(0.95)" : T === "left" ? R = "translateX(5%) scale(0.95)" : R = "translateX(-5%) scale(0.95)", { opacity: 0, transform: R };
     }
-  }), $ = O((T) => {
+  }), $ = j((T) => {
     if (q(T), u) return u();
     a(!1), x.current?.(w.reference.current, w.floating.current);
   }, [u]);
-  R(() => {
-    if (n && y) return a(!1);
-  }, [n, y]), re(C, () => ({
+  M(() => {
+    if (n && m) return a(!1);
+  }, [n, m]), re(N, () => ({
     open: () => {
-      a(!0), v.current?.(w.reference.current, w.floating.current);
+      a(!0), g.current?.(w.reference.current, w.floating.current);
     },
     close: () => {
       a(!1), x.current?.(w.reference.current, w.floating.current);
@@ -199,28 +199,28 @@ const _e = { open: 150, close: 75 }, ae = S(({
   const { getFloatingProps: B, getReferenceProps: X } = U([
     Ce(D, { enabled: !n })
   ]);
-  return v.current = o, x.current = l, /* @__PURE__ */ k(te, { children: [
+  return g.current = o, x.current = l, /* @__PURE__ */ k(te, { children: [
     Z(z.only(t), X({
       ref: w.setReference,
       tabIndex: 0,
       role: "button",
-      "aria-expanded": y,
+      "aria-expanded": m,
       disabled: n,
       onClick: q
     })),
-    /* @__PURE__ */ i(W, { disabled: n || !j, children: /* @__PURE__ */ i(
+    /* @__PURE__ */ i(W, { disabled: n || !O, children: /* @__PURE__ */ i(
       J,
       {
         "data-testid": "vs-popover-shadow",
         onClick: $,
-        style: { zIndex: p },
+        style: { zIndex: f },
         autoFocus: !0,
-        children: /* @__PURE__ */ i("div", { role: g || "region", ref: w.setFloating, style: _, children: /* @__PURE__ */ i(
+        children: /* @__PURE__ */ i("div", { role: y || "region", ref: w.setFloating, style: _, children: /* @__PURE__ */ i(
           ce,
           {
             unstyled: d,
             styles: Y,
-            ...B({ ...h, onClick: q }),
+            ...B({ ...C, onClick: q }),
             children: r
           }
         ) })
@@ -236,7 +236,7 @@ const ce = S(({
   style: n = {},
   ...s
 }, o) => {
-  const l = c(() => I(m(
+  const l = c(() => I(h(
     "z-20 w-auto h-auto outline-none transition-transform ease-in-out",
     t ? null : "border border-accent rounded-md shadow-lg p-1 bg-background"
   ), e), [e, t]);
@@ -252,28 +252,28 @@ function et({
   disabled: o,
   value: l,
   maxHeight: u = 408,
-  arrowIcon: f,
+  arrowIcon: p,
   closeIcon: d,
-  checkIcon: p,
-  onChange: g,
-  onClear: h,
-  renderItem: C,
-  sectionLabelStyle: y,
+  checkIcon: f,
+  onChange: y,
+  onClear: C,
+  renderItem: N,
+  sectionLabelStyle: m,
   buttonAreaStyle: a,
-  clearLabelText: N,
-  optionStyle: v,
+  clearLabelText: v,
+  optionStyle: g,
   ...x
 }) {
-  const w = F(null), [_, D] = E(0), j = c(() => s ? e : I(m(
+  const w = F(null), [_, D] = E(0), O = c(() => s ? e : I(h(
     "flex items-center justify-between rounded-md border bg-background px-3 py-2 w-full overflow-hidden cursor-pointer",
     "disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring",
     n ? "border-danger hover:border-danger-fore" : "border-input not-disabled:hover:border-input-fore"
-  ), e), [e, n, s]), Y = c(() => Array.isArray(l), []), $ = O((b) => {
-    g?.(b), Y || w.current?.close();
-  }, [g, Y]), B = O((b) => Array.isArray(l) ? l.indexOf(b) > -1 : l === b, [l]), X = c(() => {
-    const b = {}, M = r.filter((P) => typeof P != "string");
-    for (let P = 0, G = M.length; P < G; P += 1) {
-      const V = M[P];
+  ), e), [e, n, s]), Y = c(() => Array.isArray(l), []), $ = j((b) => {
+    y?.(b), Y || w.current?.close();
+  }, [y, Y]), B = j((b) => Array.isArray(l) ? l.indexOf(b) > -1 : l === b, [l]), X = c(() => {
+    const b = {}, A = r.filter((P) => typeof P != "string");
+    for (let P = 0, G = A.length; P < G; P += 1) {
+      const V = A[P];
       b[`${V.value}`] = V.label;
     }
     return b;
@@ -281,64 +281,64 @@ function et({
     if (!l) return t;
     if (Array.isArray(l)) {
       if (!l.length) return t;
-      const b = [...l].sort(), M = [];
+      const b = [...l].sort(), A = [];
       for (let P = 0, G = b.length; P < G; P += 1)
-        M[P] = X[`${b[P]}`] || "";
-      return M.filter(Boolean).join(",") || t;
+        A[P] = X[`${b[P]}`] || "";
+      return A.filter(Boolean).join(",") || t;
     }
     return X[`${l}`] || t;
-  }, [t, l, X]), A = T === t, be = c(() => m(
+  }, [t, l, X]), R = T === t, be = c(() => h(
     "overflow-hidden overflow-ellipsis whitespace-nowrap",
-    A ? "text-muted" : "text-text"
-  ), [A]), me = O((b, M) => C ? typeof b == "string" ? C(b, { index: M, selected: !1, onChange: () => {
-  } }) : C(b, {
-    index: M,
+    R ? "text-muted" : "text-text"
+  ), [R]), me = j((b, A) => N ? typeof b == "string" ? N(b, { index: A, selected: !1, onChange: () => {
+  } }) : N(b, {
+    index: A,
     selected: B(b.value),
     onChange: () => $(b.value)
   }) : typeof b == "string" ? /* @__PURE__ */ i(
     "h5",
     {
-      className: m("font-normal py-1 px-2 text-muted", y),
+      className: h("font-normal py-1 px-2 text-muted", m),
       children: b
     },
-    `optionheader-${M}`
+    `optionheader-${A}`
   ) : /* @__PURE__ */ i(
     Ee,
     {
       selected: B(b.value),
       onChange: $,
-      checkIcon: p,
-      className: v,
+      checkIcon: f,
+      className: g,
       ...b
     },
     b.label
-  ), [C, $, B, y, v, p]), ge = c(() => m(
+  ), [N, $, B, m, g, f]), ge = c(() => h(
     "relative flex items-center pr-4 space-x-2",
     a
   ), [a]);
   return /* @__PURE__ */ i(
     ae,
     {
-      label: /* @__PURE__ */ k("button", { type: "button", className: j, disabled: o, ...x, children: [
+      label: /* @__PURE__ */ k("button", { type: "button", className: O, disabled: o, ...x, children: [
         /* @__PURE__ */ i("span", { className: be, children: T }),
         /* @__PURE__ */ k("div", { className: ge, children: [
-          h && !A ? /* @__PURE__ */ i(
+          C && !R ? /* @__PURE__ */ i(
             "div",
             {
               tabIndex: -1,
               role: "button",
               className: "size-6 p-1.5 rounded hover:bg-accent cursor-pointer",
-              "aria-label": N,
+              "aria-label": v,
               onKeyDown: (b) => {
-                b.key !== "Enter" && b.key !== "Space" || h();
+                b.key !== "Enter" && b.key !== "Space" || C();
               },
               onClick: (b) => {
-                b.stopPropagation(), h();
+                b.stopPropagation(), C();
               },
               children: d
             }
           ) : null,
-          f
+          p
         ] })
       ] }),
       ref: w,
@@ -364,7 +364,7 @@ function Ee({
   checkIcon: s,
   onChange: o
 }) {
-  const l = c(() => m(
+  const l = c(() => h(
     "flex items-center w-full hover:bg-accent rounded p-1 cursor-pointer",
     e
   ), [e]);
@@ -384,12 +384,12 @@ function Ee({
   );
 }
 function tt({ checked: e, className: t, id: r, name: n, onChange: s, value: o, ...l }) {
-  const u = c(() => m(
+  const u = c(() => h(
     "relative inline-flex justify-center items-center border border-input w-4.5 h-4.5 rounded-full",
     "cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed not-disabled:hover:border-input-fore",
     e ? "[&_i]:bg-primary disabled:[&_i]:bg-text disabled:border-input" : "",
     t
-  ), [t, e]), f = () => {
+  ), [t, e]), p = () => {
     l.disabled || s?.(!e);
   };
   return /* @__PURE__ */ k(
@@ -399,7 +399,7 @@ function tt({ checked: e, className: t, id: r, name: n, onChange: s, value: o, .
       role: "radio",
       id: r || n,
       className: u,
-      onClick: f,
+      onClick: p,
       "aria-checked": e,
       ...l,
       children: [
@@ -418,7 +418,7 @@ function tt({ checked: e, className: t, id: r, name: n, onChange: s, value: o, .
             name: n,
             checked: e,
             value: o,
-            onChange: f,
+            onChange: p,
             disabled: l.disabled,
             style: { position: "absolute", pointerEvents: "none", top: 0, left: 0, width: 1, height: 1, opacity: 0 }
           }
@@ -436,7 +436,7 @@ const De = S(({
   name: o,
   ...l
 }, u) => {
-  const f = c(() => I(m(
+  const p = c(() => I(h(
     "inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
     "w-11",
@@ -444,7 +444,7 @@ const De = S(({
   ), e), [e, t]), d = c(() => I(
     "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
     e
-  ), [e]), p = () => {
+  ), [e]), f = () => {
     l.disabled || r?.(!t);
   };
   return /* @__PURE__ */ k(
@@ -453,8 +453,8 @@ const De = S(({
       type: "button",
       role: "switch",
       id: s || o,
-      className: f,
-      onClick: p,
+      className: p,
+      onClick: f,
       "aria-checked": t,
       ...l,
       children: [
@@ -468,7 +468,7 @@ const De = S(({
             name: o,
             checked: t,
             value: n,
-            onChange: p,
+            onChange: f,
             disabled: l.disabled,
             style: { position: "absolute", pointerEvents: "none", top: 0, left: 0, width: 1, height: 1, opacity: 0 }
           }
@@ -479,13 +479,13 @@ const De = S(({
 });
 De.displayName = "Switch";
 function nt({ header: e, show: t, children: r, timeout: n = 300, ...s }) {
-  const o = F(null), l = F(0), u = F(0), f = F(!0);
-  return R(() => {
+  const o = F(null), l = F(0), u = F(0), p = F(!0);
+  return M(() => {
     u.current = n;
   }, [n]), Q(() => {
     if (!o.current) return;
-    if (o.current.style.overflow = "hidden", o.current.style.opacity = "1", f.current) {
-      f.current = !1, o.current.style.height = t ? "auto" : "0px", t ? window.requestAnimationFrame(() => {
+    if (o.current.style.overflow = "hidden", o.current.style.opacity = "1", p.current) {
+      p.current = !1, o.current.style.height = t ? "auto" : "0px", t ? window.requestAnimationFrame(() => {
         o.current && (l.current = o.current.offsetHeight);
       }) : (window.requestAnimationFrame(() => {
         o.current && (o.current.style.height = "auto", l.current = o.current.offsetHeight, o.current.style.height = "0px");
@@ -499,14 +499,14 @@ function nt({ header: e, show: t, children: r, timeout: n = 300, ...s }) {
         o.current && (o.current.style.height = `${t ? l.current : 0}px`, o.current.style.opacity = t ? "1" : "0");
       });
     });
-    let p;
-    const g = () => {
+    let f;
+    const y = () => {
       o.current && (t ? (o.current.style.height = "auto", o.current.style.overflow = "", o.current.style.opacity = "", window.requestAnimationFrame(() => {
         o.current && (l.current = o.current.offsetHeight);
       })) : o.current.style.height = "0px");
     };
-    return u.current === 0 ? g() : p = window.setTimeout(g, u.current), () => {
-      d.forEach(window.cancelAnimationFrame), p && window.clearTimeout(p);
+    return u.current === 0 ? y() : f = window.setTimeout(y, u.current), () => {
+      d.forEach(window.cancelAnimationFrame), f && window.clearTimeout(f);
     };
   }, [t]), /* @__PURE__ */ k("div", { ...s, children: [
     e,
@@ -523,7 +523,7 @@ function nt({ header: e, show: t, children: r, timeout: n = 300, ...s }) {
     )
   ] });
 }
-const Oe = S(({
+const je = S(({
   children: e,
   position: t = "bottom",
   label: r,
@@ -532,9 +532,9 @@ const Oe = S(({
   offset: o = { x: 0, y: 6 },
   clientPoint: l = !1,
   disabled: u
-}, f) => {
-  const [d, p] = E(!1), g = K(), { refs: h, floatingStyles: C, context: y } = H({
-    nodeId: g,
+}, p) => {
+  const [d, f] = E(!1), y = K(), { refs: C, floatingStyles: N, context: m } = H({
+    nodeId: y,
     open: d,
     placement: t,
     middleware: [
@@ -543,46 +543,46 @@ const Oe = S(({
       le({ mainAxis: o.y, crossAxis: o.x })
     ],
     whileElementsMounted: u ? void 0 : oe,
-    onOpenChange: p
-  }), { getReferenceProps: a, getFloatingProps: N } = U([
-    Ne(y, { enabled: !u }),
-    ke(y, { enabled: l })
-  ]), { isMounted: v, styles: x } = L(y, {
+    onOpenChange: f
+  }), { getReferenceProps: a, getFloatingProps: v } = U([
+    Ne(m, { enabled: !u }),
+    ke(m, { enabled: l })
+  ]), { isMounted: g, styles: x } = L(m, {
     duration: s,
     initial: { opacity: 0, transform: "scale(0.8)" }
   });
-  re(f, () => ({
-    floating: h.floating,
-    reference: h.reference,
-    open: () => p(!0),
-    close: () => p(!1)
-  })), R(() => {
-    u && p(!1);
+  re(p, () => ({
+    floating: C.floating,
+    reference: C.reference,
+    open: () => f(!0),
+    close: () => f(!1)
+  })), M(() => {
+    u && f(!1);
   }, [u]);
   const w = typeof e == "string" ? /* @__PURE__ */ i("span", { children: e }) : e;
   return /* @__PURE__ */ k(te, { children: [
     Z(z.only(w), {
-      ref: h.setReference,
+      ref: C.setReference,
       ...a()
     }),
-    /* @__PURE__ */ i(W, { disabled: u || !v, children: /* @__PURE__ */ i("div", { role: "tooltip", className: "z-[9999]", ref: h.setFloating, ...N({ style: C }), children: /* @__PURE__ */ i(ue, { className: n, style: x, children: r }) }) })
+    /* @__PURE__ */ i(W, { disabled: u || !g, children: /* @__PURE__ */ i("div", { role: "tooltip", className: "z-[9999]", ref: C.setFloating, ...v({ style: N }), children: /* @__PURE__ */ i(ue, { className: n, style: x, children: r }) }) })
   ] });
 });
-Oe.displayName = "Tooltip";
+je.displayName = "Tooltip";
 const ue = S(({
   className: e,
   custom: t,
   ...r
 }, n) => {
-  const s = c(() => I(m(
+  const s = c(() => I(h(
     "relative w-auto h-auto outline-none transition-transform ease-in-out whitespace-pre",
     t ? null : "border border-accent rounded shadow-md px-3 py-1 bg-background"
   ), e), [e, t]);
   return /* @__PURE__ */ i("div", { ref: n, className: s, ...r });
 });
 ue.displayName = "TooltipContent";
-function je({ variant: e, size: t }) {
-  return m(
+function Oe({ variant: e, size: t }) {
+  return h(
     "inline-flex items-center justify-center whitespace-nowrap transition-colors rounded-md cursor-pointer",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
     "disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-auto",
@@ -602,7 +602,7 @@ function je({ variant: e, size: t }) {
   );
 }
 function rt({ size: e, variant: t, className: r, ...n }) {
-  const s = c(() => m(je({ size: e, variant: t }), r), [e, t, r]);
+  const s = c(() => h(Oe({ size: e, variant: t }), r), [e, t, r]);
   return /* @__PURE__ */ i("button", { className: s, type: "button", ...n });
 }
 function ot({
@@ -614,33 +614,33 @@ function ot({
   closeOnOverlay: o,
   closeOnEsc: l,
   onExited: u,
-  className: f,
+  className: p,
   onOpenChange: d,
-  size: p,
-  ...g
+  size: f,
+  ...y
 }) {
-  const h = F(u), C = F(!1), y = K(), { refs: a, context: N } = H({ open: e, onOpenChange: d, nodeId: y }), { getFloatingProps: v } = U([
-    Ie(N, {
+  const C = F(u), N = F(!1), m = K(), { refs: a, context: v } = H({ open: e, onOpenChange: d, nodeId: m }), { getFloatingProps: g } = U([
+    Ie(v, {
       enabled: l,
       escapeKey: l,
       outsidePress: !1
     })
-  ]), { isMounted: x, styles: w } = L(N, {
+  ]), { isMounted: x, styles: w } = L(v, {
     duration: r,
     initial: { opacity: 0, transform: "scale(0.8)" }
   });
-  R(() => {
-    C.current !== x && (C.current = x, !x && h.current?.());
+  M(() => {
+    N.current !== x && (N.current = x, !x && C.current?.());
   }, [x]);
-  const _ = O(() => {
+  const _ = j(() => {
     o && d?.(!1);
   }, [d, o]);
-  h.current = u;
-  const D = c(() => m("grid bg-backdrop z-40 justify-items-center", {
+  C.current = u;
+  const D = c(() => h("grid bg-backdrop z-40 justify-items-center", {
     "place-items-start items-start": s === "start",
     "place-items-end": s === "end",
     "place-items-center": s === "center" || !s
-  }), [s]), j = c(() => I("transition ease-in-out", f), [f]);
+  }), [s]), O = c(() => I("transition ease-in-out", p), [p]);
   return /* @__PURE__ */ i(W, { disabled: !x, children: /* @__PURE__ */ i(
     J,
     {
@@ -653,12 +653,12 @@ function ot({
         de,
         {
           ref: a.setFloating,
-          className: j,
+          className: O,
           role: "dialog",
-          size: p,
+          size: f,
           style: w,
           onClick: q,
-          ...v({ ...g }),
+          ...g({ ...y }),
           children: t
         }
       )
@@ -670,7 +670,7 @@ const de = S(({
   className: t,
   ...r
 }, n) => {
-  const s = c(() => m(
+  const s = c(() => h(
     e ? "flex flex-col bg-background shadow-lg p-5 rounded" : null,
     {
       "w-full max-w-dialog-sm": e === "small",
@@ -690,19 +690,26 @@ function it({
   position: n = "right",
   overlay: s,
   onExited: o,
-  ...l
+  onOpen: l,
+  ...u
 }) {
-  const u = K(), f = F(!1), d = F(o), { refs: p, context: g } = H({ open: e, onOpenChange: r, nodeId: u }), { isMounted: h, styles: C } = L(g, {
+  const p = K(), d = F(!1), f = F(l), y = F(o), { refs: C, context: N } = H({ open: e, onOpenChange: r, nodeId: p }), { isMounted: m, styles: a } = L(N, {
     duration: t,
     initial() {
-      let a = "translateX(75%)";
-      return n === "left" ? a = "translateX(-75%)" : n === "top" ? a = "translateY(-75%)" : n === "bottom" && (a = "translateY(75%)"), { opacity: 0, transform: a };
+      let g = "translateX(75%)";
+      return n === "left" ? g = "translateX(-75%)" : n === "top" ? g = "translateY(-75%)" : n === "bottom" && (g = "translateY(75%)"), { opacity: 0, transform: g };
     }
   });
-  R(() => {
-    f.current !== h && (f.current = h, !h && d.current?.());
-  }, [h]);
-  const y = c(() => m(
+  M(() => {
+    if (d.current !== m) {
+      if (d.current = m, m) {
+        f.current?.();
+        return;
+      }
+      y.current?.();
+    }
+  }, [m]);
+  const v = c(() => h(
     "fixed transition-transform z-30",
     {
       "top-0 right-0 h-full max-h-screen": n === "right",
@@ -711,29 +718,29 @@ function it({
       "bottom-0 left-0 right-0 w-full max-w-screen": n === "bottom"
     }
   ), [n]);
-  return d.current = o, /* @__PURE__ */ k(W, { disabled: !h, children: [
+  return y.current = o, f.current = l, /* @__PURE__ */ k(W, { disabled: !m, children: [
     s ? /* @__PURE__ */ i(
       J,
       {
         className: "bg-backdrop",
-        style: { opacity: C.opacity },
+        style: { opacity: a.opacity },
         onClick: () => r?.(!1)
       }
     ) : null,
     /* @__PURE__ */ i(
       "div",
       {
-        ref: p.setFloating,
-        className: y,
+        ref: C.setFloating,
+        className: v,
         role: "dialog",
-        style: C,
-        children: /* @__PURE__ */ i(Be, { ...l })
+        style: a,
+        children: /* @__PURE__ */ i(Be, { ...u })
       }
     )
   ] });
 }
 function Be({ className: e, unstyled: t, ...r }) {
-  const n = c(() => t ? e : I(m(
+  const n = c(() => t ? e : I(h(
     "relative bg-background min-w-full min-h-full border border-input shadow-lg"
   ), e), [t, e]);
   return /* @__PURE__ */ i("div", { className: n, ...r });
@@ -799,36 +806,36 @@ function We({
   children: o,
   inverted: l,
   timeout: u = 250,
-  max: f = 3
+  max: p = 3
 }) {
-  const d = F(!1), [p, g] = E(!1), { context: h, refs: C } = H({ open: p, onOpenChange: g, nodeId: e }), { isMounted: y, styles: a } = L(h, {
+  const d = F(!1), [f, y] = E(!1), { context: C, refs: N } = H({ open: f, onOpenChange: y, nodeId: e }), { isMounted: m, styles: a } = L(C, {
     duration: u,
     initial: { opacity: 0, transform: `translateY(${l ? "" : "-"}50%)` }
   });
   ne(() => {
-    g(r <= f);
-  }, [r, f]), R(() => {
-    d.current !== y && (y || fe.remove(e), d.current = y);
-  }, [y, e]), R(() => {
+    y(r <= p);
+  }, [r, p]), M(() => {
+    d.current !== m && (m || fe.remove(e), d.current = m);
+  }, [m, e]), M(() => {
     if (!n) return;
-    const x = window.setTimeout(() => g(!1), n);
+    const x = window.setTimeout(() => y(!1), n);
     return () => window.clearTimeout(x);
   }, [n, e]);
-  const N = O(() => {
-    t !== "loading" && g(!1);
-  }, [t]), v = c(() => m(
+  const v = j(() => {
+    t !== "loading" && y(!1);
+  }, [t]), g = c(() => h(
     "relative flex w-fit transition-transform ease-in-out cursor-pointer",
     s
   ), [s]);
-  return y ? /* @__PURE__ */ i(
+  return m ? /* @__PURE__ */ i(
     "li",
     {
       role: "log",
       tabIndex: -1,
-      ref: C.setFloating,
-      className: v,
+      ref: N.setFloating,
+      className: g,
       style: a,
-      onClick: N,
+      onClick: v,
       children: o
     }
   ) : null;
@@ -848,40 +855,40 @@ function st({
   const l = c(() => {
     const a = { position: "fixed" };
     return r.indexOf("top") > -1 ? a.top = t : r.indexOf("bottom") > -1 && (a.bottom = t), r.indexOf("left") > -1 ? (a.left = t, a.alignItems = "flex-start") : r.indexOf("right") > -1 ? (a.right = t, a.alignItems = "flex-end") : (a.left = "50%", a.alignItems = "center", a.transform = "translateX(-50%)"), a;
-  }, [t, r]), u = c(() => m(
+  }, [t, r]), u = c(() => h(
     "flex flex-col z-40 overflow-hidden",
     e
-  ), [e]), f = c(() => r?.startsWith("bottom") || !1, [r]), d = F(/* @__PURE__ */ new Map()), [p, g] = E([]), h = E(0)[1];
+  ), [e]), p = c(() => r?.startsWith("bottom") || !1, [r]), d = F(/* @__PURE__ */ new Map()), [f, y] = E([]), C = E(0)[1];
   Q(() => fe.subscribe((a) => {
     ye(() => {
       if (a.type === "add")
-        d.current.set(a.id, a.config), g((N) => [...N, a.id]);
+        d.current.set(a.id, a.config), y((v) => [...v, a.id]);
       else if (a.type === "remove") {
         if (!d.current.delete(a.id)) return;
-        g((v) => {
-          const x = new Set(v);
-          return x.has(a.id) ? (x.delete(a.id), Array.from(x)) : v;
+        y((g) => {
+          const x = new Set(g);
+          return x.has(a.id) ? (x.delete(a.id), Array.from(x)) : g;
         });
       } else if (a.type === "update") {
-        const N = d.current.get(a.id);
-        if (!N) return;
-        d.current.set(a.id, { ...N, ...a.config }), h((v) => v + 1);
+        const v = d.current.get(a.id);
+        if (!v) return;
+        d.current.set(a.id, { ...v, ...a.config }), C((g) => g + 1);
       }
     });
   }), []);
-  const C = c(() => ({ icons: o }), [o]), y = p.length;
-  return /* @__PURE__ */ i(W, { children: /* @__PURE__ */ i("ol", { className: u, style: l, "aria-live": "polite", children: /* @__PURE__ */ i(pe.Provider, { value: C, children: p.map((a, N) => {
-    const v = d.current.get(a);
-    if (!v) return null;
-    const { className: x, duration: w, ..._ } = v;
+  const N = c(() => ({ icons: o }), [o]), m = f.length;
+  return /* @__PURE__ */ i(W, { children: /* @__PURE__ */ i("ol", { className: u, style: l, "aria-live": "polite", children: /* @__PURE__ */ i(pe.Provider, { value: N, children: f.map((a, v) => {
+    const g = d.current.get(a);
+    if (!g) return null;
+    const { className: x, duration: w, ..._ } = g;
     return /* @__PURE__ */ i(
       We,
       {
         id: a,
-        index: y - N,
+        index: m - v,
         className: x,
         duration: w,
-        inverted: f,
+        inverted: p,
         max: n,
         children: we(s, _)
       },
@@ -897,7 +904,7 @@ function lt({ className: e, ...t }) {
   return /* @__PURE__ */ i("div", { className: r, ...t });
 }
 function at({ className: e, ...t }) {
-  const r = c(() => m(
+  const r = c(() => h(
     "flex items-center justify-center",
     "[&_button]:rounded-none [&_:first-child]:rounded-bl [&_:first-child]:rounded-tl [&_:last-child]:rounded-br [&_:last-child]:rounded-tr",
     "[&_:first-child]:border-r-0 [&_:last-child]:border-l-0",
@@ -916,7 +923,7 @@ function ct({ value: e, max: t, className: r, ...n }) {
   ) });
 }
 function ut({ className: e, orientation: t = "horizontal", ...r }) {
-  const n = c(() => I(m(
+  const n = c(() => I(h(
     "border-0 p-0 shrink-0 bg-input",
     t === "horizontal" ? "h-[1px] w-full" : "w-[1px] h-full"
   ), e), [e, t]);
@@ -931,7 +938,7 @@ export {
   ut as Divider,
   Je as FormField,
   Te as FormLabel,
-  Ae as Input,
+  Re as Input,
   Qe as InputField,
   ae as Popover,
   W as Portal,
@@ -942,12 +949,12 @@ export {
   lt as Skeleton,
   Xe as Spinner,
   De as Switch,
-  Me as Textarea,
+  Ae as Textarea,
   st as Toast,
   He as ToastItem,
-  Oe as Tooltip,
+  je as Tooltip,
   pt as clsx,
   I as merge,
   fe as toast,
-  je as varientButton
+  Oe as varientButton
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "visits-style",
   "repository": "https://github.com/visits-works/visits-style",
   "homepage": "https://github.com/visits-works/visits-style",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "VISITS Technologiesのreactデザインコンポーネント",
   "type": "module",
   "main": "./dist/index.cjs.js",
@@ -10,9 +10,14 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js",
-      "types": "./dist/index.d.ts"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.es.js"
+      },
+      "default": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs.js"
+      }
     },
     "./lib.css": "./dist/lib.css"
   },
@@ -22,9 +27,9 @@
     "dist"
   ],
   "peerDependencies": {
-    "react": ">19.1.1",
-    "react-dom": ">19.1.1",
-    "tailwindcss": ">4.1.13"
+    "react": "^19",
+    "react-dom": "^19",
+    "tailwindcss": "^4"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.16",