neon_sakura 0.1.4

data/app/views/style_guide/sections/_cards.html.erb

@@ -0,0 +1,84 @@
+<section id="cards">
+  <h2 class="text-3xl font-bold mb-4">Cards</h2>
+  <p class="text-text-secondary mb-6">
+    Card components for displaying grouped content with borders and backgrounds.
+  </p>
+
+  <!-- Basic Card -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Basic Card</h3>
+      <div class="max-w-md p-6 border border-border rounded-lg bg-surface">
+        <h4 class="text-lg font-semibold mb-2">Card Title</h4>
+        <p class="text-text-secondary">This is a basic card with a title and description text.</p>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;div class="p-6 border border-border rounded-lg bg-surface"&gt;
+  &lt;h4 class="text-lg font-semibold mb-2"&gt;Card Title&lt;/h4&gt;
+  &lt;p class="text-text-secondary"&gt;Description&lt;/p&gt;
+&lt;/div&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Card with Header -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Card with Header</h3>
+      <div class="max-w-md border border-border rounded-lg overflow-hidden bg-surface">
+        <div class="px-6 py-3 bg-background border-b border-border">
+          <h4 class="text-lg font-semibold">Card Header</h4>
+        </div>
+        <div class="p-6">
+          <p class="text-text-secondary">Card content goes here with separate header section.</p>
+        </div>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;div class="border border-border rounded-lg overflow-hidden bg-surface"&gt;
+  &lt;div class="px-6 py-3 bg-background border-b border-border"&gt;
+    &lt;h4&gt;Header&lt;/h4&gt;
+  &lt;/div&gt;
+  &lt;div class="p-6"&gt;Content&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Card Grid -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Card Grid</h3>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="p-4 border border-border rounded-lg bg-surface hover:border-accent transition">
+          <div class="flex items-center gap-2 mb-2">
+            <%= render_theme_icon("star", css_class: "w-5 h-5 text-accent") %>
+            <h4 class="font-semibold">Feature 1</h4>
+          </div>
+          <p class="text-sm text-text-secondary">Description of feature one.</p>
+        </div>
+        <div class="p-4 border border-border rounded-lg bg-surface hover:border-accent transition">
+          <div class="flex items-center gap-2 mb-2">
+            <%= render_theme_icon("lightning", css_class: "w-5 h-5 text-accent") %>
+            <h4 class="font-semibold">Feature 2</h4>
+          </div>
+          <p class="text-sm text-text-secondary">Description of feature two.</p>
+        </div>
+        <div class="p-4 border border-border rounded-lg bg-surface hover:border-accent transition">
+          <div class="flex items-center gap-2 mb-2">
+            <%= render_theme_icon("heart", css_class: "w-5 h-5 text-accent") %>
+            <h4 class="font-semibold">Feature 3</h4>
+          </div>
+          <p class="text-sm text-text-secondary">Description of feature three.</p>
+        </div>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;div class="grid grid-cols-1 md:grid-cols-3 gap-4"&gt;
+  &lt;div class="p-4 border border-border rounded-lg bg-surface hover:border-accent transition"&gt;
+    &lt;h4 class="font-semibold"&gt;Feature&lt;/h4&gt;
+    &lt;p class="text-sm text-text-secondary"&gt;Description&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+    </div>
+  </div>
+</section>

data/app/views/style_guide/sections/_colors.html.erb

@@ -0,0 +1,106 @@
+<section id="colors">
+  <h2 class="text-3xl font-bold mb-4">Colors</h2>
+  <p class="text-text-secondary mb-6">
+    CSS custom properties (variables) for theme-aware colors. All colors automatically adapt to the selected theme.
+  </p>
+
+  <!-- CSS Variables -->
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <!-- Text Colors -->
+    <div class="p-4 border border-border rounded-lg bg-surface">
+      <h3 class="text-lg font-semibold mb-3">Text Colors</h3>
+      <div class="space-y-2 font-mono text-sm">
+        <div class="flex items-center gap-2">
+          <div class="w-8 h-8 rounded" style="background-color: var(--color-text-primary); border: 1px solid var(--color-border);"></div>
+          <code>--color-text-primary</code>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-8 h-8 rounded" style="background-color: var(--color-text-secondary); border: 1px solid var(--color-border);"></div>
+          <code>--color-text-secondary</code>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-8 h-8 rounded" style="background-color: var(--color-text-muted); border: 1px solid var(--color-border);"></div>
+          <code>--color-text-muted</code>
+        </div>
+      </div>
+    </div>
+
+    <!-- Background Colors -->
+    <div class="p-4 border border-border rounded-lg bg-surface">
+      <h3 class="text-lg font-semibold mb-3">Background Colors</h3>
+      <div class="space-y-2 font-mono text-sm">
+        <div class="flex items-center gap-2">
+          <div class="w-8 h-8 rounded" style="background-color: var(--color-background); border: 1px solid var(--color-border);"></div>
+          <code>--color-background</code>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-8 h-8 rounded" style="background-color: var(--color-surface); border: 1px solid var(--color-border);"></div>
+          <code>--color-surface</code>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-8 h-8 rounded" style="background-color: var(--color-border);"></div>
+          <code>--color-border</code>
+        </div>
+      </div>
+    </div>
+
+    <!-- Accent & Status Colors -->
+    <div class="p-4 border border-border rounded-lg bg-surface">
+      <h3 class="text-lg font-semibold mb-3">Accent Colors</h3>
+      <div class="space-y-2 font-mono text-sm">
+        <div class="flex items-center gap-2">
+          <div class="w-8 h-8 rounded" style="background-color: var(--color-accent);"></div>
+          <code>--color-accent</code>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-8 h-8 rounded" style="background-color: var(--color-notification);"></div>
+          <code>--color-notification</code>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-8 h-8 rounded" style="background-color: var(--color-alert);"></div>
+          <code>--color-alert</code>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-8 h-8 rounded" style="background-color: var(--color-warning);"></div>
+          <code>--color-warning</code>
+        </div>
+      </div>
+    </div>
+
+    <!-- Gradient Colors -->
+    <div class="p-4 border border-border rounded-lg bg-surface">
+      <h3 class="text-lg font-semibold mb-3">Gradient Colors</h3>
+      <div class="space-y-2 font-mono text-sm">
+        <div class="flex items-center gap-2">
+          <div class="w-16 h-8 rounded" style="background: linear-gradient(to right, var(--gradient-from), var(--gradient-to));"></div>
+          <code>--gradient-from/to</code>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-16 h-8 rounded" style="background: linear-gradient(to right, var(--gradient-from-hover), var(--gradient-to-hover));"></div>
+          <code>--gradient-*-hover</code>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-16 h-8 rounded" style="background: linear-gradient(to right, var(--text-gradient-from), var(--text-gradient-to));"></div>
+          <code>--text-gradient-*</code>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Usage Example -->
+  <div class="code-example-wrapper mt-6">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Using CSS Variables</h3>
+      <div class="p-4 rounded" style="background-color: var(--color-surface); border: 1px solid var(--color-accent);">
+        <p style="color: var(--color-text-primary);">This box uses CSS custom properties for theming.</p>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>.my-component {
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-accent);
+  color: var(--color-text-primary);
+}</code></pre>
+    </div>
+  </div>
+</section>

data/app/views/style_guide/sections/_file_upload.html.erb

@@ -0,0 +1,135 @@
+<section id="file-upload" class="mb-12">
+  <h2 class="text-3xl font-bold mb-6 bg-gradient-to-r from-gradient-from to-gradient-to bg-clip-text text-transparent">
+    File Upload Component
+  </h2>
+
+  <p class="text-text-secondary mb-6">
+    Drag-and-drop file upload component with preview support and validation.
+  </p>
+
+  <!-- Basic Upload -->
+  <div class="mb-8">
+    <h3 class="text-xl font-semibold mb-4 text-text-primary">Basic Upload</h3>
+    <div class="card p-6">
+      <%= render "shared/file_upload" %>
+    </div>
+    <div class="mt-4">
+      <h4 class="text-sm font-semibold text-text-muted mb-2">Code Example:</h4>
+      <pre class="bg-surface p-4 rounded-lg overflow-x-auto"><code>&lt;%= render "shared/file_upload" %&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Upload with Preview -->
+  <div class="mb-8">
+    <h3 class="text-xl font-semibold mb-4 text-text-primary">Upload with Image Preview</h3>
+    <div class="card p-6">
+      <%= render "shared/file_upload", preview: true, accept: "image/*" %>
+    </div>
+    <div class="mt-4">
+      <h4 class="text-sm font-semibold text-text-muted mb-2">Code Example:</h4>
+      <pre class="bg-surface p-4 rounded-lg overflow-x-auto"><code>&lt;%= render "shared/file_upload", preview: true, accept: "image/*" %&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Custom Configuration -->
+  <div class="mb-8">
+    <h3 class="text-xl font-semibold mb-4 text-text-primary">Custom Configuration</h3>
+    <div class="card p-6">
+      <%= render "shared/file_upload",
+          field_name: "custom_file",
+          accept: "application/pdf,application/msword",
+          max_size: 5,
+          css_class: "custom-upload" %>
+    </div>
+    <div class="mt-4">
+      <h4 class="text-sm font-semibold text-text-muted mb-2">Code Example:</h4>
+      <pre class="bg-surface p-4 rounded-lg overflow-x-auto"><code>&lt;%= render "shared/file_upload",
+    field_name: "custom_file",
+    accept: "application/pdf,application/msword",
+    max_size: 5,
+    css_class: "custom-upload" %&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Multiple Files -->
+  <div class="mb-8">
+    <h3 class="text-xl font-semibold mb-4 text-text-primary">Multiple File Upload</h3>
+    <div class="card p-6">
+      <%= render "shared/file_upload", multiple: true, accept: "image/*", max_size: 10 %>
+    </div>
+    <div class="mt-4">
+      <h4 class="text-sm font-semibold text-text-muted mb-2">Code Example:</h4>
+      <pre class="bg-surface p-4 rounded-lg overflow-x-auto"><code>&lt;%= render "shared/file_upload", multiple: true, accept: "image/*", max_size: 10 %&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Parameters -->
+  <div class="mt-8">
+    <h3 class="text-xl font-semibold mb-4 text-text-primary">Available Parameters</h3>
+    <div class="overflow-x-auto">
+      <table class="w-full">
+        <thead>
+          <tr>
+            <th class="text-left py-2 px-4 border-b border-border">Parameter</th>
+            <th class="text-left py-2 px-4 border-b border-border">Type</th>
+            <th class="text-left py-2 px-4 border-b border-border">Default</th>
+            <th class="text-left py-2 px-4 border-b border-border">Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="py-2 px-4 border-b border-border"><code>field_name</code></td>
+            <td class="py-2 px-4 border-b border-border">String</td>
+            <td class="py-2 px-4 border-b border-border">"file"</td>
+            <td class="py-2 px-4 border-b border-border">Name attribute for file input</td>
+          </tr>
+          <tr>
+            <td class="py-2 px-4 border-b border-border"><code>accept</code></td>
+            <td class="py-2 px-4 border-b border-border">String</td>
+            <td class="py-2 px-4 border-b border-border">"*/*"</td>
+            <td class="py-2 px-4 border-b border-border">Accepted file types</td>
+          </tr>
+          <tr>
+            <td class="py-2 px-4 border-b border-border"><code>max_size</code></td>
+            <td class="py-2 px-4 border-b border-border">Integer</td>
+            <td class="py-2 px-4 border-b border-border">10</td>
+            <td class="py-2 px-4 border-b border-border">Maximum file size in MB</td>
+          </tr>
+          <tr>
+            <td class="py-2 px-4 border-b border-border"><code>preview</code></td>
+            <td class="py-2 px-4 border-b border-border">Boolean</td>
+            <td class="py-2 px-4 border-b border-border">false</td>
+            <td class="py-2 px-4 border-b border-border">Show image preview</td>
+          </tr>
+          <tr>
+            <td class="py-2 px-4 border-b border-border"><code>multiple</code></td>
+            <td class="py-2 px-4 border-b border-border">Boolean</td>
+            <td class="py-2 px-4 border-b border-border">false</td>
+            <td class="py-2 px-4 border-b border-border">Allow multiple files</td>
+          </tr>
+          <tr>
+            <td class="py-2 px-4 border-b border-border"><code>css_class</code></td>
+            <td class="py-2 px-4 border-b border-border">String</td>
+            <td class="py-2 px-4 border-b border-border">""</td>
+            <td class="py-2 px-4 border-b border-border">Additional CSS classes</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- Features -->
+  <div class="mt-8">
+    <h3 class="text-xl font-semibold mb-4 text-text-primary">Features</h3>
+    <ul class="list-disc list-inside text-text-secondary space-y-2">
+      <li>Drag-and-drop support with visual feedback</li>
+      <li>File type validation via accept parameter</li>
+      <li>File size validation (configurable max size)</li>
+      <li>Optional image preview for uploaded images</li>
+      <li>Multiple file selection support</li>
+      <li>Theme-aware styling with CSS variables</li>
+      <li>Accessible with proper ARIA labels</li>
+      <li>Error messages for validation failures</li>
+    </ul>
+  </div>
+</section>

data/app/views/style_guide/sections/_forms.html.erb

@@ -0,0 +1,129 @@
+<section id="forms">
+  <h2 class="text-3xl font-bold mb-4">Forms</h2>
+  <p class="text-text-secondary mb-6">
+    Form elements styled with Neon Sakura utilities and CSS variables.
+  </p>
+
+  <!-- Text Input -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Text Input</h3>
+      <div class="max-w-md">
+        <label for="example-text" class="block mb-2">Email Address</label>
+        <input type="text" id="example-text" placeholder="Enter your email..." class="w-full px-4 py-2 border border-border rounded bg-surface text-text-primary focus:outline-none focus:border-accent">
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;input type="text" placeholder="Enter text..."
+  class="w-full px-4 py-2 border border-border rounded bg-surface text-text-primary focus:outline-none focus:border-accent"&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Textarea -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Textarea</h3>
+      <div class="max-w-md">
+        <label for="example-textarea" class="block mb-2">Message</label>
+        <textarea id="example-textarea" rows="4" placeholder="Enter message..." class="w-full px-4 py-2 border border-border rounded bg-surface text-text-primary focus:outline-none focus:border-accent"></textarea>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;textarea rows="4"
+  class="w-full px-4 py-2 border border-border rounded bg-surface text-text-primary focus:outline-none focus:border-accent"&gt;&lt;/textarea&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Select Dropdown -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Select Dropdown</h3>
+      <div class="max-w-md">
+        <label for="example-select" class="block mb-2">Choose an option</label>
+        <select id="example-select" class="w-full px-4 py-2 border border-border rounded bg-surface text-text-primary focus:outline-none focus:border-accent">
+          <option>Option 1</option>
+          <option>Option 2</option>
+          <option>Option 3</option>
+        </select>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;select class="w-full px-4 py-2 border border-border rounded bg-surface text-text-primary focus:outline-none focus:border-accent"&gt;
+  &lt;option&gt;Option 1&lt;/option&gt;
+&lt;/select&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Checkbox -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Checkbox</h3>
+      <div class="flex items-center gap-2">
+        <input type="checkbox" id="example-check" class="w-4 h-4 cursor-pointer">
+        <label for="example-check" class="cursor-pointer">I agree to the terms and conditions</label>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;input type="checkbox" id="example-check" class="w-4 h-4"&gt;
+&lt;label for="example-check"&gt;I agree&lt;/label&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Radio Buttons -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Radio Buttons</h3>
+      <div class="space-y-2">
+        <div class="flex items-center gap-2">
+          <input type="radio" name="example-radio" id="radio1" class="w-4 h-4 cursor-pointer" checked>
+          <label for="radio1" class="cursor-pointer">Option 1</label>
+        </div>
+        <div class="flex items-center gap-2">
+          <input type="radio" name="example-radio" id="radio2" class="w-4 h-4 cursor-pointer">
+          <label for="radio2" class="cursor-pointer">Option 2</label>
+        </div>
+        <div class="flex items-center gap-2">
+          <input type="radio" name="example-radio" id="radio3" class="w-4 h-4 cursor-pointer">
+          <label for="radio3" class="cursor-pointer">Option 3</label>
+        </div>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;input type="radio" name="group" id="radio1" class="w-4 h-4"&gt;
+&lt;label for="radio1"&gt;Option 1&lt;/label&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Full Form Example -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Complete Form Example</h3>
+      <form class="max-w-md space-y-4">
+        <div>
+          <label for="form-name" class="block mb-2">Name</label>
+          <input type="text" id="form-name" class="w-full px-4 py-2 border border-border rounded bg-surface text-text-primary focus:outline-none focus:border-accent">
+        </div>
+        <div>
+          <label for="form-email" class="block mb-2">Email</label>
+          <input type="email" id="form-email" class="w-full px-4 py-2 border border-border rounded bg-surface text-text-primary focus:outline-none focus:border-accent">
+        </div>
+        <div>
+          <label for="form-message" class="block mb-2">Message</label>
+          <textarea id="form-message" rows="4" class="w-full px-4 py-2 border border-border rounded bg-surface text-text-primary focus:outline-none focus:border-accent"></textarea>
+        </div>
+        <div>
+          <input type="submit" value="Submit Form" class="px-6 py-2 rounded cursor-pointer">
+        </div>
+      </form>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;form class="space-y-4"&gt;
+  &lt;div&gt;
+    &lt;label&gt;Name&lt;/label&gt;
+    &lt;input type="text" class="w-full px-4 py-2 border border-border rounded bg-surface"&gt;
+  &lt;/div&gt;
+  &lt;input type="submit" value="Submit" class="px-6 py-2 rounded"&gt;
+&lt;/form&gt;</code></pre>
+    </div>
+  </div>
+</section>