@accelint/design-toolkit 9.13.0 → 10.1.0

package/dist/components/stepper/context.d.ts

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { StepperState } from "./use-stepper-state.js";
+import "client-only";
+import * as react42 from "react";
+
+//#region src/components/stepper/context.d.ts
+/**
+ * Context for sharing Stepper state across child components.
+ *
+ * Provides access to current step, completion tracking, navigation methods,
+ * and step registration for StepperStep, StepperPanel, and navigation components.
+ *
+ * @example
+ * ```tsx
+ * const { currentStep, completedSteps, next, previous } = useStepperContext();
+ * ```
+ */
+declare const StepperContext: react42.Context<StepperState | null>;
+/**
+ * Returns the nearest stepper state from context.
+ *
+ * Must be called within a {@link Stepper} component tree.
+ *
+ * @returns The shared stepper state for the current component subtree.
+ * @throws {Error} Throws when called outside a stepper provider.
+ *
+ * @example
+ * ```tsx
+ * function CustomStepIndicator() {
+ *   const { currentStep, steps, isFirstStep } = useStepperContext();
+ *   return <div>Step {steps.indexOf(currentStep) + 1} of {steps.length}</div>;
+ * }
+ * ```
+ */
+declare function useStepperContext(): StepperState;
+//#endregion
+export { StepperContext, useStepperContext };
+//# sourceMappingURL=context.d.ts.map

package/dist/components/stepper/context.js

@@ -0,0 +1,56 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import "client-only";
+import { createContext, useContext } from "react";
+
+//#region src/components/stepper/context.tsx
+/**
+* Context for sharing Stepper state across child components.
+*
+* Provides access to current step, completion tracking, navigation methods,
+* and step registration for StepperStep, StepperPanel, and navigation components.
+*
+* @example
+* ```tsx
+* const { currentStep, completedSteps, next, previous } = useStepperContext();
+* ```
+*/
+const StepperContext = createContext(null);
+/**
+* Returns the nearest stepper state from context.
+*
+* Must be called within a {@link Stepper} component tree.
+*
+* @returns The shared stepper state for the current component subtree.
+* @throws {Error} Throws when called outside a stepper provider.
+*
+* @example
+* ```tsx
+* function CustomStepIndicator() {
+*   const { currentStep, steps, isFirstStep } = useStepperContext();
+*   return <div>Step {steps.indexOf(currentStep) + 1} of {steps.length}</div>;
+* }
+* ```
+*/
+function useStepperContext() {
+	const context = useContext(StepperContext);
+	if (context === null) throw new Error("useStepperContext must be used within a Stepper component");
+	return context;
+}
+
+//#endregion
+export { StepperContext, useStepperContext };
+//# sourceMappingURL=context.js.map

package/dist/components/stepper/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/stepper/context.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { createContext, useContext } from 'react';\nimport type { StepperState } from './use-stepper-state';\n\n/**\n * Context for sharing Stepper state across child components.\n *\n * Provides access to current step, completion tracking, navigation methods,\n * and step registration for StepperStep, StepperPanel, and navigation components.\n *\n * @example\n * ```tsx\n * const { currentStep, completedSteps, next, previous } = useStepperContext();\n * ```\n */\nexport const StepperContext = createContext<StepperState | null>(null);\n\n/**\n * Returns the nearest stepper state from context.\n *\n * Must be called within a {@link Stepper} component tree.\n *\n * @returns The shared stepper state for the current component subtree.\n * @throws {Error} Throws when called outside a stepper provider.\n *\n * @example\n * ```tsx\n * function CustomStepIndicator() {\n *   const { currentStep, steps, isFirstStep } = useStepperContext();\n *   return <div>Step {steps.indexOf(currentStep) + 1} of {steps.length}</div>;\n * }\n * ```\n */\nexport function useStepperContext(): StepperState {\n  const context = useContext(StepperContext);\n\n  if (context === null) {\n    throw new Error(\n      'useStepperContext must be used within a Stepper component',\n    );\n  }\n\n  return context;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAa,iBAAiB,cAAmC,KAAK;;;;;;;;;;;;;;;;;AAkBtE,SAAgB,oBAAkC;CAChD,MAAM,UAAU,WAAW,eAAe;AAE1C,KAAI,YAAY,KACd,OAAM,IAAI,MACR,4DACD;AAGH,QAAO"}

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

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { Orientation, StepperBackProps, StepperListProps, StepperListRenderState, StepperNextProps, StepperPanelProps, StepperPanelRenderState, StepperProps, StepperRenderState, StepperStepProps, StepperStepRenderState } from "./types.js";
+import { StepperBack } from "./back.js";
+import { StepperState, UseStepperStateProps, useStepperState } from "./use-stepper-state.js";
+import { StepperContext, useStepperContext } from "./context.js";
+import { StepperList } from "./list.js";
+import { StepperNext } from "./next.js";
+import { StepperPanel } from "./panel.js";
+import { StepperStep } from "./step.js";
+import { Stepper } from "./stepper.js";
+export { type Orientation, Stepper, StepperBack, type StepperBackProps, StepperContext, StepperList, type StepperListProps, type StepperListRenderState, StepperNext, type StepperNextProps, StepperPanel, type StepperPanelProps, type StepperPanelRenderState, type StepperProps, type StepperRenderState, type StepperState, StepperStep, type StepperStepProps, type StepperStepRenderState, type UseStepperStateProps, useStepperContext, useStepperState };

package/dist/components/stepper/index.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+import { StepperContext, useStepperContext } from "./context.js";
+import { StepperBack } from "./back.js";
+import { StepperList } from "./list.js";
+import { StepperNext } from "./next.js";
+import { StepperPanel } from "./panel.js";
+import { StepperStep } from "./step.js";
+import { useStepperState } from "./use-stepper-state.js";
+import { Stepper } from "./stepper.js";
+
+export { Stepper, StepperBack, StepperContext, StepperList, StepperNext, StepperPanel, StepperStep, useStepperContext, useStepperState };

package/dist/components/stepper/list.d.ts

@@ -0,0 +1,65 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { StepperListProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime195 from "react/jsx-runtime";
+
+//#region src/components/stepper/list.d.ts
+
+/**
+ * Navigation container for {@link StepperStep} children.
+ *
+ * Provides arrow-key step navigation based on the current stepper orientation.
+ * Horizontal steppers use Left and Right arrows, while vertical steppers use
+ * Up and Down arrows. Disabled steps are skipped during keyboard navigation.
+ *
+ * @param props - The step list props.
+ * @param props.children - Step buttons to render in navigation order.
+ * @param props.className - CSS class applied to the navigation container.
+ * @returns The rendered step navigation container.
+ *
+ * @example
+ * Horizontal step list:
+ * ```tsx
+ * <StepperList aria-label="Registration steps">
+ *   <StepperStep id="account">Account</StepperStep>
+ *   <StepperStep id="profile">Profile</StepperStep>
+ *   <StepperStep id="preferences">Preferences</StepperStep>
+ * </StepperList>
+ * ```
+ *
+ * @example
+ * Vertical step list:
+ * ```tsx
+ * <Stepper orientation="vertical">
+ *   <StepperList aria-label="Setup wizard">
+ *     <StepperStep id="step-1">Welcome</StepperStep>
+ *     <StepperStep id="step-2">Configuration</StepperStep>
+ *     <StepperStep id="step-3">Review</StepperStep>
+ *   </StepperList>
+ * </Stepper>
+ * ```
+ *
+ * @example
+ * Custom styling:
+ * ```tsx
+ * <StepperList className="flex-row gap-4">
+ *   <StepperStep id="step-1">Step 1</StepperStep>
+ *   <StepperStep id="step-2">Step 2</StepperStep>
+ * </StepperList>
+ * ```
+ */
+declare function StepperList(props: StepperListProps): react_jsx_runtime195.JSX.Element;
+//#endregion
+export { StepperList };
+//# sourceMappingURL=list.d.ts.map

package/dist/components/stepper/list.js

@@ -0,0 +1,121 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { useStepperContext } from "./context.js";
+import "client-only";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/stepper/list.tsx
+/**
+* Maps arrow keys to navigation direction based on orientation.
+* @param key - Keyboard event key
+* @param orientation - Stepper orientation
+* @returns 1 for forward, -1 for backward, null for non-navigation keys
+*/
+const getDirectionFromKey = (key, orientation) => {
+	if (orientation === "horizontal") {
+		if (key === "ArrowRight") return 1;
+		if (key === "ArrowLeft") return -1;
+	} else {
+		if (key === "ArrowDown") return 1;
+		if (key === "ArrowUp") return -1;
+	}
+	return null;
+};
+/**
+* Navigation container for {@link StepperStep} children.
+*
+* Provides arrow-key step navigation based on the current stepper orientation.
+* Horizontal steppers use Left and Right arrows, while vertical steppers use
+* Up and Down arrows. Disabled steps are skipped during keyboard navigation.
+*
+* @param props - The step list props.
+* @param props.children - Step buttons to render in navigation order.
+* @param props.className - CSS class applied to the navigation container.
+* @returns The rendered step navigation container.
+*
+* @example
+* Horizontal step list:
+* ```tsx
+* <StepperList aria-label="Registration steps">
+*   <StepperStep id="account">Account</StepperStep>
+*   <StepperStep id="profile">Profile</StepperStep>
+*   <StepperStep id="preferences">Preferences</StepperStep>
+* </StepperList>
+* ```
+*
+* @example
+* Vertical step list:
+* ```tsx
+* <Stepper orientation="vertical">
+*   <StepperList aria-label="Setup wizard">
+*     <StepperStep id="step-1">Welcome</StepperStep>
+*     <StepperStep id="step-2">Configuration</StepperStep>
+*     <StepperStep id="step-3">Review</StepperStep>
+*   </StepperList>
+* </Stepper>
+* ```
+*
+* @example
+* Custom styling:
+* ```tsx
+* <StepperList className="flex-row gap-4">
+*   <StepperStep id="step-1">Step 1</StepperStep>
+*   <StepperStep id="step-2">Step 2</StepperStep>
+* </StepperList>
+* ```
+*/
+function StepperList(props) {
+	const { children, className, ...restProps } = props;
+	const { currentStep, orientation, steps, goToStep, isDisabled } = useStepperContext();
+	const wrapIndex = (index) => {
+		if (index < 0) return steps.length - 1;
+		if (index >= steps.length) return 0;
+		return index;
+	};
+	const findNavigableStep = (startIndex, direction) => {
+		let searchIndex = wrapIndex(startIndex);
+		const maxIterations = steps.length;
+		for (let i = 0; i < maxIterations; i++) {
+			const key = steps[searchIndex];
+			if (key !== void 0 && !isDisabled(key)) return key;
+			searchIndex = wrapIndex(searchIndex + direction);
+		}
+		return null;
+	};
+	const handleKeyDown = (event) => {
+		if (currentStep === void 0 || steps.length === 0) return;
+		const currentIndex = steps.indexOf(currentStep);
+		if (currentIndex === -1) return;
+		const direction = getDirectionFromKey(event.key, orientation);
+		if (direction === null) return;
+		const targetKey = findNavigableStep(wrapIndex(currentIndex + direction), direction);
+		if (targetKey !== null) {
+			event.preventDefault();
+			goToStep(targetKey);
+		}
+	};
+	return /* @__PURE__ */ jsx("nav", {
+		...restProps,
+		className,
+		"data-orientation": orientation,
+		onKeyDown: handleKeyDown,
+		children
+	});
+}
+
+//#endregion
+export { StepperList };
+//# sourceMappingURL=list.js.map

package/dist/components/stepper/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","names":[],"sources":["../../../src/components/stepper/list.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport type { Key } from '@react-types/shared';\nimport 'client-only';\nimport { useStepperContext } from './context';\nimport type { StepperListProps } from './types';\n\n/**\n * Maps arrow keys to navigation direction based on orientation.\n * @param key - Keyboard event key\n * @param orientation - Stepper orientation\n * @returns 1 for forward, -1 for backward, null for non-navigation keys\n */\nconst getDirectionFromKey = (\n  key: string,\n  orientation: 'horizontal' | 'vertical',\n): number | null => {\n  if (orientation === 'horizontal') {\n    if (key === 'ArrowRight') {\n      return 1;\n    }\n    if (key === 'ArrowLeft') {\n      return -1;\n    }\n  } else {\n    if (key === 'ArrowDown') {\n      return 1;\n    }\n    if (key === 'ArrowUp') {\n      return -1;\n    }\n  }\n  return null;\n};\n\n/**\n * Navigation container for {@link StepperStep} children.\n *\n * Provides arrow-key step navigation based on the current stepper orientation.\n * Horizontal steppers use Left and Right arrows, while vertical steppers use\n * Up and Down arrows. Disabled steps are skipped during keyboard navigation.\n *\n * @param props - The step list props.\n * @param props.children - Step buttons to render in navigation order.\n * @param props.className - CSS class applied to the navigation container.\n * @returns The rendered step navigation container.\n *\n * @example\n * Horizontal step list:\n * ```tsx\n * <StepperList aria-label=\"Registration steps\">\n *   <StepperStep id=\"account\">Account</StepperStep>\n *   <StepperStep id=\"profile\">Profile</StepperStep>\n *   <StepperStep id=\"preferences\">Preferences</StepperStep>\n * </StepperList>\n * ```\n *\n * @example\n * Vertical step list:\n * ```tsx\n * <Stepper orientation=\"vertical\">\n *   <StepperList aria-label=\"Setup wizard\">\n *     <StepperStep id=\"step-1\">Welcome</StepperStep>\n *     <StepperStep id=\"step-2\">Configuration</StepperStep>\n *     <StepperStep id=\"step-3\">Review</StepperStep>\n *   </StepperList>\n * </Stepper>\n * ```\n *\n * @example\n * Custom styling:\n * ```tsx\n * <StepperList className=\"flex-row gap-4\">\n *   <StepperStep id=\"step-1\">Step 1</StepperStep>\n *   <StepperStep id=\"step-2\">Step 2</StepperStep>\n * </StepperList>\n * ```\n */\nexport function StepperList(props: StepperListProps) {\n  const { children, className, ...restProps } = props;\n\n  const { currentStep, orientation, steps, goToStep, isDisabled } =\n    useStepperContext();\n\n  const wrapIndex = (index: number): number => {\n    if (index < 0) {\n      return steps.length - 1;\n    }\n    if (index >= steps.length) {\n      return 0;\n    }\n    return index;\n  };\n\n  const findNavigableStep = (\n    startIndex: number,\n    direction: number,\n  ): Key | null => {\n    let searchIndex = wrapIndex(startIndex);\n    const maxIterations = steps.length;\n\n    for (let i = 0; i < maxIterations; i++) {\n      const key = steps[searchIndex];\n      if (key !== undefined && !isDisabled(key)) {\n        return key;\n      }\n      searchIndex = wrapIndex(searchIndex + direction);\n    }\n\n    return null;\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (currentStep === undefined || steps.length === 0) {\n      return;\n    }\n\n    const currentIndex = steps.indexOf(currentStep);\n    if (currentIndex === -1) {\n      return;\n    }\n\n    const direction = getDirectionFromKey(event.key, orientation);\n    if (direction === null) {\n      return;\n    }\n\n    const targetIndex = wrapIndex(currentIndex + direction);\n    const targetKey = findNavigableStep(targetIndex, direction);\n\n    if (targetKey !== null) {\n      event.preventDefault();\n      goToStep(targetKey);\n    }\n  };\n\n  return (\n    <nav\n      {...restProps}\n      className={className}\n      data-orientation={orientation}\n      onKeyDown={handleKeyDown}\n    >\n      {children}\n    </nav>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,uBACJ,KACA,gBACkB;AAClB,KAAI,gBAAgB,cAAc;AAChC,MAAI,QAAQ,aACV,QAAO;AAET,MAAI,QAAQ,YACV,QAAO;QAEJ;AACL,MAAI,QAAQ,YACV,QAAO;AAET,MAAI,QAAQ,UACV,QAAO;;AAGX,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CT,SAAgB,YAAY,OAAyB;CACnD,MAAM,EAAE,UAAU,WAAW,GAAG,cAAc;CAE9C,MAAM,EAAE,aAAa,aAAa,OAAO,UAAU,eACjD,mBAAmB;CAErB,MAAM,aAAa,UAA0B;AAC3C,MAAI,QAAQ,EACV,QAAO,MAAM,SAAS;AAExB,MAAI,SAAS,MAAM,OACjB,QAAO;AAET,SAAO;;CAGT,MAAM,qBACJ,YACA,cACe;EACf,IAAI,cAAc,UAAU,WAAW;EACvC,MAAM,gBAAgB,MAAM;AAE5B,OAAK,IAAI,IAAI,GAAG,IAAI,eAAe,KAAK;GACtC,MAAM,MAAM,MAAM;AAClB,OAAI,QAAQ,UAAa,CAAC,WAAW,IAAI,CACvC,QAAO;AAET,iBAAc,UAAU,cAAc,UAAU;;AAGlD,SAAO;;CAGT,MAAM,iBAAiB,UAA+C;AACpE,MAAI,gBAAgB,UAAa,MAAM,WAAW,EAChD;EAGF,MAAM,eAAe,MAAM,QAAQ,YAAY;AAC/C,MAAI,iBAAiB,GACnB;EAGF,MAAM,YAAY,oBAAoB,MAAM,KAAK,YAAY;AAC7D,MAAI,cAAc,KAChB;EAIF,MAAM,YAAY,kBADE,UAAU,eAAe,UAAU,EACN,UAAU;AAE3D,MAAI,cAAc,MAAM;AACtB,SAAM,gBAAgB;AACtB,YAAS,UAAU;;;AAIvB,QACE,oBAAC;EACC,GAAI;EACO;EACX,oBAAkB;EAClB,WAAW;EAEV;GACG"}

package/dist/components/stepper/next.d.ts

@@ -0,0 +1,80 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { StepperNextProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime178 from "react/jsx-runtime";
+
+//#region src/components/stepper/next.d.ts
+
+/**
+ * Navigation button that moves to the next step.
+ *
+ * Automatically disables on the last step unless the disabled state is
+ * explicitly overridden. Uses an accessible name of `Go to next step`
+ * regardless of the visible button label.
+ *
+ * @param props - The next-button props.
+ * @param props.children - Visible button content, typically "Next", "Continue", or "Finish".
+ * @param props.isDisabled - Overrides the automatic last-step disabled state.
+ * @param props.className - CSS class applied to the button.
+ * @returns The rendered next-step button.
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <Stepper defaultStep="step-1">
+ *   <StepperList>
+ *     <StepperStep id="step-1">Step 1</StepperStep>
+ *     <StepperStep id="step-2">Step 2</StepperStep>
+ *   </StepperList>
+ *   <StepperPanel id="step-1">Content 1</StepperPanel>
+ *   <StepperPanel id="step-2">Content 2</StepperPanel>
+ *   <StepperBack>Back</StepperBack>
+ *   <StepperNext>Next</StepperNext>
+ * </Stepper>
+ * ```
+ *
+ * @example
+ * Dynamic label based on step:
+ * ```tsx
+ * const { isLastStep } = useStepperContext();
+ * <StepperNext>
+ *   {isLastStep() ? 'Finish' : 'Next'}
+ * </StepperNext>
+ * ```
+ *
+ * @example
+ * Override disabled state:
+ * ```tsx
+ * <StepperNext isDisabled={!formIsValid}>
+ *   Continue
+ * </StepperNext>
+ * ```
+ *
+ * @example
+ * Custom styling:
+ * ```tsx
+ * <StepperNext className="custom-next-button">
+ *   Next →
+ * </StepperNext>
+ * ```
+ */
+declare function StepperNext({
+  children,
+  isDisabled: isDisabledProp,
+  className,
+  ...rest
+}: StepperNextProps): react_jsx_runtime178.JSX.Element;
+//#endregion
+export { StepperNext };
+//# sourceMappingURL=next.d.ts.map

package/dist/components/stepper/next.js

@@ -0,0 +1,91 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { Button } from "../button/index.js";
+import { useStepperContext } from "./context.js";
+import "client-only";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/stepper/next.tsx
+/**
+* Navigation button that moves to the next step.
+*
+* Automatically disables on the last step unless the disabled state is
+* explicitly overridden. Uses an accessible name of `Go to next step`
+* regardless of the visible button label.
+*
+* @param props - The next-button props.
+* @param props.children - Visible button content, typically "Next", "Continue", or "Finish".
+* @param props.isDisabled - Overrides the automatic last-step disabled state.
+* @param props.className - CSS class applied to the button.
+* @returns The rendered next-step button.
+*
+* @example
+* Basic usage:
+* ```tsx
+* <Stepper defaultStep="step-1">
+*   <StepperList>
+*     <StepperStep id="step-1">Step 1</StepperStep>
+*     <StepperStep id="step-2">Step 2</StepperStep>
+*   </StepperList>
+*   <StepperPanel id="step-1">Content 1</StepperPanel>
+*   <StepperPanel id="step-2">Content 2</StepperPanel>
+*   <StepperBack>Back</StepperBack>
+*   <StepperNext>Next</StepperNext>
+* </Stepper>
+* ```
+*
+* @example
+* Dynamic label based on step:
+* ```tsx
+* const { isLastStep } = useStepperContext();
+* <StepperNext>
+*   {isLastStep() ? 'Finish' : 'Next'}
+* </StepperNext>
+* ```
+*
+* @example
+* Override disabled state:
+* ```tsx
+* <StepperNext isDisabled={!formIsValid}>
+*   Continue
+* </StepperNext>
+* ```
+*
+* @example
+* Custom styling:
+* ```tsx
+* <StepperNext className="custom-next-button">
+*   Next →
+* </StepperNext>
+* ```
+*/
+function StepperNext({ children = "Next", isDisabled: isDisabledProp, className, ...rest }) {
+	const { next, isLastStep } = useStepperContext();
+	const isDisabled = isDisabledProp ?? isLastStep;
+	return /* @__PURE__ */ jsx(Button, {
+		...rest,
+		className,
+		isDisabled,
+		onClick: next,
+		"aria-label": "Go to next step",
+		"aria-disabled": isDisabled,
+		children
+	});
+}
+
+//#endregion
+export { StepperNext };
+//# sourceMappingURL=next.js.map

package/dist/components/stepper/next.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"next.js","names":[],"sources":["../../../src/components/stepper/next.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { Button } from '../button';\nimport { useStepperContext } from './context';\nimport type { StepperNextProps } from './types';\n\n/**\n * Navigation button that moves to the next step.\n *\n * Automatically disables on the last step unless the disabled state is\n * explicitly overridden. Uses an accessible name of `Go to next step`\n * regardless of the visible button label.\n *\n * @param props - The next-button props.\n * @param props.children - Visible button content, typically \"Next\", \"Continue\", or \"Finish\".\n * @param props.isDisabled - Overrides the automatic last-step disabled state.\n * @param props.className - CSS class applied to the button.\n * @returns The rendered next-step button.\n *\n * @example\n * Basic usage:\n * ```tsx\n * <Stepper defaultStep=\"step-1\">\n *   <StepperList>\n *     <StepperStep id=\"step-1\">Step 1</StepperStep>\n *     <StepperStep id=\"step-2\">Step 2</StepperStep>\n *   </StepperList>\n *   <StepperPanel id=\"step-1\">Content 1</StepperPanel>\n *   <StepperPanel id=\"step-2\">Content 2</StepperPanel>\n *   <StepperBack>Back</StepperBack>\n *   <StepperNext>Next</StepperNext>\n * </Stepper>\n * ```\n *\n * @example\n * Dynamic label based on step:\n * ```tsx\n * const { isLastStep } = useStepperContext();\n * <StepperNext>\n *   {isLastStep() ? 'Finish' : 'Next'}\n * </StepperNext>\n * ```\n *\n * @example\n * Override disabled state:\n * ```tsx\n * <StepperNext isDisabled={!formIsValid}>\n *   Continue\n * </StepperNext>\n * ```\n *\n * @example\n * Custom styling:\n * ```tsx\n * <StepperNext className=\"custom-next-button\">\n *   Next →\n * </StepperNext>\n * ```\n */\n\nexport function StepperNext({\n  children = 'Next',\n  isDisabled: isDisabledProp,\n  className,\n  ...rest\n}: StepperNextProps) {\n  const { next, isLastStep } = useStepperContext();\n\n  // Auto-disable at last step unless explicitly overridden\n  const isDisabled = isDisabledProp ?? isLastStep;\n\n  return (\n    <Button\n      {...rest}\n      className={className}\n      isDisabled={isDisabled}\n      onClick={next}\n      aria-label='Go to next step'\n      aria-disabled={isDisabled}\n    >\n      {children}\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA,SAAgB,YAAY,EAC1B,WAAW,QACX,YAAY,gBACZ,WACA,GAAG,QACgB;CACnB,MAAM,EAAE,MAAM,eAAe,mBAAmB;CAGhD,MAAM,aAAa,kBAAkB;AAErC,QACE,oBAAC;EACC,GAAI;EACO;EACC;EACZ,SAAS;EACT,cAAW;EACX,iBAAe;EAEd;GACM"}

package/dist/components/stepper/panel.d.ts

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { StepperPanelProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime208 from "react/jsx-runtime";
+
+//#region src/components/stepper/panel.d.ts
+
+/**
+ * Content panel displayed for the active step.
+ *
+ * Renders its children only when its `id` matches the current step. Inactive
+ * panels are unmounted from the DOM and do not participate in layout or focus order.
+ *
+ * @param props - The panel props.
+ * @param props.id - Step key matched against the current step and corresponding step button.
+ * @param props.children - Panel content to render when the step is active.
+ * @param props.className - CSS class applied to the panel container.
+ * @returns The rendered panel for the active step, or `null` when inactive.
+ *
+ * @example
+ * Basic panel:
+ * ```tsx
+ * <Stepper defaultStep="account">
+ *   <StepperList>
+ *     <StepperStep id="account">Account</StepperStep>
+ *     <StepperStep id="profile">Profile</StepperStep>
+ *   </StepperList>
+ *   <StepperPanel id="account">
+ *     <h2>Account Information</h2>
+ *     <input type="text" name="username" />
+ *   </StepperPanel>
+ *   <StepperPanel id="profile">
+ *     <h2>Profile Details</h2>
+ *     <input type="text" name="displayName" />
+ *   </StepperPanel>
+ * </Stepper>
+ * ```
+ *
+ * @example
+ * Custom styling:
+ * ```tsx
+ * <StepperPanel id="summary" className="panel-content">
+ *   <SummaryContent />
+ * </StepperPanel>
+ * ```
+ */
+declare function StepperPanel({
+  id,
+  children,
+  className,
+  ...rest
+}: StepperPanelProps): react_jsx_runtime208.JSX.Element | null;
+//#endregion
+export { StepperPanel };
+//# sourceMappingURL=panel.d.ts.map