indas-ui 0.0.1 → 0.1.1

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

@@ -0,0 +1,119 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthSessionProvider = AuthSessionProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("next-auth/react");
+const react_2 = require("react");
+const session_expiry_warning_1 = require("../modals/session-expiry-warning.js");
+const SessionAdapterContext_1 = require("../../contexts/SessionAdapterContext.js");
+const logout_cleanup_1 = require("../../lib/utils/logout-cleanup.js");
+const client_1 = require("../../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 } = (0, react_1.useSession)();
+    const [showExpiryWarning, setShowExpiryWarning] = (0, react_2.useState)(false);
+    const [minutesRemaining, setMinutesRemaining] = (0, react_2.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 = (0, react_2.useRef)(false);
+    const handleAutoLogout = async () => {
+        if (hasLoggedOut.current)
+            return;
+        hasLoggedOut.current = true;
+        try {
+            await (0, logout_cleanup_1.performLogoutCleanup)();
+            await (0, react_1.signOut)({ callbackUrl: '/login', redirect: true });
+        }
+        catch {
+            await (0, react_1.signOut)({ callbackUrl: '/login', redirect: true });
+        }
+    };
+    // Register global session-expired handler so APIClient 401s trigger sign-out
+    const autoLogoutRef = (0, react_2.useRef)(handleAutoLogout);
+    autoLogoutRef.current = handleAutoLogout;
+    (0, react_2.useEffect)(() => {
+        (0, client_1.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 = (0, react_2.useRef)(false);
+    (0, react_2.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;
+    (0, react_2.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 = (0, react_2.useCallback)(async (options) => {
+        await (0, react_1.signOut)({ callbackUrl: options?.callbackUrl ?? "/login", redirect: options?.redirect ?? true });
+    }, []);
+    return (
+    // Feed the auth-agnostic adapter so layout components never import next-auth themselves.
+    (0, jsx_runtime_1.jsxs)(SessionAdapterContext_1.SessionAdapterProvider, { user: session?.user ?? null, status: status, signOut: adapterSignOut, children: [children, (0, jsx_runtime_1.jsx)(session_expiry_warning_1.SessionExpiryWarning, { isOpen: showExpiryWarning, onExtend: handleExtendSession, onLogout: handleLogoutNow, minutesRemaining: minutesRemaining })] }));
+}
+function AuthSessionProvider({ children, session }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.SessionProvider, { session: session, refetchInterval: 5 * 60, refetchOnWindowFocus: false, children: (0, jsx_runtime_1.jsx)(SessionExpiryMonitor, { children: children }) }));
+}

package/dist/cjs/components/theme/ThemeCustomizer.js

@@ -0,0 +1,184 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeCustomizer = ThemeCustomizer;
+exports.ThemeToggle = ThemeToggle;
+exports.QuickThemeSwitcher = QuickThemeSwitcher;
+exports.ThemeVariantSelector = ThemeVariantSelector;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useTheme_1 = require("../../hooks/useTheme.js");
+const ui_1 = require("../ui/index.js");
+const ui_2 = require("../ui/index.js");
+const ui_3 = require("../ui/index.js");
+const ui_4 = require("../ui/index.js");
+const ui_5 = require("../ui/index.js");
+const ui_6 = require("../ui/index.js");
+const useTranslation_1 = require("../../hooks/useTranslation.js");
+const lucide_react_1 = require("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 } = (0, useTranslation_1.useTranslation)();
+    const { theme, setVariant, setMode, toggleMode, isDark, customTheme, removeCustomTheme } = (0, useTheme_1.useTheme)();
+    const { generateFromColor } = (0, useTheme_1.useCustomThemeGenerator)();
+    const [customColor, setCustomColor] = (0, react_1.useState)('#3B82F6');
+    const [customName, setCustomName] = (0, react_1.useState)('');
+    const [isGenerating, setIsGenerating] = (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.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 }) => ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(ui_1.Button, { onClick: toggleMode, variant: "outline", size: "sm", className: "gap-2", title: `Switch to ${isDark ? 'light' : 'dark'} mode`, children: isDark ? (0, jsx_runtime_1.jsx)(lucide_react_1.Sun, { className: "h-4 w-4" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Moon, { className: "h-4 w-4" }) }))] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-3 bg-[rgb(var(--bg-subtle))] rounded-lg border border-[rgb(var(--bd-default))]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-2 bg-gradient-to-br from-[rgb(var(--color-primary))] to-[rgb(var(--color-secondary))] rounded-lg", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Palette, { className: "h-5 w-5 text-white" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-semibold text-[rgb(var(--fg-default))]", children: t('Theme Customizer') }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: t('Full control over your app appearance') })] })] }), showModeToggle && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2.5", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-[rgb(var(--fg-default))] hidden sm:block", children: isDark ? t('Dark mode') : t('Light mode') }), (0, jsx_runtime_1.jsx)(ui_4.Switch, { checked: isDark, onCheckedChange: toggleMode })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-medium text-[rgb(var(--fg-default))]", children: t('Color Themes') }), (0, jsx_runtime_1.jsxs)(ui_5.Badge, { variant: "secondary", className: "text-xs gap-1", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Zap, { className: "h-3 w-3" }), t('Primary/Secondary/Tertiary')] })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 gap-2", children: THEME_VARIANTS.filter(v => v.variant !== 'custom').map(({ variant, name, color }) => ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-0.5 w-full h-12", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 rounded-l", style: { backgroundColor: color }, title: t('Primary') }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", style: { backgroundColor: color, opacity: 0.7 }, title: t('Secondary') }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 rounded-r", style: { backgroundColor: color, opacity: 0.4 }, title: t('Tertiary') })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 w-full justify-center", children: [(0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-3.5 w-3.5 text-[rgb(var(--color-primary))] flex-shrink-0" }))] })] }, variant))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-medium text-[rgb(var(--fg-default))]", children: t('Custom Color') }), (0, jsx_runtime_1.jsxs)(ui_5.Badge, { variant: "secondary", className: "text-xs gap-1", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { className: "h-3 w-3" }), t('AI Generated')] })] }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-xs font-medium text-[rgb(var(--fg-muted))] mb-2", children: t('Theme Name') }), (0, jsx_runtime_1.jsx)(ui_3.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" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-xs font-medium text-[rgb(var(--fg-default))] mb-2", children: t('Primary Brand Color') }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)(ui_3.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" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-2 bg-[rgb(var(--bg-surface))] rounded border border-[rgb(var(--bd-default))]", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-[10px] font-medium text-[rgb(var(--fg-muted))] mb-1.5", children: t('Live Preview') }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-3 gap-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-10 rounded flex items-center justify-center text-white text-[9px] font-semibold", style: { backgroundColor: customColor }, children: t('Primary') }), (0, jsx_runtime_1.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') }), (0, jsx_runtime_1.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') })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { onClick: handleCustomColorGenerate, disabled: isGenerating || !customColor, className: "flex-1", size: "sm", children: isGenerating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { className: "h-3.5 w-3.5 mr-2 animate-spin" }), t('Loading...')] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { className: "h-3.5 w-3.5 mr-2" }), t('Apply Theme')] })) }), customTheme && ((0, jsx_runtime_1.jsx)(ui_1.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)
+ */
+function ThemeCustomizer({ className, showModeToggle = true, compact = false, mode = 'card', open, onOpenChange }) {
+    const { t } = (0, useTranslation_1.useTranslation)();
+    // Dialog Mode
+    if (mode === 'dialog') {
+        return ((0, jsx_runtime_1.jsx)(ui_6.Dialog, { open: open, onOpenChange: onOpenChange, children: (0, jsx_runtime_1.jsxs)(ui_6.DialogContent, { className: "max-w-2xl max-h-[90vh] overflow-y-auto", children: [(0, jsx_runtime_1.jsx)(ui_6.DialogHeader, { children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-2 bg-gradient-to-br from-[rgb(var(--color-primary))] to-[rgb(var(--color-secondary))] rounded-lg", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Palette, { className: "h-5 w-5 text-white" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ui_6.DialogTitle, { className: "text-lg", children: t('Theme Customizer') }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-1", children: t('Full control over your app appearance') })] })] }) }), (0, jsx_runtime_1.jsx)(ThemeCustomizerContent, { showModeToggle: showModeToggle, compact: compact })] }) }));
+    }
+    // Card Mode (default)
+    return ((0, jsx_runtime_1.jsx)(ui_2.Card, { className: className, children: (0, jsx_runtime_1.jsx)(ui_2.CardContent, { className: "pt-6", children: (0, jsx_runtime_1.jsx)(ThemeCustomizerContent, { showModeToggle: showModeToggle, compact: compact }) }) }));
+}
+/**
+ * Floating Theme Toggle Button - Quick Access
+ */
+function ThemeToggle({ className }) {
+    const { isDark, toggleMode } = (0, useTheme_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(ui_1.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 ? (0, jsx_runtime_1.jsx)(lucide_react_1.Sun, { className: "h-5 w-5" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Moon, { className: "h-5 w-5" }) }));
+}
+/**
+ * Quick Theme Switcher - Compact Inline Version
+ */
+function QuickThemeSwitcher({ className }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(ThemeCustomizerContent, { compact: true }) }));
+}
+/**
+ * Theme Variant Selector - Ultra Compact
+ */
+function ThemeVariantSelector({ className }) {
+    const { t } = (0, useTranslation_1.useTranslation)();
+    const { theme, setVariant } = (0, useTheme_1.useTheme)();
+    const THEME_VARIANTS = getThemeVariants(t);
+    return ((0, jsx_runtime_1.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 }) => ((0, jsx_runtime_1.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/cjs/components/ui/buttons/button.js

@@ -0,0 +1,264 @@
+'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.Button = exports.FilterPillButton = exports.InputButton = exports.CheckboxButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const utils_1 = require("../../../lib/utils.js");
+const lucide_react_1 = require("lucide-react");
+const STORAGE_KEY = 'fab-btn-pos';
+function DraggableFAB({ onClick, disabled, tooltip, children }) {
+    const [pos, setPos] = React.useState(null);
+    const dragging = React.useRef(false);
+    const hasMoved = React.useRef(false);
+    const startPointer = React.useRef({ x: 0, y: 0 });
+    const startPos = React.useRef({ x: 0, y: 0 });
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        try {
+            const saved = localStorage.getItem(STORAGE_KEY);
+            if (saved) {
+                setPos(JSON.parse(saved));
+                return;
+            }
+        }
+        catch { }
+        setPos({ x: window.innerWidth - 72, y: window.innerHeight - 120 });
+    }, []);
+    const clamp = (v, min, max) => Math.min(Math.max(v, min), max);
+    const onPointerDown = (e) => {
+        dragging.current = true;
+        hasMoved.current = false;
+        startPointer.current = { x: e.clientX, y: e.clientY };
+        const rect = ref.current.getBoundingClientRect();
+        startPos.current = { x: rect.left, y: rect.top };
+        ref.current.setPointerCapture(e.pointerId);
+        e.preventDefault();
+    };
+    const onPointerMove = (e) => {
+        if (!dragging.current)
+            return;
+        const dx = e.clientX - startPointer.current.x;
+        const dy = e.clientY - startPointer.current.y;
+        if (Math.abs(dx) > 4 || Math.abs(dy) > 4)
+            hasMoved.current = true;
+        const newPos = {
+            x: clamp(startPos.current.x + dx, 0, window.innerWidth - 56),
+            y: clamp(startPos.current.y + dy, 0, window.innerHeight - 56),
+        };
+        setPos(newPos);
+    };
+    const onPointerUp = (e) => {
+        if (!dragging.current)
+            return;
+        dragging.current = false;
+        if (pos)
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(pos));
+        if (!hasMoved.current)
+            onClick?.(e);
+        e.preventDefault();
+    };
+    if (!pos)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, disabled: disabled, style: { left: pos.x, top: pos.y, touchAction: 'none' }, className: (0, utils_1.cn)("fixed z-50 lg:hidden", "h-14 w-14 rounded-xl shadow-lg rotate-45", "bg-[rgb(var(--color-primary))]/50 hover:bg-[rgb(var(--color-primary))]/65", "border-2 border-[rgb(var(--color-primary))]/60 hover:border-[rgb(var(--color-primary))]/75", "transition-colors duration-200 flex items-center justify-center", "disabled:opacity-50 disabled:cursor-not-allowed"), title: tooltip, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, children: children }));
+}
+// Helper to check if value is a valid React element (already rendered JSX)
+const isReactElement = (value) => {
+    return React.isValidElement(value);
+};
+// Helper to check if value is a React component (function or forwardRef)
+const isReactComponent = (value) => {
+    return typeof value === 'function' || (value && typeof value === 'object' && '$$typeof' in value);
+};
+const buttonVariants = {
+    primary: "bg-primary text-primary-foreground hover:bg-primary-hover focus-ring active:opacity-90",
+    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover focus-ring active:opacity-90",
+    tertiary: "bg-tertiary text-tertiary-foreground hover:bg-tertiary-hover focus-ring active:opacity-90",
+    outline: "border border-bd-default bg-bg-surface text-fg-default hover:bg-bg-hover focus-ring active:bg-bg-hover",
+    ghost: "text-fg-default hover:bg-bg-hover focus-ring active:bg-bg-hover",
+    destructive: "bg-error text-fg-inverse hover:bg-error-hover focus-ring-error active:opacity-90",
+    // Footer-specific variants with inline primary color styles
+    'footer-primary': "border-primary transition-opacity duration-200 hover:opacity-90 disabled:opacity-50",
+    'footer-secondary': "transition-opacity duration-200 hover:opacity-80 disabled:opacity-50",
+    // Action button variants with CSS variable colors (dark mode compatible)
+    'action-create': "bg-[rgb(var(--color-primary))]/10 hover:bg-[rgb(var(--color-primary))]/20 text-[rgb(var(--color-primary))] border border-[rgb(var(--color-primary))]/20",
+    'action-save': "bg-[rgb(var(--color-success))]/10 hover:bg-[rgb(var(--color-success))]/20 text-[rgb(var(--color-success))] border border-[rgb(var(--color-success))]/20",
+    'action-save-as': "bg-[rgb(var(--color-sky))]/10 hover:bg-[rgb(var(--color-sky))]/20 text-[rgb(var(--color-sky))] border border-[rgb(var(--color-sky))]/20",
+    'action-edit': "bg-[rgb(var(--color-warning))]/10 hover:bg-[rgb(var(--color-warning))]/20 text-[rgb(var(--color-warning))] border border-[rgb(var(--color-warning))]/20",
+    'action-delete': "bg-[rgb(var(--color-error))]/10 hover:bg-[rgb(var(--color-error))]/20 text-[rgb(var(--color-error))] border border-[rgb(var(--color-error))]/20",
+    'action-print': "bg-[rgb(var(--color-purple))]/10 hover:bg-[rgb(var(--color-purple))]/20 text-[rgb(var(--color-purple))] border border-[rgb(var(--color-purple))]/20",
+    'action-send': "bg-[rgb(var(--color-info))]/10 hover:bg-[rgb(var(--color-info))]/20 text-[rgb(var(--color-info))] border border-[rgb(var(--color-info))]/20",
+    'action-mail': "bg-[rgb(var(--color-error))]/10 hover:bg-[rgb(var(--color-error))]/20 text-[rgb(var(--color-error))] border border-[rgb(var(--color-error))]/20",
+    'action-download': "bg-[rgb(var(--color-success))]/10 hover:bg-[rgb(var(--color-success))]/20 text-[rgb(var(--color-success))] border border-[rgb(var(--color-success))]/20",
+    'action-refresh': "bg-[rgb(var(--color-neutral))]/10 hover:bg-[rgb(var(--color-neutral))]/20 text-[rgb(var(--color-neutral))] border border-[rgb(var(--color-neutral))]/20",
+    'action-cancel': "bg-[rgb(var(--bg-surface))] hover:bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-default))] border border-[rgb(var(--bd-default))]",
+    'action-secondary': "bg-[rgb(var(--bg-surface))] hover:bg-[rgb(var(--bg-hover))] text-[rgb(var(--fg-default))] border border-[rgb(var(--bd-default))]",
+    'action-apply': "bg-[rgb(var(--color-teal))]/10 hover:bg-[rgb(var(--color-teal))]/20 text-[rgb(var(--color-teal))] border border-[rgb(var(--color-teal))]/20",
+    'action-back': "bg-[rgb(var(--bg-surface))] hover:bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-default))] border border-[rgb(var(--bd-default))]"
+};
+const buttonSizes = {
+    xs: "h-6 px-2 py-1 text-xs font-medium", // Extra small - for card headers, compact UI
+    sm: "h-8 px-3 text-sm font-medium",
+    md: "h-10 px-4 text-sm font-medium",
+    lg: "h-12 px-6 text-base font-medium",
+    footer: "px-3 py-1.5 text-xs font-medium", // Compact footer size
+    action: "h-8 px-2 sm:px-3 text-[11px] sm:text-xs font-medium" // Action button size — compact on mobile
+};
+const iconOnlySizes = {
+    xs: "w-6 h-6 text-sm",
+    sm: "w-8 h-8 text-base",
+    md: "w-9 h-9 text-lg",
+    lg: "w-10 h-10 text-xl",
+    footer: "w-8 h-8 text-base",
+    action: "w-9 h-9 text-lg"
+};
+const Button = React.forwardRef(({ className, variant = 'primary', size = 'md', loading = false, icon: Icon, iconPosition = 'left', iconOnly = false, tooltip, fab = false, children, disabled, style, ...props }, ref) => {
+    const isDisabled = disabled || loading;
+    // Check if it's an action button variant
+    const isActionButton = variant?.startsWith('action-');
+    // Automatically use 'action' size for action button variants
+    const buttonSize = isActionButton && size === 'md' ? 'action' : size;
+    // Auto-assign icons for specific action variants if no icon provided
+    let resolvedIcon = Icon;
+    if (!Icon) {
+        if (variant === 'action-apply')
+            resolvedIcon = lucide_react_1.CheckCircle;
+        if (variant === 'action-cancel')
+            resolvedIcon = lucide_react_1.XCircle;
+    }
+    // FAB mode: inline button on desktop + floating circular button on mobile
+    if (fab && resolvedIcon) {
+        // Parkbuddy style: icon is h-8 w-8 stroke-[3] with primary color text
+        const fabIcon = isReactElement(resolvedIcon)
+            ? resolvedIcon
+            : isReactComponent(resolvedIcon)
+                ? React.createElement(resolvedIcon, { className: 'h-8 w-8 -rotate-45 text-[rgb(var(--color-primary))] stroke-[1.5]' })
+                : null;
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { className: (0, utils_1.cn)("inline-flex items-center justify-center gap-2 transition-all duration-200", "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none", isActionButton ? "rounded-lg" : "rounded-md", buttonVariants[variant], buttonSizes[buttonSize], "hidden lg:inline-flex", className), ref: ref, disabled: isDisabled, style: style, title: tooltip, ...props, children: [resolvedIcon && iconPosition === 'left' && !loading && (isReactElement(resolvedIcon) ? resolvedIcon
+                            : isReactComponent(resolvedIcon) ? React.createElement(resolvedIcon, { className: isActionButton ? 'h-4 w-4' : 'h-4 w-4' })
+                                : null), children] }), (0, jsx_runtime_1.jsx)(DraggableFAB, { onClick: props.onClick, disabled: isDisabled, tooltip: tooltip, children: fabIcon })] }));
+    }
+    // Icon-only mode: circular button with just icon
+    if (iconOnly) {
+        // For icon-only buttons, use ghost variant by default if not specified
+        const iconOnlyVariant = variant === 'primary' ? 'ghost' : variant;
+        return ((0, jsx_runtime_1.jsx)("button", { ref: ref, type: "button", title: tooltip, disabled: isDisabled, className: (0, utils_1.cn)('inline-flex items-center justify-center', 'rounded-full border-0', 'transition-colors duration-150 ease-in-out', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--color-primary))] focus-visible:ring-offset-2', 'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none', iconOnlyVariant === 'ghost' && [
+                'text-[rgb(var(--fg-muted))]',
+                'hover:bg-[rgb(var(--bg-hover))]',
+                'active:bg-[rgb(var(--bg-subtle))]'
+            ], iconOnlyVariant !== 'ghost' && buttonVariants[iconOnlyVariant], iconOnlySizes[buttonSize], className), style: style, ...props, children: loading ? ((0, jsx_runtime_1.jsxs)("svg", { className: "animate-spin h-4 w-4", fill: "none", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })) : Icon && isReactElement(Icon) ? (Icon) : Icon && isReactComponent(Icon) ? (React.createElement(Icon, { className: buttonSize === 'footer' ? 'h-3.5 w-3.5' : 'h-5 w-5' })) : null }));
+    }
+    // Apply inline styles for footer variants (uses CSS variables)
+    const footerStyles = variant === 'footer-primary'
+        ? { backgroundColor: 'rgb(var(--color-primary))', color: 'rgb(var(--color-primary-foreground))', ...style }
+        : variant === 'footer-secondary'
+            ? { borderColor: 'rgb(var(--color-primary))', color: 'rgb(var(--color-primary))', ...style }
+            : style;
+    // Action buttons: icon-only on mobile — ONLY when children is simple text
+    // Buttons with complex children (badges, chevrons, JSX) keep their full layout
+    const actionIconOnly = isActionButton && resolvedIcon && typeof children === 'string';
+    return ((0, jsx_runtime_1.jsxs)("button", { className: (0, utils_1.cn)(
+        // Base styles
+        "inline-flex items-center justify-center transition-all duration-200", "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none", 
+        // Gap — tighter on mobile for action buttons
+        isActionButton ? "gap-1 sm:gap-1.5" : "gap-2", 
+        // Border radius - action buttons use rounded-lg, others use rounded-md
+        isActionButton ? "rounded-lg" : "rounded-md", 
+        // Variant styles
+        buttonVariants[variant], 
+        // Size styles
+        buttonSizes[buttonSize], 
+        // Action buttons: square icon-only on mobile (< sm), icon + text on sm+
+        actionIconOnly && "max-sm:px-0 max-sm:w-8 max-sm:h-8", className), ref: ref, disabled: isDisabled, style: footerStyles, title: tooltip || (actionIconOnly && typeof children === 'string' ? children : undefined), ...props, children: [loading && ((0, jsx_runtime_1.jsxs)("svg", { className: "animate-spin h-4 w-4", fill: "none", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })), resolvedIcon && iconPosition === 'left' && !loading && (isReactElement(resolvedIcon) ? (resolvedIcon) : isReactComponent(resolvedIcon) ? (React.createElement(resolvedIcon, { className: size === 'xs' ? 'h-3 w-3' : size === 'footer' ? 'h-3.5 w-3.5' : isActionButton ? 'h-3.5 w-3.5 sm:h-4 sm:w-4' : 'h-4 w-4' })) : null), actionIconOnly ? ((0, jsx_runtime_1.jsx)("span", { className: "hidden sm:inline", children: children })) : (children), resolvedIcon && iconPosition === 'right' && !loading && (isReactElement(resolvedIcon) ? (resolvedIcon) : isReactComponent(resolvedIcon) ? (React.createElement(resolvedIcon, { className: size === 'xs' ? 'h-3 w-3' : size === 'footer' ? 'h-3.5 w-3.5' : isActionButton ? 'h-3.5 w-3.5 sm:h-4 sm:w-4' : 'h-4 w-4' })) : null)] }));
+});
+exports.Button = Button;
+Button.displayName = "Button";
+exports.CheckboxButton = React.forwardRef(({ checked = false, onChange, label, size = 'md', className, ...props }, ref) => {
+    const sizeClasses = {
+        xs: 'h-6 px-2 text-[10px] gap-1.5',
+        sm: 'h-8 px-2.5 text-xs gap-2',
+        md: 'h-10 px-2.5 text-xs gap-2'
+    };
+    const checkboxSizeClasses = {
+        xs: 'w-3 h-3',
+        sm: 'w-4 h-4',
+        md: 'w-4 h-4'
+    };
+    const checkIconClasses = {
+        xs: 'h-2 w-2',
+        sm: 'h-3 w-3',
+        md: 'h-3 w-3'
+    };
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: ref, type: "button", onClick: () => onChange?.(!checked), className: (0, utils_1.cn)('inline-flex items-center rounded-full border font-medium transition-all duration-200', 'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-[rgb(var(--bg-surface))]', sizeClasses[size], checked
+            ? 'bg-[rgb(var(--color-primary))]/10 hover:bg-[rgb(var(--color-primary))]/20 text-[rgb(var(--color-primary))] border-[rgb(var(--color-primary))]/20'
+            : 'bg-[rgb(var(--bg-surface))] hover:bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-default))] border-[rgb(var(--bd-default))]', className), ...props, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('rounded flex items-center justify-center transition-all duration-200 flex-shrink-0', checkboxSizeClasses[size], checked
+                    ? 'bg-[rgb(var(--color-primary))] border-[rgb(var(--color-primary))]'
+                    : 'bg-transparent border border-[rgb(var(--bd-default))]'), children: checked && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: (0, utils_1.cn)(checkIconClasses[size], 'text-white'), strokeWidth: 3 })) }), (0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: label })] }));
+});
+exports.CheckboxButton.displayName = "CheckboxButton";
+exports.InputButton = React.forwardRef(({ label, size = 'md', className, inputClassName, suffix, stepper, onStep, canStep, disabled, ...props }, ref) => {
+    const decDisabled = !!disabled || (canStep ? !canStep('dec') : false);
+    const incDisabled = !!disabled || (canStep ? !canStep('inc') : false);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('inline-flex items-center gap-2 px-2.5 rounded-lg border transition-all duration-200', 'bg-[rgb(var(--bg-subtle))] hover:bg-[rgb(var(--bg-hover))] border-[rgb(var(--bd-default))]', 'h-8', className), children: [(0, jsx_runtime_1.jsxs)("span", { className: (0, utils_1.cn)('font-medium whitespace-nowrap text-[rgb(var(--fg-default))]', 'text-xs'), children: [label, ":"] }), stepper && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onStep?.('dec'), disabled: decDisabled, "aria-label": "Decrease", className: "h-5 w-5 inline-flex items-center justify-center rounded-md border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-muted))] disabled:opacity-40 disabled:cursor-not-allowed", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { className: "h-3 w-3" }) })), (0, jsx_runtime_1.jsx)("input", { ref: ref, type: "number", disabled: disabled, className: (0, utils_1.cn)('w-12 text-xs font-bold rounded-md px-1.5 text-center', 'border-0 focus:outline-none focus:ring-0', 'bg-[rgb(var(--bg-surface))]', 'text-[rgb(var(--fg-default))]', 'placeholder:text-[rgb(var(--fg-muted))]', '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none', 'h-5', inputClassName), ...props }), stepper && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onStep?.('inc'), disabled: incDisabled, "aria-label": "Increase", className: "h-5 w-5 inline-flex items-center justify-center rounded-md border border-[rgb(var(--bd-default))] bg-[rgb(var(--bg-surface))] text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-muted))] disabled:opacity-40 disabled:cursor-not-allowed", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { className: "h-3 w-3" }) })), suffix && ((0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-[rgb(var(--fg-default))]", children: suffix }))] }));
+});
+exports.InputButton.displayName = "InputButton";
+const filterPillVariants = {
+    primary: {
+        selected: 'bg-[rgb(var(--color-primary))] text-white shadow-md',
+        unselected: 'bg-[rgb(var(--color-primary-subtle))] text-[rgb(var(--color-primary))] hover:opacity-80'
+    },
+    warning: {
+        selected: 'bg-[rgb(var(--color-warning))] text-white shadow-md',
+        unselected: 'bg-[rgb(var(--color-warning-subtle))] text-[rgb(var(--color-warning))] hover:opacity-80'
+    },
+    success: {
+        selected: 'bg-[rgb(var(--color-success))] text-white shadow-md',
+        unselected: 'bg-[rgb(var(--color-success-subtle))] text-[rgb(var(--color-success))] hover:opacity-80'
+    },
+    orange: {
+        selected: 'bg-[rgb(var(--color-orange))] text-white shadow-md',
+        unselected: 'bg-[rgb(var(--color-orange-subtle))] text-[rgb(var(--color-orange))] hover:opacity-80'
+    },
+    error: {
+        selected: 'bg-[rgb(var(--color-error))] text-white shadow-md',
+        unselected: 'bg-[rgb(var(--color-error-subtle))] text-[rgb(var(--color-error))] hover:opacity-80'
+    }
+};
+exports.FilterPillButton = React.forwardRef(({ label, shortLabel, count, variant, isSelected, className, ...props }, ref) => {
+    const styles = filterPillVariants[variant];
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: ref, type: "button", className: (0, utils_1.cn)('px-2 sm:px-3 py-1 sm:py-1.5 rounded-full text-[10px] sm:text-xs font-semibold transition-all', 'hover:scale-105 cursor-pointer', isSelected ? styles.selected : styles.unselected, className), ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: "hidden sm:inline", children: label }), shortLabel && (0, jsx_runtime_1.jsx)("span", { className: "sm:hidden", children: shortLabel }), !shortLabel && (0, jsx_runtime_1.jsx)("span", { className: "sm:hidden", children: label }), (0, jsx_runtime_1.jsxs)("span", { className: "ml-0.5 sm:ml-1 opacity-75", children: ["(", count, ")"] })] }));
+});
+exports.FilterPillButton.displayName = "FilterPillButton";