maquina-components 0.5.0 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d5288e1d8b1501f99a2b94c8d296e4babbe5e1d9d42f41d6f969dc1742e78c48
-  data.tar.gz: f4b31f8e38c025b05fc9a12a8c16d13b1fc62cfee10ce4596711a935203c39c4
+  metadata.gz: 9159362a034d89b9abf1b6a5a636851942f69c32491eea74c438c9d8dc678b57
+  data.tar.gz: 9ab23823a833fdfb8d02727fea268539ea0dd26d974b3212aedf90c87d2c5963
 SHA512:
-  metadata.gz: 0c9977c27048fb814c4158033afa8bcfd538a257531d94cfe07a9f35dc623dda73503d430fea93947f026caf55ab9b8237423a010af0677f2d637b3abebd6138
-  data.tar.gz: 51c6744241d753e6b022c481fead7ad3b47725ac52cddf43a655f78a94c066f69b412a6f4f347a93c8e6935221ba743a6807035ebd86c1ffdd036605a6c30b80
+  metadata.gz: 2b7d4230c490e4a98db049a2a527300b060873b6befb6925c2825455923e2179f353ffadbca0f90ebda98779ef711083b819c60a13763a5d982be3d22b73ab4e
+  data.tar.gz: c0671e469d43f1fbc265638755f453365748f2cf3d39e435ffa5218d81f9453a55f87cd1babe8acdfb2ccfdfb21a4e2415366a82388ddabb74f9a127a3bdc821

data/README.md

@@ -152,8 +152,10 @@ generates views built with maquina_components. Customize the templates as needed
 | **Card** | Content container with header, content, footer | [Card](https://maquina.app/documentation/components/card/) |
 | **Alert** | Callout messages (info, warning, error) | [Alert](https://maquina.app/documentation/components/alert/) |
 | **Badge** | Status indicators and labels | [Badge](https://maquina.app/documentation/components/badge/) |
-| **Table** | Data tables with sorting support | [Table](https://maquina.app/documentation/components/table/) |
+| **Table** | Data tables with striped and bordered variants | [Table](https://maquina.app/documentation/components/table/) |
+| **Separator** | Horizontal or vertical divider | [Separator](https://maquina.app/documentation/components/separator/) |
 | **Empty State** | Placeholder for empty lists | [Empty State](https://maquina.app/documentation/components/empty/) |
+| **Stats** | Metric cards in a responsive grid | [Stats](https://maquina.app/documentation/components/stats/) |
 
 ### Navigation Components
 

data/app/assets/stylesheets/breadcrumbs.css

@@ -94,6 +94,7 @@
 [data-breadcrumb-part="ellipsis"] {
   @apply inline-flex size-9 items-center justify-center;
   color: var(--muted-foreground);
+  cursor: pointer;
 }
 
 [data-breadcrumb-part="ellipsis"] svg {
@@ -106,6 +107,26 @@
   color: var(--foreground);
 }
 
+/* ===== Overflow Dropdown (top-layer popover) ===== */
+/* Visual styling comes from dropdown_menu.css via data-dropdown-menu-part.
+   Anchor positioning places the popover in modern browsers;
+   breadcrumb_controller falls back to measured coordinates elsewhere.
+   The doubled attribute selector outranks dropdown_menu.css's
+   position: absolute regardless of import order. */
+@supports (anchor-name: --a) and (position-area: block-end) {
+  [data-breadcrumb-part="ellipsis"] {
+    anchor-name: --maquina-breadcrumbs;
+  }
+
+  [data-breadcrumb-part="dropdown"][data-dropdown-menu-part="content"] {
+    position: fixed;
+    position-anchor: --maquina-breadcrumbs;
+    position-area: block-end span-inline-end;
+    margin-block-start: 4px;
+    position-try-fallbacks: flip-block;
+  }
+}
+
 /* ===== Responsive Behavior ===== */
 /* Force nowrap when responsive controller is active so scrollWidth detects overflow */
 [data-controller="breadcrumb"] [data-breadcrumb-part="list"] {

data/app/assets/stylesheets/combobox.css

@@ -53,12 +53,47 @@
   @apply rounded-md border p-0 shadow-md outline-none;
   @apply min-w-[200px];
 
-  /* Reset popover defaults - positioning handled by JS */
+  /* Reset popover defaults - positioning below (anchor CSS) or in JS fallback */
   margin: 0;
   padding: 0;
   inset: unset;
 }
 
+/* ===== Anchor Positioning (modern browsers) ===== */
+/* Places the top-layer popover declaratively; combobox_controller skips its
+   measured fallback when these features are supported. flip-block flips the
+   popover above the trigger when there is no room below — something the JS
+   fallback never did. */
+@supports (anchor-name: --a) and (position-area: block-end) {
+  [data-combobox-part="trigger"] {
+    anchor-name: --maquina-combobox;
+  }
+
+  [data-combobox-part="content"] {
+    position: fixed;
+    position-anchor: --maquina-combobox;
+    margin-block-start: 4px;
+    position-try-fallbacks: flip-block;
+  }
+
+  [data-combobox-part="content"][data-align="start"] {
+    position-area: block-end span-inline-end;
+  }
+
+  [data-combobox-part="content"][data-align="center"] {
+    position-area: block-end;
+  }
+
+  [data-combobox-part="content"][data-align="end"] {
+    position-area: block-end span-inline-start;
+  }
+
+  [data-combobox-part="content"][data-width="default"] {
+    width: auto;
+    min-width: max(200px, anchor-size(inline));
+  }
+}
+
 /* Width variants */
 [data-combobox-part="content"][data-width="sm"] {
   @apply w-40;

data/app/assets/stylesheets/drawer.css

@@ -57,12 +57,27 @@
   @apply flex h-full w-full flex-col;
 }
 
+/* ===== Body Scroll Lock ===== */
+/* Shared by drawer_controller and sidebar_controller: the controllers set
+   the data attribute and the --maquina-scroll-lock-top offset on <body>;
+   all styling lives here. */
+body[data-maquina-scroll-locked] {
+  position: fixed;
+  top: var(--maquina-scroll-lock-top, 0px);
+  width: 100%;
+  overflow: hidden;
+}
+
 /* ===== 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);
 }
 
+[data-drawer-part="header-content"] {
+  @apply flex-1;
+}
+
 /* ===== Drawer Content (scrollable area) ===== */
 [data-drawer-part="content"] {
   @apply flex min-h-0 flex-1 flex-col gap-2 overflow-auto p-4;

data/app/assets/stylesheets/menu_button.css

@@ -0,0 +1,155 @@
+/* ===== Menu Button Component Styles ===== */
+/*
+ * Sidebar-flavored button that opens a dropdown panel.
+ * Pairs _menu_button.html.erb (trigger) with _dropdown.html.erb (content)
+ * and menu_button_controller.js.
+ *
+ * Structure:
+ * - menu-button (root ul)
+ *   - item (li with Stimulus controller)
+ *     - trigger (button)
+ *       - avatar (text icon square)
+ *       - text (title + subtitle)
+ *     - content (positioned dropdown panel)
+ */
+
+/* ===== Root Container ===== */
+[data-component="menu-button"] {
+  @apply flex w-full min-w-0 flex-col gap-1;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[data-menu-button-part="item"] {
+  position: relative;
+  list-style: none;
+}
+
+/* ===== Trigger Button ===== */
+[data-menu-button-part="trigger"] {
+  @apply flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm;
+  @apply transition-[width,height,padding] duration-150;
+  height: 3rem;
+  background-color: transparent;
+  color: inherit;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+
+[data-menu-button-part="trigger"]:hover,
+[data-menu-button-part="trigger"]:active,
+[data-menu-button-part="trigger"][data-state="open"] {
+  background-color: var(--sidebar-accent);
+  color: var(--sidebar-accent-foreground);
+}
+
+[data-menu-button-part="trigger"]:focus-visible {
+  box-shadow: 0 0 0 2px var(--sidebar-ring);
+}
+
+[data-menu-button-part="trigger"]:disabled,
+[data-menu-button-part="trigger"][aria-disabled="true"] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+[data-menu-button-part="trigger"] svg {
+  @apply size-4 shrink-0;
+}
+
+[data-menu-button-part="trigger"] img {
+  @apply shrink-0;
+}
+
+/* Icon-collapsed sidebar squeezes the trigger to an icon square */
+[data-sidebar-part="root"][data-collapsible="icon"] [data-menu-button-part="trigger"] {
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+}
+
+/* ===== Avatar (text icon) ===== */
+[data-menu-button-part="avatar"] {
+  @apply flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg;
+  background-color: var(--sidebar-primary);
+  color: var(--sidebar-primary-foreground);
+}
+
+/* ===== Text (title + subtitle) ===== */
+[data-menu-button-part="text"] {
+  @apply grid flex-1 text-left text-sm leading-tight;
+}
+
+[data-menu-button-part="title"] {
+  @apply truncate font-semibold;
+}
+
+[data-menu-button-part="subtitle"] {
+  @apply truncate text-xs;
+}
+
+/* ===== Content Panel ===== */
+[data-menu-button-part="content"] {
+  position: absolute;
+  z-index: 50;
+  display: none;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 14rem;
+  max-width: 14rem;
+  background-color: var(--popover, var(--background));
+  color: var(--popover-foreground, var(--foreground));
+  @apply rounded-lg border p-1 shadow-md;
+  border-color: var(--border);
+}
+
+[data-menu-button-part="content"][data-side="top"] {
+  bottom: calc(100% + 4px);
+}
+
+[data-menu-button-part="content"][data-side="bottom"] {
+  top: calc(100% + 4px);
+}
+
+[data-menu-button-part="content"][data-align="start"] {
+  left: 0;
+}
+
+[data-menu-button-part="content"][data-align="end"] {
+  right: 0;
+}
+
+/* Animation states */
+[data-menu-button-part="content"][data-state="open"] {
+  display: flex;
+  animation: menu-button-in 150ms ease-out;
+}
+
+[data-menu-button-part="content"][data-state="closing"] {
+  display: flex;
+  animation: menu-button-out 100ms ease-in forwards;
+}
+
+@keyframes menu-button-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes menu-button-out {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95) translateY(4px);
+  }
+}

data/app/assets/stylesheets/separator.css

@@ -0,0 +1,20 @@
+/* ===== Separator Component Styles ===== */
+/*
+ * Decorative divider, horizontal or vertical.
+ * Styled via data attributes; colors come from theme variables.
+ */
+
+[data-component="separator"] {
+  @apply mx-2 shrink-0;
+  background-color: var(--border);
+}
+
+[data-component="separator"][data-orientation="horizontal"] {
+  height: 1px;
+  width: 100%;
+}
+
+[data-component="separator"][data-orientation="vertical"] {
+  width: 1px;
+  height: 1rem;
+}

data/app/assets/stylesheets/sidebar.css

@@ -290,6 +290,18 @@
   @apply truncate;
 }
 
+[data-sidebar-part="menu-link-text"] {
+  @apply flex flex-col gap-0.5 leading-none;
+}
+
+[data-sidebar-part="menu-link-title"] {
+  @apply font-medium;
+}
+
+[data-sidebar-part="menu-link-subtitle"] {
+  @apply text-xs text-sidebar-foreground/70;
+}
+
 /* Has menu action - add padding */
 .group-has-data-\[sidebar-part\=menu-action\]\/menu-item [data-sidebar-part="menu-link"],
 [data-sidebar-part="menu-item"]:has([data-sidebar-part="menu-action"]) [data-sidebar-part="menu-link"] {

data/app/assets/stylesheets/stats.css

@@ -0,0 +1,101 @@
+/* ===== Stats Component Styles ===== */
+/*
+ * Dashboard stat cards and their responsive grid.
+ *
+ * Structure:
+ * - stats-grid (root, optional action slot)
+ *   - action (leading or trailing action area)
+ *   - grid (responsive card grid, columns via data-columns)
+ * - stats-card
+ *   - body
+ *     - text (title, value, subtitle)
+ *     - icon
+ */
+
+/* ===== Card ===== */
+[data-component="stats-card"] {
+  @apply rounded-lg border p-4 shadow-sm;
+  background-color: var(--card);
+  border-color: var(--border);
+}
+
+[data-component="stats-card"] [data-stats-part="body"] {
+  @apply flex items-center justify-between;
+}
+
+[data-component="stats-card"] [data-stats-part="title"] {
+  @apply text-sm;
+  color: var(--muted-foreground);
+}
+
+[data-component="stats-card"] [data-stats-part="value"] {
+  @apply text-2xl font-bold;
+}
+
+[data-component="stats-card"] [data-stats-part="subtitle"] {
+  @apply mt-1 text-xs;
+  color: var(--muted-foreground);
+}
+
+[data-component="stats-card"] [data-stats-part="icon"] svg {
+  @apply size-8 shrink-0;
+}
+
+/* Color defaults live in the components layer so caller utility classes
+   (value_classes / icon_classes, e.g. text-green-600) always win — the
+   utilities layer is defined to beat the components layer, and unlayered
+   rules would beat utilities regardless of specificity */
+@layer components {
+  [data-component="stats-card"] [data-stats-part="value"] {
+    color: var(--foreground);
+  }
+
+  [data-component="stats-card"] [data-stats-part="icon"] {
+    color: var(--muted-foreground);
+  }
+}
+
+/* ===== Grid ===== */
+[data-component="stats-grid"][data-with-action="true"] {
+  @apply flex flex-col gap-4 lg:flex-row lg:items-center;
+}
+
+[data-component="stats-grid"] [data-stats-part="grid"] {
+  @apply grid grid-cols-1 gap-4;
+}
+
+[data-component="stats-grid"][data-with-action="true"] [data-stats-part="grid"] {
+  @apply flex-1;
+}
+
+[data-component="stats-grid"][data-columns="2"] [data-stats-part="grid"] {
+  @apply sm:grid-cols-2;
+}
+
+[data-component="stats-grid"][data-columns="3"] [data-stats-part="grid"] {
+  @apply sm:grid-cols-3;
+}
+
+[data-component="stats-grid"][data-columns="4"] [data-stats-part="grid"] {
+  @apply sm:grid-cols-4;
+}
+
+[data-component="stats-grid"][data-columns="5"] [data-stats-part="grid"] {
+  @apply sm:grid-cols-5;
+}
+
+[data-component="stats-grid"][data-columns="6"] [data-stats-part="grid"] {
+  @apply sm:grid-cols-6;
+}
+
+[data-component="stats-grid"] [data-stats-part="action"] {
+  @apply flex justify-center;
+}
+
+[data-component="stats-grid"] [data-stats-part="action"][data-position="start"] {
+  @apply lg:justify-start;
+}
+
+[data-component="stats-grid"] [data-stats-part="action"][data-position="end"] {
+  @apply lg:justify-end;
+}

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

@@ -12,8 +12,11 @@
 @import "../../stylesheets/empty.css";
 @import "../../stylesheets/form.css";
 @import "../../stylesheets/header.css";
+@import "../../stylesheets/menu_button.css";
 @import "../../stylesheets/pagination.css";
+@import "../../stylesheets/separator.css";
 @import "../../stylesheets/sidebar.css";
+@import "../../stylesheets/stats.css";
 @import "../../stylesheets/table.css";
 @import "../../stylesheets/toast.css";
 @import "../../stylesheets/toggle_group.css";

data/app/helpers/maquina_components/combobox_helper.rb

@@ -59,7 +59,8 @@ module MaquinaComponents
     # @return [String] Rendered HTML
     def combobox(id: nil, name: nil, value: nil, placeholder: "Select...", css_classes: "", **html_options, &block)
       builder = ComboboxBuilder.new(self, placeholder: placeholder)
-      combobox_id = id || "combobox-#{SecureRandom.hex(4)}"
+      # Deterministic fallback id: random ids break idiomorph matching across Turbo morphs
+      combobox_id = id || "combobox-#{name.to_s.parameterize.presence || "default"}"
       builder.combobox_id = combobox_id
 
       capture(builder, &block)

data/app/helpers/maquina_components/components_helper.rb

@@ -0,0 +1,33 @@
+module MaquinaComponents
+  # Shared plumbing for component partials.
+  module ComponentsHelper
+    # Merges a caller's data: hash with a component's own data attributes.
+    #
+    # Component values win for identity keys (component, variant, size, ...)
+    # so callers can't accidentally break a component's styling hooks. The
+    # Stimulus token keys :controller and :action concatenate instead, so a
+    # caller can attach extra behavior without losing the component's:
+    #
+    #   <%= render "components/combobox", name: "country",
+    #         data: { controller: "analytics", action: "change->analytics#track" } %>
+    #   # => data-controller="combobox analytics"
+    #
+    # @param html_options [Hash] the partial's **html_options (data: is consumed)
+    # @param component_data [Hash] the component's own data attributes
+    # @return [Hash] the merged data hash
+    def merge_component_data(html_options, **component_data)
+      user_data = html_options.delete(:data) || {}
+      merged = user_data.merge(component_data)
+
+      [:controller, :action].each do |key|
+        user_value = user_data[key] || user_data[key.to_s]
+        next if user_value.blank? || component_data[key].blank?
+
+        merged.delete(key.to_s)
+        merged[key] = "#{component_data[key]} #{user_value}"
+      end
+
+      merged
+    end
+  end
+end

data/app/helpers/maquina_components/icons_helper.rb

@@ -401,6 +401,64 @@ module MaquinaComponents
             <rect width="7" height="7" x="3" y="14" rx="1"/>
           </svg>
         SVG
+      when :message_square
+        <<~SVG.freeze
+          <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" class="">
+            <path d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
+          </svg>
+        SVG
+      when :arrow_up
+        <<~SVG.freeze
+          <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" class="">
+            <path d="M7 17L17 7M17 7H7M17 7V17"/>
+          </svg>
+        SVG
+      when :arrow_down
+        <<~SVG.freeze
+          <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" class="">
+            <path d="M17 7L7 17M7 17H17M7 17V7"/>
+          </svg>
+        SVG
+      when :lightning_bolt
+        <<~SVG.freeze
+          <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" class="">
+            <path d="M13 10V3L4 14h7v7l9-11h-7z"/>
+          </svg>
+        SVG
+      when :clipboard_list
+        <<~SVG.freeze
+          <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" class="">
+            <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
+          </svg>
+        SVG
+      when :chart_bar
+        <<~SVG.freeze
+          <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" class="">
+            <path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+          </svg>
+        SVG
+      when :circle_check
+        <<~SVG.freeze
+          <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" class="">
+            <circle cx="12" cy="12" r="10"/>
+            <path d="m9 12 2 2 4-4"/>
+          </svg>
+        SVG
+      when :circle_x
+        <<~SVG.freeze
+          <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" class="">
+            <circle cx="12" cy="12" r="10"/>
+            <path d="m15 9-6 6"/>
+            <path d="m9 9 6 6"/>
+          </svg>
+        SVG
+      when :x
+        <<~SVG.freeze
+          <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" class="">
+            <path d="M18 6 6 18"/>
+            <path d="m6 6 12 12"/>
+          </svg>
+        SVG
       end
     end
   end