@moneyforward/mfui-components 3.21.0 → 3.23.0

package/dist/src/Dialog/Dialog.d.ts

@@ -6,7 +6,7 @@
  */
 export declare const Dialog: import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;
-    title: string;
+    title: import("react").ReactNode;
     open?: boolean;
     onClose?: () => void;
     actionSlot?: import("react").ReactNode;

package/dist/src/Dialog/Dialog.types.d.ts

@@ -7,8 +7,14 @@ export type DialogProps = {
     children?: ReactNode;
     /**
      * The heading title of the dialog.
+     *
+     * Accepts a string or any `ReactNode` (e.g. a `<Skeleton />` shown while the
+     * title is loading asynchronously). Keep the node heading-appropriate —
+     * inline text, status indicators, or icons — because the dialog uses
+     * `aria-labelledby` to announce the title and screen readers will read the
+     * entire subtree. Avoid placing interactive controls inside `title`.
      */
-    title: string;
+    title: ReactNode;
     /**
      * Whether the dialog is shown or not.
      * This prop is optional and should be passed when using the dialog as a controlled component.

package/dist/src/FormFooter/FormFooter.types.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-export type FormFooterPosition = 'fixed' | 'stacking' | 'sticky';
+export type FormFooterPosition = 'stacking' | 'sticky';
 export type FormFooterSectionPosition = 'fill' | 'center';
 export type FormFooterProps = {
     /**
@@ -10,8 +10,7 @@ export type FormFooterProps = {
      * It's for controlling the position of the component.
      *
      * - `"stacking"`: Displayed inline at the bottom of its container. Use for creation forms where preventing mid-session abandonment is important.
-     * - `"fixed"`: Pinned to the bottom of the viewport at all times with a separator border. Use for edit screens where users return frequently.
-     * - `"sticky"`: Sits inline below the last form field, and pins to the bottom of the nearest scrolling ancestor (e.g. inside `SidePane`) when the form overflows. Use inside scrollable containers such as `SidePane`.
+     * - `"sticky"`: Sits inline below the last form field, and pins to the bottom of the nearest scrolling ancestor when the form overflows. Use inside scrollable containers such as `SidePane`.
      *
      * @default "stacking"
      */

package/dist/src/SidePane/SidePane.d.ts

@@ -18,7 +18,7 @@ export declare const SidePane: import("react").ForwardRefExoticComponent<{
     disableBackdropClose?: boolean;
     enableAutoUnmount?: boolean;
     formFooterProps?: Pick<import("..").FormFooterProps, "optionsSlot" | "actionsSlot"> & {
-        position?: Exclude<import("..").FormFooterProps["position"], "fixed">;
+        position?: import("..").FormFooterProps["position"];
     };
     insideProps?: {
         className?: string;

package/dist/src/SidePane/SidePane.types.d.ts

@@ -116,12 +116,10 @@ export type SidePaneProps = {
      * - `position: 'sticky'` (default): the footer is always pinned to the pane bottom, outside the scrollable content area.
      * - `position: 'stacking'`: the footer flows after the content inside the scroll area.
      *
-     * `position: 'fixed'` is not supported here because it anchors to the viewport rather than the pane.
-     *
      * @default undefined
      */
     formFooterProps?: Pick<FormFooterProps, 'optionsSlot' | 'actionsSlot'> & {
-        position?: Exclude<FormFooterProps['position'], 'fixed'>;
+        position?: FormFooterProps['position'];
     };
     /**
      * Additional props to apply to the inside container element of the SidePane.

package/dist/src/Stepper/DoneStepIcon.d.ts

@@ -0,0 +1,9 @@
+import { type SVGProps } from 'react';
+/**
+ * Checkmark icon used inside the `done`-state step indicator.
+ *
+ * This component is private to `Stepper` and not exported from the package.
+ *
+ * @param props - SVG props forwarded to the root `<svg>`.
+ */
+export declare function DoneStepIcon(props: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/src/Stepper/DoneStepIcon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Checkmark icon used inside the `done`-state step indicator.
+ *
+ * This component is private to `Stepper` and not exported from the package.
+ *
+ * @param props - SVG props forwarded to the root `<svg>`.
+ */
+export function DoneStepIcon(props) {
+    return (_jsx("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.0002 6.00001C14.2764 6.27616 14.2764 6.72387 14.0002 7.00001L8.00024 13L3.99894 8.99871C3.72279 8.72257 3.7241 8.27616 4.00024 8.00001C4.27638 7.72387 4.7241 7.72387 5.00024 8.00001L8.00024 11L13.0002 6.00001C13.2764 5.72387 13.7241 5.72387 14.0002 6.00001Z", fill: "currentColor" }) }));
+}

package/dist/src/Stepper/Step/Step.d.ts

@@ -0,0 +1,7 @@
+import { type StepperStepProps } from './Step.types';
+/**
+ * A single step inside `Stepper`. Rendered either as a static container, a
+ * `<button>` (when `onClick` is provided), or an `<a>`/custom link (when
+ * `href` is provided).
+ */
+export declare function Step({ children, onClick, href, customLinkComponent }: StepperStepProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Stepper/Step/Step.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement, useContext } from 'react';
+import { cx } from '../../../styled-system/css';
+import { stepperSlotRecipe } from '../../../styled-system/recipes';
+import { FocusIndicator } from '../../FocusIndicator';
+import { Typography } from '../../Typography';
+import { DoneStepIcon } from '../DoneStepIcon';
+import { StepperContext } from '../StepperContext';
+import { StepContext } from '../StepContext';
+/**
+ * A single step inside `Stepper`. Rendered either as a static container, a
+ * `<button>` (when `onClick` is provided), or an `<a>`/custom link (when
+ * `href` is provided).
+ */
+export function Step({ children, onClick, href, customLinkComponent }) {
+    const stepperContext = useContext(StepperContext);
+    const stepContext = useContext(StepContext);
+    if (!stepperContext || !stepContext) {
+        throw new Error('Stepper.Step must be rendered inside a Stepper.');
+    }
+    const { labelPosition } = stepperContext;
+    const { index, status, isLast } = stepContext;
+    const interactive = onClick !== undefined || href !== undefined;
+    const classes = stepperSlotRecipe({
+        labelPosition,
+        status,
+        interactive,
+    });
+    const indicatorContent = status === 'done' ? _jsx(DoneStepIcon, { "aria-hidden": true }) : _jsx("span", { "aria-hidden": true, children: index + 1 });
+    const labelVariant = status === 'current' ? 'strongBody' : 'body';
+    const inner = (_jsxs(_Fragment, { children: [_jsx("span", { className: cx(classes.indicator, 'mfui-Stepper__indicator'), "data-mfui-stepper-slot": "indicator", children: indicatorContent }), _jsx(Typography, { variant: labelVariant, className: cx(classes.label, 'mfui-Stepper__label'), "data-mfui-stepper-slot": "label", children: children })] }));
+    const ariaCurrent = status === 'current' ? 'step' : undefined;
+    const contentClassName = cx(classes.content, 'mfui-Stepper__content');
+    let contentElement;
+    if (!interactive) {
+        contentElement = (_jsx("div", { className: contentClassName, "aria-current": ariaCurrent, children: inner }));
+    }
+    else if (href !== undefined) {
+        const LinkTag = customLinkComponent ?? 'a';
+        contentElement = (_jsx(FocusIndicator, { children: createElement(LinkTag, { className: contentClassName, href, 'aria-current': ariaCurrent }, inner) }));
+    }
+    else {
+        contentElement = (_jsx(FocusIndicator, { children: _jsx("button", { type: "button", className: contentClassName, "aria-current": ariaCurrent, onClick: onClick, children: inner }) }));
+    }
+    return (_jsxs("li", { className: cx(classes.item, 'mfui-Stepper__item'), "data-mfui-is-last": isLast ? 'true' : undefined, "data-mfui-step-status": status, children: [contentElement, !isLast ? _jsx("span", { "aria-hidden": true, className: cx(classes.connector, 'mfui-Stepper__connector') }) : null] }));
+}

package/dist/src/Stepper/Step/Step.types.d.ts

@@ -0,0 +1,20 @@
+import { type ElementType, type MouseEventHandler, type ReactNode } from 'react';
+export type StepperStepProps = {
+    /** Step label content. */
+    children: ReactNode;
+    /**
+     * When provided, the step renders as a `<button>` and triggers `onClick` when
+     * activated by mouse or keyboard. Ignored when `href` is also provided.
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * When provided, the step renders as an `<a>` (or `customLinkComponent`) and
+     * navigates on activation.
+     */
+    href?: string;
+    /**
+     * Custom link component (e.g. Next.js `<Link>`). Only applied when `href` is
+     * also provided. Falls back to a plain `<a>` tag when omitted.
+     */
+    customLinkComponent?: ElementType;
+};

package/dist/src/Stepper/Step/Step.types.js

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

package/dist/src/Stepper/Step/index.d.ts

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

package/dist/src/Stepper/Step/index.js

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

package/dist/src/Stepper/StepContext.d.ts

@@ -0,0 +1,10 @@
+export type StepStatus = 'current' | 'done' | 'upcoming';
+export type StepContextValue = {
+    /** 0-based step index. */
+    index: number;
+    /** Derived status of this step. */
+    status: StepStatus;
+    /** True when this step is the last in the list (no trailing connector). */
+    isLast: boolean;
+};
+export declare const StepContext: import("react").Context<StepContextValue | null>;

package/dist/src/Stepper/StepContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const StepContext = createContext(null);

package/dist/src/Stepper/Stepper.d.ts

@@ -0,0 +1,26 @@
+import { Step } from './Step';
+import { type StepperProps } from './Stepper.types';
+declare function Base({ currentStepIndex, labelPosition, children, className, 'aria-label': ariaLabel, ...rest }: StepperProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Stepper displays a wizard-style flow's overall steps and the user's current
+ * position within it. Steps are derived from `Stepper.Step` children, and each
+ * step's status (`done` / `current` / `upcoming`) is derived from
+ * `currentStepIndex`.
+ *
+ * @example
+ * ```tsx
+ * <Stepper currentStepIndex={1}>
+ *   <Stepper.Step>申請内容の入力</Stepper.Step>
+ *   <Stepper.Step onClick={() => goto(1)}>内容の確認</Stepper.Step>
+ *   <Stepper.Step>送信</Stepper.Step>
+ * </Stepper>
+ * ```
+ */
+export declare const Stepper: typeof Base & {
+    /**
+     * A single step. Use one `Stepper.Step` per step in the flow. Provide
+     * `onClick` or `href` to make the step interactive.
+     */
+    Step: typeof Step;
+};
+export {};

package/dist/src/Stepper/Stepper.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, useMemo } from 'react';
+import { cx } from '../../styled-system/css';
+import { stepperSlotRecipe } from '../../styled-system/recipes';
+import { StepperContext } from './StepperContext';
+import { StepContext } from './StepContext';
+import { Step } from './Step';
+function deriveStatus(index, currentStepIndex) {
+    if (index < currentStepIndex)
+        return 'done';
+    if (index === currentStepIndex)
+        return 'current';
+    return 'upcoming';
+}
+function StepProvider({ index, status, isLast, children, }) {
+    const value = useMemo(() => ({ index, status, isLast }), [index, status, isLast]);
+    return _jsx(StepContext.Provider, { value: value, children: children });
+}
+function Base({ currentStepIndex, labelPosition = 'right', children, className, 'aria-label': ariaLabel = 'ステップ', ...rest }) {
+    const classes = stepperSlotRecipe({ labelPosition });
+    const stepperContextValue = useMemo(() => ({ labelPosition }), [labelPosition]);
+    // Filter out falsy children (booleans, null, undefined) so that conditional
+    // rendering of steps doesn't produce phantom indices.
+    const steps = Children.toArray(children);
+    return (_jsx(StepperContext.Provider, { value: stepperContextValue, children: _jsx("nav", { ...rest, className: cx(classes.root, 'mfui-Stepper__root', className), "aria-label": ariaLabel, children: _jsx("ol", { className: cx(classes.list, 'mfui-Stepper__list'), children: steps.map((child, index) => (_jsx(StepProvider, { index: index, status: deriveStatus(index, currentStepIndex), isLast: index === steps.length - 1, children: child }, index))) }) }) }));
+}
+/**
+ * Stepper displays a wizard-style flow's overall steps and the user's current
+ * position within it. Steps are derived from `Stepper.Step` children, and each
+ * step's status (`done` / `current` / `upcoming`) is derived from
+ * `currentStepIndex`.
+ *
+ * @example
+ * ```tsx
+ * <Stepper currentStepIndex={1}>
+ *   <Stepper.Step>申請内容の入力</Stepper.Step>
+ *   <Stepper.Step onClick={() => goto(1)}>内容の確認</Stepper.Step>
+ *   <Stepper.Step>送信</Stepper.Step>
+ * </Stepper>
+ * ```
+ */
+export const Stepper = Object.assign(Base, {
+    /**
+     * A single step. Use one `Stepper.Step` per step in the flow. Provide
+     * `onClick` or `href` to make the step interactive.
+     */
+    Step,
+});

package/dist/src/Stepper/Stepper.types.d.ts

@@ -0,0 +1,21 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export type StepperLabelPosition = 'right' | 'bottom';
+export type StepperProps = {
+    /**
+     * 0-based index of the current step.
+     * Steps before this index are rendered as `done`, the step at this index
+     * is `current`, and steps after are `upcoming`.
+     */
+    currentStepIndex: number;
+    /**
+     * Position of each step's label relative to its indicator.
+     *
+     * - `right` (default): label sits to the right of the indicator on the same line.
+     * - `bottom`: label is centered directly below the indicator.
+     *
+     * @default 'right'
+     */
+    labelPosition?: StepperLabelPosition;
+    /** `Stepper.Step` elements. */
+    children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<'nav'>, 'children'>;

package/dist/src/Stepper/Stepper.types.js

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

package/dist/src/Stepper/StepperContext.d.ts

@@ -0,0 +1,5 @@
+import { type StepperLabelPosition } from './Stepper.types';
+export type StepperContextValue = {
+    labelPosition: StepperLabelPosition;
+};
+export declare const StepperContext: import("react").Context<StepperContextValue | null>;

package/dist/src/Stepper/StepperContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const StepperContext = createContext(null);

package/dist/src/Stepper/index.d.ts

@@ -0,0 +1,3 @@
+export { Stepper } from './Stepper';
+export type { StepperProps, StepperLabelPosition } from './Stepper.types';
+export type { StepperStepProps } from './Step';

package/dist/src/Stepper/index.js

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

package/dist/src/Tooltip/Tooltip.js

@@ -1,11 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useId, useRef, isValidElement, cloneElement, useEffect } from 'react';
+import { forwardRef, useId, useRef, isValidElement, cloneElement, useEffect, useMemo } from 'react';
 import { getOverflowAncestors } from '@floating-ui/react-dom';
 import { cx } from '../../styled-system/css';
 import { tooltipSlotRecipe } from '../../styled-system/recipes';
 import { Typography } from '../Typography';
 import { mergeRefs } from '../utilities/dom/mergeRefs';
+import { useOnClickOutside } from '../utilities/dom/useOnClickOutside';
 import { useTooltipDisplayController } from './hooks/useTooltipDisplayController';
 import { ArrowIcon } from './icons/ArrowIcon';
 import { usePopoverController } from './hooks/usePopoverController';
@@ -46,11 +47,12 @@ export const DEFAULT_MAX_WIDTH = '268px';
 export const Tooltip = forwardRef(({ children, open, onOpenStateChanged, content, targetDOMNode, placement, trigger = ['hover', 'focus'], disabled = false, hideFromScreenReader = false, maxWidth = DEFAULT_MAX_WIDTH, className, contentProps, ...wrapperProps }, ref) => {
     const rootRef = useRef(null);
     const arrowRef = useRef(null);
+    const tooltipRef = useRef(null);
     const tooltipId = useId();
     // Use automatic target resolution matching Portal.tsx pattern
     // Resolution order: explicit prop → parent context → document.body fallback
     const targetElement = useAutomaticTargetDomNode(targetDOMNode, rootRef.current);
-    const { open: calculatedOpen, rootAttributes, tooltipAttributes, closeImmediate, } = useTooltipDisplayController({
+    const { open: calculatedOpen, rootAttributes, tooltipAttributes, closeImmediate, closeWithManager, } = useTooltipDisplayController({
         trigger,
         wrapperProps,
         tooltipOpen: open,
@@ -77,6 +79,13 @@ export const Tooltip = forwardRef(({ children, open, onOpenStateChanged, content
             });
         };
     }, [calculatedOpen, closeImmediate]);
+    const hasClickTrigger = useMemo(() => (Array.isArray(trigger) ? trigger : [trigger]).includes('click'), [trigger]);
+    // Skip the trigger (rootRef) so the existing onClick toggle handles re-clicks —
+    // closing here would race with onClick and immediately reopen the tooltip.
+    useOnClickOutside(rootRef, closeWithManager, {
+        ignoreRefs: [tooltipRef],
+        disabled: !calculatedOpen || !hasClickTrigger || open !== undefined,
+    });
     const triggerRef = mergeRefs(setTriggerReference, rootRef, ref);
     const classes = tooltipSlotRecipe();
     const ariaDescribedBy = !hideFromScreenReader && content != null ? tooltipId : undefined;
@@ -90,5 +99,5 @@ export const Tooltip = forwardRef(({ children, open, onOpenStateChanged, content
                         clip: 'rect(0, 0, 0, 0)',
                         whiteSpace: 'nowrap',
                         borderWidth: 0,
-                    }, children: content }) })), calculatedOpen ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setTooltipReference, className: cx(classes.tooltip, 'mfui-Tooltip__tooltip', contentProps?.className), role: "tooltip", id: tooltipId, "aria-hidden": hideFromScreenReader ? true : undefined, style: { maxWidth, ...tooltipStyles }, ...tooltipAttributes, children: [typeof content === 'string' ? _jsx(Typography, { variant: "helpMessage", children: content }) : content, _jsx(ArrowIcon, { ref: arrowRef, "aria-hidden": true, placement: calculatedPlacement, className: cx(classes.arrow, 'mfui-Tooltip__arrow'), style: arrowStyles })] }) })) : null] }));
+                    }, children: content }) })), calculatedOpen ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: mergeRefs(setTooltipReference, tooltipRef), className: cx(classes.tooltip, 'mfui-Tooltip__tooltip', contentProps?.className), role: "tooltip", id: tooltipId, "aria-hidden": hideFromScreenReader ? true : undefined, style: { maxWidth, ...tooltipStyles }, ...tooltipAttributes, children: [typeof content === 'string' ? _jsx(Typography, { variant: "helpMessage", children: content }) : content, _jsx(ArrowIcon, { ref: arrowRef, "aria-hidden": true, placement: calculatedPlacement, className: cx(classes.arrow, 'mfui-Tooltip__arrow'), style: arrowStyles })] }) })) : null] }));
 });

package/dist/src/Tooltip/hooks/useTooltipDisplayController.d.ts

@@ -34,4 +34,5 @@ export declare function useTooltipDisplayController({ trigger, wrapperProps, too
         onMouseLeave: () => void;
     };
     closeImmediate: () => void;
+    closeWithManager: () => void;
 };

package/dist/src/Tooltip/hooks/useTooltipDisplayController.js

@@ -220,5 +220,6 @@ export function useTooltipDisplayController({ trigger, wrapperProps, tooltipOpen
         rootAttributes,
         tooltipAttributes,
         closeImmediate,
+        closeWithManager,
     };
 }

package/dist/src/index.d.ts

@@ -47,6 +47,7 @@ export * from './Skeleton';
 export * from './SplitView';
 export * from './Stack';
 export * from './StatusLabel';
+export * from './Stepper';
 export * from './SubNavigation';
 export * from './Tabs';
 export * from './Tag';

package/dist/src/index.js

@@ -47,6 +47,7 @@ export * from './Skeleton';
 export * from './SplitView';
 export * from './Stack';
 export * from './StatusLabel';
+export * from './Stepper';
 export * from './SubNavigation';
 export * from './Tabs';
 export * from './Tag';

package/dist/styled-system/recipes/form-footer-slot-recipe.d.ts

@@ -3,7 +3,7 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface FormFooterSlotRecipeVariant {
-  position: "stacking" | "fixed" | "sticky"
+  position: "stacking" | "sticky"
 sectionPosition: "center" | "fill"
 }
 

package/dist/styled-system/recipes/form-footer-slot-recipe.js

@@ -38,7 +38,6 @@ export const formFooterSlotRecipe = /* @__PURE__ */ Object.assign(formFooterSlot
     variantMap: {
         "position": [
             "stacking",
-            "fixed",
             "sticky"
         ],
         "sectionPosition": [

package/dist/styled-system/recipes/index.d.ts

@@ -54,6 +54,7 @@ export * from './data-table-row-slot-recipe';
 export * from './sub-navigation-slot-recipe';
 export * from './progress-indicator-slot-recipe';
 export * from './stack-slot-recipe';
+export * from './stepper-slot-recipe';
 export * from './multiple-select-box-slot-recipe';
 export * from './multiple-select-box-trigger-recipe';
 export * from './checkbox-card-slot-recipe';

package/dist/styled-system/recipes/index.js

@@ -53,6 +53,7 @@ export * from './data-table-row-slot-recipe.js';
 export * from './sub-navigation-slot-recipe.js';
 export * from './progress-indicator-slot-recipe.js';
 export * from './stack-slot-recipe.js';
+export * from './stepper-slot-recipe.js';
 export * from './multiple-select-box-slot-recipe.js';
 export * from './multiple-select-box-trigger-recipe.js';
 export * from './checkbox-card-slot-recipe.js';

package/dist/styled-system/recipes/stepper-slot-recipe.d.ts

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface StepperSlotRecipeVariant {
+  /**
+ * @default "right"
+ */
+labelPosition: "right" | "bottom"
+/**
+ * @default "upcoming"
+ */
+status: "current" | "done" | "upcoming"
+/**
+ * @default false
+ */
+interactive: boolean
+}
+
+type StepperSlotRecipeVariantMap = {
+  [key in keyof StepperSlotRecipeVariant]: Array<StepperSlotRecipeVariant[key]>
+}
+
+type StepperSlotRecipeSlot = "root" | "list" | "item" | "content" | "indicator" | "label" | "connector"
+
+export type StepperSlotRecipeVariantProps = {
+  [key in keyof StepperSlotRecipeVariant]?: StepperSlotRecipeVariant[key] | undefined
+}
+
+export interface StepperSlotRecipeRecipe {
+  __slot: StepperSlotRecipeSlot
+  __type: StepperSlotRecipeVariantProps
+  (props?: StepperSlotRecipeVariantProps): Pretty<Record<StepperSlotRecipeSlot, string>>
+  raw: (props?: StepperSlotRecipeVariantProps) => StepperSlotRecipeVariantProps
+  variantMap: StepperSlotRecipeVariantMap
+  variantKeys: Array<keyof StepperSlotRecipeVariant>
+  splitVariantProps<Props extends StepperSlotRecipeVariantProps>(props: Props): [StepperSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof StepperSlotRecipeVariantProps>>]
+  getVariantProps: (props?: StepperSlotRecipeVariantProps) => StepperSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI Stepper component.
+ */
+export declare const stepperSlotRecipe: StepperSlotRecipeRecipe

package/dist/styled-system/recipes/stepper-slot-recipe.js

@@ -0,0 +1,118 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const stepperSlotRecipeDefaultVariants = {
+    "labelPosition": "right",
+    "status": "upcoming",
+    "interactive": false
+};
+const stepperSlotRecipeCompoundVariants = [
+    {
+        "status": "done",
+        "interactive": true,
+        "css": {
+            "content": {
+                "&:hover > [data-mfui-stepper-slot=\"indicator\"], &:focus-visible > [data-mfui-stepper-slot=\"indicator\"]": {
+                    "backgroundColor": "mfui.color.primary.content.hovered"
+                },
+                "&:active > [data-mfui-stepper-slot=\"indicator\"]": {
+                    "backgroundColor": "mfui.color.primary.content.pressed"
+                }
+            }
+        }
+    },
+    {
+        "status": "current",
+        "interactive": true,
+        "css": {
+            "content": {
+                "&:hover > [data-mfui-stepper-slot=\"indicator\"], &:focus-visible > [data-mfui-stepper-slot=\"indicator\"]": {
+                    "backgroundColor": "mfui.color.primary.content.hovered"
+                },
+                "&:active > [data-mfui-stepper-slot=\"indicator\"]": {
+                    "backgroundColor": "mfui.color.primary.content.pressed"
+                }
+            }
+        }
+    },
+    {
+        "status": "upcoming",
+        "interactive": true,
+        "css": {
+            "content": {
+                "&:hover > [data-mfui-stepper-slot=\"indicator\"], &:focus-visible > [data-mfui-stepper-slot=\"indicator\"]": {
+                    "backgroundColor": "mfui.color.neutral.sub-background.hovered",
+                    "color": "mfui.color.neutral.content.hovered"
+                },
+                "&:active > [data-mfui-stepper-slot=\"indicator\"]": {
+                    "backgroundColor": "mfui.color.neutral.sub-background.pressed",
+                    "color": "mfui.color.neutral.content.pressed"
+                }
+            }
+        }
+    }
+];
+const stepperSlotRecipeSlotNames = [
+    [
+        "root",
+        "Stepper__root"
+    ],
+    [
+        "list",
+        "Stepper__list"
+    ],
+    [
+        "item",
+        "Stepper__item"
+    ],
+    [
+        "content",
+        "Stepper__content"
+    ],
+    [
+        "indicator",
+        "Stepper__indicator"
+    ],
+    [
+        "label",
+        "Stepper__label"
+    ],
+    [
+        "connector",
+        "Stepper__connector"
+    ]
+];
+const stepperSlotRecipeSlotFns = /* @__PURE__ */ stepperSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, stepperSlotRecipeDefaultVariants, getSlotCompoundVariant(stepperSlotRecipeCompoundVariants, slotName))]);
+const stepperSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(stepperSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const stepperSlotRecipeVariantKeys = [
+    "labelPosition",
+    "status",
+    "interactive"
+];
+const getVariantProps = (variants) => ({ ...stepperSlotRecipeDefaultVariants, ...compact(variants) });
+export const stepperSlotRecipe = /* @__PURE__ */ Object.assign(stepperSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'stepperSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: stepperSlotRecipeVariantKeys,
+    variantMap: {
+        "labelPosition": [
+            "right",
+            "bottom"
+        ],
+        "status": [
+            "current",
+            "done",
+            "upcoming"
+        ],
+        "interactive": [
+            "true"
+        ]
+    },
+    splitVariantProps(props) {
+        return splitProps(props, stepperSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});