m9sh 0.2.1 → 0.2.2

data/app/views/blocks/examples/dashboard-03.html.erb

@@ -0,0 +1,210 @@
+<% content_for :title, "Dashboard 03 - Blocks" %>
+
+<!-- Page Header -->
+<div class="space-y-2 mb-8">
+  <h1 class="text-3xl font-bold tracking-tight">Dashboard 03</h1>
+  <p class="text-muted-foreground">
+    An e-commerce dashboard with orders, inventory, and customer insights. Perfect for online stores and marketplace platforms.
+  </p>
+</div>
+
+<!-- Dashboard Preview -->
+<% dashboard_html = capture do %>
+  <div class="w-full space-y-6">
+    <!-- Quick Stats -->
+    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_body do %>
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm font-medium text-muted-foreground">Total Sales</p>
+              <p class="text-2xl font-bold mt-1">$54,239</p>
+              <p class="text-xs text-muted-foreground mt-1">+18.2% from last week</p>
+            </div>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-10 w-10 text-muted-foreground">
+              <path d="M16 8v10M12 11v7M8 14v4"/>
+              <path d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+            </svg>
+          </div>
+        <% end %>
+      <% end %>
+
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_body do %>
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm font-medium text-muted-foreground">Orders</p>
+              <p class="text-2xl font-bold mt-1">342</p>
+              <p class="text-xs text-muted-foreground mt-1">+23 new today</p>
+            </div>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-10 w-10 text-muted-foreground">
+              <path d="M16 16v-4"/>
+              <path d="M8 16V8"/>
+              <path d="M12 16v-1"/>
+              <rect x="3" y="12" width="18" height="8" rx="1"/>
+              <path d="M7 12v-4a5 5 0 0 1 10 0v4"/>
+            </svg>
+          </div>
+        <% end %>
+      <% end %>
+
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_body do %>
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm font-medium text-muted-foreground">Customers</p>
+              <p class="text-2xl font-bold mt-1">1,429</p>
+              <p class="text-xs text-muted-foreground mt-1">+89 this month</p>
+            </div>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-10 w-10 text-muted-foreground">
+              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
+              <circle cx="9" cy="7" r="4"/>
+              <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
+              <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+            </svg>
+          </div>
+        <% end %>
+      <% end %>
+
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_body do %>
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm font-medium text-muted-foreground">Conversion</p>
+              <p class="text-2xl font-bold mt-1">3.2%</p>
+              <p class="text-xs text-muted-foreground mt-1">+0.4% from last week</p>
+            </div>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-10 w-10 text-muted-foreground">
+              <path d="M12 2v20"/>
+              <path d="m15 5-3-3-3 3"/>
+              <path d="m9 19 3 3 3-3"/>
+            </svg>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+
+    <!-- Recent Orders and Top Products -->
+    <div class="grid gap-4 grid-cols-1 lg:grid-cols-2">
+      <!-- Recent Orders Table -->
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title do %>
+            Recent Orders
+          <% end %>
+          <% header.with_description do %>
+            Latest orders from your store
+          <% end %>
+        <% end %>
+        <% card.with_body do %>
+          <%= render M9sh::TableComponent.new do |table| %>
+            <% table.with_header do %>
+              <tr>
+                <th>Order</th>
+                <th>Customer</th>
+                <th>Amount</th>
+                <th>Status</th>
+              </tr>
+            <% end %>
+            <% table.with_body do %>
+              <% [
+                { order: "#3210", customer: "John Doe", amount: "$129.99", status: "Delivered", status_variant: :default },
+                { order: "#3209", customer: "Jane Smith", amount: "$89.50", status: "Processing", status_variant: :secondary },
+                { order: "#3208", customer: "Bob Johnson", amount: "$245.00", status: "Shipped", status_variant: :outline },
+                { order: "#3207", customer: "Alice Brown", amount: "$67.25", status: "Delivered", status_variant: :default },
+                { order: "#3206", customer: "Charlie Wilson", amount: "$199.99", status: "Cancelled", status_variant: :destructive }
+              ].each do |order| %>
+                <tr>
+                  <td class="font-medium"><%= order[:order] %></td>
+                  <td><%= order[:customer] %></td>
+                  <td><%= order[:amount] %></td>
+                  <td>
+                    <%= render M9sh::BadgeComponent.new(variant: order[:status_variant], class: "text-xs") do %>
+                      <%= order[:status] %>
+                    <% end %>
+                  </td>
+                </tr>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <!-- Top Products -->
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title do %>
+            Top Products
+          <% end %>
+          <% header.with_description do %>
+            Best selling items this month
+          <% end %>
+        <% end %>
+        <% card.with_body do %>
+          <div class="space-y-4">
+            <% [
+              { product: "Wireless Headphones", sales: 342, revenue: "$34,200", trend: "+12%" },
+              { product: "Smart Watch Pro", sales: 289, revenue: "$57,800", trend: "+8%" },
+              { product: "Laptop Stand", sales: 234, revenue: "$9,360", trend: "+15%" },
+              { product: "USB-C Hub", sales: 198, revenue: "$11,880", trend: "+5%" },
+              { product: "Mechanical Keyboard", sales: 156, revenue: "$18,720", trend: "+20%" }
+            ].each do |product| %>
+              <div class="flex items-center justify-between pb-4 border-b border-border last:border-0 last:pb-0">
+                <div class="flex-1">
+                  <p class="text-sm font-medium"><%= product[:product] %></p>
+                  <div class="flex items-center gap-2 mt-1">
+                    <p class="text-xs text-muted-foreground"><%= product[:sales] %> sold</p>
+                    <span class="text-xs text-muted-foreground">•</span>
+                    <p class="text-xs text-muted-foreground"><%= product[:revenue] %></p>
+                  </div>
+                </div>
+                <%= render M9sh::BadgeComponent.new(variant: :default, class: "text-xs") do %>
+                  <%= product[:trend] %>
+                <% end %>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+<% end %>
+
+<%= render Docs::ComponentPreviewComponent.new(
+  title: "E-Commerce Dashboard",
+  preview_content: dashboard_html,
+  code: dashboard_03_code,
+  ai_command: dashboard_03_code
+) %>
+
+<!-- Usage Section -->
+<div class="mt-12 space-y-4">
+  <h2 class="text-2xl font-semibold tracking-tight">Usage</h2>
+  <p class="text-muted-foreground leading-relaxed">
+    An e-commerce dashboard displaying orders, customer data, and product performance. Ideal for online stores and marketplace platforms.
+  </p>
+
+  <%= render M9sh::CardComponent.new(class: "mt-6") do |card| %>
+    <% card.with_header do |header| %>
+      <% header.with_title do %>
+        Required Components
+      <% end %>
+      <% header.with_description do %>
+        Make sure these components are installed in your project
+      <% end %>
+    <% end %>
+    <% card.with_body do %>
+      <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          CardComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          TableComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          BadgeComponent
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/app/views/blocks/examples/settings-01.html.erb

@@ -0,0 +1,220 @@
+<% content_for :title, "Settings 01 - Blocks" %>
+
+<!-- Page Header -->
+<div class="space-y-2 mb-8">
+  <h1 class="text-3xl font-bold tracking-tight">Settings 01</h1>
+  <p class="text-muted-foreground">
+    Profile and account settings page with form inputs, avatar management, and user preferences. Perfect for user account management interfaces.
+  </p>
+</div>
+
+<!-- Settings Preview -->
+<% settings_html = capture do %>
+  <div class="w-full">
+    <div class="max-w-3xl mx-auto space-y-8">
+        <%# CODE_START %>
+        <!-- Page Header -->
+        <div class="space-y-1">
+          <h2 class="text-2xl font-semibold tracking-tight">Settings</h2>
+          <p class="text-sm text-muted-foreground">
+            Manage your account settings and preferences.
+          </p>
+        </div>
+
+        <%= render M9sh::SeparatorComponent.new(class: "my-6") %>
+
+        <!-- Profile Section -->
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title { "Profile" } %>
+            <% header.with_description { "Update your personal information and profile picture." } %>
+          <% end %>
+          <% card.with_body do %>
+            <div class="space-y-6">
+              <!-- Avatar Upload -->
+              <div class="flex items-center gap-4">
+                <%= render M9sh::AvatarComponent.new(fallback: "JD", class: "h-20 w-20 text-lg") %>
+                <div class="space-y-2">
+                  <%= render M9sh::ButtonComponent.new(variant: :outline, size: :sm) do %>
+                    Change Avatar
+                  <% end %>
+                  <p class="text-xs text-muted-foreground">JPG, PNG or GIF. Max 2MB.</p>
+                </div>
+              </div>
+
+              <!-- Name Fields -->
+              <div class="grid gap-4 md:grid-cols-2">
+                <div class="space-y-2">
+                  <%= render M9sh::LabelComponent.new(for: "first-name") { "First Name" } %>
+                  <%= render M9sh::InputComponent.new(id: "first-name", placeholder: "John", value: "John") %>
+                </div>
+                <div class="space-y-2">
+                  <%= render M9sh::LabelComponent.new(for: "last-name") { "Last Name" } %>
+                  <%= render M9sh::InputComponent.new(id: "last-name", placeholder: "Doe", value: "Doe") %>
+                </div>
+              </div>
+
+              <!-- Email -->
+              <div class="space-y-2">
+                <%= render M9sh::LabelComponent.new(for: "email") { "Email" } %>
+                <%= render M9sh::InputComponent.new(id: "email", type: :email, placeholder: "john.doe@example.com", value: "john.doe@example.com") %>
+                <p class="text-xs text-muted-foreground">We'll never share your email with anyone else.</p>
+              </div>
+
+              <!-- Bio -->
+              <div class="space-y-2">
+                <%= render M9sh::LabelComponent.new(for: "bio") { "Bio" } %>
+                <%= render M9sh::TextareaComponent.new(id: "bio", placeholder: "Tell us about yourself...", rows: 4) %>
+                <p class="text-xs text-muted-foreground">Brief description for your profile. Max 500 characters.</p>
+              </div>
+            </div>
+          <% end %>
+          <% card.with_footer do %>
+            <div class="flex justify-end gap-2">
+              <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+                Cancel
+              <% end %>
+              <%= render M9sh::ButtonComponent.new do %>
+                Save Changes
+              <% end %>
+            </div>
+          <% end %>
+        <% end %>
+
+        <!-- Account Security -->
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title { "Account Security" } %>
+            <% header.with_description { "Update your password and security settings." } %>
+          <% end %>
+          <% card.with_body do %>
+            <div class="space-y-4">
+              <div class="space-y-2">
+                <%= render M9sh::LabelComponent.new(for: "current-password") { "Current Password" } %>
+                <%= render M9sh::InputComponent.new(id: "current-password", type: :password, placeholder: "Enter current password") %>
+              </div>
+              <div class="space-y-2">
+                <%= render M9sh::LabelComponent.new(for: "new-password") { "New Password" } %>
+                <%= render M9sh::InputComponent.new(id: "new-password", type: :password, placeholder: "Enter new password") %>
+              </div>
+              <div class="space-y-2">
+                <%= render M9sh::LabelComponent.new(for: "confirm-password") { "Confirm Password" } %>
+                <%= render M9sh::InputComponent.new(id: "confirm-password", type: :password, placeholder: "Confirm new password") %>
+              </div>
+            </div>
+          <% end %>
+          <% card.with_footer do %>
+            <%= render M9sh::ButtonComponent.new do %>
+              Update Password
+            <% end %>
+          <% end %>
+        <% end %>
+
+        <!-- Preferences -->
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title { "Preferences" } %>
+            <% header.with_description { "Manage your notification and communication preferences." } %>
+          <% end %>
+          <% card.with_body do %>
+            <div class="space-y-4">
+              <% [
+                { id: "marketing", label: "Marketing Emails", description: "Receive emails about new products and features." },
+                { id: "updates", label: "Product Updates", description: "Get notified about product updates and improvements." },
+                { id: "social", label: "Social Notifications", description: "Receive notifications about mentions and comments." },
+                { id: "security", label: "Security Alerts", description: "Important security notifications about your account." }
+              ].each do |pref| %>
+                <div class="flex items-center justify-between space-x-2 py-2">
+                  <div class="space-y-0.5 flex-1">
+                    <%= render M9sh::LabelComponent.new(for: pref[:id], class: "font-medium cursor-pointer") { pref[:label] } %>
+                    <p class="text-sm text-muted-foreground"><%= pref[:description] %></p>
+                  </div>
+                  <%= render M9sh::SwitchComponent.new(id: pref[:id], checked: pref[:id] == "security") %>
+                </div>
+                <%= render M9sh::SeparatorComponent.new if pref != { id: "security", label: "Security Alerts", description: "Important security notifications about your account." } %>
+              <% end %>
+            </div>
+          <% end %>
+        <% end %>
+
+        <!-- Danger Zone -->
+        <%= render M9sh::CardComponent.new(class: "border-destructive") do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title(class: "text-destructive") { "Danger Zone" } %>
+            <% header.with_description { "Irreversible actions that affect your account." } %>
+          <% end %>
+          <% card.with_body do %>
+            <div class="space-y-4">
+              <%= render M9sh::AlertComponent.new(variant: :destructive) do %>
+                <div class="space-y-2">
+                  <p class="font-medium">Delete Account</p>
+                  <p class="text-sm">Once you delete your account, there is no going back. Please be certain.</p>
+                </div>
+              <% end %>
+              <%= render M9sh::ButtonComponent.new(variant: :destructive) do %>
+                Delete Account
+              <% end %>
+            </div>
+          <% end %>
+        <% end %>
+        <%# CODE_END %>
+      </div>
+  </div>
+<% end %>
+
+<%= render Docs::ComponentPreviewComponent.new(
+  title: "Profile & Account Settings",
+  preview_content: settings_html,
+  code: extract_block_code("<%# CODE_START %>", "<%# CODE_END %>"),
+  ai_command: extract_block_code("<%# CODE_START %>", "<%# CODE_END %>")
+) %>
+
+<!-- Usage Section -->
+<div class="mt-12 space-y-4">
+  <h2 class="text-2xl font-semibold tracking-tight">Usage</h2>
+  <p class="text-muted-foreground leading-relaxed">
+    A comprehensive settings page for profile and account management. Features form inputs, avatar management, password updates, and user preferences with switches.
+  </p>
+
+  <%= render M9sh::CardComponent.new(class: "mt-6") do |card| %>
+    <% card.with_header do |header| %>
+      <% header.with_title do %>
+        Required Components
+      <% end %>
+      <% header.with_description do %>
+        Make sure these components are installed in your project
+      <% end %>
+    <% end %>
+    <% card.with_body do %>
+      <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          CardComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          InputComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          LabelComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          TextareaComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          ButtonComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          AvatarComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          SwitchComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          AlertComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          SeparatorComponent
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/app/views/blocks/examples/settings-02.html.erb

@@ -0,0 +1,231 @@
+<% content_for :title, "Settings 02 - Blocks" %>
+
+<!-- Page Header -->
+<div class="space-y-2 mb-8">
+  <h1 class="text-3xl font-bold tracking-tight">Settings 02</h1>
+  <p class="text-muted-foreground">
+    Appearance and display settings page with theme selection, font options, and layout preferences. Perfect for customizable user interfaces.
+  </p>
+</div>
+
+<!-- Settings Preview -->
+<% settings_html = capture do %>
+  <div class="w-full">
+    <div class="max-w-3xl mx-auto space-y-8">
+        <%# CODE_START %>
+        <!-- Page Header -->
+        <div class="space-y-1">
+          <h2 class="text-2xl font-semibold tracking-tight">Appearance</h2>
+          <p class="text-sm text-muted-foreground">
+            Customize how the application looks and feels.
+          </p>
+        </div>
+
+        <%= render M9sh::SeparatorComponent.new(class: "my-6") %>
+
+        <!-- Theme Selection -->
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title { "Theme" } %>
+            <% header.with_description { "Select your preferred color theme." } %>
+          <% end %>
+          <% card.with_body do %>
+            <%= render M9sh::RadioGroupComponent.new(name: "theme", default_value: "light") do |group| %>
+              <div class="grid gap-4 md:grid-cols-3">
+                <% [
+                  { value: "light", label: "Light", description: "Clean and bright interface" },
+                  { value: "dark", label: "Dark", description: "Easy on the eyes" },
+                  { value: "system", label: "System", description: "Use system preference" }
+                ].each do |theme| %>
+                  <label class="flex flex-col space-y-2 cursor-pointer border rounded-lg p-4 hover:bg-accent transition-colors">
+                    <%= render group.item(value: theme[:value], id: "theme-#{theme[:value]}") %>
+                    <div class="space-y-1">
+                      <p class="font-medium leading-none"><%= theme[:label] %></p>
+                      <p class="text-sm text-muted-foreground"><%= theme[:description] %></p>
+                    </div>
+                  </label>
+                <% end %>
+              </div>
+            <% end %>
+          <% end %>
+        <% end %>
+
+        <!-- Font Size -->
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title { "Font Size" } %>
+            <% header.with_description { "Adjust the text size throughout the application." } %>
+          <% end %>
+          <% card.with_body do %>
+            <div class="space-y-4">
+              <div class="space-y-2">
+                <%= render M9sh::LabelComponent.new(for: "font-size") { "Text Size" } %>
+                <%= render M9sh::SelectComponent.new(id: "font-size") do %>
+                  <option value="small">Small</option>
+                  <option value="medium" selected>Medium (Default)</option>
+                  <option value="large">Large</option>
+                  <option value="x-large">Extra Large</option>
+                <% end %>
+              </div>
+              <div class="border rounded-lg p-4 space-y-2">
+                <p class="text-sm font-medium">Preview</p>
+                <p class="text-muted-foreground">This is how your text will appear with the selected font size.</p>
+              </div>
+            </div>
+          <% end %>
+        <% end %>
+
+        <!-- Layout Options -->
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title { "Layout" } %>
+            <% header.with_description { "Customize the layout and spacing of the interface." } %>
+          <% end %>
+          <% card.with_body do %>
+            <div class="space-y-4">
+              <% [
+                { id: "compact", label: "Compact Mode", description: "Reduce spacing between elements for a denser layout." },
+                { id: "sidebar-left", label: "Left Sidebar", description: "Display sidebar on the left side (default).", checked: true },
+                { id: "animations", label: "Enable Animations", description: "Show smooth transitions and animations.", checked: true }
+              ].each do |option| %>
+                <div class="flex items-start space-x-3 py-2">
+                  <%= render M9sh::CheckboxComponent.new(
+                    id: option[:id],
+                    checked: option[:checked] || false
+                  ) %>
+                  <div class="space-y-1 leading-none">
+                    <%= render M9sh::LabelComponent.new(for: option[:id], class: "font-medium cursor-pointer") { option[:label] } %>
+                    <p class="text-sm text-muted-foreground"><%= option[:description] %></p>
+                  </div>
+                </div>
+              <% end %>
+            </div>
+          <% end %>
+          <% card.with_footer do %>
+            <div class="flex justify-end gap-2">
+              <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+                Reset to Defaults
+              <% end %>
+              <%= render M9sh::ButtonComponent.new do %>
+                Save Preferences
+              <% end %>
+            </div>
+          <% end %>
+        <% end %>
+
+        <!-- Accessibility -->
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title { "Accessibility" } %>
+            <% header.with_description { "Features to improve accessibility and usability." } %>
+          <% end %>
+          <% card.with_body do %>
+            <div class="space-y-4">
+              <% [
+                { id: "high-contrast", label: "High Contrast", description: "Increase contrast between text and background." },
+                { id: "reduce-motion", label: "Reduce Motion", description: "Minimize animations and transitions." },
+                { id: "focus-indicators", label: "Enhanced Focus", description: "Show prominent focus indicators for keyboard navigation.", checked: true },
+                { id: "screen-reader", label: "Screen Reader Optimized", description: "Optimize for screen reader compatibility.", checked: true }
+              ].each do |feature| %>
+                <div class="flex items-center justify-between space-x-2 py-2">
+                  <div class="space-y-0.5 flex-1">
+                    <%= render M9sh::LabelComponent.new(for: feature[:id], class: "font-medium cursor-pointer") { feature[:label] } %>
+                    <p class="text-sm text-muted-foreground"><%= feature[:description] %></p>
+                  </div>
+                  <%= render M9sh::SwitchComponent.new(id: feature[:id], checked: feature[:checked] || false) %>
+                </div>
+                <%= render M9sh::SeparatorComponent.new unless feature[:id] == "screen-reader" %>
+              <% end %>
+            </div>
+          <% end %>
+        <% end %>
+
+        <!-- Preview Card -->
+        <%= render M9sh::CardComponent.new(class: "bg-accent/50") do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title { "Preview" } %>
+            <% header.with_description { "See how your settings affect the interface." } %>
+          <% end %>
+          <% card.with_body do %>
+            <div class="space-y-3 p-4 border rounded-lg bg-background">
+              <div class="flex items-center justify-between">
+                <h3 class="font-semibold">Example Component</h3>
+                <%= render M9sh::BadgeComponent.new do %>
+                  New
+                <% end %>
+              </div>
+              <p class="text-sm text-muted-foreground">
+                This preview shows how your selected appearance settings will affect the interface elements.
+              </p>
+              <div class="flex gap-2">
+                <%= render M9sh::ButtonComponent.new(size: :sm) do %>
+                  Primary
+                <% end %>
+                <%= render M9sh::ButtonComponent.new(variant: :outline, size: :sm) do %>
+                  Secondary
+                <% end %>
+              </div>
+            </div>
+          <% end %>
+        <% end %>
+        <%# CODE_END %>
+      </div>
+  </div>
+<% end %>
+
+<%= render Docs::ComponentPreviewComponent.new(
+  title: "Appearance Settings",
+  preview_content: settings_html,
+  code: extract_block_code("<%# CODE_START %>", "<%# CODE_END %>"),
+  ai_command: extract_block_code("<%# CODE_START %>", "<%# CODE_END %>")
+) %>
+
+<!-- Usage Section -->
+<div class="mt-12 space-y-4">
+  <h2 class="text-2xl font-semibold tracking-tight">Usage</h2>
+  <p class="text-muted-foreground leading-relaxed">
+    An appearance and display settings page with theme selection, font options, layout preferences, and accessibility features. Perfect for applications that offer extensive customization.
+  </p>
+
+  <%= render M9sh::CardComponent.new(class: "mt-6") do |card| %>
+    <% card.with_header do |header| %>
+      <% header.with_title do %>
+        Required Components
+      <% end %>
+      <% header.with_description do %>
+        Make sure these components are installed in your project
+      <% end %>
+    <% end %>
+    <% card.with_body do %>
+      <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          CardComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          RadioGroupComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          SelectComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          CheckboxComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          SwitchComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          LabelComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          ButtonComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          BadgeComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          SeparatorComponent
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+</div>