uikit_rails 0.1.1

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

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Ui
+  module Progress
+    # Progress bar showing completion percentage.
+    class Component < Ui::BaseComponent
+      attr_reader :value, :max, :html_attrs
+
+      def initialize(value: 0, max: 100, **html_attrs)
+        @value = value.to_i
+        @max = max.to_i
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def percentage
+        return 0 if max.zero?
+
+        [(value.to_f / max * 100).round, 100].min
+      end
+
+      private
+
+      def computed_attrs
+        merge_attrs(
+          {
+            class: "ui-progress",
+            role: "progressbar",
+            "aria-valuenow": value,
+            "aria-valuemin": 0,
+            "aria-valuemax": max
+          },
+          html_attrs
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,44 @@
+description: An accessible progress bar that visually indicates completion percentage. Includes ARIA attributes for screen readers and smooth width transitions.
+
+sections:
+  - title: Basic Usage
+    examples:
+      - title: Empty (0%)
+        code: |
+          <%= render Ui::Progress::Component.new(value: 0) %>
+
+      - title: Partial (45%)
+        code: |
+          <%= render Ui::Progress::Component.new(value: 45) %>
+
+      - title: Complete (100%)
+        code: |
+          <%= render Ui::Progress::Component.new(value: 100) %>
+
+  - title: Custom Max
+    examples:
+      - title: 3 of 5 steps
+        code: |
+          <%= render Ui::Progress::Component.new(value: 3, max: 5) %>
+
+      - title: 7 of 10 items
+        code: |
+          <%= render Ui::Progress::Component.new(value: 7, max: 10) %>
+
+  - title: With Labels
+    examples:
+      - title: Progress with percentage label
+        code: |
+          <div style="display: flex; flex-direction: column; gap: 0.25rem;">
+            <div style="display: flex; justify-content: space-between; font-size: 0.875rem;">
+              <span>Uploading…</span>
+              <span>65%</span>
+            </div>
+            <%= render Ui::Progress::Component.new(value: 65) %>
+          </div>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom class and data attributes
+        code: |
+          <%= render Ui::Progress::Component.new(value: 50, class: "my-progress", data: { controller: "upload" }) %>

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

@@ -0,0 +1,20 @@
+/* ============================================
+ * UikitRails — Progress
+ *
+ * Accessible progress bar with smooth transitions
+ * ============================================ */
+
+.ui-progress {
+  width: 100%;
+  height: 0.625rem;
+  overflow: hidden;
+  border-radius: 9999px;
+  background-color: var(--ui-muted);
+}
+
+.ui-progress__bar {
+  height: 100%;
+  background-color: var(--ui-primary);
+  border-radius: 9999px;
+  transition: width var(--ui-transition-speed) ease;
+}

data/lib/uikit_rails/templates/components/select/USAGE

@@ -0,0 +1,19 @@
+Basic select with string options:
+
+  <%= render Ui::Select::Component.new(options: ["Apple", "Banana", "Cherry"], prompt: "Select a fruit", name: "fruit") %>
+
+With [label, value] pairs:
+
+  <%= render Ui::Select::Component.new(options: [["Small", "sm"], ["Large", "lg"]], name: "size") %>
+
+Pre-selected value:
+
+  <%= render Ui::Select::Component.new(options: [["Draft", "draft"], ["Published", "published"]], selected: "published", name: "status") %>
+
+Disabled:
+
+  <%= render Ui::Select::Component.new(options: ["A", "B"], prompt: "Disabled", disabled: true, name: "off") %>
+
+With custom attributes:
+
+  <%= render Ui::Select::Component.new(options: ["Red", "Blue"], name: "color", data: { action: "change->ctrl#run" }) %>

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

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Ui
+  module Select
+    # Styled native select dropdown.
+    class Component < Ui::BaseComponent
+      attr_reader :options, :prompt, :selected, :html_attrs
+
+      def initialize(options: [], prompt: nil, selected: nil, **html_attrs)
+        @options = options
+        @prompt = prompt
+        @selected = selected
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def call
+        content_tag(:select, options_html, **computed_attrs)
+      end
+
+      private
+
+      def computed_attrs
+        merge_attrs({ class: "ui-select" }, html_attrs)
+      end
+
+      def options_html
+        html = "".html_safe
+        html += content_tag(:option, prompt, value: "", disabled: true, selected: selected.nil?) if prompt
+        options.each do |opt|
+          label, value = opt.is_a?(Array) ? opt : [opt, opt]
+          html += content_tag(:option, label, value: value, selected: value.to_s == selected.to_s)
+        end
+        html
+      end
+    end
+  end
+end

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

@@ -0,0 +1,61 @@
+description: A styled native select dropdown. Accepts an array of options (strings or [label, value] pairs), an optional prompt placeholder, and all standard HTML select attributes.
+
+sections:
+  - title: Basic Usage
+    examples:
+      - title: With string options
+        code: |
+          <%= render Ui::Select::Component.new(
+            options: ["Apple", "Banana", "Cherry"],
+            prompt: "Select a fruit",
+            name: "fruit"
+          ) %>
+
+      - title: With label-value pairs
+        code: |
+          <%= render Ui::Select::Component.new(
+            options: [["United States", "us"], ["Canada", "ca"], ["Mexico", "mx"]],
+            prompt: "Select a country",
+            name: "country"
+          ) %>
+
+  - title: Pre-selected Value
+    examples:
+      - title: Selected option
+        code: |
+          <%= render Ui::Select::Component.new(
+            options: [["Small", "sm"], ["Medium", "md"], ["Large", "lg"]],
+            selected: "md",
+            name: "size"
+          ) %>
+
+  - title: States
+    examples:
+      - title: Disabled
+        code: |
+          <%= render Ui::Select::Component.new(
+            options: ["Option A", "Option B"],
+            prompt: "Disabled select",
+            disabled: true,
+            name: "disabled_select"
+          ) %>
+
+      - title: Required
+        code: |
+          <%= render Ui::Select::Component.new(
+            options: ["Draft", "Published", "Archived"],
+            prompt: "Select status",
+            required: true,
+            name: "status"
+          ) %>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom data attributes
+        code: |
+          <%= render Ui::Select::Component.new(
+            options: ["Red", "Green", "Blue"],
+            prompt: "Pick a color",
+            name: "color",
+            data: { controller: "color-picker", action: "change->color-picker#update" }
+          ) %>

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

@@ -0,0 +1,46 @@
+/* ============================================
+ * UikitRails — Select
+ *
+ * Styled native select dropdown.
+ * ============================================ */
+
+.ui-select {
+  display: flex;
+  width: 100%;
+  height: 2.5rem;
+  padding: 0.5rem 2.5rem 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);
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 1rem;
+  cursor: pointer;
+  transition:
+    border-color var(--ui-transition-speed) ease,
+    box-shadow var(--ui-transition-speed) ease;
+}
+
+.ui-select:focus {
+  outline: none;
+  border-color: var(--ui-ring);
+  box-shadow: 0 0 0 1px var(--ui-ring);
+}
+
+.ui-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--ui-muted);
+}
+
+.ui-select:invalid,
+.ui-select option[disabled] {
+  color: var(--ui-muted-foreground);
+}

data/lib/uikit_rails/templates/components/separator/USAGE

@@ -0,0 +1,15 @@
+Horizontal separator (default):
+
+  <%= render Ui::Separator::Component.new %>
+
+Vertical separator (parent must define height):
+
+  <%= render Ui::Separator::Component.new(orientation: :vertical) %>
+
+Decorative (hidden from screen readers):
+
+  <%= render Ui::Separator::Component.new(decorative: true) %>
+
+With custom attributes:
+
+  <%= render Ui::Separator::Component.new(class: "extra", style: "margin: 2rem 0;") %>

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

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Ui
+  module Separator
+    # Visual divider between content sections.
+    class Component < Ui::BaseComponent
+      attr_reader :orientation, :decorative, :html_attrs
+
+      def initialize(orientation: :horizontal, decorative: false, **html_attrs)
+        @orientation = orientation.to_sym
+        @decorative = decorative
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def call
+        tag.div(**computed_attrs)
+      end
+
+      private
+
+      def computed_attrs
+        merge_attrs(
+          {
+            class: class_names("ui-separator", "ui-separator--#{orientation}"),
+            role: decorative ? "none" : "separator",
+            "aria-orientation": orientation == :vertical ? "vertical" : nil
+          }.compact,
+          html_attrs
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,32 @@
+description: A visual divider used to separate content sections. Supports horizontal and vertical orientations, with an optional decorative mode that hides the element from assistive technology.
+
+sections:
+  - title: Orientation
+    examples:
+      - title: Horizontal (default)
+        code: |
+          <p>Above</p>
+          <%= render Ui::Separator::Component.new %>
+          <p>Below</p>
+
+      - title: Vertical
+        code: |
+          <div style="display: flex; align-items: center; height: 1.5rem; gap: 0.75rem;">
+            <span>Left</span>
+            <%= render Ui::Separator::Component.new(orientation: :vertical) %>
+            <span>Right</span>
+          </div>
+
+  - title: Decorative
+    examples:
+      - title: Decorative separator (hidden from screen readers)
+        code: |
+          <p>Section A</p>
+          <%= render Ui::Separator::Component.new(decorative: true) %>
+          <p>Section B</p>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom class and margin
+        code: |
+          <%= render Ui::Separator::Component.new(class: "my-divider", style: "margin: 1.5rem 0;") %>

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

@@ -0,0 +1,21 @@
+/* ============================================
+ * UikitRails — Separator
+ *
+ * Orientations: horizontal, vertical
+ * ============================================ */
+
+.ui-separator {
+  flex-shrink: 0;
+  background-color: var(--ui-border);
+}
+
+.ui-separator--horizontal {
+  width: 100%;
+  height: 1px;
+}
+
+.ui-separator--vertical {
+  width: 1px;
+  height: 100%;
+  align-self: stretch;
+}

data/lib/uikit_rails/templates/components/sheet/USAGE

@@ -0,0 +1,44 @@
+Basic sheet (slides from right):
+
+  <%= render Ui::Sheet::Component.new do |sheet| %>
+    <% sheet.with_trigger do %>
+      <%= render Ui::Button::Component.new do %>Open<% end %>
+    <% end %>
+    <% sheet.with_title do %>Sheet Title<% end %>
+    <% sheet.with_description do %>A short description.<% end %>
+    <p>Body content goes here.</p>
+    <% sheet.with_footer do %>
+      <%= render Ui::Button::Component.new(variant: :outline, data: { action: "click->ui--sheet#close" }) do %>Cancel<% end %>
+      <%= render Ui::Button::Component.new do %>Confirm<% end %>
+    <% end %>
+  <% end %>
+
+Side variants (top, right, bottom, left):
+
+  <%= render Ui::Sheet::Component.new(side: :left) do |sheet| %>
+    <% sheet.with_trigger do %>Open Left<% end %>
+    <% sheet.with_title do %>Navigation<% end %>
+    <p>Content</p>
+  <% end %>
+
+  <%= render Ui::Sheet::Component.new(side: :bottom) do |sheet| %>
+    <% sheet.with_trigger do %>Open Bottom<% end %>
+    <p>Content</p>
+  <% end %>
+
+Slots:
+  trigger     — Element that opens the sheet on click
+  title       — Sheet heading (rendered as <h2>)
+  description — Subtitle text below the title
+  footer      — Bottom area, typically for action buttons
+  content     — Main body (default slot)
+
+Close from inside the sheet:
+  Use data-action="click->ui--sheet#close" on any element inside.
+
+With custom attributes:
+
+  <%= render Ui::Sheet::Component.new(side: :right, class: "extra", data: { turbo: false }) do |sheet| %>
+    <% sheet.with_title do %>Title<% end %>
+    <p>Content</p>
+  <% end %>

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

@@ -0,0 +1,23 @@
+<div data-controller="ui--sheet" <%= tag.attributes(html_attrs) %>>
+  <% if trigger? %>
+    <div data-action="click->ui--sheet#open"><%= trigger %></div>
+  <% end %>
+  <dialog class="ui-sheet" data-ui--sheet-target="dialog">
+    <div class="ui-sheet__overlay" data-action="click->ui--sheet#close"></div>
+    <div class="ui-sheet__content ui-sheet__content--<%= side %>">
+      <% if title? || description? %>
+        <div class="ui-sheet__header">
+          <% if title? %><h2 class="ui-sheet__title"><%= title %></h2><% end %>
+          <% if description? %><p class="ui-sheet__description"><%= description %></p><% end %>
+        </div>
+      <% end %>
+      <div class="ui-sheet__body"><%= content %></div>
+      <% if footer? %>
+        <div class="ui-sheet__footer"><%= footer %></div>
+      <% end %>
+      <button class="ui-sheet__close" data-action="click->ui--sheet#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/lib/uikit_rails/templates/components/sheet/component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Ui
+  module Sheet
+    # Slide-over panel from any side of the screen.
+    class Component < Ui::BaseComponent
+      SIDES = %i[top right bottom left].freeze
+
+      renders_one :trigger
+      renders_one :title
+      renders_one :description
+      renders_one :footer
+
+      attr_reader :side, :html_attrs
+
+      def initialize(side: :right, **html_attrs)
+        @side = side.to_sym
+        @html_attrs = html_attrs
+        super()
+      end
+    end
+  end
+end

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

@@ -0,0 +1,105 @@
+description: A slide-over panel that enters from any side of the screen. Uses the native HTML <dialog> element for accessibility and supports title, description, body content, and footer slots.
+
+sections:
+  - title: Basic Sheet
+    examples:
+      - title: Right side (default)
+        code: |
+          <%= render Ui::Sheet::Component.new do |sheet| %>
+            <% sheet.with_trigger do %>
+              <%= render Ui::Button::Component.new do %>Open Sheet<% end %>
+            <% end %>
+            <% sheet.with_title do %>Sheet Title<% end %>
+            <% sheet.with_description do %>This is a slide-over panel from the right.<% end %>
+            <p>Main content goes here. You can place forms, lists, or any other content inside the sheet body.</p>
+            <% sheet.with_footer do %>
+              <%= render Ui::Button::Component.new(variant: :outline, data: { action: "click->ui--sheet#close" }) do %>Cancel<% end %>
+              <%= render Ui::Button::Component.new do %>Save<% end %>
+            <% end %>
+          <% end %>
+
+  - title: Side Variants
+    examples:
+      - title: Left side
+        code: |
+          <%= render Ui::Sheet::Component.new(side: :left) do |sheet| %>
+            <% sheet.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Open Left<% end %>
+            <% end %>
+            <% sheet.with_title do %>Navigation<% end %>
+            <% sheet.with_description do %>Browse the site sections.<% end %>
+            <ul style="list-style:none;padding:0;margin:0;">
+              <li style="padding:0.5rem 0;border-bottom:1px solid var(--ui-border);">Dashboard</li>
+              <li style="padding:0.5rem 0;border-bottom:1px solid var(--ui-border);">Settings</li>
+              <li style="padding:0.5rem 0;">Profile</li>
+            </ul>
+          <% end %>
+
+      - title: Top side
+        code: |
+          <%= render Ui::Sheet::Component.new(side: :top) do |sheet| %>
+            <% sheet.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Open Top<% end %>
+            <% end %>
+            <% sheet.with_title do %>Notifications<% end %>
+            <% sheet.with_description do %>You have 3 unread notifications.<% end %>
+            <p>Notification content slides down from the top of the screen.</p>
+          <% end %>
+
+      - title: Bottom side
+        code: |
+          <%= render Ui::Sheet::Component.new(side: :bottom) do |sheet| %>
+            <% sheet.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Open Bottom<% end %>
+            <% end %>
+            <% sheet.with_title do %>Quick Actions<% end %>
+            <p>Action panel that slides up from the bottom.</p>
+            <% sheet.with_footer do %>
+              <%= render Ui::Button::Component.new(variant: :outline, data: { action: "click->ui--sheet#close" }) do %>Dismiss<% end %>
+            <% end %>
+          <% end %>
+
+  - title: Sheet with Form
+    examples:
+      - title: Edit profile sheet
+        code: |
+          <%= render Ui::Sheet::Component.new do |sheet| %>
+            <% sheet.with_trigger do %>
+              <%= render Ui::Button::Component.new do %>Edit Profile<% end %>
+            <% end %>
+            <% sheet.with_title do %>Edit Profile<% end %>
+            <% sheet.with_description do %>Make changes to your profile. 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>
+                <label style="font-size:var(--ui-font-size-sm);font-weight:500;">Bio</label>
+                <textarea rows="3" style="width:100%;padding:0.5rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius);margin-top:0.25rem;resize:vertical;">Developer and designer.</textarea>
+              </div>
+            </div>
+            <% sheet.with_footer do %>
+              <%= render Ui::Button::Component.new(variant: :outline, data: { action: "click->ui--sheet#close" }) do %>Cancel<% end %>
+              <%= render Ui::Button::Component.new do %>Save changes<% end %>
+            <% end %>
+          <% end %>
+
+  - title: Custom Attributes
+    examples:
+      - title: Sheet with custom class
+        code: |
+          <%= render Ui::Sheet::Component.new(side: :right, class: "my-custom-sheet", data: { turbo_frame: "panel" }) do |sheet| %>
+            <% sheet.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :secondary) do %>Open<% end %>
+            <% end %>
+            <% sheet.with_title do %>Custom Sheet<% end %>
+            <p>This sheet has custom attributes applied to the wrapper.</p>
+            <% sheet.with_footer do %>
+              <%= render Ui::Button::Component.new(variant: :outline, data: { action: "click->ui--sheet#close" }) do %>Close<% end %>
+            <% end %>
+          <% end %>