@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

package/dist/components/ui/feedback/toast.esm.js

@@ -0,0 +1,143 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef } from 'react';
+;
+// Simple icon components
+const CheckCircleIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }));
+const ExclamationTriangleIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }));
+const XCircleIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }));
+const InformationCircleIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }));
+const XMarkIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }));
+// Get icon for toast type
+const getToastIcon = (type, className) => {
+    switch (type) {
+        case 'success':
+            return _jsx(CheckCircleIcon, { className: className });
+        case 'warning':
+            return _jsx(ExclamationTriangleIcon, { className: className });
+        case 'error':
+            return _jsx(XCircleIcon, { className: className });
+        case 'info':
+            return _jsx(InformationCircleIcon, { className: className });
+        default:
+            return null;
+    }
+};
+// Note: getToastColors function removed as we're using semantic CSS classes
+/*
+const getToastColors = (type: ToastProps['type'], colors: any) => {
+  switch (type) {
+    case 'success':
+      return {
+        background: colors.semantic.success + '10',
+        border: colors.semantic.success + '30',
+        text: colors.semantic.success,
+        icon: colors.semantic.success
+      };
+    case 'warning':
+      return {
+        background: colors.semantic.warning + '10',
+        border: colors.semantic.warning + '30',
+        text: colors.semantic.warning,
+        icon: colors.semantic.warning
+      };
+    case 'error':
+      return {
+        background: colors.semantic.error + '10',
+        border: colors.semantic.error + '30',
+        text: colors.semantic.error,
+        icon: colors.semantic.error
+      };
+    case 'info':
+      return {
+        background: colors.semantic.info + '10',
+        border: colors.semantic.info + '30',
+        text: colors.semantic.info,
+        icon: colors.semantic.info
+      };
+    default:
+      return {
+        background: colors.surface.surface,
+        border: colors.surface.border,
+        text: colors.text.primary,
+        icon: colors.text.secondary
+      };
+  }
+};
+*/
+// Toast Action Button Component
+const ToastActionButton = ({ label, onClick, variant = 'primary' }) => {
+    return (_jsx("button", { type: "button", className: `toast__action-button toast__action-button--${variant}`, onClick: onClick, children: label }));
+};
+// Individual Toast Component
+export const Toast = ({ title, message, type = 'default', duration = 5000, onClose, actions = [], icon, showIcon = true, closable = true, autoClose = true, pauseOnHover = true, progress = false, size = 'md', variant = 'default', className = '', }) => {
+    // Note: theme and colors not needed as we're using semantic CSS classes
+    const [isVisible, setIsVisible] = useState(true);
+    const [progressValue, setProgressValue] = useState(100);
+    const timeoutRef = useRef(null);
+    const progressRef = useRef(null);
+    const handleClose = useCallback(() => {
+        setIsVisible(false);
+        if (onClose) {
+            onClose();
+        }
+    }, [onClose]);
+    const handleMouseEnter = useCallback(() => {
+        if (pauseOnHover && autoClose) {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            if (progressRef.current) {
+                clearInterval(progressRef.current);
+            }
+        }
+    }, [pauseOnHover, autoClose]);
+    const handleMouseLeave = useCallback(() => {
+        if (pauseOnHover && autoClose) {
+            startAutoClose();
+        }
+    }, [pauseOnHover, autoClose]);
+    const startAutoClose = useCallback(() => {
+        if (duration > 0 && autoClose) {
+            timeoutRef.current = setTimeout(() => {
+                handleClose();
+            }, duration);
+            if (progress) {
+                const startTime = Date.now();
+                const endTime = startTime + duration;
+                progressRef.current = setInterval(() => {
+                    const now = Date.now();
+                    const remaining = Math.max(0, endTime - now);
+                    const newProgress = (remaining / duration) * 100;
+                    setProgressValue(newProgress);
+                    if (remaining <= 0) {
+                        if (progressRef.current) {
+                            clearInterval(progressRef.current);
+                        }
+                    }
+                }, 10);
+            }
+        }
+    }, [duration, autoClose, progress, handleClose]);
+    useEffect(() => {
+        startAutoClose();
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            if (progressRef.current) {
+                clearInterval(progressRef.current);
+            }
+        };
+    }, [startAutoClose]);
+    if (!isVisible) {
+        return null;
+    }
+    const shouldShowIcon = showIcon && (icon || type);
+    return (_jsxs("div", { className: `toast__container toast__container--${size} toast__container--${variant} toast__container--${type} ${className}`, role: "alert", "aria-live": "polite", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [progress && (_jsx("div", { className: "toast__progress", children: _jsx("div", { className: `toast__progress-bar toast__progress-bar--${type}`, style: { width: `${progressValue}%` } }) })), shouldShowIcon && (_jsx("div", { className: `toast__icon toast__icon--${type}`, children: icon || getToastIcon(type, 'toast__icon') })), _jsxs("div", { className: "toast__content", children: [title && (_jsx("h3", { className: "toast__title", children: title })), message && (_jsx("div", { className: `toast__message ${!title ? 'toast__message--only' : ''}`, children: message })), actions.length > 0 && (_jsx("div", { className: "toast__actions", children: actions.map((action, index) => (_jsx(ToastActionButton, { ...action }, index))) }))] }), closable && (_jsx("button", { type: "button", className: "toast__close-button", onClick: handleClose, "aria-label": "Close toast", children: _jsx(XMarkIcon, { className: "toast__close-icon" }) }))] }));
+};
+// Toast Container Component
+export const ToastContainer = ({ position = 'top-right', className = '', children }) => {
+    return (_jsx("div", { className: `toast-container toast-container--${position} ${className}`, children: _jsx("div", { className: "toast-container__list", children: children }) }));
+};
+export default Toast;

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

@@ -0,0 +1,143 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef } from 'react';
+;
+// Simple icon components
+const CheckCircleIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }));
+const ExclamationTriangleIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }));
+const XCircleIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }));
+const InformationCircleIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }));
+const XMarkIcon = ({ className = '' }) => (_jsx("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }));
+// Get icon for toast type
+const getToastIcon = (type, className) => {
+    switch (type) {
+        case 'success':
+            return _jsx(CheckCircleIcon, { className: className });
+        case 'warning':
+            return _jsx(ExclamationTriangleIcon, { className: className });
+        case 'error':
+            return _jsx(XCircleIcon, { className: className });
+        case 'info':
+            return _jsx(InformationCircleIcon, { className: className });
+        default:
+            return null;
+    }
+};
+// Note: getToastColors function removed as we're using semantic CSS classes
+/*
+const getToastColors = (type: ToastProps['type'], colors: any) => {
+  switch (type) {
+    case 'success':
+      return {
+        background: colors.semantic.success + '10',
+        border: colors.semantic.success + '30',
+        text: colors.semantic.success,
+        icon: colors.semantic.success
+      };
+    case 'warning':
+      return {
+        background: colors.semantic.warning + '10',
+        border: colors.semantic.warning + '30',
+        text: colors.semantic.warning,
+        icon: colors.semantic.warning
+      };
+    case 'error':
+      return {
+        background: colors.semantic.error + '10',
+        border: colors.semantic.error + '30',
+        text: colors.semantic.error,
+        icon: colors.semantic.error
+      };
+    case 'info':
+      return {
+        background: colors.semantic.info + '10',
+        border: colors.semantic.info + '30',
+        text: colors.semantic.info,
+        icon: colors.semantic.info
+      };
+    default:
+      return {
+        background: colors.surface.surface,
+        border: colors.surface.border,
+        text: colors.text.primary,
+        icon: colors.text.secondary
+      };
+  }
+};
+*/
+// Toast Action Button Component
+const ToastActionButton = ({ label, onClick, variant = 'primary' }) => {
+    return (_jsx("button", { type: "button", className: `toast__action-button toast__action-button--${variant}`, onClick: onClick, children: label }));
+};
+// Individual Toast Component
+export const Toast = ({ title, message, type = 'default', duration = 5000, onClose, actions = [], icon, showIcon = true, closable = true, autoClose = true, pauseOnHover = true, progress = false, size = 'md', variant = 'default', className = '', }) => {
+    // Note: theme and colors not needed as we're using semantic CSS classes
+    const [isVisible, setIsVisible] = useState(true);
+    const [progressValue, setProgressValue] = useState(100);
+    const timeoutRef = useRef(null);
+    const progressRef = useRef(null);
+    const handleClose = useCallback(() => {
+        setIsVisible(false);
+        if (onClose) {
+            onClose();
+        }
+    }, [onClose]);
+    const handleMouseEnter = useCallback(() => {
+        if (pauseOnHover && autoClose) {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            if (progressRef.current) {
+                clearInterval(progressRef.current);
+            }
+        }
+    }, [pauseOnHover, autoClose]);
+    const handleMouseLeave = useCallback(() => {
+        if (pauseOnHover && autoClose) {
+            startAutoClose();
+        }
+    }, [pauseOnHover, autoClose]);
+    const startAutoClose = useCallback(() => {
+        if (duration > 0 && autoClose) {
+            timeoutRef.current = setTimeout(() => {
+                handleClose();
+            }, duration);
+            if (progress) {
+                const startTime = Date.now();
+                const endTime = startTime + duration;
+                progressRef.current = setInterval(() => {
+                    const now = Date.now();
+                    const remaining = Math.max(0, endTime - now);
+                    const newProgress = (remaining / duration) * 100;
+                    setProgressValue(newProgress);
+                    if (remaining <= 0) {
+                        if (progressRef.current) {
+                            clearInterval(progressRef.current);
+                        }
+                    }
+                }, 10);
+            }
+        }
+    }, [duration, autoClose, progress, handleClose]);
+    useEffect(() => {
+        startAutoClose();
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            if (progressRef.current) {
+                clearInterval(progressRef.current);
+            }
+        };
+    }, [startAutoClose]);
+    if (!isVisible) {
+        return null;
+    }
+    const shouldShowIcon = showIcon && (icon || type);
+    return (_jsxs("div", { className: `toast__container toast__container--${size} toast__container--${variant} toast__container--${type} ${className}`, role: "alert", "aria-live": "polite", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [progress && (_jsx("div", { className: "toast__progress", children: _jsx("div", { className: `toast__progress-bar toast__progress-bar--${type}`, style: { width: `${progressValue}%` } }) })), shouldShowIcon && (_jsx("div", { className: `toast__icon toast__icon--${type}`, children: icon || getToastIcon(type, 'toast__icon') })), _jsxs("div", { className: "toast__content", children: [title && (_jsx("h3", { className: "toast__title", children: title })), message && (_jsx("div", { className: `toast__message ${!title ? 'toast__message--only' : ''}`, children: message })), actions.length > 0 && (_jsx("div", { className: "toast__actions", children: actions.map((action, index) => (_jsx(ToastActionButton, { ...action }, index))) }))] }), closable && (_jsx("button", { type: "button", className: "toast__close-button", onClick: handleClose, "aria-label": "Close toast", children: _jsx(XMarkIcon, { className: "toast__close-icon" }) }))] }));
+};
+// Toast Container Component
+export const ToastContainer = ({ position = 'top-right', className = '', children }) => {
+    return (_jsx("div", { className: `toast-container toast-container--${position} ${className}`, children: _jsx("div", { className: "toast-container__list", children: children }) }));
+};
+export default Toast;

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

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { ThemeName } from '../../../themes/types.js';
+export interface FeedbackBaseProps {
+    className?: string;
+    theme?: ThemeName;
+}
+export interface AlertProps extends FeedbackBaseProps {
+    title?: string;
+    message?: string;
+    children?: React.ReactNode;
+    type: 'success' | 'warning' | 'error' | 'info';
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    icon?: React.ReactNode;
+    actions?: AlertAction[];
+    showIcon?: boolean;
+    closable?: boolean;
+    persistent?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'bordered' | 'filled';
+}
+export interface AlertAction {
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+}
+export interface StatusAlertData {
+    id?: string;
+    title?: string;
+    message?: string;
+    children?: React.ReactNode;
+    type: 'success' | 'warning' | 'error' | 'info';
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    icon?: React.ReactNode;
+    actions?: AlertAction[];
+    showIcon?: boolean;
+    closable?: boolean;
+    persistent?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'bordered' | 'filled';
+    theme?: ThemeName;
+}
+export interface ToastProps extends FeedbackBaseProps {
+    id: string;
+    title?: string;
+    message?: string;
+    type: 'success' | 'warning' | 'error' | 'info' | 'default';
+    duration?: number;
+    onClose?: () => void;
+    actions?: ToastAction[];
+    icon?: React.ReactNode;
+    showIcon?: boolean;
+    closable?: boolean;
+    position?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
+    autoClose?: boolean;
+    pauseOnHover?: boolean;
+    draggable?: boolean;
+    progress?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'bordered' | 'filled';
+}
+export interface ToastAction {
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary' | 'ghost';
+}
+export interface ToastContainerProps {
+    position?: ToastProps['position'];
+    maxToasts?: number;
+    autoClose?: boolean;
+    pauseOnHover?: boolean;
+    draggable?: boolean;
+    progress?: boolean;
+    className?: string;
+    theme?: ThemeName;
+}
+export interface ProgressProps extends FeedbackBaseProps {
+    value: number;
+    max?: number;
+    min?: number;
+    label?: string;
+    showLabel?: boolean;
+    showValue?: boolean;
+    showPercentage?: boolean;
+    animated?: boolean;
+    striped?: boolean;
+    color?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    variant?: 'linear' | 'circular' | 'steps';
+    thickness?: number;
+    trackColor?: string;
+    progressColor?: string;
+    indeterminate?: boolean;
+    onComplete?: () => void;
+}
+export interface ProgressStep {
+    label: string;
+    value: number;
+    status: 'pending' | 'active' | 'completed' | 'error';
+    description?: string;
+}
+export interface SkeletonProps extends FeedbackBaseProps {
+    width?: string | number;
+    height?: string | number;
+    variant?: 'text' | 'circular' | 'rectangular' | 'rounded';
+    animation?: 'pulse' | 'wave' | 'none';
+    rows?: number;
+    spacing?: number;
+    show?: boolean;
+    className?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+export interface SkeletonTextProps extends SkeletonProps {
+    lines?: number;
+    lineHeight?: string | number;
+    lastLineWidth?: string | number;
+}
+export interface SkeletonAvatarProps extends SkeletonProps {
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    shape?: 'circular' | 'square' | 'rounded';
+}
+export interface SkeletonButtonProps extends SkeletonProps {
+    fullWidth?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/ui/feedback/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/feedback/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGrD,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAGD,MAAM,WAAW,UAAW,SAAQ,iBAAiB;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;CAC7C;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IAC5C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAGD,MAAM,WAAW,eAAe;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC5C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAGD,MAAM,WAAW,UAAW,SAAQ,iBAAiB;IACnD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,aAAa,GAAG,cAAc,GAAG,eAAe,CAAC;IACtG,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;CAC7C;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;CAC7C;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAGD,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,OAAO,CAAC;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAGD,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,CAAC;IAC1D,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;CAC3C;AAED,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/components/ui/feedback/types.esm.js

@@ -0,0 +1,2 @@
+;
+export {};

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

@@ -0,0 +1,2 @@
+;
+export {};

package/dist/components/ui/font-preview.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { FontConfig } from '../../themes/types.js';
+export interface FontPreviewProps {
+    fontConfig?: FontConfig;
+    fontType?: 'primary' | 'secondary' | 'display' | 'body' | 'mono';
+    showAllVariations?: boolean;
+    className?: string;
+}
+export declare const FontPreview: React.FC<FontPreviewProps>;
+export interface FontShowcaseProps {
+    showAllVariations?: boolean;
+    className?: string;
+}
+export declare const FontShowcase: React.FC<FontShowcaseProps>;
+//# sourceMappingURL=font-preview.d.ts.map

package/dist/components/ui/font-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-preview.d.ts","sourceRoot":"","sources":["../../../src/components/ui/font-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,MAAM,WAAW,gBAAgB;IAC/B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACjE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA+OlD,CAAC;AAGF,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2BpD,CAAC"}

package/dist/components/ui/font-preview.esm.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+;
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Badge } from './badge.js';
+import { useTheme } from '../../themes';
+export const FontPreview = ({ fontConfig, fontType = 'primary', showAllVariations = false, className = '' }) => {
+    const { currentThemeConfig } = useTheme();
+    // Use provided fontConfig or get from current theme
+    const config = fontConfig || currentThemeConfig?.fonts[fontType];
+    if (!config) {
+        return (_jsx(Card, { className: className, children: _jsx(CardContent, { className: "p-4", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Font configuration not available" }) }) }));
+    }
+    const { family, weights, sizes, lineHeights, letterSpacing, fallbacks, source } = config;
+    // Build full font family string with fallbacks
+    const fullFontFamily = fallbacks
+        ? `${family}, ${fallbacks.join(', ')}`
+        : family;
+    // Sample text for preview
+    const sampleText = "The quick brown fox jumps over the lazy dog";
+    const sampleNumbers = "1234567890";
+    const sampleSpecial = "!@#$%^&*()_+-={}[]|\\:;\"'<>,.?/";
+    return (_jsxs(Card, { className: className, children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center justify-between", children: [_jsxs("span", { className: "capitalize", children: [fontType, " Font"] }), _jsxs("div", { className: "flex gap-2", children: [source && (_jsx(Badge, { variant: "outline", className: "text-xs", children: source.type })), _jsxs(Badge, { variant: "secondary", className: "text-xs", children: [weights?.length || 0, " weights"] })] })] }), _jsxs(CardDescription, { children: [_jsx("span", { className: "font-mono text-xs", children: family }), fallbacks && fallbacks.length > 0 && (_jsxs("div", { className: "mt-1 text-xs text-muted-foreground", children: ["Fallbacks: ", fallbacks.slice(0, 3).join(', '), fallbacks.length > 3 && ` (+${fallbacks.length - 3} more)`] }))] })] }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Font Weights" }), _jsx("div", { className: "space-y-2", children: weights?.map(weight => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Badge, { variant: "outline", className: "text-xs w-12 justify-center", children: weight }), _jsx("p", { style: {
+                                                fontFamily: fullFontFamily,
+                                                fontWeight: weight,
+                                                fontSize: sizes?.md || '1rem'
+                                            }, className: "flex-1", children: sampleText })] }, weight))) })] }), showAllVariations && (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Font Sizes" }), _jsx("div", { className: "space-y-2", children: Object.entries(sizes || {}).map(([size, value]) => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Badge, { variant: "outline", className: "text-xs w-12 justify-center", children: size }), _jsx("span", { className: "text-xs text-muted-foreground w-16", children: value }), _jsx("p", { style: {
+                                                        fontFamily: fullFontFamily,
+                                                        fontSize: value,
+                                                        fontWeight: weights?.[0] || 400
+                                                    }, children: "Sample text" })] }, size))) })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Line Heights" }), _jsx("div", { className: "space-y-4", children: Object.entries(lineHeights || {}).map(([height, value]) => (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", className: "text-xs", children: height }), _jsx("span", { className: "text-xs text-muted-foreground", children: value })] }), _jsx("p", { style: {
+                                                        fontFamily: fullFontFamily,
+                                                        fontSize: sizes?.md || '1rem',
+                                                        lineHeight: value,
+                                                        fontWeight: weights?.[0] || 400
+                                                    }, className: "text-sm border-l-2 border-muted pl-4", children: "This is a multiline text example to demonstrate how line height affects the spacing between lines of text. The line height setting controls the vertical space between each line, which is crucial for readability and overall typography appearance." })] }, height))) })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Letter Spacing" }), _jsx("div", { className: "space-y-2", children: Object.entries(letterSpacing || {}).map(([spacing, value]) => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Badge, { variant: "outline", className: "text-xs w-16 justify-center", children: spacing }), _jsx("span", { className: "text-xs text-muted-foreground w-16", children: value }), _jsx("p", { style: {
+                                                        fontFamily: fullFontFamily,
+                                                        fontSize: sizes?.md || '1rem',
+                                                        letterSpacing: value,
+                                                        fontWeight: weights?.[0] || 400
+                                                    }, className: "flex-1", children: "Letter spacing example" })] }, spacing))) })] })] })), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Character Support" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("span", { className: "text-xs text-muted-foreground block mb-1", children: "Alphabet" }), _jsx("p", { style: {
+                                                    fontFamily: fullFontFamily,
+                                                    fontSize: sizes?.md || '1rem',
+                                                    fontWeight: weights?.[0] || 400
+                                                }, className: "text-sm", children: sampleText })] }), _jsxs("div", { children: [_jsx("span", { className: "text-xs text-muted-foreground block mb-1", children: "Numbers" }), _jsx("p", { style: {
+                                                    fontFamily: fullFontFamily,
+                                                    fontSize: sizes?.lg || '1.125rem',
+                                                    fontWeight: weights?.[0] || 400,
+                                                    letterSpacing: letterSpacing?.wide || '0.025em'
+                                                }, className: "text-sm", children: sampleNumbers })] }), _jsxs("div", { children: [_jsx("span", { className: "text-xs text-muted-foreground block mb-1", children: "Special Characters" }), _jsx("p", { style: {
+                                                    fontFamily: fullFontFamily,
+                                                    fontSize: sizes?.sm || '0.875rem',
+                                                    fontWeight: weights?.[0] || 400
+                                                }, className: "text-sm", children: sampleSpecial })] })] })] }), source && (_jsxs("div", { className: "pt-4 border-t", children: [_jsx("h4", { className: "text-sm font-medium mb-2", children: "Font Loading" }), _jsxs("div", { className: "space-y-1 text-xs text-muted-foreground", children: [_jsxs("div", { children: ["Source: ", _jsx("span", { className: "capitalize", children: source.type })] }), source.url && _jsxs("div", { children: ["URL: ", source.url] }), source.files && (_jsxs("div", { children: ["Files: ", Object.keys(source.files).join(', ')] })), config.display && (_jsxs("div", { children: ["Display: ", config.display] }))] })] }))] })] }));
+};
+export const FontShowcase = ({ showAllVariations = false, className = '' }) => {
+    const { currentThemeConfig } = useTheme();
+    if (!currentThemeConfig?.fonts) {
+        return (_jsx("div", { className: className, children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No font configuration available" }) }));
+    }
+    const fontTypes = ['primary', 'secondary', 'display', 'body', 'mono'];
+    return (_jsx("div", { className: `space-y-6 ${className}`, children: fontTypes.map(fontType => (_jsx(FontPreview, { fontType: fontType, showAllVariations: showAllVariations }, fontType))) }));
+};

package/dist/components/ui/font-preview.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+;
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Badge } from './badge.js';
+import { useTheme } from '../../themes';
+export const FontPreview = ({ fontConfig, fontType = 'primary', showAllVariations = false, className = '' }) => {
+    const { currentThemeConfig } = useTheme();
+    // Use provided fontConfig or get from current theme
+    const config = fontConfig || currentThemeConfig?.fonts[fontType];
+    if (!config) {
+        return (_jsx(Card, { className: className, children: _jsx(CardContent, { className: "p-4", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Font configuration not available" }) }) }));
+    }
+    const { family, weights, sizes, lineHeights, letterSpacing, fallbacks, source } = config;
+    // Build full font family string with fallbacks
+    const fullFontFamily = fallbacks
+        ? `${family}, ${fallbacks.join(', ')}`
+        : family;
+    // Sample text for preview
+    const sampleText = "The quick brown fox jumps over the lazy dog";
+    const sampleNumbers = "1234567890";
+    const sampleSpecial = "!@#$%^&*()_+-={}[]|\\:;\"'<>,.?/";
+    return (_jsxs(Card, { className: className, children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center justify-between", children: [_jsxs("span", { className: "capitalize", children: [fontType, " Font"] }), _jsxs("div", { className: "flex gap-2", children: [source && (_jsx(Badge, { variant: "outline", className: "text-xs", children: source.type })), _jsxs(Badge, { variant: "secondary", className: "text-xs", children: [weights?.length || 0, " weights"] })] })] }), _jsxs(CardDescription, { children: [_jsx("span", { className: "font-mono text-xs", children: family }), fallbacks && fallbacks.length > 0 && (_jsxs("div", { className: "mt-1 text-xs text-muted-foreground", children: ["Fallbacks: ", fallbacks.slice(0, 3).join(', '), fallbacks.length > 3 && ` (+${fallbacks.length - 3} more)`] }))] })] }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Font Weights" }), _jsx("div", { className: "space-y-2", children: weights?.map(weight => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Badge, { variant: "outline", className: "text-xs w-12 justify-center", children: weight }), _jsx("p", { style: {
+                                                fontFamily: fullFontFamily,
+                                                fontWeight: weight,
+                                                fontSize: sizes?.md || '1rem'
+                                            }, className: "flex-1", children: sampleText })] }, weight))) })] }), showAllVariations && (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Font Sizes" }), _jsx("div", { className: "space-y-2", children: Object.entries(sizes || {}).map(([size, value]) => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Badge, { variant: "outline", className: "text-xs w-12 justify-center", children: size }), _jsx("span", { className: "text-xs text-muted-foreground w-16", children: value }), _jsx("p", { style: {
+                                                        fontFamily: fullFontFamily,
+                                                        fontSize: value,
+                                                        fontWeight: weights?.[0] || 400
+                                                    }, children: "Sample text" })] }, size))) })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Line Heights" }), _jsx("div", { className: "space-y-4", children: Object.entries(lineHeights || {}).map(([height, value]) => (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", className: "text-xs", children: height }), _jsx("span", { className: "text-xs text-muted-foreground", children: value })] }), _jsx("p", { style: {
+                                                        fontFamily: fullFontFamily,
+                                                        fontSize: sizes?.md || '1rem',
+                                                        lineHeight: value,
+                                                        fontWeight: weights?.[0] || 400
+                                                    }, className: "text-sm border-l-2 border-muted pl-4", children: "This is a multiline text example to demonstrate how line height affects the spacing between lines of text. The line height setting controls the vertical space between each line, which is crucial for readability and overall typography appearance." })] }, height))) })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Letter Spacing" }), _jsx("div", { className: "space-y-2", children: Object.entries(letterSpacing || {}).map(([spacing, value]) => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Badge, { variant: "outline", className: "text-xs w-16 justify-center", children: spacing }), _jsx("span", { className: "text-xs text-muted-foreground w-16", children: value }), _jsx("p", { style: {
+                                                        fontFamily: fullFontFamily,
+                                                        fontSize: sizes?.md || '1rem',
+                                                        letterSpacing: value,
+                                                        fontWeight: weights?.[0] || 400
+                                                    }, className: "flex-1", children: "Letter spacing example" })] }, spacing))) })] })] })), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Character Support" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("span", { className: "text-xs text-muted-foreground block mb-1", children: "Alphabet" }), _jsx("p", { style: {
+                                                    fontFamily: fullFontFamily,
+                                                    fontSize: sizes?.md || '1rem',
+                                                    fontWeight: weights?.[0] || 400
+                                                }, className: "text-sm", children: sampleText })] }), _jsxs("div", { children: [_jsx("span", { className: "text-xs text-muted-foreground block mb-1", children: "Numbers" }), _jsx("p", { style: {
+                                                    fontFamily: fullFontFamily,
+                                                    fontSize: sizes?.lg || '1.125rem',
+                                                    fontWeight: weights?.[0] || 400,
+                                                    letterSpacing: letterSpacing?.wide || '0.025em'
+                                                }, className: "text-sm", children: sampleNumbers })] }), _jsxs("div", { children: [_jsx("span", { className: "text-xs text-muted-foreground block mb-1", children: "Special Characters" }), _jsx("p", { style: {
+                                                    fontFamily: fullFontFamily,
+                                                    fontSize: sizes?.sm || '0.875rem',
+                                                    fontWeight: weights?.[0] || 400
+                                                }, className: "text-sm", children: sampleSpecial })] })] })] }), source && (_jsxs("div", { className: "pt-4 border-t", children: [_jsx("h4", { className: "text-sm font-medium mb-2", children: "Font Loading" }), _jsxs("div", { className: "space-y-1 text-xs text-muted-foreground", children: [_jsxs("div", { children: ["Source: ", _jsx("span", { className: "capitalize", children: source.type })] }), source.url && _jsxs("div", { children: ["URL: ", source.url] }), source.files && (_jsxs("div", { children: ["Files: ", Object.keys(source.files).join(', ')] })), config.display && (_jsxs("div", { children: ["Display: ", config.display] }))] })] }))] })] }));
+};
+export const FontShowcase = ({ showAllVariations = false, className = '' }) => {
+    const { currentThemeConfig } = useTheme();
+    if (!currentThemeConfig?.fonts) {
+        return (_jsx("div", { className: className, children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No font configuration available" }) }));
+    }
+    const fontTypes = ['primary', 'secondary', 'display', 'body', 'mono'];
+    return (_jsx("div", { className: `space-y-6 ${className}`, children: fontTypes.map(fontType => (_jsx(FontPreview, { fontType: fontType, showAllVariations: showAllVariations }, fontType))) }));
+};

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const FormDemo: React.FC;
+export default FormDemo;
+//# sourceMappingURL=form-demo.d.ts.map

package/dist/components/ui/form-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-demo.d.ts","sourceRoot":"","sources":["../../../src/components/ui/form-demo.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EA6hB5B,CAAA;AAED,eAAe,QAAQ,CAAA"}