uikit_rails 0.1.1

data/test_app/app/components/ui/form/form.css

@@ -0,0 +1,48 @@
+/* ============================================
+ * UikitRails — Form
+ *
+ * Form layout, field groups, description, and error text.
+ * ============================================ */
+
+.ui-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.ui-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.ui-form-description {
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-muted-foreground);
+  margin: 0;
+}
+
+.ui-form-error {
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-destructive);
+  margin: 0;
+}
+
+.ui-form-field .ui-input:has(~ .ui-form-error),
+.ui-form-field .ui-textarea:has(~ .ui-form-error),
+.ui-form-field .ui-select:has(~ .ui-form-error) {
+  border-color: var(--ui-destructive);
+}
+
+.ui-form-field .ui-input:has(~ .ui-form-error):focus,
+.ui-form-field .ui-textarea:has(~ .ui-form-error):focus,
+.ui-form-field .ui-select:has(~ .ui-form-error):focus {
+  outline-color: var(--ui-destructive);
+}
+
+.ui-form-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding-top: 0.5rem;
+}

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

@@ -0,0 +1,95 @@
+description: Form builder that renders the same Ui::Input, Ui::Textarea, Ui::Select, Ui::Checkbox, Ui::Label, and Ui::Button components as standalone render calls. Styleguide previews use form_with with scope and GET for simplicity.
+
+sections:
+  - title: Basic Usage
+    examples:
+      - title: Text fields
+        code: |
+          <%= form_with url: "#", scope: :user, method: :get, builder: Ui::Form::Builder,
+                html: { class: "ui-form", style: "max-width: 24rem;" },
+                data: { turbo: false } do |f| %>
+            <div class="ui-form-field">
+              <%= f.label :name %>
+              <%= f.text_field :name, placeholder: "Your name" %>
+            </div>
+            <div class="ui-form-field">
+              <%= f.label :email %>
+              <%= f.email_field :email, placeholder: "you@example.com" %>
+            </div>
+            <div class="ui-form-field">
+              <%= f.label :password %>
+              <%= f.password_field :password, placeholder: "••••••••" %>
+            </div>
+          <% end %>
+
+      - title: Textarea
+        code: |
+          <%= form_with url: "#", scope: :user, method: :get, builder: Ui::Form::Builder,
+                html: { class: "ui-form", style: "max-width: 24rem;" },
+                data: { turbo: false } do |f| %>
+            <div class="ui-form-field">
+              <%= f.label :bio %>
+              <%= f.text_area :bio, placeholder: "Tell us about yourself...", rows: 3 %>
+            </div>
+          <% end %>
+
+      - title: Select
+        code: |
+          <%= form_with url: "#", scope: :user, method: :get, builder: Ui::Form::Builder,
+                html: { class: "ui-form", style: "max-width: 24rem;" },
+                data: { turbo: false } do |f| %>
+            <div class="ui-form-field">
+              <%= f.label :role %>
+              <%= f.select :role, %w[Admin Editor Viewer] %>
+            </div>
+          <% end %>
+
+      - title: Checkbox
+        code: |
+          <%= form_with url: "#", scope: :settings, method: :get, builder: Ui::Form::Builder,
+                html: { class: "ui-form", style: "max-width: 24rem;" },
+                data: { turbo: false } do |f| %>
+            <%= f.check_box :terms, label: "I agree to the terms and conditions" %>
+            <%= f.check_box :newsletter, label: "Subscribe to newsletter" %>
+          <% end %>
+
+  - title: Submit
+    examples:
+      - title: Variants
+        code: |
+          <%= form_with url: "#", scope: :user, method: :get, builder: Ui::Form::Builder,
+                data: { turbo: false } do |f| %>
+            <div style="display: flex; gap: 0.5rem;">
+              <%= f.submit "Save changes" %>
+              <%= f.submit "Delete", variant: :destructive %>
+              <%= f.submit "Cancel", variant: :outline %>
+            </div>
+          <% end %>
+
+  - title: Description
+    examples:
+      - title: Help text
+        code: |
+          <%= form_with url: "#", scope: :user, method: :get, builder: Ui::Form::Builder,
+                html: { class: "ui-form", style: "max-width: 24rem;" },
+                data: { turbo: false } do |f| %>
+            <div class="ui-form-field">
+              <%= f.label :email %>
+              <%= f.email_field :email, placeholder: "you@example.com" %>
+              <p class="ui-form-description">We'll never share your email with anyone.</p>
+            </div>
+          <% end %>
+
+  - title: Error State
+    examples:
+      - title: Inline error
+        code: |
+          <%= form_with url: "#", scope: :user, method: :get, builder: Ui::Form::Builder,
+                html: { class: "ui-form", style: "max-width: 24rem;" },
+                data: { turbo: false } do |f| %>
+            <div class="ui-form-field">
+              <%= f.label :email %>
+              <%= f.email_field :email, placeholder: "you@example.com" %>
+              <p class="ui-form-error">Email is already taken</p>
+            </div>
+          <% end %>

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Ui
+  module Input
+    # Text input field with consistent styling.
+    class Component < Ui::BaseComponent
+      attr_reader :html_attrs
+
+      def initialize(**html_attrs)
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def call
+        tag.input(**computed_attrs)
+      end
+
+      private
+
+      def computed_attrs
+        merge_attrs({ class: "ui-input", type: "text" }, html_attrs)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,58 @@
+description: A styled text input field. Supports all standard HTML input attributes including type, placeholder, disabled, and name.
+
+sections:
+  - title: Basic Usage
+    examples:
+      - title: Default text input
+        code: |
+          <%= render Ui::Input::Component.new(placeholder: "Enter your name") %>
+
+      - title: With name attribute
+        code: |
+          <%= render Ui::Input::Component.new(name: "email", placeholder: "you@example.com") %>
+
+  - title: Input Types
+    examples:
+      - title: Email
+        code: |
+          <%= render Ui::Input::Component.new(type: "email", placeholder: "you@example.com") %>
+
+      - title: Password
+        code: |
+          <%= render Ui::Input::Component.new(type: "password", placeholder: "••••••••") %>
+
+      - title: Number
+        code: |
+          <%= render Ui::Input::Component.new(type: "number", placeholder: "0", min: 0, max: 100) %>
+
+      - title: Search
+        code: |
+          <%= render Ui::Input::Component.new(type: "search", placeholder: "Search...") %>
+
+      - title: File
+        code: |
+          <%= render Ui::Input::Component.new(type: "file") %>
+
+  - title: States
+    examples:
+      - title: Disabled
+        code: |
+          <%= render Ui::Input::Component.new(placeholder: "Disabled input", disabled: true) %>
+
+      - title: With value
+        code: |
+          <%= render Ui::Input::Component.new(value: "Pre-filled value") %>
+
+      - title: Required
+        code: |
+          <%= render Ui::Input::Component.new(placeholder: "Required field", required: true) %>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom class and data attributes
+        code: |
+          <%= render Ui::Input::Component.new(
+            placeholder: "Custom",
+            class: "my-custom-class",
+            data: { controller: "input-validator" }
+          ) %>

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Ui
+  module Label
+    # Form label with consistent styling.
+    class Component < Ui::BaseComponent
+      attr_reader :html_attrs
+
+      def initialize(**html_attrs)
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def call
+        content_tag(:label, content, **computed_attrs)
+      end
+
+      private
+
+      def computed_attrs
+        merge_attrs({ class: "ui-label" }, html_attrs)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,34 @@
+description: A form label element with consistent styling. Accepts a `for` attribute to associate with an input.
+
+sections:
+  - title: Basic Label
+    examples:
+      - title: Default
+        code: |
+          <%= render Ui::Label::Component.new do %>Email<% end %>
+
+      - title: With for attribute
+        code: |
+          <%= render Ui::Label::Component.new(for: "email") do %>Email address<% end %>
+
+  - title: Usage with Form Inputs
+    examples:
+      - title: Label with text input
+        code: |
+          <%= render Ui::Label::Component.new(for: "username") do %>Username<% end %>
+          <input type="text" id="username" name="username" />
+
+      - title: Label with required field
+        code: |
+          <%= render Ui::Label::Component.new(for: "password") do %>Password <span aria-hidden="true">*</span><% end %>
+          <input type="password" id="password" name="password" required />
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom class and data attributes
+        code: |
+          <%= render Ui::Label::Component.new(
+            for: "name",
+            class: "my-custom-label",
+            data: { required: true }
+          ) do %>Full Name<% end %>

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

@@ -0,0 +1,7 @@
+<nav class="ui-pagination" aria-label="Pagination" <%= tag.attributes(html_attrs) %>>
+  <ul class="ui-pagination__list">
+    <% items.each do |item| %>
+      <li><%= item %></li>
+    <% end %>
+  </ul>
+</nav>

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

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module Ui
+  module Pagination
+    # Page navigation with previous, next, and page links.
+    class Component < Ui::BaseComponent
+      renders_many :items, types: {
+        page: { renders: lambda { |href: "#", active: false, **attrs|
+          PageItem.new(href: href, active: active, **attrs)
+        }, as: :page },
+        prev_page: { renders: lambda { |href: "#", disabled: false, **attrs|
+          PrevItem.new(href: href, disabled: disabled, **attrs)
+        }, as: :prev_page },
+        next_page: { renders: lambda { |href: "#", disabled: false, **attrs|
+          NextItem.new(href: href, disabled: disabled, **attrs)
+        }, as: :next_page },
+        ellipsis: { renders: -> { EllipsisItem.new }, as: :ellipsis }
+      }
+
+      attr_reader :html_attrs
+
+      def initialize(**html_attrs)
+        @html_attrs = html_attrs
+        super()
+      end
+
+      class PageItem < Ui::BaseComponent
+        attr_reader :href, :active, :html_attrs
+
+        def initialize(href: "#", active: false, **html_attrs)
+          @href = href
+          @active = active
+          @html_attrs = html_attrs
+          super()
+        end
+
+        def call
+          content_tag(:a, content, class: class_names("ui-pagination__item", "ui-pagination__item--active": active),
+                                   href: href, "aria-current": ("page" if active), **html_attrs)
+        end
+      end
+
+      class PrevItem < Ui::BaseComponent
+        attr_reader :href, :disabled, :html_attrs
+
+        def initialize(href: "#", disabled: false, **html_attrs)
+          @href = href
+          @disabled = disabled
+          @html_attrs = html_attrs
+          super()
+        end
+
+        def call
+          classes = class_names("ui-pagination__item ui-pagination__prev", "ui-pagination__item--disabled": disabled)
+          if disabled
+            content_tag(:span, content.presence || "Previous", class: classes, "aria-disabled": "true", **html_attrs)
+          else
+            content_tag(:a, content.presence || "Previous", class: classes, href: href, **html_attrs)
+          end
+        end
+      end
+
+      class NextItem < Ui::BaseComponent
+        attr_reader :href, :disabled, :html_attrs
+
+        def initialize(href: "#", disabled: false, **html_attrs)
+          @href = href
+          @disabled = disabled
+          @html_attrs = html_attrs
+          super()
+        end
+
+        def call
+          classes = class_names("ui-pagination__item ui-pagination__next", "ui-pagination__item--disabled": disabled)
+          if disabled
+            content_tag(:span, content.presence || "Next", class: classes, "aria-disabled": "true", **html_attrs)
+          else
+            content_tag(:a, content.presence || "Next", class: classes, href: href, **html_attrs)
+          end
+        end
+      end
+
+      class EllipsisItem < Ui::BaseComponent
+        def call
+          content_tag(:span, "…", class: "ui-pagination__ellipsis")
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,61 @@
+description: Page navigation with previous/next buttons, page numbers, and ellipsis indicators. Compose the pagination using slot items for full flexibility.
+
+sections:
+  - title: Basic Pagination
+    examples:
+      - title: Simple page navigation
+        code: |
+          <%= render Ui::Pagination::Component.new do |pg| %>
+            <% pg.with_prev_page(href: "/page/1") %>
+            <% pg.with_page(href: "/page/1") do %>1<% end %>
+            <% pg.with_page(href: "/page/2", active: true) do %>2<% end %>
+            <% pg.with_page(href: "/page/3") do %>3<% end %>
+            <% pg.with_next_page(href: "/page/3") %>
+          <% end %>
+
+  - title: With Ellipsis
+    examples:
+      - title: Many pages with ellipsis
+        code: |
+          <%= render Ui::Pagination::Component.new do |pg| %>
+            <% pg.with_prev_page(href: "/page/3") %>
+            <% pg.with_page(href: "/page/1") do %>1<% end %>
+            <% pg.with_ellipsis %>
+            <% pg.with_page(href: "/page/3") do %>3<% end %>
+            <% pg.with_page(href: "/page/4", active: true) do %>4<% end %>
+            <% pg.with_page(href: "/page/5") do %>5<% end %>
+            <% pg.with_ellipsis %>
+            <% pg.with_page(href: "/page/10") do %>10<% end %>
+            <% pg.with_next_page(href: "/page/5") %>
+          <% end %>
+
+  - title: Disabled States
+    examples:
+      - title: First page (previous disabled)
+        code: |
+          <%= render Ui::Pagination::Component.new do |pg| %>
+            <% pg.with_prev_page(disabled: true) %>
+            <% pg.with_page(href: "/page/1", active: true) do %>1<% end %>
+            <% pg.with_page(href: "/page/2") do %>2<% end %>
+            <% pg.with_page(href: "/page/3") do %>3<% end %>
+            <% pg.with_next_page(href: "/page/2") %>
+          <% end %>
+
+      - title: Last page (next disabled)
+        code: |
+          <%= render Ui::Pagination::Component.new do |pg| %>
+            <% pg.with_prev_page(href: "/page/4") %>
+            <% pg.with_page(href: "/page/3") do %>3<% end %>
+            <% pg.with_page(href: "/page/4") do %>4<% end %>
+            <% pg.with_page(href: "/page/5", active: true) do %>5<% end %>
+            <% pg.with_next_page(disabled: true) %>
+          <% end %>
+
+  - title: Prev/Next Only
+    examples:
+      - title: Without page numbers
+        code: |
+          <%= render Ui::Pagination::Component.new do |pg| %>
+            <% pg.with_prev_page(href: "/page/2") do %>← Older<% end %>
+            <% pg.with_next_page(href: "/page/4") do %>Newer →<% end %>
+          <% end %>

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

@@ -0,0 +1,8 @@
+<div data-controller="ui--popover" class="ui-popover" <%= tag.attributes(html_attrs) %>>
+  <% if trigger? %>
+    <div data-action="click->ui--popover#toggle" class="ui-popover__trigger"><%= trigger %></div>
+  <% end %>
+  <div data-ui--popover-target="content" class="ui-popover__content ui-popover__content--<%= side %> ui-popover__content--<%= align %>">
+    <%= content %>
+  </div>
+</div>

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Ui
+  module Popover
+    # Floating content panel triggered by click.
+    class Component < Ui::BaseComponent
+      renders_one :trigger
+
+      attr_reader :align, :side, :html_attrs
+
+      def initialize(align: :center, side: :bottom, **html_attrs)
+        @align = align.to_sym
+        @side = side.to_sym
+        @html_attrs = html_attrs
+        super()
+      end
+    end
+  end
+end

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

@@ -0,0 +1,102 @@
+description: A floating content panel that appears on click. Unlike dropdowns which are for menu items, popovers are for richer content like forms, info panels, and settings. Supports side and alignment positioning.
+
+sections:
+  - title: Basic Popover
+    examples:
+      - title: Default (bottom, center)
+        code: |
+          <%= render Ui::Popover::Component.new do |popover| %>
+            <% popover.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Open Popover<% end %>
+            <% end %>
+            <div style="display:flex;flex-direction:column;gap:0.5rem;">
+              <h4 style="margin:0;font-size:var(--ui-font-size-sm);font-weight:600;">Dimensions</h4>
+              <p style="margin:0;font-size:var(--ui-font-size-xs);color:var(--ui-muted-foreground);">Set the dimensions for the layer.</p>
+              <div style="display:flex;gap:0.5rem;">
+                <input type="text" placeholder="Width" style="flex:1;padding:0.375rem 0.5rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-size:var(--ui-font-size-sm);" />
+                <input type="text" placeholder="Height" style="flex:1;padding:0.375rem 0.5rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-size:var(--ui-font-size-sm);" />
+              </div>
+            </div>
+          <% end %>
+
+  - title: Alignment
+    examples:
+      - title: Align start
+        code: |
+          <%= render Ui::Popover::Component.new(align: :start) do |popover| %>
+            <% popover.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :outline, size: :sm) do %>Align Start<% end %>
+            <% end %>
+            <p style="margin:0;">This popover is aligned to the start (left edge) of the trigger.</p>
+          <% end %>
+
+      - title: Align end
+        code: |
+          <div style="display:flex;justify-content:flex-end;">
+            <%= render Ui::Popover::Component.new(align: :end) do |popover| %>
+              <% popover.with_trigger do %>
+                <%= render Ui::Button::Component.new(variant: :outline, size: :sm) do %>Align End<% end %>
+              <% end %>
+              <p style="margin:0;">This popover is aligned to the end (right edge) of the trigger.</p>
+            <% end %>
+          </div>
+
+  - title: Side Variants
+    examples:
+      - title: Top side
+        code: |
+          <div style="margin-top:12rem;">
+            <%= render Ui::Popover::Component.new(side: :top) do |popover| %>
+              <% popover.with_trigger do %>
+                <%= render Ui::Button::Component.new(variant: :outline) do %>Open Top<% end %>
+              <% end %>
+              <p style="margin:0;">This popover appears above the trigger.</p>
+            <% end %>
+          </div>
+
+      - title: Top with start alignment
+        code: |
+          <div style="margin-top:12rem;">
+            <%= render Ui::Popover::Component.new(side: :top, align: :start) do |popover| %>
+              <% popover.with_trigger do %>
+                <%= render Ui::Button::Component.new(variant: :outline) do %>Top Start<% end %>
+              <% end %>
+              <p style="margin:0;">Appears above, aligned to the left edge.</p>
+            <% end %>
+          </div>
+
+  - title: Popover with Form Content
+    examples:
+      - title: Settings popover
+        code: |
+          <%= render Ui::Popover::Component.new(align: :start) do |popover| %>
+            <% popover.with_trigger do %>
+              <%= render Ui::Button::Component.new do %>Settings<% end %>
+            <% end %>
+            <div style="display:flex;flex-direction:column;gap:0.75rem;">
+              <h4 style="margin:0;font-size:var(--ui-font-size-sm);font-weight:600;">Layout Settings</h4>
+              <div>
+                <label style="font-size:var(--ui-font-size-xs);font-weight:500;">Grid columns</label>
+                <input type="number" value="3" min="1" max="6" style="width:100%;padding:0.375rem 0.5rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-size:var(--ui-font-size-sm);margin-top:0.25rem;" />
+              </div>
+              <div>
+                <label style="font-size:var(--ui-font-size-xs);font-weight:500;">Spacing</label>
+                <select style="width:100%;padding:0.375rem 0.5rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-size:var(--ui-font-size-sm);margin-top:0.25rem;">
+                  <option>Compact</option>
+                  <option selected>Comfortable</option>
+                  <option>Spacious</option>
+                </select>
+              </div>
+            </div>
+          <% end %>
+
+  - title: Custom Attributes
+    examples:
+      - title: Popover with custom class
+        code: |
+          <%= render Ui::Popover::Component.new(class: "my-custom-popover", data: { turbo_frame: "settings" }) do |popover| %>
+            <% popover.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :secondary) do %>Custom<% end %>
+            <% end %>
+            <p style="margin:0;">Popover with custom wrapper attributes.</p>
+          <% end %>

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

@@ -0,0 +1,3 @@
+<div <%= tag.attributes(computed_attrs) %>>
+  <div class="ui-progress__bar" style="width: <%= percentage %>%;"></div>
+</div>

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

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Ui
+  module Progress
+    # Progress bar showing completion percentage.
+    class Component < Ui::BaseComponent
+      attr_reader :value, :max, :html_attrs
+
+      def initialize(value: 0, max: 100, **html_attrs)
+        @value = value.to_i
+        @max = max.to_i
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def percentage
+        return 0 if max.zero?
+
+        [(value.to_f / max * 100).round, 100].min
+      end
+
+      private
+
+      def computed_attrs
+        merge_attrs(
+          {
+            class: "ui-progress",
+            role: "progressbar",
+            "aria-valuenow": value,
+            "aria-valuemin": 0,
+            "aria-valuemax": max
+          },
+          html_attrs
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,44 @@
+description: An accessible progress bar that visually indicates completion percentage. Includes ARIA attributes for screen readers and smooth width transitions.
+
+sections:
+  - title: Basic Usage
+    examples:
+      - title: Empty (0%)
+        code: |
+          <%= render Ui::Progress::Component.new(value: 0) %>
+
+      - title: Partial (45%)
+        code: |
+          <%= render Ui::Progress::Component.new(value: 45) %>
+
+      - title: Complete (100%)
+        code: |
+          <%= render Ui::Progress::Component.new(value: 100) %>
+
+  - title: Custom Max
+    examples:
+      - title: 3 of 5 steps
+        code: |
+          <%= render Ui::Progress::Component.new(value: 3, max: 5) %>
+
+      - title: 7 of 10 items
+        code: |
+          <%= render Ui::Progress::Component.new(value: 7, max: 10) %>
+
+  - title: With Labels
+    examples:
+      - title: Progress with percentage label
+        code: |
+          <div style="display: flex; flex-direction: column; gap: 0.25rem;">
+            <div style="display: flex; justify-content: space-between; font-size: 0.875rem;">
+              <span>Uploading…</span>
+              <span>65%</span>
+            </div>
+            <%= render Ui::Progress::Component.new(value: 65) %>
+          </div>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom class and data attributes
+        code: |
+          <%= render Ui::Progress::Component.new(value: 50, class: "my-progress", data: { controller: "upload" }) %>