maquina-components 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cdbbf854a700d7b0fa55c3b91f1975d7fd53282ddeb0a14db55011d055db96a3
-  data.tar.gz: 1b69e2f23f390efa573e3192410125e8945ec182001ca8f2db431fee72523efc
+  metadata.gz: e04564783a082eb56e58395e1de24dc21deb1312c49ebc47e48428a4230e6925
+  data.tar.gz: 78630e11ca92ae6a964c2bc100a7357722d7618df3a5a0a7d0619bbc48eeb5d3
 SHA512:
-  metadata.gz: 07a7b92b85cdaf2987c2a816133bd174e1d838ff9af4ce16166ea218729c0896f7f4bbe71c7c8caaa3f175196dbe097d6f426c28db96e0cdd703054a788ba4f9
-  data.tar.gz: 53c9a63b128ed2cef878c3935185ed559d3e01274f1354ab34f438926a8e06cdac3980eabdd4c962e9a02765f7102c1694a106c9775cc05ce7f7358ed89add10
+  metadata.gz: 225bbf4a0100ac2f80a03e3bcf38f6080365db13228fade762fa5c8378631b2f0aa5d45d71654e2ecfa6577fe88f9c317163a8c29b44f003657146870bd3c44f
+  data.tar.gz: f3b563c5a789cb8039fc5e30e5461114556ca37289bd2b9859b0516973f1c4d7f54204745ad48628271ae24574522784cae4e8865f83e596326b5707d903a4ea

data/README.md

@@ -152,8 +152,15 @@ bin/rails generate maquina_components:install --skip-helper
 
 | Component | Description | Documentation |
 |-----------|-------------|---------------|
+| **Combobox** | Searchable dropdown with keyboard navigation | [Combobox](https://maquina.app/documentation/components/combobox/) |
 | **Toggle Group** | Single/multiple selection button group | [Toggle Group](https://maquina.app/documentation/components/toggle-group/) |
 
+### Feedback Components
+
+| Component | Description | Documentation |
+|-----------|-------------|---------------|
+| **Toast** | Non-intrusive notifications with auto-dismiss | [Toast](https://maquina.app/documentation/components/toast/) |
+
 ### Form Components
 
 | Component | Data Attribute | Variants |
@@ -252,6 +259,41 @@ bin/rails generate maquina_components:install --skip-helper
 <%= pagination_nav(@pagy, :users_path) %>
 ```
 
+### Combobox
+
+```erb
+<%= render "components/combobox", placeholder: "Select framework..." do |combobox_id| %>
+  <%= render "components/combobox/trigger", for_id: combobox_id, placeholder: "Select framework..." %>
+  <%= render "components/combobox/content", id: combobox_id do %>
+    <%= render "components/combobox/input", placeholder: "Search..." %>
+    <%= render "components/combobox/list" do %>
+      <%= render "components/combobox/option", value: "rails" do %>Ruby on Rails<% end %>
+      <%= render "components/combobox/option", value: "hanami" do %>Hanami<% end %>
+      <%= render "components/combobox/option", value: "sinatra" do %>Sinatra<% end %>
+    <% end %>
+    <%= render "components/combobox/empty" %>
+  <% end %>
+<% end %>
+```
+
+### Toast Notifications
+
+```erb
+<%# Add toaster to your layout %>
+<%= render "components/toaster", position: :bottom_right do %>
+  <%= toast_flash_messages %>
+<% end %>
+
+<%# In your controller %>
+flash[:success] = "Changes saved successfully!"
+
+<%# Or use the JavaScript API %>
+<script>
+  Toast.success("Profile updated!")
+  Toast.error("Something went wrong", { description: "Please try again." })
+</script>
+```
+
 ### Tables
 
 ```erb
@@ -349,6 +391,10 @@ The install generator adds default theme variables. Customize them in `app/asset
 | `sidebar_open?(cookie_name)` | Check if the sidebar is expanded |
 | `pagination_nav(pagy, route)` | Render pagination from Pagy object |
 | `pagination_simple(pagy, route)` | Render simple Previous/Next pagination |
+| `toast_flash_messages` | Render all flash messages as toasts |
+| `toast(variant, title, **options)` | Render a single toast notification |
+| `combobox(placeholder:, **options, &block)` | Builder pattern for combobox |
+| `combobox_simple(options:, **options)` | Data-driven simple combobox |
 
 ---
 
@@ -379,8 +425,13 @@ The install generator adds default theme variables. Customize them in `app/asset
 
 ### Interactive
 
+- **[Combobox](https://maquina.app/documentation/components/combobox/)** — Searchable dropdown selection
 - **[Toggle Group](https://maquina.app/documentation/components/toggle-group/)** — Toggle button groups
 
+### Feedback
+
+- **[Toast](https://maquina.app/documentation/components/toast/)** — Toast notifications
+
 ### Forms
 
 - **[Form Components](https://maquina.app/documentation/components/form/)** — Buttons, inputs, and form styling

data/app/assets/stylesheets/combobox.css

@@ -0,0 +1,218 @@
+/* ===== Combobox Component Styles ===== */
+/*
+ * Combobox component for autocomplete/search with selection.
+ * Uses HTML5 Popover API for positioning and light-dismiss.
+ * Uses data attributes for styling to avoid inline utility classes.
+ * Fully compatible with dark mode via CSS variables.
+ *
+ * Structure:
+ * - combobox (root with Stimulus controller)
+ *   - trigger (button that opens popover)
+ *   - content (popover container)
+ *     - input (search field)
+ *     - list (scrollable options)
+ *       - option (selectable item)
+ *       - group (logical grouping)
+ *       - label (section heading)
+ *       - separator (divider)
+ *     - empty (no results message)
+ */
+
+/* ===== Root Container ===== */
+[data-component="combobox"] {
+  position: relative;
+  display: inline-block;
+}
+
+/* ===== Trigger Button ===== */
+/* Trigger uses button component styles via data-component="button" */
+[data-combobox-part="trigger"] {
+  @apply justify-between gap-2;
+  min-width: 200px;
+}
+
+[data-combobox-part="trigger"] [data-combobox-target="label"] {
+  @apply truncate text-left flex-1;
+}
+
+/* Placeholder state */
+[data-combobox-part="trigger"][data-has-value="false"] [data-combobox-target="label"] {
+  color: var(--muted-foreground);
+}
+
+/* Icon styling */
+[data-combobox-part="trigger"] > svg {
+  @apply size-4 shrink-0 opacity-50;
+}
+
+/* ===== Content (Popover) ===== */
+[data-combobox-part="content"] {
+  background-color: var(--popover, var(--background));
+  color: var(--popover-foreground, var(--foreground));
+  border-color: var(--border);
+  @apply rounded-md border p-0 shadow-md outline-none;
+  @apply min-w-[200px];
+
+  /* Reset popover defaults - positioning handled by JS */
+  margin: 0;
+  padding: 0;
+  inset: unset;
+}
+
+/* Width variants */
+[data-combobox-part="content"][data-width="sm"] {
+  @apply w-40;
+}
+
+[data-combobox-part="content"][data-width="default"] {
+  @apply w-[200px];
+}
+
+[data-combobox-part="content"][data-width="md"] {
+  @apply w-56;
+}
+
+[data-combobox-part="content"][data-width="lg"] {
+  @apply w-72;
+}
+
+[data-combobox-part="content"][data-width="full"] {
+  @apply w-full;
+}
+
+/* Alignment is handled by JavaScript for proper popover positioning */
+
+/* Animation */
+[data-combobox-part="content"]:popover-open {
+  animation: combobox-in 150ms ease-out;
+}
+
+@keyframes combobox-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* ===== Search Input ===== */
+[data-combobox-part="input-wrapper"] {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--border);
+  @apply px-3 gap-2;
+}
+
+[data-combobox-part="input-wrapper"] > svg {
+  @apply size-4 shrink-0 opacity-50;
+}
+
+[data-combobox-part="input"] {
+  background-color: transparent;
+  color: var(--foreground);
+  @apply flex h-10 w-full py-3 text-sm outline-none;
+  @apply placeholder:text-muted-foreground;
+  @apply disabled:cursor-not-allowed disabled:opacity-50;
+}
+
+/* ===== Options List ===== */
+[data-combobox-part="list"] {
+  @apply max-h-[300px] overflow-y-auto overflow-x-hidden p-1;
+}
+
+/* ===== Option Item ===== */
+[data-combobox-part="option"] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: default;
+  user-select: none;
+  color: var(--popover-foreground, var(--foreground));
+  @apply gap-2 rounded-sm py-1.5 text-sm outline-none transition-colors;
+  @apply pl-8 pr-2; /* Space for check icon on left */
+}
+
+/* Hover state */
+[data-combobox-part="option"]:hover:not([aria-disabled="true"]) {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+  cursor: pointer;
+}
+
+/* Focus state (keyboard navigation) */
+[data-combobox-part="option"]:focus {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+/* Selected state */
+[data-combobox-part="option"][data-selected="true"] {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+/* Disabled state */
+[data-combobox-part="option"][aria-disabled="true"] {
+  @apply opacity-50 cursor-not-allowed pointer-events-none;
+}
+
+/* Hidden state (filtered out) */
+[data-combobox-part="option"][hidden] {
+  display: none;
+}
+
+/* Check indicator */
+[data-combobox-part="check"] {
+  position: absolute;
+  left: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  @apply size-4;
+}
+
+[data-combobox-part="check"].invisible {
+  visibility: hidden;
+}
+
+[data-combobox-part="check"] svg {
+  @apply size-4;
+}
+
+/* ===== Empty State ===== */
+[data-combobox-part="empty"] {
+  @apply py-6 text-center text-sm;
+  color: var(--muted-foreground);
+}
+
+[data-combobox-part="empty"][hidden] {
+  display: none;
+}
+
+/* ===== Group ===== */
+[data-combobox-part="group"] {
+  display: flex;
+  flex-direction: column;
+}
+
+/* ===== Label ===== */
+[data-combobox-part="label"] {
+  @apply px-2 py-1.5 text-xs font-medium;
+  color: var(--muted-foreground);
+}
+
+/* ===== Separator ===== */
+[data-combobox-part="separator"] {
+  @apply -mx-1 my-1 h-px;
+  background-color: var(--border);
+}
+
+/* ===== Dark Mode ===== */
+/*
+ * Dark mode is handled automatically through CSS variables.
+ * The theme variables change based on the .dark class on html/body.
+ * No additional dark mode styles needed here.
+ */