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

package/dist/components/ui/enterprise-mobile-experience.js

@@ -0,0 +1,157 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect } from 'react';
+import { cn } from '../../lib/utils';
+export const EnterpriseButton = forwardRef(({ className, variant = 'default', size = 'default', loading = false, children, ...props }, ref) => {
+    const [isPressed, setIsPressed] = useState(false);
+    const baseClasses = 'enterprise-button enterprise-mobile-optimized enterprise-interaction-refined';
+    const variantClasses = {
+        default: 'enterprise-button',
+        secondary: 'enterprise-button-secondary',
+        outline: 'enterprise-button-outline',
+        ghost: 'enterprise-button-ghost',
+        premium: 'enterprise-button enterprise-interaction-premium'
+    };
+    const sizeClasses = {
+        sm: 'px-4 py-2 text-sm min-h-[40px] min-w-[40px]',
+        default: 'px-6 py-3 text-base min-h-[48px] min-w-[48px]',
+        lg: 'px-8 py-4 text-lg min-h-[56px] min-w-[56px]',
+        xl: 'px-10 py-5 text-xl min-h-[64px] min-w-[64px]'
+    };
+    const handleMouseDown = () => setIsPressed(true);
+    const handleMouseUp = () => setIsPressed(false);
+    const handleMouseLeave = () => setIsPressed(false);
+    return (_jsxs("button", { ref: ref, className: cn(baseClasses, variantClasses[variant], sizeClasses[size], loading && 'enterprise-loading', isPressed && 'scale-95', className), onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave, disabled: loading, ...props, children: [loading && (_jsx("span", { className: "enterprise-loading-spinner mr-2" })), children] }));
+});
+EnterpriseButton.displayName = 'EnterpriseButton';
+export const EnterpriseCard = forwardRef(({ className, variant = 'default', children, ...props }, ref) => {
+    const baseClasses = 'enterprise-card enterprise-visual-refined';
+    const variantClasses = {
+        default: '',
+        interactive: 'enterprise-card-interactive enterprise-interaction-refined',
+        premium: 'enterprise-card-premium enterprise-interaction-premium',
+        featured: 'enterprise-card-premium enterprise-interaction-premium border-2 border-cs-accent'
+    };
+    return (_jsx("div", { ref: ref, className: cn(baseClasses, variantClasses[variant], className), ...props, children: children }));
+});
+EnterpriseCard.displayName = 'EnterpriseCard';
+export const EnterpriseInput = forwardRef(({ className, variant = 'default', label, required = false, children, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const baseClasses = 'enterprise-input enterprise-mobile-optimized enterprise-accessibility';
+    const variantClasses = {
+        default: '',
+        success: 'enterprise-input-success',
+        error: 'enterprise-input-error',
+        warning: 'enterprise-input-warning'
+    };
+    const handleFocus = () => setIsFocused(true);
+    const handleBlur = () => setIsFocused(false);
+    return (_jsxs("div", { className: "space-y-2", children: [label && (_jsx("label", { className: cn('enterprise-label', required && 'enterprise-label-required'), children: label })), _jsxs("div", { className: "relative", children: [_jsx("input", { ref: ref, className: cn(baseClasses, variantClasses[variant], isFocused && 'enterprise-input-focused', className), onFocus: handleFocus, onBlur: handleBlur, ...props }), children] })] }));
+});
+EnterpriseInput.displayName = 'EnterpriseInput';
+export const EnterpriseProgress = ({ value, max = 100, variant = 'default', size = 'default', showLabel = true, className }) => {
+    const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+    const baseClasses = 'enterprise-progress enterprise-performance';
+    const sizeClasses = {
+        sm: 'h-1',
+        default: 'h-2',
+        lg: 'h-3'
+    };
+    const variantClasses = {
+        default: 'enterprise-progress-bar',
+        success: 'enterprise-progress-bar bg-gradient-to-r from-cs-success to-cs-success/80',
+        warning: 'enterprise-progress-bar bg-gradient-to-r from-cs-warning to-cs-warning/80',
+        error: 'enterprise-progress-bar bg-gradient-to-r from-cs-error to-cs-error/80'
+    };
+    return (_jsxs("div", { className: cn('space-y-2', className), children: [showLabel && (_jsxs("div", { className: "flex justify-between items-center text-sm", children: [_jsx("span", { className: "text-cs-text-primary font-medium", children: "Progress" }), _jsxs("span", { className: "text-cs-text-secondary", children: [Math.round(percentage), "%"] })] })), _jsx("div", { className: cn(baseClasses, sizeClasses[size]), children: _jsx("div", { className: cn(variantClasses[variant]), style: { width: `${percentage}%` } }) })] }));
+};
+export const EnterpriseQualityMetric = ({ score, label, description, className }) => {
+    const getVariantClass = () => {
+        if (score >= 90)
+            return 'enterprise-quality-excellent';
+        if (score >= 80)
+            return 'enterprise-quality-good';
+        if (score < 80)
+            return 'enterprise-quality-needs-improvement';
+        return 'enterprise-quality-metric';
+    };
+    const getScoreColor = () => {
+        if (score >= 90)
+            return 'text-cs-success';
+        if (score >= 80)
+            return 'text-cs-warning';
+        if (score < 80)
+            return 'text-cs-error';
+        return 'text-cs-primary';
+    };
+    return (_jsxs("div", { className: cn('enterprise-quality-metric', getVariantClass(), className), children: [_jsx("div", { className: cn('enterprise-quality-score', getScoreColor()), children: score }), _jsx("div", { className: "enterprise-quality-label", children: label }), description && (_jsx("div", { className: "enterprise-quality-description", children: description }))] }));
+};
+export const EnterpriseStatus = ({ phase, children, className }) => {
+    const phaseClasses = {
+        initializing: 'enterprise-status-initializing',
+        optimizing: 'enterprise-status-optimizing',
+        polishing: 'enterprise-status-polishing',
+        verifying: 'enterprise-status-verifying',
+        complete: 'enterprise-status-complete',
+        'enterprise-ready': 'enterprise-status-enterprise-ready'
+    };
+    const phaseIcons = {
+        initializing: '🔄',
+        optimizing: '⚡',
+        polishing: '✨',
+        verifying: '🔍',
+        complete: '✅',
+        'enterprise-ready': '🏆'
+    };
+    return (_jsxs("span", { className: cn('enterprise-status', phaseClasses[phase], className), children: [_jsx("span", { className: "text-lg", children: phaseIcons[phase] }), children] }));
+};
+export const EnterpriseContainer = ({ className, children, ...props }) => {
+    return (_jsx("div", { className: cn('enterprise-container', className), ...props, children: children }));
+};
+export const EnterpriseSection = ({ className, children, ...props }) => {
+    return (_jsx("section", { className: cn('enterprise-section', className), ...props, children: children }));
+};
+export const EnterpriseGrid = ({ cols = 1, className, children, ...props }) => {
+    const colsClasses = {
+        1: 'enterprise-grid-cols-1',
+        2: 'enterprise-grid-cols-2',
+        3: 'enterprise-grid-cols-3',
+        4: 'enterprise-grid-cols-4'
+    };
+    return (_jsx("div", { className: cn('enterprise-grid', colsClasses[cols], className), ...props, children: children }));
+};
+export const EnterpriseLoading = ({ size = 'default', text = 'Loading...', className }) => {
+    const sizeClasses = {
+        sm: 'w-4 h-4',
+        default: 'w-6 h-6',
+        lg: 'w-8 h-8'
+    };
+    return (_jsxs("div", { className: cn('flex items-center justify-center space-x-2', className), children: [_jsx("div", { className: cn('enterprise-loading-spinner', sizeClasses[size]) }), text && (_jsx("span", { className: "text-cs-text-secondary text-sm font-medium", children: text }))] }));
+};
+export const EnterpriseNotification = ({ type, title, message, onClose, duration = 5000, className }) => {
+    const [isVisible, setIsVisible] = useState(true);
+    useEffect(() => {
+        if (duration > 0) {
+            const timer = setTimeout(() => {
+                setIsVisible(false);
+                onClose?.();
+            }, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [duration, onClose]);
+    const typeClasses = {
+        success: 'enterprise-notification-success',
+        warning: 'enterprise-notification-warning',
+        error: 'enterprise-notification-error',
+        info: 'enterprise-notification-info'
+    };
+    const typeIcons = {
+        success: '✅',
+        warning: '⚠️',
+        error: '❌',
+        info: 'ℹ️'
+    };
+    if (!isVisible)
+        return null;
+    return (_jsx("div", { className: cn('enterprise-notification', typeClasses[type], className), children: _jsxs("div", { className: "flex items-start space-x-3", children: [_jsx("span", { className: "text-lg", children: typeIcons[type] }), _jsxs("div", { className: "flex-1", children: [_jsx("h4", { className: "text-sm font-semibold text-cs-text-primary", children: title }), message && (_jsx("p", { className: "text-sm text-cs-text-secondary mt-1", children: message }))] }), onClose && (_jsx("button", { onClick: onClose, className: "text-cs-text-secondary hover:text-cs-text-primary transition-colors", children: "\u2715" }))] }) }));
+};

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { AlertProps } from './types.js';
+export declare const Alert: React.FC<AlertProps>;
+export default Alert;
+//# sourceMappingURL=alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/feedback/alert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAe,MAAM,YAAY,CAAC;AAmErD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAyFtC,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } 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 alert type
+const getAlertIcon = (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;
+    }
+};
+// Alert Action Button Component
+const AlertActionButton = ({ label, onClick, variant = 'primary' }) => {
+    return (_jsx("button", { type: "button", className: `alert__action-button alert__action-button--${variant}`, onClick: onClick, children: label }));
+};
+// Main Alert Component
+export const Alert = ({ title, message, children, type = 'info', dismissible = false, onDismiss, icon, actions = [], showIcon = true, closable = false, persistent = false, className = '', theme = 'stan-design', size = 'md', variant = 'default' }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // Note: colors not needed as we're using semantic CSS classes
+    const [isVisible, setIsVisible] = useState(true);
+    const handleDismiss = useCallback(() => {
+        if (onDismiss) {
+            onDismiss();
+        }
+        if (!persistent) {
+            setIsVisible(false);
+        }
+    }, [onDismiss, persistent]);
+    const shouldShowIcon = showIcon && (icon || type);
+    const shouldShowClose = (closable || dismissible) && !persistent;
+    if (!isVisible) {
+        return null;
+    }
+    return (_jsxs("div", { className: `alert__container alert__container--${size} alert__container--${type} alert__container--${variant} ${className}`, role: "alert", "aria-live": "polite", children: [shouldShowIcon && (_jsx("div", { className: `alert__icon alert__icon--${type}`, children: icon || getAlertIcon(type, 'alert__icon') })), _jsxs("div", { className: "alert__content", children: [title && (_jsx("h3", { className: "alert__title", children: title })), (message || children) && (_jsx("div", { className: `alert__message ${!title ? 'alert__message--only' : ''}`, children: children || message })), actions.length > 0 && (_jsx("div", { className: "alert__actions", children: actions.map((action, index) => (_jsx(AlertActionButton, { ...action, theme: theme }, index))) }))] }), shouldShowClose && (_jsx("button", { type: "button", className: "alert__close-button", onClick: handleDismiss, "aria-label": "Close alert", children: _jsx(XMarkIcon, { className: "alert__close-icon" }) }))] }));
+};
+export default Alert;

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

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } 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 alert type
+const getAlertIcon = (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;
+    }
+};
+// Alert Action Button Component
+const AlertActionButton = ({ label, onClick, variant = 'primary' }) => {
+    return (_jsx("button", { type: "button", className: `alert__action-button alert__action-button--${variant}`, onClick: onClick, children: label }));
+};
+// Main Alert Component
+export const Alert = ({ title, message, children, type = 'info', dismissible = false, onDismiss, icon, actions = [], showIcon = true, closable = false, persistent = false, className = '', theme = 'stan-design', size = 'md', variant = 'default' }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // Note: colors not needed as we're using semantic CSS classes
+    const [isVisible, setIsVisible] = useState(true);
+    const handleDismiss = useCallback(() => {
+        if (onDismiss) {
+            onDismiss();
+        }
+        if (!persistent) {
+            setIsVisible(false);
+        }
+    }, [onDismiss, persistent]);
+    const shouldShowIcon = showIcon && (icon || type);
+    const shouldShowClose = (closable || dismissible) && !persistent;
+    if (!isVisible) {
+        return null;
+    }
+    return (_jsxs("div", { className: `alert__container alert__container--${size} alert__container--${type} alert__container--${variant} ${className}`, role: "alert", "aria-live": "polite", children: [shouldShowIcon && (_jsx("div", { className: `alert__icon alert__icon--${type}`, children: icon || getAlertIcon(type, 'alert__icon') })), _jsxs("div", { className: "alert__content", children: [title && (_jsx("h3", { className: "alert__title", children: title })), (message || children) && (_jsx("div", { className: `alert__message ${!title ? 'alert__message--only' : ''}`, children: children || message })), actions.length > 0 && (_jsx("div", { className: "alert__actions", children: actions.map((action, index) => (_jsx(AlertActionButton, { ...action, theme: theme }, index))) }))] }), shouldShowClose && (_jsx("button", { type: "button", className: "alert__close-button", onClick: handleDismiss, "aria-label": "Close alert", children: _jsx(XMarkIcon, { className: "alert__close-icon" }) }))] }));
+};
+export default Alert;

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

@@ -0,0 +1,10 @@
+export { Alert } from './alert';
+export { Progress } from './progress';
+export { Toast, ToastContainer } from './toast';
+export { Skeleton } from './skeleton';
+export { ToastProvider, useToast, useToastHelpers } from './toast-context';
+export { ToastRenderer, GlobalToastRenderer } from './toast-renderer';
+export type { AlertProps, AlertAction, StatusAlertData, ToastProps, ToastAction, ToastContainerProps, ProgressProps, ProgressStep, SkeletonProps, SkeletonTextProps, SkeletonAvatarProps, SkeletonButtonProps, FeedbackBaseProps } from './types';
+export type { ToastInstance, ToastContextValue, ToastProviderProps } from './toast-context';
+export { statusAlertExamples } from './status-alert-example';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/feedback/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAGtE,YAAY,EACV,UAAU,EACV,WAAW,EACX,eAAe,EACf,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAEjB,YAAY,EACV,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC"}

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

@@ -0,0 +1,10 @@
+// Feedback Components - Main Export
+export { Alert } from './alert';
+export { Progress } from './progress';
+export { Toast, ToastContainer } from './toast';
+export { Skeleton } from './skeleton';
+// Toast Management
+export { ToastProvider, useToast, useToastHelpers } from './toast-context';
+export { ToastRenderer, GlobalToastRenderer } from './toast-renderer';
+// Examples
+export { statusAlertExamples } from './status-alert-example';

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

@@ -0,0 +1,10 @@
+// Feedback Components - Main Export
+export { Alert } from './alert';
+export { Progress } from './progress';
+export { Toast, ToastContainer } from './toast';
+export { Skeleton } from './skeleton';
+// Toast Management
+export { ToastProvider, useToast, useToastHelpers } from './toast-context';
+export { ToastRenderer, GlobalToastRenderer } from './toast-renderer';
+// Examples
+export { statusAlertExamples } from './status-alert-example';

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ProgressProps } from './types.js';
+export declare const Progress: React.FC<ProgressProps>;
+export default Progress;
+//# sourceMappingURL=progress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/feedback/progress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,aAAa,EAAgB,MAAM,YAAY,CAAC;AA2JzD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqH5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+;
+// Linear Progress Component
+const LinearProgress = ({ value, max = 100, min = 0, animated = true, striped = false, color, size = 'md', className = '' }) => {
+    // Note: theme and colors not needed as we're using semantic CSS classes
+    const percentage = Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100);
+    return (_jsx("div", { className: `progress__container progress__container--${size} ${className}`, children: _jsx("div", { className: `progress__bar ${animated ? 'progress__bar--animated' : ''} ${striped ? 'progress__bar--striped' : ''} ${color ? `progress__bar--${color}` : ''}`, style: { width: `${percentage}%` } }) }));
+};
+// Circular Progress Component
+const CircularProgress = ({ value, max = 100, min = 0, animated = true, color, size = 'md', thickness = 4, trackColor: _trackColor, progressColor: _progressColor, className = '' }) => {
+    // Note: theme colors not needed as we're using semantic CSS classes
+    const percentage = Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100);
+    const radius = 50 - (thickness / 2);
+    const circumference = 2 * Math.PI * radius;
+    const strokeDasharray = circumference;
+    const strokeDashoffset = circumference - (percentage / 100) * circumference;
+    return (_jsxs("div", { className: `progress__circular progress__circular--${size} ${className}`, children: [_jsxs("svg", { className: "progress__circle", viewBox: "0 0 100 100", children: [_jsx("circle", { cx: "50", cy: "50", r: radius, className: "progress__circle-track", strokeWidth: thickness }), _jsx("circle", { cx: "50", cy: "50", r: radius, className: `progress__circle-progress ${animated ? 'progress__circle-progress--animated' : ''} ${color ? `progress__circle-progress--${color}` : ''}`, strokeWidth: thickness, strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset })] }), _jsxs("div", { className: "progress__circle-label", children: [Math.round(percentage), "%"] })] }));
+};
+// Steps Progress Component
+const StepsProgress = ({ steps = [], className = '' }) => {
+    // Note: size and colors not needed as we're using semantic CSS classes
+    const getStatusIcon = (status) => {
+        switch (status) {
+            case 'completed':
+                return (_jsx("svg", { className: "progress__step-icon", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }));
+            case 'active':
+                return (_jsx("svg", { className: "progress__step-icon", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" }) }));
+            case 'error':
+                return (_jsx("svg", { className: "progress__step-icon", 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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }));
+            case 'pending':
+            default:
+                return (_jsx("svg", { className: "progress__step-icon", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" }) }));
+        }
+    };
+    if (steps.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: `progress__steps ${className}`, children: steps.map((step, index) => (_jsxs("div", { className: "progress__step", children: [_jsx("div", { className: `progress__step-indicator progress__step-indicator--${step.status}`, children: getStatusIcon(step.status) }), index < steps.length - 1 && (_jsx("div", { className: `progress__step-connector ${step.status === 'completed' ? 'progress__step-connector--completed' : ''}` })), _jsxs("div", { className: `progress__step-label progress__step-label--${step.status}`, children: [_jsx("div", { className: "progress__step-title", children: step.label }), step.description && (_jsx("div", { className: "progress__step-description", children: step.description }))] })] }, index))) }));
+};
+// Main Progress Component
+export const Progress = ({ value, max = 100, min = 0, label, showLabel = false, showValue = false, showPercentage = false, animated = true, striped = false, color, size = 'md', variant = 'linear', thickness, trackColor: _trackColor, progressColor: _progressColor, indeterminate = false, onComplete, className = '', theme = 'stan-design' }) => {
+    // Note: theme colors not needed as we're using semantic CSS classes
+    const [currentValue, setCurrentValue] = useState(value);
+    useEffect(() => {
+        setCurrentValue(value);
+        if (value >= max && onComplete) {
+            onComplete();
+        }
+    }, [value, max, onComplete]);
+    useEffect(() => {
+        if (indeterminate) {
+            const interval = setInterval(() => {
+                setCurrentValue(prev => {
+                    if (prev >= max)
+                        return min;
+                    return prev + (max - min) / 20;
+                });
+            }, 100);
+            return () => clearInterval(interval);
+        }
+    }, [indeterminate, min, max]);
+    const renderProgress = () => {
+        switch (variant) {
+            case 'circular':
+                return (_jsx(CircularProgress, { value: currentValue, max: max, min: min, animated: animated, color: color, size: size, thickness: thickness, trackColor: _trackColor, progressColor: _progressColor, className: className }));
+            case 'steps':
+                return (_jsx(StepsProgress, { value: currentValue, max: max, min: min, size: size, className: className }));
+            case 'linear':
+            default:
+                return (_jsx(LinearProgress, { value: currentValue, max: max, min: min, animated: animated, striped: striped, color: color, size: size, thickness: thickness, trackColor: _trackColor, progressColor: _progressColor, className: className }));
+        }
+    };
+    return (_jsxs("div", { className: `progress__wrapper progress__wrapper--${theme} ${className}`, children: [(showLabel || showValue || showPercentage) && (_jsxs("div", { className: "progress__header", children: [showLabel && label && (_jsx("span", { className: "progress__label", children: label })), (showValue || showPercentage) && (_jsxs("span", { className: "progress__value", children: [showValue && `${currentValue}/${max}`, showValue && showPercentage && ' - ', showPercentage && `${Math.round(((currentValue - min) / (max - min)) * 100)}%`] }))] })), renderProgress()] }));
+};
+export default Progress;

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

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+;
+// Linear Progress Component
+const LinearProgress = ({ value, max = 100, min = 0, animated = true, striped = false, color, size = 'md', className = '' }) => {
+    // Note: theme and colors not needed as we're using semantic CSS classes
+    const percentage = Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100);
+    return (_jsx("div", { className: `progress__container progress__container--${size} ${className}`, children: _jsx("div", { className: `progress__bar ${animated ? 'progress__bar--animated' : ''} ${striped ? 'progress__bar--striped' : ''} ${color ? `progress__bar--${color}` : ''}`, style: { width: `${percentage}%` } }) }));
+};
+// Circular Progress Component
+const CircularProgress = ({ value, max = 100, min = 0, animated = true, color, size = 'md', thickness = 4, trackColor: _trackColor, progressColor: _progressColor, className = '' }) => {
+    // Note: theme colors not needed as we're using semantic CSS classes
+    const percentage = Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100);
+    const radius = 50 - (thickness / 2);
+    const circumference = 2 * Math.PI * radius;
+    const strokeDasharray = circumference;
+    const strokeDashoffset = circumference - (percentage / 100) * circumference;
+    return (_jsxs("div", { className: `progress__circular progress__circular--${size} ${className}`, children: [_jsxs("svg", { className: "progress__circle", viewBox: "0 0 100 100", children: [_jsx("circle", { cx: "50", cy: "50", r: radius, className: "progress__circle-track", strokeWidth: thickness }), _jsx("circle", { cx: "50", cy: "50", r: radius, className: `progress__circle-progress ${animated ? 'progress__circle-progress--animated' : ''} ${color ? `progress__circle-progress--${color}` : ''}`, strokeWidth: thickness, strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset })] }), _jsxs("div", { className: "progress__circle-label", children: [Math.round(percentage), "%"] })] }));
+};
+// Steps Progress Component
+const StepsProgress = ({ steps = [], className = '' }) => {
+    // Note: size and colors not needed as we're using semantic CSS classes
+    const getStatusIcon = (status) => {
+        switch (status) {
+            case 'completed':
+                return (_jsx("svg", { className: "progress__step-icon", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }));
+            case 'active':
+                return (_jsx("svg", { className: "progress__step-icon", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" }) }));
+            case 'error':
+                return (_jsx("svg", { className: "progress__step-icon", 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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }));
+            case 'pending':
+            default:
+                return (_jsx("svg", { className: "progress__step-icon", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" }) }));
+        }
+    };
+    if (steps.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: `progress__steps ${className}`, children: steps.map((step, index) => (_jsxs("div", { className: "progress__step", children: [_jsx("div", { className: `progress__step-indicator progress__step-indicator--${step.status}`, children: getStatusIcon(step.status) }), index < steps.length - 1 && (_jsx("div", { className: `progress__step-connector ${step.status === 'completed' ? 'progress__step-connector--completed' : ''}` })), _jsxs("div", { className: `progress__step-label progress__step-label--${step.status}`, children: [_jsx("div", { className: "progress__step-title", children: step.label }), step.description && (_jsx("div", { className: "progress__step-description", children: step.description }))] })] }, index))) }));
+};
+// Main Progress Component
+export const Progress = ({ value, max = 100, min = 0, label, showLabel = false, showValue = false, showPercentage = false, animated = true, striped = false, color, size = 'md', variant = 'linear', thickness, trackColor: _trackColor, progressColor: _progressColor, indeterminate = false, onComplete, className = '', theme = 'stan-design' }) => {
+    // Note: theme colors not needed as we're using semantic CSS classes
+    const [currentValue, setCurrentValue] = useState(value);
+    useEffect(() => {
+        setCurrentValue(value);
+        if (value >= max && onComplete) {
+            onComplete();
+        }
+    }, [value, max, onComplete]);
+    useEffect(() => {
+        if (indeterminate) {
+            const interval = setInterval(() => {
+                setCurrentValue(prev => {
+                    if (prev >= max)
+                        return min;
+                    return prev + (max - min) / 20;
+                });
+            }, 100);
+            return () => clearInterval(interval);
+        }
+    }, [indeterminate, min, max]);
+    const renderProgress = () => {
+        switch (variant) {
+            case 'circular':
+                return (_jsx(CircularProgress, { value: currentValue, max: max, min: min, animated: animated, color: color, size: size, thickness: thickness, trackColor: _trackColor, progressColor: _progressColor, className: className }));
+            case 'steps':
+                return (_jsx(StepsProgress, { value: currentValue, max: max, min: min, size: size, className: className }));
+            case 'linear':
+            default:
+                return (_jsx(LinearProgress, { value: currentValue, max: max, min: min, animated: animated, striped: striped, color: color, size: size, thickness: thickness, trackColor: _trackColor, progressColor: _progressColor, className: className }));
+        }
+    };
+    return (_jsxs("div", { className: `progress__wrapper progress__wrapper--${theme} ${className}`, children: [(showLabel || showValue || showPercentage) && (_jsxs("div", { className: "progress__header", children: [showLabel && label && (_jsx("span", { className: "progress__label", children: label })), (showValue || showPercentage) && (_jsxs("span", { className: "progress__value", children: [showValue && `${currentValue}/${max}`, showValue && showPercentage && ' - ', showPercentage && `${Math.round(((currentValue - min) / (max - min)) * 100)}%`] }))] })), renderProgress()] }));
+};
+export default Progress;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { SkeletonProps, SkeletonTextProps, SkeletonAvatarProps, SkeletonButtonProps } from './types.js';
+export declare const SkeletonText: React.FC<SkeletonTextProps>;
+export declare const SkeletonAvatar: React.FC<SkeletonAvatarProps>;
+export declare const SkeletonButton: React.FC<SkeletonButtonProps>;
+export declare const Skeleton: React.FC<SkeletonProps>;
+export default Skeleton;
+//# sourceMappingURL=skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/feedback/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAyDxG,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuCpD,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAcxD,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiBxD,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6C5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+;
+// Base Skeleton Component
+const BaseSkeleton = ({ width, height, variant = 'rectangular', animation = 'pulse', className = '', size = 'md' }) => {
+    // Note: theme and colors not needed as we're using semantic CSS classes
+    const getDefaultDimensions = () => {
+        if (width && height)
+            return { width, height };
+        switch (variant) {
+            case 'circular':
+                switch (size) {
+                    case 'sm': return { width: '2rem', height: '2rem' };
+                    case 'lg': return { width: '4rem', height: '4rem' };
+                    default: return { width: '3rem', height: '3rem' };
+                }
+            case 'text':
+                switch (size) {
+                    case 'sm': return { width: '100%', height: '0.875rem' };
+                    case 'lg': return { width: '100%', height: '1.25rem' };
+                    default: return { width: '100%', height: '1rem' };
+                }
+            case 'rectangular':
+            case 'rounded':
+            default:
+                switch (size) {
+                    case 'sm': return { width: '100%', height: '2rem' };
+                    case 'lg': return { width: '100%', height: '4rem' };
+                    default: return { width: '100%', height: '3rem' };
+                }
+        }
+    };
+    const dimensions = getDefaultDimensions();
+    return (_jsx("div", { className: `skeleton__base skeleton__base--${variant} skeleton__base--${animation} skeleton__base--${size} ${className}`, style: {
+            width: dimensions.width,
+            height: dimensions.height
+        }, "aria-busy": "true", role: "progressbar", "aria-label": "Loading content" }));
+};
+// Skeleton Text Component
+export const SkeletonText = ({ lines = 3, lineHeight, lastLineWidth, spacing = 2, className = '', ...props }) => {
+    const getLineHeight = () => {
+        if (lineHeight)
+            return lineHeight;
+        switch (props.size) {
+            case 'sm': return '0.875rem';
+            case 'lg': return '1.25rem';
+            default: return '1rem';
+        }
+    };
+    const getLastLineWidth = () => {
+        if (lastLineWidth)
+            return lastLineWidth;
+        return '75%';
+    };
+    return (_jsx("div", { className: `skeleton__text skeleton__text--spacing-${spacing} ${className}`, children: Array.from({ length: lines }).map((_, index) => (_jsx("div", { className: `skeleton__text-line skeleton__text-line--${props.size || 'md'} skeleton__base--${props.animation || 'pulse'} ${index === lines - 1 ? 'skeleton__text-line--last' : ''}`, style: {
+                width: index === lines - 1 ? getLastLineWidth() : '100%',
+                height: getLineHeight()
+            }, "aria-busy": "true" }, index))) }));
+};
+// Skeleton Avatar Component
+export const SkeletonAvatar = ({ size = 'md', shape = 'circular', className = '', ...props }) => {
+    return (_jsx("div", { className: `skeleton__avatar skeleton__avatar--${size} skeleton__avatar--${shape} skeleton__base--${props.animation || 'pulse'} ${className}`, "aria-busy": "true", role: "progressbar", "aria-label": "Loading avatar" }));
+};
+// Skeleton Button Component
+export const SkeletonButton = ({ size = 'md', variant = 'contained', fullWidth = false, className = '', ...props }) => {
+    return (_jsx("div", { className: `skeleton__button skeleton__button--${size} skeleton__button--${variant} ${fullWidth ? 'skeleton__button--full-width' : ''} skeleton__base--${props.animation || 'pulse'} ${className}`, "aria-busy": "true", role: "progressbar", "aria-label": "Loading button" }));
+};
+// Main Skeleton Component
+export const Skeleton = ({ width, height, variant = 'rectangular', animation = 'pulse', rows = 1, spacing = 2, show = true, className = '', theme = 'stan-design', size = 'md' }) => {
+    if (!show) {
+        return null;
+    }
+    if (rows > 1) {
+        return (_jsx("div", { className: `skeleton__container skeleton__container--spacing-${spacing} ${className}`, children: Array.from({ length: rows }).map((_, index) => (_jsx(BaseSkeleton, { width: width, height: height, variant: variant, animation: animation, size: size, theme: theme }, index))) }));
+    }
+    return (_jsx(BaseSkeleton, { width: width, height: height, variant: variant, animation: animation, size: size, theme: theme, className: className }));
+};
+export default Skeleton;