@wheelhouse/ui 0.1.6 → 0.2.1

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/index.d.ts

@@ -0,0 +1,3 @@
+export { Spinner } from './spinner';
+export type { SpinnerProps } from './spinner';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/spinner/index.js

@@ -0,0 +1 @@
+export { Spinner } from './spinner';

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Loader2 } from 'lucide-react';
+/**
+ * Props for `Spinner`. Accepts standard SVG attributes (via Lucide’s `Loader2`).
+ */
+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).
+ */
+declare function Spinner({ className, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export { Spinner };
+//# sourceMappingURL=spinner.d.ts.map

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

@@ -0,0 +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,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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+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(Loader2, { "data-slot": "spinner", className: cn('size-4 animate-spin', className), role: "status", "aria-label": "Loading", ...props });
+}
+export { Spinner };

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Spinner } from './spinner';
+declare const meta: Meta<typeof Spinner>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Muted: Story;
+export declare const Large: Story;
+//# sourceMappingURL=spinner.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.stories.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAO9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC"}

package/dist/components/spinner/spinner.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Spinner } from './spinner';
+const meta = {
+    title: 'UI/Spinner',
+    component: Spinner,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(Spinner, {}),
+};
+export const Muted = {
+    render: () => _jsx(Spinner, { className: "size-5 text-muted-foreground" }),
+};
+export const Large = {
+    render: () => _jsx(Spinner, { className: "size-8" }),
+};

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" }),
+};

package/dist/components/switch/index.d.ts

@@ -0,0 +1,2 @@
+export { Switch } from './switch';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/switch/index.js

@@ -0,0 +1 @@
+export { Switch } from './switch';

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,13 @@
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
+/**
+ * Props for `Switch`. Inherits additional behavior from
+ * [Base UI Switch](https://base-ui.com/react/components/switch).
+ */
+export type SwitchProps = SwitchPrimitive.Root.Props & {
+    size?: 'sm' | 'default';
+};
+declare function Switch({ className, size, ...props }: SwitchPrimitive.Root.Props & {
+    size?: 'sm' | 'default';
+}): import("react/jsx-runtime").JSX.Element;
+export { Switch };
+//# sourceMappingURL=switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIlE;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CAAE,CAAC;AAEnF,iBAAS,MAAM,CAAC,EACZ,SAAS,EACT,IAAW,EACX,GAAG,KAAK,EACX,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CAC3B,2CAiBA;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/switch/switch.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
+import { cn } from '../../lib/utils';
+function Switch({ className, size = 'sm', ...props }) {
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn('peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50', className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground" }) }));
+}
+export { Switch };