uikit_rails 0.1.0

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

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

@@ -0,0 +1,193 @@
+/* ============================================
+ * UikitRails — Sheet
+ *
+ * Slide-over panel using native <dialog> element.
+ * Slides in from any side: top, right, bottom, left.
+ * ============================================ */
+
+.ui-sheet {
+  border: none;
+  padding: 0;
+  background: transparent;
+  max-width: 100vw;
+  max-height: 100vh;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+}
+
+.ui-sheet::backdrop {
+  display: none;
+}
+
+/* --- Overlay --- */
+
+.ui-sheet__overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  animation: ui-sheet-fade-in var(--ui-transition-speed) ease;
+}
+
+/* --- Content (shared) --- */
+
+.ui-sheet__content {
+  position: fixed;
+  background: var(--ui-background);
+  color: var(--ui-foreground);
+  border: 1px solid var(--ui-border);
+  padding: 1.5rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  z-index: 51;
+  font-family: var(--ui-font-family);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+/* --- Side modifiers --- */
+
+.ui-sheet__content--right {
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  max-width: 24rem;
+  border-left: 1px solid var(--ui-border);
+  border-top: none;
+  border-bottom: none;
+  border-right: none;
+  animation: ui-sheet-slide-in-right var(--ui-transition-speed) ease;
+}
+
+.ui-sheet__content--left {
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  max-width: 24rem;
+  border-right: 1px solid var(--ui-border);
+  border-top: none;
+  border-bottom: none;
+  border-left: none;
+  animation: ui-sheet-slide-in-left var(--ui-transition-speed) ease;
+}
+
+.ui-sheet__content--top {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: auto;
+  max-height: 24rem;
+  border-bottom: 1px solid var(--ui-border);
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  animation: ui-sheet-slide-in-top var(--ui-transition-speed) ease;
+}
+
+.ui-sheet__content--bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: auto;
+  max-height: 24rem;
+  border-top: 1px solid var(--ui-border);
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+  animation: ui-sheet-slide-in-bottom var(--ui-transition-speed) ease;
+}
+
+/* --- Header --- */
+
+.ui-sheet__header {
+  margin-bottom: 1rem;
+}
+
+.ui-sheet__title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--ui-foreground);
+  line-height: 1.25;
+}
+
+.ui-sheet__description {
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-muted-foreground);
+  margin: 0.25rem 0 0;
+  line-height: 1.5;
+}
+
+/* --- Body --- */
+
+.ui-sheet__body {
+  font-size: var(--ui-font-size-sm);
+  flex: 1;
+}
+
+/* --- Footer --- */
+
+.ui-sheet__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+}
+
+/* --- Close Button --- */
+
+.ui-sheet__close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--ui-muted-foreground);
+  padding: 0.25rem;
+  border-radius: var(--ui-radius);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: color var(--ui-transition-speed) ease;
+}
+
+.ui-sheet__close:hover {
+  color: var(--ui-foreground);
+}
+
+.ui-sheet__close:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: 2px;
+}
+
+/* --- Animations --- */
+
+@keyframes ui-sheet-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes ui-sheet-slide-in-right {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes ui-sheet-slide-in-left {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes ui-sheet-slide-in-top {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes ui-sheet-slide-in-bottom {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}

data/lib/uikit_rails/templates/components/skeleton/USAGE

@@ -0,0 +1,19 @@
+Basic skeleton line:
+
+  <%= render Ui::Skeleton::Component.new(width: "100%", height: "1rem") %>
+
+Fixed-size block:
+
+  <%= render Ui::Skeleton::Component.new(width: "200px", height: "120px") %>
+
+Without rounded corners:
+
+  <%= render Ui::Skeleton::Component.new(width: "4rem", height: "4rem", rounded: false) %>
+
+Circle (avatar placeholder):
+
+  <%= render Ui::Skeleton::Component.new(width: "2.5rem", height: "2.5rem", style: "border-radius: 9999px;") %>
+
+With custom attributes:
+
+  <%= render Ui::Skeleton::Component.new(width: "100%", height: "1rem", class: "extra") %>

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

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Ui
+  module Skeleton
+    # Animated placeholder for loading states.
+    class Component < Ui::BaseComponent
+      attr_reader :width, :height, :rounded, :html_attrs
+
+      def initialize(width: nil, height: nil, rounded: true, **html_attrs)
+        @width = width
+        @height = height
+        @rounded = rounded
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def call
+        tag.div(**computed_attrs)
+      end
+
+      private
+
+      def computed_attrs
+        styles = []
+        styles << "width: #{width}" if width
+        styles << "height: #{height}" if height
+
+        merge_attrs(
+          {
+            class: class_names("ui-skeleton", "ui-skeleton--rounded": rounded),
+            style: styles.any? ? styles.join("; ") : nil
+          }.compact,
+          html_attrs
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,44 @@
+description: An animated placeholder block used to indicate loading states. Supports custom dimensions and optional rounded corners.
+
+sections:
+  - title: Basic
+    examples:
+      - title: Default skeleton line
+        code: |
+          <%= render Ui::Skeleton::Component.new(width: "100%", height: "1rem") %>
+
+      - title: Paragraph placeholder
+        code: |
+          <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+            <%= render Ui::Skeleton::Component.new(width: "100%", height: "1rem") %>
+            <%= render Ui::Skeleton::Component.new(width: "80%", height: "1rem") %>
+            <%= render Ui::Skeleton::Component.new(width: "60%", height: "1rem") %>
+          </div>
+
+  - title: Shapes
+    examples:
+      - title: Circle (avatar placeholder)
+        code: |
+          <%= render Ui::Skeleton::Component.new(width: "2.5rem", height: "2.5rem", style: "border-radius: 9999px;") %>
+
+      - title: Square (no rounding)
+        code: |
+          <%= render Ui::Skeleton::Component.new(width: "4rem", height: "4rem", rounded: false) %>
+
+  - title: Card Placeholder
+    examples:
+      - title: Card skeleton layout
+        code: |
+          <div style="display: flex; align-items: center; gap: 1rem;">
+            <%= render Ui::Skeleton::Component.new(width: "2.5rem", height: "2.5rem", style: "border-radius: 9999px;") %>
+            <div style="display: flex; flex-direction: column; gap: 0.5rem; flex: 1;">
+              <%= render Ui::Skeleton::Component.new(width: "50%", height: "1rem") %>
+              <%= render Ui::Skeleton::Component.new(width: "80%", height: "0.75rem") %>
+            </div>
+          </div>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom class
+        code: |
+          <%= render Ui::Skeleton::Component.new(width: "100%", height: "1rem", class: "my-skeleton") %>

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

@@ -0,0 +1,25 @@
+/* ============================================
+ * UikitRails — Skeleton
+ *
+ * Animated loading placeholder
+ * ============================================ */
+
+.ui-skeleton {
+  background-color: var(--ui-muted);
+  animation: ui-skeleton-pulse 2s ease-in-out infinite;
+}
+
+.ui-skeleton--rounded {
+  border-radius: var(--ui-radius);
+}
+
+@keyframes ui-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}

data/lib/uikit_rails/templates/components/switch/USAGE

@@ -0,0 +1,19 @@
+Basic switch:
+
+  <%= render Ui::Switch::Component.new(name: "setting", id: "setting") %>
+
+With label:
+
+  <%= render Ui::Switch::Component.new(label: "Enable notifications", name: "notify", id: "notify") %>
+
+Checked (on):
+
+  <%= render Ui::Switch::Component.new(label: "Dark mode", checked: true, name: "dark_mode", id: "dark_mode") %>
+
+Disabled:
+
+  <%= render Ui::Switch::Component.new(label: "Unavailable", disabled: true, name: "off", id: "off") %>
+
+With custom attributes:
+
+  <%= render Ui::Switch::Component.new(label: "Auto-save", name: "auto", id: "auto", data: { action: "change->ctrl#run" }) %>

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

@@ -0,0 +1,19 @@
+<div class="ui-switch__wrapper">
+  <input
+    type="checkbox"
+    class="ui-switch__input"
+    id="<%= input_id %>"
+    <% if checked %>checked<% end %>
+    <% if html_attrs[:disabled] %>disabled<% end %>
+    <% if html_attrs[:name] %>name="<%= html_attrs[:name] %>"<% end %>
+    <% if html_attrs[:value] %>value="<%= html_attrs[:value] %>"<% end %>
+    role="switch"
+    aria-checked="<%= checked %>"
+  />
+  <label class="ui-switch" for="<%= input_id %>">
+    <span class="ui-switch__thumb"></span>
+  </label>
+  <% if label %>
+    <label class="ui-switch__label" for="<%= input_id %>"><%= label %></label>
+  <% end %>
+</div>

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Ui
+  module Switch
+    # Toggle switch for boolean settings.
+    class Component < Ui::BaseComponent
+      attr_reader :label, :checked, :html_attrs
+
+      def initialize(label: nil, checked: false, **html_attrs)
+        @label = label
+        @checked = checked
+        @html_attrs = html_attrs
+        super()
+      end
+
+      private
+
+      def input_id
+        html_attrs[:id] || "switch_#{object_id}"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,43 @@
+description: A toggle switch for boolean settings. Pure CSS implementation using a hidden checkbox and styled label. No JavaScript required.
+
+sections:
+  - title: Basic Usage
+    examples:
+      - title: Default (off)
+        code: |
+          <%= render Ui::Switch::Component.new(name: "notifications", id: "notifications") %>
+
+      - title: With label
+        code: |
+          <%= render Ui::Switch::Component.new(label: "Enable notifications", name: "notifications", id: "notif_label") %>
+
+  - title: States
+    examples:
+      - title: Checked (on)
+        code: |
+          <%= render Ui::Switch::Component.new(label: "Dark mode", checked: true, name: "dark_mode", id: "dark_mode") %>
+
+      - title: Disabled (off)
+        code: |
+          <%= render Ui::Switch::Component.new(label: "Unavailable feature", disabled: true, name: "unavailable", id: "unavailable") %>
+
+      - title: Disabled (on)
+        code: |
+          <%= render Ui::Switch::Component.new(label: "Always on", checked: true, disabled: true, name: "always_on", id: "always_on") %>
+
+  - title: Form Integration
+    examples:
+      - title: With value
+        code: |
+          <%= render Ui::Switch::Component.new(label: "Accept terms", name: "terms", value: "1", id: "terms_switch") %>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom data attributes
+        code: |
+          <%= render Ui::Switch::Component.new(
+            label: "Auto-save",
+            name: "auto_save",
+            id: "auto_save",
+            data: { controller: "settings", action: "change->settings#toggle" }
+          ) %>

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

@@ -0,0 +1,81 @@
+/* ============================================
+ * UikitRails — Switch
+ *
+ * Pure CSS toggle switch (no JS required).
+ * Uses a hidden checkbox + styled label.
+ * ============================================ */
+
+.ui-switch__wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ui-switch__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.ui-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 2.75rem;
+  height: 1.5rem;
+  background-color: var(--ui-muted);
+  border-radius: 9999px;
+  cursor: pointer;
+  transition: background-color var(--ui-transition-speed) ease;
+  flex-shrink: 0;
+}
+
+.ui-switch__thumb {
+  position: absolute;
+  left: 2px;
+  width: 1.25rem;
+  height: 1.25rem;
+  background-color: var(--ui-background);
+  border-radius: 9999px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  transition: transform var(--ui-transition-speed) ease;
+}
+
+/* Checked state */
+.ui-switch__input:checked + .ui-switch {
+  background-color: var(--ui-primary);
+}
+
+.ui-switch__input:checked + .ui-switch .ui-switch__thumb {
+  transform: translateX(1.25rem);
+}
+
+/* Focus state */
+.ui-switch__input:focus-visible + .ui-switch {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: 2px;
+}
+
+/* Disabled state */
+.ui-switch__input:disabled + .ui-switch {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ui-switch__input:disabled ~ .ui-switch__label {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ui-switch__label {
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-foreground);
+  cursor: pointer;
+  user-select: none;
+}