@szum-tech/design-system/dist/components/stepper/index.d.ts

Szum-Tech design system with tailwindcss support

import * as react_jsx_runtime from 'react/jsx-runtime';
import * as React from 'react';
import React__default from 'react';
import { Direction } from '../../contexts/index.js';

type StepperProps = React.ComponentProps<"div"> & {
    asChild?: boolean;
    value?: string;
    defaultValue?: string;
    onValueChange?: (value: string) => void;
    onValueComplete?: (value: string, completed: boolean) => void;
    onValueAdd?: (value: string) => void;
    onValueRemove?: (value: string) => void;
    onValidate?: (value: string, direction: StepperNavigationDirection) => boolean | Promise<boolean>;
    activationMode?: StepperActivationMode;
    dir?: Direction;
    orientation?: StepperOrientation;
    disabled?: boolean;
    loop?: boolean;
    nonInteractive?: boolean;
    indicators?: StepIndicators;
};
declare function Stepper({ value, defaultValue, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate, id: idProp, dir: dirProp, orientation, activationMode, asChild, disabled, nonInteractive, loop, className, indicators, ...rootProps }: StepperProps): react_jsx_runtime.JSX.Element;

declare const StepperFocusIntent: {
    readonly FIRST: "first";
    readonly LAST: "last";
    readonly PREV: "prev";
    readonly NEXT: "next";
};
type StepperFocusIntent = (typeof StepperFocusIntent)[keyof typeof StepperFocusIntent];
declare const StepperOrientation: {
    readonly HORIZONTAL: "horizontal";
    readonly VERTICAL: "vertical";
};
type StepperOrientation = (typeof StepperOrientation)[keyof typeof StepperOrientation];
declare const StepperNavigationDirection: {
    readonly NEXT: "next";
    readonly PREV: "prev";
};
type StepperNavigationDirection = (typeof StepperNavigationDirection)[keyof typeof StepperNavigationDirection];
declare const StepperActivationMode: {
    readonly AUTOMATIC: "automatic";
    readonly MANUAL: "manual";
};
type StepperActivationMode = (typeof StepperActivationMode)[keyof typeof StepperActivationMode];
declare const StepperDataState: {
    readonly INACTIVE: "inactive";
    readonly ACTIVE: "active";
    readonly COMPLETED: "completed";
};
type StepperDataState = (typeof StepperDataState)[keyof typeof StepperDataState];
type StepIndicators = {
    active?: React.ReactNode;
    completed?: React.ReactNode;
    inactive?: React.ReactNode;
    loading?: React.ReactNode;
};

interface StepperContextValue {
    id: string;
    dir: Direction;
    orientation: StepperOrientation;
    activationMode: StepperActivationMode;
    disabled: boolean;
    nonInteractive: boolean;
    loop: boolean;
    indicators: StepIndicators;
}
declare function useStepperContext(consumerName: string): StepperContextValue;

type StepperTriggerElement = React.ComponentRef<typeof StepperTrigger>;
type StepperTriggerProps = React.ComponentProps<"button"> & {
    asChild?: boolean;
};
declare function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps }: StepperTriggerProps): react_jsx_runtime.JSX.Element;

type StepperItemData = {
    id: string;
    ref: React.RefObject<StepperTriggerElement | null>;
    value: string;
    active: boolean;
    disabled: boolean;
};
type StepperFocusContextValue = {
    tabStopId: string | null;
    onItemFocus: (tabStopId: string) => void;
    onItemShiftTab: () => void;
    onFocusableItemAdd: () => void;
    onFocusableItemRemove: () => void;
    onItemRegister: (item: StepperItemData) => void;
    onItemUnregister: (id: string) => void;
    getItems: () => StepperItemData[];
};
declare function useStepperFocusContext(consumerName: string): StepperFocusContextValue;

type StepperNavProps = React.ComponentProps<"nav"> & {
    asChild?: boolean;
};
declare function StepperNav({ className, children, asChild, ref, ...listProps }: StepperNavProps): react_jsx_runtime.JSX.Element;

type StepperItemProps = React.ComponentProps<"div"> & {
    asChild?: boolean;
    value: string;
    completed?: boolean;
    disabled?: boolean;
    loading?: boolean;
};
declare function StepperItem({ value: itemValue, completed, disabled, loading, asChild, className, children, ...props }: StepperItemProps): react_jsx_runtime.JSX.Element;

type StepperStepState = {
    value: string;
    completed: boolean;
    disabled: boolean;
    loading: boolean;
};

type StepperItemContextValue = {
    value: string;
    stepState: StepperStepState | undefined;
};
declare function useStepperItemContext(consumerName: string): StepperItemContextValue;

type StepperIndicatorProps = Omit<React.ComponentProps<"div">, "children"> & {
    asChild?: boolean;
    children?: React.ReactNode | ((dataState: StepperDataState) => React.ReactNode);
};
declare function StepperIndicator({ className, children, asChild, ref, ...props }: StepperIndicatorProps): react_jsx_runtime.JSX.Element;

type StepperTitleProps = React.ComponentProps<"h3"> & {
    asChild?: boolean;
};
declare function StepperTitle({ className, asChild, ...props }: StepperTitleProps): react_jsx_runtime.JSX.Element;

type StepperDescriptionProps = React.ComponentProps<"span"> & {
    asChild?: boolean;
};
declare function StepperDescription({ className, asChild, ...props }: StepperDescriptionProps): react_jsx_runtime.JSX.Element;

type StepperPanelProps = React__default.ComponentProps<"div"> & {
    asChild?: boolean;
};
declare function StepperPanel({ children, asChild, className, ...props }: StepperPanelProps): react_jsx_runtime.JSX.Element;

type StepperContentProps = React.ComponentProps<"div"> & {
    asChild?: boolean;
    value: string;
    forceMount?: boolean;
};
declare function StepperContent({ value: valueProp, asChild, forceMount, className, ...props }: StepperContentProps): react_jsx_runtime.JSX.Element | null;

type StepperNextTriggerProps = React.ComponentProps<"button"> & {
    asChild?: boolean;
};
declare function StepperNextTrigger({ asChild, onClick, disabled, ...props }: StepperNextTriggerProps): react_jsx_runtime.JSX.Element;

type StepperPrevTriggerProps = React.ComponentProps<"button"> & {
    asChild?: boolean;
};
declare function StepperPrevTrigger({ asChild, disabled, onClick, ...props }: StepperPrevTriggerProps): react_jsx_runtime.JSX.Element;

export { type StepIndicators, Stepper, StepperActivationMode, StepperContent, type StepperContentProps, StepperDataState, StepperDescription, type StepperDescriptionProps, StepperFocusIntent, StepperIndicator, type StepperIndicatorProps, StepperItem, type StepperItemProps, StepperNav, type StepperNavProps, StepperNavigationDirection, StepperNextTrigger, type StepperNextTriggerProps, StepperOrientation, StepperPanel, type StepperPanelProps, StepperPrevTrigger, type StepperPrevTriggerProps, type StepperProps, StepperTitle, type StepperTitleProps, StepperTrigger, type StepperTriggerElement, type StepperTriggerProps, useStepperContext, useStepperFocusContext, useStepperItemContext };