'use client';import { b, c } from './chunk-PBEE7ALR.js';
import * as s from '@radix-ui/react-tabs';
import { tabs, gridBackground } from '@onbeam/styled-system/recipes';
import { cx } from '@onbeam/styled-system/css';
import { forwardRef, useId, useRef, useState, useEffect, useCallback } from 'react';
import { useAttributeObserver } from '@onbeam/utils';
import { motion } from 'motion/react';
import { jsx, jsxs } from 'react/jsx-runtime';

var S=forwardRef(({className:e,...o},r)=>jsx(s.Root,{ref:r,className:cx(tabs().root,e),...o})),k=s.Content,w=({tabComponent:e="button",value:o,href:r,children:i,className:l,layoutId:b="tabsListLayoutId",equalTabWidth:n,...a})=>{let p=useRef(null),[R,m]=useState(!1),T=tabs();useEffect(()=>{m(p.current?.getAttribute("data-state")==="active");},[]);let x=useCallback(v=>{m(v==="active");},[]);return useAttributeObserver(p,["data-state"],x),jsx(s.Trigger,{className:cx("group",T.trigger,l),value:o,...a,ref:p,asChild:!0,"data-equal-width":n,children:jsxs(e,{href:r,children:[R&&jsx(motion.div,{layoutId:b,className:T.indicator,"aria-hidden":!0}),jsx("span",{className:T.triggerText,children:i})]})})},B=({className:e,items:o,tabComponent:r,equalTabWidth:i,...l})=>{let b$1=useId(),n=tabs();return jsx(s.List,{className:cx(gridBackground(),n.triggerRoot,e),...l,children:jsxs(b,{children:[jsx("div",{className:n.list,"data-equal-width":i,children:o.map(a=>jsx(w,{value:a.value,href:a.href,layoutId:b$1,tabComponent:r,equalTabWidth:i,children:a.content},a.value))}),jsx(c,{})]})})};

export { S as a, k as b, B as c };
//# sourceMappingURL=out.js.map
//# sourceMappingURL=chunk-EAIAOYPM.js.map