maquina-components 0.4.3 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b709941be68c552761043a38b7359796b7bc644af13827fbd47b2f40eab90fb9
-  data.tar.gz: 931d38949a68e47881e9dc417786a412e5fb16ed02a23539d44259f452249913
+  metadata.gz: d5288e1d8b1501f99a2b94c8d296e4babbe5e1d9d42f41d6f969dc1742e78c48
+  data.tar.gz: f4b31f8e38c025b05fc9a12a8c16d13b1fc62cfee10ce4596711a935203c39c4
 SHA512:
-  metadata.gz: 3b063e95e3ea3c7d4fd649b75cd00696ac33ac88025c3ebab14bea256f7456005a81b8e0c7f3b70f8904f73cc987c4d5cc22a707cbef48f3d10dafa21a7d9ec1
-  data.tar.gz: 80b31cd01a92351baedec4a87509b494c6dbfe09cb42bb71c7a59444cca0cc48e4b020684d9c450c1b02568a352f0b2781654c5333a84a0c5af7ea38940f91a6
+  metadata.gz: 0c9977c27048fb814c4158033afa8bcfd538a257531d94cfe07a9f35dc623dda73503d430fea93947f026caf55ab9b8237423a010af0677f2d637b3abebd6138
+  data.tar.gz: 51c6744241d753e6b022c481fead7ad3b47725ac52cddf43a655f78a94c066f69b412a6f4f347a93c8e6935221ba743a6807035ebd86c1ffdd036605a6c30b80

data/README.md

@@ -76,6 +76,8 @@ This will:
 - Add theme variables (light + dark mode)
 - Create a helper file for icon customization
 
+All engine helpers (`icon_for`, `sidebar_open?`, `toast_flash_messages`, etc.) are automatically available in your views without any additional configuration.
+
 ### 3. Use Components
 
 ```erb
@@ -117,6 +119,19 @@ bin/rails generate maquina_components:install --skip-theme
 bin/rails generate maquina_components:install --skip-helper
 ```
 
+### Scaffold Templates
+
+Copy ERB scaffold templates into your application so Rails' built-in `scaffold`
+generator produces maquina_components-styled views:
+
+```bash
+bin/rails generate maquina_components:scaffold_templates
+```
+
+This installs `index`, `show`, `new`, `edit`, `_form`, and partial templates to
+`lib/templates/erb/scaffold/`. After running it, `rails generate scaffold ModelName field:type`
+generates views built with maquina_components. Customize the templates as needed.
+
 **Prerequisite:** [tailwindcss-rails](https://github.com/rails/tailwindcss-rails) must be installed first.
 
 ---
@@ -155,6 +170,7 @@ bin/rails generate maquina_components:install --skip-helper
 | **Calendar** | Inline date picker with single/range selection | [Calendar](https://maquina.app/documentation/components/calendar/) |
 | **Combobox** | Searchable dropdown with keyboard navigation | [Combobox](https://maquina.app/documentation/components/combobox/) |
 | **Date Picker** | Popover-based date selection | [Date Picker](https://maquina.app/documentation/components/date-picker/) |
+| **Drawer** | Slide-out panel with overlay and keyboard shortcut | [Drawer](https://maquina.app/documentation/components/drawer/) |
 | **Toggle Group** | Single/multiple selection button group | [Toggle Group](https://maquina.app/documentation/components/toggle-group/) |
 
 ### Feedback Components

data/app/assets/stylesheets/drawer.css

@@ -0,0 +1,120 @@
+/* ===== Drawer Component Styles ===== */
+
+/* ===== Provider (Wrapper) ===== */
+[data-component="drawer"] {
+  @apply flex w-full;
+}
+
+/* ===== Drawer Root ===== */
+[data-drawer-part="root"] {
+  @apply block text-foreground;
+}
+
+/* Prevent transitions on initial load */
+[data-drawer-part="root"].drawer-loading,
+[data-drawer-part="root"].drawer-loading * {
+  transition: none !important;
+}
+
+/* ===== Drawer Backdrop (overlay) ===== */
+[data-drawer-part="backdrop"] {
+  @apply fixed inset-0 z-40 hidden bg-black opacity-0;
+  transition: opacity 300ms;
+}
+
+[data-drawer-part="backdrop"][data-state="visible"] {
+  @apply block opacity-60;
+}
+
+/* ===== Drawer Panel (fixed positioned) ===== */
+[data-drawer-part="panel"] {
+  @apply fixed inset-y-0 z-50 flex h-full w-80 flex-col;
+  @apply bg-background shadow-lg;
+  transition: right 300ms ease-in-out, left 300ms ease-in-out;
+}
+
+[data-drawer-part="root"][data-side="left"] [data-drawer-part="panel"] {
+  @apply left-0;
+  right: auto;
+}
+
+[data-drawer-part="root"][data-side="right"] [data-drawer-part="panel"] {
+  @apply right-0;
+  left: auto;
+}
+
+/* Closed state - slide out */
+[data-drawer-part="root"][data-side="left"][data-state="closed"] [data-drawer-part="panel"] {
+  @apply -translate-x-full;
+}
+
+[data-drawer-part="root"][data-side="right"][data-state="closed"] [data-drawer-part="panel"] {
+  @apply translate-x-full;
+}
+
+/* ===== Drawer Inner Content Wrapper ===== */
+[data-drawer-part="inner"] {
+  @apply flex h-full w-full flex-col;
+}
+
+/* ===== Drawer Header ===== */
+[data-drawer-part="header"] {
+  @apply flex shrink-0 items-center justify-between gap-2 border-b px-4 py-3;
+  border-color: var(--border);
+}
+
+/* ===== Drawer Content (scrollable area) ===== */
+[data-drawer-part="content"] {
+  @apply flex min-h-0 flex-1 flex-col gap-2 overflow-auto p-4;
+}
+
+/* ===== Drawer Footer ===== */
+[data-drawer-part="footer"] {
+  @apply flex shrink-0 flex-col gap-2 border-t p-4;
+  border-color: var(--border);
+}
+
+/* ===== Drawer Trigger ===== */
+
+[data-drawer-part="trigger"]:hover {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+/* ===== Drawer Title ===== */
+[data-drawer-part="title"] {
+  @apply text-lg font-semibold;
+}
+
+/* ===== Drawer Description ===== */
+[data-drawer-part="description"] {
+  @apply text-sm text-muted-foreground;
+}
+
+/* ===== Drawer Close Button ===== */
+[data-drawer-part="close"] {
+  @apply inline-flex items-center justify-center rounded-md p-1;
+  @apply outline-hidden ring-ring focus-visible:ring-2;
+  @apply transition-colors;
+  color: var(--foreground);
+}
+
+[data-drawer-part="close"]:hover {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+[data-drawer-part="close"] svg {
+  @apply size-4;
+}
+
+/* ===== Drawer Section ===== */
+[data-drawer-part="section"] {
+  @apply flex flex-col gap-2;
+}
+
+/* ===== Drawer Separator ===== */
+[data-drawer-part="separator"] {
+  @apply mx-4 my-2 w-auto;
+  background-color: var(--border);
+}

data/app/assets/tailwind/maquina_components_engine/engine.css

@@ -7,6 +7,7 @@
 @import "../../stylesheets/card.css";
 @import "../../stylesheets/combobox.css";
 @import "../../stylesheets/date_picker.css";
+@import "../../stylesheets/drawer.css";
 @import "../../stylesheets/dropdown_menu.css";
 @import "../../stylesheets/empty.css";
 @import "../../stylesheets/form.css";

data/app/helpers/maquina_components/breadcrumbs_helper.rb

@@ -44,8 +44,8 @@ module MaquinaComponents
     #     "Button"
     #   )
     #
-    def responsive_breadcrumbs(links = {}, current_page = nil, css_classes: "")
-      render "components/breadcrumbs", css_classes: css_classes, responsive: true do
+    def responsive_breadcrumbs(links = {}, current_page = nil, css_classes: "", collapse_after: 0)
+      render "components/breadcrumbs", css_classes: css_classes, responsive: true, collapse_after: collapse_after do
         render "components/breadcrumbs/list" do
           build_breadcrumb_items(links, current_page, responsive: true)
         end

data/app/helpers/maquina_components/drawer_helper.rb

@@ -0,0 +1,19 @@
+module MaquinaComponents
+  module DrawerHelper
+    def drawer_state(cookie_name = "drawer_state")
+      cookie_value = cookies[cookie_name]
+
+      return :open if cookie_value.nil?
+
+      (cookie_value == "true") ? :open : :closed
+    end
+
+    def drawer_open?(cookie_name = "drawer_state")
+      drawer_state(cookie_name) == :open
+    end
+
+    def drawer_closed?(cookie_name = "drawer_state")
+      drawer_state(cookie_name) == :closed
+    end
+  end
+end

data/app/helpers/maquina_components/icons_helper.rb

@@ -26,8 +26,17 @@ module MaquinaComponents
     private
 
     def apply_icon_options(svg, options)
+      return svg.html_safe unless options&.any?
+
       css_classes = options[:class]
-      svg = svg.gsub('class="', "class=\"#{css_classes} ") if css_classes
+      if css_classes&.is_a?(String)
+        escaped_css_classes = ERB::Util.html_escape(css_classes)
+        svg = if /\bclass\s*=\s*(['"])(.*?)\1/.match?(svg)
+          svg.sub(/\bclass\s*=\s*(['"])(.*?)\1/, "class=\\1#{escaped_css_classes}\\1")
+        else
+          svg.sub(/<svg(?=(\s|>))/, "<svg class=\"#{escaped_css_classes}\"")
+        end
+      end
 
       if options[:stroke_width]
         svg = svg.gsub('stroke-width="2"', "stroke-width=\"#{options[:stroke_width]}\"")

data/app/javascript/controllers/breadcrumb_controller.js

@@ -2,6 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["item", "ellipsis", "ellipsisSeparator"]
+  static values = { collapseAfter: { type: Number, default: 0 } }
 
   connect() {
     this._dropdown = null
@@ -59,15 +60,35 @@ export default class extends Controller {
       if (sep) sep.classList.remove('hidden')
     })
 
+    // Count-based collapsing: force-collapse when total items exceed threshold
+    // items are middle targets only; total visible = middle targets + first + last (2)
+    const totalItems = items.length + 2
+    if (this.collapseAfterValue > 0 && totalItems > this.collapseAfterValue) {
+      ellipsis.classList.remove('hidden')
+      if (ellipsisSeparator) ellipsisSeparator.classList.remove('hidden')
+
+      // collapseAfterValue includes first + last, so middle budget = collapseAfterValue - 2
+      const maxMiddleVisible = Math.max(this.collapseAfterValue - 2, 0)
+      let visibleMiddle = items.length
+
+      for (let i = items.length - 1; i >= 0 && visibleMiddle > maxMiddleVisible; i--) {
+        items[i].classList.add('hidden')
+        const sep = this._adjacentSeparator(items[i])
+        if (sep) sep.classList.add('hidden')
+        visibleMiddle--
+      }
+    }
+
     // Check overflow using scrollWidth vs clientWidth
     if (list.scrollWidth > list.clientWidth) {
       ellipsis.classList.remove('hidden')
       if (ellipsisSeparator) ellipsisSeparator.classList.remove('hidden')
 
       // Hide middle items one at a time until it fits
-      for (let i = items.length - 1; i >= 0; i--) {
-        items[i].classList.add('hidden')
-        const sep = this._adjacentSeparator(items[i])
+      const visibleItems = items.filter(item => !item.classList.contains('hidden'))
+      for (let i = visibleItems.length - 1; i >= 0; i--) {
+        visibleItems[i].classList.add('hidden')
+        const sep = this._adjacentSeparator(visibleItems[i])
         if (sep) sep.classList.add('hidden')
         if (list.scrollWidth <= list.clientWidth) break
       }

data/app/javascript/controllers/drawer_controller.js

@@ -0,0 +1,253 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Drawer Controller
+ *
+ * Manages drawer state (slide-out panel), keyboard shortcuts, and persistence.
+ * Works with drawer_trigger_controller via Stimulus outlets.
+ *
+ * @example
+ * <div data-controller="drawer" data-outlet="drawer">
+ *   <!-- drawer content -->
+ * </div>
+ */
+export default class extends Controller {
+  static values = {
+    open: { type: Boolean, default: false },
+    defaultOpen: { type: Boolean, default: false },
+    cookieName: { type: String, default: "drawer_state" },
+    cookieMaxAge: { type: Number, default: 60 * 60 * 24 * 365 },
+    keyboardShortcut: { type: String, default: "d" }
+  }
+
+  static targets = ["drawer", "container", "backdrop"]
+
+  initialize() {
+    const cookieValue = this.getCookie(this.cookieNameValue)
+    this.openValue = cookieValue !== null
+      ? cookieValue === "true"
+      : this.defaultOpenValue
+
+    this._morphing = false
+  }
+
+  connect() {
+    this.resizeHandler = this.debounce(this.checkScreenSize.bind(this), 150)
+    window.addEventListener("resize", this.resizeHandler)
+
+    this.boundTeardown = this.teardown.bind(this)
+    this.boundBeforeMorphElement = this.beforeMorphElement.bind(this)
+    this.boundHandleMorph = this.handleMorph.bind(this)
+    document.addEventListener("turbo:before-cache", this.boundTeardown)
+    document.addEventListener("turbo:before-morph-element", this.boundBeforeMorphElement)
+    document.addEventListener("turbo:morph", this.boundHandleMorph)
+
+    this.updateStateImmediate()
+  }
+
+  disconnect() {
+    window.removeEventListener("resize", this.resizeHandler)
+    document.removeEventListener("turbo:before-cache", this.boundTeardown)
+    document.removeEventListener("turbo:before-morph-element", this.boundBeforeMorphElement)
+    document.removeEventListener("turbo:morph", this.boundHandleMorph)
+  }
+
+  // ============================================================================
+  // Turbo Cache Teardown
+  // ============================================================================
+
+  teardown() {
+    this.openValue = false
+
+    if (this.hasBackdropTarget) {
+      this.backdropTarget.setAttribute("data-state", "hidden")
+      this.backdropTarget.classList.add("hidden")
+    }
+
+    this.unlockScroll()
+  }
+
+  beforeMorphElement(event) {
+    if (event.target === this.element) {
+      this._morphing = true
+    }
+  }
+
+  handleMorph() {
+    const cookieValue = this.getCookie(this.cookieNameValue)
+
+    if (cookieValue !== null) {
+      this.openValue = cookieValue === "true"
+    }
+
+    if (this.hasDrawerTarget) {
+      this.drawerTarget.classList.remove("drawer-loading")
+    }
+
+    this.updateState()
+    this._morphing = false
+  }
+
+  // ============================================================================
+  // Keyboard Shortcut Actions
+  // ============================================================================
+
+  toggleWithKeyboard(event) {
+    this.toggle()
+  }
+
+  // ============================================================================
+  // State Management
+  // ============================================================================
+
+  openValueChanged(new_value, old_value) {
+    if (new_value === old_value) return
+    if (this._morphing) return
+
+    this.updateState()
+    this.persistState()
+    this.dispatchStateChange()
+  }
+
+  updateState() {
+    if (!this.hasDrawerTarget) return
+
+    const isOpen = this.openValue
+    const state = isOpen ? "open" : "closed"
+
+    this.drawerTarget.setAttribute("data-state", state)
+
+    if (this.hasBackdropTarget) {
+      const backdropState = isOpen ? "visible" : "hidden"
+      this.backdropTarget.setAttribute("data-state", backdropState)
+
+      if (backdropState === "visible") {
+        this.backdropTarget.classList.remove("hidden")
+      } else {
+        setTimeout(() => {
+          if (this.backdropTarget.getAttribute("data-state") === "hidden") {
+            this.backdropTarget.classList.add("hidden")
+          }
+        }, 300)
+      }
+    }
+
+    if (isOpen) {
+      this.lockScroll()
+    } else {
+      this.unlockScroll()
+    }
+  }
+
+  updateStateImmediate() {
+    if (!this.hasDrawerTarget) return
+
+    this.updateState()
+
+    requestAnimationFrame(() => {
+      this.drawerTarget.classList.remove("drawer-loading")
+    })
+  }
+
+  // ============================================================================
+  // Public Actions
+  // ============================================================================
+
+  toggle() {
+    this.openValue = !this.openValue
+  }
+
+  open() {
+    this.openValue = true
+  }
+
+  close() {
+    this.openValue = false
+  }
+
+  backdropClick(event) {
+    if (this.openValue) {
+      this.close()
+    }
+  }
+
+  // ============================================================================
+  // Persistence
+  // ============================================================================
+
+  persistState() {
+    this.setCookie(
+      this.cookieNameValue,
+      this.openValue.toString(),
+      this.cookieMaxAgeValue
+    )
+  }
+
+  getCookie(name) {
+    const value = `; ${document.cookie}`
+    const parts = value.split(`; ${name}=`)
+    if (parts.length === 2) {
+      return parts.pop().split(";").shift()
+    }
+    return null
+  }
+
+  setCookie(name, value, maxAge) {
+    document.cookie = `${name}=${value}; path=/; max-age=${maxAge}; SameSite=Lax`
+  }
+
+  // ============================================================================
+  // Scroll Lock
+  // ============================================================================
+
+  lockScroll() {
+    this.scrollPosition = window.pageYOffset
+    document.body.style.overflow = "hidden"
+    document.body.style.position = "fixed"
+    document.body.style.top = `-${this.scrollPosition}px`
+    document.body.style.width = "100%"
+  }
+
+  unlockScroll() {
+    document.body.style.overflow = ""
+    document.body.style.position = ""
+    document.body.style.top = ""
+    document.body.style.width = ""
+    if (this.scrollPosition !== undefined) {
+      window.scrollTo(0, this.scrollPosition)
+    }
+  }
+
+  // ============================================================================
+  // Events
+  // ============================================================================
+
+  dispatchStateChange() {
+    this.dispatch("stateChanged", {
+      detail: {
+        open: this.openValue,
+        state: this.openValue ? "open" : "closed"
+      },
+      bubbles: true
+    })
+  }
+
+  // ============================================================================
+  // Utilities
+  // ============================================================================
+
+  checkScreenSize() {
+  }
+
+  debounce(func, wait) {
+    let timeout
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout)
+        func(...args)
+      }
+      clearTimeout(timeout)
+      timeout = setTimeout(later, wait)
+    }
+  }
+}

data/app/javascript/controllers/drawer_trigger_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Drawer Trigger Controller
+ *
+ * Triggers drawer toggle via Stimulus outlets.
+ * Can be placed anywhere on the page - finds drawer via outlet selector.
+ *
+ * @example
+ * <button 
+ *   data-controller="drawer-trigger"
+ *   data-action="click->drawer-trigger#triggerClick"
+ *   data-drawer-trigger-drawer-outlet="[data-outlet='drawer']"
+ * >
+ *   Toggle
+ * </button>
+ */
+export default class extends Controller {
+  static outlets = ["drawer"]
+
+  triggerClick() {
+    if (this.hasDrawerOutlet) {
+      this.drawerOutlets.forEach(outlet => {
+        outlet.toggle()
+      })
+    }
+  }
+}

data/app/views/components/_breadcrumbs.html.erb

@@ -1,10 +1,13 @@
-<%# locals: (css_classes: "", responsive: false, **html_options) %>
+<%# locals: (css_classes: "", responsive: false, collapse_after: 0, **html_options) %>
 <% merged_data = (html_options.delete(:data) || {}).merge(
     component: :breadcrumbs
   )
-  
+
   if responsive
     merged_data[:controller] = "breadcrumb"
+    if collapse_after > 0
+      merged_data[:breadcrumb_collapse_after_value] = collapse_after
+    end
   end %>
 
 <nav

data/app/views/components/_drawer.html.erb

@@ -0,0 +1,31 @@
+<%# locals: (id: nil, state: :closed, side: :right, css_classes: "", **html_options) %>
+<% stable_id = id || "drawer-#{side}"
+   merged_data = (html_options.delete(:data) || {}).merge(
+     drawer_part: :root,
+     drawer_target: "drawer",
+     state: state,
+     side: side
+   ) %>
+<aside
+  id="<%= stable_id %>"
+  class="group peer drawer-loading <%= css_classes %>"
+  <%= tag.attributes(data: merged_data, **html_options) %>
+>
+  <%# Backdrop overlay %>
+  <div
+    id="<%= stable_id %>-backdrop"
+    data-drawer-part="backdrop"
+    data-drawer-target="backdrop"
+    data-action="click->drawer#backdropClick"
+    ></div>
+  <%# Drawer container (fixed positioned) %>
+  <div
+    id="<%= stable_id %>-panel"
+    data-drawer-part="panel"
+  >
+    <%# Inner drawer content wrapper %>
+    <div id="<%= stable_id %>-inner" data-drawer-part="inner">
+      <%= yield %>
+    </div>
+  </div>
+</aside>

data/app/views/components/drawer/_close.html.erb

@@ -0,0 +1,14 @@
+<%# locals: (show_icon: true, css_classes: "btn btn-ghost", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    drawer_part: :close,
+    action: "click->drawer#close"
+  ) %>
+<%= content_tag :button, type: :button, class: css_classes, data: merged_data, **html_options do %>
+  <% if show_icon %> 
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
+      <path d="m6 6 12 12"></path>
+    </svg>
+  <% end %>
+  <%= yield %>
+<% end %>

data/app/views/components/drawer/_content.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    drawer_part: :content
+  ) %>
+<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/drawer/_footer.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    drawer_part: :footer
+  ) %>
+<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/drawer/_header.html.erb

@@ -0,0 +1,12 @@
+<%# locals: (show_close: true, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    drawer_part: :header
+  ) %>
+<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+  <div class="flex-1">
+    <%= yield %>
+  </div>
+  <% if show_close %>
+    <%= render "components/drawer/close", css_classes: "btn btn-ghost btn-icon-sm" %>
+  <% end %>
+<% end %>

data/app/views/components/drawer/_provider.html.erb

@@ -0,0 +1,14 @@
+<%# locals: (id: nil, default_open: false, css_classes: "", cookie_name: "drawer_state", keyboard_shortcut: "d", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :drawer,
+    controller: "drawer",
+    outlet: "drawer",
+    drawer_default_open_value: default_open,
+    drawer_open_value: default_open,
+    drawer_cookie_name_value: cookie_name,
+    drawer_keyboard_shortcut_value: keyboard_shortcut,
+    action: "keydown.meta+#{keyboard_shortcut}@window->drawer#toggleWithKeyboard keydown.ctrl+#{keyboard_shortcut}@window->drawer#toggleWithKeyboard"
+  ) %>
+<%= content_tag :div, id: id || "drawer-provider", class: css_classes, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/drawer/_trigger.html.erb

@@ -0,0 +1,14 @@
+<%# locals: (variant: :default, size: :default, icon_name: nil, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    drawer_part: :trigger,
+    controller: "drawer-trigger",
+    action: "click->drawer-trigger#triggerClick",
+    drawer_trigger_drawer_outlet: "[data-outlet='drawer']"
+  ) %>
+<% button_data = merged_data.merge(
+    component: "button"
+  ) %>
+<%= content_tag :button, type: :button, class: css_classes, data: button_data, **html_options do %>
+  <%= icon_for(icon_name) if icon_name %>
+  <%= yield %>
+<% end %>

data/lib/generators/maquina_components/install/templates/maquina_components_helper.rb.tt

@@ -6,9 +6,16 @@
 # Override methods here to integrate with your application's icon system,
 # sidebar state management, and other customizations.
 #
+# Engine helper modules are included below to make their methods available
+# in your views (icon_for, sidebar_open?, toast_flash_messages, etc.).
+#
 # Documentation: https://github.com/maquina-app/maquina_components
 #
 module MaquinaComponentsHelper
+  include MaquinaComponents::IconsHelper
+  include MaquinaComponents::SidebarHelper
+  include MaquinaComponents::ToastHelper
+
   # Icon Override
   #
   # Override this method to use your own icon system (Heroicons, Lucide, etc.)

data/lib/generators/maquina_components/scaffold_templates/scaffold_templates_generator.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require "rails/generators/base"
+
+module MaquinaComponents
+  module Generators
+    class ScaffoldTemplatesGenerator < Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      desc "Copy maquina_components scaffold templates to your application"
+
+      TEMPLATE_FILES = %w[
+        _form.html.erb.tt
+        edit.html.erb.tt
+        index.html.erb.tt
+        new.html.erb.tt
+        partial.html.erb.tt
+        show.html.erb.tt
+      ].freeze
+
+      def copy_templates
+        TEMPLATE_FILES.each do |filename|
+          copy_file filename, "lib/templates/erb/scaffold/#{filename}"
+        end
+      end
+
+      def show_post_install_message
+        say ""
+        say "Scaffold templates installed!", :green
+        say ""
+        say "Rails will now use maquina_components when you run:"
+        say "  rails generate scaffold ModelName field:type"
+        say ""
+        say "Templates are in lib/templates/erb/scaffold/"
+        say "Feel free to customize them for your application."
+        say ""
+      end
+    end
+  end
+end

data/lib/generators/maquina_components/scaffold_templates/templates/_form.html.erb.tt

@@ -0,0 +1,49 @@
+<%%= form_with(model: <%= model_resource_name %>, class: "space-y-4") do |form| %>
+  <%% if <%= singular_table_name %>.errors.any? %>
+    <%%= render "components/alert", variant: :destructive do %>
+      <%%= render "components/alert/title", text: "<%%= pluralize(<%= singular_table_name %>.errors.count, 'error') %> prohibited this <%= singular_table_name %> from being saved:" %>
+      <%%= render "components/alert/description" do %>
+        <ul class="list-disc list-inside mt-2">
+          <%% <%= singular_table_name %>.errors.each do |error| %>
+            <li><%%= error.full_message %></li>
+          <%% end %>
+        </ul>
+      <%% end %>
+    <%% end %>
+  <%% end %>
+
+<% attributes.each do |attribute| -%>
+  <div class="space-y-2">
+<% if attribute.password_digest? -%>
+    <%%= form.label :password %>
+    <%%= form.password_field :password, data: { component: "input" } %>
+  </div>
+
+  <div class="space-y-2">
+    <%%= form.label :password_confirmation %>
+    <%%= form.password_field :password_confirmation, data: { component: "input" } %>
+<% elsif attribute.attachments? -%>
+    <%%= form.label :<%= attribute.column_name %> %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, multiple: true, data: { component: "input" } %>
+<% elsif attribute.field_type == :text_area -%>
+    <%%= form.label :<%= attribute.column_name %> %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, data: { component: "textarea" } %>
+<% elsif attribute.field_type == :check_box -%>
+    <div class="flex items-center gap-2">
+      <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, data: { component: "checkbox" } %>
+      <%%= form.label :<%= attribute.column_name %> %>
+    </div>
+<% elsif attribute.field_type == :select -%>
+    <%%= form.label :<%= attribute.column_name %> %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, [], {}, data: { component: "select" } %>
+<% else -%>
+    <%%= form.label :<%= attribute.column_name %> %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, data: { component: "input" } %>
+<% end -%>
+  </div>
+
+<% end -%>
+  <div class="flex items-center gap-4 pt-4">
+    <%%= form.submit data: { component: "button", variant: "primary" } %>
+  </div>
+<%% end %>

data/lib/generators/maquina_components/scaffold_templates/templates/edit.html.erb.tt

@@ -0,0 +1,29 @@
+<%% content_for :title, "Editing <%= human_name.downcase %>" %>
+
+<%% content_for :breadcrumbs do %>
+  <%%= render "components/breadcrumbs" do %>
+    <%%= render "components/breadcrumbs/list" do %>
+      <%%= render "components/breadcrumbs/item" do %>
+        <%%= render "components/breadcrumbs/link", href: <%= index_helper(type: :path) %>, text: "<%= human_name.pluralize %>" %>
+      <%% end %>
+      <%%= render "components/breadcrumbs/item" do %>
+        <%%= render "components/breadcrumbs/link", href: <%= model_resource_name(prefix: "@") %>, text: "<%= human_name %>" %>
+      <%% end %>
+      <%%= render "components/breadcrumbs/item" do %>
+        <%%= render "components/breadcrumbs/page", text: "Edit" %>
+      <%% end %>
+    <%% end %>
+  <%% end %>
+<%% end %>
+
+<div class="space-y-6">
+  <%%= render "components/card" do %>
+    <%%= render "components/card/header" do %>
+      <%%= render "components/card/title", text: "Editing <%= human_name.downcase %>" %>
+    <%% end %>
+
+    <%%= render "components/card/content" do %>
+      <%%= render "form", <%= singular_table_name %>: @<%= singular_table_name %> %>
+    <%% end %>
+  <%% end %>
+</div>

data/lib/generators/maquina_components/scaffold_templates/templates/index.html.erb.tt

@@ -0,0 +1,58 @@
+<%% content_for :title, "<%= human_name.pluralize %>" %>
+
+<div class="space-y-6">
+  <%%= render "components/card" do %>
+    <%%= render "components/card/header", layout: :row do %>
+      <div>
+        <%%= render "components/card/title", text: "<%= human_name.pluralize %>" %>
+        <%%= render "components/card/description", text: "<%%= @<%= plural_table_name %>.size %> record(s)" %>
+      </div>
+      <%%= render "components/card/action" do %>
+        <%%= link_to "New <%= human_name.downcase %>", <%= new_helper(type: :path) %>, data: { component: "button", variant: "primary", size: "sm" } %>
+      <%% end %>
+    <%% end %>
+
+    <%%= render "components/card/content" do %>
+      <%% if @<%= plural_table_name %>.any? %>
+        <%%= render "components/table" do %>
+          <%%= render "components/table/header" do %>
+            <%%= render "components/table/row" do %>
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+              <%%= render "components/table/head" do %><%= attribute.human_name %><%% end %>
+<% end -%>
+              <%%= render "components/table/head" do %><%% end %>
+            <%% end %>
+          <%% end %>
+          <%%= render "components/table/body" do %>
+            <%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
+              <%%= render "components/table/row" do %>
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+<% if attribute.attachment? -%>
+                <%%= render "components/table/cell" do %><%%= link_to <%= singular_table_name %>.<%= attribute.column_name %>.filename, <%= singular_table_name %>.<%= attribute.column_name %> if <%= singular_table_name %>.<%= attribute.column_name %>.attached? %><%% end %>
+<% elsif attribute.attachments? -%>
+                <%%= render "components/table/cell" do %><%%= <%= singular_table_name %>.<%= attribute.column_name %>.count %> file(s)<%% end %>
+<% else -%>
+                <%%= render "components/table/cell" do %><%%= <%= singular_table_name %>.<%= attribute.column_name %> %><%% end %>
+<% end -%>
+<% end -%>
+                <%%= render "components/table/cell" do %>
+                  <%%= link_to "Show this <%= human_name.downcase %>", <%= model_resource_name(singular_table_name) %>, data: { component: "button", variant: "ghost", size: "sm" } %>
+                <%% end %>
+              <%% end %>
+            <%% end %>
+          <%% end %>
+        <%% end %>
+      <%% else %>
+        <%%= render "components/empty" do %>
+          <%%= render "components/empty/header" do %>
+            <%%= render "components/empty/title", text: "No <%= human_name.pluralize.downcase %> yet" %>
+            <%%= render "components/empty/description", text: "Get started by creating a new <%= human_name.downcase %>." %>
+          <%% end %>
+          <%%= render "components/empty/content" do %>
+            <%%= link_to "New <%= human_name.downcase %>", <%= new_helper(type: :path) %>, data: { component: "button", variant: "primary" } %>
+          <%% end %>
+        <%% end %>
+      <%% end %>
+    <%% end %>
+  <%% end %>
+</div>

data/lib/generators/maquina_components/scaffold_templates/templates/new.html.erb.tt

@@ -0,0 +1,26 @@
+<%% content_for :title, "New <%= human_name.downcase %>" %>
+
+<%% content_for :breadcrumbs do %>
+  <%%= render "components/breadcrumbs" do %>
+    <%%= render "components/breadcrumbs/list" do %>
+      <%%= render "components/breadcrumbs/item" do %>
+        <%%= render "components/breadcrumbs/link", href: <%= index_helper(type: :path) %>, text: "<%= human_name.pluralize %>" %>
+      <%% end %>
+      <%%= render "components/breadcrumbs/item" do %>
+        <%%= render "components/breadcrumbs/page", text: "New" %>
+      <%% end %>
+    <%% end %>
+  <%% end %>
+<%% end %>
+
+<div class="space-y-6">
+  <%%= render "components/card" do %>
+    <%%= render "components/card/header" do %>
+      <%%= render "components/card/title", text: "New <%= human_name.downcase %>" %>
+    <%% end %>
+
+    <%%= render "components/card/content" do %>
+      <%%= render "form", <%= singular_table_name %>: @<%= singular_table_name %> %>
+    <%% end %>
+  <%% end %>
+</div>

data/lib/generators/maquina_components/scaffold_templates/templates/partial.html.erb.tt

@@ -0,0 +1,17 @@
+<div id="<%%= dom_id <%= singular_name %> %>">
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+  <div>
+    <strong class="text-sm font-medium text-muted-foreground"><%= attribute.human_name %>:</strong>
+<% if attribute.attachment? -%>
+    <%%= link_to <%= singular_name %>.<%= attribute.column_name %>.filename, <%= singular_name %>.<%= attribute.column_name %> if <%= singular_name %>.<%= attribute.column_name %>.attached? %>
+<% elsif attribute.attachments? -%>
+    <%% <%= singular_name %>.<%= attribute.column_name %>.each do |<%= attribute.singular_name %>| %>
+      <div><%%= link_to <%= attribute.singular_name %>.filename, <%= attribute.singular_name %> %></div>
+    <%% end %>
+<% else -%>
+    <%%= <%= singular_name %>.<%= attribute.column_name %> %>
+<% end -%>
+  </div>
+
+<% end -%>
+</div>

data/lib/generators/maquina_components/scaffold_templates/templates/show.html.erb.tt

@@ -0,0 +1,53 @@
+<%% content_for :title, "<%= human_name %>" %>
+
+<%% content_for :breadcrumbs do %>
+  <%%= render "components/breadcrumbs" do %>
+    <%%= render "components/breadcrumbs/list" do %>
+      <%%= render "components/breadcrumbs/item" do %>
+        <%%= render "components/breadcrumbs/link", href: <%= index_helper(type: :path) %>, text: "<%= human_name.pluralize %>" %>
+      <%% end %>
+      <%%= render "components/breadcrumbs/item" do %>
+        <%%= render "components/breadcrumbs/page", text: "<%= human_name %>" %>
+      <%% end %>
+    <%% end %>
+  <%% end %>
+<%% end %>
+
+<div class="space-y-6">
+  <%%= render "components/card" do %>
+    <%%= render "components/card/header", layout: :row do %>
+      <div>
+        <%%= render "components/card/title", text: "<%= human_name %>" %>
+      </div>
+      <%%= render "components/card/action" do %>
+        <%%= link_to "Edit this <%= human_name.downcase %>", <%= edit_helper(type: :path) %>, data: { component: "button", variant: "outline", size: "sm" } %>
+      <%% end %>
+    <%% end %>
+
+    <%%= render "components/card/content" do %>
+      <dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+        <div>
+          <dt class="text-sm font-medium text-muted-foreground"><%= attribute.human_name %></dt>
+<% if attribute.attachment? -%>
+          <dd class="mt-1"><%%= link_to @<%= singular_table_name %>.<%= attribute.column_name %>.filename, @<%= singular_table_name %>.<%= attribute.column_name %> if @<%= singular_table_name %>.<%= attribute.column_name %>.attached? %></dd>
+<% elsif attribute.attachments? -%>
+          <dd class="mt-1">
+            <%% @<%= singular_table_name %>.<%= attribute.column_name %>.each do |<%= attribute.singular_name %>| %>
+              <div><%%= link_to <%= attribute.singular_name %>.filename, <%= attribute.singular_name %> %></div>
+            <%% end %>
+          </dd>
+<% else -%>
+          <dd class="mt-1"><%%= @<%= singular_table_name %>.<%= attribute.column_name %> %></dd>
+<% end -%>
+        </div>
+<% end -%>
+      </dl>
+    <%% end %>
+
+    <%%= render "components/card/footer" do %>
+      <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, data: { component: "button", variant: "ghost" } %>
+      <%%= button_to "Destroy this <%= human_name.downcase %>", <%= model_resource_name(prefix: "@") %>, method: :delete, data: { component: "button", variant: "destructive" } %>
+    <%% end %>
+  <%% end %>
+</div>

data/lib/maquina_components/version.rb

@@ -1,3 +1,3 @@
 module MaquinaComponents
-  VERSION = "0.4.3"
+  VERSION = "0.5.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: maquina-components
 version: !ruby/object:Gem::Version
-  version: 0.4.3
+  version: 0.5.0
 platform: ruby
 authors:
 - Mario Alberto Chávez
@@ -55,6 +55,7 @@ files:
 - app/assets/stylesheets/card.css
 - app/assets/stylesheets/combobox.css
 - app/assets/stylesheets/date_picker.css
+- app/assets/stylesheets/drawer.css
 - app/assets/stylesheets/dropdown_menu.css
 - app/assets/stylesheets/empty.css
 - app/assets/stylesheets/form.css
@@ -69,6 +70,7 @@ files:
 - app/helpers/maquina_components/breadcrumbs_helper.rb
 - app/helpers/maquina_components/calendar_helper.rb
 - app/helpers/maquina_components/combobox_helper.rb
+- app/helpers/maquina_components/drawer_helper.rb
 - app/helpers/maquina_components/dropdown_menu_helper.rb
 - app/helpers/maquina_components/empty_helper.rb
 - app/helpers/maquina_components/icons_helper.rb
@@ -81,6 +83,8 @@ files:
 - app/javascript/controllers/calendar_controller.js
 - app/javascript/controllers/combobox_controller.js
 - app/javascript/controllers/date_picker_controller.js
+- app/javascript/controllers/drawer_controller.js
+- app/javascript/controllers/drawer_trigger_controller.js
 - app/javascript/controllers/dropdown_menu_controller.js
 - app/javascript/controllers/menu_button_controller.js
 - app/javascript/controllers/sidebar_controller.js
@@ -95,6 +99,7 @@ files:
 - app/views/components/_card.html.erb
 - app/views/components/_combobox.html.erb
 - app/views/components/_date_picker.html.erb
+- app/views/components/_drawer.html.erb
 - app/views/components/_dropdown.html.erb
 - app/views/components/_dropdown_menu.html.erb
 - app/views/components/_empty.html.erb
@@ -133,6 +138,12 @@ files:
 - app/views/components/combobox/_option.html.erb
 - app/views/components/combobox/_separator.html.erb
 - app/views/components/combobox/_trigger.html.erb
+- app/views/components/drawer/_close.html.erb
+- app/views/components/drawer/_content.html.erb
+- app/views/components/drawer/_footer.html.erb
+- app/views/components/drawer/_header.html.erb
+- app/views/components/drawer/_provider.html.erb
+- app/views/components/drawer/_trigger.html.erb
 - app/views/components/dropdown_menu/_content.html.erb
 - app/views/components/dropdown_menu/_group.html.erb
 - app/views/components/dropdown_menu/_item.html.erb
@@ -180,6 +191,13 @@ files:
 - lib/generators/maquina_components/install/install_generator.rb
 - lib/generators/maquina_components/install/templates/maquina_components_helper.rb.tt
 - lib/generators/maquina_components/install/templates/theme.css.tt
+- lib/generators/maquina_components/scaffold_templates/scaffold_templates_generator.rb
+- lib/generators/maquina_components/scaffold_templates/templates/_form.html.erb.tt
+- lib/generators/maquina_components/scaffold_templates/templates/edit.html.erb.tt
+- lib/generators/maquina_components/scaffold_templates/templates/index.html.erb.tt
+- lib/generators/maquina_components/scaffold_templates/templates/new.html.erb.tt
+- lib/generators/maquina_components/scaffold_templates/templates/partial.html.erb.tt
+- lib/generators/maquina_components/scaffold_templates/templates/show.html.erb.tt
 - lib/maquina-components.rb
 - lib/maquina_components/engine.rb
 - lib/maquina_components/version.rb
@@ -205,7 +223,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.3
+rubygems_version: 3.6.9
 specification_version: 4
 summary: ERB, TailwindCSS, and StimulusJS UI components based on Shadcn/UI.
 test_files: []