dgz-ui/dist/tabs-Crzu5XkT.cjs

Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript

"use strict";const o=require("./jsx-runtime-h4oGeKUK.cjs"),b=require("react"),h=require("./index-OHKxBzpT.cjs"),J=require("./index-Dyp2JWEo.cjs"),y=require("./index-DUh4Mlc6.cjs"),j=require("./index-9_bM8_1f.cjs"),Q=require("./index-CrR8uNCV.cjs"),w=require("./index-2AoaKL3W.cjs"),U=require("./index-BbFAJcHl.cjs"),N=require("./button-BZdVaLIh.cjs"),X=require("./chevron-left-BkVeYH8m.cjs"),Y=require("./chevron-right-C4aUapAw.cjs"),x=require("./utils-BeXF6FlA.cjs");function Z(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const m=Z(b);var R="Tabs",[ee,oe]=J.createContextScope(R,[y.createRovingFocusGroupScope]),S=y.createRovingFocusGroupScope(),[te,E]=ee(R),L=m.forwardRef((e,t)=>{const{__scopeTabs:n,value:a,onValueChange:i,defaultValue:s,orientation:r="horizontal",dir:d,activationMode:v="automatic",...u}=e,c=Q.useDirection(d),[l,f]=w.useControllableState({prop:a,onChange:i,defaultProp:s??"",caller:R});return o.jsxRuntimeExports.jsx(te,{scope:n,baseId:w.useId(),value:l,onValueChange:f,orientation:r,dir:c,activationMode:v,children:o.jsxRuntimeExports.jsx(j.Primitive.div,{dir:c,"data-orientation":r,...u,ref:t})})});L.displayName=R;var I="TabsList",_=m.forwardRef((e,t)=>{const{__scopeTabs:n,loop:a=!0,...i}=e,s=E(I,n),r=S(n);return o.jsxRuntimeExports.jsx(y.Root,{asChild:!0,...r,orientation:s.orientation,dir:s.dir,loop:a,children:o.jsxRuntimeExports.jsx(j.Primitive.div,{role:"tablist","aria-orientation":s.orientation,...i,ref:t})})});_.displayName=I;var P="TabsTrigger",q=m.forwardRef((e,t)=>{const{__scopeTabs:n,value:a,disabled:i=!1,...s}=e,r=E(P,n),d=S(n),v=k(r.baseId,a),u=M(r.baseId,a),c=a===r.value;return o.jsxRuntimeExports.jsx(y.Item,{asChild:!0,...d,focusable:!i,active:c,children:o.jsxRuntimeExports.jsx(j.Primitive.button,{type:"button",role:"tab","aria-selected":c,"aria-controls":u,"data-state":c?"active":"inactive","data-disabled":i?"":void 0,disabled:i,id:v,...s,ref:t,onMouseDown:h.composeEventHandlers(e.onMouseDown,l=>{!i&&l.button===0&&l.ctrlKey===!1?r.onValueChange(a):l.preventDefault()}),onKeyDown:h.composeEventHandlers(e.onKeyDown,l=>{[" ","Enter"].includes(l.key)&&r.onValueChange(a)}),onFocus:h.composeEventHandlers(e.onFocus,()=>{const l=r.activationMode!=="manual";!c&&!i&&l&&r.onValueChange(a)})})})});q.displayName=P;var $="TabsContent",A=m.forwardRef((e,t)=>{const{__scopeTabs:n,value:a,forceMount:i,children:s,...r}=e,d=E($,n),v=k(d.baseId,a),u=M(d.baseId,a),c=a===d.value,l=m.useRef(c);return m.useEffect(()=>{const f=requestAnimationFrame(()=>l.current=!1);return()=>cancelAnimationFrame(f)},[]),o.jsxRuntimeExports.jsx(h.Presence,{present:i||c,children:({present:f})=>o.jsxRuntimeExports.jsx(j.Primitive.div,{"data-state":c?"active":"inactive","data-orientation":d.orientation,role:"tabpanel","aria-labelledby":v,hidden:!f,id:u,tabIndex:0,...r,ref:t,style:{...e.style,animationDuration:l.current?"0s":void 0},children:f&&s})})});A.displayName=$;function k(e,t){return`${e}-trigger-${t}`}function M(e,t){return`${e}-content-${t}`}var ne=L,T=_,z=q,B=A;const ae=ne,C=U.cva("inline-flex items-center justify-center gap-1 p-1 text-secondary",{variants:{type:{default:"",segmented:"bg-item-tertiary [&>button]:data-[state=active]:shadow-sm",line:"[&>button]:data-[state=active]:after:absolute [&>button]:data-[state=active]:after:-bottom-1.5 [&>button]:data-[state=active]:after:content-['']  [&>button]:data-[state=active]:after:w-full [&>button]:data-[state=active]:after:h-0.5 [&>button]:data-[state=active]:after:bg-primary"},variant:{default:"[&>button]:data-[state=active]:bg-background",soft:"[&>button]:data-[state=active]:bg-item-tertiary [&>button]:data-[state=active]:border [&>button]:data-[state=active]:border-alpha-strong"},rounded:{default:"rounded-md [&>button]:rounded-md",pill:"rounded-full [&>button]:rounded-full"}},defaultVariants:{type:"default",variant:"default",rounded:"default"}}),F=b.forwardRef(({className:e,rounded:t,variant:n,type:a,full:i,scrollable:s,scrollButtonClassName:r,...d},v)=>{const u=b.useRef(null),[c,l]=b.useState(!1),[f,G]=b.useState(!1),g=b.useCallback(()=>{if(u.current&&s){const{scrollLeft:p,scrollWidth:K,clientWidth:W}=u.current;l(p>0),G(p<K-W-1)}},[s]);b.useEffect(()=>{if(s){g();const p=()=>g();return window.addEventListener("resize",p),()=>window.removeEventListener("resize",p)}},[g,s]);const O=()=>{u.current&&u.current.scrollBy({left:-200,behavior:"smooth"})},H=()=>{u.current&&u.current.scrollBy({left:200,behavior:"smooth"})};return s?o.jsxRuntimeExports.jsxs("div",{className:"relative flex items-center",children:[c&&o.jsxRuntimeExports.jsx(N.Button,{type:"button",size:"icon",variant:"secondary",onClick:O,className:x.cn("absolute left-0 z-10 h-full w-6",r),"aria-label":"Scroll left",children:o.jsxRuntimeExports.jsx(X.ChevronLeft,{className:"text-secondary h-4 w-4"})}),o.jsxRuntimeExports.jsx("div",{ref:u,className:"scrollbar-hide overflow-x-auto scroll-smooth",style:{scrollbarWidth:"none",msOverflowStyle:"none",paddingLeft:c?"32px":"0",paddingRight:f?"32px":"0"},onScroll:g,children:o.jsxRuntimeExports.jsx(T,{ref:v,className:x.cn(i&&"!flex","min-w-max",C({rounded:t,variant:n,type:a,className:e})),...d})}),f&&o.jsxRuntimeExports.jsx(N.Button,{type:"button",size:"icon",variant:"secondary",onClick:H,className:x.cn("absolute right-0 z-10 h-full w-6",r),"aria-label":"Scroll right",children:o.jsxRuntimeExports.jsx(Y.ChevronRight,{className:"text-secondary size-4"})}),o.jsxRuntimeExports.jsx("style",{children:`
            .scrollbar-hide::-webkit-scrollbar {
              display: none;
            }
          `})]}):o.jsxRuntimeExports.jsx(T,{ref:v,className:x.cn(i&&"!flex",C({rounded:t,variant:n,type:a,className:e})),...d})});F.displayName=T.displayName;const D=b.forwardRef(({className:e,...t},n)=>o.jsxRuntimeExports.jsx(z,{ref:n,className:x.cn("text-body-xs-medium relative box-border inline-flex h-7 flex-1 cursor-pointer items-center justify-center px-3 py-1 whitespace-nowrap transition-all outline-none disabled:pointer-events-none disabled:opacity-50","data-[state=inactive]:hover:!bg-item-tertiary-hover data-[state=inactive]:hover:text-primary","data-[state=active]:text-primary",e),...t}));D.displayName=z.displayName;const V=b.forwardRef(({className:e,...t},n)=>o.jsxRuntimeExports.jsx(B,{ref:n,className:x.cn("ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",e),...t}));V.displayName=B.displayName;exports.Tabs=ae;exports.TabsContent=V;exports.TabsList=F;exports.TabsTrigger=D;