uikit_rails 0.1.0

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>

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 %>