indas-ui 0.0.1 → 0.1.0

package/dist/components/ui/forms/checkbox.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { clsx } from 'clsx';
+import { Check, Minus } from 'lucide-react';
+export const Checkbox = ({ label, className, indeterminate, checked, ...props }) => {
+    const checkboxRef = React.useRef(null);
+    React.useEffect(() => {
+        if (checkboxRef.current) {
+            checkboxRef.current.indeterminate = indeterminate ?? false;
+        }
+    }, [indeterminate]);
+    const isChecked = checked || (checkboxRef.current?.checked ?? false);
+    return (_jsxs("div", { className: "flex items-center", children: [_jsxs("label", { className: "relative inline-flex items-center cursor-pointer", children: [_jsx("input", { ref: checkboxRef, type: "checkbox", checked: checked, className: "sr-only peer", ...props }), _jsx("div", { className: clsx('h-4 w-4 rounded-sm border flex items-center justify-center transition-colors', (isChecked || indeterminate)
+                            ? 'bg-[rgb(var(--color-primary))] border-[rgb(var(--color-primary))]'
+                            : 'border-gray-300 bg-white', className), children: indeterminate ? (_jsx(Minus, { className: "h-3 w-3 text-white", strokeWidth: 3 })) : isChecked ? (_jsx(Check, { className: "h-3 w-3 text-white", strokeWidth: 3 })) : null })] }), label && (_jsx("label", { className: "ml-2 block text-xs text-gray-700", children: label }))] }));
+};

package/dist/components/ui/forms/input.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { LucideIcon } from "lucide-react";
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: React.ReactNode;
+    error?: string | boolean;
+    helper?: string;
+    leftIcon?: LucideIcon;
+    rightIcon?: LucideIcon;
+    onRightIconClick?: () => void;
+    selectOnFocus?: boolean;
+    position?: 'first' | 'middle' | 'last' | 'only';
+    compact?: boolean;
+    trackEdits?: boolean;
+    originalValue?: string | number;
+    isEdited?: boolean;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/components/ui/forms/input.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+const Input = React.forwardRef(({ className, type = "text", label, error, helper, leftIcon: LeftIcon, rightIcon: RightIcon, onRightIconClick, onKeyDown, selectOnFocus = true, onFocus, position, compact = false, trackEdits = false, originalValue, isEdited: externalIsEdited, ...props }, ref) => {
+    const hasError = !!error;
+    const generatedId = React.useId();
+    const inputId = props.id || generatedId;
+    const inputName = props.name || inputId;
+    // Track if field has been edited
+    const [hasBeenEdited, setHasBeenEdited] = React.useState(false);
+    // Determine if field is edited
+    const isEdited = React.useMemo(() => {
+        // If external control is provided, use that
+        if (externalIsEdited !== undefined)
+            return externalIsEdited;
+        // If tracking is enabled and we have an original value
+        if (trackEdits && originalValue !== undefined) {
+            const currentValue = props.value !== undefined ? props.value : props.defaultValue;
+            // Compare values (handle string/number conversion)
+            return String(currentValue) !== String(originalValue) || hasBeenEdited;
+        }
+        return hasBeenEdited;
+    }, [trackEdits, originalValue, props.value, props.defaultValue, externalIsEdited, hasBeenEdited]);
+    // Track onChange to mark as edited
+    const handleChange = (e) => {
+        if (trackEdits) {
+            setHasBeenEdited(true);
+        }
+        props.onChange?.(e);
+    };
+    // Handle focus event to select all text
+    const handleFocus = (e) => {
+        if (selectOnFocus) {
+            e.target.select();
+        }
+        onFocus?.(e);
+    };
+    // Handle key down for number inputs to prevent negative values
+    const handleKeyDown = (e) => {
+        if (type === 'number') {
+            if (e.key === '-' || e.key === '+' || e.key === 'e' || e.key === 'E') {
+                e.preventDefault();
+                return;
+            }
+        }
+        onKeyDown?.(e);
+    };
+    // Compact mode - just return the input without wrapper
+    if (compact) {
+        return (_jsx("input", { id: inputId, name: inputName, type: type, className: cn("flex h-10 w-full border px-3 py-2 text-xs", "bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] placeholder:text-[rgb(var(--fg-subtle))]", "focus:outline-none focus:ring-2 focus:ring-[rgb(var(--color-primary))]/10", "disabled:cursor-not-allowed disabled:opacity-50", "transition-all duration-200", type === "number" && "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", 
+            // Joined group styling
+            position === 'first' && "rounded-l border-r-0", position === 'middle' && "border-r-0", position === 'last' && "rounded-r", position === 'only' && "rounded", !position && "rounded", 
+            // Edited field highlighting
+            isEdited && "bg-[rgb(var(--color-warning-subtle))] border-[rgb(var(--color-warning))]", 
+            // Border color
+            hasError
+                ? "border-[rgb(var(--color-danger))] focus:border-[rgb(var(--color-danger))]"
+                : isEdited
+                    ? "border-[rgb(var(--color-warning))] focus:border-[rgb(var(--color-warning))] focus:ring-[rgb(var(--color-warning))]/20 focus:z-10"
+                    : "border-[rgb(var(--bd-default))] focus:border-[rgb(var(--color-primary))] focus:z-10", className), ref: ref, onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, min: type === 'number' ? 0 : undefined, ...props }));
+    }
+    // Standard mode with wrapper
+    return (_jsxs("div", { className: "w-full", children: [label && (_jsx("label", { htmlFor: inputId, className: "block text-xs font-medium text-[rgb(var(--fg-default))] mb-1.5", suppressHydrationWarning: true, children: label })), _jsxs("div", { className: "relative", children: [LeftIcon && (_jsx("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2", children: _jsx(LeftIcon, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" }) })), _jsx("input", { id: inputId, name: inputName, type: type, className: cn("flex h-10 w-full rounded-md border px-3 py-2 text-xs", "bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] placeholder:text-[rgb(var(--fg-subtle))]", "focus:outline-none focus:ring-2 focus:ring-[rgb(var(--color-primary))]/10", "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[rgb(var(--bg-subtle))]", "transition-all duration-200", type === "number" && "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", LeftIcon && "pl-10", RightIcon && "pr-10", 
+                        // Edited field highlighting
+                        isEdited && !props.disabled && "bg-[rgb(var(--color-warning-subtle))] border-[rgb(var(--color-warning))]", 
+                        // Border color
+                        hasError
+                            ? "border-[rgb(var(--color-danger))] focus:border-[rgb(var(--color-danger))]"
+                            : isEdited
+                                ? "border-[rgb(var(--color-warning))] focus:border-[rgb(var(--color-warning))] focus:ring-[rgb(var(--color-warning))]/20"
+                                : "border-[rgb(var(--bd-default))] focus:border-[rgb(var(--color-primary))]", className), ref: ref, suppressHydrationWarning: label ? true : false, onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, min: type === 'number' ? 0 : undefined, ...props }), RightIcon && (_jsx("div", { className: cn("absolute right-3 top-1/2 transform -translate-y-1/2", onRightIconClick && !props.disabled && "cursor-pointer", props.disabled && "opacity-50 cursor-not-allowed"), onClick: props.disabled ? undefined : onRightIconClick, children: _jsx(RightIcon, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" }) }))] }), error && typeof error === 'string' && (_jsx("p", { className: "mt-1 text-sm text-[rgb(var(--color-danger))]", children: error })), helper && !error && (_jsx("p", { className: "mt-1 text-sm text-[rgb(var(--fg-muted))]", children: helper }))] }));
+});
+Input.displayName = "Input";
+export { Input };

package/dist/components/ui/forms/label.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    children: React.ReactNode;
+}
+export declare const Label: React.FC<LabelProps>;

package/dist/components/ui/forms/label.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx } from 'clsx';
+export const Label = ({ className, children, ...props }) => {
+    return (_jsx("label", { className: clsx('block text-xs font-medium text-[rgb(var(--fg-default))] mb-1', className), ...props, children: children }));
+};

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+interface SwitchProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export { Switch };

package/dist/components/ui/forms/switch.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+const Switch = React.forwardRef(({ className, checked, defaultChecked, onCheckedChange, disabled, ...props }, ref) => {
+    const [isChecked, setIsChecked] = React.useState(defaultChecked ?? false);
+    const checkedState = checked !== undefined ? checked : isChecked;
+    const handleClick = () => {
+        if (disabled)
+            return;
+        const newValue = !checkedState;
+        if (checked === undefined) {
+            setIsChecked(newValue);
+        }
+        onCheckedChange?.(newValue);
+    };
+    return (_jsx("button", { type: "button", role: "switch", "aria-checked": checkedState, disabled: disabled, onClick: handleClick, ref: ref, className: cn("peer inline-flex h-4 w-7 !min-h-0 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50", checkedState
+            ? "bg-[rgb(var(--color-primary))] hover:opacity-90"
+            : "bg-gray-300 hover:bg-gray-400", className), ...props, children: _jsx("div", { className: cn("pointer-events-none block h-3 w-3 rounded-full bg-white shadow-lg ring-0 transition-transform", checkedState ? "translate-x-3" : "translate-x-0") }) }));
+});
+Switch.displayName = "Switch";
+export { Switch };

package/dist/components/ui/forms/textarea.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+    helper?: string;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

package/dist/components/ui/forms/textarea.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+const Textarea = React.forwardRef(({ className, label, error, helper, ...props }, ref) => {
+    const hasError = !!error;
+    const generatedId = React.useId();
+    const textareaId = props.id || generatedId;
+    const textareaName = props.name || textareaId;
+    return (_jsxs("div", { className: "w-full", children: [label && (_jsx("label", { htmlFor: textareaId, className: "block text-sm font-medium text-[rgb(var(--fg-default))] mb-2", children: label })), _jsx("textarea", { id: textareaId, name: textareaName, ref: ref, className: cn("flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", hasError && "border-[rgb(var(--color-error))] focus-visible:ring-[rgb(var(--color-error))]", className), ...props }), helper && !error && (_jsx("p", { className: "mt-1.5 text-xs text-[rgb(var(--fg-muted))]", children: helper })), error && (_jsx("p", { className: "mt-1.5 text-xs text-[rgb(var(--color-error))]", children: error }))] }));
+});
+Textarea.displayName = "Textarea";
+export { Textarea };

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

@@ -0,0 +1,49 @@
+export { Button, InputButton, CheckboxButton } from './buttons/button.js';
+export type { ButtonProps, InputButtonProps, CheckboxButtonProps } from './buttons/button.js';
+export { Input } from './forms/input.js';
+export type { InputProps } from './forms/input.js';
+export { Checkbox } from './forms/checkbox.js';
+export type { CheckboxProps } from './forms/checkbox.js';
+export { Label } from './forms/label.js';
+export { Textarea } from './forms/textarea.js';
+export { Switch } from './forms/switch.js';
+export { Dropdown } from '../forms/dropdown/index.js';
+export type { DropdownProps, DropdownOption } from '../forms/dropdown/index.js';
+export { UnifiedCurrencyDropdown } from '../forms/unified-currency-dropdown.js';
+export type { UnifiedCurrencyDropdownProps } from '../forms/unified-currency-dropdown.js';
+export { DatePicker } from '../forms/date-picker/index.js';
+export type { DatePickerProps, DateRange } from '../forms/date-picker/index.js';
+export { FileAttachment } from '../forms/file-attachment/index.js';
+export type { FileAttachmentProps, AttachedFile } from '../forms/file-attachment/index.js';
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './display/card.js';
+export type { CardProps } from './display/card.js';
+export { StatsCard, StatsGrid } from './display/stats-card.js';
+export type { StatsCardProps, StatsGridProps } from './display/stats-card.js';
+export { Text } from './display/text.js';
+export type { TextProps } from './display/text.js';
+export { Separator } from './display/separator.js';
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './display/collapsible.js';
+export { FormToggle } from './form-toggle.js';
+export type { FormToggleProps } from './form-toggle.js';
+export { Badge, FilterBadge, FilterBadgeGroup } from './feedback/badge.js';
+export type { BadgeProps, FilterBadgeProps, FilterBadgeVariant, FilterBadgeItem, FilterBadgeGroupProps } from './feedback/badge.js';
+export { ReminderButton } from './feedback/reminder-button.js';
+export type { ReminderButtonProps } from './feedback/reminder-button.js';
+export { BooleanBadge } from './display/boolean-badge.js';
+export type { BooleanBadgeProps } from './display/boolean-badge.js';
+export { Alert, AlertTitle, AlertDescription } from './feedback/alert.js';
+export { Progress } from './feedback/progress.js';
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipDetailed, TooltipProvider } from './feedback/tooltip.js';
+export { Skeleton, SkeletonText, SkeletonFormFields } from './feedback/skeleton.js';
+export { SkeletonTable } from './feedback/skeleton-table.js';
+export { Modal, ModalPortal, ModalOverlay, ModalClose, ModalTrigger, ModalContent, ModalHeader, ModalFooter, ModalTitle, ModalDescription, Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from '../modals/Modal.js';
+export { useModalAlert, ModalAlert } from '../modals/modal-alert.js';
+export type { AlertAction } from '../modals/modal-alert.js';
+export { Tabs } from './navigation/tabs.js';
+export type { TabsProps, TabItem } from './navigation/tabs.js';
+export { HeaderSteps } from './navigation/header-steps.js';
+export type { HeaderStepItem } from './navigation/header-steps.js';
+export { TabsRoot as RadixTabs, TabsList, TabsTrigger, TabsContent } from './navigation/tabs.js';
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup } from './navigation/dropdown-menu.js';
+export { Loading, LoadingStates, LoadingOverlay, PageLoading, NavigationProgress } from './overlays/loading.js';
+export type { LoadingProps, PageLoadingProps } from './overlays/loading.js';

package/dist/components/ui/index.js

@@ -0,0 +1,62 @@
+'use client';
+// UI Components - Centralized exports with organized folder structure
+// ============================================================================
+// FORMS
+// ============================================================================
+export { Button, InputButton, CheckboxButton } from './buttons/button.js';
+export { Input } from './forms/input.js';
+export { Checkbox } from './forms/checkbox.js';
+export { Label } from './forms/label.js';
+export { Textarea } from './forms/textarea.js';
+export { Switch } from './forms/switch.js';
+// ============================================================================
+// DROPDOWNS
+// ============================================================================
+export { Dropdown } from '../forms/dropdown/index.js';
+export { UnifiedCurrencyDropdown } from '../forms/unified-currency-dropdown.js';
+// ============================================================================
+// DATE & FILE
+// ============================================================================
+export { DatePicker } from '../forms/date-picker/index.js';
+export { FileAttachment } from '../forms/file-attachment/index.js';
+// ============================================================================
+// DISPLAY COMPONENTS
+// ============================================================================
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './display/card.js';
+export { StatsCard, StatsGrid } from './display/stats-card.js';
+export { Text } from './display/text.js';
+export { Separator } from './display/separator.js';
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './display/collapsible.js';
+export { FormToggle } from './form-toggle.js';
+// ============================================================================
+// FEEDBACK COMPONENTS
+// ============================================================================
+export { Badge, FilterBadge, FilterBadgeGroup } from './feedback/badge.js';
+export { ReminderButton } from './feedback/reminder-button.js';
+export { BooleanBadge } from './display/boolean-badge.js';
+export { Alert, AlertTitle, AlertDescription } from './feedback/alert.js';
+export { Progress } from './feedback/progress.js';
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipDetailed, TooltipProvider } from './feedback/tooltip.js';
+export { Skeleton, SkeletonText, SkeletonFormFields } from './feedback/skeleton.js';
+export { SkeletonTable } from './feedback/skeleton-table.js';
+// ============================================================================
+// OVERLAYS & MODALS
+// ============================================================================
+// Unified Modal component - exports both Modal* and Dialog* (backwards compatibility)
+export { Modal, ModalPortal, ModalOverlay, ModalClose, ModalTrigger, ModalContent, ModalHeader, ModalFooter, ModalTitle, ModalDescription, 
+// Backwards compatibility exports
+Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from '../modals/Modal.js';
+export { useModalAlert, ModalAlert } from '../modals/modal-alert.js';
+// ============================================================================
+// NAVIGATION
+// ============================================================================
+// Modern pill tabs component
+export { Tabs } from './navigation/tabs.js';
+export { HeaderSteps } from './navigation/header-steps.js';
+// Legacy Radix tabs for backwards compatibility
+export { TabsRoot as RadixTabs, TabsList, TabsTrigger, TabsContent } from './navigation/tabs.js';
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup } from './navigation/dropdown-menu.js';
+// ============================================================================
+// LOADING STATES
+// ============================================================================
+export { Loading, LoadingStates, LoadingOverlay, PageLoading, NavigationProgress } from './overlays/loading.js';

package/dist/components/ui/navigation/dropdown-menu.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    displayName: string;
+};
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };

package/dist/components/ui/navigation/dropdown-menu.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "../../../lib/utils.js";
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = React.forwardRef((props, ref) => (_jsx(DropdownMenuPrimitive.Trigger, { ref: ref, suppressHydrationWarning: true, ...props })));
+DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn("flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-[rgb(var(--color-primary))] focus:text-white data-[state=open]:bg-[rgb(var(--color-primary))] data-[state=open]:text-white hover:bg-[rgb(var(--color-primary))] hover:text-white", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto h-4 w-4" })] })));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.SubContent, { ref: ref, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] p-1 text-[rgb(var(--fg-default))] shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 })));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] p-1 text-[rgb(var(--fg-default))] shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 }) })));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-[rgb(var(--color-primary))] focus:text-white hover:bg-[rgb(var(--color-primary))] hover:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className), ...props })));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), checked: checked, ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), children] })));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.RadioItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props })));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+const DropdownMenuShortcut = ({ className, ...props }) => {
+    return (_jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props }));
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };

package/dist/components/ui/navigation/header-steps.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { LucideIcon } from 'lucide-react';
+export interface HeaderStepItem {
+    id: number;
+    label: string;
+    subtitle?: string;
+    icon?: LucideIcon;
+}
+interface HeaderStepsProps {
+    steps: HeaderStepItem[];
+    currentStep: number;
+    onStepClick?: (stepId: number) => void;
+    className?: string;
+}
+export declare function HeaderSteps({ steps, currentStep, onStepClick, className }: HeaderStepsProps): React.JSX.Element;
+export {};

package/dist/components/ui/navigation/header-steps.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { CheckCircle } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+import { useLanguage } from '../../../contexts/LanguageContext.js';
+export function HeaderSteps({ steps, currentStep, onStepClick, className }) {
+    const { t } = useLanguage();
+    return (_jsx("div", { className: cn('w-full overflow-x-auto', className), children: _jsx("div", { className: "flex min-w-max items-start justify-center gap-0 px-1 py-1 sm:min-w-0", children: steps.map((step, index) => {
+                const isActive = currentStep === step.id;
+                const isCompleted = currentStep > step.id;
+                return (_jsxs(React.Fragment, { children: [_jsxs("button", { type: "button", onClick: () => { if (isCompleted)
+                                onStepClick?.(step.id); }, disabled: !isCompleted && !isActive, className: cn('group flex min-w-[4.5rem] shrink-0 flex-col items-center gap-1.5 rounded-md px-1.5 py-1 transition-colors sm:min-w-[6rem]', isCompleted && 'cursor-pointer hover:bg-[rgb(var(--bg-hover))]'), children: [_jsx("div", { className: cn('flex h-8 w-8 items-center justify-center rounded-full text-xs font-semibold transition-all sm:h-9 sm:w-9 sm:text-sm', isActive && 'bg-[rgb(var(--color-primary))] text-[rgb(var(--fg-inverse))] shadow-md', isCompleted && 'bg-[rgb(var(--color-success))] text-[rgb(var(--fg-inverse))] shadow-sm', !isActive && !isCompleted && 'border-2 border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-subtle))]'), children: isCompleted ? _jsx(CheckCircle, { className: "h-4 w-4" }) : step.id }), _jsx("span", { className: cn('hidden whitespace-nowrap text-[10px] font-medium sm:block sm:text-[11px]', isActive && 'text-[rgb(var(--color-primary))]', isCompleted && 'text-[rgb(var(--color-success))]', !isActive && !isCompleted && 'text-[rgb(var(--fg-subtle))]'), children: t(step.label) })] }), index < steps.length - 1 && (_jsx("div", { className: cn('mt-5 h-px w-6 shrink-0 sm:w-12 lg:w-20', currentStep > step.id ? 'bg-[rgb(var(--color-success))]' : 'bg-[rgb(var(--bd-default))]') }))] }, step.id));
+            }) }) }));
+}

package/dist/components/ui/navigation/tabs.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { LucideIcon } from 'lucide-react';
+declare const TabsRoot: 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 interface TabItem {
+    id: string;
+    label: string;
+    icon?: LucideIcon;
+    /** Dropdown options for this tab (for time filter style) */
+    dropdownOptions?: Array<{
+        value: string;
+        label: string;
+    }>;
+    /** Quick-select shortcuts pinned as a footer below the dropdown list (e.g. This / Last) */
+    quickOptions?: Array<{
+        value: string;
+        label: string;
+    }>;
+}
+export interface TabsProps {
+    tabs: TabItem[];
+    activeTab: string;
+    onTabChange: (tabId: string) => void;
+    fullWidth?: boolean;
+    className?: string;
+    /** Visual variant: 'pill' (default) or 'rounded' (square corners) */
+    variant?: 'pill' | 'rounded';
+    /** Size variant */
+    size?: 'sm' | 'md';
+    /** For dropdown mode: currently selected values per tab */
+    dropdownValues?: Record<string, string[]>;
+    /** For dropdown mode: callback when dropdown selection changes */
+    onDropdownChange?: (tabId: string, selectedValues: string[]) => void;
+}
+export declare function Tabs({ tabs, activeTab, onTabChange, fullWidth, className, variant, size, dropdownValues, onDropdownChange }: TabsProps): React.JSX.Element;
+export { TabsRoot, TabsList, TabsTrigger, TabsContent };
+export { TabsRoot as RadixTabs };

package/dist/components/ui/navigation/tabs.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '../../../lib/utils.js';
+import { Dropdown } from '../../forms/dropdown/index.js';
+// ============================================================================
+// OLD RADIX TABS (Keep for backwards compatibility with existing pages)
+// ============================================================================
+const TabsRoot = TabsPrimitive.Root;
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn('inline-flex h-10 items-center justify-center rounded-md bg-[rgb(var(--bg-subtle))] p-1 text-[rgb(var(--fg-muted))]', 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-sm px-3 py-1.5 text-sm font-medium ring-offset-[rgb(var(--bg-surface))] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--color-primary))] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[rgb(var(--bg-surface))] data-[state=active]:text-[rgb(var(--fg-default))] data-[state=active]:shadow-sm', className), suppressHydrationWarning: true, ...props })));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn('mt-2 ring-offset-[rgb(var(--bg-surface))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--color-primary))] focus-visible:ring-offset-2', className), suppressHydrationWarning: true, ...props })));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+export function Tabs({ tabs, activeTab, onTabChange, fullWidth = false, className = '', variant = 'pill', size = 'md', dropdownValues, onDropdownChange }) {
+    const containerClasses = cn('inline-flex items-center max-w-full overflow-x-auto scrollbar-hide [-webkit-overflow-scrolling:touch]', variant === 'pill' && 'bg-[rgb(var(--bg-subtle))] rounded-full border border-[rgb(var(--bd-default))] p-px gap-0.5', variant === 'rounded' && 'rounded-lg border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] p-0.5', fullWidth && 'w-full', className);
+    const getButtonClasses = (isActive) => cn('tab-pill inline-flex items-center gap-1.5 font-medium transition-colors whitespace-nowrap flex-shrink-0', variant === 'pill' && 'rounded-full', variant === 'rounded' && 'rounded-md', size === 'sm' && 'px-2.5 py-1 text-xs', size === 'md' && 'px-3 py-1.5 text-xs leading-none sm:px-4 sm:py-1.5 sm:text-sm sm:leading-normal', fullWidth && 'flex-1 justify-center', isActive
+        ? variant === 'pill'
+            ? 'bg-[rgb(var(--color-primary))]/10 text-[rgb(var(--color-primary))]'
+            : 'bg-[rgb(var(--color-primary))] text-white shadow-sm'
+        : 'text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]');
+    return (_jsx("div", { className: containerClasses, children: tabs.map((tab) => {
+            const Icon = tab.icon;
+            const isActive = activeTab === tab.id;
+            const hasDropdown = tab.dropdownOptions && tab.dropdownOptions.length > 0;
+            if (hasDropdown) {
+                const selected = dropdownValues?.[tab.id] || [];
+                const quickFooter = tab.quickOptions && tab.quickOptions.length > 0 ? (_jsx("div", { className: "border-t border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-subtle))] px-2 py-2 flex flex-wrap gap-1.5", children: tab.quickOptions.map((q) => {
+                        const active = selected.includes(q.value);
+                        return (_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                                // Quick presets (This/Last) are mutually exclusive with each other
+                                // AND with the named-checkbox selections — pick one mode, not both.
+                                const next = active ? [] : [q.value];
+                                onDropdownChange?.(tab.id, next);
+                            }, className: cn('h-6 px-2.5 rounded-full text-[11px] font-medium transition-colors border', active
+                                ? 'bg-[rgb(var(--color-primary))] text-white border-[rgb(var(--color-primary))]'
+                                : 'bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-muted))] border-[rgb(var(--bd-default))] hover:border-[rgb(var(--color-primary))] hover:text-[rgb(var(--color-primary))]'), children: q.label }, q.value));
+                    }) })) : undefined;
+                return (_jsx(Dropdown, { options: tab.dropdownOptions, value: selected, onValueChange: (sel) => {
+                        const arr = Array.isArray(sel) ? sel.map(String) : [String(sel)];
+                        // Ticking a named option clears any quick preset (This/Last) — they're exclusive.
+                        const quickVals = (tab.quickOptions || []).map(q => q.value);
+                        const named = arr.filter(v => !quickVals.includes(v));
+                        onDropdownChange?.(tab.id, named.length > 0 ? named : arr);
+                    }, onOpen: () => {
+                        if (!isActive) {
+                            onTabChange(tab.id);
+                        }
+                    }, placeholder: tab.label, multiSelect: true, searchable: true, showOnlyButton: true, hideSelectAll: true, customFooter: quickFooter, customTrigger: _jsxs("button", { type: "button", className: getButtonClasses(isActive), children: [Icon && _jsx(Icon, { className: "h-3.5 w-3.5 sm:h-4 sm:w-4 flex-shrink-0" }), tab.label] }) }, tab.id));
+            }
+            return (_jsxs("button", { onClick: () => onTabChange(tab.id), className: getButtonClasses(isActive), children: [Icon && _jsx(Icon, { className: "h-3.5 w-3.5 sm:h-4 sm:w-4 flex-shrink-0" }), tab.label] }, tab.id));
+        }) }));
+}
+// Export old Radix components for backwards compatibility
+export { TabsRoot, TabsList, TabsTrigger, TabsContent };
+// Also export TabsRoot as Tabs for legacy code that imports { Tabs }
+export { TabsRoot as RadixTabs };

package/dist/components/ui/overlays/loading.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+export interface PageLoadingProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: 'sm' | 'md' | 'lg';
+    text?: string;
+    color?: string;
+    speed?: string;
+}
+declare const PageLoading: React.ForwardRefExoticComponent<PageLoadingProps & React.RefAttributes<HTMLDivElement>>;
+export { PageLoading };
+export interface LoadingProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    text?: string;
+    variant?: 'spinner' | 'cradle' | 'pendulum' | 'pulse' | 'dots';
+    color?: string;
+}
+declare const Loading: React.ForwardRefExoticComponent<LoadingProps & React.RefAttributes<HTMLDivElement>>;
+export { Loading };
+export declare const LoadingStates: {
+    Saving: () => React.JSX.Element;
+    Loading: () => React.JSX.Element;
+    Processing: () => React.JSX.Element;
+    Calculating: () => React.JSX.Element;
+    Generating: () => React.JSX.Element;
+    Validating: () => React.JSX.Element;
+    Exporting: () => React.JSX.Element;
+    Importing: () => React.JSX.Element;
+    Syncing: () => React.JSX.Element;
+    Connecting: () => React.JSX.Element;
+    Authenticating: () => React.JSX.Element;
+    SigningIn: () => React.JSX.Element;
+    Inline: ({ size }: {
+        size?: "sm" | "md";
+    }) => React.JSX.Element;
+    InlinePendulum: ({ size }: {
+        size?: "sm" | "md";
+    }) => React.JSX.Element;
+    InlineCradle: ({ size }: {
+        size?: "sm" | "md";
+    }) => React.JSX.Element;
+};
+export declare function LoadingOverlay({ isVisible, text, variant, size }: {
+    isVisible: boolean;
+    text?: string;
+    variant?: LoadingProps['variant'];
+    size?: LoadingProps['size'];
+}): React.JSX.Element;
+export declare function NavigationProgress(): React.JSX.Element;