@servicetitan/anvil2 1.44.1 → 1.45.0

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

@@ -1,2 +1,16 @@
-export * from './Skeleton';
-export { Skeleton as default } from './Skeleton';
+export * from './SkeletonCircle';
+export * from './SkeletonPill';
+export * from './SkeletonRectangle';
+export * from './SkeletonText';
+export declare const Skeleton: {
+    Circle: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & Omit<import('..').LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
+        diameter?: string;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Pill: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & Omit<import('..').LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
+        width?: string;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Rectangle: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & Omit<import('..').LayoutUtilProps, "flex" | "flexGrow" | "flexShrink" | "flexBasis"> & {
+        height?: string;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Text: import('react').ForwardRefExoticComponent<import('./SkeletonText').SkeletonTextProps & import('react').RefAttributes<HTMLDivElement>>;
+};

package/dist/components/Spinner/Spinner.d.ts

@@ -1,15 +1,19 @@
-import { SpinnerProps as CoreSpinnerProps } from '@servicetitan/hammer-react';
+import { ComponentPropsWithoutRef } from 'react';
 /**
  * Props for the Spinner component
- * @property {boolean} [inherit] - When true, the spinner inherits the current text color instead of using the default primary background color
+ * @extends ComponentPropsWithoutRef<"span">
  */
-export type SpinnerProps = CoreSpinnerProps;
+export type SpinnerProps = ComponentPropsWithoutRef<"span"> & {
+    /**
+     * When true, the spinner inherits the current text color instead of using the default primary background color
+     */
+    inherit?: boolean;
+};
 /**
  * A loading spinner component that displays an animated circular indicator.
  *
  * The Spinner component provides a visual indication that content is loading or processing.
  * It renders as a circular animation that continuously rotates to show activity.
- * This is an anvil2 wrapper around the hammer-react Spinner component with additional tracking capabilities.
  *
  * Features:
  * - Animated circular loading indicator
@@ -17,8 +21,6 @@ export type SpinnerProps = CoreSpinnerProps;
  * - Accessible with proper ARIA attributes
  * - Customizable styling through className and style props
  * - Forwarded ref support
- * - Anvil2 tracking integration
- * - Automatic data-anv attribute for analytics
  *
  * @example
  * <Spinner />
@@ -26,5 +28,8 @@ export type SpinnerProps = CoreSpinnerProps;
  * <Spinner inherit />
  */
 export declare const Spinner: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    /**
+     * When true, the spinner inherits the current text color instead of using the default primary background color
+     */
     inherit?: boolean;
 } & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/SrOnly/SrOnly.d.ts

@@ -1,16 +1,12 @@
-import { SrOnly as CoreSrOnly } from '@servicetitan/hammer-react';
+import { ComponentPropsWithoutRef } from 'react';
 /**
  * Screen reader only component for providing accessible content that is visually hidden.
  *
  * Features:
  * - Visually hidden content that remains accessible to screen readers
- * - Preserves all standard span element functionality
- * - Supports custom styling and className overrides
+ * - Preserves all standard span element functionality and attributes
  * - Maintains proper semantic structure
  * - Essential for accessibility compliance
- * - Works with all screen reader technologies
- * - Supports all standard HTML span attributes
- * - Automatic tracking ID generation for analytics
  *
  * @example
  * <div>
@@ -18,4 +14,4 @@ import { SrOnly as CoreSrOnly } from '@servicetitan/hammer-react';
  *   <SrOnly>One hundred dollars</SrOnly>
  * </div>
  */
-export declare function SrOnly(props: Parameters<typeof CoreSrOnly>[0]): import("react/jsx-runtime").JSX.Element;
+export declare const SrOnly: (props: ComponentPropsWithoutRef<"span">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Stepper/Stepper.d.ts

@@ -1,195 +1,36 @@
-import { StepperProps as CoreStepperProps, StepperListProps as CoreStepperListProps, StepperStepProps as CoreStepperStepProps, StepperPanelProps as CoreStepperPanelProps, StepperNextButtonProps as CoreStepperNextButtonProps, StepperPrevButtonProps as CoreStepperPrevButtonProps, StepperFinalPanelProps as CoreStepperFinalPanelProps } from '@servicetitan/hammer-react';
-import { DataTrackingId } from '../../types/DataTrackingId';
+import { ComponentPropsWithoutRef } from 'react';
+import { LayoutUtilProps } from '../../types';
 /**
  * Props for the Stepper component
- * @property {number} [defaultIndex] - Default step to start on
- * @property {boolean} [allowNavigateToPrevStep] - Allows users to navigate to previous steps
- * @property {function} [onChange] - Returns current step data when step changes
- * @property {function} [onComplete] - Called when all steps are completed
  * @extends ComponentPropsWithoutRef<"div">
  * @extends LayoutUtilProps
  */
-export type StepperProps = CoreStepperProps;
-/**
- * Props for the StepperList component
- * @extends ComponentPropsWithoutRef<"div">
- */
-export type StepperListProps = CoreStepperListProps;
-/**
- * Props for the StepperStep component
- * @property {string} controls - ID of the panel that this step is controlling
- * @property {function} [onClick] - Called when the step is clicked
- * @extends ComponentPropsWithoutRef<"button">
- */
-export type StepperStepProps = CoreStepperStepProps;
-/**
- * Props for the StepperPanel component
- * @property {string} id - Unique identifier for the panel
- * @extends ComponentPropsWithoutRef<"div">
- * @extends LayoutUtilProps
- */
-export type StepperPanelProps = CoreStepperPanelProps;
-/**
- * Props for the StepperNextButton component
- * @property {string} [nextLabel] - Label for the next button
- * @property {string} [completeLabel] - Label for the complete button
- * @property {function} [onClick] - Called when the "Next" button is clicked
- * @extends ButtonProps
- * @extends DataTrackingId
- */
-export type StepperNextButtonProps = CoreStepperNextButtonProps & DataTrackingId;
-/**
- * Props for the StepperPrevButton component
- * @property {string} [label] - Label for the previous button
- * @extends ButtonProps
- * @extends DataTrackingId
- */
-export type StepperPrevButtonProps = CoreStepperPrevButtonProps & DataTrackingId;
-/**
- * Props for the StepperFinalPanel component
- * @extends ComponentPropsWithoutRef<"div">
- * @extends LayoutUtilProps
- */
-export type StepperFinalPanelProps = CoreStepperFinalPanelProps;
-/**
- * Container component for organizing and displaying stepper steps.
- *
- * Features:
- * - Groups multiple stepper steps together
- * - Displays current step label
- * - Responsive design with mobile-friendly layout
- * - Accessible with proper ARIA roles
- * - Automatic step organization
- * - Visual step indicators
- * - Context-based current step display
- * - Flexible layout with CSS Grid/Flexbox
- * - Container queries for responsive behavior
- *
- * @example
- * <Stepper.List>
- *   <Stepper.Step controls="step1">Step 1</Stepper.Step>
- *   <Stepper.Step controls="step2">Step 2</Stepper.Step>
- *   <Stepper.Step controls="step3">Step 3</Stepper.Step>
- * </Stepper.List>
- */
-export declare const StepperList: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-/**
- * Individual step component for the Stepper.
- *
- * Features:
- * - Visual progress indicator with animated bar
- * - Check icon for completed steps
- * - Keyboard navigation support
- * - Accessible with proper ARIA attributes
- * - Click handling for step navigation
- * - Visual states for current, completed, and future steps
- * - Responsive design with mobile-friendly layout
- * - Focus management for keyboard users
- * - Custom styling support
- *
- * @example
- * <Stepper.Step controls="step1">
- *   Personal Information
- * </Stepper.Step>
- */
-export declare const StepperStep: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onClick" | "disabled"> & {
-    controls: string;
-    onClick?: (e: import('react').MouseEvent<HTMLButtonElement>, index?: number) => void;
-} & import('react').RefAttributes<HTMLButtonElement>>;
-/**
- * Content panel component for displaying step content in the Stepper.
- *
- * Features:
- * - Displays content for the current step only
- * - Smooth fade-in/fade-out animations
- * - Automatic overflow handling with scroll support
- * - Accessible with proper ARIA roles
- * - Layout utilities for positioning and spacing
- * - Motion animations for smooth transitions
- * - Focus management for keyboard navigation
- * - Responsive design with flexible layout
- * - Context-based visibility control
- *
- * @example
- * <Stepper.Panel id="step1">
- *   <h2>Personal Information</h2>
- *   <form>
- *     <label htmlFor="name">Name:</label>
- *     <input id="name" type="text" />
- *   </form>
- * </Stepper.Panel>
- */
-export declare const StepperPanel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & import('@servicetitan/hammer-react').LayoutUtilProps & {
-    id: string;
-} & import('react').RefAttributes<HTMLDivElement>>;
-/**
- * Final panel component displayed when all stepper steps are completed.
- *
- * Features:
- * - Displays only when all steps are completed
- * - Smooth fade-in animation on completion
- * - Automatic overflow handling with scroll support
- * - Accessible with proper ARIA roles
- * - Layout utilities for positioning and spacing
- * - Motion animations for smooth transitions
- * - Focus management for keyboard navigation
- * - Responsive design with flexible layout
- * - Context-based visibility control
- *
- * @example
- * <Stepper.FinalPanel>
- *   <h2>Congratulations!</h2>
- *   <p>You have successfully completed all steps.</p>
- *   <Button onClick={handleSubmit}>Submit</Button>
- * </Stepper.FinalPanel>
- */
-export declare const StepperFinalPanel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & import('@servicetitan/hammer-react').LayoutUtilProps & import('react').RefAttributes<HTMLDivElement>>;
-/**
- * Next button component for navigating to the next step in the Stepper.
- *
- * Features:
- * - Automatically advances to the next step
- * - Changes label to "Complete" on the final step
- * - Supports async validation with Promise return
- * - Prevents navigation when validation fails
- * - Hides when all steps are completed
- * - Accessible with proper button semantics
- * - Customizable appearance and styling
- * - Integration with stepper context
- * - Automatic completion handling
- * - Automatic tracking ID generation for analytics
- *
- * @example
- * <Stepper.NextButton
- *   nextLabel="Continue"
- *   completeLabel="Finish"
- * />
- */
-export declare const StepperNextButton: import('react').ForwardRefExoticComponent<Omit<import('@servicetitan/hammer-react').ButtonProps, "children"> & {
-    nextLabel?: string;
-    completeLabel?: string;
-    onClick?: (e: import('react').MouseEvent<HTMLButtonElement>) => void | boolean | Promise<boolean>;
-} & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
-/**
- * Previous button component for navigating to the previous step in the Stepper.
- *
- * Features:
- * - Navigates to the previous step when available
- * - Hides when on the first step
- * - Restores navigation when returning from completion
- * - Accessible with proper button semantics
- * - Customizable label and styling
- * - Integration with stepper context
- * - Automatic focus management
- * - Support for completion state handling
- * - Automatic tracking ID generation for analytics
- *
- * @example
- * <Stepper.PrevButton label="Go Back" />
- */
-export declare const StepperPrevButton: import('react').ForwardRefExoticComponent<Omit<import('@servicetitan/hammer-react').ButtonProps, "children"> & {
-    label?: string;
-} & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
+export type StepperProps = Omit<ComponentPropsWithoutRef<"div">, "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "onChange"> & LayoutUtilProps & {
+    /**
+     * Default step to start on.
+     * @default undefined
+     */
+    defaultIndex?: number;
+    /**
+     * Allows users to navigate to previous steps.
+     * @default undefined
+     */
+    allowNavigateToPrevStep?: boolean;
+    /**
+     * Returns current step data when step changes.
+     * @param data Object containing currentStepId and currentStepIndex
+     * @param data.currentStepId ID given to Stepper.Panel, or "final-panel"
+     * @param data.currentStepIndex Index of current step, or undefined on final panel
+     */
+    onChange?: (data: {
+        currentStepId: string | "final-panel";
+        currentStepIndex?: number;
+    }) => void;
+    /**
+     * Called when all steps are completed.
+     */
+    onComplete?: () => void;
+};
 /**
  * Stepper component for creating multi-step workflows and forms.
  *
@@ -237,37 +78,32 @@ export declare const StepperPrevButton: import('react').ForwardRefExoticComponen
  *   <Stepper.NextButton />
  * </Stepper>
  */
-export declare const Stepper: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & import('@servicetitan/hammer-react').LayoutUtilProps & {
+export declare const Stepper: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & LayoutUtilProps & {
+    /**
+     * Default step to start on.
+     * @default undefined
+     */
     defaultIndex?: number;
+    /**
+     * Allows users to navigate to previous steps.
+     * @default undefined
+     */
     allowNavigateToPrevStep?: boolean;
+    /**
+     * Returns current step data when step changes.
+     * @param data Object containing currentStepId and currentStepIndex
+     * @param data.currentStepId ID given to Stepper.Panel, or "final-panel"
+     * @param data.currentStepIndex Index of current step, or undefined on final panel
+     */
     onChange?: (data: {
         currentStepId: string | "final-panel";
         currentStepIndex?: number;
     }) => void;
-    onComplete?: () => void;
-} & import('react').RefAttributes<HTMLDivElement>> & {
     /**
-     * Container component for organizing and displaying stepper steps.
-     *
-     * Features:
-     * - Groups multiple stepper steps together
-     * - Displays current step label
-     * - Responsive design with mobile-friendly layout
-     * - Accessible with proper ARIA roles
-     * - Automatic step organization
-     * - Visual step indicators
-     * - Context-based current step display
-     * - Flexible layout with CSS Grid/Flexbox
-     * - Container queries for responsive behavior
-     *
-     * @example
-     * <Stepper.List>
-     *   <Stepper.Step controls="step1">Step 1</Stepper.Step>
-     *   <Stepper.Step controls="step2">Step 2</Stepper.Step>
-     *   <Stepper.Step controls="step3">Step 3</Stepper.Step>
-     * </Stepper.List>
+     * Called when all steps are completed.
      */
-    List: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    onComplete?: () => void;
+} & import('react').RefAttributes<HTMLDivElement>> & {
     /**
      * Individual step component for the Stepper.
      *
@@ -286,11 +122,41 @@ export declare const Stepper: import('react').ForwardRefExoticComponent<Omit<Omi
      * <Stepper.Step controls="step1">
      *   Personal Information
      * </Stepper.Step>
+     *
+     * @example
+     * <Stepper.Step
+     *   controls="step2"
+     *   onClick={(e, index) => console.log(`Clicked step ${index}`)}
+     * >
+     *   Contact Details
+     * </Stepper.Step>
      */
     Step: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onClick" | "disabled"> & {
         controls: string;
         onClick?: (e: import('react').MouseEvent<HTMLButtonElement>, index?: number) => void;
     } & import('react').RefAttributes<HTMLButtonElement>>;
+    /**
+     * Container component for organizing and displaying stepper steps.
+     *
+     * Features:
+     * - Groups multiple stepper steps together
+     * - Displays current step label
+     * - Responsive design with mobile-friendly layout
+     * - Accessible with proper ARIA roles
+     * - Automatic step organization
+     * - Visual step indicators
+     * - Context-based current step display
+     * - Flexible layout with CSS Grid/Flexbox
+     * - Container queries for responsive behavior
+     *
+     * @example
+     * <Stepper.List>
+     *   <Stepper.Step controls="step1">Step 1</Stepper.Step>
+     *   <Stepper.Step controls="step2">Step 2</Stepper.Step>
+     *   <Stepper.Step controls="step3">Step 3</Stepper.Step>
+     * </Stepper.List>
+     */
+    List: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     /**
      * Content panel component for displaying step content in the Stepper.
      *
@@ -314,31 +180,9 @@ export declare const Stepper: import('react').ForwardRefExoticComponent<Omit<Omi
      *   </form>
      * </Stepper.Panel>
      */
-    Panel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & import('@servicetitan/hammer-react').LayoutUtilProps & {
+    Panel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & LayoutUtilProps & {
         id: string;
     } & import('react').RefAttributes<HTMLDivElement>>;
-    /**
-     * Final panel component displayed when all stepper steps are completed.
-     *
-     * Features:
-     * - Displays only when all steps are completed
-     * - Smooth fade-in animation on completion
-     * - Automatic overflow handling with scroll support
-     * - Accessible with proper ARIA roles
-     * - Layout utilities for positioning and spacing
-     * - Motion animations for smooth transitions
-     * - Focus management for keyboard navigation
-     * - Responsive design with flexible layout
-     * - Context-based visibility control
-     *
-     * @example
-     * <Stepper.FinalPanel>
-     *   <h2>Congratulations!</h2>
-     *   <p>You have successfully completed all steps.</p>
-     *   <Button onClick={handleSubmit}>Submit</Button>
-     * </Stepper.FinalPanel>
-     */
-    FinalPanel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & import('@servicetitan/hammer-react').LayoutUtilProps & import('react').RefAttributes<HTMLDivElement>>;
     /**
      * Next button component for navigating to the next step in the Stepper.
      *
@@ -352,19 +196,27 @@ export declare const Stepper: import('react').ForwardRefExoticComponent<Omit<Omi
      * - Customizable appearance and styling
      * - Integration with stepper context
      * - Automatic completion handling
-     * - Automatic tracking ID generation for analytics
      *
      * @example
      * <Stepper.NextButton
      *   nextLabel="Continue"
      *   completeLabel="Finish"
      * />
+     *
+     * @example
+     * <Stepper.NextButton
+     *   onClick={async (e) => {
+     *     const isValid = await validateForm();
+     *     return isValid;
+     *   }}
+     *   appearance="primary"
+     * />
      */
-    NextButton: import('react').ForwardRefExoticComponent<Omit<import('@servicetitan/hammer-react').ButtonProps, "children"> & {
+    NextButton: import('react').ForwardRefExoticComponent<Omit<import('..').ButtonProps, "children"> & {
         nextLabel?: string;
         completeLabel?: string;
         onClick?: (e: import('react').MouseEvent<HTMLButtonElement>) => void | boolean | Promise<boolean>;
-    } & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
+    } & import('../..').DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
     /**
      * Previous button component for navigating to the previous step in the Stepper.
      *
@@ -377,12 +229,40 @@ export declare const Stepper: import('react').ForwardRefExoticComponent<Omit<Omi
      * - Integration with stepper context
      * - Automatic focus management
      * - Support for completion state handling
-     * - Automatic tracking ID generation for analytics
      *
      * @example
      * <Stepper.PrevButton label="Go Back" />
+     *
+     * @example
+     * <Stepper.PrevButton
+     *   label="Previous Step"
+     *   appearance="secondary"
+     *   onClick={(e) => console.log('Going back')}
+     * />
      */
-    PrevButton: import('react').ForwardRefExoticComponent<Omit<import('@servicetitan/hammer-react').ButtonProps, "children"> & {
+    PrevButton: import('react').ForwardRefExoticComponent<Omit<import('..').ButtonProps, "children"> & {
         label?: string;
-    } & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
+    } & import('../..').DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
+    /**
+     * Final panel component displayed when all stepper steps are completed.
+     *
+     * Features:
+     * - Displays only when all steps are completed
+     * - Smooth fade-in animation on completion
+     * - Automatic overflow handling with scroll support
+     * - Accessible with proper ARIA roles
+     * - Layout utilities for positioning and spacing
+     * - Motion animations for smooth transitions
+     * - Focus management for keyboard navigation
+     * - Responsive design with flexible layout
+     * - Context-based visibility control
+     *
+     * @example
+     * <Stepper.FinalPanel>
+     *   <h2>Congratulations!</h2>
+     *   <p>You have successfully completed all steps.</p>
+     *   <Button onClick={handleSubmit}>Submit</Button>
+     * </Stepper.FinalPanel>
+     */
+    FinalPanel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & LayoutUtilProps & import('react').RefAttributes<HTMLDivElement>>;
 };

package/dist/components/Stepper/StepperFinalPanel.d.ts

@@ -0,0 +1,30 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { LayoutUtilProps } from '../../types';
+/**
+ * Props for the StepperFinalPanel component
+ * @extends ComponentPropsWithoutRef<"div">
+ * @extends LayoutUtilProps
+ */
+export type StepperFinalPanelProps = Omit<ComponentPropsWithoutRef<"div">, "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag"> & LayoutUtilProps;
+/**
+ * Final panel component displayed when all stepper steps are completed.
+ *
+ * Features:
+ * - Displays only when all steps are completed
+ * - Smooth fade-in animation on completion
+ * - Automatic overflow handling with scroll support
+ * - Accessible with proper ARIA roles
+ * - Layout utilities for positioning and spacing
+ * - Motion animations for smooth transitions
+ * - Focus management for keyboard navigation
+ * - Responsive design with flexible layout
+ * - Context-based visibility control
+ *
+ * @example
+ * <Stepper.FinalPanel>
+ *   <h2>Congratulations!</h2>
+ *   <p>You have successfully completed all steps.</p>
+ *   <Button onClick={handleSubmit}>Submit</Button>
+ * </Stepper.FinalPanel>
+ */
+export declare const StepperFinalPanel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & LayoutUtilProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Stepper/StepperList.d.ts

@@ -0,0 +1,28 @@
+import { ComponentPropsWithoutRef } from 'react';
+/**
+ * Props for the StepperList component
+ * @extends ComponentPropsWithoutRef<"div">
+ */
+export type StepperListProps = ComponentPropsWithoutRef<"div">;
+/**
+ * Container component for organizing and displaying stepper steps.
+ *
+ * Features:
+ * - Groups multiple stepper steps together
+ * - Displays current step label
+ * - Responsive design with mobile-friendly layout
+ * - Accessible with proper ARIA roles
+ * - Automatic step organization
+ * - Visual step indicators
+ * - Context-based current step display
+ * - Flexible layout with CSS Grid/Flexbox
+ * - Container queries for responsive behavior
+ *
+ * @example
+ * <Stepper.List>
+ *   <Stepper.Step controls="step1">Step 1</Stepper.Step>
+ *   <Stepper.Step controls="step2">Step 2</Stepper.Step>
+ *   <Stepper.Step controls="step3">Step 3</Stepper.Step>
+ * </Stepper.List>
+ */
+export declare const StepperList: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Stepper/StepperNextButton.d.ts

@@ -0,0 +1,73 @@
+import { MouseEvent } from 'react';
+import { ButtonProps } from '../Button';
+import { DataTrackingId } from '../../types';
+/**
+ * Props for the StepperNextButton component
+ * @extends ButtonProps
+ */
+export type StepperNextButtonProps = Omit<ButtonProps, "children"> & {
+    /**
+     * Label for the next button.
+     * @default "Next"
+     */
+    nextLabel?: string;
+    /**
+     * Label for the complete button (shown on the last step).
+     * @default "Complete"
+     */
+    completeLabel?: string;
+    /**
+     * Called when the "Next" button is clicked.
+     * @param e MouseEvent<HTMLButtonElement>
+     * @returns If the function returns `false`, or a Promise that resolves to `false`, the next step will not be executed.
+     */
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void | boolean | Promise<boolean>;
+} & DataTrackingId;
+/**
+ * Next button component for navigating to the next step in the Stepper.
+ *
+ * Features:
+ * - Automatically advances to the next step
+ * - Changes label to "Complete" on the final step
+ * - Supports async validation with Promise return
+ * - Prevents navigation when validation fails
+ * - Hides when all steps are completed
+ * - Accessible with proper button semantics
+ * - Customizable appearance and styling
+ * - Integration with stepper context
+ * - Automatic completion handling
+ * - Automatic tracking ID generation for analytics
+ *
+ * @example
+ * <Stepper.NextButton
+ *   nextLabel="Continue"
+ *   completeLabel="Finish"
+ * />
+ *
+ * @example
+ * <Stepper.NextButton
+ *   onClick={async (e) => {
+ *     const isValid = await validateForm();
+ *     return isValid;
+ *   }}
+ *   appearance="primary"
+ * />
+ */
+export declare const StepperNextButton: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "children"> & {
+    /**
+     * Label for the next button.
+     * @default "Next"
+     */
+    nextLabel?: string;
+    /**
+     * Label for the complete button (shown on the last step).
+     * @default "Complete"
+     */
+    completeLabel?: string;
+    /**
+     * Called when the "Next" button is clicked.
+     * @param e MouseEvent<HTMLButtonElement>
+     * @returns If the function returns `false`, or a Promise that resolves to `false`, the next step will not be executed.
+     */
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void | boolean | Promise<boolean>;
+} & DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;