@commercetools/nimbus 2.5.0 → 2.7.0

package/dist/components/steps/components/steps.separator.d.ts

@@ -0,0 +1,21 @@
+import { StepsSeparatorProps } from '../steps.types';
+/**
+ * # Steps.Separator
+ *
+ * Visual line connecting step indicators.
+ * Wraps Chakra UI's Steps.Separator with Nimbus styling.
+ *
+ * @example
+ * ```tsx
+ * <Steps.Item index={0}>
+ *   <Steps.Trigger>...</Steps.Trigger>
+ *   <Steps.Separator />
+ * </Steps.Item>
+ * ```
+ *
+ * @supportsStyleProps
+ */
+export declare const StepsSeparator: {
+    (props: StepsSeparatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/steps/components/steps.status.d.ts

@@ -0,0 +1,22 @@
+import { StepsStatusProps } from '../steps.types';
+/**
+ * # Steps.Status
+ *
+ * Renders different content based on step state.
+ * This is a render prop component from Chakra UI that doesn't need a slot.
+ *
+ * @example
+ * ```tsx
+ * <Steps.Indicator>
+ *   <Steps.Status
+ *     complete={<CheckIcon />}
+ *     incomplete={<Steps.Number />}
+ *     current={<LoadingIcon />}
+ *   />
+ * </Steps.Indicator>
+ * ```
+ */
+export declare const StepsStatus: {
+    (props: StepsStatusProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/steps/components/steps.title.d.ts

@@ -0,0 +1,21 @@
+import { StepsTitleProps } from '../steps.types';
+/**
+ * # Steps.Title
+ *
+ * Displays the step title.
+ * Wraps Chakra UI's Steps.Title with Nimbus styling.
+ *
+ * @example
+ * ```tsx
+ * <Steps.Trigger>
+ *   <Steps.Indicator />
+ *   <Steps.Title>Account Setup</Steps.Title>
+ * </Steps.Trigger>
+ * ```
+ *
+ * @supportsStyleProps
+ */
+export declare const StepsTitle: {
+    (props: StepsTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/steps/components/steps.trigger.d.ts

@@ -0,0 +1,21 @@
+import { StepsTriggerProps } from '../steps.types';
+/**
+ * # Steps.Trigger
+ *
+ * Clickable element within each step for direct navigation.
+ * Wraps Chakra UI's Steps.Trigger with Nimbus styling.
+ *
+ * @example
+ * ```tsx
+ * <Steps.Trigger>
+ *   <Steps.Indicator />
+ *   Account Setup
+ * </Steps.Trigger>
+ * ```
+ *
+ * @supportsStyleProps
+ */
+export declare const StepsTrigger: {
+    (props: StepsTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/steps/index.d.ts

@@ -0,0 +1,2 @@
+export * from './steps';
+export * from './steps.types';

package/dist/components/steps/steps.d.ts

@@ -0,0 +1,188 @@
+import { StepsRoot, StepsList, StepsItem, StepsTrigger, StepsIndicator, StepsNumber, StepsTitle, StepsDescription, StepsSeparator, StepsContent, StepsCompletedContent, StepsPrevTrigger, StepsNextTrigger, StepsStatus } from './components';
+/**
+ * # Steps
+ *
+ * A multi-step workflow component with built-in state management, content visibility,
+ * and navigation triggers. Wraps Chakra UI's Steps component with Nimbus styling.
+ *
+ * Supports both controlled and uncontrolled usage patterns.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/navigation/steps}
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled usage (component manages state internally)
+ * <Steps.Root defaultStep={0} count={3}>
+ *   <Steps.List>
+ *     <Steps.Item index={0}>
+ *       <Steps.Trigger>
+ *         <Steps.Indicator />
+ *         Account
+ *       </Steps.Trigger>
+ *       <Steps.Separator />
+ *     </Steps.Item>
+ *     <Steps.Item index={1}>
+ *       <Steps.Trigger>
+ *         <Steps.Indicator />
+ *         Profile
+ *       </Steps.Trigger>
+ *       <Steps.Separator />
+ *     </Steps.Item>
+ *     <Steps.Item index={2}>
+ *       <Steps.Trigger>
+ *         <Steps.Indicator />
+ *         Review
+ *       </Steps.Trigger>
+ *     </Steps.Item>
+ *   </Steps.List>
+ *
+ *   <Steps.Content index={0}>Account form content</Steps.Content>
+ *   <Steps.Content index={1}>Profile form content</Steps.Content>
+ *   <Steps.Content index={2}>Review content</Steps.Content>
+ *   <Steps.CompletedContent>All steps complete!</Steps.CompletedContent>
+ *
+ *   <Steps.PrevTrigger asChild>
+ *     <Button>Back</Button>
+ *   </Steps.PrevTrigger>
+ *   <Steps.NextTrigger asChild>
+ *     <Button>Next</Button>
+ *   </Steps.NextTrigger>
+ * </Steps.Root>
+ * ```
+ */
+export declare const Steps: {
+    /**
+     * # Steps.Root
+     *
+     * Container component that manages step state and provides context to child components.
+     * Supports both controlled (step/onStepChange) and uncontrolled (defaultStep) modes.
+     */
+    Root: {
+        (props: import('./steps.types').StepsRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Steps.List
+     *
+     * Container for grouping step items.
+     */
+    List: {
+        (props: import('./steps.types').StepsListProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Steps.Item
+     *
+     * Container for a single step (trigger + separator).
+     */
+    Item: {
+        (props: import('./steps.types').StepsItemProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Steps.Trigger
+     *
+     * Clickable element within each step for direct navigation.
+     */
+    Trigger: {
+        (props: import('./steps.types').StepsTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Steps.Indicator
+     *
+     * Visual marker showing step status (number, icon, or custom content).
+     */
+    Indicator: {
+        (props: import('./steps.types').StepsIndicatorProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Steps.Number
+     *
+     * Displays the step number (1-indexed).
+     */
+    Number: {
+        (props: import('./steps.types').StepsNumberProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Steps.Title
+     *
+     * Displays the step title.
+     */
+    Title: {
+        (props: import('./steps.types').StepsTitleProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Steps.Description
+     *
+     * Displays optional hint text below the title.
+     */
+    Description: {
+        (props: import('./steps.types').StepsDescriptionProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Steps.Separator
+     *
+     * Visual line connecting step indicators.
+     */
+    Separator: {
+        (props: import('./steps.types').StepsSeparatorProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Steps.Content
+     *
+     * Content container that auto-shows/hides based on current step.
+     */
+    Content: {
+        (props: import('./steps.types').StepsContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Steps.CompletedContent
+     *
+     * Content displayed when all steps are complete.
+     */
+    CompletedContent: {
+        (props: import('./steps.types').StepsCompletedContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Steps.PrevTrigger
+     *
+     * Navigation button to go to previous step.
+     */
+    PrevTrigger: {
+        (props: import('./steps.types').StepsPrevTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Steps.NextTrigger
+     *
+     * Navigation button to go to next step.
+     */
+    NextTrigger: {
+        (props: import('./steps.types').StepsNextTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * # Steps.Status
+     *
+     * Renders different content based on step state.
+     */
+    Status: {
+        (props: import('./steps.types').StepsStatusProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type { StepsRootProps, StepsListProps, StepsItemProps, StepsTriggerProps, StepsIndicatorProps, StepsNumberProps, StepsTitleProps, StepsDescriptionProps, StepsSeparatorProps, StepsContentProps, StepsCompletedContentProps, StepsPrevTriggerProps, StepsNextTriggerProps, StepsStatusProps, StepsChangeDetails, } from './steps.types';
+/**
+ * todo: get rid of this, this is needed for the react-docgen-typescript script
+ * that is parsing the typescript types for our documentation. The _ underscores
+ * serve as a reminder that this exports are awkward and should not be used.
+ */
+export { StepsRoot as _StepsRoot, StepsList as _StepsList, StepsItem as _StepsItem, StepsTrigger as _StepsTrigger, StepsIndicator as _StepsIndicator, StepsNumber as _StepsNumber, StepsTitle as _StepsTitle, StepsDescription as _StepsDescription, StepsSeparator as _StepsSeparator, StepsContent as _StepsContent, StepsCompletedContent as _StepsCompletedContent, StepsPrevTrigger as _StepsPrevTrigger, StepsNextTrigger as _StepsNextTrigger, StepsStatus as _StepsStatus, };

package/dist/components/steps/steps.recipe.d.ts

@@ -0,0 +1,148 @@
+/**
+ * Recipe configuration for the Steps component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ *
+ * Slots:
+ * - root: Container for the entire steps component
+ * - list: Flex container for step items and separators
+ * - item: Individual step container
+ * - trigger: Clickable button within each step for direct navigation
+ * - indicator: Circular step number or icon within trigger
+ * - number: Step number display within indicator
+ * - title: Step title text within trigger
+ * - description: Optional hint text within trigger
+ * - separator: Connecting line between steps
+ * - content: Auto-visibility content container for step content
+ * - completedContent: Content displayed when all steps are complete
+ * - prevTrigger: Navigation button to go to previous step
+ * - nextTrigger: Navigation button to go to next step
+ */
+export declare const stepsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"number" | "root" | "trigger" | "content" | "title" | "list" | "separator" | "description" | "item" | "indicator" | "completedContent" | "prevTrigger" | "nextTrigger", {
+    size: {
+        xs: {
+            root: {
+                "--indicator-size": "sizes.600";
+            };
+            item: {
+                gap: "200";
+            };
+            trigger: {
+                gap: "200";
+            };
+            indicator: {
+                width: "var(--indicator-size)";
+                height: "var(--indicator-size)";
+                fontSize: "300";
+                lineHeight: "350";
+            };
+            number: {
+                fontSize: "300";
+                lineHeight: "350";
+            };
+            title: {
+                fontSize: "350";
+                lineHeight: "550";
+                fontWeight: "bold";
+            };
+            description: {
+                fontSize: "300";
+                lineHeight: "450";
+            };
+        };
+        sm: {
+            root: {
+                "--indicator-size": "sizes.800";
+            };
+            item: {
+                gap: "300";
+            };
+            trigger: {
+                gap: "300";
+            };
+            indicator: {
+                width: "var(--indicator-size)";
+                height: "var(--indicator-size)";
+                fontSize: "350";
+                lineHeight: "400";
+            };
+            number: {
+                fontSize: "350";
+                lineHeight: "400";
+            };
+            title: {
+                fontSize: "400";
+                lineHeight: "500";
+                fontWeight: "semibold";
+            };
+            description: {
+                fontSize: "350";
+                lineHeight: "500";
+            };
+        };
+        md: {
+            root: {
+                "--indicator-size": "sizes.1000";
+            };
+            item: {
+                gap: "400";
+            };
+            trigger: {
+                gap: "400";
+            };
+            indicator: {
+                width: "var(--indicator-size)";
+                height: "var(--indicator-size)";
+                fontSize: "400";
+                lineHeight: "500";
+            };
+            number: {
+                fontSize: "400";
+                lineHeight: "500";
+            };
+            title: {
+                fontSize: "450";
+                lineHeight: "600";
+                fontWeight: "semibold";
+            };
+            description: {
+                fontSize: "350";
+                lineHeight: "500";
+            };
+        };
+    };
+    orientation: {
+        horizontal: {
+            list: {
+                flexDirection: "row";
+                gap: "300";
+            };
+            item: {
+                flex: "1";
+            };
+            separator: {
+                height: "var(--separator-width)";
+                flex: "1";
+                minWidth: "1000";
+            };
+        };
+        vertical: {
+            list: {
+                flexDirection: "column";
+                alignItems: "flex-start";
+                gap: "0";
+            };
+            item: {
+                flexDirection: "column";
+                alignItems: "flex-start";
+                gap: "0";
+            };
+            separator: {
+                width: "var(--separator-width)";
+                minHeight: "1000";
+                marginLeft: "calc(var(--indicator-size) / 2 - var(--separator-width) / 2)";
+                marginTop: "100";
+                marginBottom: "100";
+            };
+        };
+    };
+}>;