@accelint/design-toolkit 10.0.0 → 10.1.0

package/dist/components/stepper/step.js

@@ -0,0 +1,89 @@
+/*
+ * 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 { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/stepper/step.tsx
+/**
+* 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>
+* ```
+*/
+function StepperStep(props) {
+	const { id, children, className, isDisabled = false, ...restProps } = props;
+	const { currentStep, completedSteps, steps, register, unregister, goToStep, disabledKeys } = useStepperContext();
+	useEffect(() => {
+		register(id);
+		return () => {
+			unregister(id);
+		};
+	}, [
+		id,
+		register,
+		unregister
+	]);
+	const isCurrent = currentStep === id;
+	const isCompleted = completedSteps.has(id);
+	const isStepDisabled = isDisabled || disabledKeys.has(id);
+	const stepNumber = steps.indexOf(id) + 1;
+	const totalSteps = steps.length;
+	const handleClick = () => {
+		if (isStepDisabled) return;
+		goToStep(id);
+	};
+	return /* @__PURE__ */ jsx("button", {
+		...restProps,
+		type: "button",
+		className,
+		"aria-current": isCurrent ? "step" : void 0,
+		"aria-disabled": isStepDisabled,
+		"aria-label": `Step ${stepNumber} of ${totalSteps}`,
+		"data-current": isCurrent || void 0,
+		"data-visited": isCompleted || void 0,
+		"data-disabled": isStepDisabled || void 0,
+		disabled: isStepDisabled,
+		onClick: handleClick,
+		children
+	});
+}
+
+//#endregion
+export { StepperStep };
+//# sourceMappingURL=step.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step.js","names":[],"sources":["../../../src/components/stepper/step.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 { useEffect } from 'react';\nimport { useStepperContext } from './context';\nimport type { StepperStepProps } from './types';\n\n/**\n * Interactive step button rendered inside a {@link StepperList}.\n *\n * Registers itself with the parent stepper on mount, unregisters on unmount,\n * and exposes current, visited, and disabled state through data attributes for styling.\n *\n * @param props - The step props.\n * @param props.id - Unique step key that must match the corresponding panel id.\n * @param props.children - Visible content rendered inside the step button.\n * @param props.className - CSS class applied to the step button.\n * @param props.isDisabled - Whether this step is disabled locally in addition to shared disabled keys.\n * @returns The rendered step button.\n *\n * @example\n * Basic step with text label:\n * ```tsx\n * <StepperStep id=\"personal-info\">Personal Information</StepperStep>\n * ```\n *\n * @example\n * Disabled step:\n * ```tsx\n * <StepperStep id=\"payment\" isDisabled={!hasCompletedProfile}>\n *   Payment Details\n * </StepperStep>\n * ```\n */\nexport function StepperStep(props: StepperStepProps) {\n  const { id, children, className, isDisabled = false, ...restProps } = props;\n\n  const {\n    currentStep,\n    completedSteps,\n    steps,\n    register,\n    unregister,\n    goToStep,\n    disabledKeys,\n  } = useStepperContext();\n\n  // Register/unregister step on mount/unmount\n  useEffect(() => {\n    register(id);\n    return () => {\n      unregister(id);\n    };\n  }, [id, register, unregister]);\n\n  const isCurrent = currentStep === id;\n  const isCompleted = completedSteps.has(id);\n  const isStepDisabled = isDisabled || disabledKeys.has(id);\n  const stepNumber = steps.indexOf(id) + 1;\n  const totalSteps = steps.length;\n\n  const handleClick = () => {\n    if (isStepDisabled) {\n      return;\n    }\n    goToStep(id);\n  };\n\n  return (\n    <button\n      {...restProps}\n      type='button'\n      className={className}\n      aria-current={isCurrent ? 'step' : undefined}\n      aria-disabled={isStepDisabled}\n      aria-label={`Step ${stepNumber} of ${totalSteps}`}\n      data-current={isCurrent || undefined}\n      data-visited={isCompleted || undefined}\n      data-disabled={isStepDisabled || undefined}\n      disabled={isStepDisabled}\n      onClick={handleClick}\n    >\n      {children}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,SAAgB,YAAY,OAAyB;CACnD,MAAM,EAAE,IAAI,UAAU,WAAW,aAAa,OAAO,GAAG,cAAc;CAEtE,MAAM,EACJ,aACA,gBACA,OACA,UACA,YACA,UACA,iBACE,mBAAmB;AAGvB,iBAAgB;AACd,WAAS,GAAG;AACZ,eAAa;AACX,cAAW,GAAG;;IAEf;EAAC;EAAI;EAAU;EAAW,CAAC;CAE9B,MAAM,YAAY,gBAAgB;CAClC,MAAM,cAAc,eAAe,IAAI,GAAG;CAC1C,MAAM,iBAAiB,cAAc,aAAa,IAAI,GAAG;CACzD,MAAM,aAAa,MAAM,QAAQ,GAAG,GAAG;CACvC,MAAM,aAAa,MAAM;CAEzB,MAAM,oBAAoB;AACxB,MAAI,eACF;AAEF,WAAS,GAAG;;AAGd,QACE,oBAAC;EACC,GAAI;EACJ,MAAK;EACM;EACX,gBAAc,YAAY,SAAS;EACnC,iBAAe;EACf,cAAY,QAAQ,WAAW,MAAM;EACrC,gBAAc,aAAa;EAC3B,gBAAc,eAAe;EAC7B,iBAAe,kBAAkB;EACjC,UAAU;EACV,SAAS;EAER;GACM"}

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

@@ -0,0 +1,130 @@
+/*
+ * 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 { StepperProps } from "./types.js";
+import "client-only";
+import * as react_jsx_runtime207 from "react/jsx-runtime";
+
+//#region src/components/stepper/stepper.d.ts
+
+/**
+ * Root Stepper component for building multi-step workflows.
+ *
+ * Manages step registration, navigation state, completion tracking, and
+ * disabled-step behavior for the stepper component family. Supports both
+ * controlled and uncontrolled current-step management.
+ *
+ * @param props - The stepper props.
+ * @param props.children - Step list, step panels, and optional navigation controls.
+ * @param props.className - CSS class applied to the root container.
+ * @param props.currentStep - Controlled current step key.
+ * @param props.defaultStep - Initial current step key for uncontrolled usage.
+ * @param props.onStepChange - Called when navigation changes the current step.
+ * @param props.onBeforeStepChange - Called before navigation; return `false` to block the move.
+ * @param props.orientation - Layout orientation for the step list.
+ * @param props.completedSteps - Controlled set of completed step keys.
+ * @param props.defaultCompletedSteps - Initial completed step keys for uncontrolled usage.
+ * @param props.disabledKeys - Step keys that cannot be navigated to.
+ * @returns The rendered stepper root.
+ *
+ * @example
+ * Uncontrolled stepper with default step:
+ * ```tsx
+ * <Stepper defaultStep="step-1" orientation="horizontal">
+ *   <StepperList>
+ *     <StepperStep id="step-1">Personal Info</StepperStep>
+ *     <StepperStep id="step-2">Payment</StepperStep>
+ *     <StepperStep id="step-3">Confirmation</StepperStep>
+ *   </StepperList>
+ *   <StepperPanel id="step-1">
+ *     <h2>Personal Information</h2>
+ *     <StepperNext>Next</StepperNext>
+ *   </StepperPanel>
+ *   <StepperPanel id="step-2">
+ *     <h2>Payment Details</h2>
+ *     <StepperBack>Back</StepperBack>
+ *     <StepperNext>Next</StepperNext>
+ *   </StepperPanel>
+ *   <StepperPanel id="step-3">
+ *     <h2>Confirmation</h2>
+ *     <StepperBack>Back</StepperBack>
+ *   </StepperPanel>
+ * </Stepper>
+ * ```
+ *
+ * @example
+ * Controlled stepper with validation:
+ * ```tsx
+ * const [currentStep, setCurrentStep] = useState<Key>('step-1');
+ * const [formData, setFormData] = useState({});
+ *
+ * const handleBeforeStepChange = (fromKey: Key, toKey: Key) => {
+ *   // Validate form data before allowing navigation
+ *   if (fromKey === 'step-1' && !formData.name) {
+ *     alert('Please enter your name');
+ *     return false;
+ *   }
+ *   return true;
+ * };
+ *
+ * <Stepper
+ *   currentStep={currentStep}
+ *   onStepChange={setCurrentStep}
+ *   onBeforeStepChange={handleBeforeStepChange}
+ * >
+ *   <StepperList>
+ *     <StepperStep id="step-1">Step 1</StepperStep>
+ *     <StepperStep id="step-2">Step 2</StepperStep>
+ *   </StepperList>
+ *   <StepperPanel id="step-1">
+ *     <input onChange={(e) => setFormData({ name: e.target.value })} />
+ *     <StepperNext>Next</StepperNext>
+ *   </StepperPanel>
+ *   <StepperPanel id="step-2">
+ *     <StepperBack>Back</StepperBack>
+ *   </StepperPanel>
+ * </Stepper>
+ * ```
+ *
+ * @example
+ * Stepper with disabled steps:
+ * ```tsx
+ * const [completedSteps, setCompletedSteps] = useState(new Set<Key>());
+ * const disabledKeys = useMemo(() => {
+ *   const disabled = new Set<Key>();
+ *   if (!completedSteps.has('step-1')) {
+ *     disabled.add('step-2');
+ *     disabled.add('step-3');
+ *   }
+ *   if (!completedSteps.has('step-2')) {
+ *     disabled.add('step-3');
+ *   }
+ *   return disabled;
+ * }, [completedSteps]);
+ *
+ * <Stepper
+ *   defaultStep="step-1"
+ *   completedSteps={completedSteps}
+ *   disabledKeys={disabledKeys}
+ * >
+ *   <StepperList>
+ *     <StepperStep id="step-1">Step 1</StepperStep>
+ *     <StepperStep id="step-2">Step 2</StepperStep>
+ *     <StepperStep id="step-3">Step 3</StepperStep>
+ *   </StepperList>
+ * </Stepper>
+ * ```
+ */
+declare function Stepper(props: StepperProps): react_jsx_runtime207.JSX.Element;
+//#endregion
+export { Stepper };
+//# sourceMappingURL=stepper.d.ts.map

package/dist/components/stepper/stepper.js

@@ -0,0 +1,154 @@
+/*
+ * 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 { StepperContext } from "./context.js";
+import { useStepperState } from "./use-stepper-state.js";
+import "client-only";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/stepper/stepper.tsx
+/**
+* Root Stepper component for building multi-step workflows.
+*
+* Manages step registration, navigation state, completion tracking, and
+* disabled-step behavior for the stepper component family. Supports both
+* controlled and uncontrolled current-step management.
+*
+* @param props - The stepper props.
+* @param props.children - Step list, step panels, and optional navigation controls.
+* @param props.className - CSS class applied to the root container.
+* @param props.currentStep - Controlled current step key.
+* @param props.defaultStep - Initial current step key for uncontrolled usage.
+* @param props.onStepChange - Called when navigation changes the current step.
+* @param props.onBeforeStepChange - Called before navigation; return `false` to block the move.
+* @param props.orientation - Layout orientation for the step list.
+* @param props.completedSteps - Controlled set of completed step keys.
+* @param props.defaultCompletedSteps - Initial completed step keys for uncontrolled usage.
+* @param props.disabledKeys - Step keys that cannot be navigated to.
+* @returns The rendered stepper root.
+*
+* @example
+* Uncontrolled stepper with default step:
+* ```tsx
+* <Stepper defaultStep="step-1" orientation="horizontal">
+*   <StepperList>
+*     <StepperStep id="step-1">Personal Info</StepperStep>
+*     <StepperStep id="step-2">Payment</StepperStep>
+*     <StepperStep id="step-3">Confirmation</StepperStep>
+*   </StepperList>
+*   <StepperPanel id="step-1">
+*     <h2>Personal Information</h2>
+*     <StepperNext>Next</StepperNext>
+*   </StepperPanel>
+*   <StepperPanel id="step-2">
+*     <h2>Payment Details</h2>
+*     <StepperBack>Back</StepperBack>
+*     <StepperNext>Next</StepperNext>
+*   </StepperPanel>
+*   <StepperPanel id="step-3">
+*     <h2>Confirmation</h2>
+*     <StepperBack>Back</StepperBack>
+*   </StepperPanel>
+* </Stepper>
+* ```
+*
+* @example
+* Controlled stepper with validation:
+* ```tsx
+* const [currentStep, setCurrentStep] = useState<Key>('step-1');
+* const [formData, setFormData] = useState({});
+*
+* const handleBeforeStepChange = (fromKey: Key, toKey: Key) => {
+*   // Validate form data before allowing navigation
+*   if (fromKey === 'step-1' && !formData.name) {
+*     alert('Please enter your name');
+*     return false;
+*   }
+*   return true;
+* };
+*
+* <Stepper
+*   currentStep={currentStep}
+*   onStepChange={setCurrentStep}
+*   onBeforeStepChange={handleBeforeStepChange}
+* >
+*   <StepperList>
+*     <StepperStep id="step-1">Step 1</StepperStep>
+*     <StepperStep id="step-2">Step 2</StepperStep>
+*   </StepperList>
+*   <StepperPanel id="step-1">
+*     <input onChange={(e) => setFormData({ name: e.target.value })} />
+*     <StepperNext>Next</StepperNext>
+*   </StepperPanel>
+*   <StepperPanel id="step-2">
+*     <StepperBack>Back</StepperBack>
+*   </StepperPanel>
+* </Stepper>
+* ```
+*
+* @example
+* Stepper with disabled steps:
+* ```tsx
+* const [completedSteps, setCompletedSteps] = useState(new Set<Key>());
+* const disabledKeys = useMemo(() => {
+*   const disabled = new Set<Key>();
+*   if (!completedSteps.has('step-1')) {
+*     disabled.add('step-2');
+*     disabled.add('step-3');
+*   }
+*   if (!completedSteps.has('step-2')) {
+*     disabled.add('step-3');
+*   }
+*   return disabled;
+* }, [completedSteps]);
+*
+* <Stepper
+*   defaultStep="step-1"
+*   completedSteps={completedSteps}
+*   disabledKeys={disabledKeys}
+* >
+*   <StepperList>
+*     <StepperStep id="step-1">Step 1</StepperStep>
+*     <StepperStep id="step-2">Step 2</StepperStep>
+*     <StepperStep id="step-3">Step 3</StepperStep>
+*   </StepperList>
+* </Stepper>
+* ```
+*/
+function Stepper(props) {
+	const { children, className, currentStep, defaultStep, onStepChange, onBeforeStepChange, orientation = "horizontal", completedSteps, defaultCompletedSteps, disabledKeys, ...restProps } = props;
+	const state = useStepperState({
+		currentStep,
+		defaultStep,
+		onStepChange,
+		onBeforeStepChange,
+		completedSteps,
+		defaultCompletedSteps,
+		disabledKeys,
+		orientation
+	});
+	return /* @__PURE__ */ jsx(StepperContext.Provider, {
+		value: state,
+		children: /* @__PURE__ */ jsx("div", {
+			...restProps,
+			className,
+			children
+		})
+	});
+}
+
+//#endregion
+export { Stepper };
+//# sourceMappingURL=stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","names":[],"sources":["../../../src/components/stepper/stepper.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 { StepperContext } from './context';\nimport { useStepperState } from './use-stepper-state';\nimport type { StepperProps } from './types';\n\n/**\n * Root Stepper component for building multi-step workflows.\n *\n * Manages step registration, navigation state, completion tracking, and\n * disabled-step behavior for the stepper component family. Supports both\n * controlled and uncontrolled current-step management.\n *\n * @param props - The stepper props.\n * @param props.children - Step list, step panels, and optional navigation controls.\n * @param props.className - CSS class applied to the root container.\n * @param props.currentStep - Controlled current step key.\n * @param props.defaultStep - Initial current step key for uncontrolled usage.\n * @param props.onStepChange - Called when navigation changes the current step.\n * @param props.onBeforeStepChange - Called before navigation; return `false` to block the move.\n * @param props.orientation - Layout orientation for the step list.\n * @param props.completedSteps - Controlled set of completed step keys.\n * @param props.defaultCompletedSteps - Initial completed step keys for uncontrolled usage.\n * @param props.disabledKeys - Step keys that cannot be navigated to.\n * @returns The rendered stepper root.\n *\n * @example\n * Uncontrolled stepper with default step:\n * ```tsx\n * <Stepper defaultStep=\"step-1\" orientation=\"horizontal\">\n *   <StepperList>\n *     <StepperStep id=\"step-1\">Personal Info</StepperStep>\n *     <StepperStep id=\"step-2\">Payment</StepperStep>\n *     <StepperStep id=\"step-3\">Confirmation</StepperStep>\n *   </StepperList>\n *   <StepperPanel id=\"step-1\">\n *     <h2>Personal Information</h2>\n *     <StepperNext>Next</StepperNext>\n *   </StepperPanel>\n *   <StepperPanel id=\"step-2\">\n *     <h2>Payment Details</h2>\n *     <StepperBack>Back</StepperBack>\n *     <StepperNext>Next</StepperNext>\n *   </StepperPanel>\n *   <StepperPanel id=\"step-3\">\n *     <h2>Confirmation</h2>\n *     <StepperBack>Back</StepperBack>\n *   </StepperPanel>\n * </Stepper>\n * ```\n *\n * @example\n * Controlled stepper with validation:\n * ```tsx\n * const [currentStep, setCurrentStep] = useState<Key>('step-1');\n * const [formData, setFormData] = useState({});\n *\n * const handleBeforeStepChange = (fromKey: Key, toKey: Key) => {\n *   // Validate form data before allowing navigation\n *   if (fromKey === 'step-1' && !formData.name) {\n *     alert('Please enter your name');\n *     return false;\n *   }\n *   return true;\n * };\n *\n * <Stepper\n *   currentStep={currentStep}\n *   onStepChange={setCurrentStep}\n *   onBeforeStepChange={handleBeforeStepChange}\n * >\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\">\n *     <input onChange={(e) => setFormData({ name: e.target.value })} />\n *     <StepperNext>Next</StepperNext>\n *   </StepperPanel>\n *   <StepperPanel id=\"step-2\">\n *     <StepperBack>Back</StepperBack>\n *   </StepperPanel>\n * </Stepper>\n * ```\n *\n * @example\n * Stepper with disabled steps:\n * ```tsx\n * const [completedSteps, setCompletedSteps] = useState(new Set<Key>());\n * const disabledKeys = useMemo(() => {\n *   const disabled = new Set<Key>();\n *   if (!completedSteps.has('step-1')) {\n *     disabled.add('step-2');\n *     disabled.add('step-3');\n *   }\n *   if (!completedSteps.has('step-2')) {\n *     disabled.add('step-3');\n *   }\n *   return disabled;\n * }, [completedSteps]);\n *\n * <Stepper\n *   defaultStep=\"step-1\"\n *   completedSteps={completedSteps}\n *   disabledKeys={disabledKeys}\n * >\n *   <StepperList>\n *     <StepperStep id=\"step-1\">Step 1</StepperStep>\n *     <StepperStep id=\"step-2\">Step 2</StepperStep>\n *     <StepperStep id=\"step-3\">Step 3</StepperStep>\n *   </StepperList>\n * </Stepper>\n * ```\n */\nexport function Stepper(props: StepperProps) {\n  const {\n    children,\n    className,\n    currentStep,\n    defaultStep,\n    onStepChange,\n    onBeforeStepChange,\n    orientation = 'horizontal',\n    completedSteps,\n    defaultCompletedSteps,\n    disabledKeys,\n    ...restProps\n  } = props;\n\n  const state = useStepperState({\n    currentStep,\n    defaultStep,\n    onStepChange,\n    onBeforeStepChange,\n    completedSteps,\n    defaultCompletedSteps,\n    disabledKeys,\n    orientation,\n  });\n\n  return (\n    <StepperContext.Provider value={state}>\n      <div {...restProps} className={className}>\n        {children}\n      </div>\n    </StepperContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+HA,SAAgB,QAAQ,OAAqB;CAC3C,MAAM,EACJ,UACA,WACA,aACA,aACA,cACA,oBACA,cAAc,cACd,gBACA,uBACA,cACA,GAAG,cACD;CAEJ,MAAM,QAAQ,gBAAgB;EAC5B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,eAAe;EAAS,OAAO;YAC9B,oBAAC;GAAI,GAAI;GAAsB;GAC5B;IACG;GACkB"}

package/dist/components/stepper/styles.module.css

@@ -0,0 +1,126 @@
+/*
+ * 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.
+ */
+
+@reference '@accelint/design-foundation/styles';
+
+@layer components.l1 {
+  .stepper {
+    @apply flex;
+
+    @variant orientation-horizontal {
+      @apply flex-col;
+    }
+
+    @variant orientation-vertical {
+      @apply h-full flex-row;
+    }
+  }
+
+  .list {
+    @apply gap-xs flex;
+
+    @variant orientation-horizontal {
+      @apply relative w-full flex-row;
+    }
+
+    @variant orientation-vertical {
+      @apply h-full flex-col;
+    }
+  }
+
+  .step {
+    @apply gap-xs fg-primary-muted rounded-small relative flex cursor-pointer items-center;
+    min-width: 100px;
+
+    @variant hover {
+      @apply fg-primary-bold;
+    }
+
+    @variant focus-visible {
+      @apply fg-primary-bold outline outline-2 outline-offset-2 outline-(--outline-accent-primary-bold);
+    }
+
+    @variant pressed {
+      @apply fg-pressed;
+    }
+
+    @variant current {
+      @apply fg-accent-primary-bold bg-accent-primary-muted;
+
+      @variant hover {
+        @apply fg-accent-primary-hover bg-accent-primary-hover;
+      }
+
+      @variant focus-visible {
+        @apply fg-accent-primary-hover bg-accent-primary-hover;
+      }
+
+      @variant pressed {
+        @apply fg-accent-primary-pressed bg-interactive-muted-pressed;
+      }
+    }
+
+    @variant visited {
+      @apply fg-normal-bold bg-normal-muted;
+
+      @variant hover {
+        @apply fg-normal-hover bg-normal-hover;
+      }
+
+      @variant focus-visible {
+        @apply fg-normal-hover bg-normal-hover;
+      }
+    }
+
+    @variant disabled {
+      @apply fg-disabled bg-interactive-disabled cursor-not-allowed;
+    }
+
+    /* Connectors for horizontal orientation */
+    @variant group-orientation-horizontal/stepper {
+      &:not(:last-child)::after {
+        @apply absolute top-1/2 left-full block h-px bg-(--outline-static);
+        content: '';
+        width: var(--connector-width, 1rem);
+        transform: translateY(-50%);
+      }
+
+      @variant visited {
+        &:not(:last-child)::after {
+          @apply bg-(--outline-normal-bold);
+        }
+      }
+    }
+
+    /* Connectors for vertical orientation */
+    @variant group-orientation-vertical/stepper {
+      @apply w-full;
+
+      &:not(:last-child)::after {
+        @apply absolute top-full left-1/2 block w-px bg-(--outline-static);
+        content: '';
+        height: var(--connector-height, 1rem);
+        transform: translateX(-50%);
+      }
+
+      @variant visited {
+        &:not(:last-child)::after {
+          @apply bg-(--outline-normal-bold);
+        }
+      }
+    }
+  }
+
+  .panel {
+    @apply fg-primary-bold p-m;
+  }
+}