indas-ui 0.0.1 → 0.1.0

package/dist/cjs/components/ui/feedback/progress.js

@@ -0,0 +1,44 @@
+'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.Progress = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const ProgressPrimitive = __importStar(require("@radix-ui/react-progress"));
+const utils_1 = require("../../../lib/utils.js");
+const Progress = React.forwardRef(({ className, value, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ProgressPrimitive.Root, { ref: ref, className: (0, utils_1.cn)("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className), ...props, children: (0, jsx_runtime_1.jsx)(ProgressPrimitive.Indicator, { className: "h-full w-full flex-1 bg-primary transition-all", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) })));
+exports.Progress = Progress;
+Progress.displayName = ProgressPrimitive.Root.displayName;

package/dist/cjs/components/ui/feedback/reminder-button.js

@@ -0,0 +1,111 @@
+'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.ReminderButton = ReminderButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * ReminderButton — shared nudge control for any module.
+ *
+ * Only the person who raised the document can send reminders (the server
+ * enforces this too); everyone else sees the state read-only. Two manual
+ * reminders are allowed, after which the server sweep escalates to the
+ * assignee's manager 24h later if there is still no response.
+ */
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const SessionAdapterContext_1 = require("../../../contexts/SessionAdapterContext.js");
+const button_1 = require("../buttons/button.js");
+const LanguageContext_1 = require("../../../contexts/LanguageContext.js");
+const GlobalAlertContext_1 = require("../../../contexts/GlobalAlertContext.js");
+const notifications_1 = require("../../../lib/api/activity/notifications/index.js");
+function ReminderButton({ module, documentId, onSent, size = 'sm', className }) {
+    const { data: session } = (0, SessionAdapterContext_1.useSessionAdapter)();
+    const { t } = (0, LanguageContext_1.useLanguage)();
+    const alerts = (0, GlobalAlertContext_1.useGlobalAlert)();
+    const [status, setStatus] = React.useState(null);
+    const [busy, setBusy] = React.useState(false);
+    const sessionKey = `${session?.user?.CompanyID ?? ''}:${session?.user?.UserID ?? ''}`;
+    const load = React.useCallback(async () => {
+        if (!session || !documentId)
+            return;
+        const res = await notifications_1.RemindersAPI.getStatus(module, documentId, session);
+        if (res.success && res.data)
+            setStatus(res.data);
+    }, [module, documentId, session]);
+    React.useEffect(() => { load(); }, [module, documentId, sessionKey]);
+    const handleRemind = async () => {
+        // Guard on status too: without it a double-click could fire a second
+        // reminder before the refreshed count comes back.
+        if (!session || busy || !status?.canRemind)
+            return;
+        setBusy(true);
+        try {
+            const res = await notifications_1.RemindersAPI.send(module, documentId, session);
+            if (res.success) {
+                const d = res.data;
+                alerts.showSuccess(d?.isFinal ? t('Final Reminder Sent') : t('Reminder Sent'), d?.isFinal
+                    ? t('This request escalates to the assignee\'s manager in 24 hours if unanswered.')
+                    : t('The assignee has been notified.'));
+                await load();
+                onSent?.();
+            }
+            else {
+                alerts.showError(t('Error'), res.error || t('Could not send the reminder'));
+            }
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    if (!status)
+        return null;
+    // Already escalated — show it, no action left.
+    if (status.escalated) {
+        return ((0, jsx_runtime_1.jsxs)("span", { className: `inline-flex items-center gap-1.5 text-xs text-[rgb(var(--color-warning))] ${className || ''}`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ShieldAlert, { className: "h-3.5 w-3.5" }), t('Escalated')] }));
+    }
+    const used = status.reminderCount;
+    const max = status.maxReminders;
+    // Not the raiser (or nothing to chase) — read-only state.
+    if (!status.canRemind) {
+        if (used === 0)
+            return null;
+        return ((0, jsx_runtime_1.jsxs)("span", { className: `inline-flex items-center gap-1.5 text-xs text-[rgb(var(--fg-muted))] ${className || ''}`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.BellRing, { className: "h-3.5 w-3.5" }), t('Reminded'), " ", used, "/", max] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(button_1.Button, { variant: used >= max - 1 ? 'action-cancel' : 'action-secondary', size: size, icon: lucide_react_1.BellRing, onClick: handleRemind, disabled: busy, className: className, title: used >= max - 1
+            ? t('Final reminder — escalates in 24 hours if unanswered')
+            : t('Send a reminder to the assignee'), children: used === 0 ? t('Remind') : `${t('Remind')} ${used}/${max}` }));
+}
+ReminderButton.displayName = 'ReminderButton';

package/dist/cjs/components/ui/feedback/skeleton-table.js

@@ -0,0 +1,20 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonTable = SkeletonTable;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const skeleton_1 = require("./skeleton.js");
+/**
+ * Skeleton loading state for DataGrid tables
+ * Shows animated placeholder rows while data is loading
+ *
+ * @example
+ * {loading ? (
+ *   <SkeletonTable rows={10} columns={6} />
+ * ) : (
+ *   <DataGrid data={data} columns={columns} />
+ * )}
+ */
+function SkeletonTable({ rows = 10, columns = 6 }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full border border-[rgb(var(--bd-default))] rounded-lg overflow-hidden bg-[rgb(var(--bg-surface))]", children: [(0, jsx_runtime_1.jsx)("div", { className: "grid gap-4 p-4 bg-[rgb(var(--bg-grid-header))] border-b border-[rgb(var(--bd-default))]", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: Array.from({ length: columns }).map((_, i) => ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: "80%", height: "16px" }, `header-${i}`))) }), (0, jsx_runtime_1.jsx)("div", { className: "divide-y divide-[rgb(var(--bd-subtle))]", children: Array.from({ length: rows }).map((_, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { className: "grid gap-4 p-4 hover:bg-[rgb(var(--bg-hover))] transition-colors", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: Array.from({ length: columns }).map((_, colIndex) => ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: colIndex === 0 ? '60%' : '90%', height: "14px" }, `cell-${rowIndex}-${colIndex}`))) }, `row-${rowIndex}`))) })] }));
+}

package/dist/cjs/components/ui/feedback/skeleton.js

@@ -0,0 +1,53 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = Skeleton;
+exports.SkeletonText = SkeletonText;
+exports.SkeletonFormFields = SkeletonFormFields;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../lib/utils.js");
+/**
+ * Skeleton component for loading states
+ * Provides visual placeholder while content is loading
+ *
+ * @example
+ * // Basic usage
+ * <Skeleton width="100%" height="40px" />
+ *
+ * // Circular avatar skeleton
+ * <Skeleton width="48px" height="48px" variant="circular" />
+ *
+ * // Multiple skeletons for form fields
+ * <div className="space-y-3">
+ *   <Skeleton width="100%" height="40px" />
+ *   <Skeleton width="100%" height="40px" />
+ *   <Skeleton width="60%" height="40px" />
+ * </div>
+ */
+function Skeleton({ width = '100%', height = '1rem', variant = 'default', animation = 'pulse', className, style, ...props }) {
+    const widthValue = typeof width === 'number' ? `${width}px` : width;
+    const heightValue = typeof height === 'number' ? `${height}px` : height;
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(
+        // Base styles
+        'bg-[rgb(var(--bg-subtle))]', 
+        // Variant styles
+        variant === 'circular' && 'rounded-full', variant === 'rounded' && 'rounded-md', variant === 'default' && 'rounded', 
+        // Animation styles
+        animation === 'pulse' && 'animate-pulse', animation === 'wave' && 'animate-shimmer bg-gradient-to-r from-[rgb(var(--bg-subtle))] via-[rgb(var(--bg-hover))] to-[rgb(var(--bg-subtle))] bg-[length:200%_100%]', className), style: {
+            width: widthValue,
+            height: heightValue,
+            ...style
+        }, ...props }));
+}
+/**
+ * Skeleton for text lines
+ */
+function SkeletonText({ lines = 3, className }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('space-y-2', className), children: Array.from({ length: lines }).map((_, i) => ((0, jsx_runtime_1.jsx)(Skeleton, { width: i === lines - 1 ? '60%' : '100%', height: "1rem" }, i))) }));
+}
+/**
+ * Skeleton for form fields (matching your modal layout)
+ */
+function SkeletonFormFields({ count = 8, columns = 4 }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: `grid grid-cols-12 gap-3`, children: Array.from({ length: count }).map((_, i) => ((0, jsx_runtime_1.jsxs)("div", { className: `col-span-12 md:col-span-6 lg:col-span-${12 / columns} space-y-2`, children: [(0, jsx_runtime_1.jsx)(Skeleton, { width: "40%", height: "14px" }), (0, jsx_runtime_1.jsx)(Skeleton, { width: "100%", height: "40px" })] }, i))) }));
+}

package/dist/cjs/components/ui/feedback/tooltip.js

@@ -0,0 +1,54 @@
+"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.TooltipProvider = exports.TooltipDetailed = exports.TooltipContent = exports.TooltipTrigger = exports.Tooltip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const TooltipPrimitive = __importStar(require("@radix-ui/react-tooltip"));
+const utils_1 = require("../../../lib/utils.js");
+const TooltipProvider = TooltipPrimitive.Provider;
+exports.TooltipProvider = TooltipProvider;
+const Tooltip = TooltipPrimitive.Root;
+exports.Tooltip = Tooltip;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+exports.TooltipTrigger = TooltipTrigger;
+// Default tooltip - Glass style for simple text
+const TooltipContent = React.forwardRef(({ className, sideOffset = 5, ...props }, ref) => ((0, jsx_runtime_1.jsx)(TooltipPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: (0, utils_1.cn)("z-50 overflow-hidden rounded-lg bg-[rgb(var(--bg-surface)/0.8)] backdrop-blur-md text-[rgb(var(--fg-default))] text-xs px-3 py-1.5 border border-[rgb(var(--bd-default)/0.2)] shadow-xl animate-in fade-in-0 slide-in-from-bottom-1 duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className), ...props }) })));
+exports.TooltipContent = TooltipContent;
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+const TooltipDetailed = React.forwardRef(({ className, title = "Actions", actions = [], sideOffset = 5, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)(TooltipPrimitive.Portal, { children: (0, jsx_runtime_1.jsxs)(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: (0, utils_1.cn)("z-50 overflow-hidden rounded-lg bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] text-left p-0 border border-[rgb(var(--bd-default))] shadow-lg animate-in fade-in-0 duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className), ...props, children: [title && ((0, jsx_runtime_1.jsx)("div", { className: "px-2.5 py-1 bg-[rgb(var(--bg-subtle))] border-b border-[rgb(var(--bd-default))]", children: (0, jsx_runtime_1.jsx)("span", { className: "text-[11px] font-semibold text-[rgb(var(--fg-default))]", children: title }) })), actions.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "px-2.5 py-1.5 space-y-0.5", children: actions.map((action, i) => ((0, jsx_runtime_1.jsx)("p", { className: "text-[11px] text-[rgb(var(--fg-muted))]", children: action.label }, i))) })) : (children && (0, jsx_runtime_1.jsx)("div", { className: "px-2.5 py-1.5", children: children }))] }) })));
+exports.TooltipDetailed = TooltipDetailed;
+TooltipDetailed.displayName = "TooltipDetailed";

package/dist/cjs/components/ui/form-toggle.js

@@ -0,0 +1,47 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormToggle = FormToggle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const ui_1 = require("./index.js");
+const utils_1 = require("../../lib/utils.js");
+/**
+ * Reusable form toggle component for master modules
+ *
+ * Features:
+ * - Smooth expand/collapse animation
+ * - "New" button when collapsed
+ * - Customizable titles for create/edit modes
+ * - Header actions support
+ * - Fully themed with CSS variables
+ *
+ * @example
+ * ```tsx
+ * <FormToggle
+ *   isExpanded={isFormExpanded}
+ *   onToggle={setIsFormExpanded}
+ *   createTitle="Create New Company"
+ *   editTitle="Edit Company"
+ *   isEditing={!!editingCompany}
+ * >
+ *   <form>...</form>
+ * </FormToggle>
+ * ```
+ */
+function FormToggle({ isExpanded, onToggle, title, createTitle = 'Create New Record', editTitle = 'Edit Record', isEditing = false, children, headerActions, showNewButton = true, newButtonText = 'New', className, contentClassName, disabled = false, showCloseButton = true, onClose }) {
+    // Determine the title to display
+    const displayTitle = title || (isEditing ? editTitle : createTitle);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex-shrink-0 bg-[rgb(var(--bg-surface))]", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-6 py-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center gap-2 group", !disabled && "cursor-pointer"), onClick: () => !disabled && onToggle(!isExpanded), children: [isExpanded ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { className: "h-4 w-4 text-[rgb(var(--fg-subtle))] group-hover:text-[rgb(var(--fg-default))] transition-colors" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "h-4 w-4 text-[rgb(var(--fg-subtle))] group-hover:text-[rgb(var(--fg-default))] transition-colors" })), (0, jsx_runtime_1.jsx)("h3", { className: "text-sm font-semibold text-[rgb(var(--fg-default))] group-hover:text-[rgb(var(--color-primary))] transition-colors", children: displayTitle })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [!isExpanded && showNewButton && ((0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "action-create", onClick: (e) => {
+                                    e.stopPropagation();
+                                    onToggle(true);
+                                }, icon: lucide_react_1.Plus, disabled: disabled, fab: true, children: newButtonText })), headerActions, isExpanded && showCloseButton && ((0, jsx_runtime_1.jsxs)("button", { onClick: (e) => {
+                                    e.stopPropagation();
+                                    if (onClose) {
+                                        onClose();
+                                    }
+                                    else {
+                                        onToggle(false);
+                                    }
+                                }, className: "rounded-sm opacity-70 ring-offset-[rgb(var(--bg-surface))] transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[rgb(var(--color-primary))] focus:ring-offset-2", title: "Close form", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5 text-[rgb(var(--color-icon))]" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] }))] })] }), isExpanded && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("px-6 pb-4 pt-2 space-y-4 animate-in slide-in-from-top duration-200", contentClassName), children: children }))] }));
+}

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

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const clsx_1 = require("clsx");
+const lucide_react_1 = require("lucide-react");
+const Checkbox = ({ label, className, indeterminate, checked, ...props }) => {
+    const checkboxRef = react_1.default.useRef(null);
+    react_1.default.useEffect(() => {
+        if (checkboxRef.current) {
+            checkboxRef.current.indeterminate = indeterminate ?? false;
+        }
+    }, [indeterminate]);
+    const isChecked = checked || (checkboxRef.current?.checked ?? false);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsxs)("label", { className: "relative inline-flex items-center cursor-pointer", children: [(0, jsx_runtime_1.jsx)("input", { ref: checkboxRef, type: "checkbox", checked: checked, className: "sr-only peer", ...props }), (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.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 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { className: "h-3 w-3 text-white", strokeWidth: 3 })) : isChecked ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-3 w-3 text-white", strokeWidth: 3 })) : null })] }), label && ((0, jsx_runtime_1.jsx)("label", { className: "ml-2 block text-xs text-gray-700", children: label }))] }));
+};
+exports.Checkbox = Checkbox;

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

@@ -0,0 +1,111 @@
+'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.Input = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const utils_1 = require("../../../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 ((0, jsx_runtime_1.jsx)("input", { id: inputId, name: inputName, type: type, className: (0, utils_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: "w-full", children: [label && ((0, jsx_runtime_1.jsx)("label", { htmlFor: inputId, className: "block text-xs font-medium text-[rgb(var(--fg-default))] mb-1.5", suppressHydrationWarning: true, children: label })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [LeftIcon && ((0, jsx_runtime_1.jsx)("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2", children: (0, jsx_runtime_1.jsx)(LeftIcon, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" }) })), (0, jsx_runtime_1.jsx)("input", { id: inputId, name: inputName, type: type, className: (0, utils_1.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 && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.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: (0, jsx_runtime_1.jsx)(RightIcon, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" }) }))] }), error && typeof error === 'string' && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-[rgb(var(--color-danger))]", children: error })), helper && !error && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-[rgb(var(--fg-muted))]", children: helper }))] }));
+});
+exports.Input = Input;
+Input.displayName = "Input";

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

@@ -0,0 +1,10 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = require("clsx");
+const Label = ({ className, children, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)("label", { className: (0, clsx_1.clsx)('block text-xs font-medium text-[rgb(var(--fg-default))] mb-1', className), ...props, children: children }));
+};
+exports.Label = Label;

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

@@ -0,0 +1,58 @@
+"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.Switch = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const utils_1 = require("../../../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 ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "switch", "aria-checked": checkedState, disabled: disabled, onClick: handleClick, ref: ref, className: (0, utils_1.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: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.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") }) }));
+});
+exports.Switch = Switch;
+Switch.displayName = "Switch";

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

@@ -0,0 +1,49 @@
+'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.Textarea = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const utils_1 = require("../../../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 ((0, jsx_runtime_1.jsxs)("div", { className: "w-full", children: [label && ((0, jsx_runtime_1.jsx)("label", { htmlFor: textareaId, className: "block text-sm font-medium text-[rgb(var(--fg-default))] mb-2", children: label })), (0, jsx_runtime_1.jsx)("textarea", { id: textareaId, name: textareaName, ref: ref, className: (0, utils_1.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 && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1.5 text-xs text-[rgb(var(--fg-muted))]", children: helper })), error && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1.5 text-xs text-[rgb(var(--color-error))]", children: error }))] }));
+});
+exports.Textarea = Textarea;
+Textarea.displayName = "Textarea";