welcome-ui 0.32.2 → 1.0.0-beta.10

package/dist/Table.mjs

@@ -0,0 +1,75 @@
+"use client";
+import o from "react";
+import { forwardRef as c } from "./System.mjs";
+import t, { css as a, th as l } from "@xstyled/styled-components";
+const h = t.divBox(
+  ({ indent: e }) => a`
+    overflow: hidden;
+    width: 100%;
+
+    ${e && a`
+      ${r}, ${i} {
+        &:first-child {
+          padding-left: xl;
+        }
+
+        &:last-child {
+          padding-right: xl;
+        }
+      }
+    `}
+  `
+), b = t.div`
+  width: 100%;
+  overflow-x: auto;
+`, p = t.tableBox`
+  border: 0;
+  width: 100%;
+  border-collapse: collapse;
+`, f = t.theadBox``, g = t.tbodyBox``, T = t.trBox(
+  ({ onClick: e, variant: d }) => a`
+    ${l("tables.tr.default")};
+    ${d && l(`tables.tr.${d}`)};
+    ${e && l("tables.tr.clickable")};
+
+    &:last-child {
+      border: 0;
+    }
+  `
+), i = t.thBox`
+  ${l("tables.th")};
+  padding: xl;
+  vertical-align: middle;
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+`, r = t.tdBox`
+  ${l("tables.td")};
+  position: relative;
+  vertical-align: middle;
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+`, m = c(
+  ({ children: e, indent: d, ...n }, s) => /* @__PURE__ */ o.createElement(h, { indent: d, ref: s, ...n }, /* @__PURE__ */ o.createElement(b, null, /* @__PURE__ */ o.createElement(p, null, e)))
+), B = Object.assign(m, {
+  Thead: f,
+  Tbody: g,
+  Th: i,
+  Tr: T,
+  Td: r
+});
+export {
+  B as Table,
+  m as TableComponent
+};

package/dist/Tabs.js

@@ -0,0 +1,82 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),M=require("./System.js"),O=require("react-flatten-children"),Q=require("./use-viewport-BDDjd1nl.js"),U=require("./use-isomorphic-layout-effect-C1_Gy5Nu.js"),p=require("@xstyled/styled-components"),$=require("./P2CTZE2T-q8vyaGc0.js"),e=require("./LVA2YJMS-B2HZjIhJ.js"),k=require("./ITI7HKP4-BPa8qpnl.js"),q=require("./VGCJ63VH-Cuf7P3qW.js"),d=require("./YV4JVR4I-DIthYWMj.js"),Z=require("./VEVQD5MH-Cal9SWXl.js"),D=require("./MTZPJQMC-D0pYOjc_.js");var G=e.createStoreContext([D.PopoverContextProvider,$.CompositeContextProvider],[D.PopoverScopedContextProvider,$.CompositeScopedContextProvider]),X=G.useContext;b.createContext(!1);b.createContext(null);function ee(s={}){var o=s,{composite:n,combobox:t}=o,r=e.__objRest$1(o,["composite","combobox"]);const a=["items","renderedItems","moves","orientation","virtualFocus","includesBaseElement","baseElement","focusLoop","focusShift","focusWrap"],v=d.mergeStore(r.store,d.omit2(n,a),d.omit2(t,a)),l=v==null?void 0:v.getState(),m=k.createCompositeStore(e.__spreadProps$1(e.__spreadValues$1({},r),{store:v,includesBaseElement:e.defaultValue(r.includesBaseElement,l==null?void 0:l.includesBaseElement,!1),orientation:e.defaultValue(r.orientation,l==null?void 0:l.orientation,"horizontal"),focusLoop:e.defaultValue(r.focusLoop,l==null?void 0:l.focusLoop,!0)})),i=k.createCollectionStore(),g=e.__spreadProps$1(e.__spreadValues$1({},m.getState()),{selectedId:e.defaultValue(r.selectedId,l==null?void 0:l.selectedId,r.defaultSelectedId),selectOnMove:e.defaultValue(r.selectOnMove,l==null?void 0:l.selectOnMove,!0)}),c=d.createStore(g,m,v);d.setup(c,()=>d.sync(c,["moves"],()=>{const{activeId:f,selectOnMove:I}=c.getState();if(!I||!f)return;const h=m.item(f);h&&(h.dimmed||h.disabled||c.setState("selectedId",h.id))}));let S=!0;d.setup(c,()=>d.batch(c,["selectedId"],(f,I)=>{if(!S){S=!0;return}n&&f.selectedId===I.selectedId||c.setState("activeId",f.selectedId)})),d.setup(c,()=>d.sync(c,["selectedId","renderedItems"],f=>{if(f.selectedId!==void 0)return;const{activeId:I,renderedItems:h}=c.getState(),x=m.item(I);if(x&&!x.disabled&&!x.dimmed)c.setState("selectedId",x.id);else{const E=h.find(C=>!C.disabled&&!C.dimmed);c.setState("selectedId",E==null?void 0:E.id)}})),d.setup(c,()=>d.sync(c,["renderedItems"],f=>{const I=f.renderedItems;if(I.length)return d.sync(i,["renderedItems"],h=>{const x=h.renderedItems;x.some(C=>!C.tabId)&&x.forEach((C,R)=>{if(C.tabId)return;const L=I[R];L&&i.renderItem(e.__spreadProps$1(e.__spreadValues$1({},C),{tabId:L.id}))})})}));let P=null;return d.setup(c,()=>{const f=()=>{P=c.getState().selectedId},I=()=>{S=!1,c.setState("selectedId",P)};if(n&&"setSelectElement"in n)return e.chain(d.sync(n,["value"],f),d.sync(n,["mounted"],I));if(t)return e.chain(d.sync(t,["selectedValue"],f),d.sync(t,["mounted"],I))}),e.__spreadProps$1(e.__spreadValues$1(e.__spreadValues$1({},m),c),{panels:i,setSelectedId:f=>c.setState("selectedId",f),select:f=>{c.setState("selectedId",f),m.move(f)}})}function te(s,o,n){e.useUpdateEffect(o,[n.composite,n.combobox]),s=k.useCompositeStoreProps(s,o,n),d.useStoreProps(s,n,"selectedId","setSelectedId"),d.useStoreProps(s,n,"selectOnMove");const[t,r]=d.useStore(()=>s.panels,{});return e.useUpdateEffect(r,[s,r]),Object.assign(b.useMemo(()=>e.__spreadProps(e.__spreadValues({},s),{panels:t}),[s,t]),{composite:n.composite,combobox:n.combobox})}function se(s={}){const o=Z.useComboboxContext(),n=X()||o;s=e.__spreadProps(e.__spreadValues({},s),{composite:s.composite!==void 0?s.composite:n,combobox:s.combobox!==void 0?s.combobox:o});const[t,r]=d.useStore(ee,s);return te(t,r,s)}var j=e.createStoreContext([$.CompositeContextProvider],[$.CompositeScopedContextProvider]),oe=j.useScopedContext,A=j.useProviderContext,F=j.ScopedContextProvider,ne="button",re=e.createHook(function(o){var n=o,{store:t,getItem:r}=n,a=e.__objRest(n,["store","getItem"]),v;const l=oe();t=t||l,e.invariant(t,process.env.NODE_ENV!=="production"&&"Tab must be wrapped in a TabList component.");const m=e.useId(),i=a.id||m,g=e.disabledFromProps(a),c=b.useCallback(_=>{const y=e.__spreadProps(e.__spreadValues({},_),{dimmed:g});return r?r(y):y},[g,r]),S=a.onClick,P=e.useEvent(_=>{S==null||S(_),!_.defaultPrevented&&(t==null||t.setSelectedId(i))}),f=t.panels.useState(_=>{var y;return(y=_.items.find(u=>u.tabId===i))==null?void 0:y.id}),I=m?a.shouldRegisterItem:!1,h=t.useState(_=>!!i&&_.activeId===i),x=t.useState(_=>!!i&&_.selectedId===i),E=t.useState(_=>!!t.item(_.activeId)),C=h||x&&!E,R=x||((v=a.accessibleWhenDisabled)!=null?v:!0);if(d.useStoreState(t.combobox||t.composite,"virtualFocus")&&(a=e.__spreadProps(e.__spreadValues({},a),{tabIndex:-1})),a=e.__spreadProps(e.__spreadValues({id:i,role:"tab","aria-selected":x,"aria-controls":f||void 0},a),{onClick:P}),t.composite){const _={id:i,accessibleWhenDisabled:R,store:t.composite,shouldRegisterItem:C&&I,rowId:a.rowId,render:a.render};a=e.__spreadProps(e.__spreadValues({},a),{render:e.jsxRuntimeExports.jsx($.CompositeItem,e.__spreadProps(e.__spreadValues({},_),{render:t.combobox&&t.composite!==t.combobox?e.jsxRuntimeExports.jsx($.CompositeItem,e.__spreadProps(e.__spreadValues({},_),{store:t.combobox})):_.render}))})}return a=$.useCompositeItem(e.__spreadProps(e.__spreadValues({store:t},a),{accessibleWhenDisabled:R,getItem:c,shouldRegisterItem:I})),a}),ae=e.memo2(e.forwardRef2(function(o){const n=re(o);return e.createElement(ne,n)})),ie="div",ce=e.createHook(function(o){var n=o,{store:t}=n,r=e.__objRest(n,["store"]);const a=A();t=t||a,e.invariant(t,process.env.NODE_ENV!=="production"&&"TabList must receive a `store` prop or be wrapped in a TabProvider component.");const v=t.useState(l=>l.orientation==="both"?void 0:l.orientation);return r=e.useWrapElement(r,l=>e.jsxRuntimeExports.jsx(F,{value:t,children:l}),[t]),t.composite&&(r=e.__spreadValues({focusable:!1},r)),r=e.__spreadValues({role:"tablist","aria-orientation":v},r),r=k.useComposite(e.__spreadValues({store:t},r)),r}),le=e.forwardRef2(function(o){const n=ce(o);return e.createElement(ie,n)}),ue="div",de=e.createHook(function(o){var n=o,{store:t,unmountOnHide:r,tabId:a,getItem:v,scrollRestoration:l,scrollElement:m}=n,i=e.__objRest(n,["store","unmountOnHide","tabId","getItem","scrollRestoration","scrollElement"]);const g=A();t=t||g,e.invariant(t,process.env.NODE_ENV!=="production"&&"TabPanel must receive a `store` prop or be wrapped in a TabProvider component.");const c=b.useRef(null),S=e.useId(i.id),P=d.useStoreState(t.panels,()=>{var u;return a||((u=t==null?void 0:t.panels.item(S))==null?void 0:u.tabId)}),f=d.useStoreState(t,u=>!!P&&u.selectedId===P),I=q.useDisclosureStore({open:f}),h=d.useStoreState(I,"mounted"),x=b.useRef(new Map),E=e.useEvent(()=>{const u=c.current;return u?m?typeof m=="function"?m(u):"current"in m?m.current:m:u:null});b.useEffect(()=>{var u,V;if(!l||!h)return;const T=E();if(!T)return;if(l==="reset"){T.scroll(0,0);return}if(!P)return;const w=x.current.get(P);T.scroll((u=w==null?void 0:w.x)!=null?u:0,(V=w==null?void 0:w.y)!=null?V:0);const N=()=>{x.current.set(P,{x:T.scrollLeft,y:T.scrollTop})};return T.addEventListener("scroll",N),()=>{T.removeEventListener("scroll",N)}},[l,h,P,E,t]);const[C,R]=b.useState(!1);b.useEffect(()=>{const u=c.current;if(!u)return;const V=e.getAllTabbableIn(u);R(!!V.length)},[]);const L=b.useCallback(u=>{const V=e.__spreadProps(e.__spreadValues({},u),{id:S||u.id,tabId:a});return v?v(V):V},[S,a,v]),_=i.onKeyDown,y=e.useEvent(u=>{if(_==null||_(u),u.defaultPrevented||!(t!=null&&t.composite))return;const T={ArrowLeft:t.previous,ArrowRight:t.next,Home:t.first,End:t.last}[u.key];if(!T)return;const{selectedId:w}=t.getState(),N=T({activeId:w});N&&(u.preventDefault(),t.move(N))});return i=e.useWrapElement(i,u=>e.jsxRuntimeExports.jsx(F,{value:t,children:u}),[t]),i=e.__spreadProps(e.__spreadValues({id:S,role:"tabpanel","aria-labelledby":P||void 0},i),{children:r&&!h?null:i.children,ref:e.useMergeRefs(c,i.ref),onKeyDown:y}),i=e.useFocusable(e.__spreadValues({focusable:!t.composite&&!C},i)),i=q.useDisclosureContent(e.__spreadValues({store:I},i)),i=$.useCollectionItem(e.__spreadProps(e.__spreadValues({store:t.panels},i),{getItem:L})),i}),pe=e.forwardRef2(function(o){const n=de(o);return e.createElement(ue,n)});function H(s,o){typeof s=="function"?s(o):s&&(s.current=o)}function me(s,o){return b.useMemo(()=>s==null&&o==null?null:n=>{H(s,n),H(o,n)},[s,o])}const fe=p(le)(({size:s})=>p.css`
+    position: relative;
+    width: 100%;
+    overflow-x: auto;
+    display: flex;
+    border: 0;
+    gap: xl;
+
+    &[aria-orientation='vertical'] {
+      flex-direction: column;
+      ${p.th("tabs.tabsBorder.vertical")};
+    }
+
+    ${p.th("tabs.tabsBorder.horizontal")};
+
+    ${z} {
+      ${p.th(`tabs.item.size.${s}`)}
+    }
+    ${p.system};
+  `),z=p.button`
+  border: 0;
+  background: none;
+  ${p.th("tabs.item.default")};
+  display: flex;
+  align-items: center;
+  flex: none;
+  padding: md 0;
+  transition: medium;
+  text-transform: none;
+  cursor: pointer;
+  gap: sm;
+
+  &:focus {
+    outline: none !important; /* important for firefox */
+
+    &:not([aria-selected='true']) {
+      ${p.th("tabs.item.focus")};
+    }
+  }
+
+  &[aria-selected='true'] {
+    ${p.th("tabs.item.active")};
+  }
+
+  &[aria-disabled='true'] {
+    ${p.th("tabs.item.disabled")};
+    cursor: auto;
+  }
+
+  &:hover:not([aria-selected='true']):not([aria-disabled='true']) {
+    ${p.th("tabs.item.focus")};
+  }
+
+  & > svg,
+  img {
+    ${p.th("tabs.icon")};
+  }
+
+  & > span {
+    ${p.th("tabs.badge")};
+  }
+`,be=p(pe)(({orientation:s})=>p.css`
+    ${s==="vertical"?p.th("tabs.panel.vertical"):p.th("tabs.panel.horizontal")};
+  `),ve=({offset:s=0,size:o=0})=>p.css`
+  ${p.th("tabs.activeBar.horizontal")};
+  left: 0;
+  bottom: 0;
+  width: ${o}px;
+  transform: translateX(${s}px);
+`,_e=({offset:s=0,size:o=0})=>p.css`
+  ${p.th("tabs.activeBar.vertical")};
+  right: 0;
+  top: 0;
+  height: ${o}px;
+  transform: translateY(${s}px);
+`,Ie=p.span(({orientation:s,...o})=>p.css`
+    position: absolute;
+    ${s==="vertical"?_e(o):ve(o)}
+    will-change: width, transform;
+    transition: medium;
+    transition-property: transform, width;
+  `),W=s=>{if(!s||typeof window>"u")return 1;const o=Number(window.getComputedStyle(s).scale);return isNaN(o)?W(s.parentElement):o};function Se(s,o,n){const[t,r]=b.useState({}),{height:a,width:v}=Q.useViewportSize();return U.useIsomorphicLayoutEffect(()=>{const l=s.current;if(!l||!o)return;const m=l.getBoundingClientRect(),i=o.getBoundingClientRect(),g=W(l);if(n==="vertical"){const c=i.top-m.top,S=i.height;r({size:S,offset:c,orientation:n})}else{const c=(i.left-m.left+l.scrollLeft)/g,S=i.width/g;r({size:isNaN(S)?0:S,offset:isNaN(c)?0:c,orientation:n})}},[s,o,v,a,n]),t}const K=({activeTab:s,listRef:o,orientation:n})=>{const t=Se(o,s,n);return b.createElement(Ie,{...t})};K.displayName="ActiveBar";const he=O.default||O;function xe(s,o){const[n,t]=b.useState(null);return[he(o).map(a=>a.props.id===s?b.cloneElement(a,{ref:t}):a),n]}const J=M.forwardRef(({children:s,size:o="md",store:n,...t},r)=>{const a=b.useRef(),v=me(r,a),{orientation:l,selectedId:m}=n.useState(),[i,g]=xe(m,s);return b.createElement(fe,{orientation:l,ref:v,size:o,store:n,...t},i,i.length>1&&b.createElement(K,{activeTab:g,listRef:a,orientation:l}))});J.displayName="TabList";const Y=M.forwardRef(({children:s,store:o,tabId:n,...t},r)=>{const a=o.useState("orientation");return b.createElement(be,{orientation:a,ref:r,store:o,tabId:n,...t},s)});Y.displayName="TabPanel";const B=M.forwardRef(({as:s,children:o,id:n,store:t,...r},a)=>b.createElement(ae,{id:n,render:v=>b.createElement(z,{as:s,...v,ref:a}),store:t,...r},o));B.displayName="Tab";const Pe=Object.assign(B,{List:J,Panel:Y});function ge(s){return se(s)}exports.Tab=Pe;exports.TabComponent=B;exports.useTab=ge;

package/dist/Tabs.mjs

@@ -0,0 +1,534 @@
+"use client";
+import L, { createContext as ae, useMemo as ie, useCallback as ce, useRef as z, useEffect as J, useState as W, cloneElement as Ce } from "react";
+import { forwardRef as K } from "./System.mjs";
+import Z from "react-flatten-children";
+import { u as Pe } from "./use-viewport-m3glsbna.mjs";
+import { u as Ee } from "./use-isomorphic-layout-effect-Izr-e2pi.mjs";
+import M, { css as V, th as x, system as $e } from "@xstyled/styled-components";
+import { C as le, a as de, d as ee, u as we, e as ye } from "./P2CTZE2T-5jxBu6ix.mjs";
+import { n as ue, A as _e, B as A, C as O, D as k, Q as te, h as g, a as p, H as oe, c as Q, _ as U, i as X, x as me, o as Re, e as H, m as F, w as Le, f as Y, b as q, E as fe, aa as Ne, j as Be, v as Oe } from "./LVA2YJMS-Dm5ieEMw.mjs";
+import { c as ke, b as De, u as Ve, a as Ae } from "./ITI7HKP4-Couz1Z73.mjs";
+import { e as je, f as Fe } from "./VGCJ63VH-BqPfqkK_.mjs";
+import { m as Me, o as ne, s as D, d as w, g as ze, c as He, a as be, b as se, u as j } from "./YV4JVR4I-1ezWeCCz.mjs";
+import { u as We } from "./VEVQD5MH-DOp_qaPw.mjs";
+import { P as Ke, a as Qe } from "./MTZPJQMC-C9lHSyrL.mjs";
+var Ue = ue(
+  [Qe, de],
+  [Ke, le]
+), Xe = Ue.useContext;
+ae(!1);
+ae(null);
+function Ye(t = {}) {
+  var o = t, {
+    composite: n,
+    combobox: e
+  } = o, s = _e(o, [
+    "composite",
+    "combobox"
+  ]);
+  const r = [
+    "items",
+    "renderedItems",
+    "moves",
+    "orientation",
+    "virtualFocus",
+    "includesBaseElement",
+    "baseElement",
+    "focusLoop",
+    "focusShift",
+    "focusWrap"
+  ], m = Me(
+    s.store,
+    ne(n, r),
+    ne(e, r)
+  ), c = m == null ? void 0 : m.getState(), d = ke(A(k({}, s), {
+    store: m,
+    // We need to explicitly set the default value of `includesBaseElement` to
+    // `false` since we don't want the composite store to default it to `true`
+    // when the activeId state is null, which could be the case when rendering
+    // combobox with tab.
+    includesBaseElement: O(
+      s.includesBaseElement,
+      c == null ? void 0 : c.includesBaseElement,
+      !1
+    ),
+    orientation: O(
+      s.orientation,
+      c == null ? void 0 : c.orientation,
+      "horizontal"
+    ),
+    focusLoop: O(s.focusLoop, c == null ? void 0 : c.focusLoop, !0)
+  })), a = De(), T = A(k({}, d.getState()), {
+    selectedId: O(
+      s.selectedId,
+      c == null ? void 0 : c.selectedId,
+      s.defaultSelectedId
+    ),
+    selectOnMove: O(
+      s.selectOnMove,
+      c == null ? void 0 : c.selectOnMove,
+      !0
+    )
+  }), i = He(T, d, m);
+  D(
+    i,
+    () => w(i, ["moves"], () => {
+      const { activeId: u, selectOnMove: b } = i.getState();
+      if (!b || !u) return;
+      const I = d.item(u);
+      I && (I.dimmed || I.disabled || i.setState("selectedId", I.id));
+    })
+  );
+  let v = !0;
+  D(
+    i,
+    () => ze(i, ["selectedId"], (u, b) => {
+      if (!v) {
+        v = !0;
+        return;
+      }
+      n && u.selectedId === b.selectedId || i.setState("activeId", u.selectedId);
+    })
+  ), D(
+    i,
+    () => w(i, ["selectedId", "renderedItems"], (u) => {
+      if (u.selectedId !== void 0) return;
+      const { activeId: b, renderedItems: I } = i.getState(), S = d.item(b);
+      if (S && !S.disabled && !S.dimmed)
+        i.setState("selectedId", S.id);
+      else {
+        const E = I.find(
+          (C) => !C.disabled && !C.dimmed
+        );
+        i.setState("selectedId", E == null ? void 0 : E.id);
+      }
+    })
+  ), D(
+    i,
+    () => w(i, ["renderedItems"], (u) => {
+      const b = u.renderedItems;
+      if (b.length)
+        return w(a, ["renderedItems"], (I) => {
+          const S = I.renderedItems;
+          S.some((C) => !C.tabId) && S.forEach((C, _) => {
+            if (C.tabId) return;
+            const N = b[_];
+            N && a.renderItem(A(k({}, C), { tabId: N.id }));
+          });
+        });
+    })
+  );
+  let h = null;
+  return D(i, () => {
+    const u = () => {
+      h = i.getState().selectedId;
+    }, b = () => {
+      v = !1, i.setState("selectedId", h);
+    };
+    if (n && "setSelectElement" in n)
+      return te(
+        w(n, ["value"], u),
+        w(n, ["mounted"], b)
+      );
+    if (e)
+      return te(
+        w(e, ["selectedValue"], u),
+        w(e, ["mounted"], b)
+      );
+  }), A(k(k({}, d), i), {
+    panels: a,
+    setSelectedId: (u) => i.setState("selectedId", u),
+    select: (u) => {
+      i.setState("selectedId", u), d.move(u);
+    }
+  });
+}
+function qe(t, o, n) {
+  oe(o, [n.composite, n.combobox]), t = Ve(t, o, n), se(t, n, "selectedId", "setSelectedId"), se(t, n, "selectOnMove");
+  const [e, s] = be(() => t.panels, {});
+  return oe(s, [t, s]), Object.assign(
+    ie(() => g(p({}, t), { panels: e }), [t, e]),
+    { composite: n.composite, combobox: n.combobox }
+  );
+}
+function Ge(t = {}) {
+  const o = We(), n = Xe() || o;
+  t = g(p({}, t), {
+    composite: t.composite !== void 0 ? t.composite : n,
+    combobox: t.combobox !== void 0 ? t.combobox : o
+  });
+  const [e, s] = be(Ye, t);
+  return qe(e, s, t);
+}
+var G = ue(
+  [de],
+  [le]
+), Je = G.useScopedContext, pe = G.useProviderContext, ve = G.ScopedContextProvider, Ze = "button", et = Q(function(o) {
+  var n = o, {
+    store: e,
+    getItem: s
+  } = n, r = U(n, [
+    "store",
+    "getItem"
+  ]), m;
+  const c = Je();
+  e = e || c, X(
+    e,
+    process.env.NODE_ENV !== "production" && "Tab must be wrapped in a TabList component."
+  );
+  const d = me(), a = r.id || d, T = Re(r), i = ce(
+    (f) => {
+      const y = g(p({}, f), { dimmed: T });
+      return s ? s(y) : y;
+    },
+    [T, s]
+  ), v = r.onClick, h = H((f) => {
+    v == null || v(f), !f.defaultPrevented && (e == null || e.setSelectedId(a));
+  }), u = e.panels.useState(
+    (f) => {
+      var y;
+      return (y = f.items.find((l) => l.tabId === a)) == null ? void 0 : y.id;
+    }
+  ), b = d ? r.shouldRegisterItem : !1, I = e.useState((f) => !!a && f.activeId === a), S = e.useState((f) => !!a && f.selectedId === a), E = e.useState((f) => !!e.item(f.activeId)), C = I || S && !E, _ = S || ((m = r.accessibleWhenDisabled) != null ? m : !0);
+  if (j(
+    e.combobox || e.composite,
+    "virtualFocus"
+  ) && (r = g(p({}, r), {
+    tabIndex: -1
+  })), r = g(p({
+    id: a,
+    role: "tab",
+    "aria-selected": S,
+    "aria-controls": u || void 0
+  }, r), {
+    onClick: h
+  }), e.composite) {
+    const f = {
+      id: a,
+      accessibleWhenDisabled: _,
+      store: e.composite,
+      shouldRegisterItem: C && b,
+      rowId: r.rowId,
+      render: r.render
+    };
+    r = g(p({}, r), {
+      render: /* @__PURE__ */ F.jsx(
+        ee,
+        g(p({}, f), {
+          render: e.combobox && e.composite !== e.combobox ? /* @__PURE__ */ F.jsx(ee, g(p({}, f), { store: e.combobox })) : f.render
+        })
+      )
+    });
+  }
+  return r = we(g(p({
+    store: e
+  }, r), {
+    accessibleWhenDisabled: _,
+    getItem: i,
+    shouldRegisterItem: b
+  })), r;
+}), tt = Le(
+  Y(function(o) {
+    const n = et(o);
+    return q(Ze, n);
+  })
+), ot = "div", nt = Q(
+  function(o) {
+    var n = o, { store: e } = n, s = U(n, ["store"]);
+    const r = pe();
+    e = e || r, X(
+      e,
+      process.env.NODE_ENV !== "production" && "TabList must receive a `store` prop or be wrapped in a TabProvider component."
+    );
+    const m = e.useState(
+      (c) => c.orientation === "both" ? void 0 : c.orientation
+    );
+    return s = fe(
+      s,
+      (c) => /* @__PURE__ */ F.jsx(ve, { value: e, children: c }),
+      [e]
+    ), e.composite && (s = p({
+      focusable: !1
+    }, s)), s = p({
+      role: "tablist",
+      "aria-orientation": m
+    }, s), s = Ae(p({ store: e }, s)), s;
+  }
+), st = Y(function(o) {
+  const n = nt(o);
+  return q(ot, n);
+}), rt = "div", at = Q(
+  function(o) {
+    var n = o, {
+      store: e,
+      unmountOnHide: s,
+      tabId: r,
+      getItem: m,
+      scrollRestoration: c,
+      scrollElement: d
+    } = n, a = U(n, [
+      "store",
+      "unmountOnHide",
+      "tabId",
+      "getItem",
+      "scrollRestoration",
+      "scrollElement"
+    ]);
+    const T = pe();
+    e = e || T, X(
+      e,
+      process.env.NODE_ENV !== "production" && "TabPanel must receive a `store` prop or be wrapped in a TabProvider component."
+    );
+    const i = z(null), v = me(a.id), h = j(
+      e.panels,
+      () => {
+        var l;
+        return r || ((l = e == null ? void 0 : e.panels.item(v)) == null ? void 0 : l.tabId);
+      }
+    ), u = j(
+      e,
+      (l) => !!h && l.selectedId === h
+    ), b = je({ open: u }), I = j(b, "mounted"), S = z(
+      /* @__PURE__ */ new Map()
+    ), E = H(() => {
+      const l = i.current;
+      return l ? d ? typeof d == "function" ? d(l) : "current" in d ? d.current : d : l : null;
+    });
+    J(() => {
+      var l, $;
+      if (!c || !I) return;
+      const P = E();
+      if (!P) return;
+      if (c === "reset") {
+        P.scroll(0, 0);
+        return;
+      }
+      if (!h) return;
+      const R = S.current.get(h);
+      P.scroll((l = R == null ? void 0 : R.x) != null ? l : 0, ($ = R == null ? void 0 : R.y) != null ? $ : 0);
+      const B = () => {
+        S.current.set(h, {
+          x: P.scrollLeft,
+          y: P.scrollTop
+        });
+      };
+      return P.addEventListener("scroll", B), () => {
+        P.removeEventListener("scroll", B);
+      };
+    }, [c, I, h, E, e]);
+    const [C, _] = W(!1);
+    J(() => {
+      const l = i.current;
+      if (!l) return;
+      const $ = Ne(l);
+      _(!!$.length);
+    }, []);
+    const N = ce(
+      (l) => {
+        const $ = g(p({}, l), { id: v || l.id, tabId: r });
+        return m ? m($) : $;
+      },
+      [v, r, m]
+    ), f = a.onKeyDown, y = H((l) => {
+      if (f == null || f(l), l.defaultPrevented || !(e != null && e.composite)) return;
+      const P = {
+        ArrowLeft: e.previous,
+        ArrowRight: e.next,
+        Home: e.first,
+        End: e.last
+      }[l.key];
+      if (!P) return;
+      const { selectedId: R } = e.getState(), B = P({ activeId: R });
+      B && (l.preventDefault(), e.move(B));
+    });
+    return a = fe(
+      a,
+      (l) => /* @__PURE__ */ F.jsx(ve, { value: e, children: l }),
+      [e]
+    ), a = g(p({
+      id: v,
+      role: "tabpanel",
+      "aria-labelledby": h || void 0
+    }, a), {
+      children: s && !I ? null : a.children,
+      ref: Be(i, a.ref),
+      onKeyDown: y
+    }), a = Oe(p({
+      // If the tab panel is rendered as part of another composite widget such
+      // as combobox, it should not be focusable.
+      focusable: !e.composite && !C
+    }, a)), a = Fe(p({ store: b }, a)), a = ye(g(p({ store: e.panels }, a), { getItem: N })), a;
+  }
+), it = Y(function(o) {
+  const n = at(o);
+  return q(rt, n);
+});
+function re(t, o) {
+  typeof t == "function" ? t(o) : t && (t.current = o);
+}
+function ct(t, o) {
+  return ie(() => t == null && o == null ? null : (n) => {
+    re(t, n), re(o, n);
+  }, [t, o]);
+}
+const lt = M(st)(
+  ({ size: t }) => V`
+    position: relative;
+    width: 100%;
+    overflow-x: auto;
+    display: flex;
+    border: 0;
+    gap: xl;
+
+    &[aria-orientation='vertical'] {
+      flex-direction: column;
+      ${x("tabs.tabsBorder.vertical")};
+    }
+
+    ${x("tabs.tabsBorder.horizontal")};
+
+    ${Ie} {
+      ${x(`tabs.item.size.${t}`)}
+    }
+    ${$e};
+  `
+), Ie = M.button`
+  border: 0;
+  background: none;
+  ${x("tabs.item.default")};
+  display: flex;
+  align-items: center;
+  flex: none;
+  padding: md 0;
+  transition: medium;
+  text-transform: none;
+  cursor: pointer;
+  gap: sm;
+
+  &:focus {
+    outline: none !important; /* important for firefox */
+
+    &:not([aria-selected='true']) {
+      ${x("tabs.item.focus")};
+    }
+  }
+
+  &[aria-selected='true'] {
+    ${x("tabs.item.active")};
+  }
+
+  &[aria-disabled='true'] {
+    ${x("tabs.item.disabled")};
+    cursor: auto;
+  }
+
+  &:hover:not([aria-selected='true']):not([aria-disabled='true']) {
+    ${x("tabs.item.focus")};
+  }
+
+  & > svg,
+  img {
+    ${x("tabs.icon")};
+  }
+
+  & > span {
+    ${x("tabs.badge")};
+  }
+`, dt = M(it)(
+  ({ orientation: t }) => V`
+    ${t === "vertical" ? x("tabs.panel.vertical") : x("tabs.panel.horizontal")};
+  `
+), ut = ({ offset: t = 0, size: o = 0 }) => V`
+  ${x("tabs.activeBar.horizontal")};
+  left: 0;
+  bottom: 0;
+  width: ${o}px;
+  transform: translateX(${t}px);
+`, mt = ({ offset: t = 0, size: o = 0 }) => V`
+  ${x("tabs.activeBar.vertical")};
+  right: 0;
+  top: 0;
+  height: ${o}px;
+  transform: translateY(${t}px);
+`, ft = M.span(
+  ({ orientation: t, ...o }) => V`
+    position: absolute;
+    ${t === "vertical" ? mt(o) : ut(o)}
+    will-change: width, transform;
+    transition: medium;
+    transition-property: transform, width;
+  `
+), Se = (t) => {
+  if (!t || typeof window > "u") return 1;
+  const o = Number(window.getComputedStyle(t).scale);
+  return isNaN(o) ? Se(t.parentElement) : o;
+};
+function bt(t, o, n) {
+  const [e, s] = W({}), { height: r, width: m } = Pe();
+  return Ee(() => {
+    const c = t.current;
+    if (!c || !o) return;
+    const d = c.getBoundingClientRect(), a = o.getBoundingClientRect(), T = Se(c);
+    if (n === "vertical") {
+      const i = a.top - d.top, v = a.height;
+      s({
+        size: v,
+        offset: i,
+        orientation: n
+      });
+    } else {
+      const i = (a.left - d.left + c.scrollLeft) / T, v = a.width / T;
+      s({
+        size: isNaN(v) ? 0 : v,
+        offset: isNaN(i) ? 0 : i,
+        orientation: n
+      });
+    }
+  }, [t, o, m, r, n]), e;
+}
+const xe = ({ activeTab: t, listRef: o, orientation: n }) => {
+  const e = bt(o, t, n);
+  return /* @__PURE__ */ L.createElement(ft, { ...e });
+};
+xe.displayName = "ActiveBar";
+const pt = Z.default || Z;
+function vt(t, o) {
+  const [n, e] = W(null);
+  return [pt(o).map((r) => r.props.id === t ? Ce(r, { ref: e }) : r), n];
+}
+const he = K(
+  ({ children: t, size: o = "md", store: n, ...e }, s) => {
+    const r = z(), m = ct(s, r), { orientation: c, selectedId: d } = n.useState(), [a, T] = vt(d, t);
+    return /* @__PURE__ */ L.createElement(lt, { orientation: c, ref: m, size: o, store: n, ...e }, a, a.length > 1 && /* @__PURE__ */ L.createElement(xe, { activeTab: T, listRef: r, orientation: c }));
+  }
+);
+he.displayName = "TabList";
+const ge = K(
+  ({ children: t, store: o, tabId: n, ...e }, s) => {
+    const r = o.useState("orientation");
+    return /* @__PURE__ */ L.createElement(dt, { orientation: r, ref: s, store: o, tabId: n, ...e }, t);
+  }
+);
+ge.displayName = "TabPanel";
+const Te = K(
+  ({ as: t, children: o, id: n, store: e, ...s }, r) => /* @__PURE__ */ L.createElement(
+    tt,
+    {
+      id: n,
+      render: (m) => /* @__PURE__ */ L.createElement(Ie, { as: t, ...m, ref: r }),
+      store: e,
+      ...s
+    },
+    o
+  )
+);
+Te.displayName = "Tab";
+const Rt = Object.assign(Te, { List: he, Panel: ge });
+function Lt(t) {
+  return Ge(t);
+}
+export {
+  Rt as Tab,
+  Te as TabComponent,
+  Lt as useTab
+};