indas-ui 0.0.1 → 0.1.1

package/dist/components/providers/query-provider.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { useState } from 'react';
+import { DEFAULT_QUERY_CONFIG } from '../../lib/react-query-config.js';
+export function QueryProvider({ children }) {
+    // Create a client instance - one per user session
+    const [queryClient] = useState(() => new QueryClient({
+        defaultOptions: {
+            queries: {
+                // Use global config from react-query-config.ts
+                ...DEFAULT_QUERY_CONFIG,
+                // Retry failed requests once
+                retry: 1,
+                // Don't retry on 4xx errors (client errors)
+                retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+            },
+            mutations: {
+                // Retry mutations once
+                retry: 1,
+            },
+        },
+    }));
+    return (_jsxs(QueryClientProvider, { client: queryClient, children: [children, process.env.NODE_ENV === 'development' && (_jsx(ReactQueryDevtools, { initialIsOpen: false }))] }));
+}

package/dist/components/providers/session-provider.d.ts

@@ -0,0 +1,7 @@
+import type { Session } from "next-auth";
+interface AuthSessionProviderProps {
+    children: React.ReactNode;
+    session: Session | null;
+}
+export declare function AuthSessionProvider({ children, session }: AuthSessionProviderProps): import("react").JSX.Element;
+export {};

package/dist/components/providers/session-provider.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SessionProvider, useSession, signOut } from "next-auth/react";
+import { useCallback, useEffect, useState, useRef } from "react";
+import { SessionExpiryWarning } from "../modals/session-expiry-warning.js";
+import { SessionAdapterProvider } from "../../contexts/SessionAdapterContext.js";
+import { performLogoutCleanup } from "../../lib/utils/logout-cleanup.js";
+import { setSessionExpiredHandler } from "../../lib/api/core/client.js";
+// Session lifetime — MUST match `maxAge` in [...nextauth].ts (session + jwt + hard-expiry).
+const SESSION_MAX_AGE_MS = 8 * 60 * 60 * 1000; // 8 hours
+const WARNING_BEFORE_MS = 5 * 60 * 1000; // 5 minutes
+const CHECK_INTERVAL_MS = 30000; // 30 seconds
+// Session expiry monitor component
+function SessionExpiryMonitor({ children }) {
+    const { data: session, status, update } = useSession();
+    const [showExpiryWarning, setShowExpiryWarning] = useState(false);
+    const [minutesRemaining, setMinutesRemaining] = useState(0);
+    // Guards against double-fire: the expiry timer, the status-flip effect, and the
+    // APIClient 401 handler can all reach logout near the same moment. Without this,
+    // performLogoutCleanup() runs concurrently (double IndexedDB delete, double redirect).
+    const hasLoggedOut = useRef(false);
+    const handleAutoLogout = async () => {
+        if (hasLoggedOut.current)
+            return;
+        hasLoggedOut.current = true;
+        try {
+            await performLogoutCleanup();
+            await signOut({ callbackUrl: '/login', redirect: true });
+        }
+        catch {
+            await signOut({ callbackUrl: '/login', redirect: true });
+        }
+    };
+    // Register global session-expired handler so APIClient 401s trigger sign-out
+    const autoLogoutRef = useRef(handleAutoLogout);
+    autoLogoutRef.current = handleAutoLogout;
+    useEffect(() => {
+        setSessionExpiredHandler(() => { autoLogoutRef.current(); });
+    }, []);
+    // Auto-logout ONLY on a confirmed authenticated→unauthenticated flip within this tab —
+    // i.e. the cookie was valid and then went away (hard expiry from the jwt callback, or
+    // logout in another tab). A freshly-opened tab reads the same shared cookie and is
+    // authenticated immediately; its brief `loading → unauthenticated → authenticated`
+    // flicker is NOT expiry and must never trigger logout — that was logging users out the
+    // instant they opened a second tab.
+    // Note: this intentionally does NOT redirect a tab that starts unauthenticated. Genuine
+    // expiry is caught by the loginTime+maxAge timer below and by the APIClient 401 handler;
+    // the rare "expired cookie + manual refresh before either notices" case is left to those.
+    const wasAuthenticated = useRef(false);
+    useEffect(() => {
+        if (status === 'authenticated') {
+            wasAuthenticated.current = true;
+            return;
+        }
+        if (status === 'unauthenticated' && wasAuthenticated.current) {
+            wasAuthenticated.current = false;
+            handleAutoLogout();
+        }
+    }, [status]);
+    // Check session expiry on a timer.
+    // Expiry is derived from loginTime + SESSION_MAX_AGE_MS — NOT session.expires.
+    // session.expires does not reliably move forward on a manual update(), so it would
+    // fire logout at the original time even after Extend. loginTime IS reset by the jwt
+    // callback on Extend, so a successful extend produces a new session object → this
+    // effect re-runs with a fresh expiry and the timer re-arms correctly.
+    const loginTime = session?.user?.loginTime;
+    useEffect(() => {
+        if (status !== "authenticated" || !loginTime)
+            return;
+        const expiryMs = new Date(loginTime).getTime() + SESSION_MAX_AGE_MS;
+        const tick = () => {
+            const timeUntilExpiry = expiryMs - Date.now();
+            if (timeUntilExpiry <= 0) {
+                handleAutoLogout();
+                return;
+            }
+            if (timeUntilExpiry <= WARNING_BEFORE_MS) {
+                setMinutesRemaining(Math.ceil(timeUntilExpiry / (60 * 1000)));
+                setShowExpiryWarning(true);
+            }
+            else {
+                // Extend pushed expiry back out — clear any stale warning.
+                setShowExpiryWarning(false);
+            }
+        };
+        tick(); // run immediately so a re-arm after Extend reflects right away
+        const interval = setInterval(tick, CHECK_INTERVAL_MS);
+        return () => clearInterval(interval);
+    }, [loginTime, status]);
+    const handleExtendSession = async () => {
+        try {
+            // Resets loginTime on the server (jwt trigger==='update'); the returned session
+            // re-arms the expiry timer above. Hide the warning optimistically.
+            setShowExpiryWarning(false);
+            await update();
+        }
+        catch (error) {
+            console.error('Session extend error:', error);
+        }
+    };
+    const handleLogoutNow = async () => {
+        setShowExpiryWarning(false);
+        await handleAutoLogout();
+    };
+    // Stable identity: a fresh function per render would rebuild the adapter value and
+    // re-fire every consumer keyed on the session (ModuleAuth permission refetch).
+    const adapterSignOut = useCallback(async (options) => {
+        await signOut({ callbackUrl: options?.callbackUrl ?? "/login", redirect: options?.redirect ?? true });
+    }, []);
+    return (
+    // Feed the auth-agnostic adapter so layout components never import next-auth themselves.
+    _jsxs(SessionAdapterProvider, { user: session?.user ?? null, status: status, signOut: adapterSignOut, children: [children, _jsx(SessionExpiryWarning, { isOpen: showExpiryWarning, onExtend: handleExtendSession, onLogout: handleLogoutNow, minutesRemaining: minutesRemaining })] }));
+}
+export function AuthSessionProvider({ children, session }) {
+    return (_jsx(SessionProvider, { session: session, refetchInterval: 5 * 60, refetchOnWindowFocus: false, children: _jsx(SessionExpiryMonitor, { children: children }) }));
+}

package/dist/components/theme/ThemeCustomizer.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+interface ThemeCustomizerProps {
+    className?: string;
+    showModeToggle?: boolean;
+    compact?: boolean;
+    mode?: 'card' | 'dialog';
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * ThemeCustomizer - Universal Theme Component
+ *
+ * Supports multiple modes:
+ * - Card mode (for settings pages)
+ * - Dialog mode (for header/floating popup)
+ * - Compact mode (for toolbar/quick access)
+ */
+export declare function ThemeCustomizer({ className, showModeToggle, compact, mode, open, onOpenChange }: ThemeCustomizerProps): React.JSX.Element;
+/**
+ * Floating Theme Toggle Button - Quick Access
+ */
+export declare function ThemeToggle({ className }: {
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Quick Theme Switcher - Compact Inline Version
+ */
+export declare function QuickThemeSwitcher({ className }: {
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Theme Variant Selector - Ultra Compact
+ */
+export declare function ThemeVariantSelector({ className }: {
+    className?: string;
+}): React.JSX.Element;
+export {};

package/dist/components/theme/ThemeCustomizer.js

@@ -0,0 +1,178 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTheme, useCustomThemeGenerator } from '../../hooks/useTheme.js';
+import { Button } from '../ui/index.js';
+import { Card, CardContent } from '../ui/index.js';
+import { Input } from '../ui/index.js';
+import { Switch } from '../ui/index.js';
+import { Badge } from '../ui/index.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/index.js';
+import { useTranslation } from '../../hooks/useTranslation.js';
+import { Palette, Sun, Moon, Check, RefreshCw, Sparkles, Zap } from 'lucide-react';
+// Define theme variants outside component to avoid translation issues with t()
+const getThemeVariants = (t) => [
+    {
+        variant: 'default',
+        name: t('Default'),
+        description: t('Modern blue tones - Professional and trustworthy'),
+        color: '#003366',
+        gradient: 'from-blue-900 to-blue-700'
+    },
+    {
+        variant: 'green',
+        name: t('Forest'),
+        description: t('Nature-inspired greens - Growth and harmony'),
+        color: '#047857',
+        gradient: 'from-green-700 to-emerald-600'
+    },
+    {
+        variant: 'red',
+        name: t('Crimson'),
+        description: t('Bold red accents - Energy and passion'),
+        color: '#B91C1C',
+        gradient: 'from-red-700 to-rose-600'
+    },
+    {
+        variant: 'purple',
+        name: t('Royal'),
+        description: t('Regal purple hues - Luxury and creativity'),
+        color: '#7C3AED',
+        gradient: 'from-purple-700 to-violet-600'
+    },
+    {
+        variant: 'orange',
+        name: t('Sunset'),
+        description: t('Warm sunset palette - Optimism and warmth'),
+        color: '#C2410C',
+        gradient: 'from-orange-700 to-amber-600'
+    },
+    {
+        variant: 'black',
+        name: t('Midnight'),
+        description: t('Deep night shades - Sophistication and depth'),
+        color: '#000000',
+        gradient: 'from-gray-900 to-black'
+    },
+    {
+        variant: 'custom',
+        name: t('Custom Color'),
+        description: t('AI Generated'),
+        color: '#1a365d',
+        gradient: 'from-indigo-900 to-blue-800'
+    },
+];
+function ThemeCustomizerContent({ showModeToggle = true, compact = false }) {
+    const { t } = useTranslation();
+    const { theme, setVariant, setMode, toggleMode, isDark, customTheme, removeCustomTheme } = useTheme();
+    const { generateFromColor } = useCustomThemeGenerator();
+    const [customColor, setCustomColor] = useState('#3B82F6');
+    const [customName, setCustomName] = useState('');
+    const [isGenerating, setIsGenerating] = useState(false);
+    // Get translated theme variants
+    const THEME_VARIANTS = getThemeVariants(t);
+    const handleVariantChange = (variant) => {
+        setVariant(variant);
+    };
+    const handleCustomColorGenerate = async () => {
+        if (!customColor)
+            return;
+        setIsGenerating(true);
+        try {
+            const result = generateFromColor(customColor, customName || t('Custom Color'));
+            if (!result.success) {
+                console.error('Failed to generate theme:', result.error);
+            }
+        }
+        finally {
+            setIsGenerating(false);
+        }
+    };
+    if (compact) {
+        return (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "flex gap-1 p-1 bg-[rgb(var(--bg-subtle))] rounded-lg", children: THEME_VARIANTS.slice(0, 5).map(({ variant, color, name }) => (_jsx("button", { onClick: () => handleVariantChange(variant), className: `w-8 h-8 rounded border-2 transition-all hover:scale-110 ${theme.variant === variant
+                            ? 'border-[rgb(var(--bd-accent))] ring-2 ring-[rgb(var(--color-primary))] ring-offset-2'
+                            : 'border-[rgb(var(--bd-default))] hover:border-[rgb(var(--bd-strong))]'}`, style: { backgroundColor: color }, title: name }, variant))) }), showModeToggle && (_jsx(Button, { onClick: toggleMode, variant: "outline", size: "sm", className: "gap-2", title: `Switch to ${isDark ? 'light' : 'dark'} mode`, children: isDark ? _jsx(Sun, { className: "h-4 w-4" }) : _jsx(Moon, { className: "h-4 w-4" }) }))] }));
+    }
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between p-3 bg-[rgb(var(--bg-subtle))] rounded-lg border border-[rgb(var(--bd-default))]", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "p-2 bg-gradient-to-br from-[rgb(var(--color-primary))] to-[rgb(var(--color-secondary))] rounded-lg", children: _jsx(Palette, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: t('Theme Customizer') }), _jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: t('Full control over your app appearance') })] })] }), showModeToggle && (_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx("p", { className: "text-sm font-medium text-[rgb(var(--fg-default))] hidden sm:block", children: isDark ? t('Dark mode') : t('Light mode') }), _jsx(Switch, { checked: isDark, onCheckedChange: toggleMode })] }))] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h4", { className: "text-sm font-medium text-[rgb(var(--fg-default))]", children: t('Color Themes') }), _jsxs(Badge, { variant: "secondary", className: "text-xs gap-1", children: [_jsx(Zap, { className: "h-3 w-3" }), t('Primary/Secondary/Tertiary')] })] }), _jsx("div", { className: "grid grid-cols-3 gap-2", children: THEME_VARIANTS.filter(v => v.variant !== 'custom').map(({ variant, name, color }) => (_jsxs("button", { onClick: () => handleVariantChange(variant), className: `group flex flex-col items-center gap-2 p-3 rounded-lg border-2 transition-all hover:bg-[rgb(var(--bg-hover))] ${theme.variant === variant
+                                ? 'border-[rgb(var(--color-primary))] bg-[rgb(var(--bg-subtle))] ring-2 ring-[rgb(var(--color-primary))] ring-offset-1'
+                                : 'border-[rgb(var(--bd-default))]'}`, title: THEME_VARIANTS.find(t => t.variant === variant)?.description, children: [_jsxs("div", { className: "flex gap-0.5 w-full h-12", children: [_jsx("div", { className: "flex-1 rounded-l", style: { backgroundColor: color }, title: t('Primary') }), _jsx("div", { className: "flex-1", style: { backgroundColor: color, opacity: 0.7 }, title: t('Secondary') }), _jsx("div", { className: "flex-1 rounded-r", style: { backgroundColor: color, opacity: 0.4 }, title: t('Tertiary') })] }), _jsxs("div", { className: "flex items-center gap-1.5 w-full justify-center", children: [_jsx("span", { className: "font-medium text-xs text-[rgb(var(--fg-default))] truncate", children: name.replace(' Navy', '').replace(' Green', '').replace(' Red', '').replace(' Purple', '').replace(' Orange', '').replace(' Black', '') }), theme.variant === variant && (_jsx(Check, { className: "h-3.5 w-3.5 text-[rgb(var(--color-primary))] flex-shrink-0" }))] })] }, variant))) })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h4", { className: "text-sm font-medium text-[rgb(var(--fg-default))]", children: t('Custom Color') }), _jsxs(Badge, { variant: "secondary", className: "text-xs gap-1", children: [_jsx(Sparkles, { className: "h-3 w-3" }), t('AI Generated')] })] }), _jsx("div", { className: "p-3 bg-gradient-to-br from-[rgb(var(--bg-subtle))] to-transparent rounded-lg border-2 border-[rgb(var(--bd-default))]", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-xs font-medium text-[rgb(var(--fg-muted))] mb-2", children: t('Theme Name') }), _jsx(Input, { value: customName, onChange: (e) => {
+                                                        setCustomName(e.target.value);
+                                                        // Auto-switch to custom theme when typing
+                                                        if (e.target.value && theme.variant !== 'custom') {
+                                                            handleVariantChange('custom');
+                                                        }
+                                                    }, placeholder: t('e.g., Indas Brand Theme'), className: "text-sm" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-xs font-medium text-[rgb(var(--fg-default))] mb-2", children: t('Primary Brand Color') }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "color", value: customColor, onChange: (e) => {
+                                                                setCustomColor(e.target.value);
+                                                                // Auto-switch to custom theme and auto-generate
+                                                                if (theme.variant !== 'custom') {
+                                                                    handleVariantChange('custom');
+                                                                }
+                                                                // Auto-generate after color change
+                                                                setTimeout(() => handleCustomColorGenerate(), 300);
+                                                            }, className: "w-10 h-10 rounded border-2 border-[rgb(var(--bd-default))] cursor-pointer", title: "Pick color" }), _jsx(Input, { value: customColor, onChange: (e) => {
+                                                                setCustomColor(e.target.value);
+                                                                // Auto-switch to custom theme when typing
+                                                                if (e.target.value && theme.variant !== 'custom') {
+                                                                    handleVariantChange('custom');
+                                                                }
+                                                            }, onBlur: handleCustomColorGenerate, placeholder: "#3B82F6", className: "text-sm font-mono flex-1" })] })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "p-2 bg-[rgb(var(--bg-surface))] rounded border border-[rgb(var(--bd-default))]", children: [_jsx("p", { className: "text-[10px] font-medium text-[rgb(var(--fg-muted))] mb-1.5", children: t('Live Preview') }), _jsxs("div", { className: "grid grid-cols-3 gap-1", children: [_jsx("div", { className: "h-10 rounded flex items-center justify-center text-white text-[9px] font-semibold", style: { backgroundColor: customColor }, children: t('Primary') }), _jsx("div", { className: "h-10 rounded flex items-center justify-center text-white text-[9px] font-semibold", style: {
+                                                                backgroundColor: (() => {
+                                                                    const hex = customColor;
+                                                                    const rgb = parseInt(hex.slice(1), 16);
+                                                                    const r = Math.min(255, ((rgb >> 16) & 255) + 25);
+                                                                    const g = Math.min(255, ((rgb >> 8) & 255) + 25);
+                                                                    const b = Math.min(255, (rgb & 255) + 25);
+                                                                    return `rgb(${r}, ${g}, ${b})`;
+                                                                })()
+                                                            }, children: t('Secondary') }), _jsx("div", { className: "h-10 rounded flex items-center justify-center text-white text-[9px] font-semibold", style: {
+                                                                backgroundColor: (() => {
+                                                                    const hex = customColor;
+                                                                    const rgb = parseInt(hex.slice(1), 16);
+                                                                    const r = Math.min(255, ((rgb >> 16) & 255) + 50);
+                                                                    const g = Math.min(255, ((rgb >> 8) & 255) + 50);
+                                                                    const b = Math.min(255, (rgb & 255) + 50);
+                                                                    return `rgb(${r}, ${g}, ${b})`;
+                                                                })()
+                                                            }, children: t('Tertiary') })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Button, { onClick: handleCustomColorGenerate, disabled: isGenerating || !customColor, className: "flex-1", size: "sm", children: isGenerating ? (_jsxs(_Fragment, { children: [_jsx(RefreshCw, { className: "h-3.5 w-3.5 mr-2 animate-spin" }), t('Loading...')] })) : (_jsxs(_Fragment, { children: [_jsx(Sparkles, { className: "h-3.5 w-3.5 mr-2" }), t('Apply Theme')] })) }), customTheme && (_jsx(Button, { onClick: removeCustomTheme, variant: "outline", size: "sm", children: t('Reset') }))] })] })] }) })] })] }));
+}
+/**
+ * ThemeCustomizer - Universal Theme Component
+ *
+ * Supports multiple modes:
+ * - Card mode (for settings pages)
+ * - Dialog mode (for header/floating popup)
+ * - Compact mode (for toolbar/quick access)
+ */
+export function ThemeCustomizer({ className, showModeToggle = true, compact = false, mode = 'card', open, onOpenChange }) {
+    const { t } = useTranslation();
+    // Dialog Mode
+    if (mode === 'dialog') {
+        return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-2xl max-h-[90vh] overflow-y-auto", children: [_jsx(DialogHeader, { children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "p-2 bg-gradient-to-br from-[rgb(var(--color-primary))] to-[rgb(var(--color-secondary))] rounded-lg", children: _jsx(Palette, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(DialogTitle, { className: "text-lg", children: t('Theme Customizer') }), _jsx("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-1", children: t('Full control over your app appearance') })] })] }) }), _jsx(ThemeCustomizerContent, { showModeToggle: showModeToggle, compact: compact })] }) }));
+    }
+    // Card Mode (default)
+    return (_jsx(Card, { className: className, children: _jsx(CardContent, { className: "pt-6", children: _jsx(ThemeCustomizerContent, { showModeToggle: showModeToggle, compact: compact }) }) }));
+}
+/**
+ * Floating Theme Toggle Button - Quick Access
+ */
+export function ThemeToggle({ className }) {
+    const { isDark, toggleMode } = useTheme();
+    return (_jsx(Button, { onClick: toggleMode, variant: "outline", size: "sm", className: `fixed bottom-4 left-4 z-50 rounded-full w-12 h-12 p-0 shadow-lg hover:shadow-xl transition-all ${className}`, title: `Switch to ${isDark ? 'light' : 'dark'} mode`, children: isDark ? _jsx(Sun, { className: "h-5 w-5" }) : _jsx(Moon, { className: "h-5 w-5" }) }));
+}
+/**
+ * Quick Theme Switcher - Compact Inline Version
+ */
+export function QuickThemeSwitcher({ className }) {
+    return (_jsx("div", { className: className, children: _jsx(ThemeCustomizerContent, { compact: true }) }));
+}
+/**
+ * Theme Variant Selector - Ultra Compact
+ */
+export function ThemeVariantSelector({ className }) {
+    const { t } = useTranslation();
+    const { theme, setVariant } = useTheme();
+    const THEME_VARIANTS = getThemeVariants(t);
+    return (_jsx("div", { className: `flex gap-1 p-1 bg-[rgb(var(--bg-subtle))] rounded-lg ${className}`, children: THEME_VARIANTS.slice(0, 5).map(({ variant, color, name }) => (_jsx("button", { onClick: () => setVariant(variant), className: `w-6 h-6 rounded border-2 transition-all ${theme.variant === variant
+                ? 'border-[rgb(var(--bd-accent))] scale-110'
+                : 'border-[rgb(var(--bd-default))] hover:border-[rgb(var(--bd-strong))]'}`, style: { backgroundColor: color }, title: name }, variant))) }));
+}

package/dist/components/ui/buttons/button.d.ts

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { LucideIcon } from "lucide-react";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'ghost' | 'destructive' | 'footer-primary' | 'footer-secondary' | 'action-create' | 'action-save' | 'action-save-as' | 'action-edit' | 'action-delete' | 'action-print' | 'action-send' | 'action-mail' | 'action-download' | 'action-refresh' | 'action-cancel' | 'action-secondary' | 'action-apply' | 'action-back';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'footer';
+    loading?: boolean;
+    icon?: LucideIcon | React.ReactNode;
+    iconPosition?: 'left' | 'right';
+    /** When true, renders as circular icon-only button (36px × 36px) */
+    iconOnly?: boolean;
+    /** Tooltip text for icon-only buttons */
+    tooltip?: string;
+    /** When true, renders as inline button on desktop + floating action button on mobile (bottom-right, above bottom nav) */
+    fab?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * CheckboxButton - Toggle button with checkbox-style UI
+ * Styled like "Set First Plan as Master"
+ */
+export interface CheckboxButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    label: string;
+    size?: 'xs' | 'sm' | 'md';
+}
+export declare const CheckboxButton: React.ForwardRefExoticComponent<CheckboxButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * InputButton - Inline input with label in bordered container
+ * Styled like "Show Wastage upto: 30%"
+ */
+export interface InputButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label: string;
+    size?: 'sm' | 'md';
+    inputClassName?: string;
+    suffix?: string;
+    /** Show inline minus/plus stepper buttons around the input. */
+    stepper?: boolean;
+    /** Called when stepper buttons are clicked. Receives 'inc' or 'dec'.
+     *  Use this to advance to the next valid value (e.g. skip 4 → 5). */
+    onStep?: (direction: 'inc' | 'dec') => void;
+    /** Optional gate for disabling the stepper buttons (e.g. at min/max). */
+    canStep?: (direction: 'inc' | 'dec') => boolean;
+}
+export declare const InputButton: React.ForwardRefExoticComponent<InputButtonProps & React.RefAttributes<HTMLInputElement>>;
+/**
+ * FilterPillButton - Status filter pill button with count
+ * Used for filtering data by status (All, Pending, Approved, etc.)
+ */
+export type FilterPillVariant = 'primary' | 'warning' | 'success' | 'orange' | 'error';
+export interface FilterPillButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    label: string;
+    shortLabel?: string;
+    count: number;
+    variant: FilterPillVariant;
+    isSelected: boolean;
+}
+export declare const FilterPillButton: React.ForwardRefExoticComponent<FilterPillButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button };