uikit_rails 0.1.1

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

@@ -0,0 +1,109 @@
+description: A styled data table with optional caption, header, body, and footer slots. Supports responsive horizontal scrolling.
+
+sections:
+  - title: Basic Table
+    examples:
+      - title: With header and rows
+        code: |
+          <%= render Ui::Table::Component.new do |table| %>
+            <% table.with_header do %>
+              <tr>
+                <th>Invoice</th>
+                <th>Status</th>
+                <th>Method</th>
+                <th class="text-right">Amount</th>
+              </tr>
+            <% end %>
+            <tr>
+              <td>INV-001</td>
+              <td>Paid</td>
+              <td>Credit Card</td>
+              <td class="text-right">$250.00</td>
+            </tr>
+            <tr>
+              <td>INV-002</td>
+              <td>Pending</td>
+              <td>PayPal</td>
+              <td class="text-right">$150.00</td>
+            </tr>
+            <tr>
+              <td>INV-003</td>
+              <td>Unpaid</td>
+              <td>Bank Transfer</td>
+              <td class="text-right">$350.00</td>
+            </tr>
+            <tr>
+              <td>INV-004</td>
+              <td>Paid</td>
+              <td>Credit Card</td>
+              <td class="text-right">$450.00</td>
+            </tr>
+            <tr>
+              <td>INV-005</td>
+              <td>Paid</td>
+              <td>PayPal</td>
+              <td class="text-right">$550.00</td>
+            </tr>
+          <% end %>
+
+  - title: With Caption
+    examples:
+      - title: Table with caption
+        code: |
+          <%= render Ui::Table::Component.new do |table| %>
+            <% table.with_caption do %>
+              A list of recent invoices.
+            <% end %>
+            <% table.with_header do %>
+              <tr>
+                <th>Invoice</th>
+                <th>Status</th>
+                <th class="text-right">Amount</th>
+              </tr>
+            <% end %>
+            <tr>
+              <td>INV-001</td>
+              <td>Paid</td>
+              <td class="text-right">$250.00</td>
+            </tr>
+            <tr>
+              <td>INV-002</td>
+              <td>Pending</td>
+              <td class="text-right">$150.00</td>
+            </tr>
+          <% end %>
+
+  - title: With Footer
+    examples:
+      - title: Table with footer totals
+        code: |
+          <%= render Ui::Table::Component.new do |table| %>
+            <% table.with_header do %>
+              <tr>
+                <th>Invoice</th>
+                <th>Status</th>
+                <th class="text-right">Amount</th>
+              </tr>
+            <% end %>
+            <tr>
+              <td>INV-001</td>
+              <td>Paid</td>
+              <td class="text-right">$250.00</td>
+            </tr>
+            <tr>
+              <td>INV-002</td>
+              <td>Pending</td>
+              <td class="text-right">$150.00</td>
+            </tr>
+            <tr>
+              <td>INV-003</td>
+              <td>Unpaid</td>
+              <td class="text-right">$350.00</td>
+            </tr>
+            <% table.with_footer do %>
+              <tr>
+                <td colspan="2"><strong>Total</strong></td>
+                <td class="text-right"><strong>$750.00</strong></td>
+              </tr>
+            <% end %>
+          <% end %>

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

@@ -0,0 +1,86 @@
+/* ============================================
+ * UikitRails — Table
+ *
+ * Slots: caption, header, body (content), footer
+ * ============================================ */
+
+.ui-table__wrapper {
+  overflow-x: auto;
+  width: 100%;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+}
+
+.ui-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-foreground);
+  background-color: var(--ui-background);
+}
+
+.ui-table__caption {
+  padding: 0.75rem 1rem;
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-muted-foreground);
+  text-align: left;
+  caption-side: bottom;
+}
+
+/* --- Head --- */
+
+.ui-table__head {
+  border-bottom: 1px solid var(--ui-border);
+}
+
+.ui-table__head tr {
+  border-bottom: 1px solid var(--ui-border);
+}
+
+.ui-table__head th {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  font-weight: 500;
+  color: var(--ui-muted-foreground);
+  white-space: nowrap;
+}
+
+/* --- Body --- */
+
+.ui-table__body tr {
+  border-bottom: 1px solid var(--ui-border);
+  transition: background-color var(--ui-transition-speed) ease;
+}
+
+.ui-table__body tr:last-child {
+  border-bottom: none;
+}
+
+.ui-table__body tr:nth-child(even) {
+  background-color: color-mix(in srgb, var(--ui-muted) 40%, transparent);
+}
+
+.ui-table__body tr:hover {
+  background-color: color-mix(in srgb, var(--ui-muted) 60%, transparent);
+}
+
+.ui-table__body td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  vertical-align: middle;
+}
+
+/* --- Foot --- */
+
+.ui-table__foot {
+  border-top: 1px solid var(--ui-border);
+}
+
+.ui-table__foot td,
+.ui-table__foot th {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  font-weight: 500;
+  color: var(--ui-muted-foreground);
+}

data/lib/uikit_rails/templates/components/tabs/USAGE

@@ -0,0 +1,24 @@
+Basic tabs:
+
+  <%= render Ui::Tabs::Component.new do |tabs| %>
+    <% tabs.with_tab(id: "one", label: "Tab One") do %>
+      <p>Content for tab one.</p>
+    <% end %>
+    <% tabs.with_tab(id: "two", label: "Tab Two") do %>
+      <p>Content for tab two.</p>
+    <% end %>
+  <% end %>
+
+With a default active tab:
+
+  <%= render Ui::Tabs::Component.new(default_tab: "two") do |tabs| %>
+    <% tabs.with_tab(id: "one", label: "Tab One") do %>First<% end %>
+    <% tabs.with_tab(id: "two", label: "Tab Two") do %>Second (active)<% end %>
+  <% end %>
+
+With custom attributes:
+
+  <%= render Ui::Tabs::Component.new(class: "extra", data: { turbo: false }) do |tabs| %>
+    <% tabs.with_tab(id: "a", label: "A") do %>Content A<% end %>
+    <% tabs.with_tab(id: "b", label: "B") do %>Content B<% end %>
+  <% end %>

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

@@ -0,0 +1,10 @@
+<div data-controller="ui--tabs" data-ui--tabs-default-value="<%= default_tab || tabs.first&.id %>" class="ui-tabs" <%= tag.attributes(html_attrs) %>>
+  <div class="ui-tabs__list" role="tablist">
+    <% tabs.each do |tab| %>
+      <button class="ui-tabs__trigger" role="tab" data-action="click->ui--tabs#select" data-ui--tabs-id-param="<%= tab.id %>" data-ui--tabs-target="trigger" id="tab-<%= tab.id %>" aria-controls="panel-<%= tab.id %>"><%= tab.label %></button>
+    <% end %>
+  </div>
+  <% tabs.each do |tab| %>
+    <div class="ui-tabs__panel" role="tabpanel" data-ui--tabs-target="panel" data-tab-id="<%= tab.id %>" id="panel-<%= tab.id %>" aria-labelledby="tab-<%= tab.id %>" hidden><%= tab.to_s %></div>
+  <% end %>
+</div>

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

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Ui
+  module Tabs
+    # Tabbed content panels.
+    class Component < Ui::BaseComponent
+      renders_many :tabs, lambda { |id:, label:, **html_attrs|
+        Tab.new(id: id, label: label, **html_attrs)
+      }
+
+      attr_reader :default_tab, :html_attrs
+
+      def initialize(default_tab: nil, **html_attrs)
+        @default_tab = default_tab
+        @html_attrs = html_attrs
+        super()
+      end
+
+      class Tab < Ui::BaseComponent
+        attr_reader :id, :label, :html_attrs
+
+        def initialize(id:, label:, **html_attrs)
+          @id = id
+          @label = label
+          @html_attrs = html_attrs
+          super()
+        end
+
+        def call
+          content
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,60 @@
+description: Tabbed content panels for organizing related content into switchable views. Supports keyboard navigation and ARIA roles.
+
+sections:
+  - title: Basic Tabs
+    examples:
+      - title: Default tabs
+        code: |
+          <%= render Ui::Tabs::Component.new do |tabs| %>
+            <% tabs.with_tab(id: "account", label: "Account") do %>
+              <p>Manage your account settings and preferences.</p>
+            <% end %>
+            <% tabs.with_tab(id: "password", label: "Password") do %>
+              <p>Change your password and security settings.</p>
+            <% end %>
+            <% tabs.with_tab(id: "notifications", label: "Notifications") do %>
+              <p>Configure how you receive notifications.</p>
+            <% end %>
+          <% end %>
+
+  - title: Default Active Tab
+    examples:
+      - title: Second tab active by default
+        code: |
+          <%= render Ui::Tabs::Component.new(default_tab: "password") do |tabs| %>
+            <% tabs.with_tab(id: "account", label: "Account") do %>
+              <p>Account details go here.</p>
+            <% end %>
+            <% tabs.with_tab(id: "password", label: "Password") do %>
+              <p>Password settings are shown first.</p>
+            <% end %>
+          <% end %>
+
+  - title: Rich Content
+    examples:
+      - title: Tabs with forms and actions
+        code: |
+          <%= render Ui::Tabs::Component.new do |tabs| %>
+            <% tabs.with_tab(id: "profile", label: "Profile") do %>
+              <div style="max-width: 24rem;">
+                <p style="margin-bottom: 1rem;">Update your profile information.</p>
+                <%= render Ui::Button::Component.new(size: :sm) do %>Save Changes<% end %>
+              </div>
+            <% end %>
+            <% tabs.with_tab(id: "billing", label: "Billing") do %>
+              <p>View and manage your billing information and invoices.</p>
+            <% end %>
+          <% end %>
+
+  - title: Custom Attributes
+    examples:
+      - title: With custom class
+        code: |
+          <%= render Ui::Tabs::Component.new(class: "my-custom-tabs", data: { turbo: false }) do |tabs| %>
+            <% tabs.with_tab(id: "tab1", label: "First") do %>
+              <p>First tab content.</p>
+            <% end %>
+            <% tabs.with_tab(id: "tab2", label: "Second") do %>
+              <p>Second tab content.</p>
+            <% end %>
+          <% end %>

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

@@ -0,0 +1,72 @@
+/* ============================================
+ * UikitRails — Tabs
+ *
+ * Tabbed content panels with accessible roles
+ * and keyboard-friendly triggers.
+ * ============================================ */
+
+.ui-tabs {
+  font-family: var(--ui-font-family);
+  width: 100%;
+}
+
+/* --- Tab List --- */
+
+.ui-tabs__list {
+  display: flex;
+  border-bottom: 1px solid var(--ui-border);
+  gap: 0;
+}
+
+/* --- Trigger --- */
+
+.ui-tabs__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.625rem 1rem;
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+  font-weight: 500;
+  color: var(--ui-muted-foreground);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    color var(--ui-transition-speed) ease,
+    border-color var(--ui-transition-speed) ease;
+}
+
+.ui-tabs__trigger:hover {
+  color: var(--ui-foreground);
+}
+
+.ui-tabs__trigger:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: -2px;
+  border-radius: 2px;
+}
+
+.ui-tabs__trigger--active {
+  color: var(--ui-foreground);
+  border-bottom-color: var(--ui-primary);
+}
+
+/* --- Panel --- */
+
+.ui-tabs__panel {
+  padding-top: 1rem;
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-foreground);
+}
+
+.ui-tabs__panel[hidden] {
+  display: none;
+}
+
+.ui-tabs__panel--active {
+  display: block;
+}

data/lib/uikit_rails/templates/components/textarea/USAGE

@@ -0,0 +1,19 @@
+Basic textarea:
+
+  <%= render Ui::Textarea::Component.new(placeholder: "Type here...") %>
+
+With rows:
+
+  <%= render Ui::Textarea::Component.new(rows: 6, placeholder: "Write something...") %>
+
+With pre-filled content:
+
+  <%= render Ui::Textarea::Component.new(name: "bio") do %>Existing content<% end %>
+
+Disabled:
+
+  <%= render Ui::Textarea::Component.new(placeholder: "Disabled", disabled: true) %>
+
+With custom attributes:
+
+  <%= render Ui::Textarea::Component.new(class: "extra", maxlength: 500) %>

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Ui
+  module Textarea
+    # Multi-line text input field.
+    class Component < Ui::BaseComponent
+      attr_reader :html_attrs
+
+      def initialize(**html_attrs)
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def call
+        content_tag(:textarea, content, **computed_attrs)
+      end
+
+      private
+
+      def computed_attrs
+        merge_attrs({ class: "ui-textarea" }, html_attrs)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,47 @@
+description: A styled multi-line text input. Supports all standard HTML textarea attributes including placeholder, rows, disabled, and name.
+
+sections:
+  - title: Basic Usage
+    examples:
+      - title: Default textarea
+        code: |
+          <%= render Ui::Textarea::Component.new(placeholder: "Type your message here...") %>
+
+      - title: With rows
+        code: |
+          <%= render Ui::Textarea::Component.new(placeholder: "Write something...", rows: 6) %>
+
+  - title: With Content
+    examples:
+      - title: Pre-filled content
+        code: |
+          <%= render Ui::Textarea::Component.new(name: "bio") do %>This is pre-filled content.<% end %>
+
+      - title: With name and placeholder
+        code: |
+          <%= render Ui::Textarea::Component.new(name: "description", placeholder: "Describe your project...") %>
+
+  - title: States
+    examples:
+      - title: Disabled
+        code: |
+          <%= render Ui::Textarea::Component.new(placeholder: "Disabled textarea", disabled: true) %>
+
+      - title: Required
+        code: |
+          <%= render Ui::Textarea::Component.new(placeholder: "Required field", required: true) %>
+
+      - title: Readonly
+        code: |
+          <%= render Ui::Textarea::Component.new(readonly: true) do %>This content is read-only.<% end %>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom class and data attributes
+        code: |
+          <%= render Ui::Textarea::Component.new(
+            placeholder: "Custom",
+            class: "my-custom-class",
+            data: { controller: "auto-resize" },
+            maxlength: 500
+          ) %>

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

@@ -0,0 +1,39 @@
+/* ============================================
+ * UikitRails — Textarea
+ *
+ * Multi-line text input field.
+ * ============================================ */
+
+.ui-textarea {
+  display: flex;
+  width: 100%;
+  min-height: 80px;
+  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);
+  resize: vertical;
+  transition:
+    border-color var(--ui-transition-speed) ease,
+    box-shadow var(--ui-transition-speed) ease;
+}
+
+.ui-textarea::placeholder {
+  color: var(--ui-muted-foreground);
+}
+
+.ui-textarea:focus {
+  outline: none;
+  border-color: var(--ui-ring);
+  box-shadow: 0 0 0 1px var(--ui-ring);
+}
+
+.ui-textarea:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--ui-muted);
+}

data/lib/uikit_rails/templates/components/toggle/USAGE

@@ -0,0 +1,25 @@
+Basic toggle:
+
+  <%= render Ui::Toggle::Component.new do %>Bold<% end %>
+
+Pressed:
+
+  <%= render Ui::Toggle::Component.new(pressed: true) do %>Bold<% end %>
+
+Variants (default, outline):
+
+  <%= render Ui::Toggle::Component.new(variant: :outline) do %>Italic<% end %>
+  <%= render Ui::Toggle::Component.new(variant: :outline, pressed: true) do %>Italic<% end %>
+
+Sizes (sm, md, lg):
+
+  <%= render Ui::Toggle::Component.new(size: :sm) do %>S<% end %>
+  <%= render Ui::Toggle::Component.new(size: :lg) do %>L<% end %>
+
+Disabled:
+
+  <%= render Ui::Toggle::Component.new(disabled: true) do %>Off<% end %>
+
+With custom attributes:
+
+  <%= render Ui::Toggle::Component.new(data: { action: "click->toolbar#toggle" }) do %>B<% end %>

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

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Ui
+  module Toggle
+    # Pressable toggle button.
+    class Component < Ui::BaseComponent
+      VARIANTS = %i[default outline].freeze
+      SIZES = %i[sm md lg].freeze
+
+      attr_reader :variant, :size, :pressed, :html_attrs
+
+      def initialize(variant: :default, size: :md, pressed: false, **html_attrs)
+        @variant = variant.to_sym
+        @size = size.to_sym
+        @pressed = pressed
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def call
+        content_tag(:button, content, **computed_attrs)
+      end
+
+      private
+
+      def computed_attrs
+        merge_attrs(
+          {
+            class: class_names("ui-toggle", "ui-toggle--#{variant}", "ui-toggle--#{size}",
+                               "ui-toggle--pressed": pressed),
+            type: "button",
+            "aria-pressed": pressed.to_s
+          },
+          html_attrs
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,81 @@
+description: A pressable toggle button with variants and sizes. Uses aria-pressed for accessibility. Ideal for toolbar actions or binary state controls.
+
+sections:
+  - title: Basic Usage
+    examples:
+      - title: Default (unpressed)
+        code: |
+          <%= render Ui::Toggle::Component.new do %>
+            B
+          <% end %>
+
+      - title: Pressed
+        code: |
+          <%= render Ui::Toggle::Component.new(pressed: true) do %>
+            B
+          <% end %>
+
+  - title: Variants
+    examples:
+      - title: Default variant
+        code: |
+          <%= render Ui::Toggle::Component.new do %>
+            Italic
+          <% end %>
+
+      - title: Outline variant
+        code: |
+          <%= render Ui::Toggle::Component.new(variant: :outline) do %>
+            Italic
+          <% end %>
+
+      - title: Outline pressed
+        code: |
+          <%= render Ui::Toggle::Component.new(variant: :outline, pressed: true) do %>
+            Italic
+          <% end %>
+
+  - title: Sizes
+    examples:
+      - title: Small
+        code: |
+          <%= render Ui::Toggle::Component.new(size: :sm) do %>
+            S
+          <% end %>
+
+      - title: Medium (default)
+        code: |
+          <%= render Ui::Toggle::Component.new(size: :md) do %>
+            M
+          <% end %>
+
+      - title: Large
+        code: |
+          <%= render Ui::Toggle::Component.new(size: :lg) do %>
+            L
+          <% end %>
+
+  - title: Disabled State
+    examples:
+      - title: Disabled
+        code: |
+          <%= render Ui::Toggle::Component.new(disabled: true) do %>
+            Disabled
+          <% end %>
+
+      - title: Disabled pressed
+        code: |
+          <%= render Ui::Toggle::Component.new(pressed: true, disabled: true) do %>
+            Locked
+          <% end %>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom data attributes
+        code: |
+          <%= render Ui::Toggle::Component.new(
+            variant: :outline,
+            data: { controller: "toolbar", action: "click->toolbar#toggleBold" }
+          ) do %>
+            B
+          <% end %>