indas-ui 0.0.1 → 0.1.1

package/dist/cjs/components/ui/index.js

@@ -0,0 +1,157 @@
+'use client';
+"use strict";
+// UI Components - Centralized exports with organized folder structure
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalContent = exports.ModalTrigger = exports.ModalClose = exports.ModalOverlay = exports.ModalPortal = exports.Modal = exports.SkeletonTable = exports.SkeletonFormFields = exports.SkeletonText = exports.Skeleton = exports.TooltipProvider = exports.TooltipDetailed = exports.TooltipContent = exports.TooltipTrigger = exports.Tooltip = exports.Progress = exports.AlertDescription = exports.AlertTitle = exports.Alert = exports.BooleanBadge = exports.ReminderButton = exports.FilterBadgeGroup = exports.FilterBadge = exports.Badge = exports.FormToggle = exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = exports.Separator = exports.Text = exports.StatsGrid = exports.StatsCard = exports.CardFooter = exports.CardContent = exports.CardDescription = exports.CardTitle = exports.CardHeader = exports.Card = exports.FileAttachment = exports.DatePicker = exports.UnifiedCurrencyDropdown = exports.Dropdown = exports.Switch = exports.Textarea = exports.Label = exports.Checkbox = exports.Input = exports.CheckboxButton = exports.InputButton = exports.Button = void 0;
+exports.NavigationProgress = exports.PageLoading = exports.LoadingOverlay = exports.LoadingStates = exports.Loading = exports.DropdownMenuRadioGroup = exports.DropdownMenuSubTrigger = exports.DropdownMenuSubContent = exports.DropdownMenuSub = exports.DropdownMenuPortal = exports.DropdownMenuGroup = exports.DropdownMenuShortcut = exports.DropdownMenuSeparator = exports.DropdownMenuLabel = exports.DropdownMenuRadioItem = exports.DropdownMenuCheckboxItem = exports.DropdownMenuItem = exports.DropdownMenuContent = exports.DropdownMenuTrigger = exports.DropdownMenu = exports.TabsContent = exports.TabsTrigger = exports.TabsList = exports.RadixTabs = exports.HeaderSteps = exports.Tabs = exports.ModalAlert = exports.useModalAlert = exports.DialogDescription = exports.DialogTitle = exports.DialogFooter = exports.DialogHeader = exports.DialogContent = exports.DialogTrigger = exports.DialogClose = exports.DialogOverlay = exports.DialogPortal = exports.Dialog = exports.ModalDescription = exports.ModalTitle = exports.ModalFooter = exports.ModalHeader = void 0;
+// ============================================================================
+// FORMS
+// ============================================================================
+var button_1 = require("./buttons/button.js");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_1.Button; } });
+Object.defineProperty(exports, "InputButton", { enumerable: true, get: function () { return button_1.InputButton; } });
+Object.defineProperty(exports, "CheckboxButton", { enumerable: true, get: function () { return button_1.CheckboxButton; } });
+var input_1 = require("./forms/input.js");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return input_1.Input; } });
+var checkbox_1 = require("./forms/checkbox.js");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return checkbox_1.Checkbox; } });
+var label_1 = require("./forms/label.js");
+Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return label_1.Label; } });
+var textarea_1 = require("./forms/textarea.js");
+Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return textarea_1.Textarea; } });
+var switch_1 = require("./forms/switch.js");
+Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return switch_1.Switch; } });
+// ============================================================================
+// DROPDOWNS
+// ============================================================================
+var dropdown_1 = require("../forms/dropdown/index.js");
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return dropdown_1.Dropdown; } });
+var unified_currency_dropdown_1 = require("../forms/unified-currency-dropdown.js");
+Object.defineProperty(exports, "UnifiedCurrencyDropdown", { enumerable: true, get: function () { return unified_currency_dropdown_1.UnifiedCurrencyDropdown; } });
+// ============================================================================
+// DATE & FILE
+// ============================================================================
+var date_picker_1 = require("../forms/date-picker/index.js");
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return date_picker_1.DatePicker; } });
+var file_attachment_1 = require("../forms/file-attachment/index.js");
+Object.defineProperty(exports, "FileAttachment", { enumerable: true, get: function () { return file_attachment_1.FileAttachment; } });
+// ============================================================================
+// DISPLAY COMPONENTS
+// ============================================================================
+var card_1 = require("./display/card.js");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return card_1.Card; } });
+Object.defineProperty(exports, "CardHeader", { enumerable: true, get: function () { return card_1.CardHeader; } });
+Object.defineProperty(exports, "CardTitle", { enumerable: true, get: function () { return card_1.CardTitle; } });
+Object.defineProperty(exports, "CardDescription", { enumerable: true, get: function () { return card_1.CardDescription; } });
+Object.defineProperty(exports, "CardContent", { enumerable: true, get: function () { return card_1.CardContent; } });
+Object.defineProperty(exports, "CardFooter", { enumerable: true, get: function () { return card_1.CardFooter; } });
+var stats_card_1 = require("./display/stats-card.js");
+Object.defineProperty(exports, "StatsCard", { enumerable: true, get: function () { return stats_card_1.StatsCard; } });
+Object.defineProperty(exports, "StatsGrid", { enumerable: true, get: function () { return stats_card_1.StatsGrid; } });
+var text_1 = require("./display/text.js");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return text_1.Text; } });
+var separator_1 = require("./display/separator.js");
+Object.defineProperty(exports, "Separator", { enumerable: true, get: function () { return separator_1.Separator; } });
+var collapsible_1 = require("./display/collapsible.js");
+Object.defineProperty(exports, "Collapsible", { enumerable: true, get: function () { return collapsible_1.Collapsible; } });
+Object.defineProperty(exports, "CollapsibleTrigger", { enumerable: true, get: function () { return collapsible_1.CollapsibleTrigger; } });
+Object.defineProperty(exports, "CollapsibleContent", { enumerable: true, get: function () { return collapsible_1.CollapsibleContent; } });
+var form_toggle_1 = require("./form-toggle.js");
+Object.defineProperty(exports, "FormToggle", { enumerable: true, get: function () { return form_toggle_1.FormToggle; } });
+// ============================================================================
+// FEEDBACK COMPONENTS
+// ============================================================================
+var badge_1 = require("./feedback/badge.js");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return badge_1.Badge; } });
+Object.defineProperty(exports, "FilterBadge", { enumerable: true, get: function () { return badge_1.FilterBadge; } });
+Object.defineProperty(exports, "FilterBadgeGroup", { enumerable: true, get: function () { return badge_1.FilterBadgeGroup; } });
+var reminder_button_1 = require("./feedback/reminder-button.js");
+Object.defineProperty(exports, "ReminderButton", { enumerable: true, get: function () { return reminder_button_1.ReminderButton; } });
+var boolean_badge_1 = require("./display/boolean-badge.js");
+Object.defineProperty(exports, "BooleanBadge", { enumerable: true, get: function () { return boolean_badge_1.BooleanBadge; } });
+var alert_1 = require("./feedback/alert.js");
+Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return alert_1.Alert; } });
+Object.defineProperty(exports, "AlertTitle", { enumerable: true, get: function () { return alert_1.AlertTitle; } });
+Object.defineProperty(exports, "AlertDescription", { enumerable: true, get: function () { return alert_1.AlertDescription; } });
+var progress_1 = require("./feedback/progress.js");
+Object.defineProperty(exports, "Progress", { enumerable: true, get: function () { return progress_1.Progress; } });
+var tooltip_1 = require("./feedback/tooltip.js");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return tooltip_1.Tooltip; } });
+Object.defineProperty(exports, "TooltipTrigger", { enumerable: true, get: function () { return tooltip_1.TooltipTrigger; } });
+Object.defineProperty(exports, "TooltipContent", { enumerable: true, get: function () { return tooltip_1.TooltipContent; } });
+Object.defineProperty(exports, "TooltipDetailed", { enumerable: true, get: function () { return tooltip_1.TooltipDetailed; } });
+Object.defineProperty(exports, "TooltipProvider", { enumerable: true, get: function () { return tooltip_1.TooltipProvider; } });
+var skeleton_1 = require("./feedback/skeleton.js");
+Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return skeleton_1.Skeleton; } });
+Object.defineProperty(exports, "SkeletonText", { enumerable: true, get: function () { return skeleton_1.SkeletonText; } });
+Object.defineProperty(exports, "SkeletonFormFields", { enumerable: true, get: function () { return skeleton_1.SkeletonFormFields; } });
+var skeleton_table_1 = require("./feedback/skeleton-table.js");
+Object.defineProperty(exports, "SkeletonTable", { enumerable: true, get: function () { return skeleton_table_1.SkeletonTable; } });
+// ============================================================================
+// OVERLAYS & MODALS
+// ============================================================================
+// Unified Modal component - exports both Modal* and Dialog* (backwards compatibility)
+var Modal_1 = require("../modals/Modal.js");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
+Object.defineProperty(exports, "ModalPortal", { enumerable: true, get: function () { return Modal_1.ModalPortal; } });
+Object.defineProperty(exports, "ModalOverlay", { enumerable: true, get: function () { return Modal_1.ModalOverlay; } });
+Object.defineProperty(exports, "ModalClose", { enumerable: true, get: function () { return Modal_1.ModalClose; } });
+Object.defineProperty(exports, "ModalTrigger", { enumerable: true, get: function () { return Modal_1.ModalTrigger; } });
+Object.defineProperty(exports, "ModalContent", { enumerable: true, get: function () { return Modal_1.ModalContent; } });
+Object.defineProperty(exports, "ModalHeader", { enumerable: true, get: function () { return Modal_1.ModalHeader; } });
+Object.defineProperty(exports, "ModalFooter", { enumerable: true, get: function () { return Modal_1.ModalFooter; } });
+Object.defineProperty(exports, "ModalTitle", { enumerable: true, get: function () { return Modal_1.ModalTitle; } });
+Object.defineProperty(exports, "ModalDescription", { enumerable: true, get: function () { return Modal_1.ModalDescription; } });
+// Backwards compatibility exports
+Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return Modal_1.Dialog; } });
+Object.defineProperty(exports, "DialogPortal", { enumerable: true, get: function () { return Modal_1.DialogPortal; } });
+Object.defineProperty(exports, "DialogOverlay", { enumerable: true, get: function () { return Modal_1.DialogOverlay; } });
+Object.defineProperty(exports, "DialogClose", { enumerable: true, get: function () { return Modal_1.DialogClose; } });
+Object.defineProperty(exports, "DialogTrigger", { enumerable: true, get: function () { return Modal_1.DialogTrigger; } });
+Object.defineProperty(exports, "DialogContent", { enumerable: true, get: function () { return Modal_1.DialogContent; } });
+Object.defineProperty(exports, "DialogHeader", { enumerable: true, get: function () { return Modal_1.DialogHeader; } });
+Object.defineProperty(exports, "DialogFooter", { enumerable: true, get: function () { return Modal_1.DialogFooter; } });
+Object.defineProperty(exports, "DialogTitle", { enumerable: true, get: function () { return Modal_1.DialogTitle; } });
+Object.defineProperty(exports, "DialogDescription", { enumerable: true, get: function () { return Modal_1.DialogDescription; } });
+var modal_alert_1 = require("../modals/modal-alert.js");
+Object.defineProperty(exports, "useModalAlert", { enumerable: true, get: function () { return modal_alert_1.useModalAlert; } });
+Object.defineProperty(exports, "ModalAlert", { enumerable: true, get: function () { return modal_alert_1.ModalAlert; } });
+// ============================================================================
+// NAVIGATION
+// ============================================================================
+// Modern pill tabs component
+var tabs_1 = require("./navigation/tabs.js");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return tabs_1.Tabs; } });
+var header_steps_1 = require("./navigation/header-steps.js");
+Object.defineProperty(exports, "HeaderSteps", { enumerable: true, get: function () { return header_steps_1.HeaderSteps; } });
+// Legacy Radix tabs for backwards compatibility
+var tabs_2 = require("./navigation/tabs.js");
+Object.defineProperty(exports, "RadixTabs", { enumerable: true, get: function () { return tabs_2.TabsRoot; } });
+Object.defineProperty(exports, "TabsList", { enumerable: true, get: function () { return tabs_2.TabsList; } });
+Object.defineProperty(exports, "TabsTrigger", { enumerable: true, get: function () { return tabs_2.TabsTrigger; } });
+Object.defineProperty(exports, "TabsContent", { enumerable: true, get: function () { return tabs_2.TabsContent; } });
+var dropdown_menu_1 = require("./navigation/dropdown-menu.js");
+Object.defineProperty(exports, "DropdownMenu", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenu; } });
+Object.defineProperty(exports, "DropdownMenuTrigger", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenuTrigger; } });
+Object.defineProperty(exports, "DropdownMenuContent", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenuContent; } });
+Object.defineProperty(exports, "DropdownMenuItem", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenuItem; } });
+Object.defineProperty(exports, "DropdownMenuCheckboxItem", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenuCheckboxItem; } });
+Object.defineProperty(exports, "DropdownMenuRadioItem", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenuRadioItem; } });
+Object.defineProperty(exports, "DropdownMenuLabel", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenuLabel; } });
+Object.defineProperty(exports, "DropdownMenuSeparator", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenuSeparator; } });
+Object.defineProperty(exports, "DropdownMenuShortcut", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenuShortcut; } });
+Object.defineProperty(exports, "DropdownMenuGroup", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenuGroup; } });
+Object.defineProperty(exports, "DropdownMenuPortal", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenuPortal; } });
+Object.defineProperty(exports, "DropdownMenuSub", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenuSub; } });
+Object.defineProperty(exports, "DropdownMenuSubContent", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenuSubContent; } });
+Object.defineProperty(exports, "DropdownMenuSubTrigger", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenuSubTrigger; } });
+Object.defineProperty(exports, "DropdownMenuRadioGroup", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenuRadioGroup; } });
+// ============================================================================
+// LOADING STATES
+// ============================================================================
+var loading_1 = require("./overlays/loading.js");
+Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return loading_1.Loading; } });
+Object.defineProperty(exports, "LoadingStates", { enumerable: true, get: function () { return loading_1.LoadingStates; } });
+Object.defineProperty(exports, "LoadingOverlay", { enumerable: true, get: function () { return loading_1.LoadingOverlay; } });
+Object.defineProperty(exports, "PageLoading", { enumerable: true, get: function () { return loading_1.PageLoading; } });
+Object.defineProperty(exports, "NavigationProgress", { enumerable: true, get: function () { return loading_1.NavigationProgress; } });

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

@@ -0,0 +1,84 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenuRadioGroup = exports.DropdownMenuSubTrigger = exports.DropdownMenuSubContent = exports.DropdownMenuSub = exports.DropdownMenuPortal = exports.DropdownMenuGroup = exports.DropdownMenuShortcut = exports.DropdownMenuSeparator = exports.DropdownMenuLabel = exports.DropdownMenuRadioItem = exports.DropdownMenuCheckboxItem = exports.DropdownMenuItem = exports.DropdownMenuContent = exports.DropdownMenuTrigger = exports.DropdownMenu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const DropdownMenuPrimitive = __importStar(require("@radix-ui/react-dropdown-menu"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils.js");
+const DropdownMenu = DropdownMenuPrimitive.Root;
+exports.DropdownMenu = DropdownMenu;
+const DropdownMenuTrigger = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Trigger, { ref: ref, suppressHydrationWarning: true, ...props })));
+exports.DropdownMenuTrigger = DropdownMenuTrigger;
+DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+exports.DropdownMenuGroup = DropdownMenuGroup;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+exports.DropdownMenuPortal = DropdownMenuPortal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+exports.DropdownMenuSub = DropdownMenuSub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: (0, utils_1.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, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "ml-auto h-4 w-4" })] })));
+exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.SubContent, { ref: ref, className: (0, utils_1.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 })));
+exports.DropdownMenuSubContent = DropdownMenuSubContent;
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: (0, utils_1.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 }) })));
+exports.DropdownMenuContent = DropdownMenuContent;
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Item, { ref: ref, className: (0, utils_1.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 })));
+exports.DropdownMenuItem = DropdownMenuItem;
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: (0, utils_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-4 w-4" }) }) }), children] })));
+exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(DropdownMenuPrimitive.RadioItem, { ref: ref, className: (0, utils_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
+exports.DropdownMenuRadioItem = DropdownMenuRadioItem;
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Label, { ref: ref, className: (0, utils_1.cn)("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props })));
+exports.DropdownMenuLabel = DropdownMenuLabel;
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Separator, { ref: ref, className: (0, utils_1.cn)("-mx-1 my-1 h-px bg-muted", className), ...props })));
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+const DropdownMenuShortcut = ({ className, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("ml-auto text-xs tracking-widest opacity-60", className), ...props }));
+};
+exports.DropdownMenuShortcut = DropdownMenuShortcut;
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";

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

@@ -0,0 +1,51 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderSteps = HeaderSteps;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils.js");
+const LanguageContext_1 = require("../../../contexts/LanguageContext.js");
+function HeaderSteps({ steps, currentStep, onStepClick, className }) {
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-full overflow-x-auto', className), children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => { if (isCompleted)
+                                onStepClick?.(step.id); }, disabled: !isCompleted && !isActive, className: (0, utils_1.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: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.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 ? (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle, { className: "h-4 w-4" }) : step.id }), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.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 && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.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/cjs/components/ui/navigation/tabs.js

@@ -0,0 +1,97 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadixTabs = exports.TabsContent = exports.TabsTrigger = exports.TabsList = exports.TabsRoot = void 0;
+exports.Tabs = Tabs;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const TabsPrimitive = __importStar(require("@radix-ui/react-tabs"));
+const utils_1 = require("../../../lib/utils.js");
+const dropdown_1 = require("../../forms/dropdown/index.js");
+// ============================================================================
+// OLD RADIX TABS (Keep for backwards compatibility with existing pages)
+// ============================================================================
+const TabsRoot = TabsPrimitive.Root;
+exports.TabsRoot = TabsRoot;
+exports.RadixTabs = TabsRoot;
+const TabsList = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(TabsPrimitive.List, { ref: ref, className: (0, utils_1.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 })));
+exports.TabsList = TabsList;
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(TabsPrimitive.Trigger, { ref: ref, className: (0, utils_1.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 })));
+exports.TabsTrigger = TabsTrigger;
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(TabsPrimitive.Content, { ref: ref, className: (0, utils_1.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 })));
+exports.TabsContent = TabsContent;
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+function Tabs({ tabs, activeTab, onTabChange, fullWidth = false, className = '', variant = 'pill', size = 'md', dropdownValues, onDropdownChange }) {
+    const containerClasses = (0, utils_1.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) => (0, utils_1.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 ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.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: (0, utils_1.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 ((0, jsx_runtime_1.jsx)(dropdown_1.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: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: getButtonClasses(isActive), children: [Icon && (0, jsx_runtime_1.jsx)(Icon, { className: "h-3.5 w-3.5 sm:h-4 sm:w-4 flex-shrink-0" }), tab.label] }) }, tab.id));
+            }
+            return ((0, jsx_runtime_1.jsxs)("button", { onClick: () => onTabChange(tab.id), className: getButtonClasses(isActive), children: [Icon && (0, jsx_runtime_1.jsx)(Icon, { className: "h-3.5 w-3.5 sm:h-4 sm:w-4 flex-shrink-0" }), tab.label] }, tab.id));
+        }) }));
+}

package/dist/cjs/components/ui/overlays/loading.js

@@ -0,0 +1,169 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingStates = exports.Loading = exports.PageLoading = void 0;
+exports.LoadingOverlay = LoadingOverlay;
+exports.NavigationProgress = NavigationProgress;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const navigation_1 = require("next/navigation");
+const framer_motion_1 = require("framer-motion");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils.js");
+const PageLoading = React.forwardRef(({ className, size = 'md', text, color = '#003366', speed = '1.4', ...props }, ref) => {
+    const [isClient, setIsClient] = React.useState(false);
+    const sizeMapping = {
+        sm: '48',
+        md: '64',
+        lg: '78'
+    };
+    React.useEffect(() => {
+        setIsClient(true);
+        const loadNewtonsCradle = async () => {
+            try {
+                const { newtonsCradle } = await Promise.resolve().then(() => __importStar(require('ldrs')));
+                newtonsCradle.register();
+            }
+            catch (error) {
+                console.error('Failed to load NewtonsCradle:', error);
+            }
+        };
+        loadNewtonsCradle();
+    }, []);
+    if (!isClient) {
+        return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, utils_1.cn)('flex flex-col items-center justify-center space-y-3', className), ...props, children: [(0, jsx_runtime_1.jsx)("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-[rgb(var(--fg-default))]" }), text && (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-[rgb(var(--fg-muted))] font-medium", children: text })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, utils_1.cn)('flex flex-col items-center justify-center space-y-3', className), ...props, children: [(0, jsx_runtime_1.jsx)("l-newtons-cradle", { size: sizeMapping[size], speed: speed, color: color }), text && (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-[rgb(var(--fg-muted))] font-medium", children: text })] }));
+});
+exports.PageLoading = PageLoading;
+PageLoading.displayName = 'PageLoading';
+const Loading = React.forwardRef(({ className, size = 'md', text, variant = 'spinner', color = 'text-blue-600', ...props }, ref) => {
+    const sizeClasses = {
+        sm: 'h-4 w-4',
+        md: 'h-6 w-6',
+        lg: 'h-8 w-8',
+        xl: 'h-12 w-12'
+    };
+    const textSizes = {
+        sm: 'text-xs',
+        md: 'text-sm',
+        lg: 'text-base',
+        xl: 'text-lg'
+    };
+    if (variant === 'cradle') {
+        return ((0, jsx_runtime_1.jsx)(PageLoading, { ref: ref, size: size === 'xl' ? 'lg' : size, text: text, className: className, ...props }));
+    }
+    const renderVariant = () => {
+        switch (variant) {
+            case 'pendulum':
+                return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('relative', sizeClasses[size], color), children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 border-2 border-current rounded-full opacity-20" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-1/2 left-1/2 w-0.5 h-1/2 bg-current origin-top animate-[pendulum_1s_ease-in-out_infinite]" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-0 left-1/2 w-1 h-1 bg-current rounded-full transform -translate-x-1/2 animate-[pendulum_1s_ease-in-out_infinite]" })] }));
+            case 'pulse':
+                return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('rounded-full bg-current animate-pulse opacity-75', sizeClasses[size], color) }));
+            case 'dots':
+                return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex space-x-0.5', color), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('rounded-full bg-current w-1.5 h-1.5 animate-bounce'), style: { animationDelay: '0ms', animationDuration: '0.6s' } }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('rounded-full bg-current w-1.5 h-1.5 animate-bounce'), style: { animationDelay: '100ms', animationDuration: '0.6s' } }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('rounded-full bg-current w-1.5 h-1.5 animate-bounce'), style: { animationDelay: '200ms', animationDuration: '0.6s' } })] }));
+            default: // spinner
+                return ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: (0, utils_1.cn)('animate-spin', sizeClasses[size], color) }));
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, utils_1.cn)('flex flex-col items-center justify-center gap-2', className), ...props, children: [renderVariant(), text && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('font-medium opacity-80', textSizes[size], color), children: text }))] }));
+});
+exports.Loading = Loading;
+Loading.displayName = 'Loading';
+// ── LoadingStates (pre-configured for ERP scenarios) ───────────────────
+exports.LoadingStates = {
+    Saving: () => (0, jsx_runtime_1.jsx)(Loading, { variant: "pendulum", text: "Saving...", color: "text-green-600" }),
+    Loading: () => (0, jsx_runtime_1.jsx)(Loading, { variant: "spinner", text: "Loading...", color: "text-blue-600" }),
+    Processing: () => (0, jsx_runtime_1.jsx)(Loading, { variant: "dots", text: "Processing...", color: "text-blue-600" }),
+    Calculating: () => (0, jsx_runtime_1.jsx)(Loading, { variant: "pendulum", text: "Calculating...", color: "text-purple-600" }),
+    Generating: () => (0, jsx_runtime_1.jsx)(Loading, { variant: "spinner", text: "Generating plan...", color: "text-indigo-600" }),
+    Validating: () => (0, jsx_runtime_1.jsx)(Loading, { variant: "pulse", text: "Validating...", color: "text-amber-600" }),
+    Exporting: () => (0, jsx_runtime_1.jsx)(Loading, { variant: "dots", text: "Exporting...", color: "text-orange-600" }),
+    Importing: () => (0, jsx_runtime_1.jsx)(Loading, { variant: "spinner", text: "Importing...", color: "text-teal-600" }),
+    Syncing: () => (0, jsx_runtime_1.jsx)(Loading, { variant: "pendulum", text: "Syncing...", color: "text-cyan-600" }),
+    Connecting: () => (0, jsx_runtime_1.jsx)(Loading, { variant: "pulse", text: "Connecting...", color: "text-gray-600" }),
+    Authenticating: () => (0, jsx_runtime_1.jsx)(Loading, { variant: "spinner", text: "Authenticating...", color: "text-slate-600" }),
+    SigningIn: () => (0, jsx_runtime_1.jsx)(PageLoading, { size: "md", text: "Signing in...", color: "white" }),
+    Inline: ({ size = 'sm' }) => (0, jsx_runtime_1.jsx)(Loading, { variant: "spinner", size: size }),
+    InlinePendulum: ({ size = 'sm' }) => (0, jsx_runtime_1.jsx)(Loading, { variant: "pendulum", size: size }),
+    InlineCradle: ({ size = 'sm' }) => (0, jsx_runtime_1.jsx)(PageLoading, { size: size })
+};
+// ── OptionalLogo — only renders after confirming the image loads ──────
+function OptionalLogo({ src, className }) {
+    const [loaded, setLoaded] = (0, react_1.useState)(false);
+    React.useEffect(() => {
+        const img = new Image();
+        img.onload = () => setLoaded(true);
+        img.src = src;
+    }, [src]);
+    if (!loaded)
+        return null;
+    return (0, jsx_runtime_1.jsx)("img", { src: src, alt: "", className: className });
+}
+// ── LoadingOverlay (full-page blocking overlay) ────────────────────────
+function LoadingOverlay({ isVisible, text = "Loading...", variant = "pendulum", size = "lg" }) {
+    if (!isVisible)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[300]", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-[rgb(var(--bg-surface))] rounded-xl p-8 shadow-2xl flex flex-col items-center gap-4", children: [(0, jsx_runtime_1.jsx)(OptionalLogo, { src: "/app/loading-logo.png", className: "h-20 w-20 rounded-xl object-contain" }), (0, jsx_runtime_1.jsx)(Loading, { variant: variant, size: size, text: text })] }) }));
+}
+// ── NavigationProgress (route change overlay with progress bar) ────────
+// Uses pure CSS animations — no library imports, renders instantly on refresh
+function NavigationProgress() {
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [progress, setProgress] = (0, react_1.useState)(0);
+    const pathname = (0, navigation_1.usePathname)();
+    (0, react_1.useEffect)(() => {
+        setIsLoading(true);
+        setProgress(0);
+        const timer1 = setTimeout(() => setProgress(30), 100);
+        const timer2 = setTimeout(() => setProgress(60), 250);
+        const timer3 = setTimeout(() => setProgress(90), 400);
+        const timer4 = setTimeout(() => {
+            setProgress(100);
+            setTimeout(() => {
+                setIsLoading(false);
+                setProgress(0);
+            }, 200);
+        }, 600);
+        return () => {
+            clearTimeout(timer1);
+            clearTimeout(timer2);
+            clearTimeout(timer3);
+            clearTimeout(timer4);
+        };
+    }, [pathname]);
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isLoading && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "fixed inset-0 z-[100] pointer-events-none bg-black/20 backdrop-blur-sm flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "bg-[rgb(var(--bg-surface))] px-12 py-10 rounded-2xl shadow-2xl border border-[rgb(var(--bd-default))]", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-5", children: [(0, jsx_runtime_1.jsx)("div", { className: "animate-pulse", children: (0, jsx_runtime_1.jsx)(OptionalLogo, { src: "/app/loading-logo.png", className: "h-32 w-32 rounded-2xl object-contain drop-shadow-lg" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-2.5 w-2.5 rounded-full bg-[rgb(var(--color-primary))] animate-bounce", style: { animationDelay: '0ms', animationDuration: '0.8s' } }), (0, jsx_runtime_1.jsx)("div", { className: "h-2.5 w-2.5 rounded-full bg-[rgb(var(--color-primary))] animate-bounce", style: { animationDelay: '150ms', animationDuration: '0.8s' } }), (0, jsx_runtime_1.jsx)("div", { className: "h-2.5 w-2.5 rounded-full bg-[rgb(var(--color-primary))] animate-bounce", style: { animationDelay: '300ms', animationDuration: '0.8s' } })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-48", children: (0, jsx_runtime_1.jsx)("div", { className: "h-0.5 bg-[rgb(var(--bg-subtle))] rounded-full overflow-hidden", children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "h-full rounded-full bg-[rgb(var(--color-primary))]", initial: { width: '0%' }, animate: { width: `${progress}%` }, transition: { duration: 0.3, ease: 'easeOut' } }) }) })] }) }) })) }));
+}