@infinityfx/fluid/dist/components/navigation/tabs.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useId as a,useRef as t,useState as o}from"react";import l from"../feedback/halo.js";import{Morph as i}from"@infinityfx/lively/layout";import{combineClasses as n,classes as s}from"../../core/utils.js";import c from"../layout/scrollarea.js";import{createStyles as d}from"../../core/style.js";const u=d("tabs",{".v__default":{backgroundColor:"var(--f-clr-fg-100)",borderRadius:"var(--f-radius-sml)"},".tabs":{display:"flex",width:"max-content"},".v__default .tabs":{gap:"var(--f-spacing-sml)",padding:"0 .6em"},".option":{position:"relative"},".v__default .option":{padding:".6em 0"},".selection":{position:"absolute",width:"100%",height:"3px",backgroundColor:"var(--f-clr-text-100)",left:0,bottom:0,borderRadius:"99px"},".button":{position:"relative",outline:"none",border:"none",background:"none",padding:".4em .6em",borderRadius:"var(--f-radius-sml)",color:"var(--f-clr-text-100)",fontSize:"var(--f-font-size-sml)",fontWeight:600,WebkitTapHighlightColor:"transparent"},".v__minimal .button":{padding:".8em 1.2em"},".button:enabled":{cursor:"pointer"},".button:disabled":{color:"var(--f-clr-grey-500)"}});function f({options:d,cc:f={},variant:m="default",value:p,defaultValue:b,onChange:v,...h}){const g=n(u,f),y=a(),k=t([]),[x,w]=void 0!==p?[p]:o(b||d[0]?.value);function _(e){const r=k.current.filter((e=>e));e=e<0?r.length-1:e>=r.length?0:e,r[e]?.focus()}return e("div",{...h,className:s(g.wrapper,g[`v__${m}`],h.className),children:e(c,{horizontal:!0,children:e("div",{className:g.tabs,role:"tablist",children:d.map((({label:a,value:t,disabled:o,panelId:n},s)=>r("div",{className:g.option,children:[e(l,{disabled:o,color:"default"===m?"var(--f-clr-primary-300)":"var(--f-clr-primary-400)",children:e("button",{ref:e=>{k.current[s]=o?null:e},type:"button",role:"tab",className:g.button,"aria-selected":x===t,"aria-controls":n,disabled:o,onClick:()=>{w?.(t),v?.(t)},onKeyDown:e=>{let r=!0;switch(e.key){case"ArrowRight":case"ArrowDown":_(s+1);break;case"ArrowLeft":case"ArrowUp":_(s-1);break;case"Home":_(0);break;case"End":_(-1);break;default:r=!1}r&&e.preventDefault()},children:a})}),x===t&&e(i,{group:`tabs-selection-${y}`,deform:!1,cachable:["x","sx"],children:e("div",{className:g.selection})})]},s)))})})})}export{f as default};
//# sourceMappingURL=tabs.js.map