maquina-components 0.2.0 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cdbbf854a700d7b0fa55c3b91f1975d7fd53282ddeb0a14db55011d055db96a3
-  data.tar.gz: 1b69e2f23f390efa573e3192410125e8945ec182001ca8f2db431fee72523efc
+  metadata.gz: 1449d3d6edf1341e73d321b0821c1e3e355659022865465949ebf2202426d7b5
+  data.tar.gz: ffbe3396ad981086e0979756e401942410a66e2257db71a0e21a3d7a674658ed
 SHA512:
-  metadata.gz: 07a7b92b85cdaf2987c2a816133bd174e1d838ff9af4ce16166ea218729c0896f7f4bbe71c7c8caaa3f175196dbe097d6f426c28db96e0cdd703054a788ba4f9
-  data.tar.gz: 53c9a63b128ed2cef878c3935185ed559d3e01274f1354ab34f438926a8e06cdac3980eabdd4c962e9a02765f7102c1694a106c9775cc05ce7f7358ed89add10
+  metadata.gz: ec918743d27c761eb32bdce4c3a7f79e02668ea649c6ee3cdf676408c8666866e5d1dddeb72ec725d8a1a0f738273091553d75214cadf0a3c18a1c6932795131
+  data.tar.gz: 2ba3990b4ed9dfb77e03bf5f9734a355f48ee9a3903afb41cd1b8e00c5f022a17b3db790e774a9d4868b8d8bd663969d278f24fc5678441c37579662d693930f

data/README.md

@@ -152,8 +152,17 @@ bin/rails generate maquina_components:install --skip-helper
 
 | Component | Description | Documentation |
 |-----------|-------------|---------------|
+| **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/) |
 | **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 +261,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 +393,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 +427,15 @@ The install generator adds default theme variables. Customize them in `app/asset
 
 ### Interactive
 
+- **[Calendar](https://maquina.app/documentation/components/calendar/)** — Inline date picker
+- **[Combobox](https://maquina.app/documentation/components/combobox/)** — Searchable dropdown selection
+- **[Date Picker](https://maquina.app/documentation/components/date-picker/)** — Popover date 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
@@ -404,6 +459,28 @@ bin/rails test
 
 ---
 
+## Claude Code Skill
+
+This repository includes a Claude Code skill that teaches Claude how to build consistent, accessible UIs using maquina_components. The skill provides:
+
+- **Component catalog** — Complete reference for all components with ERB examples
+- **Form patterns** — Validation, error handling, and complex form structures
+- **Layout patterns** — Sidebar navigation, page structure, responsive design
+- **Turbo integration** — Turbo Frames, Streams, and component updates
+- **Spec checklist** — Review criteria for UI implementation quality
+
+### Installation
+
+Copy the `skill/` directory to your Rails project:
+
+```bash
+cp -r /path/to/maquina_components/skill .claude/skills/maquina-ui-standards
+```
+
+See the [Skill README](skill/README.md) for detailed installation and usage instructions.
+
+---
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at [github.com/maquina-app/maquina_components](https://github.com/maquina-app/maquina_components).

data/app/assets/stylesheets/calendar.css

@@ -0,0 +1,222 @@
+/* ===== Calendar Component Styles ===== */
+/*
+ * A date picker calendar with single and range selection.
+ * Uses data attributes for styling to avoid inline utility classes.
+ * Fully compatible with dark mode via CSS variables.
+ *
+ * Structure:
+ * - calendar (root container)
+ *   - header (navigation)
+ *   - weekdays (day name headers)
+ *   - grid (day buttons grid)
+ *     - week (row)
+ *       - day (button)
+ */
+
+/* ===== Root Container ===== */
+[data-component="calendar"] {
+  --cell-size: 2rem;
+
+  @apply p-3 w-fit rounded-lg border;
+  background-color: var(--background);
+  border-color: var(--border);
+}
+
+/* ===== Header (Navigation) ===== */
+[data-calendar-part="header"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  @apply mb-4;
+}
+
+[data-calendar-part="header"] button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  @apply rounded-md;
+  border: none;
+  cursor: pointer;
+  background-color: transparent;
+  color: var(--foreground);
+  @apply transition-colors duration-150;
+}
+
+[data-calendar-part="header"] button:hover:not(:disabled) {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+[data-calendar-part="header"] button:focus-visible {
+  @apply outline-none;
+  box-shadow: 0 0 0 2px var(--background),
+              0 0 0 4px var(--ring);
+}
+
+[data-calendar-part="header"] button:disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+[data-calendar-part="header"] button svg {
+  @apply size-4 shrink-0;
+}
+
+[data-calendar-part="caption"] {
+  @apply text-sm font-medium select-none;
+  color: var(--foreground);
+}
+
+/* ===== Weekday Headers ===== */
+[data-calendar-part="weekdays"] {
+  display: grid;
+  grid-template-columns: repeat(7, var(--cell-size));
+  @apply mb-1;
+}
+
+[data-calendar-part="weekday"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  @apply text-xs font-normal select-none;
+  color: var(--muted-foreground);
+}
+
+/* ===== Calendar Grid ===== */
+[data-calendar-part="grid"] {
+  display: flex;
+  flex-direction: column;
+  @apply gap-1;
+}
+
+[data-calendar-part="week"] {
+  display: grid;
+  grid-template-columns: repeat(7, var(--cell-size));
+}
+
+/* ===== Day Button Base ===== */
+[data-calendar-part="day"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  @apply text-sm font-normal rounded-md;
+  border: none;
+  cursor: pointer;
+  background-color: transparent;
+  color: var(--foreground);
+  @apply transition-colors duration-150;
+}
+
+/* ===== Day States ===== */
+
+/* Hover */
+[data-calendar-part="day"]:hover:not(:disabled):not([data-state]) {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+/* Today */
+[data-calendar-part="day"][data-today] {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+/* Selected (single mode) */
+[data-calendar-part="day"][data-state="selected"] {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  @apply rounded-md;
+}
+
+[data-calendar-part="day"][data-state="selected"]:hover {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+
+/* Range Start */
+[data-calendar-part="day"][data-state="range-start"] {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  @apply rounded-l-md rounded-r-none;
+}
+
+/* Range End */
+[data-calendar-part="day"][data-state="range-end"] {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  @apply rounded-r-md rounded-l-none;
+}
+
+/* Range Middle */
+[data-calendar-part="day"][data-state="range-middle"] {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+  @apply rounded-none;
+}
+
+/* Today within selection - override background */
+[data-calendar-part="day"][data-today][data-state="selected"],
+[data-calendar-part="day"][data-today][data-state="range-start"],
+[data-calendar-part="day"][data-today][data-state="range-end"] {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+
+[data-calendar-part="day"][data-today][data-state="range-middle"] {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+/* Outside days (previous/next month) */
+[data-calendar-part="day"][data-outside] {
+  color: var(--muted-foreground);
+  @apply opacity-50;
+}
+
+[data-calendar-part="day"][data-outside][data-state="selected"],
+[data-calendar-part="day"][data-outside][data-state="range-start"],
+[data-calendar-part="day"][data-outside][data-state="range-end"] {
+  color: var(--primary-foreground);
+  @apply opacity-30;
+}
+
+[data-calendar-part="day"][data-outside][data-state="range-middle"] {
+  color: var(--accent-foreground);
+  @apply opacity-30;
+}
+
+/* Disabled */
+[data-calendar-part="day"]:disabled {
+  color: var(--muted-foreground);
+  @apply opacity-50 cursor-not-allowed;
+}
+
+/* Focus */
+[data-calendar-part="day"]:focus-visible {
+  @apply outline-none;
+  position: relative;
+  z-index: 10;
+  box-shadow: 0 0 0 2px var(--background),
+              0 0 0 4px var(--ring);
+}
+
+/* ===== Responsive Cell Sizes ===== */
+/*
+ * Custom cell sizes can be set via --cell-size CSS variable:
+ * style="--cell-size: 2.5rem;"
+ *
+ * Or with Tailwind classes:
+ * css_classes: "[--cell-size:2.5rem] md:[--cell-size:3rem]"
+ */
+
+/* ===== 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.
+ */

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.
+ */