maquina-components 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f0f4bc77b94379658acd2eb8a4861dd9e93c70ae5030553892eae3e8ec8ce660
-  data.tar.gz: 84502d8a40444a30ec4d3d113c53cb495dbed92e683c62b855877b73097f6fbf
+  metadata.gz: cdbbf854a700d7b0fa55c3b91f1975d7fd53282ddeb0a14db55011d055db96a3
+  data.tar.gz: 1b69e2f23f390efa573e3192410125e8945ec182001ca8f2db431fee72523efc
 SHA512:
-  metadata.gz: 54af9ab2d08c6f8e74a0722377573aaa8434f28d8c592daff680ad660d14f666b78fc8c16aebfcaac13b1a715e7e1c7f3376368802cc956aba533b1b5915d0f2
-  data.tar.gz: a4044c1f428042c543f940bc601ccb02eb9f88250fd84226cdb6f9b73a04817ecadc23bf93c8ee7951a9ab54afdb6c728490b3a85ddb1190dc35eea74008fc50
+  metadata.gz: 07a7b92b85cdaf2987c2a816133bd174e1d838ff9af4ce16166ea218729c0896f7f4bbe71c7c8caaa3f175196dbe097d6f426c28db96e0cdd703054a788ba4f9
+  data.tar.gz: 53c9a63b128ed2cef878c3935185ed559d3e01274f1354ab34f438926a8e06cdac3980eabdd4c962e9a02765f7102c1694a106c9775cc05ce7f7358ed89add10

data/README.md

@@ -1,28 +1,425 @@
-# MaquinaComponents
-Short description and motivation.
+# Maquina Components
 
-## Usage
-How to use my plugin.
+UI components for Ruby on Rails, built with ERB, TailwindCSS 4.0, and Stimulus.
 
-## Installation
-Add this line to your application's Gemfile:
+---
+
+## Why This Exists
+
+I started building components inspired by [shadcn/ui](https://ui.shadcn.com/) for production Rails applications—mainly dashboards and admin interfaces. Over time, I iterated on these components across multiple projects, and they became inconsistent: different APIs, different styling approaches, different levels of completeness.
+
+It was time to extract the elements I use most and give them a **cohesive API and consistent styling**.
+
+### The Technical Choices
+
+I chose **ERB partials** with **TailwindCSS** and **Stimulus controllers** for interactive elements. For static components like form inputs, pure CSS with data attributes is enough.
+
+I'm aware of alternatives like [ViewComponent](https://viewcomponent.org/) and [Phlex](https://www.phlex.fun/). The projects I extracted these components from didn't use them. I see the benefits of using a Ruby class to render the UI, but bringing in any of these libraries into a project is a big commitment, and not all projects and teams are open to doing it. The reason is not technical; it is the feeling of moving away from "the Rails way." So I kept it simple: ERB partials that any Rails developer can understand immediately.
+
+### Composability Over Convenience
+
+These components are built to be **composable**. They are built of many small ERB partials to render. But that's intentional—you can take these partials and compose them into larger, application-specific components. There are no limits, and you have a standard API to guide you.
+
+I didn't copy shadcn/ui one-to-one. I extracted only the components I actually use in my applications. This is a practical toolkit, not a complete port.
+
+### One Approach Among Many
+
+There's no single UI kit that rules Rails development. If this approach doesn't resonate with you, here are excellent alternatives:
+
+- [RailsUI](https://railsui.com) — Premium UI templates and components
+- [RailsBlocks](https://railsblocks.com) — Copy-paste components for Rails
+- [shadcn-rails](https://shadcn.rails-components.com) — Another shadcn/ui port for Rails
+- [Inertia Rails + shadcn Starter](https://evilmartians.com/opensource/inertia-rails-shadcn-starter) — React/Vue components with Inertia
+
+If you're open to trying maquina_components and providing feedback, you're welcome to do so. If this isn't for you, that's okay too.
+
+---
+
+## Features
+
+- **ERB partials** with strict locals (`locals:` magic comments)
+- **TailwindCSS 4.0** with CSS custom properties for theming
+- **Data attributes** (`data-component`, `data-*-part`) for CSS styling
+- **Stimulus controllers** only used where interactivity is needed
+- **Dark mode** support via CSS variables
+- **shadcn/ui theming** convention (works with their color system)
+- **Composable** — small partials you can combine freely
+
+![Test dummy app with light mode](/imgs/light.png)
+
+![Test dummy app with dark mode](/imgs/dark.png)
+
+---
+
+## Quick Start
+
+### 1. Add the Gem
 
 ```ruby
-gem "maquina_components"
+# Gemfile
+gem "maquina-components"
 ```
 
-And then execute:
 ```bash
-$ bundle
+bundle install
 ```
 
-Or install it yourself as:
+### 2. Run the Install Generator
+
 ```bash
-$ gem install maquina_components
+bin/rails generate maquina_components:install
 ```
 
+This will:
+
+- Add the engine CSS import to your Tailwind file
+- Add theme variables (light + dark mode)
+- Create a helper file for icon customization
+
+### 3. Use Components
+
+```erb
+<%= render "components/card" do %>
+  <%= render "components/card/header" do %>
+    <%= render "components/card/title", text: "Account Settings" %>
+    <%= render "components/card/description", text: "Manage your preferences" %>
+  <% end %>
+  <%= render "components/card/content" do %>
+    <!-- Your content -->
+  <% end %>
+<% end %>
+```
+
+For form elements, use data attributes with Rails helpers:
+
+```erb
+<%= form_with model: @user do |f| %>
+  <%= f.text_field :name, data: { component: "input" } %>
+  <%= f.email_field :email, data: { component: "input" } %>
+  <%= f.submit "Save", data: { component: "button", variant: "primary" } %>
+<% end %>
+```
+
+**[Full Getting Started Guide](https://maquina.app/documentation/components/)**
+
+---
+
+## Generator Options
+
+```bash
+# Default: adds everything
+bin/rails generate maquina_components:install
+
+# Skip theme variables (if you have your own)
+bin/rails generate maquina_components:install --skip-theme
+
+# Skip helper file
+bin/rails generate maquina_components:install --skip-helper
+```
+
+**Prerequisite:** [tailwindcss-rails](https://github.com/rails/tailwindcss-rails) must be installed first.
+
+---
+
+## Available Components
+
+### Layout Components
+
+| Component | Description | Documentation |
+|-----------|-------------|---------------|
+| **Sidebar** | Collapsible navigation with cookie persistence | [Sidebar](https://maquina.app/documentation/components/sidebar/) |
+| **Header** | Top navigation bar | [Header](https://maquina.app/documentation/components/header/) |
+
+### Content Components
+
+| Component | Description | Documentation |
+|-----------|-------------|---------------|
+| **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/) |
+| **Empty State** | Placeholder for empty lists | [Empty State](https://maquina.app/documentation/components/empty/) |
+
+### Navigation Components
+
+| Component | Description | Documentation |
+|-----------|-------------|---------------|
+| **Breadcrumbs** | Navigation trail with overflow handling | [Breadcrumbs](https://maquina.app/documentation/components/breadcrumbs/) |
+| **Dropdown Menu** | Accessible dropdown with keyboard navigation | [Dropdown Menu](https://maquina.app/documentation/components/dropdown-menu/) |
+| **Pagination** | Page navigation with Pagy integration | [Pagination](https://maquina.app/documentation/components/pagination/) |
+
+### Interactive Components
+
+| Component | Description | Documentation |
+|-----------|-------------|---------------|
+| **Toggle Group** | Single/multiple selection button group | [Toggle Group](https://maquina.app/documentation/components/toggle-group/) |
+
+### Form Components
+
+| Component | Data Attribute | Variants |
+|-----------|----------------|----------|
+| **Button** | `data-component="button"` | default, primary, secondary, destructive, outline, ghost, link |
+| **Input** | `data-component="input"` | — |
+| **Textarea** | `data-component="textarea"` | — |
+| **Select** | `data-component="select"` | — |
+| **Checkbox** | `data-component="checkbox"` | — |
+| **Radio** | `data-component="radio"` | — |
+| **Switch** | `data-component="switch"` | — |
+
+**[Form Components Guide](https://maquina.app/documentation/components/form/)**
+
+---
+
+## Examples
+
+### Cards with Actions
+
+```erb
+<%= render "components/card" do %>
+  <%= render "components/card/header", layout: :row do %>
+    <div>
+      <%= render "components/card/title", text: "Team Members" %>
+      <%= render "components/card/description", text: "Manage your team" %>
+    </div>
+    <%= render "components/card/action" do %>
+      <%= link_to "Add Member", new_member_path,
+        data: { component: "button", variant: "primary", size: "sm" } %>
+    <% end %>
+  <% end %>
+  <%= render "components/card/content" do %>
+    <!-- Table or list -->
+  <% end %>
+<% end %>
+```
+
+### Alerts
+
+```erb
+<%= render "components/alert", variant: :destructive do %>
+  <%= render "components/alert/title", text: "Error" %>
+  <%= render "components/alert/description" do %>
+    Your session has expired. Please log in again.
+  <% end %>
+<% end %>
+```
+
+### Badges
+
+```erb
+<%= render "components/badge", variant: :success do %>Active<% end %>
+<%= render "components/badge", variant: :warning do %>Pending<% end %>
+<%= render "components/badge", variant: :destructive do %>Failed<% end %>
+```
+
+### Toggle Group
+
+```erb
+<%= render "components/toggle_group", type: :single, variant: :outline do %>
+  <%= render "components/toggle_group/item", value: "left", aria_label: "Align left" do %>
+    <%= icon_for :align_left %>
+  <% end %>
+  <%= render "components/toggle_group/item", value: "center", aria_label: "Align center" do %>
+    <%= icon_for :align_center %>
+  <% end %>
+  <%= render "components/toggle_group/item", value: "right", aria_label: "Align right" do %>
+    <%= icon_for :align_right %>
+  <% end %>
+<% end %>
+```
+
+### Dropdown Menu
+
+```erb
+<%= render "components/dropdown_menu" do %>
+  <%= render "components/dropdown_menu/trigger" do %>Options<% end %>
+  <%= render "components/dropdown_menu/content" do %>
+    <%= render "components/dropdown_menu/item", href: profile_path do %>
+      <%= icon_for :user %>
+      Profile
+    <% end %>
+    <%= render "components/dropdown_menu/separator" %>
+    <%= render "components/dropdown_menu/item", href: logout_path, method: :delete, variant: :destructive do %>
+      <%= icon_for :log_out %>
+      Logout
+    <% end %>
+  <% end %>
+<% end %>
+```
+
+### Pagination
+
+```erb
+<%= pagination_nav(@pagy, :users_path) %>
+```
+
+### Tables
+
+```erb
+<%= render "components/table" do %>
+  <%= render "components/table/header" do %>
+    <%= render "components/table/row" do %>
+      <%= render "components/table/head" do %>Name<% end %>
+      <%= render "components/table/head" do %>Email<% end %>
+      <%= render "components/table/head" do %>Role<% end %>
+    <% end %>
+  <% end %>
+  <%= render "components/table/body" do %>
+    <% @users.each do |user| %>
+      <%= render "components/table/row" do %>
+        <%= render "components/table/cell" do %><%= user.name %><% end %>
+        <%= render "components/table/cell" do %><%= user.email %><% end %>
+        <%= render "components/table/cell" do %>
+          <%= render "components/badge", variant: :outline do %><%= user.role %><% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+```
+
+### Sidebar Layout
+
+```erb
+<%= render "components/sidebar/provider", default_open: app_sidebar_open? do %>
+  <%= render "components/sidebar" do %>
+    <%= render "components/sidebar/header" do %>
+      <span class="font-semibold">My App</span>
+    <% end %>
+    
+    <%= render "components/sidebar/content" do %>
+      <%= render "components/sidebar/group", title: "Navigation" do %>
+        <%= render "components/sidebar/menu" do %>
+          <%= render "components/sidebar/menu_item" do %>
+            <%= render "components/sidebar/menu_button",
+              title: "Dashboard",
+              url: dashboard_path,
+              icon_name: :home,
+              active: current_page?(dashboard_path) %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render "components/sidebar/inset" do %>
+    <%= render "components/header" do %>
+      <%= render "components/sidebar/trigger", icon_name: :panel_left %>
+    <% end %>
+    
+    <main class="flex-1 p-6">
+      <%= yield %>
+    </main>
+  <% end %>
+<% end %>
+```
+
+---
+
+## Theming
+
+Components use CSS variables following the [shadcn/ui theming convention](https://ui.shadcn.com/docs/theming).
+
+The install generator adds default theme variables. Customize them in `app/assets/tailwind/application.css`:
+
+```css
+:root {
+  /* Change primary to blue */
+  --primary: oklch(0.488 0.243 264.376);
+  --primary-foreground: oklch(0.985 0 0);
+  
+  /* Add custom colors */
+  --success: oklch(0.6 0.2 145);
+  --success-foreground: oklch(0.985 0 0);
+}
+
+@theme {
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+}
+```
+
+---
+
+## Helper Methods
+
+| Helper | Purpose |
+|--------|---------|
+| `icon_for(name, options)` | Render an SVG icon |
+| `sidebar_state(cookie_name)` | Get sidebar state (`:expanded` or `:collapsed`) |
+| `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 |
+
+---
+
+## Documentation
+
+### Getting Started
+
+- **[Getting Started](https://maquina.app/documentation/components/)** — Installation and setup
+
+### Layout
+
+- **[Sidebar](https://maquina.app/documentation/components/sidebar/)** — Navigation sidebar
+- **[Header](https://maquina.app/documentation/components/header/)** — Top navigation bar
+
+### Content
+
+- **[Card](https://maquina.app/documentation/components/card/)** — Content containers
+- **[Alert](https://maquina.app/documentation/components/alert/)** — Callout messages
+- **[Badge](https://maquina.app/documentation/components/badge/)** — Status indicators
+- **[Table](https://maquina.app/documentation/components/table/)** — Data tables
+- **[Empty State](https://maquina.app/documentation/components/empty/)** — Empty state placeholders
+
+### Navigation
+
+- **[Breadcrumbs](https://maquina.app/documentation/components/breadcrumbs/)** — Navigation trails
+- **[Dropdown Menu](https://maquina.app/documentation/components/dropdown-menu/)** — Dropdown menus
+- **[Pagination](https://maquina.app/documentation/components/pagination/)** — Page navigation
+
+### Interactive
+
+- **[Toggle Group](https://maquina.app/documentation/components/toggle-group/)** — Toggle button groups
+
+### Forms
+
+- **[Form Components](https://maquina.app/documentation/components/form/)** — Buttons, inputs, and form styling
+
+---
+
+## Development
+
+Run the dummy app:
+
+```bash
+cd test/dummy
+bin/rails server
+```
+
+Run tests:
+
+```bash
+bin/rails test
+```
+
+---
+
 ## Contributing
-Contribution directions go here.
+
+Bug reports and pull requests are welcome on GitHub at [github.com/maquina-app/maquina_components](https://github.com/maquina-app/maquina_components).
+
+---
 
 ## License
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+Copyright (c) [Mario Alberto Chávez Cárdenas](https://mariochavez.io)
+
+The gem is available as open source under the terms of the [MIT License](MIT-LICENSE).
+
+---
+
+## Credits
+
+- Design patterns from [shadcn/ui](https://ui.shadcn.com/)
+- Built with [TailwindCSS](https://tailwindcss.com/)
+- Powered by [Ruby on Rails](https://rubyonrails.org/)

data/app/assets/images/maquina.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1268" height="326"><defs><linearGradient id="b" x1="21.152%" x2="100%" y1="21.848%" y2="93.468%"><stop offset="0%" stop-color="#50B1FD" stop-opacity=".96"/><stop offset="100%" stop-color="#DE77DE" stop-opacity=".96"/></linearGradient><filter id="a" width="109.8%" height="109.8%" x="-4.9%" y="-4.3%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="5"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g fill="none" fill-rule="evenodd"><g fill="url(#b)" filter="url(#a)"><path d="M163 0c90.022 0 163 72.978 163 163s-72.978 163-163 163S0 253.022 0 163 72.978 0 163 0Zm-3.035 32.001-2.3.033C82.529 33.836 7.373 106.038 39.71 209.826l.128-.06.17-.085c.666-.337 2.097-1.105 4.294-2.305l.648-.355c7.567-4.142 23.12-12.79 46.658-25.942 8.07 31.143 36.39 54.144 70.088 54.144 11.29 0 21.975-2.582 31.498-7.186l38.287 21.06c-67.582 40.567-122.657 31.134-165.224-28.3l-17.485 10.496c38.51 66.185 141.812 96.167 215.685 13.364-1.55-1.057-18.929-11.076-52.136-30.058 13.432-13.13 21.768-31.441 21.768-51.698 0-24.865-12.561-46.8-31.69-59.816l-.125-44.132c68.28 39.383 86.722 92.078 55.326 158.086l17.666 10.189c39.273-65.736 15.44-170.532-92.866-194.936-.176 1.88-.526 22.209-1.052 60.983a72.517 72.517 0 0 0-19.652-2.696c-38.356 0-69.744 29.799-72.234 67.487L52.886 179.3c0-78.766 36.46-121.07 109.378-126.91V32.012l-2.3-.01Zm2.067 100.096c17.214 0 31.17 13.941 31.17 31.139 0 17.197-13.956 31.138-31.17 31.138-17.215 0-31.17-13.94-31.17-31.138s13.955-31.139 31.17-31.139Z"/></g><g fill="#50B1FD" fill-rule="nonzero"><path d="M424.59 217V102.97h23.1v48.93h-2.1c0-11.48 1.47-21.105 4.41-28.875 2.94-7.77 7.315-13.65 13.125-17.64S476.18 99.4 484.86 99.4h1.26c8.82 0 16.135 1.995 21.945 5.985 5.81 3.99 10.15 9.87 13.02 17.64 2.87 7.77 4.305 17.395 4.305 28.875h-7.35c0-11.48 1.505-21.105 4.515-28.875s7.42-13.65 13.23-17.64c5.81-3.99 13.055-5.985 21.735-5.985h1.26c8.82 0 16.17 1.995 22.05 5.985 5.88 3.99 10.325 9.87 13.335 17.64 3.01 7.77 4.515 17.395 4.515 28.875V217h-29.19v-67.83c0-7.14-1.82-12.845-5.46-17.115-3.64-4.27-8.82-6.405-15.54-6.405-6.72 0-12.11 2.205-16.17 6.615-4.06 4.41-6.09 10.325-6.09 17.745V217h-29.19v-67.83c0-7.14-1.82-12.845-5.46-17.115-3.64-4.27-8.82-6.405-15.54-6.405-6.72 0-12.11 2.205-16.17 6.615-4.06 4.41-6.09 10.325-6.09 17.745V217h-29.19ZM688.56 217v-33.81h-4.83V145.6c0-6.58-1.61-11.48-4.83-14.7-3.22-3.22-8.19-4.83-14.91-4.83-3.5 0-7.7.07-12.6.21-4.9.14-9.835.315-14.805.525-4.97.21-9.415.455-13.335.735v-24.78c3.22-.28 6.86-.56 10.92-.84 4.06-.28 8.225-.455 12.495-.525s8.295-.105 12.075-.105c11.76 0 21.525 1.54 29.295 4.62 7.77 3.08 13.65 7.91 17.64 14.49s5.985 15.19 5.985 25.83V217h-23.1Zm-36.75 2.94c-8.26 0-15.505-1.47-21.735-4.41-6.23-2.94-11.06-7.14-14.49-12.6-3.43-5.46-5.145-12.04-5.145-19.74 0-8.4 2.065-15.26 6.195-20.58 4.13-5.32 9.94-9.31 17.43-11.97s16.275-3.99 26.355-3.99h26.46v17.43H660c-6.72 0-11.865 1.645-15.435 4.935-3.57 3.29-5.355 7.525-5.355 12.705s1.785 9.38 5.355 12.6c3.57 3.22 8.715 4.83 15.435 4.83 4.06 0 7.805-.735 11.235-2.205 3.43-1.47 6.3-3.99 8.61-7.56 2.31-3.57 3.605-8.435 3.885-14.595l7.14 8.19c-.7 7.98-2.625 14.7-5.775 20.16-3.15 5.46-7.49 9.625-13.02 12.495-5.53 2.87-12.285 4.305-20.265 4.305ZM816.87 259v-75.81l8.61-13.44c-.42 10.92-2.66 20.195-6.72 27.825-4.06 7.63-9.52 13.405-16.38 17.325-6.86 3.92-14.77 5.88-23.73 5.88-8.12 0-15.47-1.505-22.05-4.515s-12.215-7.21-16.905-12.6c-4.69-5.39-8.33-11.62-10.92-18.69-2.59-7.07-3.885-14.735-3.885-22.995v-4.41c0-8.12 1.33-15.715 3.99-22.785s6.405-13.23 11.235-18.48c4.83-5.25 10.57-9.38 17.22-12.39 6.65-3.01 14.105-4.515 22.365-4.515 9.52 0 17.78 2.03 24.78 6.09 7 4.06 12.495 9.975 16.485 17.745 3.99 7.77 6.195 17.255 6.615 28.455h-4.62v-48.72h23.1V259h-29.19Zm-30.66-63.21c5.74 0 10.99-1.295 15.75-3.885s8.575-6.37 11.445-11.34c2.87-4.97 4.305-10.815 4.305-17.535v-8.4c0-6.72-1.47-12.355-4.41-16.905-2.94-4.55-6.79-8.05-11.55-10.5-4.76-2.45-9.94-3.675-15.54-3.675-6.3 0-11.865 1.505-16.695 4.515s-8.61 7.28-11.34 12.81c-2.73 5.53-4.095 11.865-4.095 19.005 0 7.14 1.4 13.405 4.2 18.795 2.8 5.39 6.615 9.59 11.445 12.6s10.325 4.515 16.485 4.515ZM907.59 220.57c-13.16 0-23.345-4.34-30.555-13.02-7.21-8.68-10.815-21.56-10.815-38.64v-66.15h29.19v68.67c0 7 1.96 12.565 5.88 16.695 3.92 4.13 9.24 6.195 15.96 6.195 6.72 0 12.215-2.17 16.485-6.51s6.405-10.22 6.405-17.64v-67.41h29.19V217h-23.1v-48.51h2.31c0 11.48-1.47 21.07-4.41 28.77-2.94 7.7-7.35 13.51-13.23 17.43-5.88 3.92-13.23 5.88-22.05 5.88h-1.26ZM997.89 217V102.97h29.19V217h-29.19Zm-15.96-92.19v-21.84h45.15v21.84h-45.15Zm26.67-35.49c-5.74 0-9.975-1.505-12.705-4.515-2.73-3.01-4.095-6.825-4.095-11.445s1.365-8.4 4.095-11.34c2.73-2.94 6.965-4.41 12.705-4.41s9.94 1.47 12.6 4.41c2.66 2.94 3.99 6.72 3.99 11.34s-1.33 8.435-3.99 11.445-6.86 4.515-12.6 4.515ZM1050.18 217V102.97h23.1v48.93h-2.1c0-11.62 1.54-21.315 4.62-29.085s7.665-13.615 13.755-17.535c6.09-3.92 13.685-5.88 22.785-5.88h1.26c13.58 0 23.87 4.375 30.87 13.125s10.5 21.805 10.5 39.165V217h-29.19v-67.83c0-7-1.995-12.67-5.985-17.01-3.99-4.34-9.485-6.51-16.485-6.51-7.14 0-12.915 2.205-17.325 6.615s-6.615 10.325-6.615 17.745V217h-29.19ZM1244.85 217v-33.81h-4.83V145.6c0-6.58-1.61-11.48-4.83-14.7-3.22-3.22-8.19-4.83-14.91-4.83-3.5 0-7.7.07-12.6.21-4.9.14-9.835.315-14.805.525-4.97.21-9.415.455-13.335.735v-24.78c3.22-.28 6.86-.56 10.92-.84 4.06-.28 8.225-.455 12.495-.525s8.295-.105 12.075-.105c11.76 0 21.525 1.54 29.295 4.62 7.77 3.08 13.65 7.91 17.64 14.49s5.985 15.19 5.985 25.83V217h-23.1Zm-36.75 2.94c-8.26 0-15.505-1.47-21.735-4.41-6.23-2.94-11.06-7.14-14.49-12.6-3.43-5.46-5.145-12.04-5.145-19.74 0-8.4 2.065-15.26 6.195-20.58 4.13-5.32 9.94-9.31 17.43-11.97s16.275-3.99 26.355-3.99h26.46v17.43h-26.88c-6.72 0-11.865 1.645-15.435 4.935-3.57 3.29-5.355 7.525-5.355 12.705s1.785 9.38 5.355 12.6c3.57 3.22 8.715 4.83 15.435 4.83 4.06 0 7.805-.735 11.235-2.205 3.43-1.47 6.3-3.99 8.61-7.56 2.31-3.57 3.605-8.435 3.885-14.595l7.14 8.19c-.7 7.98-2.625 14.7-5.775 20.16-3.15 5.46-7.49 9.625-13.02 12.495-5.53 2.87-12.285 4.305-20.265 4.305Z"/></g></g></svg>

data/app/assets/stylesheets/alert.css

@@ -0,0 +1,143 @@
+/* ===== Alert Component Styles ===== */
+/*
+ * Alert component for displaying callouts, messages, and notifications.
+ * Uses data attributes for styling to maintain consistency with other components.
+ * Fully compatible with dark mode via CSS variables.
+ */
+
+/* ===== Base Alert Styles ===== */
+[data-component="alert"] {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr;
+  @apply w-full rounded-lg border p-4 text-sm;
+  
+  /* Default colors */
+  background-color: var(--background);
+  color: var(--foreground);
+  border-color: var(--border);
+}
+
+/* Alert with icon - add left padding for icon space */
+[data-component="alert"][data-has-icon="true"] {
+  grid-template-columns: auto 1fr;
+  @apply gap-3;
+}
+
+/* ===== Icon Support ===== */
+[data-component="alert"] > svg:first-child,
+[data-component="alert"] [data-alert-part="icon"] {
+  @apply size-4 shrink-0;
+  color: var(--foreground);
+  /* Align with first line of text */
+  margin-top: 0.125rem;
+}
+
+/* ===== Alert Title ===== */
+[data-component="alert"] [data-alert-part="title"] {
+  @apply font-medium leading-none tracking-tight;
+  color: var(--foreground);
+}
+
+/* Title followed by description needs margin */
+[data-component="alert"] [data-alert-part="title"]:has(+ [data-alert-part="description"]) {
+  @apply mb-1;
+}
+
+/* ===== Alert Description ===== */
+[data-component="alert"] [data-alert-part="description"] {
+  @apply text-sm;
+  color: var(--muted-foreground);
+}
+
+/* Nested paragraphs */
+[data-component="alert"] [data-alert-part="description"] p {
+  @apply leading-relaxed;
+}
+
+/* Lists inside description */
+[data-component="alert"] [data-alert-part="description"] ul {
+  @apply mt-2 list-inside list-disc;
+}
+
+/* ===== Variant: Default ===== */
+[data-component="alert"][data-variant="default"] {
+  background-color: var(--background);
+  color: var(--foreground);
+  border-color: var(--border);
+}
+
+[data-component="alert"][data-variant="default"] > svg:first-child,
+[data-component="alert"][data-variant="default"] [data-alert-part="icon"] {
+  color: var(--foreground);
+}
+
+/* ===== Variant: Destructive ===== */
+[data-component="alert"][data-variant="destructive"] {
+  background-color: var(--destructive);
+  color: var(--destructive-foreground);
+  border-color: var(--destructive);
+}
+
+[data-component="alert"][data-variant="destructive"] [data-alert-part="title"] {
+  color: var(--destructive-foreground);
+}
+
+[data-component="alert"][data-variant="destructive"] [data-alert-part="description"] {
+  color: var(--destructive-foreground);
+  opacity: 0.9;
+}
+
+[data-component="alert"][data-variant="destructive"] > svg:first-child,
+[data-component="alert"][data-variant="destructive"] [data-alert-part="icon"] {
+  color: var(--destructive-foreground);
+}
+
+/* ===== Variant: Success ===== */
+[data-component="alert"][data-variant="success"] {
+  background-color: var(--success);
+  color: var(--success-foreground);
+  border-color: var(--success);
+}
+
+[data-component="alert"][data-variant="success"] [data-alert-part="title"] {
+  color: var(--success-foreground);
+}
+
+[data-component="alert"][data-variant="success"] [data-alert-part="description"] {
+  color: var(--success-foreground);
+  opacity: 0.9;
+}
+
+[data-component="alert"][data-variant="success"] > svg:first-child,
+[data-component="alert"][data-variant="success"] [data-alert-part="icon"] {
+  color: var(--success-foreground);
+}
+
+/* ===== Variant: Warning ===== */
+[data-component="alert"][data-variant="warning"] {
+  background-color: var(--warning);
+  color: var(--warning-foreground);
+  border-color: var(--warning);
+}
+
+[data-component="alert"][data-variant="warning"] [data-alert-part="title"] {
+  color: var(--warning-foreground);
+}
+
+[data-component="alert"][data-variant="warning"] [data-alert-part="description"] {
+  color: var(--warning-foreground);
+  opacity: 0.9;
+}
+
+[data-component="alert"][data-variant="warning"] > svg:first-child,
+[data-component="alert"][data-variant="warning"] [data-alert-part="icon"] {
+  color: var(--warning-foreground);
+}
+
+/* ===== 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.
+ */