@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/table/parts/TablePagination.d.ts

@@ -0,0 +1,135 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+import { ClientSidePaginationProps } from '../../client-side-pagination/ClientSidePagination.js';
+export declare const tablePagination: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+type PageSizeOption = {
+    value: string;
+    label: string;
+};
+export interface TablePaginationProps extends PropsWithChildren<VariantProps<typeof tablePagination>> {
+    /**
+     * The total number of pages to display
+     */
+    pageCount: number;
+    /**
+     * Represents the total number of rows that are available or being counted.
+     * This variable typically holds a numeric value to indicate the total count of rows
+     * relevant for a specific process, dataset, or operation.
+     */
+    rowCount: number;
+    /**
+     * The number of rows per page
+     */
+    rowsPerPage: number;
+    /**
+     * Represents the current page being viewed or processed in a paginated dataset.
+     * This variable may be optional depending on the application logic and usage context,
+     * and can hold either a numeric value indicating the current page or remain undefined
+     * if not explicitly set.
+     */
+    currentPage?: number;
+    /**
+     * The initial page to display when in uncontrolled mode
+     */
+    defaultPage?: number;
+    /**
+     * Represents the default number of items to display per page in a paginated view.
+     * The value is expected to correspond to one of the selectable options available via `PageSizeOption`.
+     * This property is optional and can be left undefined, in which case a default behavior may apply.
+     */
+    defaultPageSize?: PageSizeOption['value'];
+    /**
+     * A callback function that is triggered when a page is hovered over in the pagination component.
+     *
+     * This function is intended for handling hover events on individual pagination controls or elements.
+     * It is derived from the `onPageHover` property in the `Pagination` component.
+     */
+    onPageHover?: ClientSidePaginationProps['onPageHover'];
+    /**
+     * Callback fired when the page changes
+     * @param page - The new page number
+     * @param previous - The previous page number
+     * @param direction - The direction of navigation (1 for forward, -1 for backward)
+     */
+    onPageChange?: ClientSidePaginationProps['onPageChange'];
+    /**
+     * Optional callback for next button press
+     */
+    onNextPress?: ClientSidePaginationProps['onNextPress'];
+    /**
+     * Optional callback for previous button press
+     */
+    onPreviousPress?: ClientSidePaginationProps['onPreviousPress'];
+    /**
+     * The options for the number of rows per page selection dropdown.
+     * If not provided, the default options will be used.
+     * @default [
+     *   { value: '10', label: '10' },
+     *   { value: '50', label: '50' },
+     *   { value: '100', label: '100' },
+     *   { value: '200', label: '200' },
+     * ]
+     */
+    pageSizeOptions?: PageSizeOption[];
+    /**
+     * Callback fired when the number of rows per page changes
+     * @param pageSize - The new number of rows per page
+     */
+    onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * The label name that each row in the table represents
+     * @default 'unity:component:table:pagination:item'
+     */
+    itemLabel?: string;
+}
+/**
+ * The `TablePagination` component provides pagination controls for tables with large datasets.
+ * It displays the current range of items being shown, pagination controls, and a dropdown to change the number of rows per page.
+ * @note This is a **stateless** component, meaning that it does not manage its own state, and you have to provide the necessary callbacks to handle page changes and row count changes.
+ * @param {TablePaginationProps} props - The props for the `TablePagination` component
+ * @param {number} props.pageCount - The total number of pages
+ * @param {number} props.rowCount - The total number of rows in the dataset
+ * @param {number} props.rowsPerPage - The number of rows per page
+ * @param {number} [props.currentPage] - The current page (for controlled pagination)
+ * @param {number} [props.defaultPage] - The initial page (for uncontrolled pagination)
+ * @param {PageSizeOption[]} [props.pageSizeOptions] - Options for the number of rows per page dropdown
+ * @param {string} [props.defaultPageSize] - The default number of rows per page
+ * @param {Function} [props.onPageChange] - Callback when the page changes
+ * @param {Function} [props.onPageSizeChange] - Callback when the number of rows per page changes
+ * @param {string} [props.itemLabel] - Label for the items being paginated
+ * @example
+ * ```tsx
+ * import { TablePagination } from '@payfit/unity-components'
+ *
+ * <TablePagination
+ *   pageCount={10}
+ *   rowCount={100}
+ *   rowsPerPage={10}
+ *   currentPage={1}
+ *   onPageChange={(page) => console.log(`Page changed to ${page}`)}
+ * />
+ * ```
+ * @example
+ * ```tsx
+ * // With custom page size options
+ * import { TablePagination } from '@payfit/unity-components'
+ *
+ * <TablePagination
+ *   pageCount={5}
+ *   rowCount={50}
+ *   rowsPerPage={10}
+ *   pageSizeOptions={[
+ *     { value: '5', label: '5' },
+ *     { value: '10', label: '10' },
+ *     { value: '25', label: '25' },
+ *   ]}
+ *   onPageSizeChange={(size) => console.log(`Page size changed to ${size}`)}
+ * />
+ * ```
+ * @see {@link TablePaginationProps} for all available props
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table-tableheader--docs|API and Demos} •
+ * {@link https://payfit.design|Design docs}
+ */
+declare const TablePagination: import('react').ForwardRefExoticComponent<TablePaginationProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TablePagination };

package/dist/esm/components/table/parts/TablePagination.js

@@ -0,0 +1,141 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { forwardRef as C, useState as I } from "react";
+import { uyTv as j } from "@payfit/unity-themes";
+import { useId as L } from "react-aria/useId";
+import { useIntl as T } from "react-intl";
+import { ClientSidePagination as O } from "../../client-side-pagination/ClientSidePagination.js";
+import { SelectOption as R } from "../../select/parts/SelectOption.js";
+import { Select as E } from "../../select/Select.js";
+const _ = j({
+  base: [
+    "uy:bg-surface-neutral-low",
+    "uy:sticky uy:bottom-0",
+    "uy:grid uy:grid-cols-3 uy:items-center",
+    "uy:ps-200 uy:py-100 uy:pe-100"
+  ]
+}), k = [
+  { value: "10", label: "10" },
+  { value: "50", label: "50" },
+  { value: "100", label: "100" },
+  { value: "200", label: "200" }
+], A = C(
+  (b, y) => {
+    const {
+      pageCount: i,
+      rowCount: n,
+      currentPage: r,
+      rowsPerPage: s,
+      defaultPage: u,
+      pageSizeOptions: f = k,
+      defaultPageSize: h = s,
+      onPageChange: P,
+      onNextPress: v,
+      onPreviousPress: N,
+      onPageSizeChange: S,
+      onPageHover: z,
+      itemLabel: g = "unity:component:table:pagination:item",
+      ...w
+    } = b, a = L(), t = T(), [M, $] = I(h), x = {
+      pageCount: i,
+      defaultPage: u,
+      currentPage: r,
+      onPageChange: P,
+      onNextPress: v,
+      onPreviousPress: N,
+      onPageHover: z
+    }, o = Math.max(((r ?? u ?? 1) - 1) * s + 1, 1), p = Math.min(o + s - 1, n), c = {
+      singular: t.formatMessage(
+        {
+          id: g,
+          defaultMessage: "items"
+        },
+        { count: 1 }
+      ),
+      plural: t.formatMessage(
+        {
+          id: g,
+          defaultMessage: "items"
+        },
+        { count: 2 }
+      )
+    };
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        "data-dd-privacy": "allow",
+        ...w,
+        ref: y,
+        className: _(),
+        "data-unity-slot": "table-pagination",
+        children: [
+          /* @__PURE__ */ e("div", { className: "uy:justify-self-start", children: /* @__PURE__ */ e(
+            "span",
+            {
+              id: `table-pagination-${a}-label`,
+              className: "uy:typography-body uy:text-content-neutral",
+              children: t.formatMessage(
+                {
+                  id: "unity:component:table:pagination:label",
+                  defaultMessage: `${o}-${p} out of ${n} items`
+                },
+                {
+                  pageCount: i,
+                  startRow: o,
+                  endRow: p,
+                  totalRows: n,
+                  itemLabel: c.plural
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ e("div", { className: "uy:justify-self-center", children: i > 1 && /* @__PURE__ */ e(
+            O,
+            {
+              ...x,
+              "aria-labelledby": `table-pagination-${a}-label`
+            }
+          ) }),
+          /* @__PURE__ */ e("div", { className: "uy:justify-self-end", children: /* @__PURE__ */ d("form", { className: "uy:flex uy:gap-100 uy:items-center", children: [
+            /* @__PURE__ */ e(
+              "label",
+              {
+                className: "uy:shrink-0",
+                id: `table-pagination-${a}-pagesize-label`,
+                htmlFor: `table-pagination-${a}-pagesize-select`,
+                children: t.formatMessage(
+                  {
+                    id: "unity:component:table:pagination:page-size-control-label",
+                    defaultMessage: "Items per page"
+                  },
+                  {
+                    itemLabel: c.plural
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ e("div", { className: "uy:grow-0 uy:w-1000", children: /* @__PURE__ */ e(
+              E,
+              {
+                id: `table-pagination-${a}-pagesize-select`,
+                items: f,
+                placeholder: "",
+                value: `${M}`,
+                onChange: (l) => {
+                  const m = parseInt(l, 10);
+                  S?.(m), $(m);
+                },
+                "aria-labelledby": `table-pagination-${a}-pagesize-label`,
+                children: (l) => /* @__PURE__ */ e(R, { id: l.value, children: l.label })
+              }
+            ) })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+A.displayName = "TablePagination";
+export {
+  A as TablePagination,
+  _ as tablePagination
+};

package/dist/esm/components/table/parts/TableRow.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    rowIndex?: number;
+    isSelected?: boolean;
+}
+export declare const tableRow: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+/**
+ * The `TableRow` component renders a row in the table, containing cells of data.
+ * It automatically processes its children to add row and column indices and handles selection state.
+ * @param {TableRowProps} props - The props for the `TableRow` component
+ * @param {ReactNode} props.children - The cells to render (typically TableCell components)
+ * @param {number} [props.rowIndex=0] - The index of the row (automatically set by TableBody)
+ * @param {boolean} [props.isSelected] - Whether the row is selected
+ * @example
+ * ```tsx
+ * import { TableRow, TableCell } from '@payfit/unity-components'
+ *
+ * <TableRow>
+ *   <TableCell isRowHeader>John Doe</TableCell>
+ *   <TableCell>john.doe@example.com</TableCell>
+ *   <TableCell>Engineering</TableCell>
+ * </TableRow>
+ * ```
+ * @example
+ * ```tsx
+ * // With selection
+ * import { TableRow, TableCell } from '@payfit/unity-components'
+ *
+ * <TableRow isSelected={true}>
+ *   <TableCell>Selected row content</TableCell>
+ * </TableRow>
+ * ```
+ * @see {@link TableRowProps} for all available props
+ * @see {@link TableCell} for the cell component
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table-tablerow--docs|API and Demos} •
+ * {@link https://payfit.design|Design docs}
+ */
+declare const TableRow: React.MemoExoticComponent<React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>>;
+export { TableRow };

package/dist/esm/components/table/parts/TableRow.js

@@ -0,0 +1,52 @@
+import { jsx as y } from "react/jsx-runtime";
+import c, { memo as f, forwardRef as m, useMemo as a, Children as p, cloneElement as v } from "react";
+import { uyTv as w } from "@payfit/unity-themes";
+const R = w({
+  base: [
+    "uy:group uy:h-500",
+    "uy:bg-surface-neutral uy:border-b uy:border-solid uy:border-b-border-neutral-enabled",
+    "uy:transition-colors uy:duration-200 uy:ease-in-out",
+    "uy:hover:border-b-border-neutral-hover uy:hover:bg-surface-neutral-low-hover",
+    "uy:aria-[selected=true]:bg-surface-neutral-selected uy:aria-[selected=true]:border-b-border-neutral-selected",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-[-2px] uy:focus-visible:outline-utility-focus-ring"
+  ]
+}), g = f(
+  m(
+    ({ children: o, className: u, rowIndex: r = 0, onKeyDown: s, isSelected: t, ...l }, i) => {
+      const n = a(
+        () => R({ className: u }),
+        [u]
+      ), b = a(() => p.map(o, (e, d) => c.isValidElement(e) ? v(
+        e,
+        {
+          rowIndex: r,
+          colIndex: d,
+          ...e.props
+        }
+      ) : e), [o, r]);
+      return /* @__PURE__ */ y(
+        "tr",
+        {
+          ref: i,
+          role: "row",
+          className: n,
+          "aria-rowindex": r + 1,
+          "data-index": r + 1,
+          "aria-selected": t,
+          onKeyDown: (e) => {
+            s?.(e);
+          },
+          "data-dd-privacy": "mask",
+          "data-selectable": t !== void 0,
+          ...l,
+          children: b
+        }
+      );
+    }
+  )
+);
+g.displayName = "TableRow";
+export {
+  g as TableRow,
+  R as tableRow
+};

package/dist/esm/components/tabs/Tabs.context.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+import { tabsVariant } from './Tabs.variant.js';
+interface TabsContextValue {
+    variant: VariantProps<typeof tabsVariant>['variant'];
+    scrollable: boolean;
+}
+export declare const TabsContext: import('react').Context<TabsContextValue>;
+export declare function TabsProvider({ children, variant, scrollable, }: PropsWithChildren<TabsContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function useTabsContext(): TabsContextValue;
+export {};

package/dist/esm/components/tabs/Tabs.context.js

@@ -0,0 +1,24 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as s, useContext as a } from "react";
+const r = s({
+  variant: "primary",
+  scrollable: !1
+});
+function x({
+  children: t,
+  variant: e,
+  scrollable: o
+}) {
+  return /* @__PURE__ */ n(r.Provider, { value: { variant: e, scrollable: o }, children: t });
+}
+function b() {
+  const t = a(r);
+  if (!t)
+    throw new Error("useTabsContext must be used within an TabsProvider");
+  return t;
+}
+export {
+  r as TabsContext,
+  x as TabsProvider,
+  b as useTabsContext
+};

package/dist/esm/components/tabs/Tabs.d.ts

@@ -0,0 +1,12 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { TabsProps as AriaTabsProps } from 'react-aria-components/Tabs';
+import { tabsVariant } from './Tabs.variant.js';
+export interface TabsProps extends Omit<AriaTabsProps, 'isDisabled' | 'orientation' | 'className' | 'style' | 'disabledKeys' | 'keyboardActivation' | 'slot'>, VariantProps<typeof tabsVariant> {
+    /** set to true to make the tabs scrollable */
+    scrollable?: boolean;
+}
+/**
+ * Tabs allow users to explore and switch between different views.
+ */
+declare const Tabs: import('react').ForwardRefExoticComponent<TabsProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Tabs };

package/dist/esm/components/tabs/Tabs.js

@@ -0,0 +1,24 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import { Tabs as f } from "react-aria-components/Tabs";
+import { TabsProvider as p } from "./Tabs.context.js";
+import { tabsVariant as d } from "./Tabs.variant.js";
+const b = e(
+  ({ children: s, variant: r, scrollable: a = !1, ...m }, t) => {
+    const { base: i } = d({ variant: r, scrollable: a });
+    return /* @__PURE__ */ o(p, { variant: r, scrollable: a, children: /* @__PURE__ */ o(
+      f,
+      {
+        "data-dd-privacy": "allow",
+        ref: t,
+        className: i(),
+        ...m,
+        children: s
+      }
+    ) });
+  }
+);
+b.displayName = "Tabs";
+export {
+  b as Tabs
+};

package/dist/esm/components/tabs/Tabs.variant.d.ts

@@ -0,0 +1,70 @@
+export declare const tabsVariant: import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: {
+            tab: string[];
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            scroller: string;
+        };
+    };
+}, {
+    base: string;
+    tabList: string;
+    scroller: string;
+    tab: string[];
+}, undefined, {
+    variant: {
+        primary: {
+            tab: string[];
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            scroller: string;
+        };
+    };
+}, {
+    base: string;
+    tabList: string;
+    scroller: string;
+    tab: string[];
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: {
+            tab: string[];
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            scroller: string;
+        };
+    };
+}, {
+    base: string;
+    tabList: string;
+    scroller: string;
+    tab: string[];
+}, undefined, unknown, unknown, undefined>>;

package/dist/esm/components/tabs/Tabs.variant.js

@@ -0,0 +1,42 @@
+import { uyTv as t } from "@payfit/unity-themes";
+const a = t({
+  slots: {
+    base: "uy:w-full",
+    tabList: "uy:flex uy:gap-250 uy:mb-25",
+    scroller: "uy:overflow-x-auto uy:overflow-y-hidden [scrollbar-width:thin]",
+    tab: [
+      "uy:flex uy:relative uy:shrink-0 uy:gap-100 uy:whitespace-nowrap uy:min-w-[3ch] uy:text-center uy:text-content-neutral-lowest-enabled uy:py-125 uy:cursor-pointer",
+      "uy:theme-legacy:typography-action uy:theme-legacy:rounded-75",
+      "uy:theme-rebrand:z-10 uy:theme-rebrand:min-h-[44px] uy:theme-rebrand:items-center uy:theme-rebrand:justify-center uy:theme-rebrand:typography-action-large uy:theme-rebrand:sm:typography-action uy:theme-rebrand:rounded-100",
+      'uy:data-[selected]:text-content-form-enabled uy:data-[selected]:after:block uy:data-[selected]:after:content:" " uy:data-[selected]:after:w-full uy:data-[selected]:after:h-25 uy:data-[selected]:after:absolute uy:data-[selected]:after:bottom-0 uy:data-[selected]:after:left-0 uy:data-[selected]:after:right-0 uy:data-[selected]:after:rounded-pill',
+      'uy:data-[status=active]:text-content-form-enabled uy:data-[status=active]:after:block uy:data-[status=active]:after:content:" " uy:data-[status=active]:after:w-full uy:data-[status=active]:after:h-25 uy:data-[status=active]:after:absolute uy:data-[status=active]:after:bottom-0 uy:data-[status=active]:after:left-0 uy:data-[status=active]:after:right-0 uy:data-[status=active]:after:rounded-pill',
+      "uy:hover:cursor-pointer uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:theme-legacy:focus-visible:outline-offset-[4px] uy:theme-rebrand:focus-visible:outline-offset-0"
+    ]
+  },
+  variants: {
+    variant: {
+      primary: {
+        tab: [
+          "uy:theme-legacy:data-[selected]:after:bg-border-neutral-active uy:theme-legacy:data-[status=active]:after:bg-border-neutral-active",
+          "uy:theme-rebrand:data-[selected]:after:bg-surface-primary uy:theme-rebrand:data-[status=active]:after:bg-surface-primary"
+        ]
+      },
+      neutral: {
+        tab: "uy:data-[selected]:after:bg-content-neutral uy:data-[status=active]:after:bg-content-neutral"
+      }
+    },
+    scrollable: {
+      true: {
+        tabList: ""
+      },
+      false: {
+        base: "",
+        scroller: ""
+      }
+    }
+  },
+  defaultVariants: { variant: "primary", scrollable: !1 }
+});
+export {
+  a as tabsVariant
+};

package/dist/esm/components/tabs/figma/Tabs.figma.d.ts

@@ -0,0 +1,7 @@
+import { default as figma } from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/esm/components/tabs/parts/NavigationButton.d.ts

@@ -0,0 +1,7 @@
+import { ButtonProps } from 'react-aria-components/Button';
+type Direction = 'left' | 'right';
+interface NavigationButtonProps extends Pick<ButtonProps, 'onPress'> {
+    direction: Direction;
+}
+declare const NavigationButton: ({ direction, onPress }: NavigationButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { NavigationButton };

package/dist/esm/components/tabs/parts/NavigationButton.js

@@ -0,0 +1,47 @@
+import { jsx as e } from "react/jsx-runtime";
+import { uyTv as a } from "@payfit/unity-themes";
+import { Button as y } from "react-aria-components/Button";
+import { Icon as n } from "../../icon/Icon.js";
+const s = a({
+  slots: {
+    base: "uy:absolute uy:pt-150 uy:pb-150",
+    button: [
+      "uy:hover:text-content-neutral-hover uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
+      "uy:theme-legacy:rounded-circle",
+      "uy:theme-rebrand:rounded-75"
+    ],
+    icon: "uy:text-content-neutral-enabled"
+  },
+  variants: {
+    direction: {
+      left: {
+        base: "uy:top-0 uy:left-0 uy:z-10 uy:bg-gradient-to-r uy:from-grayscale-l0/100 uy:to-grayscale-L0/0 uy:pl-50 uy:pr-200"
+      },
+      right: {
+        base: "uy:right-0 uy:top-0 uy:z-10 uy:bg-gradient-to-l uy:from-grayscale-l0/100 uy:to-grayscale-L0/0 uy:pl-200 uy:pr-50"
+      }
+    }
+  }
+}), g = ({ direction: t, onPress: u }) => {
+  const { base: o, button: l, icon: r } = s({ direction: t });
+  return /* @__PURE__ */ e("div", { className: o(), children: /* @__PURE__ */ e(
+    y,
+    {
+      id: `scroll-${t}`,
+      className: l(),
+      "aria-label": `Scroll ${t}`,
+      onPress: u,
+      children: /* @__PURE__ */ e(
+        n,
+        {
+          className: r(),
+          "aria-labelledby": `scroll-${t}`,
+          src: t === "left" ? "CaretLeftOutlined" : "CaretRightOutlined"
+        }
+      )
+    }
+  ) });
+};
+export {
+  g as NavigationButton
+};

package/dist/esm/components/tabs/parts/RawTab.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { TabProps as AriaTabProps, Key } from 'react-aria-components/Tabs';
+export interface TabProps extends Omit<AriaTabProps, 'isDisabled' | 'className' | 'style' | 'download' | 'ping' | 'routerOptions' | 'id'> {
+    id: Key | undefined;
+    suffix?: ReactNode;
+}
+declare const RawTab: import('react').ForwardRefExoticComponent<TabProps & {
+    children?: ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { RawTab };

package/dist/esm/components/tabs/parts/RawTab.js

@@ -0,0 +1,18 @@
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { Tab as b } from "react-aria-components/Tabs";
+import { useTabsContext as c } from "../Tabs.context.js";
+import { tabsVariant as f } from "../Tabs.variant.js";
+const d = p(
+  ({ children: a, suffix: r, id: o, ...t }, s) => {
+    const { variant: m, scrollable: n } = c(), { tab: e } = f({ variant: m, scrollable: n });
+    return /* @__PURE__ */ i(b, { ...t, ref: s, id: o, className: e(), children: [
+      a,
+      r ? /* @__PURE__ */ l("span", { children: r }) : null
+    ] });
+  }
+);
+d.displayName = "RawTab";
+export {
+  d as RawTab
+};

package/dist/esm/components/tabs/parts/TabList.d.ts

@@ -0,0 +1,4 @@
+declare const TabList: import('react').ForwardRefExoticComponent<object & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { TabList };