indas-ui 0.0.1 → 0.1.1

package/dist/components/ui/display/text.js

@@ -0,0 +1,57 @@
+'use client';
+import * as React from 'react';
+import { cn } from '../../../lib/utils.js';
+import { cva } from 'class-variance-authority';
+const textVariants = cva('transition-colors', {
+    variants: {
+        variant: {
+            default: 'text-gray-900',
+            muted: 'text-gray-500',
+            primary: 'text-blue-600',
+            secondary: 'text-gray-600',
+            destructive: 'text-red-600',
+            success: 'text-green-600',
+            warning: 'text-orange-600',
+            link: 'text-blue-600 hover:text-blue-800 underline cursor-pointer',
+            'link-hover': 'text-black hover:text-blue-600 hover:underline cursor-pointer'
+        },
+        size: {
+            xs: 'text-xs',
+            sm: 'text-sm',
+            base: 'text-base',
+            lg: 'text-lg',
+            xl: 'text-xl',
+            '2xl': 'text-2xl',
+            '3xl': 'text-3xl',
+            '4xl': 'text-4xl'
+        },
+        weight: {
+            normal: 'font-normal',
+            medium: 'font-medium',
+            semibold: 'font-semibold',
+            bold: 'font-bold'
+        },
+        align: {
+            left: 'text-left',
+            center: 'text-center',
+            right: 'text-right',
+            justify: 'text-justify'
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'base',
+        weight: 'normal',
+        align: 'left'
+    }
+});
+const Text = React.forwardRef(({ className, variant, size, weight, align, as: Component = 'span', truncate, children, ...props }, ref) => {
+    const textClasses = cn(textVariants({ variant, size, weight, align }), truncate && 'truncate', className);
+    return React.createElement(Component, {
+        className: textClasses,
+        ref,
+        ...props
+    }, children);
+});
+Text.displayName = 'Text';
+export { Text, textVariants };

package/dist/components/ui/feedback/alert.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: {
+    variant?: "destructive" | "default";
+} & import("class-variance-authority/types").ClassProp) => string> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export { Alert, AlertTitle, AlertDescription };

package/dist/components/ui/feedback/alert.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils.js";
+const alertVariants = cva("relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", {
+    variants: {
+        variant: {
+            default: "bg-background text-foreground",
+            destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+const Alert = React.forwardRef(({ className, variant, ...props }, ref) => (_jsx("div", { ref: ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props })));
+Alert.displayName = "Alert";
+const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h5", { ref: ref, className: cn("mb-1 font-medium leading-none tracking-tight", className), ...props })));
+AlertTitle.displayName = "AlertTitle";
+const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("text-sm [&_p]:leading-relaxed", className), ...props })));
+AlertDescription.displayName = "AlertDescription";
+export { Alert, AlertTitle, AlertDescription };

package/dist/components/ui/feedback/badge.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: {
+    variant?: "secondary" | "outline" | "destructive" | "warning" | "success" | "orange" | "cyan" | "indigo" | "lime" | "pink" | "purple" | "teal" | "violet" | "default" | "department" | "module" | "danger" | "info" | "amber" | "emerald" | "sky" | "rose" | "primary-selected" | "warning-selected" | "success-selected" | "orange-selected" | "error-selected" | "primary-unselected" | "warning-unselected" | "success-unselected" | "orange-unselected" | "error-unselected";
+    size?: "sm" | "lg" | "default";
+} & import("class-variance-authority/types").ClassProp) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, size, ...props }: BadgeProps): React.JSX.Element;
+declare namespace Badge {
+    var displayName: string;
+}
+/**
+ * FilterBadge - Clickable badge for status filters
+ * Responsive: smaller on mobile, full text on desktop
+ */
+export type FilterBadgeVariant = 'primary' | 'warning' | 'success' | 'orange' | 'error';
+export interface FilterBadgeProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    label: string;
+    shortLabel?: string;
+    count: number;
+    variant: FilterBadgeVariant;
+    selected?: boolean;
+}
+declare function FilterBadge({ label, shortLabel, count, variant, selected, className, ...props }: FilterBadgeProps): React.JSX.Element;
+declare namespace FilterBadge {
+    var displayName: string;
+}
+/**
+ * FilterBadgeGroup - Badges on desktop, compact dropdown on mobile
+ */
+export interface FilterBadgeItem {
+    id: string;
+    label: string;
+    shortLabel?: string;
+    count: number;
+    variant: FilterBadgeVariant;
+}
+export interface FilterBadgeGroupProps {
+    items: FilterBadgeItem[];
+    selected: string;
+    onSelect: (id: string) => void;
+    className?: string;
+}
+declare function FilterBadgeGroup({ items, selected, onSelect, className }: FilterBadgeGroupProps): React.JSX.Element;
+declare namespace FilterBadgeGroup {
+    var displayName: string;
+}
+export { Badge, FilterBadge, FilterBadgeGroup, badgeVariants };

package/dist/components/ui/feedback/badge.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils.js";
+import { useDevice } from '../../../contexts/DeviceContext.js';
+import { Dropdown } from '../../forms/dropdown/index.js';
+const badgeVariants = cva("inline-flex items-center rounded-full border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 truncate", {
+    variants: {
+        variant: {
+            default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+            secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+            outline: "text-foreground",
+            // Department-style badge with CSS variables
+            department: "border-transparent bg-[color-mix(in_srgb,rgb(var(--color-primary))_10%,white)] text-[rgb(var(--color-primary))]",
+            // Module type style badge
+            module: "border-transparent bg-[color-mix(in_srgb,rgb(var(--color-purple))_10%,white)] text-[rgb(var(--color-purple))]",
+            // Status badges
+            success: "border-transparent bg-[rgb(var(--color-success-subtle))] text-[rgb(var(--color-success))]",
+            warning: "border-transparent bg-yellow-100 text-yellow-800",
+            danger: "border-transparent bg-red-100 text-red-800",
+            info: "border-transparent bg-blue-100 text-blue-800",
+            // Additional color variants for departments
+            purple: "border-transparent bg-purple-100 text-purple-800",
+            pink: "border-transparent bg-pink-100 text-pink-800",
+            orange: "border-transparent bg-orange-100 text-orange-800",
+            teal: "border-transparent bg-teal-100 text-teal-800",
+            cyan: "border-transparent bg-cyan-100 text-cyan-800",
+            indigo: "border-transparent bg-indigo-100 text-indigo-800",
+            violet: "border-transparent bg-violet-100 text-violet-800",
+            amber: "border-transparent bg-amber-100 text-amber-800",
+            lime: "border-transparent bg-lime-100 text-lime-800",
+            emerald: "border-transparent bg-emerald-100 text-emerald-800",
+            sky: "border-transparent bg-sky-100 text-sky-800",
+            rose: "border-transparent bg-rose-100 text-rose-800",
+            // Clickable filter variants (selected state)
+            'primary-selected': "border-transparent bg-[rgb(var(--color-primary))] text-white shadow-md",
+            'warning-selected': "border-transparent bg-[rgb(var(--color-warning))] text-white shadow-md",
+            'success-selected': "border-transparent bg-[rgb(var(--color-success))] text-white shadow-md",
+            'orange-selected': "border-transparent bg-[rgb(var(--color-orange))] text-white shadow-md",
+            'error-selected': "border-transparent bg-[rgb(var(--color-error))] text-white shadow-md",
+            // Clickable filter variants (unselected state)
+            'primary-unselected': "border-transparent bg-[rgb(var(--color-primary-subtle))] text-[rgb(var(--color-primary))] hover:opacity-80",
+            'warning-unselected': "border-transparent bg-[rgb(var(--color-warning-subtle))] text-[rgb(var(--color-warning))] hover:opacity-80",
+            'success-unselected': "border-transparent bg-[rgb(var(--color-success-subtle))] text-[rgb(var(--color-success))] hover:opacity-80",
+            'orange-unselected': "border-transparent bg-[rgb(var(--color-orange-subtle))] text-[rgb(var(--color-orange))] hover:opacity-80",
+            'error-unselected': "border-transparent bg-[rgb(var(--color-error-subtle))] text-[rgb(var(--color-error))] hover:opacity-80",
+        },
+        size: {
+            default: "px-1.5 sm:px-2.5 py-0.5 text-[10px] sm:text-xs",
+            sm: "px-1.5 py-0 text-[9px] leading-4",
+            lg: "px-3 py-1 text-sm",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Badge({ className, variant, size, ...props }) {
+    return (_jsx("div", { className: cn(badgeVariants({ variant, size }), className), ...props }));
+}
+Badge.displayName = 'Badge';
+function FilterBadge({ label, shortLabel, count, variant, selected = false, className, ...props }) {
+    const selectedVariant = `${variant}-selected`;
+    const unselectedVariant = `${variant}-unselected`;
+    return (_jsxs("button", { type: "button", className: cn(badgeVariants({ variant: selected ? selectedVariant : unselectedVariant }), 'px-2 sm:px-3 py-1 sm:py-1.5 font-semibold cursor-pointer hover:scale-105 transition-all', className), ...props, children: [_jsx("span", { className: "hidden sm:inline", children: label }), shortLabel && _jsx("span", { className: "sm:hidden", children: shortLabel }), !shortLabel && _jsx("span", { className: "sm:hidden", children: label }), _jsxs("span", { className: "ml-0.5 sm:ml-1 opacity-75", children: ["(", count, ")"] })] }));
+}
+FilterBadge.displayName = 'FilterBadge';
+const variantColorVar = {
+    primary: '--color-primary',
+    warning: '--color-warning',
+    success: '--color-success',
+    orange: '--color-orange',
+    error: '--color-error',
+};
+function FilterBadgeGroup({ items, selected, onSelect, className }) {
+    const { isMobile } = useDevice();
+    if (isMobile) {
+        const selectedItem = items.find(i => i.id === selected);
+        const cssVar = selectedItem ? variantColorVar[selectedItem.variant] : '--color-primary';
+        return (_jsx("div", { className: cn('rounded-full overflow-hidden min-w-0 [&_button]:!bg-transparent [&_button]:!border-transparent [&_button]:!text-white [&_button]:!shadow-none [&_svg]:!text-white [&_button]:!min-h-0 [&_[role=button]]:!min-h-0 [&_button]:!h-7 [&_[role=button]]:!h-7', className), style: { backgroundColor: `rgb(var(${cssVar}))` }, children: _jsx(Dropdown, { options: items.map(item => ({ value: item.id, label: `${item.label} (${item.count})` })), value: selected, onValueChange: (val) => onSelect(val), size: "sm", clearable: false }) }));
+    }
+    return (_jsx("div", { className: cn('flex items-center justify-start gap-2 flex-wrap', className), children: items.map(item => (_jsx(FilterBadge, { label: item.label, shortLabel: item.shortLabel, count: item.count, variant: item.variant, selected: selected === item.id, onClick: () => onSelect(item.id) }, item.id))) }));
+}
+FilterBadgeGroup.displayName = 'FilterBadgeGroup';
+export { Badge, FilterBadge, FilterBadgeGroup, badgeVariants };

package/dist/components/ui/feedback/progress.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Progress };

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

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "../../../lib/utils.js";
+const Progress = React.forwardRef(({ className, value, ...props }, ref) => (_jsx(ProgressPrimitive.Root, { ref: ref, className: cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className), ...props, children: _jsx(ProgressPrimitive.Indicator, { className: "h-full w-full flex-1 bg-primary transition-all", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) })));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+export { Progress };

package/dist/components/ui/feedback/reminder-button.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+import * as React from 'react';
+import { type ReminderModule } from '../../../lib/api/activity/notifications/index.js';
+export interface ReminderButtonProps {
+    module: ReminderModule;
+    documentId: number;
+    /** Called after a reminder or escalation lands, so the caller can refresh. */
+    onSent?: () => void;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+export declare function ReminderButton({ module, documentId, onSent, size, className }: ReminderButtonProps): React.JSX.Element;
+export declare namespace ReminderButton {
+    var displayName: string;
+}

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

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "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.
+ */
+import * as React from 'react';
+import { BellRing, ShieldAlert } from 'lucide-react';
+import { useSessionAdapter } from '../../../contexts/SessionAdapterContext.js';
+import { Button } from '../buttons/button.js';
+import { useLanguage } from '../../../contexts/LanguageContext.js';
+import { useGlobalAlert } from '../../../contexts/GlobalAlertContext.js';
+import { RemindersAPI } from '../../../lib/api/activity/notifications/index.js';
+export function ReminderButton({ module, documentId, onSent, size = 'sm', className }) {
+    const { data: session } = useSessionAdapter();
+    const { t } = useLanguage();
+    const alerts = 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 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 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 (_jsxs("span", { className: `inline-flex items-center gap-1.5 text-xs text-[rgb(var(--color-warning))] ${className || ''}`, children: [_jsx(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 (_jsxs("span", { className: `inline-flex items-center gap-1.5 text-xs text-[rgb(var(--fg-muted))] ${className || ''}`, children: [_jsx(BellRing, { className: "h-3.5 w-3.5" }), t('Reminded'), " ", used, "/", max] }));
+    }
+    return (_jsx(Button, { variant: used >= max - 1 ? 'action-cancel' : 'action-secondary', size: size, icon: 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/components/ui/feedback/skeleton-table.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface SkeletonTableProps {
+    rows?: number;
+    columns?: number;
+}
+/**
+ * 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} />
+ * )}
+ */
+export declare function SkeletonTable({ rows, columns }: SkeletonTableProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from './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} />
+ * )}
+ */
+export function SkeletonTable({ rows = 10, columns = 6 }) {
+    return (_jsxs("div", { className: "w-full border border-[rgb(var(--bd-default))] rounded-lg overflow-hidden bg-[rgb(var(--bg-surface))]", children: [_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) => (_jsx(Skeleton, { width: "80%", height: "16px" }, `header-${i}`))) }), _jsx("div", { className: "divide-y divide-[rgb(var(--bd-subtle))]", children: Array.from({ length: rows }).map((_, rowIndex) => (_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) => (_jsx(Skeleton, { width: colIndex === 0 ? '60%' : '90%', height: "14px" }, `cell-${rowIndex}-${colIndex}`))) }, `row-${rowIndex}`))) })] }));
+}

package/dist/components/ui/feedback/skeleton.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Width of the skeleton (can be CSS value like '100%', '200px', etc.)
+     */
+    width?: string | number;
+    /**
+     * Height of the skeleton (can be CSS value like '40px', '2rem', etc.)
+     */
+    height?: string | number;
+    /**
+     * Border radius variant
+     */
+    variant?: 'default' | 'rounded' | 'circular';
+    /**
+     * Animation type
+     */
+    animation?: 'pulse' | 'wave' | 'none';
+}
+/**
+ * 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>
+ */
+export declare function Skeleton({ width, height, variant, animation, className, style, ...props }: SkeletonProps): React.JSX.Element;
+/**
+ * Skeleton for text lines
+ */
+export declare function SkeletonText({ lines, className }: {
+    lines?: number;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Skeleton for form fields (matching your modal layout)
+ */
+export declare function SkeletonFormFields({ count, columns }: {
+    count?: number;
+    columns?: number;
+}): React.JSX.Element;
+export {};

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

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../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>
+ */
+export 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 (_jsx("div", { className: 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
+ */
+export function SkeletonText({ lines = 3, className }) {
+    return (_jsx("div", { className: cn('space-y-2', className), children: Array.from({ length: lines }).map((_, i) => (_jsx(Skeleton, { width: i === lines - 1 ? '60%' : '100%', height: "1rem" }, i))) }));
+}
+/**
+ * Skeleton for form fields (matching your modal layout)
+ */
+export function SkeletonFormFields({ count = 8, columns = 4 }) {
+    return (_jsx("div", { className: `grid grid-cols-12 gap-3`, children: Array.from({ length: count }).map((_, i) => (_jsxs("div", { className: `col-span-12 md:col-span-6 lg:col-span-${12 / columns} space-y-2`, children: [_jsx(Skeleton, { width: "40%", height: "14px" }), _jsx(Skeleton, { width: "100%", height: "40px" })] }, i))) }));
+}

package/dist/components/ui/feedback/tooltip.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface TooltipDetailedProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
+    title?: string;
+    actions?: Array<{
+        label: string;
+        shortcut?: string;
+    }>;
+}
+declare const TooltipDetailed: React.ForwardRefExoticComponent<TooltipDetailedProps & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipDetailed, TooltipProvider };

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

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "../../../lib/utils.js";
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+// Default tooltip - Glass style for simple text
+const TooltipContent = React.forwardRef(({ className, sideOffset = 5, ...props }, ref) => (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: 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 }) })));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+const TooltipDetailed = React.forwardRef(({ className, title = "Actions", actions = [], sideOffset = 5, children, ...props }, ref) => (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: 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 && (_jsx("div", { className: "px-2.5 py-1 bg-[rgb(var(--bg-subtle))] border-b border-[rgb(var(--bd-default))]", children: _jsx("span", { className: "text-[11px] font-semibold text-[rgb(var(--fg-default))]", children: title }) })), actions.length > 0 ? (_jsx("div", { className: "px-2.5 py-1.5 space-y-0.5", children: actions.map((action, i) => (_jsx("p", { className: "text-[11px] text-[rgb(var(--fg-muted))]", children: action.label }, i))) })) : (children && _jsx("div", { className: "px-2.5 py-1.5", children: children }))] }) })));
+TooltipDetailed.displayName = "TooltipDetailed";
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipDetailed, TooltipProvider };

package/dist/components/ui/form-toggle.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+export interface FormToggleProps {
+    /** Whether the form section is expanded */
+    isExpanded: boolean;
+    /** Callback when toggle state changes */
+    onToggle: (expanded: boolean) => void;
+    /** Title to display in the header */
+    title?: string;
+    /** Title when creating new record */
+    createTitle?: string;
+    /** Title when editing existing record */
+    editTitle?: string;
+    /** Whether currently editing a record */
+    isEditing?: boolean;
+    /** Form content to display when expanded */
+    children: React.ReactNode;
+    /** Additional actions to show in header (right side) */
+    headerActions?: React.ReactNode;
+    /** Show "New" button when collapsed */
+    showNewButton?: boolean;
+    /** Custom "New" button text */
+    newButtonText?: string;
+    /** Custom class for the container */
+    className?: string;
+    /** Custom class for the content area */
+    contentClassName?: string;
+    /** Disable the toggle */
+    disabled?: boolean;
+    /** Show close button when expanded */
+    showCloseButton?: boolean;
+    /** Callback when close button is clicked (optional - defaults to just toggling) */
+    onClose?: () => void;
+}
+/**
+ * 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>
+ * ```
+ */
+export declare function FormToggle({ isExpanded, onToggle, title, createTitle, editTitle, isEditing, children, headerActions, showNewButton, newButtonText, className, contentClassName, disabled, showCloseButton, onClose }: FormToggleProps): React.JSX.Element;

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

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp, Plus, X } from 'lucide-react';
+import { Button } from './index.js';
+import { cn } from '../../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>
+ * ```
+ */
+export 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 (_jsxs("div", { className: cn("flex-shrink-0 bg-[rgb(var(--bg-surface))]", className), children: [_jsxs("div", { className: "flex items-center justify-between px-6 py-3", children: [_jsxs("div", { className: cn("flex items-center gap-2 group", !disabled && "cursor-pointer"), onClick: () => !disabled && onToggle(!isExpanded), children: [isExpanded ? (_jsx(ChevronUp, { className: "h-4 w-4 text-[rgb(var(--fg-subtle))] group-hover:text-[rgb(var(--fg-default))] transition-colors" })) : (_jsx(ChevronDown, { className: "h-4 w-4 text-[rgb(var(--fg-subtle))] group-hover:text-[rgb(var(--fg-default))] transition-colors" })), _jsx("h3", { className: "text-sm font-semibold text-[rgb(var(--fg-default))] group-hover:text-[rgb(var(--color-primary))] transition-colors", children: displayTitle })] }), _jsxs("div", { className: "flex items-center gap-2", children: [!isExpanded && showNewButton && (_jsx(Button, { variant: "action-create", onClick: (e) => {
+                                    e.stopPropagation();
+                                    onToggle(true);
+                                }, icon: Plus, disabled: disabled, fab: true, children: newButtonText })), headerActions, isExpanded && showCloseButton && (_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: [_jsx(X, { className: "h-5 w-5 text-[rgb(var(--color-icon))]" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }), isExpanded && (_jsx("div", { className: cn("px-6 pb-4 pt-2 space-y-4 animate-in slide-in-from-top duration-200", contentClassName), children: children }))] }));
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    indeterminate?: boolean;
+}
+export declare const Checkbox: React.FC<CheckboxProps>;