flikkui 0.1.0-beta.9 → 0.2.0-beta.2

package/dist/components/core/Sortable/Sortable.js

@@ -0,0 +1,210 @@
+import React__default, { createContext, useState, useRef, useEffect, useCallback, useContext } from 'react';
+import { Reorder, useDragControls, motion } from 'motion/react';
+import { LockClosedIcon, Bars3Icon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { sortableTheme } from './Sortable.theme.js';
+import { sortableAnimations } from './Sortable.animations.js';
+
+const SortableContext = createContext(null);
+const useSortableContext = () => {
+    const context = useContext(SortableContext);
+    if (!context) {
+        throw new Error('SortableItem must be used within a Sortable component');
+    }
+    return context;
+};
+const Sortable = React__default.forwardRef(({ children, onReorder, className, theme: customTheme = {}, direction = 'vertical', showDragHandle = false, onSortDragStart, onSortDragEnd, values, }, ref) => {
+    const [draggedItem, setDraggedItem] = useState(null);
+    const [dropPosition, setDropPosition] = useState(null);
+    const itemRefs = useRef(new Map());
+    const [draggedItemContent, setDraggedItemContent] = useState(null);
+    const [internalValues, setInternalValues] = useState([]);
+    const theme = {
+        ...sortableTheme,
+        ...customTheme,
+    };
+    // Extract values from children if not provided
+    useEffect(() => {
+        if (!values) {
+            const childArray = React__default.Children.toArray(children);
+            const extractedValues = childArray.map((child) => {
+                if (React__default.isValidElement(child)) {
+                    return child.props.value !== undefined ? child.props.value : child.props.id;
+                }
+                return null;
+            }).filter(Boolean);
+            setInternalValues(extractedValues);
+        }
+        else {
+            setInternalValues(values);
+        }
+    }, [children, values]);
+    const handleReorder = useCallback((newValues) => {
+        setInternalValues(newValues);
+        // Calculate indices for the callback
+        const oldValues = internalValues;
+        if (oldValues.length === 0)
+            return;
+        // Find what moved
+        for (let i = 0; i < newValues.length; i++) {
+            const oldIndex = oldValues.indexOf(newValues[i]);
+            if (oldIndex !== i) {
+                onReorder(oldIndex, i);
+                break;
+            }
+        }
+    }, [internalValues, onReorder]);
+    const contextValue = {
+        direction,
+        showDragHandle,
+        theme,
+        onReorder,
+        onSortDragStart,
+        onSortDragEnd,
+        draggedItem,
+        setDraggedItem,
+        dropPosition,
+        setDropPosition,
+        itemRefs,
+        draggedItemContent,
+        setDraggedItemContent,
+    };
+    return (React__default.createElement(SortableContext.Provider, { value: contextValue },
+        React__default.createElement(Reorder.Group, { ref: ref, axis: direction === 'horizontal' ? 'x' : 'y', values: internalValues, onReorder: handleReorder, className: cn(theme.containerStyle, direction === 'horizontal' ? 'flex flex-row' : 'flex flex-col', className), as: "div" }, children)));
+});
+Sortable.displayName = 'Sortable';
+const SortableItem = React__default.forwardRef(({ id, children, className, theme: customTheme = {}, disabled = false, value, }, forwardedRef) => {
+    const context = useSortableContext();
+    const dragControls = useDragControls();
+    const itemRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const theme = {
+        ...context.theme,
+        ...customTheme,
+    };
+    // Register item ref
+    useEffect(() => {
+        if (itemRef.current) {
+            context.itemRefs.current.set(id, itemRef.current);
+        }
+        return () => {
+            context.itemRefs.current.delete(id);
+        };
+    }, [id, context.itemRefs]);
+    // Keyboard navigation
+    const handleKeyDown = useCallback((event) => {
+        var _a, _b;
+        if (disabled)
+            return;
+        const items = Array.from(context.itemRefs.current.entries());
+        const currentIndex = items.findIndex(([itemId]) => itemId === id);
+        if (currentIndex === -1)
+            return;
+        let targetIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowUp':
+                if (context.direction === 'vertical' && currentIndex > 0) {
+                    event.preventDefault();
+                    targetIndex = currentIndex - 1;
+                }
+                break;
+            case 'ArrowDown':
+                if (context.direction === 'vertical' && currentIndex < items.length - 1) {
+                    event.preventDefault();
+                    targetIndex = currentIndex + 1;
+                }
+                break;
+            case 'ArrowLeft':
+                if (context.direction === 'horizontal' && currentIndex > 0) {
+                    event.preventDefault();
+                    targetIndex = currentIndex - 1;
+                }
+                break;
+            case 'ArrowRight':
+                if (context.direction === 'horizontal' && currentIndex < items.length - 1) {
+                    event.preventDefault();
+                    targetIndex = currentIndex + 1;
+                }
+                break;
+            case ' ':
+            case 'Enter':
+                event.preventDefault();
+                // Trigger drag start
+                (_a = context.onSortDragStart) === null || _a === void 0 ? void 0 : _a.call(context, { id, index: currentIndex, data: value }, event);
+                return;
+            case 'Escape':
+                event.preventDefault();
+                (_b = itemRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+                return;
+            default:
+                return;
+        }
+        if (targetIndex !== currentIndex) {
+            context.onReorder(currentIndex, targetIndex);
+            // Focus the item at new position after reorder
+            setTimeout(() => {
+                const targetItem = items[targetIndex];
+                if (targetItem) {
+                    targetItem[1].focus();
+                }
+            }, 100);
+        }
+    }, [disabled, context, id, value]);
+    const handleDragStart = useCallback(() => {
+        var _a;
+        if (disabled)
+            return;
+        setIsDragging(true);
+        context.setDraggedItem(id);
+        context.setDraggedItemContent(children);
+        const items = Array.from(context.itemRefs.current.entries());
+        const currentIndex = items.findIndex(([itemId]) => itemId === id);
+        (_a = context.onSortDragStart) === null || _a === void 0 ? void 0 : _a.call(context, { id, index: currentIndex, data: value }, {});
+    }, [disabled, id, children, context, value]);
+    const handleDragEnd = useCallback(() => {
+        var _a;
+        setIsDragging(false);
+        context.setDraggedItem(null);
+        context.setDraggedItemContent(null);
+        context.setDropPosition(null);
+        const items = Array.from(context.itemRefs.current.entries());
+        const currentIndex = items.findIndex(([itemId]) => itemId === id);
+        (_a = context.onSortDragEnd) === null || _a === void 0 ? void 0 : _a.call(context, { id, index: currentIndex, data: value }, {});
+    }, [id, context, value]);
+    const handlePointerDown = useCallback((event) => {
+        if (disabled) {
+            event.preventDefault();
+            return;
+        }
+        // Only allow drag from handle if showDragHandle is true
+        if (context.showDragHandle) {
+            // Prevent drag from starting on the item itself
+            event.preventDefault();
+        }
+    }, [disabled, context.showDragHandle]);
+    const handleDragHandlePointerDown = useCallback((event) => {
+        if (disabled) {
+            event.preventDefault();
+            return;
+        }
+        dragControls.start(event);
+    }, [disabled, dragControls]);
+    const isBeingDragged = context.draggedItem === id;
+    return (React__default.createElement(Reorder.Item, { ref: (node) => {
+            itemRef.current = node;
+            if (typeof forwardedRef === 'function') {
+                forwardedRef(node);
+            }
+            else if (forwardedRef) {
+                forwardedRef.current = node;
+            }
+        }, value: value || id, id: id, dragListener: !context.showDragHandle && !disabled, dragControls: context.showDragHandle ? dragControls : undefined, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onPointerDown: handlePointerDown, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), className: cn(theme.itemStyle, context.showDragHandle && 'flex items-center gap-2', disabled && 'opacity-50 cursor-not-allowed', !disabled && !context.showDragHandle && 'cursor-grab active:cursor-grabbing', isBeingDragged && 'shadow-lg z-50', isFocused && !disabled && 'ring-2 ring-blue-500 ring-offset-2', className), style: {
+            position: 'relative',
+        }, variants: sortableAnimations.variants, animate: isBeingDragged ? 'dragging' : 'idle', transition: sortableAnimations.layout.layout },
+        context.showDragHandle && (React__default.createElement(motion.div, { onPointerDown: handleDragHandlePointerDown, className: cn(theme.dragHandleStyle, disabled && 'cursor-not-allowed opacity-60', !disabled && 'cursor-grab active:cursor-grabbing'), whileHover: !disabled ? sortableAnimations.dragHandle.hover : undefined, whileTap: !disabled ? sortableAnimations.dragHandle.tap : undefined }, disabled ? (React__default.createElement(LockClosedIcon, { className: "w-4 h-4 text-gray-500" })) : (React__default.createElement(Bars3Icon, { className: "w-4 h-4" })))),
+        React__default.createElement("div", { className: "flex-1" }, children)));
+});
+SortableItem.displayName = 'SortableItem';
+
+export { Sortable, SortableItem };

package/dist/components/core/Sortable/Sortable.theme.js

@@ -0,0 +1,7 @@
+const sortableTheme = {
+    containerStyle: "relative list-none",
+    itemStyle: "relative cursor-move select-none relative focus-within:z-10 list-none",
+    dragHandleStyle: "cursor-grab active:cursor-grabbing p-1 text-gray-400 hover:text-gray-600 flex items-center justify-center rounded transition-colors duration-200",
+};
+
+export { sortableTheme };

package/dist/components/core/Sortable/Sortable.types.d.ts

@@ -0,0 +1,71 @@
+import { HTMLAttributes, ReactNode, DragEvent } from 'react';
+export interface SortableData {
+    id: string;
+    index: number;
+    data?: any;
+}
+export interface SortableTheme {
+    containerStyle: string;
+    itemStyle: string;
+    dragHandleStyle: string;
+}
+export interface SortableThemeOverrides {
+    containerStyle?: string;
+    itemStyle?: string;
+    dragHandleStyle?: string;
+}
+export interface SortableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onDragStart' | 'onDragEnd'> {
+    /** Content to make sortable */
+    children: ReactNode;
+    /** Called when items are reordered */
+    onReorder: (fromIndex: number, toIndex: number) => void;
+    /** Custom class name */
+    className?: string;
+    /** Theme overrides */
+    theme?: SortableThemeOverrides;
+    /** Direction of sorting */
+    direction?: 'vertical' | 'horizontal';
+    /** Show drag handles */
+    showDragHandle?: boolean;
+    /** Called when drag starts */
+    onSortDragStart?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
+    /** Called when drag ends */
+    onSortDragEnd?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
+    /** Optional array of values for Reorder.Group - auto-extracted from children if not provided */
+    values?: any[];
+}
+export interface SortableItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Unique identifier for the item */
+    id: string;
+    /** Content of the sortable item */
+    children: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Theme overrides */
+    theme?: SortableThemeOverrides;
+    /** Disable dragging for this item */
+    disabled?: boolean;
+    /** Value for Reorder.Item - defaults to id if not provided */
+    value?: any;
+}
+export interface SortableContextValue {
+    direction: 'vertical' | 'horizontal';
+    showDragHandle: boolean;
+    theme: SortableTheme;
+    onReorder: (fromIndex: number, toIndex: number) => void;
+    onSortDragStart?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
+    onSortDragEnd?: (data: SortableData, event: DragEvent<HTMLDivElement>) => void;
+    draggedItem: string | null;
+    setDraggedItem: (id: string | null) => void;
+    dropPosition: {
+        index: number;
+        position: 'before' | 'after';
+    } | null;
+    setDropPosition: (position: {
+        index: number;
+        position: 'before' | 'after';
+    } | null) => void;
+    itemRefs: React.MutableRefObject<Map<string, HTMLDivElement>>;
+    draggedItemContent: React.ReactNode | null;
+    setDraggedItemContent: (content: React.ReactNode | null) => void;
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SpinnerProps } from './Spinner.types';
+declare const Spinner: React.FC<SpinnerProps>;
+export { Spinner };

package/dist/components/core/Spinner/Spinner.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { spinnerTheme } from './Spinner.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+const Spinner = ({ size = 'md', color = 'primary', className, theme, ...props }) => {
+    // Merge custom theme with default theme
+    const currentTheme = theme ? { ...spinnerTheme, ...theme } : spinnerTheme;
+    return (React__default.createElement("div", { className: cn(currentTheme.baseStyle), ...props },
+        React__default.createElement("div", { className: cn(currentTheme.animation, currentTheme.sizes[size], currentTheme.colors[color], className), role: "status", "aria-label": "loading" })));
+};
+
+export { Spinner };

package/dist/components/core/Spinner/Spinner.theme.js

@@ -0,0 +1,26 @@
+/**
+ * Default theme for the Spinner component
+ */
+const spinnerTheme = {
+    // Base styles for the spinner container
+    baseStyle: "inline-flex items-center justify-center",
+    // Size variants
+    sizes: {
+        sm: "size-4 border-3",
+        md: "size-5 border-3",
+        lg: "size-6 border-3",
+    },
+    // Color variants
+    colors: {
+        neutral: "border-[var(--color-border)] border-t-transparent",
+        dark: "border-[var(--color-background-quinary)] border-t-transparent",
+        primary: "border-[var(--color-primary)] border-t-transparent",
+        success: "border-[var(--color-success)] border-t-transparent",
+        warning: "border-[var(--color-warning)] border-t-transparent",
+        danger: "border-[var(--color-danger)] border-t-transparent",
+    },
+    // Animation class with drop shadow
+    animation: "animate-[spin_1s_linear_infinite] rounded-full",
+};
+
+export { spinnerTheme };

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

@@ -0,0 +1,31 @@
+/**
+ * Spinner component props
+ */
+export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The size of the spinner
+     * @default "md"
+     */
+    size?: SpinnerSize;
+    /**
+     * The color of the spinner
+     * @default "primary"
+     */
+    color?: SpinnerColor;
+    /**
+     * Custom CSS class to apply to the spinner
+     */
+    className?: string;
+    /**
+     * Theme overrides for the spinner
+     */
+    theme?: SpinnerThemeOverrides;
+}
+export type SpinnerSize = "sm" | "md" | "lg";
+export type SpinnerColor = "neutral" | "dark" | "primary" | "success" | "warning" | "danger";
+export interface SpinnerThemeOverrides {
+    baseStyle?: string;
+    sizes?: Partial<Record<SpinnerSize, string>>;
+    colors?: Partial<Record<SpinnerColor, string>>;
+    animation?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner';
+export type { SpinnerProps, SpinnerSize } from './Spinner.types';

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

@@ -18,4 +18,4 @@ import { StepperProps } from './Stepper.types';
  * ```
  */
 declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLElement>>;
-export default Stepper;
+export { Stepper };

package/dist/components/core/Stepper/Stepper.js

@@ -1,9 +1,7 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { stepperTheme } from './Stepper.theme.js';
-import StepperItem from './components/StepperItem.js';
-import ProgressIndicator from './components/ProgressIndicator.js';
+import { StepperItem } from './StepperItem.js';
 
 /**
  * Stepper component for displaying multi-step vertical progress
@@ -22,13 +20,12 @@ import ProgressIndicator from './components/ProgressIndicator.js';
  * />
  * ```
  */
-var Stepper = React__default.forwardRef(function (_a, ref) {
-    var activeStep = _a.activeStep, steps = _a.steps, className = _a.className, props = __rest(_a, ["activeStep", "steps", "className"]);
+const Stepper = React__default.forwardRef(({ activeStep, steps, lockCompletedSteps = false, className, ...props }, ref) => {
     // Helper function to determine step status
-    var getStepStatus = function (index, step) {
+    const getStepStatus = (index, step) => {
         if (step.completed && (step.active || index === activeStep))
             return 'active-complete';
-        if (step.completed)
+        if (step.completed || index < activeStep)
             return 'complete';
         if (step.active || index === activeStep)
             return 'current';
@@ -36,22 +33,26 @@ var Stepper = React__default.forwardRef(function (_a, ref) {
     };
     return (
     // Main navigation wrapper with ARIA label for accessibility
-    React__default.createElement("nav", __assign({ ref: ref, "aria-label": "Progress", className: cn(stepperTheme.baseStyle, className) }, props),
-        React__default.createElement("ol", { role: "list", className: "" }, steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
-            var status = getStepStatus(stepIdx, step);
-            var isLast = stepIdx === steps.length - 1;
+    React__default.createElement("nav", { ref: ref, "aria-label": "Progress", className: cn(stepperTheme.baseStyle, className), ...props },
+        React__default.createElement("ol", { role: "list", className: "" }, steps === null || steps === void 0 ? void 0 : steps.map((step, stepIdx) => {
+            const status = getStepStatus(stepIdx, step);
+            const isLast = stepIdx === steps.length - 1;
             // Get the status of the next step (if there is one)
-            var nextStepStatus = !isLast
+            const nextStepStatus = !isLast
                 ? getStepStatus(stepIdx + 1, steps[stepIdx + 1])
                 : undefined;
             return (
             // Individual step container
-            React__default.createElement("li", { key: step.label, className: cn(!isLast ? 'pb-10' : '', 'relative') },
-                React__default.createElement(StepperItem, { step: step, status: status, nextStepStatus: nextStepStatus, isLast: isLast, stepNumber: stepIdx + 1 })));
+            React__default.createElement("li", { key: step.label, className: cn(stepperTheme.itemStyle, !isLast ? 'pb-10' : '') },
+                React__default.createElement(StepperItem, { step: step, status: status, nextStepStatus: nextStepStatus, isLast: isLast, stepNumber: stepIdx + 1, lockCompletedSteps: lockCompletedSteps })));
         })),
-        React__default.createElement(ProgressIndicator, { activeStep: activeStep, totalSteps: steps.length })));
+        React__default.createElement("div", { className: "text-xs text-[var(--color-text-placeholder)] font-medium mt-4" },
+            "Step ",
+            activeStep + 1,
+            " of ",
+            steps.length)));
 });
 // Set display name for dev tools and Storybook
 Stepper.displayName = "Stepper";
 
-export { Stepper as default };
+export { Stepper };

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

@@ -1,36 +1,41 @@
 /**
- * Default theme for the Stepper component
- * Matches the original visual design while using CSS variables
+ * Simplified theme structure for the Stepper component following optimal patterns
  */
-export declare const stepperTheme: {
+interface StepperTheme {
     baseStyle: string;
-    connector: {
-        baseStyle: string;
-        completedStyle: string;
-        upcomingStyle: string;
-    };
-    icon: {
-        baseStyle: string;
-        completedStyle: string;
-        currentStyle: string;
-        upcomingStyle: string;
-        currentDotStyle: string;
-        upcomingDotStyle: string;
+    itemStyle: string;
+    statusStyles: {
+        complete: string;
+        current: string;
+        upcoming: string;
+        activeComplete: string;
     };
-    label: {
-        baseStyle: string;
-        statusStyles: {
-            complete: string;
-            current: string;
-            upcoming: string;
-        };
+    connectorStatusStyles: {
+        complete: string;
+        current: string;
+        upcoming: string;
+        activeComplete: string;
+        gradient: string;
     };
-    description: {
-        baseStyle: string;
-        statusStyles: {
-            complete: string;
-            current: string;
-            upcoming: string;
-        };
+    labelStatusStyles: {
+        complete: string;
+        current: string;
+        upcoming: string;
+        activeComplete: string;
     };
-};
+    iconBaseStyle: string;
+    iconNumberStyle: string;
+    connectorBaseStyle: string;
+    contentStyle: string;
+    labelBaseStyle: string;
+    descriptionStyle: string;
+}
+/**
+ * Default theme for the Stepper component
+ * Using status-first organization for reliable dark mode support
+ *
+ * @note Following dark-theme-migration-guide.md - separating base styles from
+ * status-specific styles to ensure dark: variants work correctly
+ */
+export declare const stepperTheme: StepperTheme;
+export {};

package/dist/components/core/Stepper/Stepper.theme.js

@@ -1,9 +1,57 @@
 /**
  * Default theme for the Stepper component
- * Matches the original visual design while using CSS variables
+ * Using status-first organization for reliable dark mode support
+ *
+ * @note Following dark-theme-migration-guide.md - separating base styles from
+ * status-specific styles to ensure dark: variants work correctly
  */
-var stepperTheme = {
+const stepperTheme = {
     // Base stepper container styles
-    baseStyle: ""};
+    baseStyle: "",
+    // Individual step item styles
+    itemStyle: "relative",
+    // Icon base styles (shared across all statuses)
+    iconBaseStyle: "relative z-10 flex size-8 items-center justify-center rounded-full transition-all duration-300",
+    // Status-specific icon styles (variant-first organization for dark mode)
+    statusStyles: {
+        complete: "bg-[var(--color-success)] ring-2 ring-white " +
+            "dark:bg-[var(--color-success-600)] dark:ring-[var(--color-neutral-800)]",
+        current: "border border-[var(--color-primary)] bg-white shadow-xl shadow-[var(--color-primary)]/20 ring-4 ring-[var(--color-primary)]/20 " +
+            "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-primary-400)] dark:shadow-[var(--color-primary-400)]/30 dark:ring-[var(--color-primary-400)]/30",
+        upcoming: "border border-[var(--color-border)] bg-white text-[var(--color-text-secondary)]/70 " +
+            "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-600)] dark:text-[var(--color-text-secondary)]",
+        activeComplete: "bg-[var(--color-success)] ring-2 ring-white shadow-xl shadow-[var(--color-success)]/20 ring-4 ring-[var(--color-success)]/20 " +
+            "dark:bg-[var(--color-success-600)] dark:ring-[var(--color-neutral-800)] dark:shadow-[var(--color-success-400)]/30 dark:ring-[var(--color-success-400)]/30",
+    },
+    // Icon number text styles
+    iconNumberStyle: "font-bold text-sm text-[var(--color-text-primary)] " +
+        "dark:text-[var(--color-text-primary)]",
+    // Connector base styles (shared across all statuses)
+    connectorBaseStyle: "absolute top-4 left-4 -ml-px mt-0.5 h-full w-0.5",
+    // Status-specific connector styles
+    connectorStatusStyles: {
+        complete: "bg-[var(--color-success)] " + "dark:bg-[var(--color-success-600)]",
+        current: "border-l-2 border-dashed border-[var(--color-border)] w-auto " +
+            "dark:border-[var(--color-neutral-600)]",
+        upcoming: "border-l-2 border-dashed border-[var(--color-border)] w-auto " +
+            "dark:border-[var(--color-neutral-600)]",
+        activeComplete: "bg-[var(--color-success)] " + "dark:bg-[var(--color-success-600)]",
+        gradient: "bg-gradient-to-b from-[var(--color-success)] to-[var(--color-primary)] " +
+            "dark:from-[var(--color-success-600)] dark:to-[var(--color-primary-400)]",
+    },
+    // Step content container styles
+    contentStyle: "ml-4 flex min-w-0 flex-col justify-center",
+    // Label base styles (shared across all statuses)
+    labelBaseStyle: "text-base font-medium",
+    // Status-specific label styles
+    labelStatusStyles: {
+        complete: "text-[var(--color-text-primary)] " + " ",
+        current: "text-[var(--color-primary)] " + " ",
+        upcoming: "text-[var(--color-text-secondary)] " + " ",
+        activeComplete: "text-[var(--color-text-primary)] " + "",
+    },
+    // Description text styles
+    descriptionStyle: "text-sm text-[var(--color-text-secondary)]/80 " + "",
+};
 
 export { stepperTheme };

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

@@ -24,6 +24,8 @@ export interface StepperProps extends React.HTMLAttributes<HTMLElement> {
     activeStep: number;
     /** Array of step data */
     steps: StepData[];
+    /** Whether to show lock icons on completed steps */
+    lockCompletedSteps?: boolean;
     /** Additional class name */
     className?: string;
 }

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { StepData } from "./Stepper.types";
+/**
+ * Props for the StepperItem component
+ */
+export interface StepperItemProps {
+    /** Step data */
+    step: StepData;
+    /** Status of the step: 'complete', 'current', 'upcoming', or 'active-complete' */
+    status: "complete" | "current" | "upcoming" | "active-complete";
+    /** Status of the next step (if any) */
+    nextStepStatus?: "complete" | "current" | "upcoming" | "active-complete";
+    /** Whether this is the last step in the sequence */
+    isLast: boolean;
+    /** Step number (1-based index) */
+    stepNumber: number;
+    /** Whether to show lock icons on completed steps */
+    lockCompletedSteps?: boolean;
+    /** Additional className to apply */
+    className?: string;
+}
+/**
+ * StepperItem component for rendering an individual step with consolidated rendering logic
+ */
+declare const StepperItem: React.FC<StepperItemProps>;
+export { StepperItem };