@tangible/ui 0.0.1

package/components/Rating/Rating.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cx } from '../../utils/cx.js';
+import { Icon } from '../Icon/index.js';
+export function Rating({ value, defaultValue = 0, max = 5, disabled, readOnly, name, size = 'lg', theme = 'secondary', onChange, allowClear, className, gap, ariaLabel, }) {
+    const isControlled = value != null;
+    const [internal, setInternal] = React.useState(defaultValue);
+    const current = isControlled ? value : internal;
+    const generatedId = React.useId();
+    const groupName = name ?? generatedId;
+    const setValue = (v) => {
+        if (disabled || readOnly)
+            return;
+        if (!isControlled)
+            setInternal(v);
+        onChange?.(v);
+    };
+    const handleSelect = (n) => {
+        if (allowClear && current === n)
+            setValue(0);
+        else
+            setValue(n);
+    };
+    // Keyboard navigation per WAI-ARIA APG Radio Group pattern
+    // Arrow keys auto-select (not just navigate), Space/Enter for allowClear toggle
+    const onKeyDown = (e) => {
+        if (disabled || readOnly)
+            return;
+        switch (e.key) {
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                // Move and select previous, wrap to max or stop at 1 based on allowClear
+                setValue(current <= 1 ? (allowClear ? max : 1) : current - 1);
+                e.preventDefault();
+                break;
+            case 'ArrowRight':
+            case 'ArrowUp':
+                // Move and select next, wrap to 1 or stop at max
+                setValue(current >= max ? (allowClear ? 1 : max) : current + 1);
+                e.preventDefault();
+                break;
+            case 'Home':
+                setValue(1);
+                e.preventDefault();
+                break;
+            case 'End':
+                setValue(max);
+                e.preventDefault();
+                break;
+            case ' ':
+            case 'Enter':
+                // Toggle clear if allowClear and already have selection
+                if (allowClear && current > 0) {
+                    setValue(0);
+                }
+                else if (current === 0) {
+                    setValue(1);
+                }
+                e.preventDefault();
+                break;
+            default:
+                return;
+        }
+    };
+    const defaultAriaLabel = `Rating: ${current} of ${max}`;
+    // Roving tabindex: only the selected radio (or first if none) is in tab order
+    const focusableIndex = current > 0 ? current : 1;
+    return (_jsx("div", { className: cx('tui-rating', `is-size-${size}`, `is-theme-${theme}`, disabled && 'is-disabled', className), style: { gap }, role: readOnly ? 'img' : 'radiogroup', "aria-label": ariaLabel ?? defaultAriaLabel, onKeyDown: readOnly ? undefined : onKeyDown, children: Array.from({ length: max }).map((_, i) => {
+            const n = i + 1;
+            const checked = current >= n;
+            const id = `${groupName}__star-${n}`;
+            return (_jsxs("div", { className: "tui-rating__item", children: [!readOnly && (_jsx("input", { className: "tui-visually-hidden", type: "radio", id: id, name: groupName, value: n, checked: current === n, "aria-checked": current === n, tabIndex: n === focusableIndex ? 0 : -1, onChange: () => handleSelect(n), disabled: disabled })), readOnly ? (_jsx("span", { className: cx('tui-rating__star', checked && 'is-active'), children: _jsx(Icon, { name: checked ? 'system/star-fill' : 'system/star-outline' }) })) : (_jsxs("label", { className: cx('tui-rating__star', checked && 'is-active'), htmlFor: id, tabIndex: -1, children: [_jsx(Icon, { name: checked ? 'system/star-fill' : 'system/star-outline' }), _jsx("span", { className: "tui-visually-hidden", children: `${n} of ${max}` })] }))] }, n));
+        }) }));
+}

package/components/Rating/index.d.ts

@@ -0,0 +1,2 @@
+export { Rating } from './Rating';
+export type { RatingProps } from './Rating';

package/components/Rating/index.js

@@ -0,0 +1 @@
+export { Rating } from './Rating.js';

package/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { SegmentedControlProps, SegmentedControlItemProps } from './types';
+type SegmentedControlCompound = {
+    (props: SegmentedControlProps): React.JSX.Element;
+    displayName?: string;
+    Item: typeof Item;
+};
+declare function Item({ value, disabled, icon, 'aria-label': ariaLabel, className, children, }: SegmentedControlItemProps): import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedControl: SegmentedControlCompound;
+export {};

package/components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { cx } from '../../utils/cx.js';
+import { SegmentedControlContext, useSegmentedControlContext } from './SegmentedControlContext.js';
+// =============================================================================
+// SegmentedControl Root
+// =============================================================================
+function SegmentedControlRoot({ value: controlledValue, defaultValue, onValueChange, variant = 'pill', size = 'md', orientation = 'horizontal', loop = true, disabled = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, children, }) {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [, setRegistryVersion] = useState(0);
+    const itemsRef = useRef(new Map());
+    const mountCounterRef = useRef(0);
+    const isControlled = controlledValue !== undefined;
+    const selectedValue = isControlled ? controlledValue : internalValue;
+    // Item registration
+    const registerItem = useCallback((record) => {
+        const existing = itemsRef.current.get(record.value);
+        itemsRef.current.set(record.value, {
+            ...record,
+            mountIndex: existing?.mountIndex ?? mountCounterRef.current++,
+        });
+        setRegistryVersion((v) => v + 1);
+    }, []);
+    const unregisterItem = useCallback((value) => {
+        itemsRef.current.delete(value);
+        setRegistryVersion((v) => v + 1);
+    }, []);
+    // Get items sorted by DOM order
+    const getOrderedItems = useCallback(() => {
+        const items = Array.from(itemsRef.current.values());
+        return items.sort((a, b) => {
+            const position = a.element.compareDocumentPosition(b.element);
+            if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+                return -1;
+            if (position & Node.DOCUMENT_POSITION_PRECEDING)
+                return 1;
+            return a.mountIndex - b.mountIndex;
+        });
+    }, []);
+    // Selection handler
+    const onSelect = useCallback((newValue) => {
+        if (isControlled) {
+            onValueChange?.(newValue);
+        }
+        else {
+            setInternalValue(newValue);
+            onValueChange?.(newValue);
+        }
+    }, [isControlled, onValueChange]);
+    // Dev-only: Warn if missing accessible name
+    useEffect(() => {
+        // Safe check for dev mode - import.meta.env may not exist in all bundler contexts
+        const isDev = typeof import.meta !== 'undefined' && import.meta.env?.DEV;
+        if (isDev && !ariaLabel && !ariaLabelledBy) {
+            console.warn('SegmentedControl: Missing accessible name. Provide aria-label or aria-labelledby.');
+        }
+    }, [ariaLabel, ariaLabelledBy]);
+    // Keyboard navigation
+    const handleKeyDown = (event) => {
+        const items = getOrderedItems().filter((item) => !item.disabled && !disabled);
+        if (items.length === 0)
+            return;
+        let currentIndex = items.findIndex((item) => item.value === selectedValue);
+        if (currentIndex === -1)
+            currentIndex = 0;
+        const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+        const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+        let targetIndex = null;
+        switch (event.key) {
+            case nextKey:
+                event.preventDefault();
+                if (loop) {
+                    targetIndex = (currentIndex + 1) % items.length;
+                }
+                else {
+                    targetIndex = Math.min(currentIndex + 1, items.length - 1);
+                }
+                break;
+            case prevKey:
+                event.preventDefault();
+                if (loop) {
+                    targetIndex = (currentIndex - 1 + items.length) % items.length;
+                }
+                else {
+                    targetIndex = Math.max(currentIndex - 1, 0);
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                targetIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                targetIndex = items.length - 1;
+                break;
+        }
+        if (targetIndex !== null && targetIndex !== currentIndex) {
+            const targetItem = items[targetIndex];
+            targetItem.element.focus();
+            // Radiogroup: arrow keys move focus AND select
+            onSelect(targetItem.value);
+        }
+    };
+    const contextValue = useMemo(() => ({
+        variant,
+        size,
+        orientation,
+        loop,
+        selectedValue,
+        rootDisabled: disabled,
+        registerItem,
+        unregisterItem,
+        getOrderedItems,
+        onSelect,
+        itemsRef,
+    }), [
+        variant,
+        size,
+        orientation,
+        loop,
+        selectedValue,
+        disabled,
+        registerItem,
+        unregisterItem,
+        getOrderedItems,
+        onSelect,
+    ]);
+    return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsx("div", { role: "radiogroup", className: cx('tui-segmented', `is-variant-${variant}`, `is-size-${size}`, orientation === 'vertical' && 'is-vertical', className), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-disabled": disabled || undefined, "aria-orientation": orientation, onKeyDown: handleKeyDown, children: children }) }));
+}
+// =============================================================================
+// SegmentedControl.Item
+// =============================================================================
+function Item({ value, disabled = false, icon, 'aria-label': ariaLabel, className, children, }) {
+    const { selectedValue, rootDisabled, registerItem, unregisterItem, onSelect, getOrderedItems, } = useSegmentedControlContext();
+    const isSelected = selectedValue === value;
+    const isDisabled = rootDisabled || disabled;
+    // Determine which item gets tabIndex={0}
+    const getIsFocusable = () => {
+        if (isDisabled)
+            return false;
+        if (isSelected)
+            return true;
+        // If no selection, first enabled item is focusable
+        const items = getOrderedItems();
+        const enabledItems = items.filter((item) => !item.disabled && !rootDisabled);
+        if (enabledItems.length === 0)
+            return false;
+        if (selectedValue === undefined) {
+            return enabledItems[0].value === value;
+        }
+        // If selected item is disabled, first enabled gets focus
+        const selectedItem = items.find((item) => item.value === selectedValue);
+        if (selectedItem?.disabled || rootDisabled) {
+            return enabledItems[0].value === value;
+        }
+        return false;
+    };
+    const isFocusable = getIsFocusable();
+    // Callback ref for registration
+    const callbackRef = useCallback((node) => {
+        if (node) {
+            registerItem({ value, element: node, disabled });
+        }
+        else {
+            unregisterItem(value);
+        }
+    }, [value, disabled, registerItem, unregisterItem]);
+    // Click handler
+    const handleClick = () => {
+        if (isDisabled)
+            return;
+        onSelect(value);
+    };
+    const hasIcon = icon !== undefined && icon !== null;
+    const hasChildren = children !== undefined && children !== null;
+    return (_jsxs("button", { ref: callbackRef, type: "button", role: "radio", className: cx('tui-segmented__item', className), "aria-checked": isSelected, "aria-disabled": isDisabled || undefined, "aria-label": ariaLabel, tabIndex: isDisabled ? -1 : isFocusable ? 0 : -1, onClick: handleClick, children: [hasIcon && _jsx("span", { className: "tui-segmented__item-icon", children: icon }), hasChildren && _jsx("span", { className: "tui-segmented__item-label", children: children })] }));
+}
+// =============================================================================
+// Compound Component Export
+// =============================================================================
+export const SegmentedControl = SegmentedControlRoot;
+SegmentedControl.Item = Item;
+SegmentedControl.displayName = 'SegmentedControl';

package/components/SegmentedControl/SegmentedControlContext.d.ts

@@ -0,0 +1,3 @@
+import type { SegmentedControlContextValue } from './types';
+export declare const SegmentedControlContext: import("react").Context<SegmentedControlContextValue | null>;
+export declare function useSegmentedControlContext(): SegmentedControlContextValue;

package/components/SegmentedControl/SegmentedControlContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const SegmentedControlContext = createContext(null);
+export function useSegmentedControlContext() {
+    const context = useContext(SegmentedControlContext);
+    if (!context) {
+        throw new Error('SegmentedControl compound components must be used within a SegmentedControl');
+    }
+    return context;
+}

package/components/SegmentedControl/index.d.ts

@@ -0,0 +1,2 @@
+export { SegmentedControl } from './SegmentedControl';
+export type { SegmentedControlProps, SegmentedControlItemProps, SegmentedControlValue, SegmentedControlVariant, SegmentedControlSize, SegmentedControlOrientation, } from './types';

package/components/SegmentedControl/index.js

@@ -0,0 +1 @@
+export { SegmentedControl } from './SegmentedControl.js';

package/components/SegmentedControl/types.d.ts

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+export type SegmentedControlValue = string | number;
+export type SegmentedControlVariant = 'pill' | 'outline' | 'underline';
+export type SegmentedControlSize = 'sm' | 'md';
+export type SegmentedControlOrientation = 'horizontal' | 'vertical';
+export type SegmentedControlProps = {
+    /** Controlled selected value */
+    value?: SegmentedControlValue;
+    /** Uncontrolled initial value */
+    defaultValue?: SegmentedControlValue;
+    /** Callback when selection changes */
+    onValueChange?: (value: SegmentedControlValue) => void;
+    /** Visual style */
+    variant?: SegmentedControlVariant;
+    /** Size scale */
+    size?: SegmentedControlSize;
+    /** Layout direction */
+    orientation?: SegmentedControlOrientation;
+    /** Whether arrow keys wrap around */
+    loop?: boolean;
+    /** Disable all items */
+    disabled?: boolean;
+    /** Accessible label */
+    'aria-label'?: string;
+    /** ID of element that labels this control */
+    'aria-labelledby'?: string;
+    /** Additional classes */
+    className?: string;
+    children: ReactNode;
+};
+export type SegmentedControlItemProps = {
+    /** Unique identifier (required) */
+    value: SegmentedControlValue;
+    /** Disable this item */
+    disabled?: boolean;
+    /** Icon element */
+    icon?: ReactNode;
+    /** Accessible label for icon-only items */
+    'aria-label'?: string;
+    /** Additional classes */
+    className?: string;
+    /** Label content */
+    children?: ReactNode;
+};
+export type ItemRecord = {
+    value: SegmentedControlValue;
+    element: HTMLButtonElement;
+    disabled: boolean;
+    mountIndex: number;
+};
+export type SegmentedControlContextValue = {
+    variant: SegmentedControlVariant;
+    size: SegmentedControlSize;
+    orientation: SegmentedControlOrientation;
+    loop: boolean;
+    selectedValue: SegmentedControlValue | undefined;
+    rootDisabled: boolean;
+    registerItem: (record: Omit<ItemRecord, 'mountIndex'>) => void;
+    unregisterItem: (value: SegmentedControlValue) => void;
+    getOrderedItems: () => ItemRecord[];
+    onSelect: (value: SegmentedControlValue) => void;
+    itemsRef: React.RefObject<Map<SegmentedControlValue, ItemRecord>>;
+};

package/components/SegmentedControl/types.js

@@ -0,0 +1 @@
+export {};

package/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,17 @@
+import type { SidebarProps, SidebarHeaderProps, SidebarNavProps } from './types';
+declare function SidebarHeader(props: SidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarHeader {
+    var displayName: string;
+}
+declare function SidebarNav(props: SidebarNavProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarNav {
+    var displayName: string;
+}
+type SidebarCompound = {
+    (props: SidebarProps): React.JSX.Element | null;
+    displayName?: string;
+    Header: typeof SidebarHeader;
+    Nav: typeof SidebarNav;
+};
+export declare const Sidebar: SidebarCompound;
+export {};

package/components/Sidebar/Sidebar.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { useFocusTrap, getInitialFocus } from '../../utils/focus-trap.js';
+const isBrowser = typeof document !== 'undefined';
+// =============================================================================
+// Sidebar (Root)
+// =============================================================================
+function SidebarRoot(props) {
+    const { position = 'left', drawer = false, isOpen = false, onClose, ariaLabel, children, className, } = props;
+    const sidebarRef = useRef(null);
+    const restoreRef = useRef(null);
+    const rootClassName = ['tui-sidebar', className].filter(Boolean).join(' ');
+    // ---------------------------------------------------------------------------
+    // Drawer mode: capture trigger for focus restoration
+    // ---------------------------------------------------------------------------
+    useEffect(() => {
+        if (!drawer || !isBrowser)
+            return;
+        if (isOpen) {
+            // Capture focus target when opening
+            restoreRef.current = document.activeElement;
+        }
+        else {
+            // Restore focus when closing
+            const el = restoreRef.current;
+            if (el && typeof el.focus === 'function') {
+                el.focus();
+            }
+            restoreRef.current = null;
+        }
+    }, [drawer, isOpen]);
+    // ---------------------------------------------------------------------------
+    // Drawer mode: body scroll lock
+    // ---------------------------------------------------------------------------
+    useEffect(() => {
+        if (!drawer || !isOpen)
+            return;
+        document.body.classList.add('tui-sidebar-drawer-open');
+        return () => {
+            document.body.classList.remove('tui-sidebar-drawer-open');
+        };
+    }, [drawer, isOpen]);
+    // ---------------------------------------------------------------------------
+    // Drawer mode: focus trap (handles Tab cycling and ESC to close)
+    // ---------------------------------------------------------------------------
+    useFocusTrap(sidebarRef, {
+        isActive: drawer && isOpen,
+        onEscape: onClose,
+    });
+    // ---------------------------------------------------------------------------
+    // Drawer mode: initial focus
+    // ---------------------------------------------------------------------------
+    useEffect(() => {
+        if (!drawer || !isOpen)
+            return;
+        const sidebar = sidebarRef.current;
+        if (!sidebar)
+            return;
+        const target = getInitialFocus(sidebar);
+        target.focus({ preventScroll: true });
+    }, [drawer, isOpen]);
+    // ---------------------------------------------------------------------------
+    // Sidebar content (shared between static and drawer modes)
+    // ---------------------------------------------------------------------------
+    const sidebarContent = (_jsx("aside", { ref: sidebarRef, className: rootClassName, "data-position": position, "aria-label": ariaLabel, "aria-modal": drawer && isOpen ? 'true' : undefined, tabIndex: drawer ? -1 : undefined, children: children }));
+    // ---------------------------------------------------------------------------
+    // Static mode: render directly
+    // ---------------------------------------------------------------------------
+    if (!drawer) {
+        return sidebarContent;
+    }
+    // ---------------------------------------------------------------------------
+    // Drawer mode: render inline with fixed positioning (no portal needed)
+    // ---------------------------------------------------------------------------
+    if (!isOpen) {
+        return null;
+    }
+    const drawerClassName = [
+        'tui-sidebar-drawer',
+        position === 'right' && 'is-position-right',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: drawerClassName, "data-position": position, "data-state": "open", children: [_jsx("div", { className: "tui-sidebar-drawer__backdrop", onClick: onClose, "aria-hidden": "true" }), _jsx("div", { className: "tui-sidebar-drawer__panel", children: sidebarContent })] }));
+}
+// =============================================================================
+// Sidebar.Header
+// =============================================================================
+function SidebarHeader(props) {
+    const { children, className } = props;
+    const headerClassName = ['tui-sidebar__header', className].filter(Boolean).join(' ');
+    return _jsx("header", { className: headerClassName, children: children });
+}
+// =============================================================================
+// Sidebar.Nav
+// =============================================================================
+function SidebarNav(props) {
+    const { ariaLabel, ariaLabelledBy, children, className } = props;
+    const navClassName = ['tui-sidebar__nav', className].filter(Boolean).join(' ');
+    return (_jsx("nav", { className: navClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: children }));
+}
+SidebarHeader.displayName = 'Sidebar.Header';
+SidebarNav.displayName = 'Sidebar.Nav';
+export const Sidebar = SidebarRoot;
+Sidebar.displayName = 'Sidebar';
+Sidebar.Header = SidebarHeader;
+Sidebar.Nav = SidebarNav;

package/components/Sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export { Sidebar } from './Sidebar';
+export type { SidebarProps, SidebarHeaderProps, SidebarNavProps, } from './types';

package/components/Sidebar/index.js

@@ -0,0 +1 @@
+export { Sidebar } from './Sidebar.js';

package/components/Sidebar/types.d.ts

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+export type SidebarProps = {
+    /**
+     * Sidebar position. Affects border placement and drawer slide direction.
+     * @default 'left'
+     */
+    position?: 'left' | 'right';
+    /**
+     * Enable drawer mode (mobile overlay).
+     * When true, sidebar renders via portal with backdrop and focus trap.
+     * @default false
+     */
+    drawer?: boolean;
+    /**
+     * Drawer open state. Required when `drawer={true}`.
+     */
+    isOpen?: boolean;
+    /**
+     * Callback to close the drawer.
+     * Called when ESC is pressed or backdrop is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Accessible label for the aside landmark.
+     * Typically omit this if using `ariaLabel` on `Sidebar.Nav` instead.
+     */
+    ariaLabel?: string;
+    /**
+     * Sidebar content (Header, Nav, etc.).
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+};
+export type SidebarHeaderProps = {
+    /**
+     * Header content (back button, title, progress, CTAs).
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+};
+export type SidebarNavProps = {
+    /**
+     * Accessible label for the nav landmark.
+     * Use this for the primary label since nav is the actionable region.
+     */
+    ariaLabel?: string;
+    /**
+     * ID of a visible heading that labels the navigation.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Nav content (typically Accordion with StepList).
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+};

package/components/Sidebar/types.js

@@ -0,0 +1,4 @@
+// =============================================================================
+// Sidebar Types
+// =============================================================================
+export {};

package/components/StepIndicator/StepIndicator.d.ts

@@ -0,0 +1,2 @@
+import type { StepIndicatorProps } from './types';
+export declare function StepIndicator(props: StepIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/components/StepIndicator/StepIndicator.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress } from '../Progress/index.js';
+import { Icon } from '../Icon/index.js';
+// =============================================================================
+// Icon mapping for static states
+// =============================================================================
+const statusIcons = {
+    complete: 'lms/checkmark',
+    locked: 'lms/lock',
+};
+const statusLabels = {
+    'not-started': 'Not started',
+    'in-progress': 'In progress',
+    complete: 'Complete',
+    locked: 'Locked',
+};
+// =============================================================================
+// Status inference
+// =============================================================================
+function inferStatus(value) {
+    if (value <= 0)
+        return 'not-started';
+    if (value >= 100)
+        return 'complete';
+    return 'in-progress';
+}
+// =============================================================================
+// Component
+// =============================================================================
+export function StepIndicator(props) {
+    const { value = 0, status: statusOverride, icon: customIcon, size = 'sm', showValue = false, label, className, } = props;
+    // Infer status from value, allow override
+    const status = statusOverride ?? inferStatus(value);
+    // When status is explicit, the visual should match the status, not the value
+    // - not-started: always show empty (0%)
+    // - complete: always show full (100%)
+    // - in-progress: use actual value
+    // - locked: shows icon, value doesn't matter visually
+    const displayValue = statusOverride === 'not-started' ? 0
+        : statusOverride === 'complete' ? 100
+            : value;
+    // Determine which icon to show:
+    // - complete/locked: always use status icons (universal meaning)
+    // - not-started/in-progress: use custom icon if provided, otherwise no icon
+    const hasStatusIcon = status === 'complete' || status === 'locked';
+    const hasCustomIcon = !!customIcon && (status === 'not-started' || status === 'in-progress');
+    const hasIcon = hasStatusIcon || hasCustomIcon;
+    const iconName = hasStatusIcon ? statusIcons[status] : customIcon;
+    // Use solid variant for complete state (filled circle)
+    const variant = status === 'complete' ? 'solid' : 'ring';
+    // Accessible label
+    const ariaLabel = label ?? `Step status: ${statusLabels[status]}`;
+    // Build class names
+    const rootClassName = [
+        'tui-step-indicator',
+        `is-size-${size}`,
+        `is-status-${status}`,
+        hasIcon && 'has-icon',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", { className: rootClassName, children: _jsxs(Progress, { mode: "circle", variant: variant, size: size, value: displayValue, showLabels: showValue || hasIcon, labelPosition: "inside", ariaLabel: ariaLabel, children: [hasIcon && iconName && (_jsx(Icon, { name: iconName })), showValue && status === 'in-progress' && (_jsxs("span", { className: "tui-step-indicator__value", children: [Math.round(displayValue), "%"] }))] }) }));
+}

package/components/StepIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export { StepIndicator } from './StepIndicator';
+export type { StepIndicatorProps, StepStatus } from './types';

package/components/StepIndicator/index.js

@@ -0,0 +1 @@
+export { StepIndicator } from './StepIndicator.js';