baldur 0.1.7 → 0.2.0

data/app/assets/stylesheets/baldur/application/components/sidebar.css

@@ -1,4 +1,48 @@
 @layer components {
+  .sidebar-shell {
+    min-height: 100vh;
+    background: var(--color-surface-low);
+  }
+
+  .sidebar-shell__main {
+    min-width: 0;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sidebar-shell__desktop {
+    display: none;
+    flex-shrink: 0;
+    border-right: 1px solid var(--color-outline-variant);
+    background: var(--color-surface);
+    padding: var(--space-3);
+    flex-direction: column;
+  }
+
+  .sidebar__brand-link {
+    display: inline-flex;
+    text-decoration: none;
+  }
+
+  .sidebar__brand-link .brand-lockup {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--color-on-surface);
+  }
+
+  .sidebar__brand-link .brand-lockup__logo {
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: var(--radius-xl);
+    object-fit: cover;
+  }
+
+  .sidebar__brand-link .brand-lockup__wordmark {
+    color: var(--color-on-surface);
+  }
+
   .sidebar {
     position: sticky;
     top: 0;
@@ -21,6 +65,196 @@
     font-weight: 500;
   }
 
+  .sidebar__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+  }
+
+  .sidebar__slot--header {
+    margin-top: var(--space-4);
+  }
+
+  .sidebar__nav {
+    margin-top: var(--space-6);
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .sidebar__section-divider {
+    margin-block: var(--space-6);
+    border-top: 1px solid var(--color-outline-variant);
+  }
+
+  .sidebar__section-label {
+    margin: 0 0 var(--space-2);
+    padding-inline: var(--space-3);
+    color: var(--color-on-surface-variant);
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .sidebar__footer {
+    margin-top: auto;
+    border-top: 1px solid var(--color-outline-variant);
+    padding-top: var(--space-4);
+  }
+
+  .sidebar__footer-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-3);
+  }
+
+  .sidebar-mobile {
+    display: block;
+  }
+
+  .sidebar-mobile__topbar {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    border-bottom: 1px solid var(--color-outline-variant);
+    background: var(--color-surface-highest);
+    padding: var(--space-3) var(--space-4);
+  }
+
+  .sidebar-mobile__brand .brand-lockup__logo {
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: var(--radius-lg);
+    object-fit: cover;
+  }
+
+  .sidebar-mobile__brand .brand-lockup__wordmark {
+    color: var(--color-on-surface);
+    font-size: 1.125rem;
+    font-weight: 700;
+  }
+
+  .sidebar-mobile__panel {
+    position: fixed;
+    inset: 0;
+    z-index: 40;
+    display: flex;
+  }
+
+  .sidebar-mobile__scrim {
+    position: fixed;
+    inset: 0;
+  }
+
+  .sidebar-mobile__surface {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    width: 100%;
+    max-width: 20rem;
+    flex-direction: column;
+    background: var(--color-surface-highest);
+  }
+
+  .sidebar-mobile__close-shell {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin-right: -3rem;
+    padding-top: var(--space-2);
+  }
+
+  .sidebar-mobile__close {
+    color: var(--color-inverse-on-surface);
+  }
+
+  .sidebar-mobile__close-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .sidebar-mobile__content {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: var(--space-5) var(--space-4) var(--space-4);
+  }
+
+  .sidebar-mobile__slot--header {
+    margin-bottom: var(--space-5);
+  }
+
+  .sidebar-mobile__slot--footer {
+    border-top: 1px solid var(--color-outline-variant);
+    padding: var(--space-4);
+  }
+
+  .sidebar-mobile__nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .sidebar-mobile__link {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    border-radius: var(--radius-lg);
+    padding: 0.625rem 0.75rem;
+    color: var(--color-text-soft);
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-decoration: none;
+  }
+
+  .sidebar-mobile__link:hover,
+  .sidebar-mobile__link--active {
+    color: var(--color-primary);
+    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  }
+
+  .sidebar-mobile__icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+  }
+
+  .sidebar-mobile__section-divider {
+    margin-block: var(--space-5);
+    border-top: 1px solid var(--color-outline-variant);
+  }
+
+  .sidebar-mobile__section-label {
+    margin: 0 0 var(--space-2);
+    padding-inline: var(--space-3);
+    color: var(--color-on-surface-variant);
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  @media (min-width: 48rem) {
+    .sidebar-shell {
+      display: flex;
+    }
+
+    .sidebar-shell__desktop {
+      display: flex;
+    }
+
+    .sidebar-mobile {
+      display: none;
+    }
+  }
+
   .sidebar__toggle {
     cursor: pointer;
     pointer-events: auto;

data/app/assets/stylesheets/baldur.css

@@ -25,4 +25,5 @@
 @import "./baldur/application/components/stepper.css";
 @import "./baldur/application/components/switch.css";
 @import "./baldur/application/components/table.css";
+@import "./baldur/application/components/confirmation.css";
 @import "./baldur/application/components/timeline.css";

data/app/helpers/baldur/ui_helper.rb

@@ -165,6 +165,31 @@ module Baldur
              }.merge(options)
     end
 
+    def ui_modal_host(id:, classes: nil, &block)
+      body = block_given? ? capture(&block) : nil
+      baldur_render "baldur/components/modal_host",
+             id: id,
+             classes: classes,
+             body: body
+    end
+
+    def ui_confirmation_modal(host_id:, dialog_id:, title:, description: nil, tone: :default, confirm_label: "Confirm", cancel_label: "Cancel", confirm_button_options: {}, cancel_button_options: {}, type_to_confirm: nil, body: nil, &block)
+      body = block_given? ? capture(&block) : body
+      type_to_confirm = nil unless type_to_confirm.is_a?(Hash)
+      baldur_render "baldur/components/confirmation_modal",
+             host_id: host_id,
+             dialog_id: dialog_id,
+             title: title,
+             description: description,
+             tone: tone,
+             confirm_label: confirm_label,
+             cancel_label: cancel_label,
+             confirm_button_options: confirm_button_options,
+             cancel_button_options: cancel_button_options,
+             type_to_confirm: type_to_confirm,
+             body: body
+    end
+
     def ui_badge(text:, variant: :default, size: :sm, html_options: {})
       baldur_render "baldur/components/badge", text: text, variant: variant, size: size, html_options: html_options
     end

data/app/views/baldur/components/_confirmation_modal.html.erb

@@ -0,0 +1,99 @@
+<%
+  host_id = local_assigns.fetch(:host_id)
+  dialog_id = local_assigns.fetch(:dialog_id)
+  title = local_assigns.fetch(:title)
+  description = local_assigns[:description]
+  tone = (local_assigns[:tone] || :default).to_sym
+  confirm_label = local_assigns.fetch(:confirm_label, "Confirm")
+  cancel_label = local_assigns.fetch(:cancel_label, "Cancel")
+  confirm_button_options = local_assigns.fetch(:confirm_button_options, {})
+  cancel_button_options = local_assigns.fetch(:cancel_button_options, {})
+  type_to_confirm = local_assigns[:type_to_confirm]
+  body = local_assigns.fetch(:body, nil) unless defined?(body)
+
+  confirm_variant = tone == :danger ? :danger : :primary
+  confirm_btn_opts = { label: confirm_label, variant: confirm_variant, type: :submit }.merge(confirm_button_options.except(:data))
+  if confirm_button_options[:data].present?
+    confirm_btn_opts[:data] = confirm_button_options[:data]
+  end
+
+  cancel_btn_opts = { label: cancel_label, variant: :ghost }.merge(cancel_button_options.except(:data))
+  cancel_btn_opts[:data] = { modal_close: true }.merge(cancel_button_options[:data] || {})
+
+  has_type_to_confirm = type_to_confirm.is_a?(Hash)
+  expected_text = has_type_to_confirm ? type_to_confirm[:expected_text].to_s : nil
+  confirm_input_id = has_type_to_confirm ? "#{dialog_id}-confirm-input" : nil
+  confirm_input_label = has_type_to_confirm ? type_to_confirm[:label].to_s : nil
+  confirm_input_placeholder = has_type_to_confirm ? (type_to_confirm[:placeholder].to_s.presence || expected_text) : nil
+  confirm_input_hint = has_type_to_confirm ? type_to_confirm[:hint] : nil
+  case_sensitive = has_type_to_confirm ? (type_to_confirm[:case_sensitive] != false) : true
+
+  if has_type_to_confirm
+    confirm_btn_opts[:disabled] = true
+    confirm_btn_opts[:data] = (confirm_btn_opts[:data] || {}).merge(confirmation_target: "submit")
+  end
+%>
+<div id="<%= host_id %>"
+     class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black/40 p-4"
+     data-controller="modal<%= has_type_to_confirm ? " confirmation" : "" %>"
+     <%= has_type_to_confirm ? 'data-confirmation-case-sensitive-value="' + case_sensitive.to_s + '"' : '' %>
+     data-modal-selector-value="#<%= host_id %>"
+     data-modal="true"
+     aria-hidden="true">
+  <div id="<%= dialog_id %>" class="dialog motion-fade-scale">
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <h3 class="text-xl font-semibold text-[color:var(--color-on-surface)]">
+          <% if tone == :danger %>
+            <span class="inline-flex items-center gap-2">
+              <%= ui_icon("triangle-alert", class_name: "h-5 w-5 text-[color:var(--color-error)]") %>
+              <%= title %>
+            </span>
+          <% else %>
+            <%= title %>
+          <% end %>
+        </h3>
+        <% if description.present? %>
+          <p class="text-sm text-[color:color-mix(in srgb,var(--color-on-surface) 75%,transparent)]"><%= description %></p>
+        <% end %>
+      </div>
+      <button type="button" class="icon-button" aria-label="Close modal" data-modal-close="true">
+        <%= ui_icon("x", class_name: "h-5 w-5") %>
+      </button>
+    </div>
+    <% if body.present? %>
+      <div class="mt-4 space-y-3 text-sm text-[color:var(--color-on-surface)]">
+        <%= body %>
+      </div>
+    <% end %>
+    <% if has_type_to_confirm %>
+      <div class="mt-4 space-y-2">
+        <% if confirm_input_label.present? %>
+          <label for="<%= confirm_input_id %>" class="field__label text-sm font-medium text-[color:var(--color-on-surface)]"><%= confirm_input_label %></label>
+        <% end %>
+        <div class="text-field__input">
+          <input id="<%= confirm_input_id %>"
+                 type="text"
+                 autocomplete="off"
+                 class="text-field__control"
+                 data-confirmation-target="input"
+                 data-action="input->confirmation#validate"
+                 <%= confirm_input_placeholder.present? ? "placeholder=\"#{confirm_input_placeholder}\"".html_safe : "" %>
+                 data-modal-autofocus="true" />
+        </div>
+        <% if confirm_input_hint.present? %>
+          <p class="text-sm text-muted"><%= confirm_input_hint %></p>
+        <% end %>
+        <% if expected_text.present? %>
+          <span hidden data-confirmation-target="expectedText"><%= expected_text %></span>
+        <% end %>
+      </div>
+    <% end %>
+    <div class="mt-6 flex flex-wrap items-center gap-3">
+      <div class="ml-auto flex flex-wrap gap-3 justify-end">
+        <%= render "baldur/components/button", **cancel_btn_opts %>
+        <%= render "baldur/components/button", **confirm_btn_opts %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/baldur/components/_modal_host.html.erb

@@ -0,0 +1,10 @@
+<% classes = local_assigns[:classes] %>
+<% body = local_assigns.fetch(:body, nil) unless defined?(body) %>
+<div id="<%= id %>"
+     class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black/40 p-4 <%= classes %>"
+     data-controller="modal"
+     data-modal-selector-value="#<%= id %>"
+     data-modal="true"
+     aria-hidden="true">
+  <%= body %>
+</div>

data/app/views/baldur/components/_sidebar.html.erb

@@ -19,7 +19,7 @@
       ]
     )
   end
-  brand_markup = link_to(brand_markup, resolved_brand[:href], class: "inline-flex no-underline") if resolved_brand[:href].present?
+  brand_markup = link_to(brand_markup, resolved_brand[:href], class: "sidebar__brand-link") if resolved_brand[:href].present?
 
   render_nav_link = lambda do |link, mobile: false|
     options = link[:html_options].deep_dup
@@ -29,12 +29,12 @@
     options[:aria] = (options[:aria] || {}).merge(current: (link[:active] ? "page" : nil))
 
     if mobile
-      mobile_class = link[:active] ? "bg-primary/10 text-primary" : "text-soft hover:bg-surface-lowest"
-      options[:class] = ["flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium", mobile_class, options[:class]].compact.join(" ")
+      mobile_class = link[:active] ? "sidebar-mobile__link sidebar-mobile__link--active" : "sidebar-mobile__link"
+      options[:class] = [mobile_class, options[:class]].compact.join(" ")
       link_to(link[:path], **options) do
         safe_join(
           [
-            ui_icon(link[:icon], class_name: "h-5 w-5 shrink-0"),
+            ui_icon(link[:icon], class_name: "sidebar-mobile__icon"),
             content_tag(:span, link[:name])
           ]
         )
@@ -53,13 +53,13 @@
   end
 %>
 
-<div class="<%= ["sidebar-shell min-h-screen bg-surface-low md:flex", shell_class].compact.join(" ") %>"
+<div class="<%= ["sidebar-shell", shell_class].compact.join(" ") %>"
      data-controller="sidebar"
      data-sidebar-storage-key-value="baldur-sidebar-collapsed"
      data-sidebar-collapsed-value="<%= collapsed %>">
-  <aside class="sidebar hidden shrink-0 border-r border-[color:var(--color-outline-variant)] bg-[color:var(--color-surface)] px-3 py-4 md:flex flex-col"
+  <aside class="sidebar sidebar-shell__desktop"
          aria-label="Primary navigation">
-    <div class="sidebar__header flex items-center justify-between gap-2">
+    <div class="sidebar__header">
       <%= brand_markup %>
       <button type="button"
               class="icon-button sidebar__toggle"
@@ -72,20 +72,20 @@
     </div>
 
     <% if header_content.present? %>
-      <div class="sidebar__menu mt-4">
+      <div class="sidebar__menu sidebar__slot sidebar__slot--header">
         <%= header_content %>
       </div>
     <% end %>
 
-    <nav class="mt-6 flex flex-1 flex-col gap-1" aria-label="Primary navigation links">
+    <nav class="sidebar__nav" aria-label="Primary navigation links">
       <% primary_links.each do |link| %>
         <%= render_nav_link.call(link) %>
       <% end %>
 
       <% if secondary_links.any? %>
-        <div class="my-6 border-t border-[color:var(--color-outline-variant)]"></div>
+        <div class="sidebar__section-divider"></div>
         <% if secondary_label.present? %>
-          <p class="sidebar__section-label mb-2 px-3 text-xs font-semibold uppercase tracking-wide text-[color:var(--color-on-surface-variant)]"><%= secondary_label %></p>
+          <p class="sidebar__section-label"><%= secondary_label %></p>
         <% end %>
         <% secondary_links.each do |link| %>
           <%= render_nav_link.call(link) %>
@@ -93,9 +93,9 @@
       <% end %>
     </nav>
 
-    <% if footer_content.present? %>
-      <div class="sidebar__footer mt-auto border-t border-[color:var(--color-outline-variant)] pt-4">
-        <div class="sidebar__footer-inner flex flex-col items-start gap-3">
+  <% if footer_content.present? %>
+      <div class="sidebar__footer">
+        <div class="sidebar__footer-inner">
           <%= footer_content %>
         </div>
       </div>
@@ -104,37 +104,37 @@
     <button type="button" class="sidebar__toggle-hit-area" aria-label="Toggle navigation" data-action="click->sidebar#toggle"></button>
   </aside>
 
-  <div class="md:hidden" data-controller="mobile-sidebar">
-    <div class="sticky top-0 z-10 flex items-center justify-between border-b border-outline-variant bg-surface-highest px-4 py-3">
-      <div><%= brand_markup %></div>
+  <div class="sidebar-mobile" data-controller="mobile-sidebar">
+    <div class="sidebar-mobile__topbar">
+      <div class="sidebar-mobile__brand"><%= brand_markup %></div>
       <button type="button" class="icon-button" aria-label="Toggle navigation" data-action="mobile-sidebar#toggle">
         <%= ui_icon("menu", class_name: "h-6 w-6") %>
       </button>
     </div>
 
-    <div id="mobile-sidebar" class="hidden fixed inset-0 z-40 flex" data-mobile-sidebar-target="panel">
-      <div class="fixed inset-0 bg-scrim" data-action="click->mobile-sidebar#close"></div>
-      <div class="relative flex w-full max-w-xs flex-1 flex-col bg-surface-highest">
-        <div class="absolute right-0 top-0 -mr-12 pt-2">
-          <button type="button" class="icon-button text-on-inverse" aria-label="Close navigation" data-action="mobile-sidebar#close">
-            <%= ui_icon("x", class_name: "h-6 w-6 text-on-inverse") %>
+    <div id="mobile-sidebar" class="sidebar-mobile__panel hidden" data-mobile-sidebar-target="panel">
+      <div class="bg-scrim sidebar-mobile__scrim" data-action="click->mobile-sidebar#close"></div>
+      <div class="sidebar-mobile__surface">
+        <div class="sidebar-mobile__close-shell">
+          <button type="button" class="icon-button sidebar-mobile__close" aria-label="Close navigation" data-action="mobile-sidebar#close">
+            <%= ui_icon("x", class_name: "sidebar-mobile__close-icon") %>
           </button>
         </div>
 
-        <div class="flex-1 overflow-y-auto px-4 pb-4 pt-5">
+        <div class="sidebar-mobile__content">
           <% if mobile_header_content.present? %>
-            <div class="mb-5"><%= mobile_header_content %></div>
+            <div class="sidebar-mobile__slot sidebar-mobile__slot--header"><%= mobile_header_content %></div>
           <% end %>
 
-          <nav class="space-y-1" aria-label="Mobile primary navigation links">
+          <nav class="sidebar-mobile__nav" aria-label="Mobile primary navigation links">
             <% primary_links.each do |link| %>
               <%= render_nav_link.call(link, mobile: true) %>
             <% end %>
 
             <% if secondary_links.any? %>
-              <div class="my-5 border-t border-outline-variant"></div>
+              <div class="sidebar-mobile__section-divider"></div>
               <% if secondary_label.present? %>
-                <p class="mb-2 px-3 text-xs font-semibold uppercase tracking-wide text-on-surface-variant"><%= secondary_label %></p>
+                <p class="sidebar-mobile__section-label"><%= secondary_label %></p>
               <% end %>
               <% secondary_links.each do |link| %>
                 <%= render_nav_link.call(link, mobile: true) %>
@@ -144,7 +144,7 @@
         </div>
 
         <% if mobile_footer_content.present? %>
-          <div class="border-t border-outline-variant px-4 py-4">
+          <div class="sidebar-mobile__slot sidebar-mobile__slot--footer">
             <%= mobile_footer_content %>
           </div>
         <% end %>
@@ -152,7 +152,7 @@
     </div>
   </div>
 
-  <div class="flex min-w-0 flex-1 flex-col">
+  <div class="sidebar-shell__main">
     <%= body_content %>
   </div>
 </div>

data/baldur.gemspec

@@ -4,8 +4,8 @@ Gem::Specification.new do |spec|
   spec.name        = "baldur"
   spec.version     = Baldur::VERSION
   spec.authors     = [ "Varun Murkar" ]
-  spec.summary     = "Reusable Rails UI engine for same-stack application interfaces"
-  spec.description = "Baldur packages reusable Rails view helpers, components, styles, and Stimulus controllers."
+  spec.summary     = "Batteries-included Rails UI engine for the importmap, Stimulus, Tailwind stack"
+  spec.description = "Baldur helps Rails teams ship polished UI faster with install generators, reusable ui_* helpers, Tailwind components, and Stimulus wiring for apps using Propshaft, importmap-rails, stimulus-rails, and tailwindcss-rails."
   spec.homepage    = "https://github.com/varunmurkar/baldur"
   spec.license     = "MIT"
   spec.metadata = {
@@ -31,6 +31,6 @@ Gem::Specification.new do |spec|
 
   spec.add_dependency "importmap-rails"
   spec.add_dependency "lucide-rails"
-  spec.add_dependency "rails", ">= 8.1.0"
-  spec.add_dependency "tailwindcss-rails", ">= 4.4.0"
+  spec.add_dependency "rails", ">= 7.0.0"
+  spec.add_dependency "tailwindcss-rails", ">= 4.3.0"
 end

data/lib/baldur/version.rb

@@ -1,3 +1,3 @@
 module Baldur
-  VERSION = "0.1.7".freeze
+  VERSION = "0.2.0".freeze
 end

data/lib/generators/baldur/install/install_generator.rb

@@ -7,6 +7,7 @@ module Baldur
 
       CORE_CONTROLLERS = %w[
         accordion
+        confirmation
         date_field
         details_menu
         form_submit