uikit_rails 0.1.1

data/lib/uikit_rails/templates/components/alert_dialog/component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Ui
+  module AlertDialog
+    # Confirmation dialog that requires an explicit action to dismiss.
+    # Unlike Dialog, there is no close button — the user must choose
+    # cancel or confirm.
+    class Component < Ui::BaseComponent
+      renders_one :trigger
+      renders_one :title
+      renders_one :description
+      renders_one :cancel
+      renders_one :action
+
+      attr_reader :html_attrs
+
+      def initialize(**html_attrs)
+        @html_attrs = html_attrs
+        super()
+      end
+    end
+  end
+end

data/lib/uikit_rails/templates/components/alert_dialog/preview.yml

@@ -0,0 +1,94 @@
+description: A confirmation dialog that interrupts the user and requires an explicit response. Unlike Dialog, there is no close button or backdrop dismiss — the user must choose cancel or confirm.
+
+sections:
+  - title: Basic Alert Dialog
+    examples:
+      - title: Delete confirmation
+        code: |
+          <%= render Ui::AlertDialog::Component.new do |alert| %>
+            <% alert.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :destructive) do %>Delete Account<% end %>
+            <% end %>
+            <% alert.with_title do %>Are you absolutely sure?<% end %>
+            <% alert.with_description do %>This action cannot be undone. This will permanently delete your account and remove your data from our servers.<% end %>
+            <% alert.with_cancel do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Cancel<% end %>
+            <% end %>
+            <% alert.with_action do %>
+              <%= render Ui::Button::Component.new(variant: :destructive) do %>Yes, delete account<% end %>
+            <% end %>
+          <% end %>
+
+  - title: Various Confirmations
+    examples:
+      - title: Discard changes
+        code: |
+          <%= render Ui::AlertDialog::Component.new do |alert| %>
+            <% alert.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Discard<% end %>
+            <% end %>
+            <% alert.with_title do %>Discard changes?<% end %>
+            <% alert.with_description do %>You have unsaved changes. Are you sure you want to discard them? This cannot be undone.<% end %>
+            <% alert.with_cancel do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Keep editing<% end %>
+            <% end %>
+            <% alert.with_action do %>
+              <%= render Ui::Button::Component.new(variant: :destructive) do %>Discard<% end %>
+            <% end %>
+          <% end %>
+
+      - title: Publish confirmation
+        code: |
+          <%= render Ui::AlertDialog::Component.new do |alert| %>
+            <% alert.with_trigger do %>
+              <%= render Ui::Button::Component.new do %>Publish<% end %>
+            <% end %>
+            <% alert.with_title do %>Publish this article?<% end %>
+            <% alert.with_description do %>Once published, this article will be visible to all users. You can unpublish it later from the dashboard.<% end %>
+            <% alert.with_cancel do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Not yet<% end %>
+            <% end %>
+            <% alert.with_action do %>
+              <%= render Ui::Button::Component.new do %>Yes, publish<% end %>
+            <% end %>
+          <% end %>
+
+  - title: With Body Content
+    examples:
+      - title: Alert with additional details
+        code: |
+          <%= render Ui::AlertDialog::Component.new do |alert| %>
+            <% alert.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Remove Members<% end %>
+            <% end %>
+            <% alert.with_title do %>Remove team members?<% end %>
+            <% alert.with_description do %>The following members will lose access immediately:<% end %>
+            <ul style="list-style:disc;padding-left:1.25rem;font-size:var(--ui-font-size-sm);line-height:1.75;">
+              <li>alice@example.com</li>
+              <li>bob@example.com</li>
+            </ul>
+            <% alert.with_cancel do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Cancel<% end %>
+            <% end %>
+            <% alert.with_action do %>
+              <%= render Ui::Button::Component.new(variant: :destructive) do %>Remove<% end %>
+            <% end %>
+          <% end %>
+
+  - title: Custom Attributes
+    examples:
+      - title: Alert dialog with custom data attributes
+        code: |
+          <%= render Ui::AlertDialog::Component.new(data: { turbo_frame: "modal" }) do |alert| %>
+            <% alert.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :secondary) do %>Reset<% end %>
+            <% end %>
+            <% alert.with_title do %>Reset all settings?<% end %>
+            <% alert.with_description do %>This will restore all settings to their default values.<% end %>
+            <% alert.with_cancel do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Cancel<% end %>
+            <% end %>
+            <% alert.with_action do %>
+              <%= render Ui::Button::Component.new do %>Reset<% end %>
+            <% end %>
+          <% end %>

data/lib/uikit_rails/templates/components/avatar/USAGE

@@ -0,0 +1,20 @@
+Avatar with image:
+
+  <%= render Ui::Avatar::Component.new(src: "/avatars/user.jpg", alt: "Jane Doe") %>
+
+Fallback initials (auto-generated from alt):
+
+  <%= render Ui::Avatar::Component.new(alt: "Jane Doe") %>
+
+Custom fallback:
+
+  <%= render Ui::Avatar::Component.new(fallback: "?") %>
+
+Sizes (sm, md, lg):
+
+  <%= render Ui::Avatar::Component.new(alt: "Jane Doe", size: :sm) %>
+  <%= render Ui::Avatar::Component.new(alt: "Jane Doe", size: :lg) %>
+
+With custom attributes:
+
+  <%= render Ui::Avatar::Component.new(alt: "Jane Doe", class: "extra", data: { tooltip: "User" }) %>

data/lib/uikit_rails/templates/components/avatar/avatar.css

@@ -0,0 +1,53 @@
+/* ============================================
+ * UikitRails — Avatar
+ *
+ * Sizes: sm, md, lg
+ * ============================================ */
+
+.ui-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 9999px;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
+.ui-avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ui-avatar__fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: var(--ui-muted);
+  color: var(--ui-muted-foreground);
+  font-family: var(--ui-font-family);
+  font-weight: 500;
+}
+
+/* --- Sizes --- */
+
+.ui-avatar--sm {
+  width: 2rem;
+  height: 2rem;
+  font-size: var(--ui-font-size-xs);
+}
+
+.ui-avatar--md {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: var(--ui-font-size-sm);
+}
+
+.ui-avatar--lg {
+  width: 3.5rem;
+  height: 3.5rem;
+  font-size: var(--ui-font-size-base);
+}

data/lib/uikit_rails/templates/components/avatar/component.html.erb

@@ -0,0 +1,7 @@
+<span <%= tag.attributes(computed_attrs) %>>
+  <% if src.present? %>
+    <img class="ui-avatar__image" src="<%= src %>" alt="<%= alt %>" />
+  <% else %>
+    <span class="ui-avatar__fallback"><%= fallback %></span>
+  <% end %>
+</span>

data/lib/uikit_rails/templates/components/avatar/component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Ui
+  module Avatar
+    # Circular avatar with image or fallback initials.
+    class Component < Ui::BaseComponent
+      SIZES = %i[sm md lg].freeze
+
+      attr_reader :src, :alt, :fallback, :size, :html_attrs
+
+      def initialize(src: nil, alt: "", fallback: nil, size: :md, **html_attrs)
+        @src = src
+        @alt = alt
+        @fallback = fallback || initials_from(alt)
+        @size = size.to_sym
+        @html_attrs = html_attrs
+        super()
+      end
+
+      private
+
+      def computed_attrs
+        merge_attrs({ class: class_names("ui-avatar", "ui-avatar--#{size}") }, html_attrs)
+      end
+
+      def initials_from(name)
+        name.to_s.split(/\s+/).map { |w| w[0] }.first(2).join.upcase
+      end
+    end
+  end
+end

data/lib/uikit_rails/templates/components/avatar/preview.yml

@@ -0,0 +1,42 @@
+description: A circular avatar that displays a user image or falls back to initials derived from the alt text.
+
+sections:
+  - title: With Image
+    examples:
+      - title: Default (medium)
+        code: |
+          <%= render Ui::Avatar::Component.new(src: "https://i.pravatar.cc/80?u=jane", alt: "Jane Doe") %>
+
+      - title: Large with image
+        code: |
+          <%= render Ui::Avatar::Component.new(src: "https://i.pravatar.cc/80?u=john", alt: "John Smith", size: :lg) %>
+
+  - title: Fallback Initials
+    examples:
+      - title: Auto-generated initials from alt
+        code: |
+          <%= render Ui::Avatar::Component.new(alt: "Jane Doe") %>
+
+      - title: Custom fallback text
+        code: |
+          <%= render Ui::Avatar::Component.new(fallback: "?") %>
+
+  - title: Sizes
+    examples:
+      - title: Small
+        code: |
+          <%= render Ui::Avatar::Component.new(alt: "Alice Brown", size: :sm) %>
+
+      - title: Medium (default)
+        code: |
+          <%= render Ui::Avatar::Component.new(alt: "Alice Brown", size: :md) %>
+
+      - title: Large
+        code: |
+          <%= render Ui::Avatar::Component.new(alt: "Alice Brown", size: :lg) %>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom class and data attributes
+        code: |
+          <%= render Ui::Avatar::Component.new(alt: "Jane Doe", class: "my-avatar", data: { controller: "tooltip" }) %>

data/lib/uikit_rails/templates/components/badge/USAGE

@@ -0,0 +1,13 @@
+Basic badge:
+
+  <%= render Ui::Badge::Component.new do %>Badge<% end %>
+
+Variants (default, secondary, destructive, outline):
+
+  <%= render Ui::Badge::Component.new(variant: :secondary) do %>Secondary<% end %>
+  <%= render Ui::Badge::Component.new(variant: :destructive) do %>Error<% end %>
+  <%= render Ui::Badge::Component.new(variant: :outline) do %>Outline<% end %>
+
+With custom attributes:
+
+  <%= render Ui::Badge::Component.new(class: "extra", data: { role: "status" }) do %>Custom<% end %>

data/lib/uikit_rails/templates/components/badge/badge.css

@@ -0,0 +1,61 @@
+/* ============================================
+ * UikitRails — Badge
+ *
+ * Variants: default, secondary, destructive, outline
+ * ============================================ */
+
+.ui-badge {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-xs);
+  font-weight: 600;
+  line-height: 1;
+  padding: 0.25rem 0.625rem;
+  border: 1px solid transparent;
+  border-radius: 9999px;
+  transition:
+    background-color var(--ui-transition-speed) ease,
+    color var(--ui-transition-speed) ease;
+}
+
+.ui-badge:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: 2px;
+}
+
+/* --- Variants --- */
+
+.ui-badge--default {
+  background-color: var(--ui-primary);
+  color: var(--ui-primary-foreground);
+}
+
+.ui-badge--default:hover {
+  background-color: color-mix(in srgb, var(--ui-primary) 80%, transparent);
+}
+
+.ui-badge--secondary {
+  background-color: var(--ui-secondary);
+  color: var(--ui-secondary-foreground);
+}
+
+.ui-badge--secondary:hover {
+  background-color: color-mix(in srgb, var(--ui-secondary) 80%, transparent);
+}
+
+.ui-badge--destructive {
+  background-color: var(--ui-destructive);
+  color: var(--ui-destructive-foreground);
+}
+
+.ui-badge--destructive:hover {
+  background-color: color-mix(in srgb, var(--ui-destructive) 80%, transparent);
+}
+
+.ui-badge--outline {
+  border-color: var(--ui-border);
+  background-color: transparent;
+  color: var(--ui-foreground);
+}

data/lib/uikit_rails/templates/components/badge/component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Ui
+  module Badge
+    # Small status indicator with variant styles.
+    class Component < Ui::BaseComponent
+      VARIANTS = %i[default secondary destructive outline].freeze
+
+      attr_reader :variant, :html_attrs
+
+      def initialize(variant: :default, **html_attrs)
+        @variant = variant.to_sym
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def call
+        content_tag(:span, content, **computed_attrs)
+      end
+
+      private
+
+      def computed_attrs
+        merge_attrs({ class: class_names("ui-badge", "ui-badge--#{variant}") }, html_attrs)
+      end
+    end
+  end
+end

data/lib/uikit_rails/templates/components/badge/preview.yml

@@ -0,0 +1,38 @@
+description: A small status indicator rendered as a pill-shaped span with multiple variant styles.
+
+sections:
+  - title: Variants
+    examples:
+      - title: Default
+        code: |
+          <%= render Ui::Badge::Component.new do %>Badge<% end %>
+
+      - title: Secondary
+        code: |
+          <%= render Ui::Badge::Component.new(variant: :secondary) do %>Secondary<% end %>
+
+      - title: Destructive
+        code: |
+          <%= render Ui::Badge::Component.new(variant: :destructive) do %>Destructive<% end %>
+
+      - title: Outline
+        code: |
+          <%= render Ui::Badge::Component.new(variant: :outline) do %>Outline<% end %>
+
+  - title: Usage Examples
+    examples:
+      - title: Status indicator
+        code: |
+          <%= render Ui::Badge::Component.new(variant: :secondary) do %>In Progress<% end %>
+
+      - title: Count badge
+        code: |
+          <%= render Ui::Badge::Component.new do %>3<% end %>
+
+      - title: With custom attributes
+        code: |
+          <%= render Ui::Badge::Component.new(
+            variant: :outline,
+            class: "my-custom-badge",
+            data: { role: "status" }
+          ) do %>Custom<% end %>

data/lib/uikit_rails/templates/components/breadcrumb/USAGE

@@ -0,0 +1,23 @@
+Basic breadcrumb:
+
+  <%= 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 %>
+
+Items with href render as links. Items without href (or with current: true) render as plain text.
+
+Two-level breadcrumb:
+
+  <%= render Ui::Breadcrumb::Component.new do |bc| %>
+    <% bc.with_item(href: "/") do %>Home<% end %>
+    <% bc.with_item(current: true) do %>Dashboard<% end %>
+  <% end %>
+
+With custom attributes:
+
+  <%= render Ui::Breadcrumb::Component.new(class: "my-nav", data: { controller: "breadcrumb" }) do |bc| %>
+    <% bc.with_item(href: "/") do %>Home<% end %>
+    <% bc.with_item(current: true) do %>Page<% end %>
+  <% end %>

data/lib/uikit_rails/templates/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,55 @@
+/* ============================================
+ * UikitRails — Breadcrumb
+ *
+ * Navigation breadcrumb trail with chevron separators.
+ * ============================================ */
+
+.ui-breadcrumb {
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+}
+
+.ui-breadcrumb__list {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex-wrap: wrap;
+}
+
+.ui-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.ui-breadcrumb__link {
+  color: var(--ui-muted-foreground);
+  text-decoration: none;
+  transition: color var(--ui-transition-speed) ease;
+}
+
+.ui-breadcrumb__link:hover {
+  color: var(--ui-foreground);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+.ui-breadcrumb__link:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: 2px;
+  border-radius: var(--ui-radius);
+}
+
+.ui-breadcrumb__current {
+  color: var(--ui-foreground);
+  font-weight: 500;
+}
+
+.ui-breadcrumb__separator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--ui-muted-foreground);
+  list-style: none;
+}

data/lib/uikit_rails/templates/components/breadcrumb/component.html.erb

@@ -0,0 +1,14 @@
+<nav class="ui-breadcrumb" aria-label="Breadcrumb" <%= tag.attributes(html_attrs) %>>
+  <ol class="ui-breadcrumb__list">
+    <% items.each_with_index do |item, index| %>
+      <li class="ui-breadcrumb__item">
+        <%= item %>
+      </li>
+      <% unless index == items.size - 1 %>
+        <li class="ui-breadcrumb__separator" aria-hidden="true">
+          <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="m9 18 6-6-6-6"/></svg>
+        </li>
+      <% end %>
+    <% end %>
+  </ol>
+</nav>

data/lib/uikit_rails/templates/components/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/lib/uikit_rails/templates/components/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/lib/uikit_rails/templates/components/button/USAGE

@@ -0,0 +1,21 @@
+Basic button:
+
+  <%= render Ui::Button::Component.new do %>Click me<% end %>
+
+Variants (default, destructive, outline, secondary, ghost, link):
+
+  <%= render Ui::Button::Component.new(variant: :destructive) do %>Delete<% end %>
+  <%= render Ui::Button::Component.new(variant: :outline) do %>Cancel<% end %>
+
+Sizes (sm, md, lg, icon):
+
+  <%= render Ui::Button::Component.new(size: :sm) do %>Small<% end %>
+  <%= render Ui::Button::Component.new(size: :lg) do %>Large<% end %>
+
+As a link:
+
+  <%= render Ui::Button::Component.new(tag: :a, href: "/path") do %>Go somewhere<% end %>
+
+With custom attributes:
+
+  <%= render Ui::Button::Component.new(class: "extra", data: { turbo: false }) do %>Custom<% end %>