@sudobility/design-components 1.0.11 → 2.0.0

package/dist/color-picker.d.ts

@@ -1,42 +0,0 @@
-import { default as React } from 'react';
-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 declare const ColorPicker: React.FC<ColorPickerProps>;
-//# sourceMappingURL=color-picker.d.ts.map

package/dist/color-picker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../src/color-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgJlD,CAAC"}

package/dist/color-swatch.d.ts

@@ -1,41 +0,0 @@
-import { default as React } from 'react';
-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 declare const ColorSwatch: React.FC<ColorSwatchProps>;
-//# sourceMappingURL=color-swatch.d.ts.map

package/dist/color-swatch.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-swatch.d.ts","sourceRoot":"","sources":["../src/color-swatch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,MAAM,WAAW,KAAK;IACpB,sBAAsB;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,wBAAwB;IACxB,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,EAAE,CAAC;IAC3B,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2BAA2B;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kBAAkB;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,uBAAuB;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2GlD,CAAC"}

package/src/badge-designer.tsx

@@ -1,60 +0,0 @@
-import { cn } from '@sudobility/components';
-
-/**
- * UbadgeUdesigner Component
- *
- * A reusable UbadgeUdesigner component with full dark mode support.
- * Optimized for accessibility and AI-assisted development.
- *
- * @component
- * @example
- * ```tsx
- * <UbadgeUdesigner 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/badge-designer}
- */
-
-export interface UbadgeUdesignerProps {
-  /** Additional CSS classes */
-  className?: string;
-  /** Component children */
-  children?: React.ReactNode;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Callback when component is interacted with */
-  onClick?: () => void;
-}
-
-export const UbadgeUdesigner = ({
-  className,
-  children,
-  disabled = false,
-  onClick,
-}: UbadgeUdesignerProps) => {
-  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='UbadgeUdesigner'
-    >
-      {children || 'UbadgeUdesigner Component'}
-    </div>
-  );
-};

package/src/color-picker-advanced.tsx

@@ -1,51 +0,0 @@
-import { cn } from '@sudobility/components';
-
-export interface ColorPickerAdvancedProps {
-  value: string;
-  onChange: (color: string) => void;
-  presets?: string[];
-  className?: string;
-}
-
-export const ColorPickerAdvanced = ({
-  value,
-  onChange,
-  presets,
-  className,
-}: ColorPickerAdvancedProps) => {
-  const defaultPresets = [
-    '#000000',
-    '#ffffff',
-    '#ff0000',
-    '#00ff00',
-    '#0000ff',
-    '#ffff00',
-    '#ff00ff',
-    '#00ffff',
-  ];
-  const colors = presets || defaultPresets;
-
-  return (
-    <div className={cn('space-y-3', className)}>
-      <input
-        type='color'
-        value={value}
-        onChange={e => onChange(e.target.value)}
-        className='w-full h-12 rounded cursor-pointer'
-      />
-      <div className='grid grid-cols-8 gap-2'>
-        {colors.map(color => (
-          <button
-            key={color}
-            onClick={() => onChange(color)}
-            className={cn(
-              'w-8 h-8 rounded border-2',
-              value === color ? 'border-blue-500' : 'border-transparent'
-            )}
-            style={{ backgroundColor: color }}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};

package/src/color-picker.tsx

@@ -1,188 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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>
-  );
-};