@sudobility/design-components 1.0.8

package/src/color-picker.tsx

@@ -0,0 +1,188 @@
+import React, { useState } from 'react';
+import { cn } from '@sudobility/components';
+
+export interface ColorPickerProps {
+  /** Selected color (hex format) */
+  value: string;
+  /** Change handler */
+  onChange: (color: string) => void;
+  /** Preset colors */
+  presets?: string[];
+  /** Show input field */
+  showInput?: boolean;
+  /** Show opacity slider */
+  showOpacity?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * ColorPicker Component
+ *
+ * Color picker with preset colors and custom input.
+ * Supports hex colors and opacity.
+ *
+ * @example
+ * ```tsx
+ * <ColorPicker
+ *   value={color}
+ *   onChange={setColor}
+ *   showInput
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ColorPicker
+ *   value={brandColor}
+ *   onChange={handleColorChange}
+ *   presets={['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A']}
+ *   showOpacity
+ * />
+ * ```
+ */
+export const ColorPicker: React.FC<ColorPickerProps> = ({
+  value,
+  onChange,
+  presets = [
+    '#000000',
+    '#FFFFFF',
+    '#FF6B6B',
+    '#4ECDC4',
+    '#45B7D1',
+    '#FFA07A',
+    '#F7DC6F',
+    '#BB8FCE',
+    '#85C1E2',
+    '#F8B500',
+    '#52B788',
+    '#E63946',
+    '#1D3557',
+    '#457B9D',
+    '#A8DADC',
+    '#F4A261',
+    '#264653',
+    '#2A9D8F',
+  ],
+  showInput = true,
+  showOpacity = false,
+  className,
+}) => {
+  const [inputValue, setInputValue] = useState(value);
+  const [opacity, setOpacity] = useState(100);
+
+  const handleColorClick = (color: string) => {
+    onChange(color);
+    setInputValue(color);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+
+    // Validate hex color
+    if (/^#[0-9A-F]{6}$/i.test(newValue)) {
+      onChange(newValue);
+    }
+  };
+
+  const handleOpacityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setOpacity(Number(e.target.value));
+  };
+
+  const hexToRgba = (hex: string, alpha: number) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha / 100})`;
+  };
+
+  const displayColor = showOpacity ? hexToRgba(value, opacity) : value;
+
+  return (
+    <div className={cn('bg-white dark:bg-gray-900 rounded-lg p-4', className)}>
+      {/* Current color preview */}
+      <div className='mb-4'>
+        <div className='flex items-center gap-3'>
+          <div
+            className='w-16 h-16 rounded-lg border-2 border-gray-200 dark:border-gray-700 shadow-sm'
+            style={{ backgroundColor: displayColor }}
+          />
+          <div className='flex-1'>
+            <p className='text-sm font-medium text-gray-900 dark:text-white'>
+              Selected Color
+            </p>
+            <p className='text-xs text-gray-600 dark:text-gray-400 mt-1 font-mono'>
+              {value}
+              {showOpacity && ` (${opacity}%)`}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Preset colors */}
+      <div className='mb-4'>
+        <p className='text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
+          Preset Colors
+        </p>
+        <div className='grid grid-cols-6 gap-2'>
+          {presets.map(preset => (
+            <button
+              key={preset}
+              onClick={() => handleColorClick(preset)}
+              className={cn(
+                'w-full aspect-square rounded-md border-2 transition-all hover:scale-110',
+                preset === value
+                  ? 'border-blue-500 dark:border-blue-400 ring-2 ring-blue-200 dark:ring-blue-800'
+                  : 'border-gray-200 dark:border-gray-700'
+              )}
+              style={{ backgroundColor: preset }}
+              aria-label={`Select color ${preset}`}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Custom color input */}
+      {showInput && (
+        <div className='mb-4'>
+          <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
+            Custom Color (Hex)
+          </label>
+          <div className='flex gap-2'>
+            <input
+              type='text'
+              value={inputValue}
+              onChange={handleInputChange}
+              placeholder='#000000'
+              className='flex-1 px-3 py-2 text-sm font-mono bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400'
+            />
+            <input
+              type='color'
+              value={value}
+              onChange={e => handleColorClick(e.target.value)}
+              className='w-12 h-10 rounded-md cursor-pointer'
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Opacity slider */}
+      {showOpacity && (
+        <div>
+          <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
+            Opacity: {opacity}%
+          </label>
+          <input
+            type='range'
+            min='0'
+            max='100'
+            value={opacity}
+            onChange={handleOpacityChange}
+            className='w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer'
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/color-swatch.tsx

@@ -0,0 +1,151 @@
+import React, { useState } from 'react';
+import { cn } from '@sudobility/components';
+
+export interface Color {
+  /** Color hex value */
+  hex: string;
+  /** Color name */
+  name?: string;
+}
+
+export interface ColorSwatchProps {
+  /** Colors to display */
+  colors: Color[] | string[];
+  /** Selected color */
+  selectedColor?: string;
+  /** Color change handler */
+  onColorSelect?: (color: string) => void;
+  /** Swatch size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Show color names */
+  showNames?: boolean;
+  /** Show copy button */
+  showCopy?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * ColorSwatch Component
+ *
+ * Color palette display with selection and copy functionality.
+ * Useful for color pickers and design systems.
+ *
+ * @example
+ * ```tsx
+ * <ColorSwatch
+ *   colors={['#FF0000', '#00FF00', '#0000FF']}
+ *   selectedColor={activeColor}
+ *   onColorSelect={setActiveColor}
+ *   showCopy
+ * />
+ * ```
+ */
+export const ColorSwatch: React.FC<ColorSwatchProps> = ({
+  colors,
+  selectedColor,
+  onColorSelect,
+  size = 'md',
+  showNames = false,
+  showCopy = false,
+  className,
+}) => {
+  const [copiedColor, setCopiedColor] = useState<string | null>(null);
+
+  const sizeClasses = {
+    sm: 'w-8 h-8',
+    md: 'w-12 h-12',
+    lg: 'w-16 h-16',
+  };
+
+  const normalizeColors = (): Color[] => {
+    return colors.map(color =>
+      typeof color === 'string' ? { hex: color } : color
+    );
+  };
+
+  const handleCopy = async (hex: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    await navigator.clipboard.writeText(hex);
+    setCopiedColor(hex);
+    setTimeout(() => setCopiedColor(null), 2000);
+  };
+
+  const normalizedColors = normalizeColors();
+
+  return (
+    <div className={cn('flex flex-wrap gap-3', className)}>
+      {normalizedColors.map((color, index) => {
+        const isSelected = selectedColor === color.hex;
+        const isCopied = copiedColor === color.hex;
+
+        return (
+          <div key={index} className='flex flex-col items-center gap-2'>
+            <button
+              onClick={() => onColorSelect?.(color.hex)}
+              className={cn(
+                'rounded-lg transition-all relative group',
+                sizeClasses[size],
+                isSelected &&
+                  'ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-900',
+                !isSelected && 'hover:scale-110'
+              )}
+              style={{ backgroundColor: color.hex }}
+              aria-label={color.name || color.hex}
+            >
+              {showCopy && (
+                <div
+                  className='absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/50 rounded-lg'
+                  onClick={e => handleCopy(color.hex, e)}
+                >
+                  {isCopied ? (
+                    <svg
+                      className='w-4 h-4 text-white'
+                      fill='none'
+                      stroke='currentColor'
+                      viewBox='0 0 24 24'
+                    >
+                      <path
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth={2}
+                        d='M5 13l4 4L19 7'
+                      />
+                    </svg>
+                  ) : (
+                    <svg
+                      className='w-4 h-4 text-white'
+                      fill='none'
+                      stroke='currentColor'
+                      viewBox='0 0 24 24'
+                    >
+                      <path
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth={2}
+                        d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z'
+                      />
+                    </svg>
+                  )}
+                </div>
+              )}
+            </button>
+
+            {showNames && (
+              <div className='text-center'>
+                {color.name && (
+                  <p className='text-xs font-medium text-gray-900 dark:text-white'>
+                    {color.name}
+                  </p>
+                )}
+                <p className='text-xs text-gray-600 dark:text-gray-400 font-mono'>
+                  {color.hex}
+                </p>
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/gradient-banner.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { cn } from '@sudobility/components';
+
+export interface GradientBannerProps {
+  /** Main content of the banner */
+  children: React.ReactNode;
+  /** Gradient color variant */
+  variant?:
+    | 'blue-purple'
+    | 'green-blue'
+    | 'orange-red'
+    | 'gray'
+    | 'light'
+    | 'custom';
+  /** Custom gradient classes (when variant is 'custom') */
+  gradientClasses?: string;
+  /** Size/padding variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Border radius */
+  rounded?: 'md' | 'lg' | 'xl' | '2xl';
+  /** Show border */
+  bordered?: boolean;
+  /** Border color classes (when bordered is true) */
+  borderClasses?: string;
+  /** Additional className for the container */
+  className?: string;
+}
+
+/**
+ * GradientBanner Component
+ *
+ * A versatile banner component with gradient backgrounds for highlighting
+ * important content, CTAs, or feature sections.
+ *
+ * @example
+ * ```tsx
+ * <GradientBanner variant="blue-purple" size="lg">
+ *   <h3 className={textVariants.heading.h3()}>Special Offer</h3>
+ *   <p>Get started with Web3 Email today!</p>
+ * </GradientBanner>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Light variant with border
+ * <GradientBanner
+ *   variant="light"
+ *   bordered
+ *   borderClasses="border-2 border-blue-200"
+ * >
+ *   <Alert variant="info">Important information</Alert>
+ * </GradientBanner>
+ * ```
+ */
+export const GradientBanner: React.FC<GradientBannerProps> = ({
+  children,
+  variant = 'blue-purple',
+  gradientClasses,
+  size = 'md',
+  rounded = '2xl',
+  bordered = false,
+  borderClasses = 'border border-white/20',
+  className,
+}) => {
+  // Gradient color variants
+  const gradientVariants = {
+    'blue-purple': 'bg-gradient-to-r from-blue-600 to-purple-600 text-white',
+    'green-blue': 'bg-gradient-to-r from-green-600 to-blue-600 text-white',
+    'orange-red': 'bg-gradient-to-r from-orange-600 to-red-600 text-white',
+    gray: 'bg-gradient-to-r from-gray-600 to-gray-800 dark:from-gray-700 dark:to-gray-900 text-white',
+    light:
+      'bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 text-gray-900 dark:text-gray-100',
+    custom:
+      gradientClasses ||
+      'bg-gradient-to-r from-blue-600 to-purple-600 text-white',
+  };
+
+  // Size/padding configurations
+  const sizeClasses = {
+    sm: 'p-4',
+    md: 'p-6',
+    lg: 'p-8',
+  };
+
+  // Border radius configurations
+  const roundedClasses = {
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    '2xl': 'rounded-2xl',
+  };
+
+  return (
+    <div
+      className={cn(
+        gradientVariants[variant],
+        sizeClasses[size],
+        roundedClasses[rounded],
+        bordered && borderClasses,
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/src/index.ts

@@ -0,0 +1,16 @@
+/**
+ * design-components
+ *
+ * Specialized components for the design domain
+ *
+ * @package @sudobility/design-components
+ */
+
+export * from './aurora-background';
+export * from './badge-designer';
+export * from './color-picker-advanced';
+export * from './color-picker';
+export * from './color-swatch';
+export * from './gradient-banner';
+export * from './neumorphic-button';
+export * from './theme-switcher';

package/src/neumorphic-button.tsx

@@ -0,0 +1,60 @@
+import { cn } from '@sudobility/components';
+
+/**
+ * UneumorphicUbutton Component
+ *
+ * A reusable UneumorphicUbutton component with full dark mode support.
+ * Optimized for accessibility and AI-assisted development.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <UneumorphicUbutton className="custom-class" />
+ * ```
+ *
+ * @remarks
+ * This component supports:
+ * - Light and dark themes automatically
+ * - Responsive design
+ * - Accessibility features
+ * - TypeScript type safety
+ *
+ * @see {@link https://docs.example.com/components/neumorphic-button}
+ */
+
+export interface UneumorphicUbuttonProps {
+  /** Additional CSS classes */
+  className?: string;
+  /** Component children */
+  children?: React.ReactNode;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Callback when component is interacted with */
+  onClick?: () => void;
+}
+
+export const UneumorphicUbutton = ({
+  className,
+  children,
+  disabled = false,
+  onClick,
+}: UneumorphicUbuttonProps) => {
+  return (
+    <div
+      className={cn(
+        'p-4 rounded-lg border transition-colors',
+        'bg-white dark:bg-gray-900',
+        'border-gray-200 dark:border-gray-700',
+        'text-gray-900 dark:text-white',
+        disabled && 'opacity-50 cursor-not-allowed',
+        'hover:bg-gray-50 dark:hover:bg-gray-800',
+        className
+      )}
+      onClick={disabled ? undefined : onClick}
+      role='region'
+      aria-label='UneumorphicUbutton'
+    >
+      {children || 'UneumorphicUbutton Component'}
+    </div>
+  );
+};

package/src/theme-switcher.tsx

@@ -0,0 +1,60 @@
+import { cn } from '@sudobility/components';
+
+/**
+ * UthemeUswitcher Component
+ *
+ * A reusable UthemeUswitcher component with full dark mode support.
+ * Optimized for accessibility and AI-assisted development.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <UthemeUswitcher className="custom-class" />
+ * ```
+ *
+ * @remarks
+ * This component supports:
+ * - Light and dark themes automatically
+ * - Responsive design
+ * - Accessibility features
+ * - TypeScript type safety
+ *
+ * @see {@link https://docs.example.com/components/theme-switcher}
+ */
+
+export interface UthemeUswitcherProps {
+  /** Additional CSS classes */
+  className?: string;
+  /** Component children */
+  children?: React.ReactNode;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Callback when component is interacted with */
+  onClick?: () => void;
+}
+
+export const UthemeUswitcher = ({
+  className,
+  children,
+  disabled = false,
+  onClick,
+}: UthemeUswitcherProps) => {
+  return (
+    <div
+      className={cn(
+        'p-4 rounded-lg border transition-colors',
+        'bg-white dark:bg-gray-900',
+        'border-gray-200 dark:border-gray-700',
+        'text-gray-900 dark:text-white',
+        disabled && 'opacity-50 cursor-not-allowed',
+        'hover:bg-gray-50 dark:hover:bg-gray-800',
+        className
+      )}
+      onClick={disabled ? undefined : onClick}
+      role='region'
+      aria-label='UthemeUswitcher'
+    >
+      {children || 'UthemeUswitcher Component'}
+    </div>
+  );
+};