@miethe/ui 0.2.0

package/dist/primitives/SearchablePickerDialog.js

@@ -0,0 +1,78 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Search, CheckSquare, Square } from 'lucide-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, } from './Dialog';
+import { Input } from './Input';
+import { cn } from './utils';
+function SearchablePickerDialogInner(props, _ref) {
+    const { open, onOpenChange, title, searchPlaceholder = 'Search…', emptyMessage = 'No items found', items, renderItem, getItemId, getItemLabel, onConfirm, onCancel, isLoading = false, } = props;
+    const [searchQuery, setSearchQuery] = React.useState('');
+    const [selectedIds, setSelectedIds] = React.useState(new Set());
+    // Reset state when dialog opens
+    React.useEffect(() => {
+        if (open) {
+            setSearchQuery('');
+            setSelectedIds(new Set());
+        }
+    }, [open]);
+    const filteredItems = React.useMemo(() => {
+        if (!searchQuery.trim())
+            return items;
+        const lower = searchQuery.toLowerCase();
+        return items.filter((item) => getItemLabel(item).toLowerCase().includes(lower));
+    }, [items, searchQuery, getItemLabel]);
+    const allFilteredIds = React.useMemo(() => filteredItems.map(getItemId), [filteredItems, getItemId]);
+    const allSelected = allFilteredIds.length > 0 && allFilteredIds.every((id) => selectedIds.has(id));
+    const toggleItem = React.useCallback((id) => {
+        setSelectedIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                next.add(id);
+            }
+            return next;
+        });
+    }, []);
+    const selectAll = React.useCallback(() => {
+        setSelectedIds((prev) => {
+            const next = new Set(prev);
+            allFilteredIds.forEach((id) => next.add(id));
+            return next;
+        });
+    }, [allFilteredIds]);
+    const clearAll = React.useCallback(() => {
+        setSelectedIds((prev) => {
+            const next = new Set(prev);
+            allFilteredIds.forEach((id) => next.delete(id));
+            return next;
+        });
+    }, [allFilteredIds]);
+    const handleConfirm = React.useCallback(() => {
+        onConfirm(Array.from(selectedIds));
+    }, [selectedIds, onConfirm]);
+    const handleCancel = React.useCallback(() => {
+        onCancel();
+    }, [onCancel]);
+    const handleKeyDown = React.useCallback((event) => {
+        if (event.key === 'Escape') {
+            handleCancel();
+        }
+    }, [handleCancel]);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "flex max-h-[80vh] w-full max-w-md flex-col gap-0 p-0", onKeyDown: handleKeyDown, children: [_jsx(DialogHeader, { className: "border-b px-6 py-4", children: _jsx(DialogTitle, { children: title }) }), _jsx("div", { className: "border-b px-4 py-3", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { type: "text", placeholder: searchPlaceholder, value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "pl-9", "aria-label": searchPlaceholder, autoFocus: true })] }) }), !isLoading && filteredItems.length > 0 && (_jsxs("div", { className: "flex items-center gap-2 border-b px-4 py-2", children: [_jsx("button", { type: "button", onClick: allSelected ? clearAll : selectAll, className: "text-xs font-medium text-muted-foreground underline-offset-2 hover:text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: allSelected ? 'Clear all' : 'Select all' }), selectedIds.size > 0 && (_jsxs("span", { className: "ml-auto text-xs text-muted-foreground", children: [selectedIds.size, " selected"] }))] })), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-2", role: "list", "aria-label": title, children: isLoading ? (_jsxs("div", { className: "flex items-center justify-center py-8 text-sm text-muted-foreground", children: [_jsx("span", { "aria-hidden": "true", className: "mr-2 h-4 w-4 animate-spin rounded-full border-2 border-muted-foreground/30 border-t-muted-foreground" }), "Loading\u2026"] })) : filteredItems.length === 0 ? (_jsx("p", { className: "py-8 text-center text-sm text-muted-foreground", children: emptyMessage })) : (filteredItems.map((item) => {
+                        const id = getItemId(item);
+                        const isSelected = selectedIds.has(id);
+                        return (_jsxs("div", { role: "listitem", className: cn('flex cursor-pointer items-center gap-3 rounded-md px-2 py-2 text-sm transition-colors', 'hover:bg-accent hover:text-accent-foreground', isSelected && 'bg-accent/50'), onClick: () => toggleItem(id), onKeyDown: (e) => {
+                                if (e.key === ' ' || e.key === 'Enter') {
+                                    e.preventDefault();
+                                    toggleItem(id);
+                                }
+                            }, tabIndex: 0, "aria-selected": isSelected, children: [isSelected ? (_jsx(CheckSquare, { className: "h-4 w-4 shrink-0 text-primary", "aria-hidden": "true" })) : (_jsx(Square, { className: "h-4 w-4 shrink-0 text-muted-foreground", "aria-hidden": "true" })), _jsx("span", { className: "min-w-0 flex-1", children: renderItem(item) })] }, id));
+                    })) }), _jsxs(DialogFooter, { className: "border-t px-6 py-4", children: [_jsx("button", { type: "button", onClick: handleCancel, className: cn('inline-flex h-9 items-center justify-center rounded-md border border-input px-4 text-sm font-medium', 'bg-background hover:bg-accent hover:text-accent-foreground', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', 'transition-colors'), children: "Cancel" }), _jsxs("button", { type: "button", onClick: handleConfirm, disabled: selectedIds.size === 0, className: cn('inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium', 'bg-primary text-primary-foreground hover:bg-primary/90', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50', 'transition-colors'), children: ["Confirm", selectedIds.size > 0 && (_jsxs("span", { className: "ml-1.5 tabular-nums", children: ["(", selectedIds.size, ")"] }))] })] })] }) }));
+}
+// Generic forwardRef workaround — same pattern as SearchableCombobox
+const SearchablePickerDialog = React.forwardRef(SearchablePickerDialogInner);
+export { SearchablePickerDialog };
+//# sourceMappingURL=SearchablePickerDialog.js.map

package/dist/primitives/SearchablePickerDialog.js.map

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

package/dist/primitives/StatusBadge.d.ts

@@ -0,0 +1,21 @@
+import type { BadgeProps } from './Badge';
+export interface StatusBadgeProps extends Omit<BadgeProps, 'variant' | 'children'> {
+    /** The lifecycle status to display (e.g. "draft", "published", "deprecated"). */
+    status: string;
+    /**
+     * Optional map from status string to Badge variant.
+     * Merged on top of the default map; unknown statuses fall back to "outline".
+     */
+    statusColorMap?: Record<string, string>;
+}
+/**
+ * StatusBadge — a thin wrapper around Badge that maps a lifecycle status string
+ * to a variant using a configurable color map.
+ *
+ * @example
+ * <StatusBadge status="draft" />
+ * <StatusBadge status="active" statusColorMap={{ active: 'default' }} />
+ */
+declare function StatusBadge({ status, statusColorMap, className, ...rest }: StatusBadgeProps): import("react/jsx-runtime").JSX.Element;
+export { StatusBadge };
+//# sourceMappingURL=StatusBadge.d.ts.map

package/dist/primitives/StatusBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../src/primitives/StatusBadge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAW1C,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,UAAU,CAAC;IAChD,iFAAiF;IACjF,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACzC;AAED;;;;;;;GAOG;AACH,iBAAS,WAAW,CAAC,EACnB,MAAM,EACN,cAAc,EACd,SAAS,EACT,GAAG,IAAI,EACR,EAAE,gBAAgB,2CAalB;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/primitives/StatusBadge.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge } from './Badge';
+const DEFAULT_STATUS_COLOR_MAP = {
+    draft: 'secondary',
+    published: 'default',
+    deprecated: 'destructive',
+};
+/**
+ * StatusBadge — a thin wrapper around Badge that maps a lifecycle status string
+ * to a variant using a configurable color map.
+ *
+ * @example
+ * <StatusBadge status="draft" />
+ * <StatusBadge status="active" statusColorMap={{ active: 'default' }} />
+ */
+function StatusBadge({ status, statusColorMap, className, ...rest }) {
+    const map = statusColorMap
+        ? { ...DEFAULT_STATUS_COLOR_MAP, ...statusColorMap }
+        : DEFAULT_STATUS_COLOR_MAP;
+    const variant = map[status] ?? 'outline';
+    const displayText = status.charAt(0).toUpperCase() + status.slice(1);
+    return (_jsx(Badge, { variant: variant, className: className, ...rest, children: displayText }));
+}
+export { StatusBadge };
+//# sourceMappingURL=StatusBadge.js.map

package/dist/primitives/StatusBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.js","sourceRoot":"","sources":["../../src/primitives/StatusBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAMhC,MAAM,wBAAwB,GAAiC;IAC7D,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,aAAa;CAC1B,CAAC;AAaF;;;;;;;GAOG;AACH,SAAS,WAAW,CAAC,EACnB,MAAM,EACN,cAAc,EACd,SAAS,EACT,GAAG,IAAI,EACU;IACjB,MAAM,GAAG,GAAG,cAAc;QACxB,CAAC,CAAC,EAAE,GAAG,wBAAwB,EAAE,GAAG,cAAc,EAAE;QACpD,CAAC,CAAC,wBAAwB,CAAC;IAE7B,MAAM,OAAO,GAAI,GAAG,CAAC,MAAM,CAA8B,IAAI,SAAS,CAAC;IACvE,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAErE,OAAO,CACL,KAAC,KAAK,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,KAAM,IAAI,YACpD,WAAW,GACN,CACT,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/primitives/TabNavigation.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Tab Navigation Component
+ *
+ * A styled tab list for modal tabs with underline style (not rounded).
+ * Uses Radix UI Tabs primitives with custom styling for consistent modal navigation.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Tabs value={activeTab} onValueChange={setActiveTab}>
+ *   <TabNavigation
+ *     tabs={[
+ *       { value: 'overview', label: 'Overview' },
+ *       { value: 'settings', label: 'Settings' },
+ *     ]}
+ *   />
+ *   <TabsContent value="overview">...</TabsContent>
+ *   <TabsContent value="settings">...</TabsContent>
+ * </Tabs>
+ * ```
+ *
+ * @example With icons and badges
+ * ```tsx
+ * <TabNavigation
+ *   tabs={[
+ *     { value: 'overview', label: 'Overview', icon: Info },
+ *     { value: 'files', label: 'Files', icon: FileText, badge: 12 },
+ *     { value: 'disabled', label: 'Coming Soon', disabled: true },
+ *   ]}
+ * />
+ * ```
+ */
+import * as React from 'react';
+export interface Tab {
+    /** Unique identifier for the tab */
+    value: string;
+    /** Display label for the tab */
+    label: string;
+    /** Optional icon component */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Optional badge count to display */
+    badge?: number;
+    /** Whether the tab is disabled */
+    disabled?: boolean;
+}
+export interface TabNavigationProps {
+    /** Array of tab configurations */
+    tabs: Tab[];
+    /** Additional CSS classes for the TabsList container */
+    className?: string;
+    /** Accessible label for the tab list */
+    ariaLabel?: string;
+}
+/**
+ * TabNavigation - Underline-styled tab list for modals
+ *
+ * Renders a horizontal tab list with underline styling instead of
+ * the default rounded pill style. Supports icons, badges, and disabled states.
+ *
+ * Must be used within a Tabs component from @radix-ui/react-tabs.
+ *
+ * @param tabs - Array of tab configurations
+ * @param className - Additional CSS classes for the container
+ * @param ariaLabel - Accessible label for the tab list
+ */
+export declare function TabNavigation({ tabs, className, ariaLabel, }: TabNavigationProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TabNavigation.d.ts.map

package/dist/primitives/TabNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNavigation.d.ts","sourceRoot":"","sources":["../../src/primitives/TabNavigation.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,WAAW,GAAG;IAClB,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,kCAAkC;IAClC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,SAAS,EACT,SAA6B,GAC9B,EAAE,kBAAkB,2CAsDpB"}

package/dist/primitives/TabNavigation.js

@@ -0,0 +1,74 @@
+/**
+ * Tab Navigation Component
+ *
+ * A styled tab list for modal tabs with underline style (not rounded).
+ * Uses Radix UI Tabs primitives with custom styling for consistent modal navigation.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Tabs value={activeTab} onValueChange={setActiveTab}>
+ *   <TabNavigation
+ *     tabs={[
+ *       { value: 'overview', label: 'Overview' },
+ *       { value: 'settings', label: 'Settings' },
+ *     ]}
+ *   />
+ *   <TabsContent value="overview">...</TabsContent>
+ *   <TabsContent value="settings">...</TabsContent>
+ * </Tabs>
+ * ```
+ *
+ * @example With icons and badges
+ * ```tsx
+ * <TabNavigation
+ *   tabs={[
+ *     { value: 'overview', label: 'Overview', icon: Info },
+ *     { value: 'files', label: 'Files', icon: FileText, badge: 12 },
+ *     { value: 'disabled', label: 'Coming Soon', disabled: true },
+ *   ]}
+ * />
+ * ```
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from './utils';
+import { TabsList, TabsTrigger } from './Tabs';
+import { Badge } from './Badge';
+// ============================================================================
+// Component
+// ============================================================================
+/**
+ * TabNavigation - Underline-styled tab list for modals
+ *
+ * Renders a horizontal tab list with underline styling instead of
+ * the default rounded pill style. Supports icons, badges, and disabled states.
+ *
+ * Must be used within a Tabs component from @radix-ui/react-tabs.
+ *
+ * @param tabs - Array of tab configurations
+ * @param className - Additional CSS classes for the container
+ * @param ariaLabel - Accessible label for the tab list
+ */
+export function TabNavigation({ tabs, className, ariaLabel = 'Navigation tabs', }) {
+    return (_jsx(TabsList, { className: cn(
+        // Override default rounded/background styling for underline style
+        'h-auto w-full justify-start gap-0 rounded-none border-b bg-transparent p-0', className), "aria-label": ariaLabel, children: tabs.map((tab) => {
+            const Icon = tab.icon;
+            return (_jsxs(TabsTrigger, { value: tab.value, disabled: tab.disabled, className: cn(
+                // Base styles
+                'relative inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium', 
+                // Remove default rounded styling
+                'rounded-none border-b-2 border-transparent bg-transparent shadow-none', 
+                // Active state - underline instead of background
+                'data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none', 
+                // Inactive/hover states
+                'text-muted-foreground hover:text-foreground', 
+                // Disabled state
+                'disabled:cursor-not-allowed disabled:opacity-50', 
+                // Focus ring
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'), "aria-label": tab.badge !== undefined && tab.badge > 0
+                    ? `${tab.label}, ${tab.badge} items`
+                    : undefined, children: [Icon && _jsx(Icon, { className: "h-4 w-4 flex-shrink-0", "aria-hidden": "true" }), _jsx("span", { children: tab.label }), typeof tab.badge === 'number' && tab.badge > 0 && (_jsx(Badge, { variant: "secondary", className: "ml-1 h-5 min-w-[1.25rem] px-1.5 text-xs", "aria-hidden": "true", children: tab.badge > 99 ? '99+' : tab.badge }))] }, tab.value));
+        }) }));
+}
+//# sourceMappingURL=TabNavigation.js.map

package/dist/primitives/TabNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNavigation.js","sourceRoot":"","sources":["../../src/primitives/TabNavigation.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,YAAY,CAAC;;AAGb,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AA4BhC,+EAA+E;AAC/E,YAAY;AACZ,+EAA+E;AAE/E;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,SAAS,EACT,SAAS,GAAG,iBAAiB,GACV;IACnB,OAAO,CACL,KAAC,QAAQ,IACP,SAAS,EAAE,EAAE;QACX,kEAAkE;QAClE,4EAA4E,EAC5E,SAAS,CACV,gBACW,SAAS,YAEpB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YAChB,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;YAEtB,OAAO,CACL,MAAC,WAAW,IAEV,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,QAAQ,EAAE,GAAG,CAAC,QAAQ,EACtB,SAAS,EAAE,EAAE;gBACX,cAAc;gBACd,yEAAyE;gBACzE,iCAAiC;gBACjC,uEAAuE;gBACvE,iDAAiD;gBACjD,2IAA2I;gBAC3I,wBAAwB;gBACxB,6CAA6C;gBAC7C,iBAAiB;gBACjB,iDAAiD;gBACjD,aAAa;gBACb,qGAAqG,CACtG,gBAEC,GAAG,CAAC,KAAK,KAAK,SAAS,IAAI,GAAG,CAAC,KAAK,GAAG,CAAC;oBACtC,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK,QAAQ;oBACpC,CAAC,CAAC,SAAS,aAGd,IAAI,IAAI,KAAC,IAAI,IAAC,SAAS,EAAC,uBAAuB,iBAAa,MAAM,GAAG,EACtE,yBAAO,GAAG,CAAC,KAAK,GAAQ,EACvB,OAAO,GAAG,CAAC,KAAK,KAAK,QAAQ,IAAI,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,CACjD,KAAC,KAAK,IACJ,OAAO,EAAC,WAAW,EACnB,SAAS,EAAC,yCAAyC,iBACvC,MAAM,YAEjB,GAAG,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,GAC7B,CACT,KAjCI,GAAG,CAAC,KAAK,CAkCF,CACf,CAAC;QACJ,CAAC,CAAC,GACO,CACZ,CAAC;AACJ,CAAC"}

package/dist/primitives/Tabs.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsList, TabsTrigger, TabsContent };
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/primitives/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/primitives/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAItD,QAAA,MAAM,IAAI,gGAAqB,CAAC;AAEhC,QAAA,MAAM,QAAQ,uJAYZ,CAAC;AAGH,QAAA,MAAM,WAAW,gKAYf,CAAC;AAGH,QAAA,MAAM,WAAW,0JAYf,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}

package/dist/primitives/Tabs.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from './utils';
+const Tabs = TabsPrimitive.Root;
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn('inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground', className), ...props })));
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn('inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow', className), ...props })));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className), ...props })));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+export { Tabs, TabsList, TabsTrigger, TabsContent };
+//# sourceMappingURL=Tabs.js.map

package/dist/primitives/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/primitives/Tabs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAE7B,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;AAEhC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAG/B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,KAAC,aAAa,CAAC,IAAI,IACjB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,2FAA2F,EAC3F,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC,CAAC;AACH,QAAQ,CAAC,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;AAEtD,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,KAAC,aAAa,CAAC,OAAO,IACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,gYAAgY,EAChY,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC,OAAO,CAAC,WAAW,CAAC;AAE5D,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,KAAC,aAAa,CAAC,OAAO,IACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,iIAAiI,EACjI,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC,OAAO,CAAC,WAAW,CAAC;AAE5D,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}

package/dist/primitives/Tooltip.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/primitives/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/primitives/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAI5D,QAAA,MAAM,eAAe,iDAA4B,CAAC;AAElD,QAAA,MAAM,OAAO,yCAAwB,CAAC;AAEtC,QAAA,MAAM,cAAc,gHAA2B,CAAC;AAEhD,QAAA,MAAM,cAAc,gKAalB,CAAC;AAGH,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}

package/dist/primitives/Tooltip.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from './utils';
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn('z-50 origin-[--radix-tooltip-content-transform-origin] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className), ...props })));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+//# sourceMappingURL=Tooltip.js.map

package/dist/primitives/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/primitives/Tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAE7B,MAAM,eAAe,GAAG,gBAAgB,CAAC,QAAQ,CAAC;AAElD,MAAM,OAAO,GAAG,gBAAgB,CAAC,IAAI,CAAC;AAEtC,MAAM,cAAc,GAAG,gBAAgB,CAAC,OAAO,CAAC;AAEhD,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAGrC,CAAC,EAAE,SAAS,EAAE,UAAU,GAAG,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClD,KAAC,gBAAgB,CAAC,OAAO,IACvB,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,EAAE,CACX,sbAAsb,EACtb,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC,CAAC;AACH,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,WAAW,CAAC;AAElE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}

package/dist/primitives/VerticalTabNavigation.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Vertical Tab Navigation Component
+ *
+ * A standalone vertical tab list with keyboard navigation and ARIA attributes.
+ * Unlike TabNavigation (which wraps Radix TabsList), this component manages its
+ * own focus and activation logic so it can be used outside a Radix Tabs context —
+ * useful for sidebar navigation panels where the tab panel is rendered elsewhere.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [activeTab, setActiveTab] = React.useState('overview');
+ *
+ * <VerticalTabNavigation
+ *   tabs={[
+ *     { value: 'overview', label: 'Overview', icon: Info },
+ *     { value: 'settings', label: 'Settings', icon: Settings },
+ *   ]}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ *   ariaLabel="Artifact detail navigation"
+ * />
+ * ```
+ *
+ * @example With badges and disabled tabs
+ * ```tsx
+ * <VerticalTabNavigation
+ *   tabs={[
+ *     { value: 'files', label: 'Files', icon: FileText, badge: 12 },
+ *     { value: 'preview', label: 'Coming Soon', disabled: true },
+ *   ]}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ * />
+ * ```
+ */
+import * as React from 'react';
+export type { Tab } from './TabNavigation';
+import type { Tab } from './TabNavigation';
+export interface VerticalTabNavigationProps {
+    /** Array of tab configurations */
+    tabs: Tab[];
+    /** Currently active tab value */
+    activeTab: string;
+    /** Callback invoked when the user selects a tab */
+    onTabChange: (tabId: string) => void;
+    /** Additional CSS classes for the container */
+    className?: string;
+    /** Accessible label for the tab list */
+    ariaLabel?: string;
+}
+/** Imperative handle exposed via forwardRef for programmatic focus control. */
+export interface VerticalTabNavigationHandle {
+    /** Focus the first enabled tab button without changing the active tab. */
+    focusFirstTab: () => void;
+}
+/**
+ * VerticalTabNavigation — forward-ref enabled version of the component.
+ *
+ * Allows consumers to access the imperative handle for programmatic focus control
+ * via the `ref` prop.
+ *
+ * @example
+ * ```tsx
+ * const navRef = React.useRef<VerticalTabNavigationHandle>(null);
+ *
+ * // Focus the first tab when lens changes, without changing activeTab
+ * React.useEffect(() => {
+ *   navRef.current?.focusFirstTab();
+ * }, [activeLens]);
+ *
+ * return <VerticalTabNavigation ref={navRef} tabs={tabs} activeTab={activeTab} ... />
+ * ```
+ */
+export declare const VerticalTabNavigation: React.ForwardRefExoticComponent<VerticalTabNavigationProps & React.RefAttributes<VerticalTabNavigationHandle>>;
+//# sourceMappingURL=VerticalTabNavigation.d.ts.map

package/dist/primitives/VerticalTabNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalTabNavigation.d.ts","sourceRoot":"","sources":["../../src/primitives/VerticalTabNavigation.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,YAAY,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAE3C,MAAM,WAAW,0BAA0B;IACzC,kCAAkC;IAClC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,iCAAiC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,+EAA+E;AAC/E,MAAM,WAAW,2BAA2B;IAC1C,0EAA0E;IAC1E,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AA8KD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,qBAAqB,gHAA6B,CAAC"}

package/dist/primitives/VerticalTabNavigation.js

@@ -0,0 +1,166 @@
+/**
+ * Vertical Tab Navigation Component
+ *
+ * A standalone vertical tab list with keyboard navigation and ARIA attributes.
+ * Unlike TabNavigation (which wraps Radix TabsList), this component manages its
+ * own focus and activation logic so it can be used outside a Radix Tabs context —
+ * useful for sidebar navigation panels where the tab panel is rendered elsewhere.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [activeTab, setActiveTab] = React.useState('overview');
+ *
+ * <VerticalTabNavigation
+ *   tabs={[
+ *     { value: 'overview', label: 'Overview', icon: Info },
+ *     { value: 'settings', label: 'Settings', icon: Settings },
+ *   ]}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ *   ariaLabel="Artifact detail navigation"
+ * />
+ * ```
+ *
+ * @example With badges and disabled tabs
+ * ```tsx
+ * <VerticalTabNavigation
+ *   tabs={[
+ *     { value: 'files', label: 'Files', icon: FileText, badge: 12 },
+ *     { value: 'preview', label: 'Coming Soon', disabled: true },
+ *   ]}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ * />
+ * ```
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from './utils';
+import { Badge } from './Badge';
+// ============================================================================
+// Component
+// ============================================================================
+/**
+ * VerticalTabNavigation — standalone vertical tab list with full keyboard support.
+ *
+ * Implements the WAI-ARIA Tabs pattern with vertical orientation:
+ * - ArrowDown / ArrowUp navigate between enabled tabs (wraps around).
+ * - Home / End jump to first / last enabled tab.
+ * - Focus automatically activates the tab (roving tabindex pattern).
+ * - Tab key exits the tab list entirely (standard browser behavior).
+ *
+ * @param tabs        - Array of tab configurations (value, label, icon, badge, disabled)
+ * @param activeTab   - Controlled active tab value
+ * @param onTabChange - Callback fired when a tab becomes active
+ * @param className   - Additional CSS classes for the container div
+ * @param ariaLabel   - Accessible label for the tab list element
+ *
+ * Exposes a `VerticalTabNavigationHandle` via `forwardRef` with:
+ * - `focusFirstTab()` — moves focus to the first enabled tab without changing
+ *   the active tab value. Useful when the tab list is swapped (e.g. lens change)
+ *   and focus needs to follow the new content.
+ */
+const VerticalTabNavigationInner = React.forwardRef(function VerticalTabNavigation({ tabs, activeTab, onTabChange, className, ariaLabel = 'Navigation tabs', }, ref) {
+    // Refs for each button so we can programmatically move focus.
+    const buttonRefs = React.useRef(new Map());
+    const enabledTabs = React.useMemo(() => tabs.filter((t) => !t.disabled), [tabs]);
+    // Expose imperative handle so parents can focus the first tab on demand
+    // (e.g. when a lens change swaps the visible tab list).
+    React.useImperativeHandle(ref, () => ({
+        focusFirstTab: () => {
+            const first = enabledTabs[0];
+            if (first) {
+                buttonRefs.current.get(first.value)?.focus();
+            }
+        },
+    }), [enabledTabs]);
+    const focusAndActivate = React.useCallback((tabValue) => {
+        onTabChange(tabValue);
+        buttonRefs.current.get(tabValue)?.focus();
+    }, [onTabChange]);
+    // WAI-ARIA Tabs pattern keyboard handler.
+    // Implements arrow key navigation (wraps around), Home/End jumping, and focus-activates
+    // the roving tabindex pattern (only one tab is ever in the tab order at a time).
+    const handleKeyDown = React.useCallback((event, currentValue) => {
+        const currentIndex = enabledTabs.findIndex((t) => t.value === currentValue);
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                const next = enabledTabs[(currentIndex + 1) % enabledTabs.length];
+                if (next)
+                    focusAndActivate(next.value);
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                const prev = enabledTabs[(currentIndex - 1 + enabledTabs.length) % enabledTabs.length];
+                if (prev)
+                    focusAndActivate(prev.value);
+                break;
+            }
+            case 'Home': {
+                event.preventDefault();
+                const first = enabledTabs[0];
+                if (first)
+                    focusAndActivate(first.value);
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                const last = enabledTabs[enabledTabs.length - 1];
+                if (last)
+                    focusAndActivate(last.value);
+                break;
+            }
+            default:
+                break;
+        }
+    }, [enabledTabs, focusAndActivate]);
+    return (_jsx("div", { role: "tablist", "aria-orientation": "vertical", "aria-label": ariaLabel, className: cn('flex flex-col', className), children: tabs.map((tab) => {
+            const Icon = tab.icon;
+            const isActive = tab.value === activeTab;
+            return (_jsxs("button", { ref: (el) => {
+                    if (el) {
+                        buttonRefs.current.set(tab.value, el);
+                    }
+                    else {
+                        buttonRefs.current.delete(tab.value);
+                    }
+                }, role: "tab", "aria-selected": isActive, "aria-controls": `panel-${tab.value}`, "aria-disabled": tab.disabled, tabIndex: isActive ? 0 : -1, disabled: tab.disabled, onClick: () => !tab.disabled && onTabChange(tab.value), onKeyDown: (e) => !tab.disabled && handleKeyDown(e, tab.value), "aria-label": tab.badge !== undefined && tab.badge > 0
+                    ? `${tab.label}, ${tab.badge} items`
+                    : undefined, className: cn(
+                // Base
+                'flex items-center gap-2 px-3 py-2 text-sm rounded-r-md w-full text-left', 
+                // Transition
+                'transition-colors', 
+                // Active state
+                isActive
+                    ? 'border-l-2 border-primary bg-accent text-foreground font-medium'
+                    : 'border-l-2 border-transparent text-muted-foreground hover:bg-accent/50', 
+                // Disabled state
+                tab.disabled && 'cursor-not-allowed opacity-50', 
+                // Focus ring
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'), children: [Icon && _jsx(Icon, { className: "h-4 w-4 flex-shrink-0", "aria-hidden": "true" }), _jsx("span", { className: "flex-1 text-sm", children: tab.label }), typeof tab.badge === 'number' && tab.badge > 0 && (_jsx(Badge, { variant: "secondary", className: "ml-1 h-5 min-w-[1.25rem] px-1.5 text-xs", "aria-hidden": "true", children: tab.badge > 99 ? '99+' : tab.badge }))] }, tab.value));
+        }) }));
+});
+/**
+ * VerticalTabNavigation — forward-ref enabled version of the component.
+ *
+ * Allows consumers to access the imperative handle for programmatic focus control
+ * via the `ref` prop.
+ *
+ * @example
+ * ```tsx
+ * const navRef = React.useRef<VerticalTabNavigationHandle>(null);
+ *
+ * // Focus the first tab when lens changes, without changing activeTab
+ * React.useEffect(() => {
+ *   navRef.current?.focusFirstTab();
+ * }, [activeLens]);
+ *
+ * return <VerticalTabNavigation ref={navRef} tabs={tabs} activeTab={activeTab} ... />
+ * ```
+ */
+export const VerticalTabNavigation = VerticalTabNavigationInner;
+//# sourceMappingURL=VerticalTabNavigation.js.map

package/dist/primitives/VerticalTabNavigation.js.map

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