@accelint/design-toolkit 10.0.0 → 10.1.0

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

package/dist/components/stepper/panel.js

@@ -0,0 +1,77 @@
+/*
+ * 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/panel.tsx
+/**
+* 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>
+* ```
+*/
+function StepperPanel({ id, children, className, ...rest }) {
+	const { currentStep, getStepIndex } = useStepperContext();
+	if (!(currentStep === id)) return null;
+	const stepId = `stepper-step-${getStepIndex(id)}`;
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		role: "tabpanel",
+		"aria-labelledby": stepId,
+		tabIndex: -1,
+		className,
+		"data-current": "true",
+		children
+	});
+}
+
+//#endregion
+export { StepperPanel };
+//# sourceMappingURL=panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","names":[],"sources":["../../../src/components/stepper/panel.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 { useStepperContext } from './context';\nimport type { StepperPanelProps } from './types';\n\n/**\n * Content panel displayed for the active step.\n *\n * Renders its children only when its `id` matches the current step. Inactive\n * panels are unmounted from the DOM and do not participate in layout or focus order.\n *\n * @param props - The panel props.\n * @param props.id - Step key matched against the current step and corresponding step button.\n * @param props.children - Panel content to render when the step is active.\n * @param props.className - CSS class applied to the panel container.\n * @returns The rendered panel for the active step, or `null` when inactive.\n *\n * @example\n * Basic panel:\n * ```tsx\n * <Stepper defaultStep=\"account\">\n *   <StepperList>\n *     <StepperStep id=\"account\">Account</StepperStep>\n *     <StepperStep id=\"profile\">Profile</StepperStep>\n *   </StepperList>\n *   <StepperPanel id=\"account\">\n *     <h2>Account Information</h2>\n *     <input type=\"text\" name=\"username\" />\n *   </StepperPanel>\n *   <StepperPanel id=\"profile\">\n *     <h2>Profile Details</h2>\n *     <input type=\"text\" name=\"displayName\" />\n *   </StepperPanel>\n * </Stepper>\n * ```\n *\n * @example\n * Custom styling:\n * ```tsx\n * <StepperPanel id=\"summary\" className=\"panel-content\">\n *   <SummaryContent />\n * </StepperPanel>\n * ```\n */\n\nexport function StepperPanel({\n  id,\n  children,\n  className,\n  ...rest\n}: StepperPanelProps) {\n  const { currentStep, getStepIndex } = useStepperContext();\n\n  const isCurrent = currentStep === id;\n\n  // Conditional rendering: only render when current\n  if (!isCurrent) {\n    return null;\n  }\n\n  // Get the step index for aria-labelledby\n  const stepIndex = getStepIndex(id);\n  const stepId = `stepper-step-${stepIndex}`;\n\n  return (\n    <div\n      {...rest}\n      role='tabpanel'\n      aria-labelledby={stepId}\n      tabIndex={-1}\n      className={className}\n      data-current='true'\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,SAAgB,aAAa,EAC3B,IACA,UACA,WACA,GAAG,QACiB;CACpB,MAAM,EAAE,aAAa,iBAAiB,mBAAmB;AAKzD,KAAI,EAHc,gBAAgB,IAIhC,QAAO;CAKT,MAAM,SAAS,gBADG,aAAa,GAAG;AAGlC,QACE,oBAAC;EACC,GAAI;EACJ,MAAK;EACL,mBAAiB;EACjB,UAAU;EACC;EACX,gBAAa;EAEZ;GACG"}

package/dist/components/stepper/step.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 { StepperStepProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime206 from "react/jsx-runtime";
+
+//#region src/components/stepper/step.d.ts
+
+/**
+ * Interactive step button rendered inside a {@link StepperList}.
+ *
+ * Registers itself with the parent stepper on mount, unregisters on unmount,
+ * and exposes current, visited, and disabled state through data attributes for styling.
+ *
+ * @param props - The step props.
+ * @param props.id - Unique step key that must match the corresponding panel id.
+ * @param props.children - Visible content rendered inside the step button.
+ * @param props.className - CSS class applied to the step button.
+ * @param props.isDisabled - Whether this step is disabled locally in addition to shared disabled keys.
+ * @returns The rendered step button.
+ *
+ * @example
+ * Basic step with text label:
+ * ```tsx
+ * <StepperStep id="personal-info">Personal Information</StepperStep>
+ * ```
+ *
+ * @example
+ * Disabled step:
+ * ```tsx
+ * <StepperStep id="payment" isDisabled={!hasCompletedProfile}>
+ *   Payment Details
+ * </StepperStep>
+ * ```
+ */
+declare function StepperStep(props: StepperStepProps): react_jsx_runtime206.JSX.Element;
+//#endregion
+export { StepperStep };
+//# sourceMappingURL=step.d.ts.map