@pismo/marola 0.0.1-alpha.9 → 1.0.0-beta.0

package/dist/components/Table/Table.d.ts

@@ -2,38 +2,55 @@ import { TableTranslations } from './TableContext';
 import { SortType } from '../SortTooltip/SortTooltip';
 import { PaginationProps } from '../Pagination/Pagination';
 
-type ChildrenProps = {
+export type ChildrenProps = {
+    /** Children of the component */
     children: React.ReactNode;
+    /** CSS classes to be applied on the component */
     className?: string;
+    /** Id to be applied as data-testid on the component */
     'data-testid'?: string;
 };
+type ActionProps = {
+    /** Disabled status */
+    disabled?: boolean;
+    /** Functionality to perform once clicked */
+    onClick?: () => void;
+};
+type AlignProps = {
+    /** Alignment */
+    align?: 'left' | 'right' | 'center';
+};
 type TableTheme = 'white' | 'transparent';
-type TableProps = ChildrenProps & {
+export type TableProps = ChildrenProps & {
+    /** Set if the table is full width */
     fullWidth?: boolean;
+    /** Pagination Props */
     paginationProps?: PaginationProps;
+    /** Set theme */
     theme?: TableTheme;
+    /** Set language */
     language?: string;
+    /** Set translations to labels */
     translations?: TableTranslations;
 };
 declare const Table: {
     ({ children, theme, fullWidth, className, paginationProps, language, translations, ...rest }: TableProps): import("react/jsx-runtime").JSX.Element;
-    THead: ({ children, ...rest }: ChildrenProps) => import("react/jsx-runtime").JSX.Element;
-    TBody: ({ children, ...rest }: ChildrenProps) => import("react/jsx-runtime").JSX.Element;
-    Tr: ({ children, onClick, disabled, className, ...rest }: RowOrCellProps) => import("react/jsx-runtime").JSX.Element;
-    Td: ({ children, onClick, disabled, className, align, ...rest }: RowOrCellProps & CellProps) => import("react/jsx-runtime").JSX.Element;
-    Th: ({ children, onSort, sortType, className, classNameTooltip, align, ...rest }: ThProps & CellProps) => import("react/jsx-runtime").JSX.Element;
-};
-type Alignment = 'left' | 'right' | 'center';
-type CellProps = {
-    align?: Alignment;
-};
-type RowOrCellProps = ChildrenProps & {
-    disabled?: boolean;
-    onClick?: () => void;
+    THead: import('react').FunctionComponent<ChildrenProps>;
+    TBody: import('react').FunctionComponent<ChildrenProps>;
+    Tr: import('react').FunctionComponent<TrProps>;
+    Td: import('react').FunctionComponent<TdProps>;
+    Th: import('react').FunctionComponent<ThProps>;
 };
-type ThProps = ChildrenProps & {
+export declare const THead: ({ children, ...rest }: ChildrenProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TBody: ({ children, ...rest }: ChildrenProps) => import("react/jsx-runtime").JSX.Element;
+export type TrProps = ChildrenProps & ActionProps;
+export declare const Tr: ({ children, onClick, disabled, className, ...rest }: TrProps) => import("react/jsx-runtime").JSX.Element;
+export type TdProps = ChildrenProps & ActionProps & AlignProps;
+export declare const Td: ({ children, onClick, disabled, className, align, ...rest }: TdProps) => import("react/jsx-runtime").JSX.Element;
+export type ThProps = ChildrenProps & AlignProps & {
     onSort?: (order: SortType) => void;
     sortType?: SortType;
     classNameTooltip?: string;
 };
+export declare const Th: ({ children, onSort, sortType, className, classNameTooltip, align, ...rest }: ThProps) => import("react/jsx-runtime").JSX.Element;
 export { Table, type TableTranslations };

package/dist/components/Table/Table.js

@@ -1,38 +1,53 @@
 import '../../assets/Table.css';
-import { jsxs as w, jsx as r, Fragment as T } from "react/jsx-runtime";
-import * as c from "react";
-import { useState as u } from "react";
-import { c as h } from "../../clsx-DB4S2d7J.js";
-import { paginationDefaultTranslations as b, Pagination as g } from "../Pagination/Pagination.js";
-import { sortTooltipDefaultTranslations as x, SortTooltip as q } from "../SortTooltip/SortTooltip.js";
-import { TableProvider as N, useTable as C } from "./TableContext.js";
-const L = (l) => /* @__PURE__ */ c.createElement("svg", { width: 7, height: 10, viewBox: "0 0 7 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ c.createElement("g", { clipPath: "url(#clip0_2291_2457)" }, /* @__PURE__ */ c.createElement("path", { d: "M6.41658 3.93794C6.26731 3.93794 6.11798 3.88301 6.00423 3.77314L3.49991 1.35923L0.995768 3.77271C0.767904 3.99243 0.398763 3.99243 0.170898 3.77271C-0.0569661 3.55298 -0.0569661 3.19702 0.170898 2.97729L3.08756 0.164795C3.31543 -0.0549316 3.68457 -0.0549316 3.91243 0.164795L6.8291 2.97729C7.05697 3.19702 7.05697 3.55298 6.8291 3.77271C6.71553 3.88345 6.56605 3.93794 6.41658 3.93794Z", fill: "#1897F3" }), /* @__PURE__ */ c.createElement("path", { opacity: 0.4, d: "M6.41663 5.38022C6.26737 5.38022 6.11804 5.43516 6.00429 5.54502L3.49997 7.95894L0.99528 5.5437C0.767415 5.32397 0.398275 5.32397 0.17041 5.5437C-0.0574544 5.76343 -0.0574544 6.11938 0.17041 6.33911L3.08708 9.15161C3.31494 9.37134 3.68408 9.37134 3.91195 9.15161L6.82861 6.33911C7.05648 6.11938 7.05648 5.76343 6.82861 5.5437C6.71559 5.43472 6.56611 5.38022 6.41663 5.38022Z", fill: "#1897F3" })), /* @__PURE__ */ c.createElement("defs", null, /* @__PURE__ */ c.createElement("clipPath", { id: "clip0_2291_2457" }, /* @__PURE__ */ c.createElement("rect", { width: 7, height: 10, fill: "white" })))), E = "_table_xe8qp_1", v = "_th__wrapper_xe8qp_40", y = "_tr_xe8qp_58", P = "_td_xe8qp_62", t = {
-  table: E,
-  "table--full-width": "_table--full-width_xe8qp_5",
-  "table--white-theme": "_table--white-theme_xe8qp_8",
-  "table--transparent-theme": "_table--transparent-theme_xe8qp_11",
-  "cell--left-alignment": "_cell--left-alignment_xe8qp_14",
-  "cell--center-alignment": "_cell--center-alignment_xe8qp_18",
-  "cell--right-alignment": "_cell--right-alignment_xe8qp_22",
-  th__wrapper: v,
-  "th__wrapper--pressed": "_th__wrapper--pressed_xe8qp_43",
-  "th__wrapper--clickable": "_th__wrapper--clickable_xe8qp_47",
-  "th__sort-icon-container": "_th__sort-icon-container_xe8qp_50",
-  "tr__row-or-cell--disabled": "_tr__row-or-cell--disabled_xe8qp_58",
-  tr: y,
-  td: P,
-  "tr__row-or-cell--clickable": "_tr__row-or-cell--clickable_xe8qp_67",
-  "td__row-or-cell--clickable": "_td__row-or-cell--clickable_xe8qp_68",
-  "td__row-or-cell--disabled": "_td__row-or-cell--disabled_xe8qp_72",
-  "td-wrapper": "_td-wrapper_xe8qp_76"
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import * as h from "react";
+import { useState as w } from "react";
+import { c as g } from "../../clsx-DB4S2d7J.js";
+import { paginationDefaultTranslations as y, Pagination as T } from "../Pagination/Pagination.js";
+import { sortTooltipDefaultTranslations as u, SortTooltip as f } from "../SortTooltip/SortTooltip.js";
+import { TableProvider as N, useTable as x } from "./TableContext.js";
+const C = (p) => /* @__PURE__ */ h.createElement("svg", { width: 7, height: 10, viewBox: "0 0 7 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...p }, /* @__PURE__ */ h.createElement("g", { clipPath: "url(#clip0_2291_2457)" }, /* @__PURE__ */ h.createElement("path", { d: "M6.41658 3.93794C6.26731 3.93794 6.11798 3.88301 6.00423 3.77314L3.49991 1.35923L0.995768 3.77271C0.767904 3.99243 0.398763 3.99243 0.170898 3.77271C-0.0569661 3.55298 -0.0569661 3.19702 0.170898 2.97729L3.08756 0.164795C3.31543 -0.0549316 3.68457 -0.0549316 3.91243 0.164795L6.8291 2.97729C7.05697 3.19702 7.05697 3.55298 6.8291 3.77271C6.71553 3.88345 6.56605 3.93794 6.41658 3.93794Z", fill: "#1897F3" }), /* @__PURE__ */ h.createElement("path", { opacity: 0.4, d: "M6.41663 5.38022C6.26737 5.38022 6.11804 5.43516 6.00429 5.54502L3.49997 7.95894L0.99528 5.5437C0.767415 5.32397 0.398275 5.32397 0.17041 5.5437C-0.0574544 5.76343 -0.0574544 6.11938 0.17041 6.33911L3.08708 9.15161C3.31494 9.37134 3.68408 9.37134 3.91195 9.15161L6.82861 6.33911C7.05648 6.11938 7.05648 5.76343 6.82861 5.5437C6.71559 5.43472 6.56611 5.38022 6.41663 5.38022Z", fill: "#1897F3" })), /* @__PURE__ */ h.createElement("defs", null, /* @__PURE__ */ h.createElement("clipPath", { id: "clip0_2291_2457" }, /* @__PURE__ */ h.createElement("rect", { width: 7, height: 10, fill: "white" })))), L = "_table_1gspp_43", E = "_th__wrapper_1gspp_114", k = "_tr_1gspp_130", v = "_td_1gspp_134", t = {
+  "u-typography-h1": "_u-typography-h1_1gspp_1",
+  "u-typography-h2": "_u-typography-h2_1gspp_8",
+  "u-typography-h3": "_u-typography-h3_1gspp_15",
+  "u-typography-h4": "_u-typography-h4_1gspp_22",
+  "u-typography-h5": "_u-typography-h5_1gspp_29",
+  "u-typography-h6": "_u-typography-h6_1gspp_36",
+  "u-typography-base": "_u-typography-base_1gspp_43",
+  table: L,
+  "u-typography-base--xxl": "_u-typography-base--xxl_1gspp_48",
+  "u-typography-base--xl": "_u-typography-base--xl_1gspp_52",
+  "u-typography-base--lg": "_u-typography-base--lg_1gspp_56",
+  "u-typography-base--sm": "_u-typography-base--sm_1gspp_60",
+  "u-typography-base--bold": "_u-typography-base--bold_1gspp_64",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1gspp_67",
+  "u-typography-base--underlined": "_u-typography-base--underlined_1gspp_70",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1gspp_73",
+  "table--full-width": "_table--full-width_1gspp_81",
+  "table--white-theme": "_table--white-theme_1gspp_84",
+  "table--transparent-theme": "_table--transparent-theme_1gspp_87",
+  "cell--left-alignment": "_cell--left-alignment_1gspp_90",
+  "cell--center-alignment": "_cell--center-alignment_1gspp_94",
+  "cell--right-alignment": "_cell--right-alignment_1gspp_98",
+  th__wrapper: E,
+  "th__wrapper--pressed": "_th__wrapper--pressed_1gspp_117",
+  "th__wrapper--clickable": "_th__wrapper--clickable_1gspp_121",
+  "th__sort-icon-container": "_th__sort-icon-container_1gspp_124",
+  "tr__row-or-cell--disabled": "_tr__row-or-cell--disabled_1gspp_130",
+  tr: k,
+  td: v,
+  "tr__row-or-cell--clickable": "_tr__row-or-cell--clickable_1gspp_139",
+  "td__row-or-cell--clickable": "_td__row-or-cell--clickable_1gspp_140",
+  "td__row-or-cell--disabled": "_td__row-or-cell--disabled_1gspp_144",
+  "td-wrapper": "_td-wrapper_1gspp_148"
 }, B = {
   pt: {
-    ...b.pt,
-    ...x.pt
+    ...y.pt,
+    ...u.pt
   },
   en: {
-    ...b.en,
-    ...x.en
+    ...y.en,
+    ...u.en
   },
   // example to add a new language translation
   es: {
@@ -44,79 +59,79 @@ const L = (l) => /* @__PURE__ */ c.createElement("svg", { width: 7, height: 10,
     of: "de",
     results: "resultados"
   }
-}, d = ({
-  children: l,
+}, l = ({
+  children: p,
   theme: e = "white",
-  fullWidth: a = !0,
-  className: n,
-  paginationProps: _,
-  language: s,
-  translations: o,
-  ...m
+  fullWidth: r = !0,
+  className: o,
+  paginationProps: s,
+  language: _,
+  translations: n,
+  ...d
 }) => {
-  const p = h(
+  const c = g(
     t.table,
-    a ? t["table--full-width"] : "",
+    r ? t["table--full-width"] : "",
     t[`table--${e}-theme`],
-    n
-  ), i = s && B[s] || o;
-  return /* @__PURE__ */ w(N, { initialTranslations: i, children: [
-    /* @__PURE__ */ r("table", { ...m, className: p, children: l }),
-    _ && /* @__PURE__ */ r(g, { ..._, t: i })
+    o
+  ), i = _ && B[_] || n;
+  return /* @__PURE__ */ b(N, { initialTranslations: i, children: [
+    /* @__PURE__ */ a("table", { ...d, className: c, children: p }),
+    s && /* @__PURE__ */ a(T, { ...s, t: i })
   ] });
-}, D = ({ children: l, ...e }) => /* @__PURE__ */ r("thead", { ...e, children: l }), F = ({ children: l, ...e }) => /* @__PURE__ */ r("tbody", { ...e, children: l }), M = ({ children: l, onClick: e, disabled: a, className: n, ..._ }) => {
-  const s = h(
+}, H = ({ children: p, ...e }) => /* @__PURE__ */ a("thead", { ...e, children: p }), P = ({ children: p, ...e }) => /* @__PURE__ */ a("tbody", { ...e, children: p }), D = ({ children: p, onClick: e, disabled: r, className: o, ...s }) => {
+  const _ = g(
     t.tr,
-    e && !a ? t["tr__row-or-cell--clickable"] : a ? t["tr__row-or-cell--disabled"] : "",
-    n
+    e && !r ? t["tr__row-or-cell--clickable"] : r ? t["tr__row-or-cell--disabled"] : "",
+    o
   );
-  return /* @__PURE__ */ r("tr", { ..._, className: s, onClick: () => !a && (e == null ? void 0 : e()), children: l });
-}, O = ({ children: l, onClick: e, disabled: a, className: n, align: _ = "left", ...s }) => {
-  const o = h(
+  return /* @__PURE__ */ a("tr", { ...s, className: _, onClick: () => !r && (e == null ? void 0 : e()), children: p });
+}, M = ({ children: p, onClick: e, disabled: r, className: o, align: s = "left", ..._ }) => {
+  const n = g(
     t.td,
-    e && !a ? t["td__row-or-cell--clickable"] : a ? t["td__row-or-cell--disabled"] : "",
-    t[`cell--${_}-alignment`],
-    n
+    e && !r ? t["td__row-or-cell--clickable"] : r ? t["td__row-or-cell--disabled"] : "",
+    t[`cell--${s}-alignment`],
+    o
   );
-  return /* @__PURE__ */ r("td", { ...s, className: o, onClick: () => !a && (e == null ? void 0 : e()), children: /* @__PURE__ */ r("span", { className: t["td-wrapper"], children: l }) });
-}, $ = ({
-  children: l,
-  onSort: e,
-  sortType: a,
-  className: n,
-  classNameTooltip: _,
-  align: s = "left",
-  ...o
-}) => {
-  const { translations: m } = C(), [p, i] = u(!1), f = h(
+  return /* @__PURE__ */ a("td", { ..._, className: n, onClick: () => !r && (e == null ? void 0 : e()), children: /* @__PURE__ */ a("span", { className: t["td-wrapper"], children: p }) });
+}, O = ({ children: p, onSort: e, sortType: r, className: o, classNameTooltip: s, align: _ = "left", ...n }) => {
+  const { translations: d } = x(), [c, i] = w(!1), m = g(
     t.th__wrapper,
-    p ? t["th__wrapper--pressed"] : "",
+    c ? t["th__wrapper--pressed"] : "",
     e ? t["th__wrapper--clickable"] : "",
-    n
+    o
   );
-  return /* @__PURE__ */ r("th", { ...o, className: t[`cell--${s}-alignment`], children: /* @__PURE__ */ w("span", { className: f, onClick: e && (() => i(!p)), children: [
-    /* @__PURE__ */ r("span", { children: l }),
-    e && /* @__PURE__ */ w(T, { children: [
-      /* @__PURE__ */ r("span", { className: t["th__sort-icon-container"], children: /* @__PURE__ */ r(L, {}) }),
-      /* @__PURE__ */ r(
-        q,
-        {
-          onClose: () => i(!1),
-          onSort: e,
-          show: p,
-          sortType: a,
-          className: _,
-          t: m
-        }
-      )
-    ] })
-  ] }) });
+  return /* @__PURE__ */ a("th", { ...n, className: t[`cell--${_}-alignment`], children: /* @__PURE__ */ a("span", { className: m, onClick: e && (() => i(!c)), children: e ? /* @__PURE__ */ b(
+    f,
+    {
+      onClose: () => i(!1),
+      onSort: e,
+      show: c,
+      sortType: r,
+      className: s,
+      t: d,
+      children: [
+        /* @__PURE__ */ a("span", { children: p }),
+        /* @__PURE__ */ a("span", { className: t["th__sort-icon-container"], children: /* @__PURE__ */ a(C, {}) })
+      ]
+    }
+  ) : /* @__PURE__ */ a("span", { children: p }) }) });
 };
-d.THead = D;
-d.TBody = F;
-d.Tr = M;
-d.Td = O;
-d.Th = $;
+l.THead = H;
+l.THead.displayName = "Table.THead";
+l.TBody = P;
+l.TBody.displayName = "Table.TBody";
+l.Tr = D;
+l.Tr.displayName = "Table.Tr";
+l.Td = M;
+l.Td.displayName = "Table.Td";
+l.Th = O;
+l.Th.displayName = "Table.Th";
 export {
-  d as Table
+  P as TBody,
+  H as THead,
+  l as Table,
+  M as Td,
+  O as Th,
+  D as Tr
 };

package/dist/components/Table/Table.stories.d.ts

@@ -0,0 +1,29 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: {
+        ({ children, theme, fullWidth, className, paginationProps, language, translations, ...rest }: import('./Table').TableProps): import("react/jsx-runtime").JSX.Element;
+        THead: import('react').FunctionComponent<import('./Table').ChildrenProps>;
+        TBody: import('react').FunctionComponent<import('./Table').ChildrenProps>;
+        Tr: import('react').FunctionComponent<import('./Table').TrProps>;
+        Td: import('react').FunctionComponent<import('./Table').TdProps>;
+        Th: import('react').FunctionComponent<import('./Table').ThProps>;
+    };
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    subcomponents: {
+        'Table.THead': import('react').FunctionComponent<unknown>;
+        'Table.TBody': import('react').FunctionComponent<unknown>;
+        'Table.Tr': import('react').FunctionComponent<unknown>;
+        'Table.Th': import('react').FunctionComponent<unknown>;
+        'Table.Td': import('react').FunctionComponent<unknown>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithPagination: Story;
+export declare const WithLanguage: Story;

package/dist/components/Table/_Table.TBody.stories.d.ts

@@ -0,0 +1,14 @@
+import { ChildrenProps } from './Table';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ children, ...rest }: ChildrenProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Table/_Table.THead.stories.d.ts

@@ -0,0 +1,14 @@
+import { ChildrenProps } from './Table';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ children, ...rest }: ChildrenProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Table/_Table.Td.stories.d.ts

@@ -0,0 +1,16 @@
+import { TdProps } from './Table';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ children, onClick, disabled, className, align, ...rest }: TdProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithAlign: Story;
+export declare const Disabled: Story;

package/dist/components/Table/_Table.Th.stories.d.ts

@@ -0,0 +1,15 @@
+import { ThProps } from './Table';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ children, onSort, sortType, className, classNameTooltip, align, ...rest }: ThProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithAlign: Story;

package/dist/components/Table/_Table.Tr.stories.d.ts

@@ -0,0 +1,15 @@
+import { TrProps } from './Table';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ children, onClick, disabled, className, ...rest }: TrProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Disabled: Story;

package/dist/components/Tabs/Tab.d.ts

@@ -1,9 +1,14 @@
 import { ReactNode } from 'react';
 
 export interface TabProps {
+    /** The value to be showing in the tab */
     children: ReactNode;
+    /** The value that corresponds to the panel to show.
+     * e.g. value="1" when this tab is clicked it will show the panel which also has value="1! */
     value: string | number;
+    /** Disable clicking the tab */
     disabled?: boolean;
+    /** data test id */
     dataTestId?: string;
 }
 export declare const Tab: import('react').ForwardRefExoticComponent<TabProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Tabs/Tab.js

@@ -1,8 +1,181 @@
-import "react/jsx-runtime";
-import "react";
-import "../../clsx-DB4S2d7J.js";
-import "../../Tabs.module-yYcTJnj6.js";
-import { T as a } from "../../Tab-CRwnhsj5.js";
+import { jsx as N } from "react/jsx-runtime";
+import * as b from "react";
+import { forwardRef as H, useContext as U, useMemo as j } from "react";
+import { c as k } from "../../clsx-DB4S2d7J.js";
+import { u as B, T as D, s as y } from "../../Tabs.module-jkH1Qjn7.js";
+import { g as L, a as W, u as O, f as $, b as d, _ as q, c as z, P as e, d as A, e as G } from "../../index-CH45lKw7.js";
+import { u as J, c as K } from "../../combineHooksSlotProps-DVjg9PRh.js";
+import { u as Q, a as X } from "../../useCompoundItem-D1iRfg8D.js";
+import { u as Y } from "../../useButton-DNk3wrQp.js";
+const E = "Tab";
+function Z(o) {
+  return L(E, o);
+}
+W(E, ["root", "selected", "disabled"]);
+function ee(o) {
+  return o.size;
+}
+function te(o) {
+  const {
+    value: t,
+    rootRef: s,
+    disabled: n = !1,
+    id: c
+  } = o, a = b.useRef(null), r = Q(c), {
+    value: f,
+    selectionFollowsFocus: p,
+    getTabPanelId: m
+  } = B(), P = b.useMemo(() => ({
+    disabled: n,
+    ref: a,
+    id: r
+  }), [n, a, r]), {
+    id: l,
+    index: R,
+    totalItemCount: g
+  } = X(t ?? ee, P), {
+    getRootProps: h,
+    highlighted: T,
+    selected: i
+  } = J({
+    item: l
+  }), {
+    getRootProps: C,
+    rootRef: u,
+    active: v,
+    focusVisible: I,
+    setFocusVisible: V
+  } = Y({
+    disabled: n,
+    focusableWhenDisabled: !p,
+    type: "button"
+  }), _ = O(a, s, u), M = l !== void 0 ? m(l) : void 0;
+  return {
+    getRootProps: (x = {}) => {
+      const S = $(x), w = K(h, C);
+      return d({}, x, w(S), {
+        role: "tab",
+        "aria-controls": M,
+        "aria-selected": i,
+        id: r,
+        ref: _
+      });
+    },
+    active: v,
+    focusVisible: I,
+    highlighted: T,
+    index: R,
+    rootRef: _,
+    // the `selected` state isn't set on the server (it relies on effects to be calculated),
+    // so we fall back to checking the `value` prop with the selectedValue from the TabsContext
+    selected: i || l === f,
+    setFocusVisible: V,
+    totalTabsCount: g
+  };
+}
+const oe = ["action", "children", "disabled", "onChange", "onClick", "onFocus", "slotProps", "slots", "value"], se = (o) => {
+  const {
+    selected: t,
+    disabled: s
+  } = o;
+  return A({
+    root: ["root", t && "selected", s && "disabled"]
+  }, G(Z));
+}, F = /* @__PURE__ */ b.forwardRef(function(t, s) {
+  var n;
+  const {
+    children: c,
+    disabled: a = !1,
+    slotProps: r = {},
+    slots: f = {},
+    value: p
+  } = t, m = q(t, oe), P = b.useRef(), l = O(P, s), {
+    active: R,
+    highlighted: g,
+    selected: h,
+    getRootProps: T
+  } = te(d({}, t, {
+    rootRef: l,
+    value: p
+  })), i = d({}, t, {
+    active: R,
+    disabled: a,
+    highlighted: g,
+    selected: h
+  }), C = se(i), u = (n = f.root) != null ? n : "button", v = z({
+    elementType: u,
+    getSlotProps: T,
+    externalSlotProps: r.root,
+    externalForwardedProps: m,
+    additionalProps: {
+      ref: s
+    },
+    ownerState: i,
+    className: C.root
+  });
+  return /* @__PURE__ */ N(u, d({}, v, {
+    children: c
+  }));
+});
+process.env.NODE_ENV !== "production" && (F.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * A ref for imperative actions. It currently only supports `focusVisible()` action.
+   */
+  action: e.oneOfType([e.func, e.shape({
+    current: e.shape({
+      focusVisible: e.func.isRequired
+    })
+  })]),
+  /**
+   * @ignore
+   */
+  children: e.node,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: e.bool,
+  /**
+   * Callback invoked when new value is being set.
+   */
+  onChange: e.func,
+  /**
+   * The props used for each slot inside the Tab.
+   * @default {}
+   */
+  slotProps: e.shape({
+    root: e.oneOfType([e.func, e.object])
+  }),
+  /**
+   * The components used for each slot inside the Tab.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: e.shape({
+    root: e.elementType
+  }),
+  /**
+   * You can provide your own value. Otherwise, it falls back to the child position index.
+   */
+  value: e.oneOfType([e.number, e.string])
+});
+const fe = H(
+  ({ children: o, value: t, disabled: s, dataTestId: n }, c) => {
+    const a = U(D), r = j(
+      () => k(
+        y.tabs__tab,
+        t === (a == null ? void 0 : a.value) && y["tabs__tab--selected"],
+        s && y["tabs__tab--disabled"]
+      ),
+      [t, a, s]
+    );
+    return /* @__PURE__ */ N(F, { className: r, disabled: s, value: t, "data-testid": n, ref: c, children: o });
+  }
+);
 export {
-  a as Tab
+  fe as Tab
 };

package/dist/components/Tabs/Tab.stories.d.ts

@@ -0,0 +1,15 @@
+import { TabProps } from './Tabs.tsx';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<TabProps & import('react').RefAttributes<HTMLButtonElement>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const Disabled: Story;

package/dist/components/Tabs/TabPanel.d.ts

@@ -1,8 +1,12 @@
 import { ReactNode } from 'react';
 
 export interface TabPanelProps {
+    /** The content to be displayed when the corresponding tab is selected */
     children: ReactNode;
+    /** The value that identifies which tab is selected.
+     * e.g. value="1" when the tab button with the value="1" is selected this content will show */
     value: string | number;
+    /** Test id */
     dataTestId?: string;
 }
 export declare const TabPanel: import('react').ForwardRefExoticComponent<TabPanelProps & import('react').RefAttributes<HTMLDivElement>>;