@moneyforward/mfui-components 2.48.1

package/dist/esm/src/Stack/Stack.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { stackSlotRecipe } from '../../styled-system/recipes';
+import { cx } from '../../styled-system/css';
+import { token } from '../../styled-system/tokens';
+const assertIsSpacingToken = (value) => typeof value === 'string' && value.startsWith('mfui.');
+/**
+ * Check if value is a grid token shorthand
+ * Examples: "horizontal.1", "vertical.0-1of2"
+ *
+ * @param value - Value to check
+ */
+const assertIsGridToken = (value) => typeof value === 'string' && (value.startsWith('horizontal.') || value.startsWith('vertical.'));
+/**
+ * Convert grid token shorthand to full token path
+ * Example: "horizontal.1" -> "mfui.layout.grid.scale.horizontal.1"
+ *
+ * @param gap - Grid token shorthand or numeric value
+ */
+const resolveGridToken = (gap) => {
+    if (typeof gap !== 'string')
+        return gap;
+    if (gap.startsWith('horizontal.') || gap.startsWith('vertical.')) {
+        const parts = gap.split('.');
+        const direction = parts[0];
+        const scale = parts.slice(1).join('.');
+        if (direction && scale) {
+            return `mfui.layout.grid.scale.${direction}.${scale}`;
+        }
+    }
+    return gap;
+};
+/**
+ * Convert shorthand token name to full comfort token
+ * Example: "icon-and-text.horizontal" -> "mfui.size.spacing.icon-and-text.horizontal.comfort"
+ *
+ * @param gap - Spacing token or numeric value
+ */
+const resolveSpacingToken = (gap) => {
+    if (typeof gap !== 'string')
+        return gap;
+    // Convert shorthand to full comfort token
+    if (gap.includes('.') && !gap.includes('px')) {
+        return `mfui.size.spacing.${gap}.comfort`;
+    }
+    return gap;
+};
+/**
+ * Component helps you easily create flexible and automatically distributed layouts
+ *
+ * You can stack elements in the horizontal or vertical direction,
+ * and apply a space between each element.
+ *
+ * It uses `display: flex` internally and renders a `div`.
+ *
+ * Also extends the props of the `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export const Stack = forwardRef(({ direction, gap, wrap, alignItems, justifyContent, children, className, style, ...props }, ref) => {
+    const classes = stackSlotRecipe({});
+    // Resolve gap value - handle shortcuts and token conversion
+    const resolvedGap = gap !== undefined
+        ? (() => {
+            // Priority 1: Grid tokens (new, recommended): "horizontal.1"
+            if (assertIsGridToken(gap)) {
+                const fullToken = resolveGridToken(gap);
+                if (typeof fullToken === 'string') {
+                    return token(`sizes.${fullToken}`);
+                }
+                return fullToken;
+            }
+            // Priority 2: Spacing tokens (deprecated): "inline.horizontal"
+            const fullToken = resolveSpacingToken(gap);
+            return assertIsSpacingToken(fullToken) ? token(`spacing.${fullToken}`) : fullToken;
+        })()
+        : undefined;
+    // Only include styles for explicitly provided props
+    const inlineStyle = {
+        ...style,
+        ...(direction !== undefined && { flexDirection: direction }),
+        ...(gap !== undefined && { gap: resolvedGap }),
+        ...(wrap !== undefined && { flexWrap: wrap }),
+        ...(alignItems !== undefined && { alignItems }),
+        ...(justifyContent !== undefined && { justifyContent }),
+    };
+    return (_jsx("div", { ref: ref, ...props, className: cx(classes.root, 'mfui-Stack__root', className), style: inlineStyle, children: children }));
+});
+/**
+ * This component is inherited from the Stack component and helps you create a horizontal stack layout.
+ *
+ * It supports a `reverse` prop to reverse the direction of the children.
+ *
+ * Also extends the props of the `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export const HStack = forwardRef(({ reverse = false, ...props }, ref) => (_jsx(Stack, { ref: ref, direction: reverse ? 'row-reverse' : 'row', ...props })));
+/**
+ * This component is inherited from the Stack component and helps you create a vertical stack layout.
+ *
+ * It supports a `reverse` prop to reverse the direction of the children.
+ *
+ * Also extends the props of the `<div>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+ */
+export const VStack = forwardRef(({ reverse = false, ...props }, ref) => (_jsx(Stack, { ref: ref, direction: reverse ? 'column-reverse' : 'column', ...props })));

package/dist/esm/src/Stack/Stack.types.d.ts

@@ -0,0 +1,81 @@
+import { type ComponentPropsWithoutRef, type CSSProperties, type ReactNode } from 'react';
+import { type SpacingToken, type SizeToken } from '../../styled-system/tokens';
+type GridScaleHorizontalToken = Extract<SizeToken, `mfui.layout.grid.scale.horizontal.${string}`>;
+type GridScaleVerticalToken = Extract<SizeToken, `mfui.layout.grid.scale.vertical.${string}`>;
+type GridScaleHorizontalValue = GridScaleHorizontalToken extends `mfui.layout.grid.scale.horizontal.${infer Value}` ? Value : never;
+type GridScaleVerticalValue = GridScaleVerticalToken extends `mfui.layout.grid.scale.vertical.${infer Value}` ? Value : never;
+type GridScaleTokenShorthand = `horizontal.${GridScaleHorizontalValue}` | `vertical.${GridScaleVerticalValue}`;
+type SpacingTokens = Extract<SpacingToken, `mfui.size.spacing.${string}.comfort`>;
+type SpacingTokenName = SpacingTokens extends `mfui.size.spacing.${infer TokenName}.comfort` ? TokenName : never;
+export type StackProps = {
+    /**
+     * The children of the stack.
+     */
+    children?: ReactNode;
+    /**
+     * Direction of the stack, same as `flex-direction` CSS property
+     *
+     * @default undefined
+     */
+    direction?: CSSProperties['flexDirection'];
+    /**
+     * Gap between children, same as `gap` CSS property
+     *
+     * Accepts primitive grid tokens (recommended), spacing design tokens (deprecated), pixel strings, or numbers
+     *
+     * **Recommended:** Use primitive grid tokens like `"horizontal.1"` (14px) or `"vertical.0-1of2"` (12px)
+     *
+     * **Deprecated:** Semantic spacing tokens like `"inline.horizontal"` or `"paragraph.vertical"` are deprecated
+     * and will be removed in the next major version. See migration guide below.
+     *
+     * **Migration Guide:**
+     * - `"inline.horizontal"` → `"horizontal.0-1of2"` (7px)
+     * - `"paragraph.horizontal"` → `"horizontal.1"` (14px)
+     * - `"paragraph.vertical"` → `"vertical.1"` (24px)
+     * - `"section.horizontal"` → `"horizontal.2"` (28px)
+     * - `"section.vertical"` → `"vertical.2"` (48px)
+     * - `"container.vertical"` → `"vertical.0-1of2"` (12px)
+     *
+     * @default 0
+     */
+    gap?: GridScaleTokenShorthand | SpacingTokenName | `${number}px` | number;
+    /**
+     * Whether to wrap children or not, same as `flex-wrap` CSS property
+     *
+     * @default undefined
+     */
+    wrap?: CSSProperties['flexWrap'];
+    /**
+     * Alignment of children on the cross axis, same as `align-items` CSS property
+     *
+     * @default undefined
+     */
+    alignItems?: CSSProperties['alignItems'];
+    /**
+     *  Alignment of children on the main axis, same as `justify-content` CSS property
+     *
+     * @default undefined
+     */
+    justifyContent?: CSSProperties['justifyContent'];
+} & ComponentPropsWithoutRef<'div'>;
+export type HStackProps = Omit<StackProps, 'direction'> & {
+    /**
+     *  Direction of the horizontal stack
+     *  - When `false`, it will be `row`
+     *  - When `true`, it will be `row-reverse`
+     *
+     * @default false
+     */
+    reverse?: boolean;
+};
+export type VStackProps = Omit<StackProps, 'direction'> & {
+    /**
+     *  Direction of the vertical stack.
+     *  - When `false`, it will be `column`
+     *  - When `true`, it will be `column-reverse`
+     *
+     * @default false
+     */
+    reverse?: boolean;
+};
+export {};

package/dist/esm/src/Stack/Stack.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/Stack/index.d.ts

@@ -0,0 +1,2 @@
+export { Stack, HStack, VStack } from './Stack';
+export type { StackProps, HStackProps, VStackProps } from './Stack.types';

package/dist/esm/src/Stack/index.js

@@ -0,0 +1 @@
+export { Stack, HStack, VStack } from './Stack';

package/dist/esm/src/StatusLabel/StatusLabel.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The StatusLabel component displays a simple status indicator with optional icon.
+ * The component displays a label text with an optional icon, and supports two size variants:
+ * - 'medium' (default): Standard size status label
+ * - 'small': Compact size status label
+ *
+ * Also extends the props of `<span>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
+ */
+export declare const StatusLabel: import("react").ForwardRefExoticComponent<{
+    label: string;
+    icon?: import("react").ReactNode;
+    size?: import("../../styled-system/recipes").StatusLabelSlotRecipeVariant["size"];
+    className?: string;
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/esm/src/StatusLabel/StatusLabel.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../../styled-system/css';
+import { statusLabelSlotRecipe } from '../../styled-system/recipes';
+import { Typography } from '../Typography';
+/**
+ * The StatusLabel component displays a simple status indicator with optional icon.
+ * The component displays a label text with an optional icon, and supports two size variants:
+ * - 'medium' (default): Standard size status label
+ * - 'small': Compact size status label
+ *
+ * Also extends the props of `<span>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
+ */
+export const StatusLabel = forwardRef(({ label, icon, size = 'medium', className, ...props }, ref) => {
+    const classes = statusLabelSlotRecipe({ size });
+    return (_jsxs("span", { ref: ref, className: cx(classes.root, 'mfui-StatusLabel__root', className), ...props, children: [icon ? _jsx("span", { className: cx(classes.icon, 'mfui-StatusLabel__icon'), children: icon }) : null, _jsx(Typography, { as: "span", className: cx(classes.label, 'mfui-StatusLabel__label'), variant: size === 'medium' ? 'body' : 'condensedBody', children: label })] }));
+});

package/dist/esm/src/StatusLabel/StatusLabel.types.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type StatusLabelSlotRecipeVariant } from '../../styled-system/recipes';
+export type StatusLabelProps = {
+    /**
+     * The text content of the status label.
+     */
+    label: string;
+    /**
+     * Optional icon to display before the label text.
+     */
+    icon?: ReactNode;
+    /**
+     * The size variant of the status label.
+     *
+     * @default 'medium'
+     */
+    size?: StatusLabelSlotRecipeVariant['size'];
+    /**
+     * The class name to apply to the component root element.
+     */
+    className?: string;
+} & ComponentPropsWithoutRef<'span'>;

package/dist/esm/src/StatusLabel/StatusLabel.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/StatusLabel/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusLabel } from './StatusLabel';
+export type { StatusLabelProps } from './StatusLabel.types';

package/dist/esm/src/StatusLabel/index.js

@@ -0,0 +1 @@
+export { StatusLabel } from './StatusLabel';

package/dist/esm/src/SubNavigation/SubNavigation.d.ts

@@ -0,0 +1,5 @@
+import { type SubNavigationProps } from './SubNavigation.types';
+/**
+ * This component is for the navigation links under the main navigation.
+ */
+export declare function SubNavigation({ orientation, navigationItems, customLinkComponent, className, }: SubNavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/SubNavigation/SubNavigation.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { DisclosureBasicCollapsed, Lock } from '@moneyforward/mfui-icons-react';
+import { cx } from '../../styled-system/css';
+import { subNavigationSlotRecipe } from '../../styled-system/recipes';
+import { FocusIndicator } from '../FocusIndicator';
+import { Typography } from '../Typography';
+/**
+ * This component is for the navigation links under the main navigation.
+ */
+export function SubNavigation({ orientation = 'vertical', navigationItems, customLinkComponent, className, }) {
+    const hasLabelIcon = navigationItems.some(({ labelIcon }) => !!labelIcon);
+    const classes = subNavigationSlotRecipe({ orientation, hasLabelIcon });
+    return (_jsx("nav", { className: cx(classes.root, 'mfui-SubNavigation__root', className), children: _jsx("ul", { className: cx(classes.list, 'mfui-SubNavigation__list'), children: navigationItems.map((navigationItem, index) => (_jsx("li", { className: cx(classes.listItem, 'mfui-SubNavigation__listItem'), children: renderNavigationItem(navigationItem, customLinkComponent, classes, 0) }, index))) }) }));
+}
+/**
+ * Render a navigation item based on the following conditions:
+ * - a link without children
+ * - a link & disclosure icon with children
+ * - a disclosure button with children
+ *
+ * This function is splitted from the SubNavigation component to allow for recursive rendering for deep nesting.
+ *
+ * @param navigationItem - The navigation item to render.
+ *
+ * @param customLinkComponent - The custom link component to use for the navigation item.
+ *
+ * @param classes - The classes to use for the navigation item.
+ *
+ * @param nestLevel - The nest level of the navigation item.
+ *
+ * @returns The rendered navigation item.
+ */
+const renderNavigationItem = (navigationItem, customLinkComponent, classes, nestLevel) => {
+    const { label, href, labelIcon, statusSlot, locked, lockIconProps, children } = navigationItem;
+    if (children === undefined) {
+        return (_jsx(NavigationLink, { navigationItem: navigationItem, customLinkComponent: customLinkComponent, classes: classes }));
+    }
+    if (href) {
+        // The the parent item will be rendered as a link with separated disclosure icon button.
+        return (_jsxs(_Fragment, { children: [_jsx(NavigationLink, { navigationItem: navigationItem, customLinkComponent: customLinkComponent, classes: classes }), _jsx(NestedNavigationList, { summarySlot: _jsx("div", { "data-mfui-content": "sub-navigation-disclosure-icon", className: cx(classes.disclosureIcon, 'mfui-SubNavigation__disclosureIcon'), children: _jsx(DisclosureBasicCollapsed, { "aria-label": label }) }), nestedNavigationItems: children, customLinkComponent: customLinkComponent, classes: classes, nestLevel: nestLevel + 1 })] }));
+    }
+    // The the parent item will be rendered as a disclosure button with an icon.
+    return (_jsx(NestedNavigationList, { summarySlot: _jsxs(_Fragment, { children: [_jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes }), _jsx("div", { "data-mfui-content": "sub-navigation-disclosure-icon", className: cx(classes.disclosureIcon, 'mfui-SubNavigation__disclosureIcon'), children: _jsx(DisclosureBasicCollapsed, { "aria-label": "" }) })] }), nestedNavigationItems: children, customLinkComponent: customLinkComponent, classes: classes, nestLevel: nestLevel + 1 }));
+};
+/**
+ * This is a group of a text label, an optional icon, and a status.
+ * This is used for all navigation links and parent items for disclosure buttons in SubNavigation.
+ */
+function NavigationLabelGroup({ label, labelIcon, locked, lockIconProps, statusSlot, classes, }) {
+    // If locked=true, display <Lock /> icon in preference to any other status of the statusSlot option.
+    const renderStatus = () => {
+        if (locked) {
+            return (_jsx("div", { className: cx(classes.statusSlot, 'mfui-SubNavigation__statusSlot'), children: _jsx(Lock, { "aria-label": lockIconProps?.['aria-label'] ?? 'ロックされています' }) }));
+        }
+        if (statusSlot) {
+            return _jsx("div", { className: cx(classes.statusSlot, 'mfui-SubNavigation__statusSlot'), children: statusSlot });
+        }
+        return null;
+    };
+    return (_jsxs(_Fragment, { children: [labelIcon ? _jsx("div", { className: cx(classes.labelIcon, 'mfui-SubNavigation__labelIcon'), children: labelIcon }) : null, _jsx(Typography, { variant: "strongControlLabel", className: cx(classes.label, 'mfui-SubNavigation__label'), children: label }), renderStatus()] }));
+}
+/**
+ * This is a link that has NavigationLabelGroup.
+ * This is used for all navigation links in SubNavigation.
+ */
+function NavigationLink({ navigationItem, customLinkComponent, classes, }) {
+    const { label, href, isCurrent, isExternal, labelIcon, statusSlot, locked, lockIconProps } = navigationItem;
+    if (customLinkComponent && !isExternal) {
+        const Tag = customLinkComponent;
+        return (_jsx(FocusIndicator, { children: _jsx(Tag, { href: href, className: cx(classes.link, 'mfui-SubNavigation__link'), "aria-current": isCurrent ? 'page' : undefined, children: _jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes }) }) }));
+    }
+    return (_jsx(FocusIndicator, { children: _jsx("a", { href: href, target: isExternal ? '_blank' : undefined, className: cx(classes.link, 'mfui-SubNavigation__link'), "aria-current": isCurrent ? 'page' : undefined, rel: "noreferrer", children: _jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes }) }) }));
+}
+/**
+ * This is a details element that contains a list of nested navigation links.
+ */
+function NestedNavigationList({ summarySlot, nestedNavigationItems, customLinkComponent, classes, nestLevel, }) {
+    // Check whether all descendants have isCurrent=true by calling itself recursively.
+    const isCurrentPathInChildren = (children) => children?.some(({ isCurrent, children }) => isCurrent || (children && isCurrentPathInChildren(children))) || false;
+    return (_jsxs("details", { open: isCurrentPathInChildren(nestedNavigationItems), className: cx(classes.details, 'mfui-SubNavigation__details'), children: [_jsx(FocusIndicator, { children: _jsx("summary", { className: cx(classes.summary, 'mfui-SubNavigation__summary'), children: summarySlot }) }), _jsx("ul", { className: cx(classes.list, 'mfui-SubNavigation__list'), children: nestedNavigationItems.map((nestedNavigationItem, index) => (_jsx("li", { className: cx(classes.nestedListItem, 'mfui-SubNavigation__nestedListItem'), "data-mfui-nest-level": nestLevel, children: nestedNavigationItem.children === undefined ? (_jsx(NavigationLink, { navigationItem: nestedNavigationItem, customLinkComponent: customLinkComponent, classes: classes })) : (renderNavigationItem(nestedNavigationItem, customLinkComponent, classes, nestLevel + 1)) }, index))) })] }));
+}

package/dist/esm/src/SubNavigation/SubNavigation.types.d.ts

@@ -0,0 +1,129 @@
+import { type ReactNode, type ElementType, type ComponentPropsWithoutRef } from 'react';
+export type SubNavigationProps = VerticalSubNavigationProps | HorizontalSubNavigationProps;
+type VerticalSubNavigationProps = BaseSubNavigationProps & {
+    /**
+     * The list of navigation items.
+     *
+     * - When `orientation` is `"vertical"`, each item **can** have children.
+     */
+    navigationItems: NavigationItem[];
+    /**
+     * The orientation for laying out navigation items.
+     *
+     * @default 'vertical'
+     */
+    orientation?: 'vertical';
+};
+type HorizontalSubNavigationProps = BaseSubNavigationProps & {
+    /**
+     * The list of navigation items.
+     *
+     * - When `orientation` is `"horizontal"`, each item **cannot** have children.
+     */
+    navigationItems: ChildlessNavigationItem[];
+    /**
+     * The orientation for laying out navigation items.
+     *
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal';
+};
+/**
+ * Common properties for both vertical and horizontal SubNavigation.
+ */
+type BaseSubNavigationProps = {
+    /**
+     * The component to use as the link element instead of the general anchor element `<a>`.
+     * The custom component must extend the HTMLAnchorElement interface.
+     *
+     * If this property is not set, the navigation link is rendered as an general anchor element `<a>`.
+     *
+     * This property depends on the `isExternal` property of each navigation item.
+     *
+     * - If the `isExternal` property is set to true, the navigation link is rendered as an general anchor element `<a>` with `target="_blank"`.
+     * - If the `isExternal` property is set to false, the navigation link is rendered as the custom component.
+     *
+     * Use this property if you want to use a custom component as the navigation link.
+     * e.g. next/link
+     */
+    customLinkComponent?: ElementType;
+    /**
+     * For overriding styles if you need.
+     */
+    className?: string;
+};
+/**
+ * The union that discriminates whether each navigation item has children.
+ */
+type NavigationItem = ChildlessNavigationItem | ParentNavigationItem;
+/**
+ * The navigation item that has no children.
+ */
+type ChildlessNavigationItem = BaseNavigationItem & {
+    /**
+     * No nested navigation items.
+     */
+    children?: undefined;
+    /**
+     * The path or URL to the linked page.
+     */
+    href: string;
+};
+/**
+ * The navigation item that has nested children.
+ */
+type ParentNavigationItem = BaseNavigationItem & {
+    /**
+     * The nested navigation items.
+     */
+    children: NavigationItem[];
+    /**
+     * The path or URL to the linked page.
+     * When this property is set, the parent navigation item would be a link
+     * and only the disclosure icon is a button to expand children.
+     */
+    href?: string;
+};
+/**
+ * Common properties for all navigation items.
+ */
+type BaseNavigationItem = {
+    /**
+     * The text label briefly describing the linked page.
+     */
+    label: string;
+    /**
+     * Whether the navigation item is the current page.
+     *
+     * If this property is set to true, the navigation item is highlighted as the current page.
+     * When the navigation item is the nested navigation item, the parent navigation is opened by default.
+     */
+    isCurrent?: boolean;
+    /**
+     * Whether the linked page is external.
+     *
+     * If this property is set to true, `target='_blank' is set to the link`.
+     */
+    isExternal?: boolean;
+    /**
+     * The icon that is displayed on the left side of the text label.
+     */
+    labelIcon?: ReactNode;
+    /**
+     * For a status icon or badge that is displayed on the right side of the text label.
+     * If `locked` prop is true, any indicators in this slot will be ignored.
+     */
+    statusSlot?: ReactNode;
+    /**
+     * Display a lock icon on the right side to indicate the navigation item is locked by permission.
+     * This option does not actually disable the link.
+     */
+    locked?: boolean;
+    /**
+     * The properties for the lock icon.
+     *
+     * @property aria-label - The alternative text for the lock icon. It's set "ロックされています" by default.
+     */
+    lockIconProps?: Pick<ComponentPropsWithoutRef<'svg'>, 'aria-label'>;
+};
+export {};

package/dist/esm/src/SubNavigation/SubNavigation.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/SubNavigation/index.d.ts

@@ -0,0 +1,2 @@
+export { SubNavigation } from './SubNavigation';
+export type { SubNavigationProps } from './SubNavigation.types';

package/dist/esm/src/SubNavigation/index.js

@@ -0,0 +1 @@
+export { SubNavigation } from './SubNavigation';

package/dist/esm/src/Tabs/TabContext.d.ts

@@ -0,0 +1,14 @@
+import { type TabItemProps } from './TabItem';
+type TabContextType = {
+    selectedTabId: string | undefined;
+    onSelectedTabIdChange?: (tabId: string) => void;
+    tabs: TabItemProps[];
+    shouldShowMenu: boolean;
+    setShouldShowMenu?: (shouldShowMenu: boolean) => void;
+    targetDOMNode?: HTMLElement;
+    registerTab?: (tab: TabItemProps) => void;
+    unregisterTab?: (tabId: string) => void;
+    enableAutoUnmount: boolean;
+};
+export declare const TabContext: import("react").Context<TabContextType>;
+export {};

package/dist/esm/src/Tabs/TabContext.js

@@ -0,0 +1,13 @@
+'use client';
+import { createContext } from 'react';
+export const TabContext = createContext({
+    selectedTabId: '',
+    onSelectedTabIdChange: undefined,
+    tabs: [],
+    shouldShowMenu: false,
+    setShouldShowMenu: undefined,
+    targetDOMNode: undefined,
+    registerTab: undefined,
+    unregisterTab: undefined,
+    enableAutoUnmount: true,
+});

package/dist/esm/src/Tabs/TabItem/TabItem.d.ts

@@ -0,0 +1,2 @@
+import { type TabItemProps } from './TabItem.types';
+export declare function TabItem({ id, badgeProps, children, className }: TabItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/Tabs/TabItem/TabItem.js

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { tabItemSlotRecipe } from '../../../styled-system/recipes';
+import { Typography } from '../../Typography';
+import { TabContext } from '../TabContext';
+import { Tooltip } from '../../Tooltip';
+import { FocusIndicator } from '../../FocusIndicator';
+import { useArrowKeyHandler } from './hooks/useArrowKeyHandler';
+import { Badge } from '../../Badge';
+import { cx } from '../../../styled-system/css';
+export function TabItem({ id, badgeProps, children, className }) {
+    const { selectedTabId, onSelectedTabIdChange, tabs, shouldShowMenu, targetDOMNode, registerTab, unregisterTab } = useContext(TabContext);
+    const { onKeyDown } = useArrowKeyHandler();
+    const buttonRef = useRef(null);
+    const labelRef = useRef(null);
+    const [shouldShowTooltip, setShouldShowTooltip] = useState(false);
+    const { selected, position } = useMemo(() => {
+        const firstTabId = tabs[0]?.id;
+        const lastTabId = tabs.at(-1)?.id;
+        const selected = selectedTabId === id;
+        const isFirst = firstTabId === id;
+        // If the Menu is showing, the Menu is the last one, not this tab
+        const isLast = !shouldShowMenu && lastTabId === id;
+        const isMiddle = !isFirst && !isLast;
+        const position = (() => {
+            if (isFirst)
+                return 'start';
+            if (isLast)
+                return 'end';
+            if (isMiddle)
+                return 'middle';
+            return 'only';
+        })();
+        return {
+            selected,
+            position,
+        };
+    }, [selectedTabId, tabs, id, shouldShowMenu]);
+    const onClick = useCallback(() => {
+        onSelectedTabIdChange?.(id);
+    }, [id, onSelectedTabIdChange]);
+    useLayoutEffect(() => {
+        registerTab?.({ id, badgeProps, children });
+        return () => {
+            unregisterTab?.(id);
+        };
+    }, [id, badgeProps, children, registerTab, unregisterTab]);
+    useLayoutEffect(() => {
+        if (!labelRef.current) {
+            return;
+        }
+        setShouldShowTooltip(labelRef.current.clientWidth < labelRef.current.scrollWidth);
+    }, [children]);
+    const classNames = tabItemSlotRecipe({ selected, position });
+    const buttonElement = (_jsx(FocusIndicator, { position: "inside", children: _jsxs("button", { ref: buttonRef, role: "tab", id: id, type: "button", "aria-selected": selected, "aria-controls": `tabpanel-${id}`, className: cx(classNames.button, 'group', 'mfui-TabItem__button', className), tabIndex: selected ? undefined : -1, onClick: onClick, onKeyDown: onKeyDown, children: [_jsx("div", { className: cx(classNames.selectedIndicator, 'mfui-TabItem__selectedIndicator') }), _jsx(Typography, { ref: labelRef, variant: selected ? 'strongControlLabel' : 'controlLabel', className: cx(classNames.label, 'mfui-TabItem__label'), children: children }), badgeProps ? _jsx(Badge, { ...badgeProps, className: classNames.badge }) : null] }) }));
+    return shouldShowTooltip ? (_jsx(Tooltip, { targetDOMNode: targetDOMNode, content: children, trigger: ['hover', 'focus'], className: cx(classNames.tooltip, 'mfui-TabItem__tooltip'), placement: "top", children: buttonElement })) : (_jsx("div", { className: cx(classNames.tooltip, 'mfui-TabItem__tooltip'), children: buttonElement }));
+}

package/dist/esm/src/Tabs/TabItem/TabItem.types.d.ts

@@ -0,0 +1,29 @@
+import { type BadgeProps } from '../../Badge';
+/**
+ * Props for the TabItem component.
+ */
+export type TabItemProps = {
+    /**
+     * The ID of the tab.
+     */
+    id: string;
+    /**
+     * The content of the tab.
+     * It must be a string
+     * If the label is too long, it will be truncated and a tooltip will and the dropdown will display the full content
+     */
+    children: string;
+    /**
+     * The badge props of the tab.
+     * When this is not `undefined`, a badge will be displayed on the tab.
+     *
+     * @default undefined
+     */
+    badgeProps?: BadgeProps;
+    /**
+     * The class name for the tab item.
+     *
+     * @default undefined
+     */
+    className?: string;
+};

package/dist/esm/src/Tabs/TabItem/TabItem.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/Tabs/TabItem/hooks/useArrowKeyHandler.d.ts

@@ -0,0 +1,9 @@
+import { type KeyboardEventHandler } from 'react';
+/**
+ * A hook to handle the arrow keys for the TabItem component.
+ *
+ * @returns The event handlers for the arrow keys.
+ */
+export declare function useArrowKeyHandler(): {
+    onKeyDown: KeyboardEventHandler<HTMLButtonElement>;
+};