@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/LandingPage.tsx

@@ -2,8 +2,8 @@ import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { useState, useRef, useEffect } from 'react';
-import clsx from 'clsx';
 import { HexColorPicker } from 'react-colorful';
+import { Button, Input, Toggle, Stack, Text, Card, Field, Separator, Select } from '@fragments/ui';
 import { generateColorScheme, type ColorSchemeType } from '../utils/colorSchemes.js';
 import { ChevronDownIcon } from './Icons.js';
 
@@ -24,7 +24,6 @@ interface LandingPageProps {
   onSubmit?: (data: LandingFormData) => void;
 }
 
-// Scheme options with color counts
 const SCHEME_OPTIONS: Array<{
   value: ColorSchemeType;
   label: string;
@@ -39,23 +38,22 @@ const SCHEME_OPTIONS: Array<{
   { value: 'tetradic', label: 'Tetradic (Square)', description: 'Four evenly spaced colors', colorCount: 4 },
 ];
 
-// Get the key colors for a scheme (not all variations, just the distinct hues)
 function getSchemeKeyColors(baseColor: string, type: ColorSchemeType): string[] {
   const fullPalette = generateColorScheme(baseColor, type);
 
   switch (type) {
     case 'monochromatic':
-      return fullPalette; // All 5 variations
+      return fullPalette;
     case 'complementary':
-      return [fullPalette[1], fullPalette[3]]; // Base and complement
+      return [fullPalette[1], fullPalette[3]];
     case 'analogous':
-      return [fullPalette[0], fullPalette[2], fullPalette[4]]; // -30°, base, +30°
+      return [fullPalette[0], fullPalette[2], fullPalette[4]];
     case 'triadic':
-      return [fullPalette[0], fullPalette[2], fullPalette[4]]; // 0°, 120°, 240°
+      return [fullPalette[0], fullPalette[2], fullPalette[4]];
     case 'split-complementary':
-      return [fullPalette[0], fullPalette[2], fullPalette[4]]; // Base, +150°, +210°
+      return [fullPalette[0], fullPalette[2], fullPalette[4]];
     case 'tetradic':
-      return [fullPalette[0], fullPalette[1], fullPalette[2], fullPalette[3]]; // 0°, 90°, 180°, 270°
+      return [fullPalette[0], fullPalette[1], fullPalette[2], fullPalette[3]];
     default:
       return fullPalette;
   }
@@ -63,9 +61,7 @@ function getSchemeKeyColors(baseColor: string, type: ColorSchemeType): string[]
 
 export function LandingPage({ onSubmit }: LandingPageProps) {
   const [showColorPicker, setShowColorPicker] = useState(false);
-  const [showSchemeDropdown, setShowSchemeDropdown] = useState(false);
   const colorPickerRef = useRef<HTMLDivElement>(null);
-  const schemeDropdownRef = useRef<HTMLDivElement>(null);
 
   const {
     register,
@@ -91,19 +87,14 @@ export function LandingPage({ onSubmit }: LandingPageProps) {
   const primaryColor = watch('primaryColor');
   const colorSchemeType = watch('colorSchemeType');
 
-  // Generate current palette based on selected color and scheme
   const currentPalette = getSchemeKeyColors(primaryColor, colorSchemeType);
   const currentScheme = SCHEME_OPTIONS.find(s => s.value === colorSchemeType);
 
-  // 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);
@@ -115,325 +106,314 @@ export function LandingPage({ onSubmit }: LandingPageProps) {
   };
 
   return (
-    <div className="min-h-screen bg-[--bg-primary]">
-      <div className="max-w-2xl mx-auto px-6 py-16">
+    <div style={{ minHeight: '100vh', backgroundColor: 'var(--bg-primary)' }}>
+      <div style={{ maxWidth: '672px', margin: '0 auto', padding: '64px 24px' }}>
         {/* Header */}
-        <div className="mb-12">
-          <h1 className="text-2xl font-semibold text-primary mb-2">
-            Create Component
-          </h1>
-          <p className="text-secondary">
-            Configure your component settings below.
-          </p>
-        </div>
+        <Stack direction="column" gap="sm" style={{ marginBottom: '48px' }}>
+          <Text as="h1" size="xl" weight="semibold">Create Component</Text>
+          <Text color="secondary">Configure your component settings below.</Text>
+        </Stack>
 
-        <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'
-              )}
-            />
-            {errors.projectName && (
-              <p className="mt-2 text-xs text-red-400">{errors.projectName.message}</p>
-            )}
-          </div>
-
-          {/* Component Name */}
-          <div>
-            <label className="block text-sm text-primary mb-2">
-              Component Name
-            </label>
-            <input
-              {...register('componentName')}
-              placeholder="Button"
-              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.componentName && 'ring-1 ring-red-500'
+        <form onSubmit={handleSubmit(handleFormSubmit)}>
+          <Stack direction="column" gap="lg">
+            {/* Project Name */}
+            <Field>
+              <Field.Label>Project Name</Field.Label>
+              <Field.Control>
+                <Input
+                  {...register('projectName')}
+                  placeholder="my-design-system"
+                  style={errors.projectName ? { boxShadow: '0 0 0 1px #ef4444' } : {}}
+                />
+              </Field.Control>
+              {errors.projectName && (
+                <Field.Error>{errors.projectName.message}</Field.Error>
               )}
-            />
-            {errors.componentName && (
-              <p className="mt-2 text-xs text-red-400">{errors.componentName.message}</p>
-            )}
-          </div>
+            </Field>
 
-          {/* Description */}
-          <div>
-            <label className="block text-sm text-primary mb-2">
-              Description
-            </label>
-            <textarea
-              {...register('description')}
-              rows={2}
-              placeholder="A brief description of the component"
-              className={clsx(
-                'w-full px-4 py-3 rounded-xl text-sm resize-none',
-                'bg-[--bg-tertiary] text-primary placeholder:text-tertiary',
-                'border border-transparent',
-                'focus:outline-none focus:ring-1 focus:ring-[--border-strong]',
-                'transition-all'
+            {/* Component Name */}
+            <Field>
+              <Field.Label>Component Name</Field.Label>
+              <Field.Control>
+                <Input
+                  {...register('componentName')}
+                  placeholder="Button"
+                  style={errors.componentName ? { boxShadow: '0 0 0 1px #ef4444' } : {}}
+                />
+              </Field.Control>
+              {errors.componentName && (
+                <Field.Error>{errors.componentName.message}</Field.Error>
               )}
-            />
-          </div>
+            </Field>
 
-          <div className="h-px bg-[--border]" />
+            {/* Description */}
+            <Field>
+              <Field.Label>Description</Field.Label>
+              <Field.Control>
+                <textarea
+                  {...register('description')}
+                  rows={2}
+                  placeholder="A brief description of the component"
+                  style={{
+                    width: '100%',
+                    padding: '12px 16px',
+                    borderRadius: '12px',
+                    fontSize: '14px',
+                    backgroundColor: 'var(--bg-tertiary)',
+                    color: 'var(--text-primary)',
+                    border: '1px solid transparent',
+                    outline: 'none',
+                    transition: 'all 150ms',
+                    resize: 'none',
+                  }}
+                  onFocus={(e) => { e.currentTarget.style.boxShadow = '0 0 0 1px var(--border-strong)'; }}
+                  onBlur={(e) => { e.currentTarget.style.boxShadow = 'none'; }}
+                />
+              </Field.Control>
+            </Field>
 
-          {/* 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>
+            <Separator />
 
-          <div className="h-px bg-[--border]" />
+            {/* Headless Library */}
+            <Field>
+              <Field.Label>Headless Library</Field.Label>
+              <Field.Control>
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
+                  {[
+                    { value: 'radix', label: 'Radix UI', desc: 'Accessible primitives' },
+                    { value: 'base-ui', label: 'Base UI', desc: 'Hooks-first approach' },
+                  ].map((lib) => (
+                    <label
+                      key={lib.value}
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        padding: '16px',
+                        borderRadius: '12px',
+                        cursor: 'pointer',
+                        transition: 'all 150ms',
+                        border: watch('headlessLibrary') === lib.value
+                          ? '1px solid var(--color-accent)'
+                          : '1px solid var(--border)',
+                        backgroundColor: watch('headlessLibrary') === lib.value
+                          ? 'rgba(16, 163, 127, 0.05)'
+                          : 'transparent',
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        {...register('headlessLibrary')}
+                        value={lib.value}
+                        style={{ position: 'absolute', width: '1px', height: '1px', overflow: 'hidden', clip: 'rect(0,0,0,0)' }}
+                      />
+                      <Text size="sm" weight="medium">{lib.label}</Text>
+                      <Text size="xs" color="tertiary" style={{ marginTop: '2px' }}>{lib.desc}</Text>
+                    </label>
+                  ))}
+                </div>
+              </Field.Control>
+            </Field>
 
-          {/* Color Scheme */}
-          <div>
-            <label className="block text-sm text-primary mb-4">
-              Color Scheme
-            </label>
+            <Separator />
 
-            <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} />
-                        )}
+            {/* Color Scheme */}
+            <Field>
+              <Field.Label>Color Scheme</Field.Label>
+              <Field.Control>
+                <Stack direction="column" gap="md">
+                  {/* Primary Color */}
+                  <Stack direction="row" align="center" gap="md">
+                    <div style={{ position: 'relative' }} ref={colorPickerRef}>
+                      <button
+                        type="button"
+                        onClick={() => setShowColorPicker(!showColorPicker)}
+                        style={{
+                          width: '48px',
+                          height: '48px',
+                          borderRadius: '8px',
+                          border: '1px solid var(--border)',
+                          cursor: 'pointer',
+                          backgroundColor: primaryColor,
+                        }}
                       />
-                      <input
-                        type="text"
+                      {showColorPicker && (
+                        <div style={{
+                          position: 'absolute',
+                          top: '56px',
+                          left: 0,
+                          zIndex: 50,
+                          padding: '12px',
+                          borderRadius: '12px',
+                          backgroundColor: 'var(--bg-elevated)',
+                          border: '1px solid var(--border)',
+                          boxShadow: 'var(--shadow-lg)',
+                        }}>
+                          <Controller
+                            name="primaryColor"
+                            control={control}
+                            render={({ field }) => (
+                              <HexColorPicker color={field.value} onChange={field.onChange} />
+                            )}
+                          />
+                          <Input
+                            value={primaryColor}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue('primaryColor', e.target.value)}
+                            size="sm"
+                            style={{ width: '100%', marginTop: '12px', fontFamily: 'monospace' }}
+                          />
+                        </div>
+                      )}
+                    </div>
+                    <div style={{ flex: 1 }}>
+                      <Input
                         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]"
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue('primaryColor', e.target.value)}
+                        style={{ fontFamily: 'monospace' }}
                       />
                     </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>
+                  </Stack>
 
-              {/* 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">
-                    {/* Mini palette preview */}
-                    <div className="flex gap-0.5">
-                      {getSchemeKeyColors(primaryColor, colorSchemeType).map((color, i) => (
+                  {/* Scheme Type Dropdown */}
+                  <Select
+                    value={colorSchemeType}
+                    onValueChange={(value: string) => setValue('colorSchemeType', value as ColorSchemeType)}
+                  >
+                    <Select.Trigger>
+                      <Stack direction="row" align="center" gap="sm">
+                        <div style={{ display: 'flex', gap: '2px' }}>
+                          {getSchemeKeyColors(primaryColor, colorSchemeType).map((color, i) => (
+                            <div
+                              key={i}
+                              style={{ width: '16px', height: '16px', borderRadius: '2px', backgroundColor: color }}
+                            />
+                          ))}
+                        </div>
+                        <span>{currentScheme?.label}</span>
+                        <Text as="span" color="tertiary">-- {currentScheme?.description}</Text>
+                      </Stack>
+                    </Select.Trigger>
+                    <Select.Content>
+                      {SCHEME_OPTIONS.map((scheme) => (
+                        <Select.Item key={scheme.value} value={scheme.value}>
+                          <Stack direction="row" align="center" gap="sm">
+                            <div style={{ display: 'flex', gap: '2px', flexShrink: 0 }}>
+                              {getSchemeKeyColors(primaryColor, scheme.value).map((color, i) => (
+                                <div
+                                  key={i}
+                                  style={{ width: '20px', height: '20px', borderRadius: '2px', backgroundColor: color }}
+                                />
+                              ))}
+                            </div>
+                            <div>
+                              <Text size="sm">{scheme.label}</Text>
+                              <Text size="xs" color="tertiary">{scheme.description}</Text>
+                            </div>
+                          </Stack>
+                        </Select.Item>
+                      ))}
+                    </Select.Content>
+                  </Select>
+
+                  {/* Current Palette Preview */}
+                  <div>
+                    <div style={{ display: 'flex', gap: '6px' }}>
+                      {currentPalette.map((color, i) => (
                         <div
                           key={i}
-                          className="w-4 h-4 rounded-sm first:rounded-l last:rounded-r"
-                          style={{ backgroundColor: color }}
+                          style={{
+                            flex: 1,
+                            height: '48px',
+                            borderRadius: '8px',
+                            transition: 'background-color 150ms',
+                            backgroundColor: color,
+                          }}
                         />
                       ))}
                     </div>
-                    <span>{currentScheme?.label}</span>
-                    <span className="text-tertiary">— {currentScheme?.description}</span>
+                    <Text size="xs" color="tertiary" style={{ marginTop: '8px' }}>
+                      {currentScheme?.colorCount} color {currentScheme?.label.toLowerCase()} palette
+                    </Text>
                   </div>
-                  <ChevronDownIcon className={clsx('w-4 h-4 text-tertiary transition-transform', showSchemeDropdown && 'rotate-180')} />
-                </button>
+                </Stack>
+              </Field.Control>
+            </Field>
 
-                {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">
-                    {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]'
-                          )}
-                        >
-                          {/* Color preview swatches */}
-                          <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>
+            <Separator />
 
-              {/* 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 }}
-                    />
+            {/* Style Options */}
+            <Stack direction="column" gap="lg">
+              {/* Border Radius */}
+              <Stack direction="row" align="center" justify="between">
+                <div>
+                  <Text size="sm">Border Radius</Text>
+                  <Text size="xs" color="tertiary" style={{ marginTop: '2px' }}>Component corner style</Text>
+                </div>
+                <div style={{
+                  display: 'flex',
+                  gap: '4px',
+                  backgroundColor: 'var(--bg-tertiary)',
+                  padding: '4px',
+                  borderRadius: '8px',
+                }}>
+                  {(['none', 'sm', 'md', 'lg', 'full'] as const).map((radius) => (
+                    <label
+                      key={radius}
+                      style={{
+                        padding: '6px 12px',
+                        fontSize: '12px',
+                        fontWeight: 500,
+                        borderRadius: '6px',
+                        cursor: 'pointer',
+                        transition: 'all 150ms',
+                        color: watch('borderRadius') === radius ? 'var(--text-primary)' : 'var(--text-tertiary)',
+                        backgroundColor: watch('borderRadius') === radius ? 'var(--bg-primary)' : 'transparent',
+                        boxShadow: watch('borderRadius') === radius ? 'var(--shadow-sm)' : 'none',
+                      }}
+                    >
+                      <input
+                        type="radio"
+                        {...register('borderRadius')}
+                        value={radius}
+                        style={{ position: 'absolute', width: '1px', height: '1px', overflow: 'hidden', clip: 'rect(0,0,0,0)' }}
+                      />
+                      {radius}
+                    </label>
                   ))}
                 </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]" />
+              </Stack>
 
-          {/* Style Options */}
-          <div className="space-y-6">
-            {/* Border Radius */}
-            <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"
+              {/* Dark Mode */}
+              <Stack direction="row" align="center" justify="between">
+                <div>
+                  <Text size="sm">Dark Mode</Text>
+                  <Text size="xs" color="tertiary" style={{ marginTop: '2px' }}>Include dark theme styles</Text>
+                </div>
+                <Controller
+                  name="darkMode"
+                  control={control}
+                  render={({ field }) => (
+                    <Toggle
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
                     />
-                    {radius}
-                  </label>
-                ))}
-              </div>
-            </div>
-
-            {/* Dark Mode */}
-            <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>
+              </Stack>
+            </Stack>
 
-          <div className="h-px bg-[--border]" />
+            <Separator />
 
-          {/* Submit */}
-          <button
-            type="submit"
-            disabled={isSubmitting}
-            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]',
-              'disabled:opacity-50 disabled:cursor-not-allowed'
-            )}
-          >
-            {isSubmitting ? 'Creating...' : 'Create Component'}
-          </button>
+            {/* Submit */}
+            <Button
+              type="submit"
+              variant="primary"
+              size="lg"
+              fullWidth
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? 'Creating...' : 'Create Component'}
+            </Button>
+          </Stack>
         </form>
       </div>
     </div>