ds-smart-ui
Version:
Smart UI v1.0.5 — A production-ready React component library by PT Praisindo Teknologi. Covers inputs, navigation, data display, feedback, and layout with a unified design system, semantic Typography tokens, and full Storybook documentation.
50 lines (49 loc) • 2.06 kB
TypeScript
export type WizardStepStatus = "completed" | "current" | "upcoming" | "disabled";
export interface WizardStep {
/** Unique identifier for the step */
id: string;
/** Label shown on the step pill */
label: string;
/** Optional helper text displayed below the label */
description?: string;
/** Optional override for the visual status of the step */
status?: WizardStepStatus;
/** Disable the step interaction */
disabled?: boolean;
/**
* Scroll target for the step. Defaults to the step `id`.
* When provided it will scroll into view on click.
*/
scrollToId?: string;
/** External link for the step (renders an anchor when provided) */
href?: string;
/** If the step should open the `href` in a new tab */
openInNewTab?: boolean;
/** Custom side effects that should run when the step is clicked */
onClick?: () => void;
}
export interface WizardProps {
/** Ordered configuration of wizard steps */
steps: WizardStep[];
/** Optional class name for the root container */
className?: string;
/** Optional id for the root container */
id?: string;
/**
* Called after a non-disabled step is clicked.
* Useful for syncing state or updating the active tab elsewhere.
*/
onStepChange?: (stepId: string) => void;
/** Keep the wizard fixed at the top of the viewport (sticky layout). */
sticky?: boolean;
/** Enable scroll-spy so visible sections update the active step automatically. */
scrollSpy?: boolean;
/** Customize the IntersectionObserver root margin used by the scroll spy. */
scrollSpyRootMargin?: string;
/** Customize the IntersectionObserver threshold used by the scroll spy. */
scrollSpyThreshold?: number | number[];
/** Custom top offset for sticky wizard (default: 1rem/16px) */
stickyTop?: number | string;
}
declare const Wizard: ({ steps, className, onStepChange, sticky, scrollSpy, stickyTop, id, }: WizardProps) => import("react/jsx-runtime").JSX.Element;
export default Wizard;