@viasat/beam-react 2.0.0

package/lib/Stepper/useBeamStepper.es.js

@@ -0,0 +1,193 @@
+import { jsx as A } from "react/jsx-runtime";
+import * as b from "react";
+import { useMemo as N, useCallback as I } from "react";
+import { a as k } from "../../chunks/stepper.C_I6_cLs.js";
+import { Stepper as l } from "./Stepper.es.js";
+function W(...t) {
+  return { getAll: () => t, get: (e) => t.find((r) => r.id === e), getIndex: (e) => t.findIndex((r) => r.id === e), getByIndex: (e) => t[e], getFirst: () => t[0], getLast: () => t[t.length - 1], getNext: (e) => t[t.findIndex((r) => r.id === e) + 1], getPrev: (e) => t[t.findIndex((r) => r.id === e) - 1], getNeighbors(e) {
+    const r = t.findIndex((a) => a.id === e);
+    return { prev: r > 0 ? t[r - 1] : null, next: r < t.length - 1 ? t[r + 1] : null };
+  } };
+}
+function E(t, e) {
+  return Math.max(t.findIndex((r) => r.id === e), 0);
+}
+function G(t, e) {
+  return t.reduce((r, a) => (r[a.id] = (e == null ? void 0 : e[a.id]) ?? null, r), {});
+}
+function _(t, e, r) {
+  return { switch(a) {
+    const i = a[e.id];
+    return i == null ? void 0 : i(e);
+  }, when(a, i, o) {
+    const s = t[r];
+    return (Array.isArray(a) ? s.id === a[0] && a.slice(1).every(Boolean) : s.id === a) ? i == null ? void 0 : i(s) : o == null ? void 0 : o(s);
+  }, match(a, i) {
+    const o = t[r], s = t.find((u) => u.id === a);
+    if ((s == null ? void 0 : s.id) === o.id) {
+      const u = i[a];
+      return u == null ? void 0 : u(s);
+    }
+    return null;
+  } };
+}
+async function j(t, e) {
+  const r = await t();
+  return !e || r === !0;
+}
+var y = async ({ stepper: t, direction: e, callback: r, before: a, targetId: i }) => {
+  (!a || await j(r, !0)) && (e === "next" ? t.next() : e === "prev" ? t.prev() : e === "goTo" && i && t.goTo(i), a || await j(r, !1));
+}, C = (t, e, r) => {
+  e < 0 && F({ steps: t, newIndex: e, direction: "next", reason: "it is the first step" }), e >= t.length && F({ steps: t, newIndex: e, direction: "prev", reason: "it is the last step" }), r(e);
+}, F = ({ steps: t, newIndex: e, direction: r, reason: a }) => {
+  throw new Error(`Cannot navigate ${r} from step "${t[e].id}": ${a}`);
+}, q = (...t) => {
+  const e = b.createContext(null), r = W(...t), a = (i) => {
+    const { initialStep: o, initialMetadata: s } = i ?? {}, u = b.useMemo(() => E(t, o), [o]), [p, M] = b.useState(u), [x, v] = b.useState(() => G(t, s)), f = b.useMemo(() => {
+      const h = t[p], T = p === t.length - 1;
+      return { all: t, current: h, isLast: T, isFirst: p === 0, metadata: x, setMetadata(n, d) {
+        v((g) => g[n] === d ? g : { ...g, [n]: d });
+      }, getMetadata: (n) => x[n], resetMetadata(n) {
+        v(G(t, n ? s : void 0));
+      }, next() {
+        C(t, p + 1, (n) => {
+          M(n);
+        });
+      }, prev() {
+        C(t, p - 1, (n) => {
+          M(n);
+        });
+      }, get: (n) => t.find((d) => d.id === n), goTo(n) {
+        const d = t.findIndex((g) => g.id === n);
+        if (d === -1) throw new Error(`Step with id "${n}" not found.`);
+        C(t, d, (g) => {
+          M(g);
+        });
+      }, reset() {
+        C(t, E(t, o), (n) => {
+          M(n);
+        });
+      }, async beforeNext(n) {
+        await y({ stepper: f, direction: "next", callback: n, before: !0 });
+      }, async afterNext(n) {
+        this.next(), await y({ stepper: f, direction: "next", callback: n, before: !1 });
+      }, async beforePrev(n) {
+        await y({ stepper: f, direction: "prev", callback: n, before: !0 });
+      }, async afterPrev(n) {
+        this.prev(), await y({ stepper: f, direction: "prev", callback: n, before: !1 });
+      }, async beforeGoTo(n, d) {
+        await y({ stepper: f, direction: "goTo", callback: d, before: !0, targetId: n });
+      }, async afterGoTo(n, d) {
+        this.goTo(n), await y({ stepper: f, direction: "goTo", callback: d, before: !1, targetId: n });
+      }, ..._(t, h, p) };
+    }, [p, x]);
+    return f;
+  };
+  return { steps: t, utils: r, Scoped: ({ initialStep: i, initialMetadata: o, children: s }) => b.createElement(e.Provider, { value: a({ initialStep: i, initialMetadata: o }) }, s), useStepper: (i = {}) => b.useContext(e) ?? a(i) };
+};
+const D = (t) => {
+  const e = ({ children: r, ...a }) => /* @__PURE__ */ A(l, { ...a, children: /* @__PURE__ */ A(t, { children: r }) });
+  return e.Step = l.Step, e.Marker = l.Marker, e.Heading = l.Heading, e.Body = l.Body, e.Context = l.Context, e.Provider = l.Provider, e.Statuses = l.Statuses, e.displayName = "Stepper", e;
+}, Y = (t, e) => {
+  const { Scoped: r, useStepper: a, utils: i } = N(
+    () => q(...t),
+    [t]
+  ), {
+    initialStep: o,
+    initialMetadata: s,
+    skipSteps: u,
+    validateStep: p
+  } = e, M = N(
+    () => J(t, s || {}),
+    [t, s]
+  ), x = a({
+    initialStep: o,
+    initialMetadata: M
+  }), { current: v, getMetadata: f, setMetadata: h, beforeGoTo: T } = x, n = i.getNeighbors(v.id), d = I(
+    async (c) => p ? p(c) : !0,
+    [p]
+  ), g = I(
+    (c) => {
+      var S, w;
+      return u ? !0 : [(S = n.next) == null ? void 0 : S.id, (w = n.prev) == null ? void 0 : w.id].includes(c);
+    },
+    [n.next, n.prev, u]
+  ), H = I(
+    (c) => {
+      var w;
+      return ((w = f(c)) == null ? void 0 : w.status) || l.Statuses.Incomplete;
+    },
+    [f]
+  ), m = I(
+    (c) => {
+      T(c, async () => {
+        if (!g(c))
+          return !1;
+        let w = !1;
+        try {
+          w = await d(v.id);
+        } catch {
+          console.error(
+            "[Beam Stepper]: An error occurred while validating the step transition, check the validateTransition callback."
+          );
+        }
+        if (!w)
+          return h(v.id, { status: l.Statuses.Error }), !1;
+        const P = i.getIndex(v.id), $ = i.getIndex(c);
+        if ($ < P) {
+          h(c, { status: l.Statuses.Current });
+          for (let B = $ + 1; B <= P; B++) {
+            const R = i.getByIndex(B);
+            h(R.id, { status: l.Statuses.Incomplete });
+          }
+        } else
+          h(v.id, { status: l.Statuses.Complete }), h(c, { status: l.Statuses.Current });
+        return !0;
+      });
+    },
+    [
+      v,
+      T,
+      g,
+      h,
+      d,
+      i
+    ]
+  ), L = I(() => {
+    var c, S;
+    return (c = n.next) != null && c.id ? m((S = n.next) == null ? void 0 : S.id) : null;
+  }, [n.next, m]), O = I(() => {
+    var c, S;
+    return (c = n.prev) != null && c.id ? m((S = n.prev) == null ? void 0 : S.id) : null;
+  }, [n.prev, m]), z = I(() => {
+    x.reset(), x.resetMetadata(!0);
+  }, [x]);
+  return {
+    Stepper: N(() => D(r), [r]),
+    ...x,
+    utils: i,
+    resetStepper: z,
+    getStatus: H,
+    goToStep: m,
+    goToNextStep: L,
+    goToPrevStep: O
+  };
+}, J = (t, e = {}) => {
+  var i;
+  const r = t.reduce((o, s) => {
+    var u;
+    return o = o || {}, o[s.id] ? o[s.id] = {
+      ...o[s.id],
+      status: ((u = o[s.id]) == null ? void 0 : u.status) || s.status || k.Incomplete
+    } : o[s.id] = { status: s.status || k.Incomplete }, o;
+  }, e), a = Object.values(r).filter(
+    (o) => (o == null ? void 0 : o.status) === k.Current
+  );
+  if (a.length > 1)
+    throw new Error("More than one status set to `current`");
+  return a.length === 0 && ((r[i = t[0].id] ?? (r[i] = {})).status = k.Current), r;
+};
+export {
+  J as processMetadata,
+  Y as useBeamStepper
+};

package/lib/Switch/Switch.cjs.js

@@ -0,0 +1 @@
+var W=require("../../assets/Switch.css");Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),z=require("clsx"),A=require("../../chunks/classNames.DAeKwerT.js"),J=require("../../chunks/constants.hwjHOsvT.js"),t=require("react"),K=require("../InputChoiceGroup/InputChoiceGroup.context.cjs.js"),L=require("../../chunks/form.context.B1PXIJNq.js");require("../Form/contexts/label.context.cjs.js");require("../Form/contexts/helperText.context.cjs.js");const s={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-switch--read-only":"bm-switch--read-only","bm-switch--disabled":"bm-switch--disabled","bm-switch__label":"bm-switch__label","bm-switch":"bm-switch","bm-switch__switchBackground":"bm-switch__switchBackground","bm-switch--before":"bm-switch--before","bm-switch--after":"bm-switch--after"},{baseClassNamePrefix:Q,subElementClassPrefix:q,classModifierPrefix:h}=A.getBEMClassNames("switch"),U=t.forwardRef(function({theme:u,onText:i,offText:r,textPosition:b,readOnly:N,disabled:R,...m},j){const{value:x,checked:n,defaultChecked:I,onChange:C,onClick:f,name:S}=m,{ctxName:B,ctxDisabled:O,ctxReadOnly:$}=t.useContext(K.InputChoiceGroupContext),{ctxDisabled:v,ctxReadOnly:D,ctxInitialValues:E}=t.useContext(L.FormContext),l=n!==void 0,w=S||B,o=R||O||v,c=N||$||D,F=!!x&&E[w]===x,k=I||F,_=t.useRef(null),[d,p]=t.useState(n??k??!1),[y,G]=t.useState(null),M=e=>{if(c){e.preventDefault();return}!l&&p(e.target.checked),C&&C(e)},P=e=>{if(c){e.preventDefault();return}f&&f(e)},g=e=>{const{target:T}=e,{current:V}=_;T===V&&e.stopPropagation()};t.useEffect(()=>{l&&p(n)},[n,l]),t.useEffect(()=>{G(d?i||r:r||i)},[i,r,d]);const H=z(s[Q],u&&J.themeClassName(u),b&&s[`${h}${b}`],o&&s[`${h}disabled`],c&&s[`${h}read-only`]);return a.jsx("div",{className:H,children:a.jsxs("label",{tabIndex:-1,ref:_,onBlur:g,onFocus:g,className:s[`${q}label`],children:[a.jsx("input",{ref:j,role:"switch",type:"checkbox",name:w,readOnly:c,disabled:o,"aria-disabled":o,"aria-readonly":c,"aria-checked":d,defaultChecked:k,onClick:P,onChange:M,...m}),a.jsx("span",{className:s[`${q}switchBackground`]}),y&&a.jsx("span",{children:y})]})})});exports.Switch=U;

package/lib/Switch/Switch.d.ts

@@ -0,0 +1,35 @@
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import { TextPosition } from '@viasat/beam-shared/components/switch';
+import { default as React } from 'react';
+export interface SwitchProps extends React.ComponentPropsWithRef<'input'> {
+    /**
+     * Specify a side label for the “on” position. If onText is not specified, side label defaults to offText value.
+     *
+     */
+    onText?: React.ReactNode;
+    /**
+     * Specify a side label for the “off” position. If offText is not specified, side label defaults to onText value.
+     */
+    offText?: React.ReactNode;
+    /**
+     * Specify the position of the side label
+     * @default 'after'
+     */
+    textPosition?: TextPosition;
+    /**
+     * Specify if Switch displays in a read-only state
+     * @default false
+     *
+     */
+    readOnly?: boolean;
+    /**
+     * Specify if Switch displays in a disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Specify the theme of the Alert. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+}
+export declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/lib/Switch/Switch.es.js

@@ -0,0 +1,107 @@
+import "../../assets/Switch.css";
+import { jsx as a, jsxs as K } from "react/jsx-runtime";
+import L from "clsx";
+import { g as Q } from "../../chunks/classNames.DNsS4J__.js";
+import { t as U } from "../../chunks/constants.BBi77pmH.js";
+import d, { forwardRef as W, useState as N, useEffect as R } from "react";
+import { InputChoiceGroupContext as X } from "../InputChoiceGroup/InputChoiceGroup.context.es.js";
+import { F as Y } from "../../chunks/form.context.CNWjF5qA.js";
+import "../Form/contexts/label.context.es.js";
+import "../Form/contexts/helperText.context.es.js";
+const t = {
+  "bm-light": "bm-light",
+  "bm-dark": "bm-dark",
+  "bm-inverse": "bm-inverse",
+  "bm-switch--read-only": "bm-switch--read-only",
+  "bm-switch--disabled": "bm-switch--disabled",
+  "bm-switch__label": "bm-switch__label",
+  "bm-switch": "bm-switch",
+  "bm-switch__switchBackground": "bm-switch__switchBackground",
+  "bm-switch--before": "bm-switch--before",
+  "bm-switch--after": "bm-switch--after"
+}, { baseClassNamePrefix: Z, subElementClassPrefix: B, classModifierPrefix: m } = Q("switch"), re = W(function({
+  //global props
+  theme: h,
+  //BEAM props
+  onText: o,
+  offText: i,
+  textPosition: b,
+  readOnly: $,
+  disabled: D,
+  ...f
+}, F) {
+  const {
+    value: u,
+    checked: c,
+    defaultChecked: I,
+    onChange: w,
+    onClick: C,
+    name: O
+  } = f, { ctxName: v, ctxDisabled: E, ctxReadOnly: S } = d.useContext(X), {
+    ctxDisabled: j,
+    ctxReadOnly: M,
+    ctxInitialValues: P
+  } = d.useContext(Y), n = c !== void 0, x = O || v, l = D || E || j, s = $ || S || M, G = !!u && P[x] === u, k = I || G, p = d.useRef(null), [r, _] = N(c ?? k ?? !1), [g, V] = N(null), q = (e) => {
+    if (s) {
+      e.preventDefault();
+      return;
+    }
+    !n && _(e.target.checked), w && w(e);
+  }, z = (e) => {
+    if (s) {
+      e.preventDefault();
+      return;
+    }
+    C && C(e);
+  }, y = (e) => {
+    const { target: H } = e, { current: J } = p;
+    H === J && e.stopPropagation();
+  };
+  R(() => {
+    n && _(c);
+  }, [c, n]), R(() => {
+    V(r ? o || i : i || o);
+  }, [o, i, r]);
+  const A = L(
+    t[Z],
+    h && U(h),
+    b && t[`${m}${b}`],
+    l && t[`${m}disabled`],
+    s && t[`${m}read-only`]
+  );
+  return /* @__PURE__ */ a("div", { className: A, children: /* @__PURE__ */ K(
+    "label",
+    {
+      tabIndex: -1,
+      ref: p,
+      onBlur: y,
+      onFocus: y,
+      className: t[`${B}label`],
+      children: [
+        /* @__PURE__ */ a(
+          "input",
+          {
+            ref: F,
+            role: "switch",
+            type: "checkbox",
+            name: x,
+            readOnly: s,
+            disabled: l,
+            "aria-disabled": l,
+            "aria-readonly": s,
+            "aria-checked": r,
+            defaultChecked: k,
+            onClick: z,
+            onChange: q,
+            ...f
+          }
+        ),
+        /* @__PURE__ */ a("span", { className: t[`${B}switchBackground`] }),
+        g && /* @__PURE__ */ a("span", { children: g })
+      ]
+    }
+  ) });
+});
+export {
+  re as Switch
+};

package/lib/Switch/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./Switch.cjs.js");exports.Switch=t.Switch;

package/lib/Switch/index.d.ts

@@ -0,0 +1 @@
+export * from './Switch';

package/lib/Switch/index.es.js

@@ -0,0 +1,4 @@
+import { Switch as t } from "./Switch.es.js";
+export {
+  t as Switch
+};

package/lib/Tabs/Tabs.Group.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),i=require("react"),$=require("../Box/Box.cjs.js"),K=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const Q=require("../../chunks/helpers.COm6C5Gf.js"),m=require("clsx"),c=require("../../chunks/tabs.module.B6iC5RD9.js"),U=require("../../chunks/tokens.Bgac_JPh.js"),X=require("../Button/Button.cjs.js"),O=require("../../chunks/ChevronLeftCurved.JKg9pOxN.js"),N=require("../../chunks/ChevronRightCurved.CoT-Bqyo.js"),Y=require("./TabsContext.cjs.js"),k=require("../../utils/hooks/index.cjs.js"),Z=({children:d,className:h,...f})=>{const{selectedValue:g,setSelectedValue:v,setTabItems:S,fluid:y,orientation:C,setGroupRef:x}=Y.useTabs(),[M,E]=i.useState(!1),[z,G]=i.useState(!1),l=i.useRef(null),{subElementClassPrefix:H}=K.getBEMClassNames("tabs"),n=`${H}group`,s=k.useRTLDirection(l),L=C==="horizontal",R=k.useMobileDetection(),[I,D]=i.useState(!0),[P,V]=i.useState(!1),[F,J]=i.useState(!1);i.useEffect(()=>{if(!g){const t=i.Children.toArray(d);if(t.length===0)return;if(t.length===1){const e=t[0];v(e.props.value),S([e.props.value]);return}const o=t.filter(e=>!e.props.disabled);o.length>0&&v(o[0].props.value),S(t.map(e=>e.props.value))}},[]),i.useEffect(()=>{x(l)},[x]);const _=i.useCallback(()=>{if(!l.current)return;const{scrollLeft:t,scrollWidth:o,clientWidth:e}=l.current,r=2,u=s?{isAtStart:Math.abs(t)<=r,isAtEnd:Math.abs(t)>=o-e-r}:{isAtEnd:t>=o-e-r,isAtStart:t<=r};D(u.isAtStart),V(u.isAtEnd),E(o>e&&!u.isAtEnd),G(o>e&&!u.isAtStart)},[s]);i.useEffect(()=>{if(!L||!l.current)return;const t=l.current,o=()=>{if(!t)return;const{scrollWidth:u,clientWidth:p}=t,b=u>p;J(b),E(b),l.current&&l.current.classList.add(c.styles[`${n}--at-start`]),_()};o(),t.addEventListener("scroll",_,{passive:!0});const e=Q.debounce(o),r=new ResizeObserver(e);return r.observe(t),()=>{t.removeEventListener("scroll",_),r.disconnect(),e.cancel()}},[C,d,_,n,L]);const T=()=>{if(!l.current)return;const t=l.current;s?j(t):w(t)},A=()=>{if(!l.current)return;const t=l.current;s?w(t):j(t)},B=.4,q=.7,j=t=>{const{scrollLeft:o}=t,e=t.clientWidth*B;if(Math.abs(o)<e)t.scrollTo({left:0,behavior:"smooth"});else{const r=t.clientWidth*q;t.scrollBy({left:s?r:-r,behavior:"smooth"})}},w=t=>{const{scrollLeft:o,scrollWidth:e,clientWidth:r}=t,u=s?e-r-Math.abs(o):e-r-o,p=r*B;if(u<p)t.scrollTo({left:s?-(e-r):e-r,behavior:"smooth"});else{const b=t.clientWidth*q;t.scrollBy({left:s?-b:b,behavior:"smooth"})}};return a.jsxs($.Box,{className:m(c.styles[n],y&&c.styles[`${n}--fluid`],C==="vertical"&&c.styles[`${n}--vertical`],h),...f,children:[a.jsx("div",{className:m(c.styles[`${n}__content`],F&&c.styles[`${n}__content--scrollable`],I&&c.styles[`${n}__content--at-start`],P&&c.styles[`${n}__content--at-end`]),ref:l,role:"tablist","aria-orientation":C,"data-direction":s?"rtl":"ltr",children:d}),L&&a.jsxs($.Box,{className:c.styles[`${n}__scroll-container`],...f,children:[a.jsx(W,{side:s?"right":"left",baseClass:n,isVisible:z&&!R,onClick:s?T:A,ariaLabel:s?"Scroll tabs right":"Scroll tabs left",icon:s?a.jsx(N.SvgChevronRightCurved,{}):a.jsx(O.SvgChevronLeftCurved,{})}),a.jsx(W,{side:s?"left":"right",baseClass:n,isVisible:M&&!R,onClick:s?A:T,ariaLabel:s?"Scroll tabs left":"Scroll tabs right",icon:s?a.jsx(O.SvgChevronLeftCurved,{}):a.jsx(N.SvgChevronRightCurved,{})})]})]})},W=({side:d,baseClass:h,isVisible:f,onClick:g,ariaLabel:v,icon:S})=>{const y=m(c.styles[`${h}__scroll-button`],f&&c.styles[`${h}__scroll-button--visible`]);return a.jsx("div",{className:m(c.styles[`${h}__scroll-container--${d}`]),"aria-hidden":"true",children:f&&a.jsx(X.Button,{className:y,onClick:g,"aria-label":v,kind:"ghost",size:"sm",productType:"consumer",iconOnly:!0,iconBefore:S,appearance:"neutral-subtle",style:{background:U.bmSemColorSurface01}})})};exports.TabsGroup=Z;

package/lib/Tabs/Tabs.Group.d.ts

@@ -0,0 +1,10 @@
+import { default as React, ReactElement } from 'react';
+import { Box } from '../Box/Box';
+import { TabsItemProps } from './Tabs.Item';
+export interface TabsGroupProps extends React.ComponentPropsWithoutRef<typeof Box> {
+    /**
+     * Specify the items for the group
+     */
+    children: ReactElement<TabsItemProps> | ReactElement<TabsItemProps>[];
+}
+export declare const TabsGroup: ({ children, className: _className, ...props }: TabsGroupProps) => import("react/jsx-runtime").JSX.Element;

package/lib/Tabs/Tabs.Group.es.js

@@ -0,0 +1,203 @@
+import { jsxs as k, jsx as i } from "react/jsx-runtime";
+import Q, { useState as m, useRef as U, useEffect as E, useCallback as X } from "react";
+import { Box as M } from "../Box/Box.es.js";
+import { g as Y } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { d as Z } from "../../chunks/helpers.Wv7n4ip7.js";
+import _ from "clsx";
+import { s as c } from "../../chunks/tabs.module.DIdPGCch.js";
+import { a as tt } from "../../chunks/tokens.CXaNS8Cf.js";
+import { Button as et } from "../Button/Button.es.js";
+import { S as x } from "../../chunks/ChevronLeftCurved.CX7aH27X.js";
+import { S as z } from "../../chunks/ChevronRightCurved.9hi9Zc8J.js";
+import { useTabs as st } from "./TabsContext.es.js";
+import { useRTLDirection as ot, useMobileDetection as rt } from "../../utils/hooks/index.es.js";
+const _t = ({
+  children: u,
+  className: f,
+  ...d
+}) => {
+  const {
+    selectedValue: L,
+    setSelectedValue: b,
+    setTabItems: S,
+    fluid: g,
+    orientation: p,
+    setGroupRef: R
+  } = st(), [I, T] = m(!1), [D, G] = m(!1), l = U(null), { subElementClassPrefix: V } = Y("tabs"), n = `${V}group`, s = ot(l), C = p === "horizontal", w = rt(), [j, P] = m(!0), [F, q] = m(!1), [J, K] = m(!1);
+  E(() => {
+    if (!L) {
+      const t = Q.Children.toArray(u);
+      if (t.length === 0) return;
+      if (t.length === 1) {
+        const e = t[0];
+        b(e.props.value), S([e.props.value]);
+        return;
+      }
+      const r = t.filter(
+        (e) => !e.props.disabled
+      );
+      r.length > 0 && b(
+        r[0].props.value
+      ), S(
+        t.map(
+          (e) => e.props.value
+        )
+      );
+    }
+  }, []), E(() => {
+    R(l);
+  }, [R]);
+  const v = X(() => {
+    if (!l.current) return;
+    const { scrollLeft: t, scrollWidth: r, clientWidth: e } = l.current, o = 2, a = s ? {
+      isAtStart: Math.abs(t) <= o,
+      isAtEnd: Math.abs(t) >= r - e - o
+    } : {
+      isAtEnd: t >= r - e - o,
+      isAtStart: t <= o
+    };
+    P(a.isAtStart), q(a.isAtEnd), T(r > e && !a.isAtEnd), G(r > e && !a.isAtStart);
+  }, [s]);
+  E(() => {
+    if (!C || !l.current) return;
+    const t = l.current, r = () => {
+      if (!t) return;
+      const { scrollWidth: a, clientWidth: A } = t, h = a > A;
+      K(h), T(h), l.current && l.current.classList.add(c[`${n}--at-start`]), v();
+    };
+    r(), t.addEventListener("scroll", v, { passive: !0 });
+    const e = Z(r), o = new ResizeObserver(e);
+    return o.observe(t), () => {
+      t.removeEventListener("scroll", v), o.disconnect(), e.cancel();
+    };
+  }, [p, u, v, n, C]);
+  const $ = () => {
+    if (!l.current) return;
+    const t = l.current;
+    s ? W(t) : y(t);
+  }, B = () => {
+    if (!l.current) return;
+    const t = l.current;
+    s ? y(t) : W(t);
+  }, O = 0.4, N = 0.7, W = (t) => {
+    const { scrollLeft: r } = t, e = t.clientWidth * O;
+    if (Math.abs(r) < e)
+      t.scrollTo({
+        left: 0,
+        behavior: "smooth"
+      });
+    else {
+      const o = t.clientWidth * N;
+      t.scrollBy({
+        left: s ? o : -o,
+        behavior: "smooth"
+      });
+    }
+  }, y = (t) => {
+    const { scrollLeft: r, scrollWidth: e, clientWidth: o } = t, a = s ? e - o - Math.abs(r) : e - o - r, A = o * O;
+    if (a < A)
+      t.scrollTo({
+        left: s ? -(e - o) : e - o,
+        behavior: "smooth"
+      });
+    else {
+      const h = t.clientWidth * N;
+      t.scrollBy({
+        left: s ? -h : h,
+        behavior: "smooth"
+      });
+    }
+  };
+  return /* @__PURE__ */ k(
+    M,
+    {
+      className: _(
+        c[n],
+        g && c[`${n}--fluid`],
+        p === "vertical" && c[`${n}--vertical`],
+        f
+      ),
+      ...d,
+      children: [
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: _(
+              c[`${n}__content`],
+              J && c[`${n}__content--scrollable`],
+              j && c[`${n}__content--at-start`],
+              F && c[`${n}__content--at-end`]
+            ),
+            ref: l,
+            role: "tablist",
+            "aria-orientation": p,
+            "data-direction": s ? "rtl" : "ltr",
+            children: u
+          }
+        ),
+        C && /* @__PURE__ */ k(M, { className: c[`${n}__scroll-container`], ...d, children: [
+          /* @__PURE__ */ i(
+            H,
+            {
+              side: s ? "right" : "left",
+              baseClass: n,
+              isVisible: D && !w,
+              onClick: s ? $ : B,
+              ariaLabel: s ? "Scroll tabs right" : "Scroll tabs left",
+              icon: s ? /* @__PURE__ */ i(z, {}) : /* @__PURE__ */ i(x, {})
+            }
+          ),
+          /* @__PURE__ */ i(
+            H,
+            {
+              side: s ? "left" : "right",
+              baseClass: n,
+              isVisible: I && !w,
+              onClick: s ? B : $,
+              ariaLabel: s ? "Scroll tabs left" : "Scroll tabs right",
+              icon: s ? /* @__PURE__ */ i(x, {}) : /* @__PURE__ */ i(z, {})
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, H = ({
+  side: u,
+  baseClass: f,
+  isVisible: d,
+  onClick: L,
+  ariaLabel: b,
+  icon: S
+}) => {
+  const g = _(
+    c[`${f}__scroll-button`],
+    d && c[`${f}__scroll-button--visible`]
+  );
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: _(c[`${f}__scroll-container--${u}`]),
+      "aria-hidden": "true",
+      children: d && /* @__PURE__ */ i(
+        et,
+        {
+          className: g,
+          onClick: L,
+          "aria-label": b,
+          kind: "ghost",
+          size: "sm",
+          productType: "consumer",
+          iconOnly: !0,
+          iconBefore: S,
+          appearance: "neutral-subtle",
+          style: { background: tt }
+        }
+      )
+    }
+  );
+};
+export {
+  _t as TabsGroup
+};

package/lib/Tabs/Tabs.Item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),f=require("react"),D=require("clsx"),l=require("../../chunks/tabs.module.B6iC5RD9.js"),C=require("./TabsContext.cjs.js"),G=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const P=require("../Tooltip/Tooltip.cjs.js"),H=require("../../utils/hooks/index.cjs.js"),J=require("../../utils/hooks/useKeyboardNavigation.cjs.js"),L=({value:t,disabled:N=!1,className:T,children:r,icon:c,"aria-label":y,...j})=>{const d=f.useRef(null),[S,$]=f.useState(!1),{selectedValue:E,setSelectedValue:m,fluid:F,orientation:u,size:x,disabled:g,onChange:o,tabItems:h,groupRef:n}=C.useTabs(),a=N||g,_=E===t,v=!!c&&!r,{subElementClassPrefix:M}=G.getBEMClassNames("tabs"),e=`${M}item`,w=D(l.styles[e],_&&l.styles[`${e}--selected`],u&&l.styles[`${e}--${u}`],x&&l.styles[`${e}--${x}`],F&&u==="horizontal"&&l.styles[`${e}--fluid`],a&&l.styles[`${e}--disabled`],v&&l.styles[`${e}--icon-only`],T),K=f.useMemo(()=>`tab-${t}-${Math.random().toString(36).slice(2,9)}`,[t]),R=()=>{a||(m(t),o==null||o(t))},k=(s,B=!1)=>{if(s!==t){if(!(n!=null&&n.current))return;const I=n.current.querySelector(`[data-tab-value="${s}"]`);I&&(I.focus(),B&&(m(s),o==null||o(s)))}},{handleKeyDown:z}=J.useKeyboardNavigation({currentValue:t,items:h||[],containerRef:n||d,dataAttribute:"data-tab-value",disabledClassName:l.styles[`${e}--disabled`],onFocusItem:s=>k(s,!1),onSelectItem:s=>{a||(m(s),o==null||o(s))},isHorizontal:u==="horizontal"}),{ref:O,isOverFlowing:A}=H.useIsOverFlowing();let b=!1;(!r&&c||A)&&(b=!0);const p=()=>{a||$(!0)},q=()=>{$(!1)};return f.useEffect(()=>{var s;d.current&&((s=d.current.querySelector(".bm-floatingui-trigger"))==null||s.removeAttribute("aria-expanded"))},[]),i.jsxs("div",{className:w,ref:d,"data-tab-value":t,role:"tab",id:K,"aria-selected":_,"aria-disabled":a,"aria-controls":`panel-${t}`,tabIndex:a?-1:_?0:-1,onKeyDown:a?void 0:z,onClick:a?void 0:R,onFocus:p,onBlur:q,onMouseEnter:p,onMouseLeave:q,...j,children:[i.jsx(P.Tooltip,{text:y||r,disabled:!b,portalled:!0,open:S&&b,children:i.jsx("div",{className:`${e}__content`,children:i.jsxs("div",{className:`${e}__label`,"aria-label":y,children:[c&&i.jsx("span",{className:`${e}__icon`,children:c}),r&&i.jsx("span",{ref:O,className:`${e}__controlText`,children:r})]})})}),i.jsx("span",{className:`${e}__indicator`})]})};exports.TabsItem=L;

package/lib/Tabs/Tabs.Item.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface TabsItemProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Specify the value of the item
+     */
+    value: string;
+    /**
+     * Specify if an item is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Specify an icon for an item
+     */
+    icon?: React.ReactNode;
+    /**
+     * Specify text for an item
+     */
+    children?: React.ReactNode;
+}
+export declare const TabsItem: ({ value, "disabled": _disabled, "className": _className, children, icon, "aria-label": ariaLabel, ...props }: TabsItemProps) => import("react/jsx-runtime").JSX.Element;