dgz-ui
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript
7 lines (6 loc) • 6.38 kB
JavaScript
"use strict";const o=require("react/jsx-runtime"),b=require("react"),v=require("./index-D9zW9Tk7.cjs.js"),y=require("./index-DGEvZwN5.cjs.js"),W=require("./index-DnRKXUWD.cjs.js"),R=require("./index-BruMW80s.cjs.js"),J=require("./index-x_Mxo00P.cjs.js"),g=require("./utils-C4d7Ql9-.cjs.js"),N=require("./button-CpKtD3qG.cjs.js"),Q=require("./chevron-left-B_pqqZqr.cjs.js"),U=require("./chevron-right-BxyusM7v.cjs.js");function X(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const h=X(b);var T="Tabs",[Y]=v.createContextScope(T,[y.createRovingFocusGroupScope]),S=y.createRovingFocusGroupScope(),[Z,j]=Y(T),_=h.forwardRef((e,t)=>{const{__scopeTabs:a,value:n,onValueChange:i,defaultValue:s,orientation:r="horizontal",dir:u,activationMode:m="automatic",...d}=e,c=W.useDirection(u),[l,f]=R.useControllableState({prop:n,onChange:i,defaultProp:s??"",caller:T});return o.jsx(Z,{scope:a,baseId:R.useId(),value:l,onValueChange:f,orientation:r,dir:c,activationMode:m,children:o.jsx(v.Primitive.div,{dir:c,"data-orientation":r,...d,ref:t})})});_.displayName=T;var L="TabsList",I=h.forwardRef((e,t)=>{const{__scopeTabs:a,loop:n=!0,...i}=e,s=j(L,a),r=S(a);return o.jsx(y.Root,{asChild:!0,...r,orientation:s.orientation,dir:s.dir,loop:n,children:o.jsx(v.Primitive.div,{role:"tablist","aria-orientation":s.orientation,...i,ref:t})})});I.displayName=L;var P="TabsTrigger",E=h.forwardRef((e,t)=>{const{__scopeTabs:a,value:n,disabled:i=!1,...s}=e,r=j(P,a),u=S(a),m=M(r.baseId,n),d=$(r.baseId,n),c=n===r.value;return o.jsx(y.Item,{asChild:!0,...u,focusable:!i,active:c,children:o.jsx(v.Primitive.button,{type:"button",role:"tab","aria-selected":c,"aria-controls":d,"data-state":c?"active":"inactive","data-disabled":i?"":void 0,disabled:i,id:m,...s,ref:t,onMouseDown:v.composeEventHandlers(e.onMouseDown,l=>{!i&&l.button===0&&l.ctrlKey===!1?r.onValueChange(n):l.preventDefault()}),onKeyDown:v.composeEventHandlers(e.onKeyDown,l=>{[" ","Enter"].includes(l.key)&&r.onValueChange(n)}),onFocus:v.composeEventHandlers(e.onFocus,()=>{const l=r.activationMode!=="manual";!c&&!i&&l&&r.onValueChange(n)})})})});E.displayName=P;var q="TabsContent",A=h.forwardRef((e,t)=>{const{__scopeTabs:a,value:n,forceMount:i,children:s,...r}=e,u=j(q,a),m=M(u.baseId,n),d=$(u.baseId,n),c=n===u.value,l=h.useRef(c);return h.useEffect(()=>{const f=requestAnimationFrame(()=>l.current=!1);return()=>cancelAnimationFrame(f)},[]),o.jsx(v.Presence,{present:i||c,children:({present:f})=>o.jsx(v.Primitive.div,{"data-state":c?"active":"inactive","data-orientation":u.orientation,role:"tabpanel","aria-labelledby":m,hidden:!f,id:d,tabIndex:0,...r,ref:t,style:{...e.style,animationDuration:l.current?"0s":void 0},children:f&&s})})});A.displayName=q;function M(e,t){return`${e}-trigger-${t}`}function $(e,t){return`${e}-content-${t}`}var ee=_,w=I,k=E,z=A;const te=ee,C=J.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"}}),B=b.forwardRef(({className:e,rounded:t,variant:a,type:n,full:i,scrollable:s,scrollButtonClassName:r,...u},m)=>{const d=b.useRef(null),[c,l]=b.useState(!1),[f,D]=b.useState(!1),x=b.useCallback(()=>{if(d.current&&s){const{scrollLeft:p,scrollWidth:H,clientWidth:K}=d.current;l(p>0),D(p<H-K-1)}},[s]);b.useEffect(()=>{if(s){x();const p=()=>x();return window.addEventListener("resize",p),()=>window.removeEventListener("resize",p)}},[x,s]);const G=()=>{d.current&&d.current.scrollBy({left:-200,behavior:"smooth"})},O=()=>{d.current&&d.current.scrollBy({left:200,behavior:"smooth"})};return s?o.jsxs("div",{className:"relative flex items-center",children:[c&&o.jsx(N.Button,{type:"button",size:"icon",variant:"secondary",onClick:G,className:g.cn("absolute left-0 z-10 h-full w-6",r),"aria-label":"Scroll left",children:o.jsx(Q.ChevronLeft,{className:"text-secondary h-4 w-4"})}),o.jsx("div",{ref:d,className:"scrollbar-hide overflow-x-auto scroll-smooth",style:{scrollbarWidth:"none",msOverflowStyle:"none",paddingLeft:c?"32px":"0",paddingRight:f?"32px":"0"},onScroll:x,children:o.jsx(w,{ref:m,className:g.cn(i&&"!flex","min-w-max",C({rounded:t,variant:a,type:n,className:e})),...u})}),f&&o.jsx(N.Button,{type:"button",size:"icon",variant:"secondary",onClick:O,className:g.cn("absolute right-0 z-10 h-full w-6",r),"aria-label":"Scroll right",children:o.jsx(U.ChevronRight,{className:"text-secondary size-4"})}),o.jsx("style",{children:`
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
`})]}):o.jsx(w,{ref:m,className:g.cn(i&&"!flex",C({rounded:t,variant:a,type:n,className:e})),...u})});B.displayName=w.displayName;const F=b.forwardRef(({className:e,...t},a)=>o.jsx(k,{ref:a,className:g.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}));F.displayName=k.displayName;const V=b.forwardRef(({className:e,...t},a)=>o.jsx(z,{ref:a,className:g.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=z.displayName;exports.Tabs=te;exports.TabsContent=V;exports.TabsList=B;exports.TabsTrigger=F;
//# sourceMappingURL=tabs-CDt2LiNL.cjs.js.map