uikit_rails 0.1.1

data/lib/uikit_rails/templates/components/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/lib/uikit_rails/templates/components/label/label.css

@@ -0,0 +1,25 @@
+/* ============================================
+ * UikitRails — Label
+ *
+ * Form label with consistent styling.
+ * ============================================ */
+
+.ui-label {
+  display: inline-block;
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+  font-weight: 500;
+  line-height: 1;
+  color: var(--ui-foreground);
+  cursor: default;
+}
+
+.ui-label[for] {
+  cursor: pointer;
+}
+
+.ui-label--disabled,
+.ui-label[aria-disabled="true"] {
+  opacity: 0.7;
+  pointer-events: none;
+}

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

@@ -0,0 +1,45 @@
+Basic pagination:
+
+  <%= 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 %>
+
+With ellipsis for many pages:
+
+  <%= 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/4", active: true) do %>4<% end %>
+    <% pg.with_ellipsis %>
+    <% pg.with_page(href: "/page/10") do %>10<% end %>
+    <% pg.with_next_page(href: "/page/5") %>
+  <% end %>
+
+Disabled prev/next (first or last page):
+
+  <%= 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_next_page(href: "/page/2") %>
+  <% end %>
+
+Custom prev/next labels:
+
+  <%= 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 %>
+
+With custom attributes:
+
+  <%= render Ui::Pagination::Component.new(data: { controller: "pagination" }) do |pg| %>
+    <% pg.with_prev_page(href: "/page/1") %>
+    <% pg.with_page(href: "/page/2", active: true) do %>2<% end %>
+    <% pg.with_next_page(href: "/page/3") %>
+  <% end %>

data/lib/uikit_rails/templates/components/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/lib/uikit_rails/templates/components/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/lib/uikit_rails/templates/components/pagination/pagination.css

@@ -0,0 +1,89 @@
+/* ============================================
+ * UikitRails — Pagination
+ *
+ * Items: page, prev_page, next_page, ellipsis
+ * ============================================ */
+
+.ui-pagination {
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+}
+
+.ui-pagination__list {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex-wrap: wrap;
+}
+
+.ui-pagination__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  padding: 0 0.625rem;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  background-color: var(--ui-background);
+  color: var(--ui-foreground);
+  text-decoration: none;
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background-color var(--ui-transition-speed) ease,
+    color var(--ui-transition-speed) ease,
+    border-color var(--ui-transition-speed) ease;
+}
+
+.ui-pagination__item:hover {
+  background-color: var(--ui-accent);
+  color: var(--ui-accent-foreground);
+}
+
+.ui-pagination__item:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: 2px;
+}
+
+/* --- Active page --- */
+
+.ui-pagination__item--active {
+  background-color: var(--ui-primary);
+  color: var(--ui-primary-foreground);
+  border-color: var(--ui-primary);
+  pointer-events: none;
+}
+
+/* --- Disabled (prev/next) --- */
+
+.ui-pagination__item--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: default;
+}
+
+/* --- Previous / Next --- */
+
+.ui-pagination__prev,
+.ui-pagination__next {
+  padding: 0 0.75rem;
+}
+
+/* --- Ellipsis --- */
+
+.ui-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  color: var(--ui-muted-foreground);
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  cursor: default;
+}

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

@@ -0,0 +1,44 @@
+Basic popover (bottom center):
+
+  <%= render Ui::Popover::Component.new do |popover| %>
+    <% popover.with_trigger do %>
+      <%= render Ui::Button::Component.new do %>Open<% end %>
+    <% end %>
+    <p>Popover content here.</p>
+  <% end %>
+
+Side variants (top, bottom):
+
+  <%= render Ui::Popover::Component.new(side: :top) do |popover| %>
+    <% popover.with_trigger do %>Open Top<% end %>
+    <p>Content above trigger.</p>
+  <% end %>
+
+Alignment (start, center, end):
+
+  <%= render Ui::Popover::Component.new(align: :start) do |popover| %>
+    <% popover.with_trigger do %>Open<% end %>
+    <p>Aligned to left edge.</p>
+  <% end %>
+
+  <%= render Ui::Popover::Component.new(align: :end, side: :top) do |popover| %>
+    <% popover.with_trigger do %>Open<% end %>
+    <p>Above, aligned to right edge.</p>
+  <% end %>
+
+Slots:
+  trigger — Element that toggles the popover on click
+  content — Main body (default slot)
+
+Props:
+  align (start/center/end, default: center) — Horizontal alignment relative to trigger
+  side  (top/bottom, default: bottom)       — Which side the popover appears on
+
+Closes on outside click and Escape key.
+
+With custom attributes:
+
+  <%= render Ui::Popover::Component.new(class: "extra", data: { turbo: false }) do |popover| %>
+    <% popover.with_trigger do %>Open<% end %>
+    <p>Content</p>
+  <% end %>

data/lib/uikit_rails/templates/components/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/lib/uikit_rails/templates/components/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/lib/uikit_rails/templates/components/popover/popover.css

@@ -0,0 +1,94 @@
+/* ============================================
+ * UikitRails — Popover
+ *
+ * Floating content panel triggered by click.
+ * Supports side (top/bottom) and alignment
+ * (start/center/end) positioning.
+ * ============================================ */
+
+.ui-popover {
+  position: relative;
+  display: inline-block;
+  font-family: var(--ui-font-family);
+}
+
+/* --- Trigger --- */
+
+.ui-popover__trigger {
+  display: inline-flex;
+  cursor: pointer;
+}
+
+/* --- Content --- */
+
+.ui-popover__content {
+  position: absolute;
+  z-index: 50;
+  background: var(--ui-background);
+  color: var(--ui-foreground);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  padding: 1rem;
+  width: 18rem;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  font-size: var(--ui-font-size-sm);
+
+  display: none;
+  opacity: 0;
+  transform: scale(0.95);
+  transition:
+    opacity var(--ui-transition-speed) ease,
+    transform var(--ui-transition-speed) ease;
+}
+
+.ui-popover__content--open {
+  display: block;
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* --- Side: bottom (default) --- */
+
+.ui-popover__content--bottom {
+  top: 100%;
+  margin-top: 0.5rem;
+}
+
+/* --- Side: top --- */
+
+.ui-popover__content--top {
+  bottom: 100%;
+  margin-bottom: 0.5rem;
+}
+
+/* --- Align: center (default) --- */
+
+.ui-popover__content--center {
+  left: 50%;
+  transform: translateX(-50%) scale(0.95);
+}
+
+.ui-popover__content--center.ui-popover__content--open {
+  transform: translateX(-50%) scale(1);
+}
+
+/* --- Align: start --- */
+
+.ui-popover__content--start {
+  left: 0;
+}
+
+/* --- Align: end --- */
+
+.ui-popover__content--end {
+  right: 0;
+}
+
+/* --- Focus ring on content for accessibility --- */
+
+.ui-popover__content:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: 2px;
+}

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

@@ -0,0 +1,15 @@
+Basic progress bar:
+
+  <%= render Ui::Progress::Component.new(value: 45) %>
+
+Complete:
+
+  <%= render Ui::Progress::Component.new(value: 100) %>
+
+Custom max (3 of 5 steps):
+
+  <%= render Ui::Progress::Component.new(value: 3, max: 5) %>
+
+With custom attributes:
+
+  <%= render Ui::Progress::Component.new(value: 50, class: "extra", data: { controller: "upload" }) %>

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

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