@catalystsoftware/ui 1.0.5 → 1.0.7

package/components/catalyst-ui/core/feedback/alert.tsx

@@ -1,491 +0,0 @@
-import React, { useState } from 'react';
-import { CheckCircle, AlertTriangle, XCircle, Info, X, ExternalLink, ArrowRight, Bell, Shield, Zap, } from 'lucide-react';
-
-export const AlertV2 = ({
-  title = "Alert Title",
-  description = "This is an alert description that provides more context about the situation.",
-  variant = "info",
-  style = "accent",
-  dismissible = false,
-  onDismiss = null,
-  primaryAction = null,
-  secondaryAction = null,
-  icon = "auto",
-  iconPosition = "left",
-  className = "",
-  size = "default",
-  rounded = "default",
-  customStyles = {},
-  showBorder = "bordered",
-  ...props
-}) => {
-  const [isVisible, setIsVisible] = useState(true);
-
-  if (!isVisible) return null;
-
-  // Icon mapping
-  const iconMap = {
-    default: null,
-    success: CheckCircle,
-    warning: AlertTriangle,
-    error: XCircle,
-    info: Info,
-  };
-
-  // Auto-select icon based on variant
-  const getIcon = () => {
-    if (icon === false) return null;
-    if (icon === "auto") return iconMap[variant];
-    return icon;
-  };
-
-  const IconComponent = getIcon();
-
-  // Handle dismiss
-  const handleDismiss = () => {
-    setIsVisible(false);
-    if (onDismiss) onDismiss();
-  };
-
-
-const styleConfigs = {
-  simple: {
-    default: {
-      container: 'bg-background border border-border text-foreground p-3',
-      icon: 'text-muted-foreground',
-      title: 'text-foreground',
-      description: 'text-muted-foreground',
-      button: 'bg-primary text-primary-foreground hover:bg-primary/90',
-      dismissButton: 'text-muted-foreground hover:text-foreground',
-    },
-    success: {
-      container: "bg-green-950/50 border border-green-800/50 text-green-100 p-3",
-      icon: "text-green-400",
-      title: "text-green-100",
-      description: "text-green-200",
-      button: "bg-green-600 text-white hover:bg-green-700",
-      dismissButton: "text-green-400 hover:text-green-200"
-    },
-    warning: {
-      container: "bg-orange-950/50 border border-orange-800/50 text-orange-100 p-3",
-      icon: "text-orange-400",
-      title: "text-orange-100",
-      description: "text-orange-200",
-      button: "bg-orange-600 text-white hover:bg-orange-700",
-      dismissButton: "text-orange-400 hover:text-orange-200"
-    },
-    error: {
-      container: "bg-red-950/50 border border-red-800/50 text-red-100 p-3",
-      icon: "text-red-400",
-      title: "text-red-100",
-      description: "text-red-200",
-      button: "bg-red-600 text-white hover:bg-red-700",
-      dismissButton: "text-red-400 hover:text-red-200"
-    },
-    info: {
-      container: "bg-blue-950/50 border border-blue-800/50 text-blue-100 p-3",
-      icon: "text-blue-400",
-      title: "text-blue-100",
-      description: "text-blue-200",
-      button: "bg-blue-600 text-white hover:bg-blue-700",
-      dismissButton: "text-blue-400 hover:text-blue-200"
-    }
-  },
-  bordered: {
-    default: {
-      container: 'bg-background border-2 border-border text-foreground shadow-sm p-3',
-      icon: 'text-primary',
-      title: 'text-foreground font-medium',
-      description: 'text-muted-foreground',
-      button: 'bg-primary text-primary-foreground hover:bg-primary/90 border-0',
-      dismissButton: 'text-muted-foreground hover:text-foreground border border-border hover:bg-muted',
-    },
-    success: {
-      container: "bg-green-950/20 border-2 border-green-500 text-green-100 shadow-md p-3",
-      icon: "text-green-400",
-      title: "text-green-100 font-semibold",
-      description: "text-green-200",
-      button: "bg-green-600 text-white hover:bg-green-700 border-0",
-      dismissButton: "text-green-400 hover:text-green-200 border border-green-500 hover:bg-green-950/40"
-    },
-    warning: {
-      container: "bg-amber-950/20 border-2 border-amber-500 text-amber-100 shadow-md p-3",
-      icon: "text-amber-400",
-      title: "text-amber-100 font-semibold",
-      description: "text-amber-200",
-      button: "bg-amber-600 text-white hover:bg-amber-700 border-0",
-      dismissButton: "text-amber-400 hover:text-amber-200 border border-amber-500 hover:bg-amber-950/40"
-    },
-    error: {
-      container: "bg-rose-950/20 border-2 border-rose-500 text-rose-100 shadow-md p-3",
-      icon: "text-rose-400",
-      title: "text-rose-100 font-semibold",
-      description: "text-rose-200",
-      button: "bg-rose-600 text-white hover:bg-rose-700 border-0",
-      dismissButton: "text-rose-400 hover:text-rose-200 border border-rose-500 hover:bg-rose-950/40"
-    },
-    info: {
-      container: "bg-cyan-950/20 border-2 border-cyan-500 text-cyan-100 shadow-md p-3",
-      icon: "text-cyan-400",
-      title: "text-cyan-100 font-semibold",
-      description: "text-cyan-200",
-      button: "bg-cyan-600 text-white hover:bg-cyan-700 border-0",
-      dismissButton: "text-cyan-400 hover:text-cyan-200 border border-cyan-500 hover:bg-cyan-950/40"
-    }
-  },
-  filled: {
-    default: {
-      container: 'bg-muted text-muted-foreground border-0 p-3',
-      icon: 'text-foreground',
-      title: 'text-foreground font-medium',
-      description: 'text-muted-foreground',
-      button: 'bg-background text-foreground hover:bg-background/80',
-      dismissButton: 'text-muted-foreground hover:text-foreground',
-    },
-    success: {
-      container: "bg-green-600 text-green-50 border-0 p-3",
-      icon: "text-green-100",
-      title: "text-green-50 font-medium",
-      description: "text-green-100",
-      button: "bg-green-800 text-green-50 hover:bg-green-900",
-      dismissButton: "text-green-200 hover:text-green-50"
-    },
-    warning: {
-      container: "bg-amber-600 text-amber-50 border-0 p-3",
-      icon: "text-amber-100",
-      title: "text-amber-50 font-medium",
-      description: "text-amber-100",
-      button: "bg-amber-800 text-amber-50 hover:bg-amber-900",
-      dismissButton: "text-amber-200 hover:text-amber-50"
-    },
-    error: {
-      container: "bg-red-600 text-red-50 border-0 p-3",
-      icon: "text-red-100",
-      title: "text-red-50 font-medium",
-      description: "text-red-100",
-      button: "bg-red-800 text-red-50 hover:bg-red-900",
-      dismissButton: "text-red-200 hover:text-red-50"
-    },
-    info: {
-      container: "bg-blue-600 text-blue-50 border-0 p-3",
-      icon: "text-blue-100",
-      title: "text-blue-50 font-medium",
-      description: "text-blue-100",
-      button: "bg-blue-800 text-blue-50 hover:bg-blue-900",
-      dismissButton: "text-blue-200 hover:text-blue-50"
-    }
-  },
-  accent: {
-    default: {
-      container: 'bg-background border-l-4 border-primary text-foreground shadow-sm pl-4 p-3',
-      icon: 'text-primary',
-      title: 'text-foreground font-medium',
-      description: 'text-muted-foreground',
-      button: 'bg-primary text-primary-foreground hover:bg-primary/90',
-      dismissButton: 'text-muted-foreground hover:text-foreground',
-    },
-    success: {
-      container: "bg-green-950/30 border-l-4 border-green-400 text-green-100 shadow-sm pl-4 p-3",
-      icon: "text-green-400",
-      title: "text-green-100 font-semibold",
-      description: "text-green-200",
-      button: "bg-green-600 text-white hover:bg-green-700",
-      dismissButton: "text-green-400 hover:text-green-200"
-    },
-    warning: {
-      container: "bg-yellow-950/30 border-l-4 border-yellow-400 text-yellow-100 shadow-sm pl-4 p-3",
-      icon: "text-yellow-400",
-      title: "text-yellow-100 font-semibold",
-      description: "text-yellow-200",
-      button: "bg-yellow-600 text-white hover:bg-yellow-700",
-      dismissButton: "text-yellow-400 hover:text-yellow-200"
-    },
-    error: {
-      container: "bg-red-950/30 border-l-4 border-red-400 text-red-100 shadow-sm pl-4 p-3",
-      icon: "text-red-400",
-      title: "text-red-100 font-semibold",
-      description: "text-red-200",
-      button: "bg-red-600 text-white hover:bg-red-700",
-      dismissButton: "text-red-400 hover:text-red-200"
-    },
-    info: {
-      container: "bg-indigo-950/30 border-l-4 border-indigo-400 text-indigo-100 shadow-sm pl-4 p-3",
-      icon: "text-indigo-400",
-      title: "text-indigo-100 font-semibold",
-      description: "text-indigo-200",
-      button: "bg-indigo-600 text-white hover:bg-indigo-700",
-      dismissButton: "text-indigo-400 hover:text-indigo-200"
-    }
-  },
-  banner: {
-    default: {
-      container: 'bg-muted text-foreground border-0 rounded-lg px-4 py-3 p-3',
-      icon: 'text-primary',
-      title: 'text-foreground font-semibold',
-      description: 'text-muted-foreground',
-      button: 'bg-background text-foreground hover:bg-background/80 rounded-md',
-      dismissButton: 'text-muted-foreground hover:text-foreground',
-    },
-    success: {
-      container: "bg-green-700 text-green-50 border-0 rounded-lg px-4 py-3 p-3",
-      icon: "text-green-100",
-      title: "text-green-50 font-bold",
-      description: "text-green-100",
-      button: "bg-green-900 text-green-50 hover:bg-green-950 rounded-md",
-      dismissButton: "text-green-200 hover:text-green-50"
-    },
-    warning: {
-      container: "bg-orange-700 text-orange-50 border-0 rounded-lg px-4 py-3 p-3",
-      icon: "text-orange-100",
-      title: "text-orange-50 font-bold",
-      description: "text-orange-100",
-      button: "bg-orange-900 text-orange-50 hover:bg-orange-950 rounded-md",
-      dismissButton: "text-orange-200 hover:text-orange-50"
-    },
-    error: {
-      container: "bg-red-700 text-red-50 border-0 rounded-lg px-4 py-3 p-3",
-      icon: "text-red-100",
-      title: "text-red-50 font-bold",
-      description: "text-red-100",
-      button: "bg-red-900 text-red-50 hover:bg-red-950 rounded-md ",
-      dismissButton: "text-red-200 hover:text-red-50"
-    },
-    info: {
-      container: "bg-blue-700 text-blue-50 border-0 rounded-lg px-4 py-3 p-3",
-      icon: "text-blue-100",
-      title: "text-blue-50 font-bold",
-      description: "text-blue-100",
-      button: "bg-blue-900 text-blue-50 hover:bg-blue-950 rounded-md",
-      dismissButton: "text-blue-200 hover:text-blue-50"
-    }
-  },
-  card: {
-    default: {
-      container: 'bg-card border border-border text-card-foreground shadow-lg rounded-lg p-3',
-      icon: 'text-primary',
-      title: 'text-card-foreground font-semibold',
-      description: 'text-muted-foreground',
-      button: 'bg-primary text-primary-foreground hover:bg-primary/90',
-      dismissButton: 'text-muted-foreground hover:text-foreground',
-    },
-    success: {
-      container: "bg-green-900/50 border border-green-700 text-green-100 shadow-xl rounded-lg p-4 backdrop-blur-sm",
-      icon: "text-green-400",
-      title: "text-green-100 font-bold",
-      description: "text-green-200",
-      button: "bg-green-600 text-white hover:bg-green-700 shadow-sm",
-      dismissButton: "text-green-400 hover:text-green-200 hover:bg-green-800/50 rounded-full"
-    },
-    warning: {
-      container: "bg-amber-900/50 border border-amber-700 text-amber-100 shadow-xl rounded-lg p-4 backdrop-blur-sm",
-      icon: "text-amber-400",
-      title: "text-amber-100 font-bold",
-      description: "text-amber-200",
-      button: "bg-amber-600 text-white hover:bg-amber-700 shadow-sm",
-      dismissButton: "text-amber-400 hover:text-amber-200 hover:bg-amber-800/50 rounded-full"
-    },
-    error: {
-      container: "bg-red-900/50 border border-red-700 text-red-100 shadow-xl rounded-lg p-4 backdrop-blur-sm",
-      icon: "text-red-400",
-      title: "text-red-100 font-bold",
-      description: "text-red-200",
-      button: "bg-red-600 text-white hover:bg-red-700 shadow-sm",
-      dismissButton: "text-red-400 hover:text-red-200 hover:bg-red-800/50 rounded-full"
-    },
-    info: {
-      container: "bg-blue-900/50 border border-blue-700 text-blue-100 shadow-xl rounded-lg p-4 backdrop-blur-sm",
-      icon: "text-blue-400",
-      title: "text-blue-100 font-bold",
-      description: "text-blue-200",
-      button: "bg-blue-600 text-white hover:bg-blue-700 shadow-sm",
-      dismissButton: "text-blue-400 hover:text-blue-200 hover:bg-blue-800/50 rounded-full"
-    }
-  },
-  minimal: {
-    default: {
-      container: 'bg-transparent border-0 text-foreground p-3',
-      icon: 'text-muted-foreground',
-      title: 'text-foreground',
-      description: 'text-muted-foreground text-sm',
-      button: 'text-primary hover:text-primary/80 underline bg-transparent p-0',
-      dismissButton: 'text-muted-foreground hover:text-foreground bg-transparent',
-    },
-    success: {
-      container: "bg-transparent border-0 text-green-200 p-3",
-      icon: "text-green-400",
-      title: "text-green-200 font-medium",
-      description: "text-green-300 text-sm",
-      button: "text-green-400 hover:text-green-200 underline bg-transparent p-0",
-      dismissButton: "text-green-500 hover:text-green-300 bg-transparent"
-    },
-    warning: {
-      container: "bg-transparent border-0 text-amber-200 p-3",
-      icon: "text-amber-400",
-      title: "text-amber-200 font-medium",
-      description: "text-amber-300 text-sm",
-      button: "text-amber-400 hover:text-amber-200 underline bg-transparent p-0",
-      dismissButton: "text-amber-500 hover:text-amber-300 bg-transparent"
-    },
-    error: {
-      container: "bg-transparent border-0 text-red-200 p-3",
-      icon: "text-red-400",
-      title: "text-red-200 font-medium",
-      description: "text-red-300 text-sm",
-      button: "text-red-400 hover:text-red-200 underline bg-transparent p-0",
-      dismissButton: "text-red-500 hover:text-red-300 bg-transparent"
-    },
-    info: {
-      container: "bg-transparent border-0 text-blue-200 p-3",
-      icon: "text-blue-400",
-      title: "text-blue-200 font-medium",
-      description: "text-blue-300 text-sm",
-      button: "text-blue-400 hover:text-blue-200 underline bg-transparent p-0",
-      dismissButton: "text-blue-500 hover:text-blue-300 bg-transparent"
-    }
-  }
-} 
-// Get current theme - FIXED ACCESS PATTERN
-  const currentTheme = styleConfigs[style]?.[variant] || styleConfigs.accent.default;
-
-  // Size configurations
-  const sizeConfigs = {
-    small: {
-      container: "p-3",
-      icon: "h-4 w-4",
-      title: "text-sm font-medium",
-      description: "text-sm",
-      spacing: "space-x-2"
-    },
-    default: {
-      container: "p-4",
-      icon: "h-5 w-5",
-      title: "text-base font-medium",
-      description: "text-sm",
-      spacing: "space-x-3"
-    },
-    large: {
-      container: "p-6",
-      icon: "h-6 w-6",
-      title: "text-lg font-medium",
-      description: "text-base",
-      spacing: "space-x-4"
-    }
-  };
-
-  const currentSize = sizeConfigs[size];
-
-  // Rounded configurations
-  const roundedConfigs = {
-    none: "",
-    small: "rounded-sm",
-    default: "rounded-md",
-    large: "rounded-lg",
-    full: "rounded-xl"
-  };
-
-  // Render action button
-  const renderActionButton = (action, isPrimary = true) => {
-    if (!action) return null;
-
-    const buttonClasses = `inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
-      isPrimary ? currentTheme.button : 'text-muted-foreground bg-background border border-border hover:bg-muted'
-    }`;
-
-    const content = (
-      <>
-        {action.text}
-        {action.href && <ExternalLink className="ml-1 h-3 w-3" />}
-        {!action.href && isPrimary && <ArrowRight className="ml-1 h-3 w-3" />}
-      </>
-    );
-
-    if (action.href) {
-      return (
-        <a
-          href={action.href}
-          className={buttonClasses}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {content}
-        </a>
-      );
-    }
-
-    return (
-      <button
-        onClick={action.onClick}
-        className={buttonClasses}
-      >
-        {content}
-      </button>
-    );
-  };
-
-  return (
-    <div
-      className={`
-        ${currentTheme.container}
-        ${currentSize.container}
-        ${roundedConfigs[rounded]}
-        ${className}
-      `}
-      style={customStyles}
-      {...props}
-    >
-      <div className="flex">
-        {/* Icon */}
-        {IconComponent && iconPosition === 'left' && (
-          <div className="flex-shrink-0">
-            <IconComponent className={`${currentSize.icon} ${currentTheme.icon}`} />
-          </div>
-        )}
-
-        {/* Content */}
-        <div className={`flex-1 ${IconComponent && iconPosition === 'left' ? 'ml-3' : ''}`}>
-          {/* Icon on top */}
-          {IconComponent && iconPosition === 'top' && (
-            <div className="mb-2">
-              <IconComponent className={`${currentSize.icon} ${currentTheme.icon}`} />
-            </div>
-          )}
-
-          {/* Title */}
-          {title && (
-            <h3 className={`${currentSize.title} ${currentTheme.title}`}>
-              {title}
-            </h3>
-          )}
-
-          {/* Description */}
-          {description && (
-            <div className={`mt-1 ${currentSize.description} ${currentTheme.description}`}>
-              {description}
-            </div>
-          )}
-
-          {/* Actions */}
-          {(primaryAction || secondaryAction) && (
-            <div className="mt-4 flex space-x-3">
-              {renderActionButton(primaryAction, true)}
-              {renderActionButton(secondaryAction, false)}
-            </div>
-          )}
-        </div>
-
-        {/* Dismiss Button */}
-        {dismissible && (
-          <div className="flex-shrink-0 ml-4">
-            <button
-              onClick={handleDismiss}
-              className={`inline-flex rounded-md p-1.5 transition-colors ${currentTheme.dismissButton}`}
-            >
-              <span className="sr-only">Dismiss</span>
-              <X className="h-4 w-4" />
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

package/components/catalyst-ui/core/feedback/spinner-1.tsx

@@ -1,65 +0,0 @@
-// Claude - 10:09 pm Thursday Oct 9th 2025
-
-import React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '~/components/catalyst-ui'
-
-// these few weird ones that weren't in the demo, shadcn just released some new components, and just had the ai's build them to start
-const spinnerVariants = cva(
-  "animate-spin rounded-full border-2 border-solid border-current border-r-transparent",
-  {
-    variants: {
-      size: {
-        sm: "size-4",
-        default: "size-6",
-        lg: "size-8",
-        xl: "size-12",
-      },
-    },
-    defaultVariants: {
-      size: "default",
-    },
-  }
-)
-
-function SpinnerV1({
-  className,
-  size,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof spinnerVariants>) {
-  return (
-    <div
-      role="status"
-      aria-label="Loading"
-      className={cn(spinnerVariants({ size, className }))}
-      {...props}
-    />
-  )
-}
-
-export function SpinnerV1Demo() {
-  return (
-    <div className="space-y-8 p-6 max-w-2xl mx-auto">
-      <div>
-        <h2 className="text-2xl font-bold mb-4">SpinnerV1 Sizes</h2>
-        <div className="flex items-center gap-4">
-          <SpinnerV1 size="sm" />
-          <SpinnerV1 size="default" />
-          <SpinnerV1 size="lg" />
-          <SpinnerV1 size="xl" />
-        </div>
-      </div>
-      <div>
-        <h2 className="text-2xl font-bold mb-4">Custom Color</h2>
-        <div className="flex items-center gap-4">
-          <SpinnerV1 className="text-primary" />
-          <SpinnerV1 className="text-destructive" />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-
-
-export { SpinnerV1, spinnerVariants }