@fragments-sdk/viewer 0.2.1

package/src/components/_future/CreatePage.tsx

@@ -0,0 +1,835 @@
+import { useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useState, useRef, useEffect, useMemo } from 'react';
+import clsx from 'clsx';
+import { HexColorPicker } from 'react-colorful';
+import { generateColorScheme, type ColorSchemeType, getContrastColor } from '../../utils/colorSchemes.js';
+
+const formSchema = z.object({
+  projectName: z.string().min(2, 'Project name must be at least 2 characters'),
+  headlessLibrary: z.enum(['radix', 'base-ui']),
+  colorSchemeType: z.enum(['monochromatic', 'complementary', 'analogous', 'triadic', 'split-complementary', 'tetradic']),
+  primaryColor: z.string().regex(/^#[0-9A-Fa-f]{6}$/, 'Must be a valid hex color'),
+  darkMode: z.boolean(),
+  borderRadius: z.enum(['none', 'sm', 'md', 'lg', 'full']),
+});
+
+export type CreateFormData = z.infer<typeof formSchema>;
+
+// Scheme options with color counts
+const SCHEME_OPTIONS: Array<{
+  value: ColorSchemeType;
+  label: string;
+  description: string;
+  colorCount: number;
+}> = [
+  { value: 'monochromatic', label: 'Monochromatic', description: 'Variations of a single hue', colorCount: 5 },
+  { value: 'complementary', label: 'Complementary', description: 'Two opposite colors', colorCount: 2 },
+  { value: 'analogous', label: 'Analogous', description: 'Three adjacent colors', colorCount: 3 },
+  { value: 'triadic', label: 'Triadic', description: 'Three evenly spaced colors', colorCount: 3 },
+  { value: 'split-complementary', label: 'Split Complementary', description: 'Base + two adjacent to complement', colorCount: 3 },
+  { value: 'tetradic', label: 'Tetradic (Square)', description: 'Four evenly spaced colors', colorCount: 4 },
+];
+
+// Border radius values
+const RADIUS_VALUES: Record<string, string> = {
+  none: '0px',
+  sm: '4px',
+  md: '8px',
+  lg: '12px',
+  full: '9999px',
+};
+
+// Get the key colors for a scheme
+function getSchemeKeyColors(baseColor: string, type: ColorSchemeType): string[] {
+  const fullPalette = generateColorScheme(baseColor, type);
+
+  switch (type) {
+    case 'monochromatic':
+      return fullPalette;
+    case 'complementary':
+      return [fullPalette[1], fullPalette[3]];
+    case 'analogous':
+      return [fullPalette[0], fullPalette[2], fullPalette[4]];
+    case 'triadic':
+      return [fullPalette[0], fullPalette[2], fullPalette[4]];
+    case 'split-complementary':
+      return [fullPalette[0], fullPalette[2], fullPalette[4]];
+    case 'tetradic':
+      return [fullPalette[0], fullPalette[1], fullPalette[2], fullPalette[3]];
+    default:
+      return fullPalette;
+  }
+}
+
+export function CreatePage() {
+  const [showColorPicker, setShowColorPicker] = useState(false);
+  const [showSchemeDropdown, setShowSchemeDropdown] = useState(false);
+  const [showExportModal, setShowExportModal] = useState(false);
+  const [previewDarkMode, setPreviewDarkMode] = useState(false);
+  const colorPickerRef = useRef<HTMLDivElement>(null);
+  const schemeDropdownRef = useRef<HTMLDivElement>(null);
+
+  const navigateBack = () => {
+    window.location.hash = '/';
+  };
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    control,
+    setValue,
+    formState: { errors },
+  } = useForm<CreateFormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      projectName: 'my-design-system',
+      headlessLibrary: 'radix',
+      colorSchemeType: 'monochromatic',
+      primaryColor: '#10a37f',
+      darkMode: true,
+      borderRadius: 'md',
+    },
+  });
+
+  const formValues = watch();
+  const { primaryColor, colorSchemeType, borderRadius, darkMode } = formValues;
+
+  // Generate current palette
+  const currentPalette = useMemo(
+    () => getSchemeKeyColors(primaryColor, colorSchemeType),
+    [primaryColor, colorSchemeType]
+  );
+  const currentScheme = SCHEME_OPTIONS.find(s => s.value === colorSchemeType);
+
+  // Generate CSS variables based on form values
+  const cssVariables = useMemo(() => {
+    const palette = generateColorScheme(primaryColor, colorSchemeType);
+    return {
+      '--color-primary': palette[0] || primaryColor,
+      '--color-primary-hover': palette[1] || primaryColor,
+      '--color-secondary': palette[2] || '#6b7280',
+      '--color-accent': primaryColor,
+      '--color-accent-hover': palette[1] || primaryColor,
+      '--radius': RADIUS_VALUES[borderRadius],
+      '--radius-sm': borderRadius === 'none' ? '0px' : '4px',
+      '--radius-md': borderRadius === 'none' ? '0px' : '8px',
+      '--radius-lg': borderRadius === 'none' ? '0px' : '12px',
+    };
+  }, [primaryColor, colorSchemeType, borderRadius]);
+
+  // Close dropdowns when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (colorPickerRef.current && !colorPickerRef.current.contains(event.target as Node)) {
+        setShowColorPicker(false);
+      }
+      if (schemeDropdownRef.current && !schemeDropdownRef.current.contains(event.target as Node)) {
+        setShowSchemeDropdown(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleFormSubmit = (_data: CreateFormData) => {
+    setShowExportModal(true);
+  };
+
+  const generateExportConfig = () => {
+    const config = {
+      name: formValues.projectName,
+      headlessLibrary: formValues.headlessLibrary,
+      theme: {
+        colors: {
+          primary: primaryColor,
+          scheme: colorSchemeType,
+          palette: currentPalette,
+        },
+        borderRadius: borderRadius,
+        darkMode: darkMode,
+      },
+    };
+    return JSON.stringify(config, null, 2);
+  };
+
+  const generateCssVariables = () => {
+    const palette = generateColorScheme(primaryColor, colorSchemeType);
+    let css = `/* ${formValues.projectName} - Generated by Fragments */
+:root {
+  /* Primary Colors */
+  --color-primary: ${palette[0]};
+  --color-primary-foreground: ${getContrastColor(palette[0])};
+  --color-secondary: ${palette[2] || palette[1]};
+  --color-secondary-foreground: ${getContrastColor(palette[2] || palette[1])};
+  --color-accent: ${primaryColor};
+  --color-accent-foreground: ${getContrastColor(primaryColor)};
+
+  /* Palette */
+${currentPalette.map((c, i) => `  --palette-${i + 1}: ${c};`).join('\n')}
+
+  /* Border Radius */
+  --radius: ${RADIUS_VALUES[borderRadius]};
+  --radius-sm: ${borderRadius === 'none' ? '0' : '0.25rem'};
+  --radius-md: ${borderRadius === 'none' ? '0' : '0.5rem'};
+  --radius-lg: ${borderRadius === 'none' ? '0' : '0.75rem'};
+  --radius-full: 9999px;
+
+  /* Light Mode Surfaces */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f9fafb;
+  --bg-tertiary: #f3f4f6;
+  --text-primary: #111827;
+  --text-secondary: #4b5563;
+  --text-tertiary: #9ca3af;
+  --border: #e5e7eb;
+  --border-strong: #d1d5db;
+}`;
+
+    if (darkMode) {
+      css += `
+
+.dark {
+  /* Dark Mode Surfaces */
+  --bg-primary: #111827;
+  --bg-secondary: #1f2937;
+  --bg-tertiary: #374151;
+  --text-primary: #f9fafb;
+  --text-secondary: #d1d5db;
+  --text-tertiary: #9ca3af;
+  --border: #374151;
+  --border-strong: #4b5563;
+}`;
+    }
+
+    return css;
+  };
+
+  const generateTailwindConfig = () => {
+    return `// tailwind.config.js - Generated by Fragments
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: '${primaryColor}',
+          foreground: '${getContrastColor(primaryColor)}',
+        },
+        secondary: {
+          DEFAULT: '${currentPalette[1] || primaryColor}',
+          foreground: '${getContrastColor(currentPalette[1] || primaryColor)}',
+        },
+        accent: {
+          DEFAULT: '${currentPalette[2] || primaryColor}',
+          foreground: '${getContrastColor(currentPalette[2] || primaryColor)}',
+        },
+        // Full palette
+${currentPalette.map((c, i) => `        palette${i + 1}: '${c}',`).join('\n')}
+      },
+      borderRadius: {
+        DEFAULT: '${RADIUS_VALUES[borderRadius]}',
+      },
+    },
+  },
+  plugins: [],
+};`;
+  };
+
+  return (
+    <div className="min-h-screen bg-[--bg-primary] flex">
+      {/* Main Form Section */}
+      <div className="flex-1 overflow-y-auto">
+        <div className="max-w-2xl mx-auto px-6 py-16">
+          {/* Header */}
+          <div className="mb-12">
+            <button
+              onClick={navigateBack}
+              className="flex items-center gap-1.5 text-sm text-tertiary hover:text-primary mb-4 -ml-1 transition-colors"
+            >
+              <BackIcon className="w-4 h-4" />
+              Back to viewer
+            </button>
+            <h1 className="text-2xl font-semibold text-primary mb-2">
+              Create Your Design System
+            </h1>
+            <p className="text-secondary">
+              Configure your components and export to use in your project.
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-8">
+            {/* Project Name */}
+            <div>
+              <label className="block text-sm text-primary mb-2">
+                Project Name
+              </label>
+              <input
+                {...register('projectName')}
+                placeholder="my-design-system"
+                className={clsx(
+                  'w-full px-4 py-3 rounded-xl text-sm',
+                  'bg-[--bg-tertiary] text-primary placeholder:text-tertiary',
+                  'border border-transparent',
+                  'focus:outline-none focus:ring-1 focus:ring-[--border-strong]',
+                  'transition-all',
+                  errors.projectName && 'ring-1 ring-red-500'
+                )}
+              />
+            </div>
+
+            <div className="h-px bg-[--border]" />
+
+            {/* Headless Library */}
+            <div>
+              <label className="block text-sm text-primary mb-4">
+                Headless Library
+              </label>
+              <div className="grid grid-cols-2 gap-3">
+                {[
+                  { value: 'radix', label: 'Radix UI', desc: 'Accessible primitives' },
+                  { value: 'base-ui', label: 'Base UI', desc: 'Hooks-first approach' },
+                ].map((lib) => (
+                  <label
+                    key={lib.value}
+                    className={clsx(
+                      'flex flex-col p-4 rounded-xl cursor-pointer transition-all',
+                      'border',
+                      watch('headlessLibrary') === lib.value
+                        ? 'border-[--color-accent] bg-[--color-accent]/5'
+                        : 'border-[--border] hover:border-[--border-strong]'
+                    )}
+                  >
+                    <input
+                      type="radio"
+                      {...register('headlessLibrary')}
+                      value={lib.value}
+                      className="sr-only"
+                    />
+                    <span className="text-sm font-medium text-primary">{lib.label}</span>
+                    <span className="text-xs text-tertiary mt-0.5">{lib.desc}</span>
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            <div className="h-px bg-[--border]" />
+
+            {/* Color Scheme */}
+            <div>
+              <label className="block text-sm text-primary mb-4">
+                Color Scheme
+              </label>
+
+              <div className="space-y-4">
+                {/* Primary Color */}
+                <div className="flex items-center gap-4">
+                  <div className="relative" ref={colorPickerRef}>
+                    <button
+                      type="button"
+                      onClick={() => setShowColorPicker(!showColorPicker)}
+                      className="w-12 h-12 rounded-lg border border-[--border] hover:border-[--border-strong] transition-colors"
+                      style={{ backgroundColor: primaryColor }}
+                    />
+                    {showColorPicker && (
+                      <div className="absolute top-14 left-0 z-50 p-3 rounded-xl bg-[--bg-elevated] border border-[--border] shadow-xl">
+                        <Controller
+                          name="primaryColor"
+                          control={control}
+                          render={({ field }) => (
+                            <HexColorPicker color={field.value} onChange={field.onChange} />
+                          )}
+                        />
+                        <input
+                          type="text"
+                          value={primaryColor}
+                          onChange={(e) => setValue('primaryColor', e.target.value)}
+                          className="w-full mt-3 px-3 py-2 rounded-lg text-xs font-mono bg-[--bg-tertiary] text-primary border border-transparent focus:outline-none focus:ring-1 focus:ring-[--border-strong]"
+                        />
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex-1">
+                    <input
+                      type="text"
+                      value={primaryColor}
+                      onChange={(e) => setValue('primaryColor', e.target.value)}
+                      className="w-full px-4 py-3 rounded-xl text-sm font-mono bg-[--bg-tertiary] text-primary border border-transparent focus:outline-none focus:ring-1 focus:ring-[--border-strong]"
+                    />
+                  </div>
+                </div>
+
+                {/* Custom Scheme Type Dropdown */}
+                <div className="relative" ref={schemeDropdownRef}>
+                  <button
+                    type="button"
+                    onClick={() => setShowSchemeDropdown(!showSchemeDropdown)}
+                    className={clsx(
+                      'w-full px-4 py-3 rounded-xl text-sm text-left',
+                      'bg-[--bg-tertiary] text-primary',
+                      'border border-transparent',
+                      'focus:outline-none focus:ring-1 focus:ring-[--border-strong]',
+                      'flex items-center justify-between',
+                      showSchemeDropdown && 'ring-1 ring-[--border-strong]'
+                    )}
+                  >
+                    <div className="flex items-center gap-3">
+                      <div className="flex gap-0.5">
+                        {getSchemeKeyColors(primaryColor, colorSchemeType).map((color, i) => (
+                          <div
+                            key={i}
+                            className="w-4 h-4 rounded-sm first:rounded-l last:rounded-r"
+                            style={{ backgroundColor: color }}
+                          />
+                        ))}
+                      </div>
+                      <span>{currentScheme?.label}</span>
+                      <span className="text-tertiary">— {currentScheme?.description}</span>
+                    </div>
+                    <ChevronIcon className={clsx('w-4 h-4 text-tertiary transition-transform', showSchemeDropdown && 'rotate-180')} />
+                  </button>
+
+                  {showSchemeDropdown && (
+                    <div className="absolute top-full left-0 right-0 mt-2 z-40 py-2 rounded-xl bg-[--bg-elevated] border border-[--border] shadow-xl max-h-80 overflow-y-auto">
+                      {SCHEME_OPTIONS.map((scheme) => {
+                        const schemeColors = getSchemeKeyColors(primaryColor, scheme.value);
+                        const isSelected = colorSchemeType === scheme.value;
+
+                        return (
+                          <button
+                            key={scheme.value}
+                            type="button"
+                            onClick={() => {
+                              setValue('colorSchemeType', scheme.value);
+                              setShowSchemeDropdown(false);
+                            }}
+                            className={clsx(
+                              'w-full px-4 py-3 text-left flex items-center gap-3',
+                              'hover:bg-[--bg-hover] transition-colors',
+                              isSelected && 'bg-[--bg-tertiary]'
+                            )}
+                          >
+                            <div className="flex gap-0.5 shrink-0">
+                              {schemeColors.map((color, i) => (
+                                <div
+                                  key={i}
+                                  className="w-5 h-5 rounded-sm first:rounded-l last:rounded-r"
+                                  style={{ backgroundColor: color }}
+                                />
+                              ))}
+                            </div>
+                            <div className="flex-1 min-w-0">
+                              <div className="flex items-center gap-2">
+                                {isSelected && <span className="text-[--color-accent]">✓</span>}
+                                <span className={clsx('text-sm', isSelected ? 'text-primary font-medium' : 'text-primary')}>
+                                  {scheme.label}
+                                </span>
+                              </div>
+                              <span className="text-xs text-tertiary">{scheme.description}</span>
+                            </div>
+                          </button>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+
+                {/* Current Palette Preview */}
+                <div>
+                  <div className="flex gap-1.5">
+                    {currentPalette.map((color, i) => (
+                      <div
+                        key={i}
+                        className="flex-1 h-12 rounded-lg first:rounded-l-xl last:rounded-r-xl transition-colors"
+                        style={{ backgroundColor: color }}
+                      />
+                    ))}
+                  </div>
+                  <p className="text-xs text-tertiary mt-2">
+                    {currentScheme?.colorCount} color {currentScheme?.label.toLowerCase()} palette
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="h-px bg-[--border]" />
+
+            {/* Style Options */}
+            <div className="space-y-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <span className="text-sm text-primary">Border Radius</span>
+                  <p className="text-xs text-tertiary mt-0.5">Component corner style</p>
+                </div>
+                <div className="flex gap-1 bg-[--bg-tertiary] p-1 rounded-lg">
+                  {(['none', 'sm', 'md', 'lg', 'full'] as const).map((radius) => (
+                    <label
+                      key={radius}
+                      className={clsx(
+                        'px-3 py-1.5 text-xs font-medium rounded-md cursor-pointer transition-all',
+                        watch('borderRadius') === radius
+                          ? 'bg-[--bg-primary] text-primary shadow-sm'
+                          : 'text-tertiary hover:text-secondary'
+                      )}
+                    >
+                      <input
+                        type="radio"
+                        {...register('borderRadius')}
+                        value={radius}
+                        className="sr-only"
+                      />
+                      {radius}
+                    </label>
+                  ))}
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div>
+                  <span className="text-sm text-primary">Dark Mode</span>
+                  <p className="text-xs text-tertiary mt-0.5">Include dark theme styles</p>
+                </div>
+                <label className="relative cursor-pointer">
+                  <input
+                    type="checkbox"
+                    {...register('darkMode')}
+                    className="sr-only peer"
+                  />
+                  <div className="w-11 h-6 bg-[--bg-tertiary] rounded-full peer-checked:bg-[--color-accent] transition-colors" />
+                  <div className="absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform peer-checked:translate-x-5" />
+                </label>
+              </div>
+            </div>
+
+            <div className="h-px bg-[--border]" />
+
+            {/* Submit */}
+            <button
+              type="submit"
+              className={clsx(
+                'w-full py-3 px-6 rounded-xl text-sm font-medium transition-all',
+                'bg-[--color-accent] text-white',
+                'hover:brightness-110',
+                'focus:outline-none focus:ring-2 focus:ring-[--color-accent] focus:ring-offset-2 focus:ring-offset-[--bg-primary]'
+              )}
+            >
+              Export Design System
+            </button>
+          </form>
+        </div>
+      </div>
+
+      {/* Preview Sidebar */}
+      <div className="hidden lg:block w-96 border-l border-[--border] bg-[--bg-secondary] overflow-y-auto">
+        <div className="sticky top-0 p-6">
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-sm font-medium text-primary">Live Preview</h2>
+            <button
+              onClick={() => setPreviewDarkMode(!previewDarkMode)}
+              className={clsx(
+                'flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-lg transition-all',
+                previewDarkMode
+                  ? 'bg-gray-800 text-white'
+                  : 'bg-white text-gray-800 border border-gray-200'
+              )}
+            >
+              {previewDarkMode ? <MoonIcon className="w-3.5 h-3.5" /> : <SunIcon className="w-3.5 h-3.5" />}
+              {previewDarkMode ? 'Dark' : 'Light'}
+            </button>
+          </div>
+
+          {/* Preview Container with custom CSS vars */}
+          <div
+            className={clsx(
+              'space-y-8 p-4 rounded-xl transition-colors',
+              previewDarkMode ? 'bg-gray-900' : 'bg-white border border-gray-200'
+            )}
+            style={cssVariables as React.CSSProperties}
+          >
+            {/* Button Variants */}
+            <div>
+              <h3 className={clsx('text-xs font-medium uppercase tracking-wider mb-3', previewDarkMode ? 'text-gray-400' : 'text-gray-500')}>Buttons</h3>
+              <div className="space-y-3">
+                <button
+                  className="w-full px-4 py-2.5 text-sm font-medium transition-all"
+                  style={{
+                    backgroundColor: primaryColor,
+                    color: getContrastColor(primaryColor),
+                    borderRadius: RADIUS_VALUES[borderRadius],
+                  }}
+                >
+                  Primary Button
+                </button>
+                <button
+                  className="w-full px-4 py-2.5 text-sm font-medium border transition-all"
+                  style={{
+                    backgroundColor: 'transparent',
+                    borderColor: primaryColor,
+                    color: primaryColor,
+                    borderRadius: RADIUS_VALUES[borderRadius],
+                  }}
+                >
+                  Secondary Button
+                </button>
+                <button
+                  className="w-full px-4 py-2.5 text-sm font-medium transition-all"
+                  style={{
+                    backgroundColor: 'transparent',
+                    color: primaryColor,
+                    borderRadius: RADIUS_VALUES[borderRadius],
+                  }}
+                >
+                  Ghost Button
+                </button>
+                <button
+                  className="w-full px-4 py-2.5 text-sm font-medium transition-all"
+                  style={{
+                    backgroundColor: '#ef4444',
+                    color: '#ffffff',
+                    borderRadius: RADIUS_VALUES[borderRadius],
+                  }}
+                >
+                  Danger Button
+                </button>
+              </div>
+            </div>
+
+            {/* Input */}
+            <div>
+              <h3 className={clsx('text-xs font-medium uppercase tracking-wider mb-3', previewDarkMode ? 'text-gray-400' : 'text-gray-500')}>Input</h3>
+              <input
+                type="text"
+                placeholder="Enter your email"
+                className={clsx(
+                  'w-full px-4 py-2.5 text-sm border focus:outline-none transition-all',
+                  previewDarkMode
+                    ? 'bg-gray-800 text-white placeholder:text-gray-500 border-gray-700'
+                    : 'bg-gray-50 text-gray-900 placeholder:text-gray-400 border-gray-200'
+                )}
+                style={{
+                  borderRadius: RADIUS_VALUES[borderRadius],
+                }}
+                onFocus={(e) => {
+                  e.target.style.borderColor = primaryColor;
+                }}
+                onBlur={(e) => {
+                  e.target.style.borderColor = previewDarkMode ? '#374151' : '#e5e7eb';
+                }}
+              />
+            </div>
+
+            {/* Card */}
+            <div>
+              <h3 className={clsx('text-xs font-medium uppercase tracking-wider mb-3', previewDarkMode ? 'text-gray-400' : 'text-gray-500')}>Card</h3>
+              <div
+                className={clsx(
+                  'p-4 border',
+                  previewDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-gray-50 border-gray-200'
+                )}
+                style={{ borderRadius: RADIUS_VALUES[borderRadius] }}
+              >
+                <h4 className={clsx('text-sm font-medium mb-1', previewDarkMode ? 'text-white' : 'text-gray-900')}>Card Title</h4>
+                <p className={clsx('text-xs mb-3', previewDarkMode ? 'text-gray-400' : 'text-gray-500')}>This is a sample card component with your selected styles.</p>
+                <button
+                  className="px-3 py-1.5 text-xs font-medium transition-all"
+                  style={{
+                    backgroundColor: primaryColor,
+                    color: getContrastColor(primaryColor),
+                    borderRadius: RADIUS_VALUES[borderRadius],
+                  }}
+                >
+                  Action
+                </button>
+              </div>
+            </div>
+
+            {/* Badge */}
+            <div>
+              <h3 className={clsx('text-xs font-medium uppercase tracking-wider mb-3', previewDarkMode ? 'text-gray-400' : 'text-gray-500')}>Badges</h3>
+              <div className="flex flex-wrap gap-2">
+                {currentPalette.slice(0, 4).map((color, i) => (
+                  <span
+                    key={i}
+                    className="px-2.5 py-1 text-xs font-medium"
+                    style={{
+                      backgroundColor: color + '20',
+                      color: color,
+                      borderRadius: borderRadius === 'full' ? '9999px' : RADIUS_VALUES['sm'],
+                    }}
+                  >
+                    Badge {i + 1}
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            {/* Color Palette */}
+            <div>
+              <h3 className={clsx('text-xs font-medium uppercase tracking-wider mb-3', previewDarkMode ? 'text-gray-400' : 'text-gray-500')}>Your Palette</h3>
+              <div className="flex gap-2">
+                {currentPalette.map((color, i) => (
+                  <div key={i} className="flex-1 text-center">
+                    <div
+                      className="aspect-square rounded-lg mb-1"
+                      style={{ backgroundColor: color }}
+                    />
+                    <span className={clsx('text-[10px] font-mono', previewDarkMode ? 'text-gray-500' : 'text-gray-400')}>{color.slice(1, 7)}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Export Modal */}
+      {showExportModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+          <div className="w-full max-w-2xl max-h-[80vh] overflow-hidden rounded-2xl bg-[--bg-elevated] border border-[--border] shadow-2xl">
+            <div className="flex items-center justify-between p-4 border-b border-[--border]">
+              <h2 className="text-lg font-semibold text-primary">Export Design System</h2>
+              <button
+                onClick={() => setShowExportModal(false)}
+                className="p-2 rounded-lg hover:bg-[--bg-hover] text-tertiary hover:text-primary transition-colors"
+              >
+                <CloseIcon className="w-5 h-5" />
+              </button>
+            </div>
+
+            <div className="p-4 overflow-y-auto max-h-[60vh] space-y-6">
+              {/* CLI Command */}
+              <div>
+                <h3 className="text-sm font-medium text-primary mb-2">Quick Start</h3>
+                <div className="flex items-center gap-2 p-3 rounded-lg bg-[--bg-tertiary] font-mono text-sm">
+                  <span className="text-tertiary">$</span>
+                  <code className="text-primary flex-1">npx fragment-ui init {formValues.projectName}</code>
+                  <button
+                    onClick={() => navigator.clipboard.writeText(`npx fragment-ui init ${formValues.projectName}`)}
+                    className="px-2 py-1 text-xs rounded bg-[--bg-hover] text-secondary hover:text-primary transition-colors"
+                  >
+                    Copy
+                  </button>
+                </div>
+              </div>
+
+              {/* CSS Variables */}
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="text-sm font-medium text-primary">CSS Variables</h3>
+                  <button
+                    onClick={() => navigator.clipboard.writeText(generateCssVariables())}
+                    className="px-2 py-1 text-xs rounded bg-[--bg-hover] text-secondary hover:text-primary transition-colors"
+                  >
+                    Copy
+                  </button>
+                </div>
+                <pre className="p-4 rounded-lg bg-[--bg-tertiary] text-xs font-mono text-secondary overflow-x-auto whitespace-pre">
+                  {generateCssVariables()}
+                </pre>
+              </div>
+
+              {/* Tailwind Config */}
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="text-sm font-medium text-primary">tailwind.config.js</h3>
+                  <button
+                    onClick={() => navigator.clipboard.writeText(generateTailwindConfig())}
+                    className="px-2 py-1 text-xs rounded bg-[--bg-hover] text-secondary hover:text-primary transition-colors"
+                  >
+                    Copy
+                  </button>
+                </div>
+                <pre className="p-4 rounded-lg bg-[--bg-tertiary] text-xs font-mono text-secondary overflow-x-auto whitespace-pre">
+                  {generateTailwindConfig()}
+                </pre>
+              </div>
+
+              {/* Config JSON */}
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="text-sm font-medium text-primary">fragment.config.json</h3>
+                  <button
+                    onClick={() => navigator.clipboard.writeText(generateExportConfig())}
+                    className="px-2 py-1 text-xs rounded bg-[--bg-hover] text-secondary hover:text-primary transition-colors"
+                  >
+                    Copy
+                  </button>
+                </div>
+                <pre className="p-4 rounded-lg bg-[--bg-tertiary] text-xs font-mono text-secondary overflow-x-auto whitespace-pre">
+                  {generateExportConfig()}
+                </pre>
+              </div>
+            </div>
+
+            <div className="p-4 border-t border-[--border] flex justify-end gap-3">
+              <button
+                onClick={() => setShowExportModal(false)}
+                className="px-4 py-2 text-sm font-medium rounded-lg border border-[--border] text-secondary hover:text-primary transition-colors"
+              >
+                Close
+              </button>
+              <button
+                onClick={() => {
+                  const blob = new Blob([generateExportConfig()], { type: 'application/json' });
+                  const url = URL.createObjectURL(blob);
+                  const a = document.createElement('a');
+                  a.href = url;
+                  a.download = 'fragment.config.json';
+                  a.click();
+                }}
+                className="px-4 py-2 text-sm font-medium rounded-lg text-white transition-colors"
+                style={{ backgroundColor: primaryColor }}
+              >
+                Download Config
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ChevronIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+    </svg>
+  );
+}
+
+function CloseIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+    </svg>
+  );
+}
+
+function BackIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+    </svg>
+  );
+}
+
+function SunIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+    </svg>
+  );
+}
+
+function MoonIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+    </svg>
+  );
+}