@wheelhouse/ui 0.2.0 → 0.2.2

package/dist/components/sortable/sortable.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Drag-and-drop sortable lists and grids built on [dnd-kit](https://dndkit.com/).
+ *
+ * Compose **`Sortable`** (root) with **`SortableItem`** rows and an optional **`SortableItemHandle`**
+ * for the drag affordance. The root renders a **`DragOverlay`** portal while dragging; use
+ * **`SortableOverlay`** only when you need a fully custom overlay.
+ *
+ * @packageDocumentation
+ */
+import * as React from 'react';
+import { type ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type DragEndEvent, DragOverlay, type DragStartEvent, type Modifiers, type UniqueIdentifier } from '@dnd-kit/core';
+/**
+ * Props for {@link Sortable}. `T` is your row model; stable string ids come from {@link SortableRootProps.getItemValue}.
+ *
+ * @typeParam T - Item type in the controlled `value` array.
+ */
+export interface SortableRootProps<T> extends Omit<useRender.ComponentProps<'div'>, 'onDragStart' | 'onDragEnd' | 'children'> {
+    /** Controlled list; order updates when items are reordered (unless {@link SortableRootProps.onMove} handles persistence). */
+    value: T[];
+    /** Called with the next array when the user drops an item in a new position. */
+    onValueChange: (value: T[]) => void;
+    /** Stable string id for each item; must match the corresponding {@link SortableItemProps.value}. */
+    getItemValue: (item: T) => string;
+    /** Typically a list of `SortableItem` elements (one per row). */
+    children: ReactNode;
+    /**
+     * Optional full control on drop: receive indices and apply `value` yourself (e.g. server mutation).
+     * When omitted, the root calls `onValueChange` with an array moved via dnd-kit `arrayMove`.
+     */
+    onMove?: (event: {
+        event: DragEndEvent;
+        activeIndex: number;
+        overIndex: number;
+    }) => void;
+    /**
+     * Layout strategy for `@dnd-kit/sortable`: vertical list, horizontal/flow, or grid (both use rect sorting).
+     * @defaultValue vertical
+     */
+    strategy?: 'horizontal' | 'vertical' | 'grid';
+    /** Passed through to `DndContext`; invoked when a drag starts. */
+    onDragStart?: (event: DragStartEvent) => void;
+    /** Passed through to `DndContext`; invoked when a drag ends (after reorder logic). */
+    onDragEnd?: (event: DragEndEvent) => void;
+    /** Optional dnd-kit modifiers (e.g. `restrictToParentElement`) for both context and overlay. */
+    modifiers?: Modifiers;
+}
+/**
+ * Root for a sortable region. Wires `DndContext`, `SortableContext`, sensors, and a `DragOverlay` portal on the client.
+ *
+ * Renders the default element as a `div` with `data-slot="sortable"` (see Base UI `useRender` / `render` prop).
+ */
+declare function Sortable<T>({ value, onValueChange, getItemValue, className, render, onMove, strategy, onDragStart, onDragEnd, modifiers, children, ...props }: SortableRootProps<T>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for {@link SortableItem}. `value` is the sortable id (string) registered with dnd-kit.
+ */
+export interface SortableItemProps extends useRender.ComponentProps<'div'> {
+    /** Must match `getItemValue(item)` for that row and be unique among siblings. */
+    value: string;
+    /** When true, the item does not participate in dragging. */
+    disabled?: boolean;
+}
+/**
+ * One row in a sortable list. Provides `data-slot="sortable-item"` and sortable transforms unless rendered inside a drag overlay clone.
+ */
+declare function SortableItem({ value, className, render, disabled, ...props }: SortableItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for {@link SortableItemHandle}. Spread `listeners` from context onto this node (handled internally).
+ */
+export interface SortableItemHandleProps extends useRender.ComponentProps<'div'> {
+    /** When true (default), applies grab/grabbing cursor classes while dragging. */
+    cursor?: boolean;
+}
+/**
+ * Drag handle for a `SortableItem`. Must be nested under `SortableItem` so listeners and drag state apply.
+ */
+declare function SortableItemHandle({ className, render, cursor, ...props }: SortableItemHandleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/**
+ * Props for {@link SortableOverlay}. Extends dnd-kit `DragOverlay` except `children`, which may be a render function receiving the active id.
+ */
+export interface SortableOverlayProps extends Omit<React.ComponentProps<typeof DragOverlay>, 'children'> {
+    /** Static node or function `({ value }) => …` for custom overlay content tied to the active item id. */
+    children?: ReactNode | ((params: {
+        value: UniqueIdentifier;
+    }) => ReactNode);
+}
+/**
+ * Alternate overlay entry: renders `DragOverlay` in a portal with shared modifiers/animation from `Sortable` context.
+ * Prefer the built-in overlay on `Sortable` unless you need this API.
+ */
+declare function SortableOverlay({ children, className, ...props }: SortableOverlayProps): React.ReactPortal | null;
+export { Sortable, SortableItem, SortableItemHandle, SortableOverlay };
+//# sourceMappingURL=sortable.d.ts.map

package/dist/components/sortable/sortable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/sortable.tsx"],"names":[],"mappings":"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"}

package/dist/components/sortable/sortable.js

@@ -0,0 +1,210 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Drag-and-drop sortable lists and grids built on [dnd-kit](https://dndkit.com/).
+ *
+ * Compose **`Sortable`** (root) with **`SortableItem`** rows and an optional **`SortableItemHandle`**
+ * for the drag affordance. The root renders a **`DragOverlay`** portal while dragging; use
+ * **`SortableOverlay`** only when you need a fully custom overlay.
+ *
+ * @packageDocumentation
+ */
+import * as React from 'react';
+import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useMemo, useState, useSyncExternalStore, } from 'react';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { defaultDropAnimationSideEffects, DndContext, DragOverlay, KeyboardSensor, MeasuringStrategy, MouseSensor, TouchSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { arrayMove, defaultAnimateLayoutChanges, rectSortingStrategy, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { createPortal } from 'react-dom';
+import { cn } from '../../lib/utils';
+// Sortable Item Context
+const SortableItemContext = createContext({
+    listeners: undefined,
+    isDragging: false,
+    disabled: false,
+});
+const IsOverlayContext = createContext(false);
+const SortableInternalContext = createContext({
+    activeId: null,
+    modifiers: undefined,
+});
+const animateLayoutChanges = (args) => defaultAnimateLayoutChanges({ ...args, wasDragging: true });
+const dropAnimationConfig = {
+    sideEffects: defaultDropAnimationSideEffects({
+        styles: {
+            active: {
+                opacity: '0.4',
+            },
+        },
+    }),
+};
+const emptySubscribe = () => () => { };
+function useIsClient() {
+    return useSyncExternalStore(emptySubscribe, () => true, () => false);
+}
+/**
+ * Root for a sortable region. Wires `DndContext`, `SortableContext`, sensors, and a `DragOverlay` portal on the client.
+ *
+ * Renders the default element as a `div` with `data-slot="sortable"` (see Base UI `useRender` / `render` prop).
+ */
+function Sortable({ value, onValueChange, getItemValue, className, render, onMove, strategy = 'vertical', onDragStart, onDragEnd, modifiers, children, ...props }) {
+    const [activeId, setActiveId] = useState(null);
+    const isClient = useIsClient();
+    const sensors = useSensors(useSensor(MouseSensor, {
+        activationConstraint: {
+            distance: 10,
+        },
+    }), useSensor(TouchSensor, {
+        activationConstraint: {
+            delay: 250,
+            tolerance: 5,
+        },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    const handleDragStart = useCallback((event) => {
+        setActiveId(event.active.id);
+        onDragStart?.(event);
+    }, [onDragStart]);
+    const handleDragEnd = useCallback((event) => {
+        const { active, over } = event;
+        setActiveId(null);
+        onDragEnd?.(event);
+        if (!over)
+            return;
+        // Handle item reordering
+        const activeIndex = value.findIndex((item) => getItemValue(item) === active.id);
+        const overIndex = value.findIndex((item) => getItemValue(item) === over.id);
+        if (activeIndex !== overIndex) {
+            if (onMove) {
+                onMove({ event, activeIndex, overIndex });
+            }
+            else {
+                const newValue = arrayMove(value, activeIndex, overIndex);
+                onValueChange(newValue);
+            }
+        }
+    }, [value, getItemValue, onValueChange, onMove, onDragEnd]);
+    const handleDragCancel = useCallback(() => {
+        setActiveId(null);
+    }, []);
+    const getStrategy = () => {
+        switch (strategy) {
+            case 'horizontal':
+                return rectSortingStrategy;
+            case 'grid':
+                return rectSortingStrategy;
+            case 'vertical':
+            default:
+                return verticalListSortingStrategy;
+        }
+    };
+    const itemIds = useMemo(() => value.map(getItemValue), [value, getItemValue]);
+    const contextValue = useMemo(() => ({ activeId, modifiers }), [activeId, modifiers]);
+    const defaultProps = {
+        'data-slot': 'sortable',
+        'data-dragging': activeId !== null,
+        className: cn(activeId !== null && 'cursor-grabbing!', className),
+        children,
+    };
+    // Find the active child for the overlay
+    const overlayContent = useMemo(() => {
+        if (!activeId)
+            return null;
+        let result = null;
+        Children.forEach(children, (child) => {
+            if (!isValidElement(child))
+                return;
+            if (child.props.value !== activeId)
+                return;
+            result = cloneElement(child, {
+                ...child.props,
+                className: cn(child.props.className, 'z-50'),
+            });
+        });
+        return result;
+    }, [activeId, children]);
+    return (_jsx(SortableInternalContext.Provider, { value: contextValue, children: _jsxs(DndContext, { sensors: sensors, modifiers: modifiers, measuring: {
+                droppable: {
+                    strategy: MeasuringStrategy.Always,
+                },
+            }, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [_jsx(SortableContext, { items: itemIds, strategy: getStrategy(), children: useRender({
+                        defaultTagName: 'div',
+                        render,
+                        props: mergeProps(defaultProps, props),
+                    }) }), isClient &&
+                    createPortal(_jsx(DragOverlay, { dropAnimation: dropAnimationConfig, modifiers: modifiers, className: cn('z-50', activeId && 'cursor-grabbing'), children: _jsx(IsOverlayContext.Provider, { value: true, children: overlayContent }) }), document.body)] }) }));
+}
+/**
+ * One row in a sortable list. Provides `data-slot="sortable-item"` and sortable transforms unless rendered inside a drag overlay clone.
+ */
+function SortableItem({ value, className, render, disabled, ...props }) {
+    const isOverlay = useContext(IsOverlayContext);
+    const { setNodeRef, transform, transition, attributes, listeners, isDragging: isSortableDragging, } = useSortable({
+        id: value,
+        disabled: disabled || isOverlay,
+        animateLayoutChanges,
+    });
+    const defaultProps = isOverlay
+        ? {
+            'data-slot': 'sortable-item',
+            'data-value': value,
+            'data-dragging': true,
+            className: cn(className),
+            children: props.children,
+        }
+        : {
+            'data-slot': 'sortable-item',
+            'data-value': value,
+            'data-dragging': isSortableDragging,
+            'data-disabled': disabled,
+            ref: setNodeRef,
+            style: {
+                transition,
+                transform: CSS.Transform.toString(transform),
+            },
+            ...attributes,
+            className: cn(isSortableDragging && 'z-50 opacity-50', disabled && 'opacity-50', className),
+            children: props.children,
+        };
+    const itemContextValue = isOverlay ? { listeners: undefined, isDragging: true, disabled: false } : { listeners, isDragging: isSortableDragging, disabled };
+    const rendered = useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps(defaultProps, props),
+    });
+    return _jsx(SortableItemContext.Provider, { value: itemContextValue, children: rendered });
+}
+/**
+ * Drag handle for a `SortableItem`. Must be nested under `SortableItem` so listeners and drag state apply.
+ */
+function SortableItemHandle({ className, render, cursor = true, ...props }) {
+    const { listeners, isDragging, disabled } = useContext(SortableItemContext);
+    const defaultProps = {
+        'data-slot': 'sortable-item-handle',
+        'data-dragging': isDragging,
+        'data-disabled': disabled,
+        ...listeners,
+        className: cn(cursor && (isDragging ? 'cursor-grabbing!' : 'cursor-grab!'), className),
+        children: props.children,
+    };
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps(defaultProps, props),
+    });
+}
+/**
+ * Alternate overlay entry: renders `DragOverlay` in a portal with shared modifiers/animation from `Sortable` context.
+ * Prefer the built-in overlay on `Sortable` unless you need this API.
+ */
+function SortableOverlay({ children, className, ...props }) {
+    const { activeId, modifiers } = useContext(SortableInternalContext);
+    const isClient = useIsClient();
+    const content = activeId && children ? (typeof children === 'function' ? children({ value: activeId }) : children) : null;
+    if (!isClient)
+        return null;
+    return createPortal(_jsx(DragOverlay, { dropAnimation: dropAnimationConfig, modifiers: modifiers, className: cn('z-50', activeId && 'cursor-grabbing', className), ...props, children: _jsx(IsOverlayContext.Provider, { value: true, children: content }) }), document.body);
+}
+export { Sortable, SortableItem, SortableItemHandle, SortableOverlay };

package/dist/components/sortable/sortable.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Vertical: Story;
+export declare const Horizontal: Story;
+export declare const Grid: Story;
+//# sourceMappingURL=sortable.stories.d.ts.map

package/dist/components/sortable/sortable.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/sortable.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAcvD,QAAA,MAAM,IAAI;;;;;;CAMM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAiEnC,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}

package/dist/components/sortable/sortable.stories.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GripVertical } from 'lucide-react';
+import { useState } from 'react';
+import { Sortable, SortableItem, SortableItemHandle } from '.';
+const initialItems = [
+    { id: 'a', title: 'First item' },
+    { id: 'b', title: 'Second item' },
+    { id: 'c', title: 'Third item' },
+];
+const meta = {
+    title: 'UI/Sortable',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+};
+export default meta;
+function VerticalListStory() {
+    const [items, setItems] = useState(initialItems);
+    return (_jsx("div", { className: "w-full max-w-md", children: _jsx(Sortable, { value: items, onValueChange: setItems, getItemValue: (item) => item.id, className: "flex flex-col gap-2", children: items.map((item) => (_jsxs(SortableItem, { value: item.id, className: "flex items-center gap-3 rounded-md border bg-card px-3 py-2 shadow-sm", children: [_jsx(SortableItemHandle, { className: "text-muted-foreground hover:text-foreground", "aria-label": `Drag ${item.title}`, children: _jsx(GripVertical, { className: "size-5", strokeWidth: 2.5 }) }), _jsx("span", { className: "text-sm font-medium", children: item.title })] }, item.id))) }) }));
+}
+function HorizontalListStory() {
+    const [items, setItems] = useState(initialItems);
+    return (_jsx("div", { className: "w-full max-w-3xl", children: _jsx(Sortable, { value: items, onValueChange: setItems, getItemValue: (item) => item.id, strategy: "horizontal", className: "flex flex-row flex-wrap gap-2", children: items.map((item) => (_jsxs(SortableItem, { value: item.id, className: "flex min-w-[10rem] items-center gap-2 rounded-md border bg-card px-3 py-2 shadow-sm", children: [_jsx(SortableItemHandle, { className: "text-muted-foreground hover:text-foreground", "aria-label": `Drag ${item.title}`, children: _jsx(GripVertical, { className: "size-5", strokeWidth: 2.5 }) }), _jsx("span", { className: "text-sm font-medium", children: item.title })] }, item.id))) }) }));
+}
+function GridStory() {
+    const [items, setItems] = useState(initialItems);
+    return (_jsx("div", { className: "w-full max-w-lg", children: _jsx(Sortable, { value: items, onValueChange: setItems, getItemValue: (item) => item.id, strategy: "grid", className: "grid grid-cols-2 gap-2", children: items.map((item) => (_jsxs(SortableItem, { value: item.id, className: "flex items-center gap-2 rounded-md border bg-card px-3 py-4 shadow-sm", children: [_jsx(SortableItemHandle, { className: "text-muted-foreground hover:text-foreground", "aria-label": `Drag ${item.title}`, children: _jsx(GripVertical, { className: "size-5", strokeWidth: 2.5 }) }), _jsx("span", { className: "text-sm font-medium", children: item.title })] }, item.id))) }) }));
+}
+export const Vertical = {
+    render: () => _jsx(VerticalListStory, {}),
+};
+export const Horizontal = {
+    render: () => _jsx(HorizontalListStory, {}),
+};
+export const Grid = {
+    render: () => _jsx(GridStory, {}),
+};

package/dist/components/spinner/spinner.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { SpinnerIcon } from '@phosphor-icons/react/dist/ssr';
+import { Loader2 } from 'lucide-react';
 /**
- * Props for `Spinner`. Accepts standard SVG attributes (via Phosphor’s `SpinnerIcon`).
+ * Props for `Spinner`. Accepts standard SVG attributes (via Lucide’s `Loader2`).
  */
-export type SpinnerProps = React.ComponentPropsWithoutRef<typeof SpinnerIcon>;
+export type SpinnerProps = React.ComponentPropsWithoutRef<typeof Loader2>;
 /**
  * A compact loading indicator: spinning icon with `role="status"` and default `aria-label="Loading"`.
  * Pass `aria-label`, `aria-hidden`, or `role` through props to override (spread is applied last).

package/dist/components/spinner/spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,WAAW,CAAC,CAAC;AAE9E;;;GAGG;AACH,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAErD;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAIvC;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,OAAO,CAAC,CAAC;AAE1E;;;GAGG;AACH,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAErD;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/spinner/spinner.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { SpinnerIcon } from '@phosphor-icons/react/dist/ssr';
+import { Loader2 } from 'lucide-react';
 import { cn } from '../../lib/utils';
 /**
  * A compact loading indicator: spinning icon with `role="status"` and default `aria-label="Loading"`.
  * Pass `aria-label`, `aria-hidden`, or `role` through props to override (spread is applied last).
  */
 function Spinner({ className, ...props }) {
-    return _jsx(SpinnerIcon, { "data-slot": "spinner", className: cn('size-4 animate-spin', className), role: "status", "aria-label": "Loading", ...props });
+    return _jsx(Loader2, { "data-slot": "spinner", className: cn('size-4 animate-spin', className), role: "status", "aria-label": "Loading", ...props });
 }
 export { Spinner };

package/dist/components/status-indicator/index.d.ts

@@ -0,0 +1,3 @@
+export { StatusIndicator, StatusIndicatorDot, StatusIndicatorLabel } from './status-indicator';
+export type { StatusIndicatorDotProps, StatusIndicatorLabelProps, StatusIndicatorProps, StatusIndicatorState } from './status-indicator';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/status-indicator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/status-indicator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC/F,YAAY,EAAE,uBAAuB,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/status-indicator/index.js

@@ -0,0 +1 @@
+export { StatusIndicator, StatusIndicatorDot, StatusIndicatorLabel } from './status-indicator';

package/dist/components/status-indicator/status-indicator.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Operational status: compound **`StatusIndicator`** (row shell), **`StatusIndicatorDot`** (ping + dot),
+ * and **`StatusIndicatorLabel`** (muted text). Colors use Wheelhouse semantic tokens.
+ *
+ * @packageDocumentation
+ */
+import type { ComponentPropsWithoutRef } from 'react';
+/** Semantic states for {@link StatusIndicatorDot}. */
+export type StatusIndicatorState = 'active' | 'down' | 'fixing' | 'idle';
+/**
+ * Props for {@link StatusIndicatorDot}.
+ */
+export interface StatusIndicatorDotProps {
+    /**
+     * Visual state: **`active`**, **`down`**, **`fixing`**, **`idle`**.
+     * Active, down, and fixing show a ping animation; idle is a static dot.
+     */
+    state?: StatusIndicatorState;
+    /**
+     * Dot and ping diameter (defaults to **`sm`**).
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Optional Tailwind class(es) merged onto the solid dot **after** semantic colors.
+     */
+    color?: string;
+    /** Classes on the dot wrapper (`data-slot="status-indicator-dot"`). */
+    className?: string;
+}
+/**
+ * Props for {@link StatusIndicatorLabel}.
+ */
+export type StatusIndicatorLabelProps = ComponentPropsWithoutRef<'span'>;
+/**
+ * Props for {@link StatusIndicator} — a flex row shell; compose with {@link StatusIndicatorDot} and {@link StatusIndicatorLabel}.
+ */
+export type StatusIndicatorProps = ComponentPropsWithoutRef<'div'>;
+/**
+ * Ping + solid dot only. Use inside {@link StatusIndicator} or alone when no label is needed.
+ */
+declare function StatusIndicatorDot({ state, size, color, className }: StatusIndicatorDotProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Muted label text beside the dot. Typically placed after {@link StatusIndicatorDot} inside {@link StatusIndicator}.
+ */
+declare function StatusIndicatorLabel({ className, ...props }: StatusIndicatorLabelProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Flex row container (`gap-2`, `items-center`). Compose with {@link StatusIndicatorDot} and optionally {@link StatusIndicatorLabel}.
+ */
+declare function StatusIndicator({ className, ...props }: StatusIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export { StatusIndicator, StatusIndicatorDot, StatusIndicatorLabel };
+//# sourceMappingURL=status-indicator.d.ts.map

package/dist/components/status-indicator/status-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/status-indicator/status-indicator.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAItD,sDAAsD;AACtD,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEzE;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACpC;;;OAGG;IACH,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,wBAAwB,CAAC,MAAM,CAAC,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;AA4BnE;;GAEG;AACH,iBAAS,kBAAkB,CAAC,EAAE,KAAc,EAAE,IAAW,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,uBAAuB,2CAWrG;AAED;;GAEG;AACH,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,yBAAyB,2CAE/E;AAED;;GAEG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAErE;AAED,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/components/status-indicator/status-indicator.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+const getStateColors = (state) => {
+    switch (state) {
+        case 'active':
+            return { dot: 'bg-success', ping: 'bg-success/50' };
+        case 'down':
+            return { dot: 'bg-destructive-foreground', ping: 'bg-destructive-foreground/45' };
+        case 'fixing':
+            return { dot: 'bg-warning', ping: 'bg-warning/50' };
+        case 'idle':
+        default:
+            return { dot: 'bg-muted-foreground', ping: 'bg-muted-foreground/40' };
+    }
+};
+const getSizeClasses = (size) => {
+    switch (size) {
+        case 'md':
+            return { dot: 'h-3 w-3', ping: 'h-3 w-3' };
+        case 'lg':
+            return { dot: 'h-4 w-4', ping: 'h-4 w-4' };
+        case 'sm':
+        default:
+            return { dot: 'h-2 w-2', ping: 'h-2 w-2' };
+    }
+};
+/**
+ * Ping + solid dot only. Use inside {@link StatusIndicator} or alone when no label is needed.
+ */
+function StatusIndicatorDot({ state = 'idle', size = 'sm', color, className }) {
+    const shouldAnimate = state === 'active' || state === 'fixing' || state === 'down';
+    const colors = getStateColors(state);
+    const sizeClasses = getSizeClasses(size);
+    return (_jsxs("div", { "data-slot": "status-indicator-dot", className: cn('relative flex items-center', className), children: [shouldAnimate && _jsx("span", { className: cn('absolute inline-flex animate-ping rounded-full opacity-75', sizeClasses.ping, colors.ping) }), _jsx("span", { className: cn('relative inline-flex rounded-full', sizeClasses.dot, colors.dot, color) })] }));
+}
+/**
+ * Muted label text beside the dot. Typically placed after {@link StatusIndicatorDot} inside {@link StatusIndicator}.
+ */
+function StatusIndicatorLabel({ className, ...props }) {
+    return _jsx("span", { "data-slot": "status-indicator-label", className: cn('text-sm text-muted-foreground', className), ...props });
+}
+/**
+ * Flex row container (`gap-2`, `items-center`). Compose with {@link StatusIndicatorDot} and optionally {@link StatusIndicatorLabel}.
+ */
+function StatusIndicator({ className, ...props }) {
+    return _jsx("div", { "data-slot": "status-indicator", className: cn('flex items-center gap-2', className), ...props });
+}
+export { StatusIndicator, StatusIndicatorDot, StatusIndicatorLabel };

package/dist/components/status-indicator/status-indicator.stories.d.ts

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const AllStates: Story;
+export declare const Sizes: Story;
+export declare const DotOnly: Story;
+//# sourceMappingURL=status-indicator.stories.d.ts.map

package/dist/components/status-indicator/status-indicator.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator.stories.d.ts","sourceRoot":"","sources":["../../../src/components/status-indicator/status-indicator.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,QAAA,MAAM,IAAI;;;;;;;;;;;CAYM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA+CvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAuCnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC"}

package/dist/components/status-indicator/status-indicator.stories.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StatusIndicator, StatusIndicatorDot, StatusIndicatorLabel } from './status-indicator';
+const meta = {
+    title: 'UI/StatusIndicator',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Compose **StatusIndicator** (flex row) with **StatusIndicatorDot** (ping + dot) and optionally **StatusIndicatorLabel** (muted text). Use the dot alone when no label is needed.',
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    parameters: {
+        docs: {
+            source: {
+                code: `import { StatusIndicator, StatusIndicatorDot, StatusIndicatorLabel } from '@wheelhouse/ui';
+
+<StatusIndicator>
+    <StatusIndicatorDot state="idle" />
+    <StatusIndicatorLabel>Status</StatusIndicatorLabel>
+</StatusIndicator>`,
+            },
+        },
+    },
+    render: () => (_jsxs(StatusIndicator, { children: [_jsx(StatusIndicatorDot, { state: "idle" }), _jsx(StatusIndicatorLabel, { children: "Status" })] })),
+};
+export const AllStates = {
+    parameters: {
+        docs: {
+            source: {
+                code: `import { StatusIndicator, StatusIndicatorDot, StatusIndicatorLabel } from '@wheelhouse/ui';
+
+<div className="flex flex-col gap-4">
+    <StatusIndicator>
+        <StatusIndicatorDot state="active" />
+        <StatusIndicatorLabel>Active</StatusIndicatorLabel>
+    </StatusIndicator>
+    <StatusIndicator>
+        <StatusIndicatorDot state="fixing" />
+        <StatusIndicatorLabel>Fixing</StatusIndicatorLabel>
+    </StatusIndicator>
+    <StatusIndicator>
+        <StatusIndicatorDot state="down" />
+        <StatusIndicatorLabel>Down</StatusIndicatorLabel>
+    </StatusIndicator>
+    <StatusIndicator>
+        <StatusIndicatorDot state="idle" />
+        <StatusIndicatorLabel>Idle</StatusIndicatorLabel>
+    </StatusIndicator>
+</div>`,
+            },
+        },
+    },
+    render: () => (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs(StatusIndicator, { children: [_jsx(StatusIndicatorDot, { state: "active" }), _jsx(StatusIndicatorLabel, { children: "Active" })] }), _jsxs(StatusIndicator, { children: [_jsx(StatusIndicatorDot, { state: "fixing" }), _jsx(StatusIndicatorLabel, { children: "Fixing" })] }), _jsxs(StatusIndicator, { children: [_jsx(StatusIndicatorDot, { state: "down" }), _jsx(StatusIndicatorLabel, { children: "Down" })] }), _jsxs(StatusIndicator, { children: [_jsx(StatusIndicatorDot, { state: "idle" }), _jsx(StatusIndicatorLabel, { children: "Idle" })] })] })),
+};
+export const Sizes = {
+    parameters: {
+        docs: {
+            source: {
+                code: `import { StatusIndicator, StatusIndicatorDot, StatusIndicatorLabel } from '@wheelhouse/ui';
+
+<div className="flex items-end gap-6">
+    <StatusIndicator>
+        <StatusIndicatorDot state="active" size="sm" />
+        <StatusIndicatorLabel>Small</StatusIndicatorLabel>
+    </StatusIndicator>
+    <StatusIndicator>
+        <StatusIndicatorDot state="active" size="md" />
+        <StatusIndicatorLabel>Medium</StatusIndicatorLabel>
+    </StatusIndicator>
+    <StatusIndicator>
+        <StatusIndicatorDot state="active" size="lg" />
+        <StatusIndicatorLabel>Large</StatusIndicatorLabel>
+    </StatusIndicator>
+</div>`,
+            },
+        },
+    },
+    render: () => (_jsxs("div", { className: "flex items-end gap-6", children: [_jsxs(StatusIndicator, { children: [_jsx(StatusIndicatorDot, { state: "active", size: "sm" }), _jsx(StatusIndicatorLabel, { children: "Small" })] }), _jsxs(StatusIndicator, { children: [_jsx(StatusIndicatorDot, { state: "active", size: "md" }), _jsx(StatusIndicatorLabel, { children: "Medium" })] }), _jsxs(StatusIndicator, { children: [_jsx(StatusIndicatorDot, { state: "active", size: "lg" }), _jsx(StatusIndicatorLabel, { children: "Large" })] })] })),
+};
+export const DotOnly = {
+    parameters: {
+        docs: {
+            description: { story: 'Use **StatusIndicatorDot** without the shell when the dot sits inside another control (e.g. button, table cell).' },
+            source: {
+                code: `import { StatusIndicatorDot } from '@wheelhouse/ui';
+
+<StatusIndicatorDot state="active" />`,
+            },
+        },
+    },
+    render: () => _jsx(StatusIndicatorDot, { state: "active" }),
+};