uikit_rails 0.1.1

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

@@ -0,0 +1,55 @@
+/* ============================================
+ * UikitRails — Collapsible
+ *
+ * Expandable/collapsible content section with
+ * smooth height transition.
+ * ============================================ */
+
+.ui-collapsible {
+  font-family: var(--ui-font-family);
+  color: var(--ui-foreground);
+}
+
+/* --- Trigger --- */
+
+.ui-collapsible__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  padding: 0.75rem 0;
+  font-size: var(--ui-font-size-sm);
+  font-weight: 500;
+  user-select: none;
+  border-radius: var(--ui-radius);
+  transition: color var(--ui-transition-speed) ease;
+}
+
+.ui-collapsible__trigger:hover {
+  color: var(--ui-accent-foreground);
+}
+
+.ui-collapsible__trigger:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: 2px;
+}
+
+/* --- Content --- */
+
+.ui-collapsible__content {
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  transition:
+    max-height var(--ui-transition-speed) ease,
+    opacity var(--ui-transition-speed) ease,
+    padding var(--ui-transition-speed) ease;
+  font-size: var(--ui-font-size-sm);
+  padding: 0;
+}
+
+.ui-collapsible__content--open {
+  max-height: 500px;
+  opacity: 1;
+  padding: 0.5rem 0 0.75rem;
+}

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

@@ -0,0 +1,8 @@
+<div data-controller="ui--collapsible" class="ui-collapsible" <%= tag.attributes(html_attrs) %>>
+  <% if trigger? %>
+    <div data-action="click->ui--collapsible#toggle" class="ui-collapsible__trigger"><%= trigger %></div>
+  <% end %>
+  <div data-ui--collapsible-target="content" class="ui-collapsible__content <%= 'ui-collapsible__content--open' if open %>">
+    <%= content %>
+  </div>
+</div>

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Ui
+  module Collapsible
+    # Expandable/collapsible content section.
+    class Component < Ui::BaseComponent
+      renders_one :trigger
+
+      attr_reader :open, :html_attrs
+
+      def initialize(open: false, **html_attrs)
+        @open = open
+        @html_attrs = html_attrs
+        super()
+      end
+    end
+  end
+end

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

@@ -0,0 +1,65 @@
+description: An expandable/collapsible content section. Click the trigger area to toggle visibility of the content below it with a smooth transition.
+
+sections:
+  - title: Basic Collapsible
+    examples:
+      - title: Simple toggle
+        code: |
+          <%= render Ui::Collapsible::Component.new do |collapsible| %>
+            <% collapsible.with_trigger do %>
+              <span>Toggle content</span>
+              <span style="font-size:var(--ui-font-size-xs);">&#9660;</span>
+            <% end %>
+            <p>This content can be shown or hidden by clicking the trigger above.</p>
+          <% end %>
+
+      - title: Open by default
+        code: |
+          <%= render Ui::Collapsible::Component.new(open: true) do |collapsible| %>
+            <% collapsible.with_trigger do %>
+              <span>Expanded by default</span>
+              <span style="font-size:var(--ui-font-size-xs);">&#9660;</span>
+            <% end %>
+            <p>This collapsible starts in the open state.</p>
+          <% end %>
+
+  - title: Collapsible with Rich Content
+    examples:
+      - title: List of items
+        code: |
+          <%= render Ui::Collapsible::Component.new do |collapsible| %>
+            <% collapsible.with_trigger do %>
+              <span style="font-weight:600;">3 tagged items</span>
+              <span style="font-size:var(--ui-font-size-xs);">&#9660;</span>
+            <% end %>
+            <div style="display:flex;flex-direction:column;gap:0.5rem;">
+              <div style="padding:0.5rem 0.75rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-size:var(--ui-font-size-sm);">@radix-ui/primitives</div>
+              <div style="padding:0.5rem 0.75rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-size:var(--ui-font-size-sm);">@radix-ui/colors</div>
+              <div style="padding:0.5rem 0.75rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-size:var(--ui-font-size-sm);">@stitches/react</div>
+            </div>
+          <% end %>
+
+  - title: Collapsible with Button Trigger
+    examples:
+      - title: Using a button as trigger
+        code: |
+          <%= render Ui::Collapsible::Component.new do |collapsible| %>
+            <% collapsible.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :outline, size: :sm) do %>Show details<% end %>
+            <% end %>
+            <div style="margin-top:0.5rem;padding:1rem;border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-size:var(--ui-font-size-sm);">
+              <p style="margin:0;">Here are the additional details that were hidden until the button was clicked.</p>
+            </div>
+          <% end %>
+
+  - title: Custom Attributes
+    examples:
+      - title: Collapsible with custom class
+        code: |
+          <%= render Ui::Collapsible::Component.new(class: "my-faq-item", data: { section: "faq" }) do |collapsible| %>
+            <% collapsible.with_trigger do %>
+              <span>What is UikitRails?</span>
+              <span style="font-size:var(--ui-font-size-xs);">&#9660;</span>
+            <% end %>
+            <p>UikitRails is a component library for Ruby on Rails applications, providing pre-built UI components with design tokens.</p>
+          <% end %>

data/lib/uikit_rails/templates/components/dialog/USAGE

@@ -0,0 +1,41 @@
+Basic dialog:
+
+  <%= render Ui::Dialog::Component.new do |dialog| %>
+    <% dialog.with_trigger do %>
+      <%= render Ui::Button::Component.new do %>Open<% end %>
+    <% end %>
+    <% dialog.with_title do %>Dialog Title<% end %>
+    <% dialog.with_description do %>A short description.<% end %>
+    <p>Body content goes here.</p>
+    <% dialog.with_footer do %>
+      <%= render Ui::Button::Component.new(variant: :outline, data: { action: "click->ui--dialog#close" }) do %>Cancel<% end %>
+      <%= render Ui::Button::Component.new do %>Confirm<% end %>
+    <% end %>
+  <% end %>
+
+Without footer:
+
+  <%= render Ui::Dialog::Component.new do |dialog| %>
+    <% dialog.with_trigger do %>
+      <%= render Ui::Button::Component.new do %>Info<% end %>
+    <% end %>
+    <% dialog.with_title do %>Information<% end %>
+    <p>This is an informational dialog.</p>
+  <% end %>
+
+Slots:
+  trigger     — Element that opens the dialog on click
+  title       — Dialog 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 dialog:
+  Use data-action="click->ui--dialog#close" on any element inside.
+
+With custom attributes:
+
+  <%= render Ui::Dialog::Component.new(class: "extra", data: { turbo: false }) do |dialog| %>
+    <% dialog.with_title do %>Title<% end %>
+    <p>Content</p>
+  <% end %>

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

@@ -0,0 +1,23 @@
+<div data-controller="ui--dialog" <%= tag.attributes(html_attrs) %>>
+  <% if trigger? %>
+    <div data-action="click->ui--dialog#open"><%= trigger %></div>
+  <% end %>
+  <dialog class="ui-dialog" data-ui--dialog-target="dialog">
+    <div class="ui-dialog__overlay" data-action="click->ui--dialog#close"></div>
+    <div class="ui-dialog__content">
+      <% if title? || description? %>
+        <div class="ui-dialog__header">
+          <% if title? %><h2 class="ui-dialog__title"><%= title %></h2><% end %>
+          <% if description? %><p class="ui-dialog__description"><%= description %></p><% end %>
+        </div>
+      <% end %>
+      <div class="ui-dialog__body"><%= content %></div>
+      <% if footer? %>
+        <div class="ui-dialog__footer"><%= footer %></div>
+      <% end %>
+      <button class="ui-dialog__close" data-action="click->ui--dialog#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/dialog/component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Ui
+  module Dialog
+    # Modal dialog with backdrop overlay.
+    class Component < Ui::BaseComponent
+      renders_one :trigger
+      renders_one :title
+      renders_one :description
+      renders_one :footer
+
+      attr_reader :html_attrs
+
+      def initialize(**html_attrs)
+        @html_attrs = html_attrs
+        super()
+      end
+    end
+  end
+end

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

@@ -0,0 +1,133 @@
+/* ============================================
+ * UikitRails — Dialog
+ *
+ * Modal dialog using native <dialog> element
+ * with backdrop overlay and slide-in animation.
+ * ============================================ */
+
+.ui-dialog {
+  border: none;
+  padding: 0;
+  background: transparent;
+  max-width: 100vw;
+  max-height: 100vh;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+}
+
+.ui-dialog::backdrop {
+  display: none;
+}
+
+/* --- Overlay --- */
+
+.ui-dialog__overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  animation: ui-dialog-fade-in var(--ui-transition-speed) ease;
+}
+
+/* --- Content --- */
+
+.ui-dialog__content {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--ui-background);
+  color: var(--ui-foreground);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  padding: 1.5rem;
+  width: 100%;
+  max-width: 32rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  z-index: 51;
+  font-family: var(--ui-font-family);
+  animation: ui-dialog-scale-in var(--ui-transition-speed) ease;
+}
+
+/* --- Header --- */
+
+.ui-dialog__header {
+  margin-bottom: 1rem;
+}
+
+.ui-dialog__title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--ui-foreground);
+  line-height: 1.25;
+}
+
+.ui-dialog__description {
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-muted-foreground);
+  margin: 0.25rem 0 0;
+  line-height: 1.5;
+}
+
+/* --- Body --- */
+
+.ui-dialog__body {
+  font-size: var(--ui-font-size-sm);
+}
+
+/* --- Footer --- */
+
+.ui-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+}
+
+/* --- Close Button --- */
+
+.ui-dialog__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-dialog__close:hover {
+  color: var(--ui-foreground);
+}
+
+.ui-dialog__close:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: 2px;
+}
+
+/* --- Animations --- */
+
+@keyframes ui-dialog-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes ui-dialog-scale-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}

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

@@ -0,0 +1,77 @@
+description: A modal dialog that overlays the page with a backdrop. Uses the native HTML <dialog> element for accessibility and supports title, description, body content, and footer slots.
+
+sections:
+  - title: Basic Dialog
+    examples:
+      - title: Simple dialog with trigger
+        code: |
+          <%= render Ui::Dialog::Component.new do |dialog| %>
+            <% dialog.with_trigger do %>
+              <%= render Ui::Button::Component.new do %>Open Dialog<% end %>
+            <% end %>
+            <% dialog.with_title do %>Are you sure?<% end %>
+            <% dialog.with_description do %>This action cannot be undone.<% end %>
+            <p>This will permanently delete your account and all associated data.</p>
+            <% dialog.with_footer do %>
+              <%= render Ui::Button::Component.new(variant: :outline, data: { action: "click->ui--dialog#close" }) do %>Cancel<% end %>
+              <%= render Ui::Button::Component.new(variant: :destructive) do %>Delete<% end %>
+            <% end %>
+          <% end %>
+
+  - title: Dialog with Form
+    examples:
+      - title: Edit profile dialog
+        code: |
+          <%= render Ui::Dialog::Component.new do |dialog| %>
+            <% dialog.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Edit Profile<% end %>
+            <% end %>
+            <% dialog.with_title do %>Edit Profile<% end %>
+            <% dialog.with_description do %>Make changes to your profile here. 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>
+            <% dialog.with_footer do %>
+              <%= render Ui::Button::Component.new(variant: :outline, data: { action: "click->ui--dialog#close" }) do %>Cancel<% end %>
+              <%= render Ui::Button::Component.new do %>Save changes<% end %>
+            <% end %>
+          <% end %>
+
+  - title: Dialog without Footer
+    examples:
+      - title: Informational dialog
+        code: |
+          <%= render Ui::Dialog::Component.new do |dialog| %>
+            <% dialog.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :secondary) do %>View Details<% end %>
+            <% end %>
+            <% dialog.with_title do %>Release Notes<% end %>
+            <% dialog.with_description do %>What's new in version 2.0<% end %>
+            <ul style="list-style:disc;padding-left:1.25rem;font-size:var(--ui-font-size-sm);line-height:1.75;">
+              <li>New dialog component with native HTML dialog</li>
+              <li>Improved dropdown positioning</li>
+              <li>Alert dialog for confirmations</li>
+            </ul>
+          <% end %>
+
+  - title: Custom Attributes
+    examples:
+      - title: Dialog with custom class
+        code: |
+          <%= render Ui::Dialog::Component.new(class: "my-custom-dialog", data: { turbo_frame: "modal" }) do |dialog| %>
+            <% dialog.with_trigger do %>
+              <%= render Ui::Button::Component.new do %>Open<% end %>
+            <% end %>
+            <% dialog.with_title do %>Custom Dialog<% end %>
+            <p>This dialog has custom attributes applied to the wrapper.</p>
+            <% dialog.with_footer do %>
+              <%= render Ui::Button::Component.new(variant: :outline, data: { action: "click->ui--dialog#close" }) do %>Close<% end %>
+            <% end %>
+          <% end %>

data/lib/uikit_rails/templates/components/dropdown/USAGE

@@ -0,0 +1,40 @@
+Basic dropdown:
+
+  <%= 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 %>
+
+With links:
+
+  <% dropdown.with_item(href: "/profile") do %>Profile<% end %>
+
+With labels:
+
+  <% dropdown.with_label do %>Account<% end %>
+  <% dropdown.with_item do %>Profile<% end %>
+
+Right-aligned:
+
+  <%= render Ui::Dropdown::Component.new(align: :end) do |dropdown| %>
+    ...
+  <% end %>
+
+Item subtypes:
+  item      — Clickable menu item (renders as <div> or <a> if href given)
+  separator — Horizontal divider line
+  label     — Non-interactive group heading
+
+Props:
+  align — :start (default) or :end — controls menu alignment
+
+With custom attributes:
+
+  <%= render Ui::Dropdown::Component.new(class: "extra", data: { turbo: false }) do |dropdown| %>
+    ...
+  <% end %>

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

@@ -0,0 +1,14 @@
+<div class="ui-dropdown" data-controller="ui--dropdown" <%= tag.attributes(html_attrs) %>>
+  <% if trigger? %>
+    <div data-action="click->ui--dropdown#toggle"><%= trigger %></div>
+  <% end %>
+  <div class="ui-dropdown__menu <%= align_class %>"
+       data-ui--dropdown-target="menu"
+       role="menu"
+       hidden>
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+    <%= content %>
+  </div>
+</div>

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

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module Ui
+  module Dropdown
+    # Dropdown menu triggered by a button.
+    class Component < Ui::BaseComponent
+      renders_one :trigger
+      renders_many :items, types: {
+        item: { renders: ->(**attrs, &block) { Item.new(**attrs, &block) }, as: :item },
+        separator: { renders: -> { SeparatorItem.new }, as: :separator },
+        label: { renders: ->(**attrs, &block) { LabelItem.new(**attrs, &block) }, as: :label }
+      }
+
+      attr_reader :align, :html_attrs
+
+      def initialize(align: :start, **html_attrs)
+        @align = align.to_sym
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def align_class
+        "ui-dropdown__menu--#{align}"
+      end
+
+      class Item < Ui::BaseComponent
+        attr_reader :href, :html_attrs
+
+        def initialize(href: nil, **html_attrs)
+          @href = href
+          @html_attrs = html_attrs
+          super()
+        end
+
+        def call
+          tag_name = href ? :a : :div
+          attrs = merge_attrs({ class: "ui-dropdown__item", href: href, role: "menuitem" }.compact, html_attrs)
+          content_tag(tag_name, content, **attrs)
+        end
+      end
+
+      class SeparatorItem < Ui::BaseComponent
+        def call
+          tag.div(class: "ui-dropdown__separator", role: "separator")
+        end
+      end
+
+      class LabelItem < Ui::BaseComponent
+        attr_reader :html_attrs
+
+        def initialize(**html_attrs)
+          @html_attrs = html_attrs
+          super()
+        end
+
+        def call
+          content_tag(:div, content, class: "ui-dropdown__label", **html_attrs)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,104 @@
+/* ============================================
+ * UikitRails — Dropdown
+ *
+ * Dropdown menu triggered by a button with
+ * items, separators, and label subtypes.
+ * ============================================ */
+
+.ui-dropdown {
+  position: relative;
+  display: inline-block;
+  font-family: var(--ui-font-family);
+}
+
+/* --- Menu --- */
+
+.ui-dropdown__menu {
+  position: absolute;
+  top: 100%;
+  z-index: 50;
+  min-width: 12rem;
+  margin-top: 0.25rem;
+  padding: 0.25rem;
+  background: var(--ui-background);
+  color: var(--ui-foreground);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  animation: ui-dropdown-fade-in var(--ui-transition-speed) ease;
+}
+
+.ui-dropdown__menu[hidden] {
+  display: none;
+}
+
+/* --- Alignment --- */
+
+.ui-dropdown__menu--start {
+  left: 0;
+}
+
+.ui-dropdown__menu--end {
+  right: 0;
+}
+
+/* --- Item --- */
+
+.ui-dropdown__item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-foreground);
+  text-decoration: none;
+  border: none;
+  background: none;
+  border-radius: calc(var(--ui-radius) - 2px);
+  cursor: pointer;
+  transition: background-color var(--ui-transition-speed) ease;
+  line-height: 1.25;
+  box-sizing: border-box;
+}
+
+.ui-dropdown__item:hover {
+  background-color: var(--ui-accent);
+  color: var(--ui-accent-foreground);
+}
+
+.ui-dropdown__item:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: -2px;
+}
+
+/* --- Separator --- */
+
+.ui-dropdown__separator {
+  height: 1px;
+  margin: 0.25rem -0.25rem;
+  background-color: var(--ui-border);
+}
+
+/* --- Label --- */
+
+.ui-dropdown__label {
+  padding: 0.5rem 0.75rem 0.25rem;
+  font-size: var(--ui-font-size-xs);
+  font-weight: 600;
+  color: var(--ui-muted-foreground);
+  line-height: 1.25;
+}
+
+/* --- Animation --- */
+
+@keyframes ui-dropdown-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}