uikit_rails 0.1.1

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Ui
+  module Breadcrumb
+    # Navigation breadcrumb trail.
+    class Component < Ui::BaseComponent
+      renders_many :items, lambda { |href: nil, current: false, **html_attrs|
+        Item.new(href: href, current: current, **html_attrs)
+      }
+
+      attr_reader :html_attrs
+
+      def initialize(**html_attrs)
+        @html_attrs = html_attrs
+        super()
+      end
+
+      # Individual breadcrumb entry — renders as a link or current-page span.
+      class Item < Ui::BaseComponent
+        attr_reader :href, :current, :html_attrs
+
+        def initialize(href: nil, current: false, **html_attrs)
+          @href = href
+          @current = current
+          @html_attrs = html_attrs
+          super()
+        end
+
+        def call
+          if href && !current
+            content_tag(:a, content, class: "ui-breadcrumb__link", href: href, **html_attrs)
+          else
+            content_tag(:span, content, class: "ui-breadcrumb__current", "aria-current": ("page" if current),
+                                        **html_attrs)
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,42 @@
+description: A navigation breadcrumb trail showing the current page location within a hierarchy. Items can be links or plain text for the current page.
+
+sections:
+  - title: Basic Breadcrumb
+    examples:
+      - title: Simple breadcrumb trail
+        code: |
+          <%= render Ui::Breadcrumb::Component.new do |bc| %>
+            <% bc.with_item(href: "/") do %>Home<% end %>
+            <% bc.with_item(href: "/products") do %>Products<% end %>
+            <% bc.with_item(current: true) do %>Widget<% end %>
+          <% end %>
+
+  - title: Two Levels
+    examples:
+      - title: Short breadcrumb
+        code: |
+          <%= render Ui::Breadcrumb::Component.new do |bc| %>
+            <% bc.with_item(href: "/") do %>Home<% end %>
+            <% bc.with_item(current: true) do %>Dashboard<% end %>
+          <% end %>
+
+  - title: Deep Navigation
+    examples:
+      - title: Multiple levels
+        code: |
+          <%= render Ui::Breadcrumb::Component.new do |bc| %>
+            <% bc.with_item(href: "/") do %>Home<% end %>
+            <% bc.with_item(href: "/settings") do %>Settings<% end %>
+            <% bc.with_item(href: "/settings/account") do %>Account<% end %>
+            <% bc.with_item(current: true) do %>Security<% end %>
+          <% end %>
+
+  - title: All Links
+    examples:
+      - title: Without current marker
+        code: |
+          <%= render Ui::Breadcrumb::Component.new do |bc| %>
+            <% bc.with_item(href: "/") do %>Home<% end %>
+            <% bc.with_item(href: "/docs") do %>Documentation<% end %>
+            <% bc.with_item(href: "/docs/components") do %>Components<% end %>
+          <% end %>

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

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Ui
+  module Button
+    # Button component with multiple variants and sizes.
+    class Component < Ui::BaseComponent
+      VARIANTS = %i[default destructive outline secondary ghost link].freeze
+      SIZES = %i[sm md lg icon].freeze
+
+      attr_reader :variant, :size, :tag, :html_attrs
+
+      def initialize(variant: :default, size: :md, tag: :button, **html_attrs)
+        @variant = variant.to_sym
+        @size = size.to_sym
+        @tag = tag
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def call
+        content_tag(tag, content, **computed_attrs)
+      end
+
+      private
+
+      def computed_attrs
+        defaults = {
+          class: computed_classes,
+          type: (tag == :button ? "button" : nil)
+        }.compact
+
+        merge_attrs(defaults, html_attrs)
+      end
+
+      def computed_classes
+        class_names(
+          "ui-btn",
+          "ui-btn--#{variant}",
+          "ui-btn--#{size}"
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,106 @@
+description: A clickable button with multiple variants and sizes. Renders as a <button> by default or as an <a> tag for links.
+
+sections:
+  - title: Variants
+    examples:
+      - title: Default
+        code: |
+          <%= render Ui::Button::Component.new do %>
+            Click me
+          <% end %>
+
+      - title: Secondary
+        code: |
+          <%= render Ui::Button::Component.new(variant: :secondary) do %>
+            Secondary
+          <% end %>
+
+      - title: Destructive
+        code: |
+          <%= render Ui::Button::Component.new(variant: :destructive) do %>
+            Delete
+          <% end %>
+
+      - title: Outline
+        code: |
+          <%= render Ui::Button::Component.new(variant: :outline) do %>
+            Outline
+          <% end %>
+
+      - title: Ghost
+        code: |
+          <%= render Ui::Button::Component.new(variant: :ghost) do %>
+            Ghost
+          <% end %>
+
+      - title: Link
+        code: |
+          <%= render Ui::Button::Component.new(variant: :link) do %>
+            Link
+          <% end %>
+
+  - title: Sizes
+    examples:
+      - title: Small
+        code: |
+          <%= render Ui::Button::Component.new(size: :sm) do %>
+            Small
+          <% end %>
+
+      - title: Medium (default)
+        code: |
+          <%= render Ui::Button::Component.new(size: :md) do %>
+            Medium
+          <% end %>
+
+      - title: Large
+        code: |
+          <%= render Ui::Button::Component.new(size: :lg) do %>
+            Large
+          <% end %>
+
+      - title: Icon
+        code: |
+          <%= render Ui::Button::Component.new(size: :icon) do %>
+            &#9733;
+          <% end %>
+
+  - title: As a Link
+    examples:
+      - title: Link with default style
+        code: |
+          <%= render Ui::Button::Component.new(tag: :a, href: "/dashboard") do %>
+            Go to Dashboard
+          <% end %>
+
+      - title: Link with outline style
+        code: |
+          <%= render Ui::Button::Component.new(tag: :a, href: "#", variant: :outline) do %>
+            Learn more
+          <% end %>
+
+  - title: Disabled State
+    examples:
+      - title: Disabled default
+        code: |
+          <%= render Ui::Button::Component.new(disabled: true) do %>
+            Disabled
+          <% end %>
+
+      - title: Disabled destructive
+        code: |
+          <%= render Ui::Button::Component.new(variant: :destructive, disabled: true) do %>
+            Can't delete
+          <% end %>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom class and data attributes
+        code: |
+          <%= render Ui::Button::Component.new(
+            variant: :secondary,
+            class: "my-custom-class",
+            data: { turbo: false, controller: "my-controller" }
+          ) do %>
+            Custom
+          <% end %>

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

@@ -0,0 +1,16 @@
+<%= content_tag :div, **computed_attrs do %>
+  <% if header? %>
+    <div class="ui-card__header"><%= header %></div>
+  <% elsif title? || description? %>
+    <div class="ui-card__header">
+      <% if title? %><h3 class="ui-card__title"><%= title %></h3><% end %>
+      <% if description? %><p class="ui-card__description"><%= description %></p><% end %>
+    </div>
+  <% end %>
+  <% if content? %>
+    <div class="ui-card__body"><%= content %></div>
+  <% end %>
+  <% if footer? %>
+    <div class="ui-card__footer"><%= footer %></div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Ui
+  module Card
+    # Versatile container for grouping related content.
+    class Component < Ui::BaseComponent
+      renders_one :header
+      renders_one :title
+      renders_one :description
+      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-card" }, html_attrs)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,57 @@
+description: A versatile container for grouping related content with optional header, title, description, body, and footer sections.
+
+sections:
+  - title: Basic Card
+    examples:
+      - title: Simple content
+        code: |
+          <%= render Ui::Card::Component.new do |card| %>
+            <% card.with_title do %>Card Title<% end %>
+            <% card.with_description do %>A short description of the card content.<% end %>
+            <p>This is the card body content.</p>
+          <% end %>
+
+  - title: Card with Header, Title, Description & Footer
+    examples:
+      - title: Full card
+        code: |
+          <%= render Ui::Card::Component.new do |card| %>
+            <% card.with_title do %>Notifications<% end %>
+            <% card.with_description do %>You have 3 unread messages.<% end %>
+            <p>Review your latest notifications and take action.</p>
+            <% card.with_footer do %>
+              <%= render Ui::Button::Component.new(size: :sm) do %>View all<% end %>
+            <% end %>
+          <% end %>
+
+      - title: Card with custom header
+        code: |
+          <%= render Ui::Card::Component.new do |card| %>
+            <% card.with_header do %>
+              <div style="display:flex;align-items:center;justify-content:space-between;">
+                <strong>Team Members</strong>
+                <span>3 online</span>
+              </div>
+            <% end %>
+            <p>Manage your team and their permissions.</p>
+          <% end %>
+
+  - title: Card with Custom Content
+    examples:
+      - title: Custom styled card
+        code: |
+          <%= render Ui::Card::Component.new(class: "my-custom-card") do |card| %>
+            <% card.with_title do %>Settings<% end %>
+            <% card.with_description do %>Manage your account preferences.<% end %>
+            <p>Content goes here.</p>
+            <% card.with_footer do %>
+              <%= render Ui::Button::Component.new(variant: :outline, size: :sm) do %>Cancel<% end %>
+              <%= render Ui::Button::Component.new(size: :sm) do %>Save<% end %>
+            <% end %>
+          <% end %>
+
+      - title: Minimal card
+        code: |
+          <%= render Ui::Card::Component.new do %>
+            <p>A simple card with just body content and no header or footer.</p>
+          <% end %>

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

@@ -0,0 +1,6 @@
+<div class="ui-checkbox__wrapper">
+  <input <%= tag.attributes(input_attrs) %> />
+  <% if label %>
+    <label class="ui-checkbox__label" for="<%= input_id %>"><%= label %></label>
+  <% end %>
+</div>

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Ui
+  module Checkbox
+    # Styled checkbox with optional label.
+    class Component < Ui::BaseComponent
+      attr_reader :label, :html_attrs
+
+      def initialize(label: nil, **html_attrs)
+        @label = label
+        @html_attrs = html_attrs
+        super()
+      end
+
+      private
+
+      def input_attrs
+        merge_attrs({ class: "ui-checkbox", type: "checkbox" }, html_attrs)
+      end
+
+      def input_id
+        html_attrs[:id] || html_attrs[:name]
+      end
+    end
+  end
+end

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

@@ -0,0 +1,43 @@
+description: A styled checkbox with an optional label. Supports checked, disabled, and all standard HTML input attributes.
+
+sections:
+  - title: Basic Usage
+    examples:
+      - title: Without label
+        code: |
+          <%= render Ui::Checkbox::Component.new(name: "terms") %>
+
+      - title: With label
+        code: |
+          <%= render Ui::Checkbox::Component.new(label: "Accept terms and conditions", name: "terms", id: "terms") %>
+
+  - title: States
+    examples:
+      - title: Checked
+        code: |
+          <%= render Ui::Checkbox::Component.new(label: "Checked by default", checked: true, name: "notify", id: "notify") %>
+
+      - title: Disabled
+        code: |
+          <%= render Ui::Checkbox::Component.new(label: "Disabled checkbox", disabled: true, name: "disabled_cb", id: "disabled_cb") %>
+
+      - title: Disabled and checked
+        code: |
+          <%= render Ui::Checkbox::Component.new(label: "Disabled checked", disabled: true, checked: true, name: "disabled_checked", id: "disabled_checked") %>
+
+  - title: Form Integration
+    examples:
+      - title: With value
+        code: |
+          <%= render Ui::Checkbox::Component.new(label: "Subscribe to newsletter", name: "subscribe", value: "1", id: "subscribe") %>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom data attributes
+        code: |
+          <%= render Ui::Checkbox::Component.new(
+            label: "Enable feature",
+            name: "feature",
+            id: "feature",
+            data: { controller: "feature-toggle", action: "change->feature-toggle#toggle" }
+          ) %>

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

@@ -0,0 +1,8 @@
+<div data-controller="ui--collapsible" class="ui-collapsible" <%= tag.attributes(html_attrs) %>>
+  <% if trigger? %>
+    <div data-action="click->ui--collapsible#toggle" class="ui-collapsible__trigger"><%= trigger %></div>
+  <% end %>
+  <div data-ui--collapsible-target="content" class="ui-collapsible__content <%= 'ui-collapsible__content--open' if open %>">
+    <%= content %>
+  </div>
+</div>

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Ui
+  module Collapsible
+    # Expandable/collapsible content section.
+    class Component < Ui::BaseComponent
+      renders_one :trigger
+
+      attr_reader :open, :html_attrs
+
+      def initialize(open: false, **html_attrs)
+        @open = open
+        @html_attrs = html_attrs
+        super()
+      end
+    end
+  end
+end

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

@@ -0,0 +1,65 @@
+description: An expandable/collapsible content section. Click the trigger area to toggle visibility of the content below it with a smooth transition.
+
+sections:
+  - title: Basic Collapsible
+    examples:
+      - title: Simple toggle
+        code: |
+          <%= render Ui::Collapsible::Component.new do |collapsible| %>
+            <% collapsible.with_trigger do %>
+              <span>Toggle content</span>
+              <span style="font-size:var(--ui-font-size-xs);">&#9660;</span>
+            <% end %>
+            <p>This content can be shown or hidden by clicking the trigger above.</p>
+          <% end %>
+
+      - title: Open by default
+        code: |
+          <%= render Ui::Collapsible::Component.new(open: true) do |collapsible| %>
+            <% collapsible.with_trigger do %>
+              <span>Expanded by default</span>
+              <span style="font-size:var(--ui-font-size-xs);">&#9660;</span>
+            <% end %>
+            <p>This collapsible starts in the open state.</p>
+          <% end %>
+
+  - title: Collapsible with Rich Content
+    examples:
+      - title: List of items
+        code: |
+          <%= render Ui::Collapsible::Component.new do |collapsible| %>
+            <% collapsible.with_trigger do %>
+              <span style="font-weight:600;">3 tagged items</span>
+              <span style="font-size:var(--ui-font-size-xs);">&#9660;</span>
+            <% end %>
+            <div style="display:flex;flex-direction:column;gap:0.5rem;">
+              <div style="padding:0.5rem 0.75rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-size:var(--ui-font-size-sm);">@radix-ui/primitives</div>
+              <div style="padding:0.5rem 0.75rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-size:var(--ui-font-size-sm);">@radix-ui/colors</div>
+              <div style="padding:0.5rem 0.75rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-size:var(--ui-font-size-sm);">@stitches/react</div>
+            </div>
+          <% end %>
+
+  - title: Collapsible with Button Trigger
+    examples:
+      - title: Using a button as trigger
+        code: |
+          <%= render Ui::Collapsible::Component.new do |collapsible| %>
+            <% collapsible.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :outline, size: :sm) do %>Show details<% end %>
+            <% end %>
+            <div style="margin-top:0.5rem;padding:1rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-size:var(--ui-font-size-sm);">
+              <p style="margin:0;">Here are the additional details that were hidden until the button was clicked.</p>
+            </div>
+          <% end %>
+
+  - title: Custom Attributes
+    examples:
+      - title: Collapsible with custom class
+        code: |
+          <%= render Ui::Collapsible::Component.new(class: "my-faq-item", data: { section: "faq" }) do |collapsible| %>
+            <% collapsible.with_trigger do %>
+              <span>What is UikitRails?</span>
+              <span style="font-size:var(--ui-font-size-xs);">&#9660;</span>
+            <% end %>
+            <p>UikitRails is a component library for Ruby on Rails applications, providing pre-built UI components with design tokens.</p>
+          <% end %>

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

@@ -0,0 +1,23 @@
+<div data-controller="ui--dialog" <%= tag.attributes(html_attrs) %>>
+  <% if trigger? %>
+    <div data-action="click->ui--dialog#open"><%= trigger %></div>
+  <% end %>
+  <dialog class="ui-dialog" data-ui--dialog-target="dialog">
+    <div class="ui-dialog__overlay" data-action="click->ui--dialog#close"></div>
+    <div class="ui-dialog__content">
+      <% if title? || description? %>
+        <div class="ui-dialog__header">
+          <% if title? %><h2 class="ui-dialog__title"><%= title %></h2><% end %>
+          <% if description? %><p class="ui-dialog__description"><%= description %></p><% end %>
+        </div>
+      <% end %>
+      <div class="ui-dialog__body"><%= content %></div>
+      <% if footer? %>
+        <div class="ui-dialog__footer"><%= footer %></div>
+      <% end %>
+      <button class="ui-dialog__close" data-action="click->ui--dialog#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/dialog/component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Ui
+  module Dialog
+    # Modal dialog with backdrop overlay.
+    class Component < Ui::BaseComponent
+      renders_one :trigger
+      renders_one :title
+      renders_one :description
+      renders_one :footer
+
+      attr_reader :html_attrs
+
+      def initialize(**html_attrs)
+        @html_attrs = html_attrs
+        super()
+      end
+    end
+  end
+end

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

@@ -0,0 +1,77 @@
+description: A modal dialog that overlays the page with a backdrop. Uses the native HTML <dialog> element for accessibility and supports title, description, body content, and footer slots.
+
+sections:
+  - title: Basic Dialog
+    examples:
+      - title: Simple dialog with trigger
+        code: |
+          <%= render Ui::Dialog::Component.new do |dialog| %>
+            <% dialog.with_trigger do %>
+              <%= render Ui::Button::Component.new do %>Open Dialog<% end %>
+            <% end %>
+            <% dialog.with_title do %>Are you sure?<% end %>
+            <% dialog.with_description do %>This action cannot be undone.<% end %>
+            <p>This will permanently delete your account and all associated data.</p>
+            <% dialog.with_footer do %>
+              <%= render Ui::Button::Component.new(variant: :outline, data: { action: "click->ui--dialog#close" }) do %>Cancel<% end %>
+              <%= render Ui::Button::Component.new(variant: :destructive) do %>Delete<% end %>
+            <% end %>
+          <% end %>
+
+  - title: Dialog with Form
+    examples:
+      - title: Edit profile dialog
+        code: |
+          <%= render Ui::Dialog::Component.new do |dialog| %>
+            <% dialog.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Edit Profile<% end %>
+            <% end %>
+            <% dialog.with_title do %>Edit Profile<% end %>
+            <% dialog.with_description do %>Make changes to your profile here. 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>
+            <% dialog.with_footer do %>
+              <%= render Ui::Button::Component.new(variant: :outline, data: { action: "click->ui--dialog#close" }) do %>Cancel<% end %>
+              <%= render Ui::Button::Component.new do %>Save changes<% end %>
+            <% end %>
+          <% end %>
+
+  - title: Dialog without Footer
+    examples:
+      - title: Informational dialog
+        code: |
+          <%= render Ui::Dialog::Component.new do |dialog| %>
+            <% dialog.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :secondary) do %>View Details<% end %>
+            <% end %>
+            <% dialog.with_title do %>Release Notes<% end %>
+            <% dialog.with_description do %>What's new in version 2.0<% end %>
+            <ul style="list-style:disc;padding-left:1.25rem;font-size:var(--ui-font-size-sm);line-height:1.75;">
+              <li>New dialog component with native HTML dialog</li>
+              <li>Improved dropdown positioning</li>
+              <li>Alert dialog for confirmations</li>
+            </ul>
+          <% end %>
+
+  - title: Custom Attributes
+    examples:
+      - title: Dialog with custom class
+        code: |
+          <%= render Ui::Dialog::Component.new(class: "my-custom-dialog", data: { turbo_frame: "modal" }) do |dialog| %>
+            <% dialog.with_trigger do %>
+              <%= render Ui::Button::Component.new do %>Open<% end %>
+            <% end %>
+            <% dialog.with_title do %>Custom Dialog<% end %>
+            <p>This dialog has custom attributes applied to the wrapper.</p>
+            <% dialog.with_footer do %>
+              <%= render Ui::Button::Component.new(variant: :outline, data: { action: "click->ui--dialog#close" }) do %>Close<% end %>
+            <% end %>
+          <% end %>

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

@@ -0,0 +1,14 @@
+<div class="ui-dropdown" data-controller="ui--dropdown" <%= tag.attributes(html_attrs) %>>
+  <% if trigger? %>
+    <div data-action="click->ui--dropdown#toggle"><%= trigger %></div>
+  <% end %>
+  <div class="ui-dropdown__menu <%= align_class %>"
+       data-ui--dropdown-target="menu"
+       role="menu"
+       hidden>
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+    <%= content %>
+  </div>
+</div>