uikit_rails 0.1.0

data/test_app/app/components/ui/select/component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Ui
+  module Select
+    # Styled native select dropdown.
+    class Component < Ui::BaseComponent
+      attr_reader :options, :prompt, :selected, :html_attrs
+
+      def initialize(options: [], prompt: nil, selected: nil, **html_attrs)
+        @options = options
+        @prompt = prompt
+        @selected = selected
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def call
+        content_tag(:select, options_html, **computed_attrs)
+      end
+
+      private
+
+      def computed_attrs
+        merge_attrs({ class: "ui-select" }, html_attrs)
+      end
+
+      def options_html
+        html = "".html_safe
+        html += content_tag(:option, prompt, value: "", disabled: true, selected: selected.nil?) if prompt
+        options.each do |opt|
+          label, value = opt.is_a?(Array) ? opt : [opt, opt]
+          html += content_tag(:option, label, value: value, selected: value.to_s == selected.to_s)
+        end
+        html
+      end
+    end
+  end
+end

data/test_app/app/components/ui/select/preview.yml

@@ -0,0 +1,61 @@
+description: A styled native select dropdown. Accepts an array of options (strings or [label, value] pairs), an optional prompt placeholder, and all standard HTML select attributes.
+
+sections:
+  - title: Basic Usage
+    examples:
+      - title: With string options
+        code: |
+          <%= render Ui::Select::Component.new(
+            options: ["Apple", "Banana", "Cherry"],
+            prompt: "Select a fruit",
+            name: "fruit"
+          ) %>
+
+      - title: With label-value pairs
+        code: |
+          <%= render Ui::Select::Component.new(
+            options: [["United States", "us"], ["Canada", "ca"], ["Mexico", "mx"]],
+            prompt: "Select a country",
+            name: "country"
+          ) %>
+
+  - title: Pre-selected Value
+    examples:
+      - title: Selected option
+        code: |
+          <%= render Ui::Select::Component.new(
+            options: [["Small", "sm"], ["Medium", "md"], ["Large", "lg"]],
+            selected: "md",
+            name: "size"
+          ) %>
+
+  - title: States
+    examples:
+      - title: Disabled
+        code: |
+          <%= render Ui::Select::Component.new(
+            options: ["Option A", "Option B"],
+            prompt: "Disabled select",
+            disabled: true,
+            name: "disabled_select"
+          ) %>
+
+      - title: Required
+        code: |
+          <%= render Ui::Select::Component.new(
+            options: ["Draft", "Published", "Archived"],
+            prompt: "Select status",
+            required: true,
+            name: "status"
+          ) %>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom data attributes
+        code: |
+          <%= render Ui::Select::Component.new(
+            options: ["Red", "Green", "Blue"],
+            prompt: "Pick a color",
+            name: "color",
+            data: { controller: "color-picker", action: "change->color-picker#update" }
+          ) %>

data/test_app/app/components/ui/separator/component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Ui
+  module Separator
+    # Visual divider between content sections.
+    class Component < Ui::BaseComponent
+      attr_reader :orientation, :decorative, :html_attrs
+
+      def initialize(orientation: :horizontal, decorative: false, **html_attrs)
+        @orientation = orientation.to_sym
+        @decorative = decorative
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def call
+        tag.div(**computed_attrs)
+      end
+
+      private
+
+      def computed_attrs
+        merge_attrs(
+          {
+            class: class_names("ui-separator", "ui-separator--#{orientation}"),
+            role: decorative ? "none" : "separator",
+            "aria-orientation": orientation == :vertical ? "vertical" : nil
+          }.compact,
+          html_attrs
+        )
+      end
+    end
+  end
+end

data/test_app/app/components/ui/separator/preview.yml

@@ -0,0 +1,32 @@
+description: A visual divider used to separate content sections. Supports horizontal and vertical orientations, with an optional decorative mode that hides the element from assistive technology.
+
+sections:
+  - title: Orientation
+    examples:
+      - title: Horizontal (default)
+        code: |
+          <p>Above</p>
+          <%= render Ui::Separator::Component.new %>
+          <p>Below</p>
+
+      - title: Vertical
+        code: |
+          <div style="display: flex; align-items: center; height: 1.5rem; gap: 0.75rem;">
+            <span>Left</span>
+            <%= render Ui::Separator::Component.new(orientation: :vertical) %>
+            <span>Right</span>
+          </div>
+
+  - title: Decorative
+    examples:
+      - title: Decorative separator (hidden from screen readers)
+        code: |
+          <p>Section A</p>
+          <%= render Ui::Separator::Component.new(decorative: true) %>
+          <p>Section B</p>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom class and margin
+        code: |
+          <%= render Ui::Separator::Component.new(class: "my-divider", style: "margin: 1.5rem 0;") %>

data/test_app/app/components/ui/sheet/component.html.erb

@@ -0,0 +1,23 @@
+<div data-controller="ui--sheet" <%= tag.attributes(html_attrs) %>>
+  <% if trigger? %>
+    <div data-action="click->ui--sheet#open"><%= trigger %></div>
+  <% end %>
+  <dialog class="ui-sheet" data-ui--sheet-target="dialog">
+    <div class="ui-sheet__overlay" data-action="click->ui--sheet#close"></div>
+    <div class="ui-sheet__content ui-sheet__content--<%= side %>">
+      <% if title? || description? %>
+        <div class="ui-sheet__header">
+          <% if title? %><h2 class="ui-sheet__title"><%= title %></h2><% end %>
+          <% if description? %><p class="ui-sheet__description"><%= description %></p><% end %>
+        </div>
+      <% end %>
+      <div class="ui-sheet__body"><%= content %></div>
+      <% if footer? %>
+        <div class="ui-sheet__footer"><%= footer %></div>
+      <% end %>
+      <button class="ui-sheet__close" data-action="click->ui--sheet#close" aria-label="Close">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      </button>
+    </div>
+  </dialog>
+</div>

data/test_app/app/components/ui/sheet/component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Ui
+  module Sheet
+    # Slide-over panel from any side of the screen.
+    class Component < Ui::BaseComponent
+      SIDES = %i[top right bottom left].freeze
+
+      renders_one :trigger
+      renders_one :title
+      renders_one :description
+      renders_one :footer
+
+      attr_reader :side, :html_attrs
+
+      def initialize(side: :right, **html_attrs)
+        @side = side.to_sym
+        @html_attrs = html_attrs
+        super()
+      end
+    end
+  end
+end

data/test_app/app/components/ui/sheet/preview.yml

@@ -0,0 +1,105 @@
+description: A slide-over panel that enters from any side of the screen. Uses the native HTML <dialog> element for accessibility and supports title, description, body content, and footer slots.
+
+sections:
+  - title: Basic Sheet
+    examples:
+      - title: Right side (default)
+        code: |
+          <%= render Ui::Sheet::Component.new do |sheet| %>
+            <% sheet.with_trigger do %>
+              <%= render Ui::Button::Component.new do %>Open Sheet<% end %>
+            <% end %>
+            <% sheet.with_title do %>Sheet Title<% end %>
+            <% sheet.with_description do %>This is a slide-over panel from the right.<% end %>
+            <p>Main content goes here. You can place forms, lists, or any other content inside the sheet body.</p>
+            <% sheet.with_footer do %>
+              <%= render Ui::Button::Component.new(variant: :outline, data: { action: "click->ui--sheet#close" }) do %>Cancel<% end %>
+              <%= render Ui::Button::Component.new do %>Save<% end %>
+            <% end %>
+          <% end %>
+
+  - title: Side Variants
+    examples:
+      - title: Left side
+        code: |
+          <%= render Ui::Sheet::Component.new(side: :left) do |sheet| %>
+            <% sheet.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Open Left<% end %>
+            <% end %>
+            <% sheet.with_title do %>Navigation<% end %>
+            <% sheet.with_description do %>Browse the site sections.<% end %>
+            <ul style="list-style:none;padding:0;margin:0;">
+              <li style="padding:0.5rem 0;border-bottom:1px solid var(--ui-border);">Dashboard</li>
+              <li style="padding:0.5rem 0;border-bottom:1px solid var(--ui-border);">Settings</li>
+              <li style="padding:0.5rem 0;">Profile</li>
+            </ul>
+          <% end %>
+
+      - title: Top side
+        code: |
+          <%= render Ui::Sheet::Component.new(side: :top) do |sheet| %>
+            <% sheet.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Open Top<% end %>
+            <% end %>
+            <% sheet.with_title do %>Notifications<% end %>
+            <% sheet.with_description do %>You have 3 unread notifications.<% end %>
+            <p>Notification content slides down from the top of the screen.</p>
+          <% end %>
+
+      - title: Bottom side
+        code: |
+          <%= render Ui::Sheet::Component.new(side: :bottom) do |sheet| %>
+            <% sheet.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Open Bottom<% end %>
+            <% end %>
+            <% sheet.with_title do %>Quick Actions<% end %>
+            <p>Action panel that slides up from the bottom.</p>
+            <% sheet.with_footer do %>
+              <%= render Ui::Button::Component.new(variant: :outline, data: { action: "click->ui--sheet#close" }) do %>Dismiss<% end %>
+            <% end %>
+          <% end %>
+
+  - title: Sheet with Form
+    examples:
+      - title: Edit profile sheet
+        code: |
+          <%= render Ui::Sheet::Component.new do |sheet| %>
+            <% sheet.with_trigger do %>
+              <%= render Ui::Button::Component.new do %>Edit Profile<% end %>
+            <% end %>
+            <% sheet.with_title do %>Edit Profile<% end %>
+            <% sheet.with_description do %>Make changes to your profile. Click save when you're done.<% end %>
+            <div style="display:flex;flex-direction:column;gap:1rem;">
+              <div>
+                <label style="font-size:var(--ui-font-size-sm);font-weight:500;">Name</label>
+                <input type="text" value="Jane Doe" style="width:100%;padding:0.5rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius);margin-top:0.25rem;" />
+              </div>
+              <div>
+                <label style="font-size:var(--ui-font-size-sm);font-weight:500;">Email</label>
+                <input type="email" value="jane@example.com" style="width:100%;padding:0.5rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius);margin-top:0.25rem;" />
+              </div>
+              <div>
+                <label style="font-size:var(--ui-font-size-sm);font-weight:500;">Bio</label>
+                <textarea rows="3" style="width:100%;padding:0.5rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius);margin-top:0.25rem;resize:vertical;">Developer and designer.</textarea>
+              </div>
+            </div>
+            <% sheet.with_footer do %>
+              <%= render Ui::Button::Component.new(variant: :outline, data: { action: "click->ui--sheet#close" }) do %>Cancel<% end %>
+              <%= render Ui::Button::Component.new do %>Save changes<% end %>
+            <% end %>
+          <% end %>
+
+  - title: Custom Attributes
+    examples:
+      - title: Sheet with custom class
+        code: |
+          <%= render Ui::Sheet::Component.new(side: :right, class: "my-custom-sheet", data: { turbo_frame: "panel" }) do |sheet| %>
+            <% sheet.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :secondary) do %>Open<% end %>
+            <% end %>
+            <% sheet.with_title do %>Custom Sheet<% end %>
+            <p>This sheet has custom attributes applied to the wrapper.</p>
+            <% sheet.with_footer do %>
+              <%= render Ui::Button::Component.new(variant: :outline, data: { action: "click->ui--sheet#close" }) do %>Close<% end %>
+            <% end %>
+          <% end %>

data/test_app/app/components/ui/skeleton/component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Ui
+  module Skeleton
+    # Animated placeholder for loading states.
+    class Component < Ui::BaseComponent
+      attr_reader :width, :height, :rounded, :html_attrs
+
+      def initialize(width: nil, height: nil, rounded: true, **html_attrs)
+        @width = width
+        @height = height
+        @rounded = rounded
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def call
+        tag.div(**computed_attrs)
+      end
+
+      private
+
+      def computed_attrs
+        styles = []
+        styles << "width: #{width}" if width
+        styles << "height: #{height}" if height
+
+        merge_attrs(
+          {
+            class: class_names("ui-skeleton", "ui-skeleton--rounded": rounded),
+            style: styles.any? ? styles.join("; ") : nil
+          }.compact,
+          html_attrs
+        )
+      end
+    end
+  end
+end

data/test_app/app/components/ui/skeleton/preview.yml

@@ -0,0 +1,44 @@
+description: An animated placeholder block used to indicate loading states. Supports custom dimensions and optional rounded corners.
+
+sections:
+  - title: Basic
+    examples:
+      - title: Default skeleton line
+        code: |
+          <%= render Ui::Skeleton::Component.new(width: "100%", height: "1rem") %>
+
+      - title: Paragraph placeholder
+        code: |
+          <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+            <%= render Ui::Skeleton::Component.new(width: "100%", height: "1rem") %>
+            <%= render Ui::Skeleton::Component.new(width: "80%", height: "1rem") %>
+            <%= render Ui::Skeleton::Component.new(width: "60%", height: "1rem") %>
+          </div>
+
+  - title: Shapes
+    examples:
+      - title: Circle (avatar placeholder)
+        code: |
+          <%= render Ui::Skeleton::Component.new(width: "2.5rem", height: "2.5rem", style: "border-radius: 9999px;") %>
+
+      - title: Square (no rounding)
+        code: |
+          <%= render Ui::Skeleton::Component.new(width: "4rem", height: "4rem", rounded: false) %>
+
+  - title: Card Placeholder
+    examples:
+      - title: Card skeleton layout
+        code: |
+          <div style="display: flex; align-items: center; gap: 1rem;">
+            <%= render Ui::Skeleton::Component.new(width: "2.5rem", height: "2.5rem", style: "border-radius: 9999px;") %>
+            <div style="display: flex; flex-direction: column; gap: 0.5rem; flex: 1;">
+              <%= render Ui::Skeleton::Component.new(width: "50%", height: "1rem") %>
+              <%= render Ui::Skeleton::Component.new(width: "80%", height: "0.75rem") %>
+            </div>
+          </div>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom class
+        code: |
+          <%= render Ui::Skeleton::Component.new(width: "100%", height: "1rem", class: "my-skeleton") %>

data/test_app/app/components/ui/switch/component.html.erb

@@ -0,0 +1,19 @@
+<div class="ui-switch__wrapper">
+  <input
+    type="checkbox"
+    class="ui-switch__input"
+    id="<%= input_id %>"
+    <% if checked %>checked<% end %>
+    <% if html_attrs[:disabled] %>disabled<% end %>
+    <% if html_attrs[:name] %>name="<%= html_attrs[:name] %>"<% end %>
+    <% if html_attrs[:value] %>value="<%= html_attrs[:value] %>"<% end %>
+    role="switch"
+    aria-checked="<%= checked %>"
+  />
+  <label class="ui-switch" for="<%= input_id %>">
+    <span class="ui-switch__thumb"></span>
+  </label>
+  <% if label %>
+    <label class="ui-switch__label" for="<%= input_id %>"><%= label %></label>
+  <% end %>
+</div>

data/test_app/app/components/ui/switch/component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Ui
+  module Switch
+    # Toggle switch for boolean settings.
+    class Component < Ui::BaseComponent
+      attr_reader :label, :checked, :html_attrs
+
+      def initialize(label: nil, checked: false, **html_attrs)
+        @label = label
+        @checked = checked
+        @html_attrs = html_attrs
+        super()
+      end
+
+      private
+
+      def input_id
+        html_attrs[:id] || "switch_#{object_id}"
+      end
+    end
+  end
+end

data/test_app/app/components/ui/switch/preview.yml

@@ -0,0 +1,43 @@
+description: A toggle switch for boolean settings. Pure CSS implementation using a hidden checkbox and styled label. No JavaScript required.
+
+sections:
+  - title: Basic Usage
+    examples:
+      - title: Default (off)
+        code: |
+          <%= render Ui::Switch::Component.new(name: "notifications", id: "notifications") %>
+
+      - title: With label
+        code: |
+          <%= render Ui::Switch::Component.new(label: "Enable notifications", name: "notifications", id: "notif_label") %>
+
+  - title: States
+    examples:
+      - title: Checked (on)
+        code: |
+          <%= render Ui::Switch::Component.new(label: "Dark mode", checked: true, name: "dark_mode", id: "dark_mode") %>
+
+      - title: Disabled (off)
+        code: |
+          <%= render Ui::Switch::Component.new(label: "Unavailable feature", disabled: true, name: "unavailable", id: "unavailable") %>
+
+      - title: Disabled (on)
+        code: |
+          <%= render Ui::Switch::Component.new(label: "Always on", checked: true, disabled: true, name: "always_on", id: "always_on") %>
+
+  - title: Form Integration
+    examples:
+      - title: With value
+        code: |
+          <%= render Ui::Switch::Component.new(label: "Accept terms", name: "terms", value: "1", id: "terms_switch") %>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom data attributes
+        code: |
+          <%= render Ui::Switch::Component.new(
+            label: "Auto-save",
+            name: "auto_save",
+            id: "auto_save",
+            data: { controller: "settings", action: "change->settings#toggle" }
+          ) %>

data/test_app/app/components/ui/table/component.html.erb

@@ -0,0 +1,14 @@
+<div class="ui-table__wrapper">
+  <table class="ui-table" <%= tag.attributes(html_attrs) %>>
+    <% if caption? %>
+      <caption class="ui-table__caption"><%= caption %></caption>
+    <% end %>
+    <% if header? %>
+      <thead class="ui-table__head"><%= header %></thead>
+    <% end %>
+    <tbody class="ui-table__body"><%= content %></tbody>
+    <% if footer? %>
+      <tfoot class="ui-table__foot"><%= footer %></tfoot>
+    <% end %>
+  </table>
+</div>

data/test_app/app/components/ui/table/component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Ui
+  module Table
+    # Styled data table with header, body, and footer slots.
+    class Component < Ui::BaseComponent
+      renders_one :caption
+      renders_one :header
+      renders_one :footer
+
+      attr_reader :html_attrs
+
+      def initialize(**html_attrs)
+        @html_attrs = html_attrs
+        super()
+      end
+
+      private
+
+      def computed_attrs
+        merge_attrs({ class: "ui-table__wrapper" }, html_attrs)
+      end
+    end
+  end
+end

data/test_app/app/components/ui/table/preview.yml

@@ -0,0 +1,109 @@
+description: A styled data table with optional caption, header, body, and footer slots. Supports responsive horizontal scrolling.
+
+sections:
+  - title: Basic Table
+    examples:
+      - title: With header and rows
+        code: |
+          <%= render Ui::Table::Component.new do |table| %>
+            <% table.with_header do %>
+              <tr>
+                <th>Invoice</th>
+                <th>Status</th>
+                <th>Method</th>
+                <th class="text-right">Amount</th>
+              </tr>
+            <% end %>
+            <tr>
+              <td>INV-001</td>
+              <td>Paid</td>
+              <td>Credit Card</td>
+              <td class="text-right">$250.00</td>
+            </tr>
+            <tr>
+              <td>INV-002</td>
+              <td>Pending</td>
+              <td>PayPal</td>
+              <td class="text-right">$150.00</td>
+            </tr>
+            <tr>
+              <td>INV-003</td>
+              <td>Unpaid</td>
+              <td>Bank Transfer</td>
+              <td class="text-right">$350.00</td>
+            </tr>
+            <tr>
+              <td>INV-004</td>
+              <td>Paid</td>
+              <td>Credit Card</td>
+              <td class="text-right">$450.00</td>
+            </tr>
+            <tr>
+              <td>INV-005</td>
+              <td>Paid</td>
+              <td>PayPal</td>
+              <td class="text-right">$550.00</td>
+            </tr>
+          <% end %>
+
+  - title: With Caption
+    examples:
+      - title: Table with caption
+        code: |
+          <%= render Ui::Table::Component.new do |table| %>
+            <% table.with_caption do %>
+              A list of recent invoices.
+            <% end %>
+            <% table.with_header do %>
+              <tr>
+                <th>Invoice</th>
+                <th>Status</th>
+                <th class="text-right">Amount</th>
+              </tr>
+            <% end %>
+            <tr>
+              <td>INV-001</td>
+              <td>Paid</td>
+              <td class="text-right">$250.00</td>
+            </tr>
+            <tr>
+              <td>INV-002</td>
+              <td>Pending</td>
+              <td class="text-right">$150.00</td>
+            </tr>
+          <% end %>
+
+  - title: With Footer
+    examples:
+      - title: Table with footer totals
+        code: |
+          <%= render Ui::Table::Component.new do |table| %>
+            <% table.with_header do %>
+              <tr>
+                <th>Invoice</th>
+                <th>Status</th>
+                <th class="text-right">Amount</th>
+              </tr>
+            <% end %>
+            <tr>
+              <td>INV-001</td>
+              <td>Paid</td>
+              <td class="text-right">$250.00</td>
+            </tr>
+            <tr>
+              <td>INV-002</td>
+              <td>Pending</td>
+              <td class="text-right">$150.00</td>
+            </tr>
+            <tr>
+              <td>INV-003</td>
+              <td>Unpaid</td>
+              <td class="text-right">$350.00</td>
+            </tr>
+            <% table.with_footer do %>
+              <tr>
+                <td colspan="2"><strong>Total</strong></td>
+                <td class="text-right"><strong>$750.00</strong></td>
+              </tr>
+            <% end %>
+          <% end %>

data/test_app/app/components/ui/tabs/component.html.erb

@@ -0,0 +1,10 @@
+<div data-controller="ui--tabs" data-ui--tabs-default-value="<%= default_tab || tabs.first&.id %>" class="ui-tabs" <%= tag.attributes(html_attrs) %>>
+  <div class="ui-tabs__list" role="tablist">
+    <% tabs.each do |tab| %>
+      <button class="ui-tabs__trigger" role="tab" data-action="click->ui--tabs#select" data-ui--tabs-id-param="<%= tab.id %>" data-ui--tabs-target="trigger" id="tab-<%= tab.id %>" aria-controls="panel-<%= tab.id %>"><%= tab.label %></button>
+    <% end %>
+  </div>
+  <% tabs.each do |tab| %>
+    <div class="ui-tabs__panel" role="tabpanel" data-ui--tabs-target="panel" data-tab-id="<%= tab.id %>" id="panel-<%= tab.id %>" aria-labelledby="tab-<%= tab.id %>" hidden><%= tab.to_s %></div>
+  <% end %>
+</div>