uikit_rails 0.1.0

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

@@ -0,0 +1,75 @@
+description: A dropdown menu triggered by a button. Supports items, separators, and labels. Uses Stimulus for toggling with outside-click and escape-key dismissal.
+
+sections:
+  - title: Basic Dropdown
+    examples:
+      - title: Simple menu
+        code: |
+          <%= render Ui::Dropdown::Component.new do |dropdown| %>
+            <% dropdown.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Options<% end %>
+            <% end %>
+            <% dropdown.with_item do %>Profile<% end %>
+            <% dropdown.with_item do %>Settings<% end %>
+            <% dropdown.with_separator %>
+            <% dropdown.with_item do %>Log out<% end %>
+          <% end %>
+
+  - title: With Labels and Links
+    examples:
+      - title: Grouped items with label
+        code: |
+          <%= render Ui::Dropdown::Component.new do |dropdown| %>
+            <% dropdown.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>My Account<% end %>
+            <% end %>
+            <% dropdown.with_label do %>Account<% end %>
+            <% dropdown.with_item(href: "/profile") do %>Profile<% end %>
+            <% dropdown.with_item(href: "/billing") do %>Billing<% end %>
+            <% dropdown.with_separator %>
+            <% dropdown.with_label do %>Team<% end %>
+            <% dropdown.with_item(href: "/team") do %>Members<% end %>
+            <% dropdown.with_item(href: "/team/settings") do %>Team Settings<% end %>
+            <% dropdown.with_separator %>
+            <% dropdown.with_item do %>Log out<% end %>
+          <% end %>
+
+  - title: Alignment
+    examples:
+      - title: Right-aligned menu
+        code: |
+          <div style="display:flex;justify-content:flex-end;">
+            <%= render Ui::Dropdown::Component.new(align: :end) do |dropdown| %>
+              <% dropdown.with_trigger do %>
+                <%= render Ui::Button::Component.new(variant: :secondary) do %>Actions &#9662;<% end %>
+              <% end %>
+              <% dropdown.with_item do %>Edit<% end %>
+              <% dropdown.with_item do %>Duplicate<% end %>
+              <% dropdown.with_separator %>
+              <% dropdown.with_item do %>Archive<% end %>
+              <% dropdown.with_item do %>Delete<% end %>
+            <% end %>
+          </div>
+
+      - title: Left-aligned menu (default)
+        code: |
+          <%= render Ui::Dropdown::Component.new(align: :start) do |dropdown| %>
+            <% dropdown.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :ghost) do %>Menu &#9662;<% end %>
+            <% end %>
+            <% dropdown.with_item do %>New File<% end %>
+            <% dropdown.with_item do %>Open<% end %>
+            <% dropdown.with_item do %>Save<% end %>
+          <% end %>
+
+  - title: Custom Attributes
+    examples:
+      - title: Dropdown with custom data attributes
+        code: |
+          <%= render Ui::Dropdown::Component.new(class: "my-dropdown", data: { turbo: false }) do |dropdown| %>
+            <% dropdown.with_trigger do %>
+              <%= render Ui::Button::Component.new do %>More<% end %>
+            <% end %>
+            <% dropdown.with_item(data: { action: "click->my-controller#export" }) do %>Export<% end %>
+            <% dropdown.with_item(data: { action: "click->my-controller#print" }) do %>Print<% end %>
+          <% end %>

data/lib/uikit_rails/templates/components/input/USAGE

@@ -0,0 +1,21 @@
+Basic text input:
+
+  <%= render Ui::Input::Component.new(placeholder: "Enter text") %>
+
+With type:
+
+  <%= render Ui::Input::Component.new(type: "email", placeholder: "you@example.com") %>
+  <%= render Ui::Input::Component.new(type: "password", placeholder: "••••••••") %>
+  <%= render Ui::Input::Component.new(type: "number", min: 0, max: 100) %>
+
+With name and value:
+
+  <%= render Ui::Input::Component.new(name: "username", value: "john") %>
+
+Disabled:
+
+  <%= render Ui::Input::Component.new(placeholder: "Disabled", disabled: true) %>
+
+With custom attributes:
+
+  <%= render Ui::Input::Component.new(class: "extra", data: { turbo: false }) %>

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

@@ -0,0 +1,43 @@
+/* ============================================
+ * UikitRails — Input
+ *
+ * Standard text input field.
+ * ============================================ */
+
+.ui-input {
+  display: flex;
+  width: 100%;
+  height: 2.5rem;
+  padding: 0.5rem 0.75rem;
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+  line-height: 1.5;
+  color: var(--ui-foreground);
+  background-color: var(--ui-background);
+  border: 1px solid var(--ui-input);
+  border-radius: var(--ui-radius);
+  transition:
+    border-color var(--ui-transition-speed) ease,
+    box-shadow var(--ui-transition-speed) ease;
+}
+
+.ui-input::placeholder {
+  color: var(--ui-muted-foreground);
+}
+
+.ui-input:focus {
+  outline: none;
+  border-color: var(--ui-ring);
+  box-shadow: 0 0 0 1px var(--ui-ring);
+}
+
+.ui-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--ui-muted);
+}
+
+.ui-input[type="file"] {
+  padding-top: 0.375rem;
+  font-size: var(--ui-font-size-xs);
+}

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

@@ -0,0 +1,16 @@
+Basic label:
+
+  <%= render Ui::Label::Component.new do %>Email<% end %>
+
+With for attribute:
+
+  <%= render Ui::Label::Component.new(for: "email") do %>Email address<% end %>
+
+With form input:
+
+  <%= render Ui::Label::Component.new(for: "username") do %>Username<% end %>
+  <input type="text" id="username" name="username" />
+
+With custom attributes:
+
+  <%= render Ui::Label::Component.new(class: "extra", data: { required: true }) do %>Name<% end %>

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>