maquina-components 0.1.1 → 0.2.0

data/app/assets/stylesheets/badge.css

@@ -0,0 +1,145 @@
+/* ===== Badge Component Styles ===== */
+/* 
+ * Badge component for status indicators, tags, counts, and labels.
+ * Uses data attributes for styling to avoid inline utility classes.
+ * Fully compatible with dark mode and supports icons.
+ */
+
+/* ===== Base Badge Styles ===== */
+[data-component="badge"] {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  @apply gap-1 rounded-md border border-transparent font-medium leading-none;
+  
+  /* Transitions */
+  @apply transition-[background-color,border-color,color,opacity] duration-150;
+}
+
+/* ===== Icon Support ===== */
+[data-component="badge"] svg {
+  /* Scales with font size using em */
+  width: 0.875em;
+  height: 0.875em;
+  @apply shrink-0 pointer-events-none;
+}
+
+/* ===== Size Variants ===== */
+
+/* Small size - compact badges for inline use */
+[data-component="badge"][data-size="sm"] {
+  @apply text-xs px-2 py-0.5 h-5;
+}
+
+/* Medium size - default, balanced size */
+[data-component="badge"][data-size="md"] {
+  @apply text-sm px-2.5 py-1 h-6;
+}
+
+/* Large size - prominent badges */
+[data-component="badge"][data-size="lg"] {
+  @apply text-sm px-3 py-1.5 h-7;
+}
+
+/* ===== Visual Variants ===== */
+
+/* Default variant - muted appearance */
+[data-component="badge"][data-variant="default"] {
+  background-color: var(--muted);
+  color: var(--muted-foreground);
+}
+
+[data-component="badge"][data-variant="default"]:hover {
+  @apply opacity-90;
+}
+
+/* Primary variant - brand color */
+[data-component="badge"][data-variant="primary"] {
+  background-color: var(--primary-color);
+  color: var(--primary-foreground-color);
+}
+
+[data-component="badge"][data-variant="primary"]:hover {
+  @apply opacity-90;
+}
+
+/* Secondary variant - subtle appearance */
+[data-component="badge"][data-variant="secondary"] {
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+[data-component="badge"][data-variant="secondary"]:hover {
+  @apply opacity-90;
+}
+
+/* Destructive variant - errors, deletions */
+[data-component="badge"][data-variant="destructive"] {
+  background-color: var(--destructive);
+  color: var(--destructive-foreground);
+}
+
+[data-component="badge"][data-variant="destructive"]:hover {
+  @apply opacity-90;
+}
+
+/* Success variant - positive status */
+[data-component="badge"][data-variant="success"] {
+  background-color: var(--success);
+  color: var(--success-foreground);
+}
+
+[data-component="badge"][data-variant="success"]:hover {
+  @apply opacity-90;
+}
+
+/* Warning variant - caution status */
+[data-component="badge"][data-variant="warning"] {
+  background-color: var(--warning);
+  color: var(--warning-foreground);
+}
+
+[data-component="badge"][data-variant="warning"]:hover {
+  @apply opacity-90;
+}
+
+/* Outline variant - transparent with border */
+[data-component="badge"][data-variant="outline"] {
+  @apply bg-transparent;
+  color: var(--foreground);
+  border-color: var(--border);
+}
+
+[data-component="badge"][data-variant="outline"]:hover {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+/* ===== Interactive States (when used as link/button) ===== */
+
+/* Focus state for keyboard navigation */
+a[data-component="badge"]:focus-visible,
+button[data-component="badge"]:focus-visible {
+  @apply outline-none;
+  box-shadow: 0 0 0 2px var(--background),
+              0 0 0 4px var(--border);
+}
+
+/* Active/pressed state */
+a[data-component="badge"]:active,
+button[data-component="badge"]:active {
+  @apply scale-[0.98];
+}
+
+/* Disabled state (if used as button) */
+button[data-component="badge"]:disabled {
+  @apply opacity-50 cursor-not-allowed pointer-events-none;
+}
+
+/* ===== 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/breadcrumbs.css

@@ -0,0 +1,163 @@
+/* ===== Breadcrumbs Component Styles ===== */
+/* Comprehensive CSS using data-attribute selectors */
+/* Uses @apply for theme-customizable properties */
+
+/* ===== Breadcrumbs Container (nav) ===== */
+[data-component="breadcrumbs"] {
+  /* Container has no default styles - allows flexible placement */
+}
+
+/* ===== Breadcrumbs List ===== */
+[data-breadcrumb-part="list"] {
+  @apply flex flex-wrap items-center gap-1.5;
+  @apply text-sm break-words;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Compact variant */
+[data-component="breadcrumbs"][data-size="sm"] [data-breadcrumb-part="list"] {
+  @apply gap-1 text-xs;
+}
+
+/* ===== Breadcrumb Item ===== */
+[data-breadcrumb-part="item"] {
+  @apply inline-flex items-center;
+}
+
+/* Hidden state for responsive collapsing */
+[data-breadcrumb-part="item"].hidden {
+  @apply hidden;
+}
+
+/* ===== Breadcrumb Link ===== */
+[data-breadcrumb-part="link"] {
+  @apply inline-flex items-center;
+  @apply text-sm font-medium;
+  @apply underline-offset-4;
+  @apply transition-colors;
+  color: var(--muted-foreground);
+}
+
+[data-breadcrumb-part="link"]:hover {
+  color: var(--foreground);
+  @apply underline;
+}
+
+[data-breadcrumb-part="link"]:focus-visible {
+  @apply outline-none underline;
+  color: var(--foreground);
+}
+
+/* Link with icon */
+[data-breadcrumb-part="link"] svg {
+  @apply size-3.5 shrink-0;
+}
+
+[data-breadcrumb-part="link"] svg:first-child {
+  @apply mr-1.5;
+}
+
+/* ===== Breadcrumb Page (current) ===== */
+[data-breadcrumb-part="page"] {
+  @apply inline-flex items-center;
+  @apply text-sm font-medium;
+  color: var(--foreground);
+}
+
+/* Page with icon */
+[data-breadcrumb-part="page"] svg {
+  @apply size-3.5 shrink-0;
+}
+
+[data-breadcrumb-part="page"] svg:first-child {
+  @apply mr-1.5;
+}
+
+/* ===== Breadcrumb Separator ===== */
+[data-breadcrumb-part="separator"] {
+  @apply inline-flex items-center;
+  color: var(--muted-foreground);
+}
+
+[data-breadcrumb-part="separator"] svg {
+  @apply size-3.5 shrink-0;
+}
+
+/* Hidden state for responsive collapsing */
+[data-breadcrumb-part="separator"].hidden {
+  @apply hidden;
+}
+
+/* ===== Breadcrumb Ellipsis ===== */
+[data-breadcrumb-part="ellipsis"] {
+  @apply inline-flex size-9 items-center justify-center;
+  color: var(--muted-foreground);
+}
+
+[data-breadcrumb-part="ellipsis"] svg {
+  @apply size-4 shrink-0;
+}
+
+/* Ellipsis as dropdown trigger */
+[data-breadcrumb-part="ellipsis"][data-state="open"],
+[data-breadcrumb-part="ellipsis"]:hover {
+  color: var(--foreground);
+}
+
+/* ===== Responsive Behavior ===== */
+/* Items hidden by Stimulus controller */
+[data-controller="breadcrumb"] [data-breadcrumb-target="item"].hidden,
+[data-controller="breadcrumb"] [data-breadcrumb-target="ellipsisSeparator"].hidden {
+  @apply hidden;
+}
+
+/* Ellipsis shown by Stimulus controller */
+[data-controller="breadcrumb"] [data-breadcrumb-target="ellipsis"]:not(.hidden) {
+  @apply inline-flex;
+}
+
+/* ===== Mobile Adjustments ===== */
+@media (max-width: 640px) {
+  [data-breadcrumb-part="list"] {
+    @apply gap-1;
+  }
+
+  /* Hide middle items on very small screens by default */
+  [data-component="breadcrumbs"][data-auto-collapse] [data-breadcrumb-part="item"]:not(:first-child):not(:last-child) {
+    @apply hidden sm:inline-flex;
+  }
+}
+
+/* ===== Variants ===== */
+
+/* Slash separator variant */
+[data-component="breadcrumbs"][data-separator="slash"] [data-breadcrumb-part="separator"]::before {
+  content: "/";
+  @apply px-1;
+}
+
+[data-component="breadcrumbs"][data-separator="slash"] [data-breadcrumb-part="separator"] svg {
+  @apply hidden;
+}
+
+/* Dot separator variant */
+[data-component="breadcrumbs"][data-separator="dot"] [data-breadcrumb-part="separator"]::before {
+  content: "•";
+  @apply px-1;
+}
+
+[data-component="breadcrumbs"][data-separator="dot"] [data-breadcrumb-part="separator"] svg {
+  @apply hidden;
+}
+
+/* Arrow separator variant */
+[data-component="breadcrumbs"][data-separator="arrow"] [data-breadcrumb-part="separator"]::before {
+  content: "→";
+  @apply px-1;
+}
+
+[data-component="breadcrumbs"][data-separator="arrow"] [data-breadcrumb-part="separator"] svg {
+  @apply hidden;
+}

data/app/assets/stylesheets/card.css

@@ -0,0 +1,128 @@
+/* ===== Card Component Styles ===== */
+/*
+ * Card component for grouping related content with header, body, and footer.
+ * Uses data attributes for styling to maintain consistency with other components.
+ * Fully compatible with dark mode via CSS variables.
+ */
+
+/* ===== Base Card Styles ===== */
+[data-component="card"] {
+  display: flex;
+  flex-direction: column;
+  
+  /* Border & Radius */
+  @apply rounded-xl border shadow;
+  border-color: var(--border);
+  
+  /* Colors */
+  background-color: var(--card);
+  color: var(--card-foreground);
+}
+
+/* ===== Card Header ===== */
+[data-component="card"] [data-card-part="header"] {
+  display: flex;
+  flex-direction: column;
+  @apply gap-1.5 p-6;
+}
+
+/* Header with row layout (when using action) */
+[data-component="card"] [data-card-part="header"][data-layout="row"] {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  @apply gap-4;
+}
+
+/* ===== Card Title ===== */
+[data-component="card"] [data-card-part="title"] {
+  @apply text-lg font-semibold leading-none tracking-tight;
+}
+
+/* Small title variant (for compact headers) */
+[data-component="card"] [data-card-part="title"][data-size="sm"] {
+  @apply text-sm font-medium;
+}
+
+/* ===== Card Description ===== */
+[data-component="card"] [data-card-part="description"] {
+  @apply text-sm;
+  color: var(--muted-foreground);
+}
+
+/* ===== Card Action ===== */
+[data-component="card"] [data-card-part="action"] {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  @apply gap-2;
+}
+
+/* ===== Card Content ===== */
+[data-component="card"] [data-card-part="content"] {
+  @apply p-6 pt-0;
+}
+
+/* Content with top padding (when no header) */
+[data-component="card"] [data-card-part="content"][data-spacing="full"] {
+  @apply pt-6;
+}
+
+/* ===== Card Footer ===== */
+[data-component="card"] [data-card-part="footer"] {
+  display: flex;
+  align-items: center;
+  @apply p-6 pt-0;
+}
+
+/* Footer with top padding (when no content) */
+[data-component="card"] [data-card-part="footer"][data-spacing="full"] {
+  @apply pt-6;
+}
+
+/* Footer alignment variants */
+[data-component="card"] [data-card-part="footer"][data-align="between"] {
+  justify-content: space-between;
+}
+
+[data-component="card"] [data-card-part="footer"][data-align="end"] {
+  justify-content: flex-end;
+}
+
+[data-component="card"] [data-card-part="footer"][data-align="center"] {
+  justify-content: center;
+}
+
+/* ===== Icon Support ===== */
+[data-component="card"] [data-card-part="header"] svg,
+[data-component="card"] [data-card-part="action"] svg {
+  @apply size-4 shrink-0;
+  color: var(--muted-foreground);
+}
+
+/* ===== Interactive Card (when used as link/button) ===== */
+a[data-component="card"],
+button[data-component="card"] {
+  text-decoration: none;
+  cursor: pointer;
+  @apply transition-[border-color,box-shadow] duration-150;
+}
+
+a[data-component="card"]:hover,
+button[data-component="card"]:hover {
+  border-color: var(--accent);
+}
+
+a[data-component="card"]:focus-visible,
+button[data-component="card"]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--background),
+              0 0 0 4px 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.
+ */

data/app/assets/stylesheets/dropdown_menu.css

@@ -0,0 +1,248 @@
+/* ===== Dropdown Menu Component Styles ===== */
+/*
+ * Dropdown menu component for displaying actions triggered by a button.
+ * Uses data attributes for styling to avoid inline utility classes.
+ * Fully compatible with dark mode via CSS variables.
+ *
+ * Structure:
+ * - dropdown-menu (root with Stimulus controller)
+ *   - trigger (button that opens menu)
+ *   - content (positioned menu container)
+ *     - label (section heading)
+ *     - group (logical grouping)
+ *     - item (clickable action)
+ *     - separator (divider)
+ *     - shortcut (keyboard hint)
+ */
+
+/* ===== Root Container ===== */
+[data-component="dropdown-menu"] {
+  position: relative;
+  display: inline-block;
+}
+
+/* ===== Trigger Button ===== */
+/* Trigger uses button component styles via data-component="button" */
+/* Additional dropdown-specific styles */
+[data-component="dropdown-menu"] [data-dropdown-menu-target="trigger"] {
+  @apply gap-2;
+}
+
+/* Chevron icon rotation when open */
+[data-component="dropdown-menu"] [data-dropdown-menu-target="chevron"] {
+  @apply size-4 shrink-0 opacity-50 transition-transform duration-200;
+}
+
+[data-component="dropdown-menu"][data-state="open"] [data-dropdown-menu-target="chevron"] {
+  transform: rotate(180deg);
+}
+
+/* ===== Content Container ===== */
+[data-dropdown-menu-part="content"] {
+  position: absolute;
+  z-index: 50;
+  display: none;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: var(--popover, var(--background));
+  color: var(--popover-foreground, var(--foreground));
+  @apply min-w-[8rem] rounded-md border p-1 shadow-md;
+  border-color: var(--border);
+
+  /* Animation setup */
+  @apply transition-all duration-150 ease-out;
+}
+
+/* Visible state */
+[data-dropdown-menu-part="content"][data-state="open"] {
+  display: flex;
+}
+
+/* Animation states */
+[data-dropdown-menu-part="content"][data-state="open"] {
+  animation: dropdown-menu-in 150ms ease-out;
+}
+
+[data-dropdown-menu-part="content"][data-state="closing"] {
+  display: flex;
+  animation: dropdown-menu-out 100ms ease-in forwards;
+}
+
+@keyframes dropdown-menu-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes dropdown-menu-out {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
+}
+
+/* ===== Width Variants ===== */
+[data-dropdown-menu-part="content"][data-width="default"] {
+  @apply min-w-[8rem];
+}
+
+[data-dropdown-menu-part="content"][data-width="sm"] {
+  @apply w-40;
+}
+
+[data-dropdown-menu-part="content"][data-width="md"] {
+  @apply w-56;
+}
+
+[data-dropdown-menu-part="content"][data-width="lg"] {
+  @apply w-72;
+}
+
+/* ===== Alignment ===== */
+[data-dropdown-menu-part="content"][data-align="start"] {
+  left: 0;
+}
+
+[data-dropdown-menu-part="content"][data-align="center"] {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+[data-dropdown-menu-part="content"][data-align="center"][data-state="open"] {
+  animation: dropdown-menu-in-center 150ms ease-out;
+}
+
+@keyframes dropdown-menu-in-center {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.95) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) scale(1) translateY(0);
+  }
+}
+
+[data-dropdown-menu-part="content"][data-align="end"] {
+  right: 0;
+}
+
+/* ===== Side Positioning ===== */
+[data-dropdown-menu-part="content"][data-side="bottom"] {
+  top: 100%;
+  @apply mt-1;
+}
+
+[data-dropdown-menu-part="content"][data-side="top"] {
+  bottom: 100%;
+  @apply mb-1;
+}
+
+[data-dropdown-menu-part="content"][data-side="left"] {
+  right: 100%;
+  top: 0;
+  @apply mr-1;
+}
+
+[data-dropdown-menu-part="content"][data-side="right"] {
+  left: 100%;
+  top: 0;
+  @apply ml-1;
+}
+
+/* ===== Menu Item ===== */
+[data-dropdown-menu-part="item"] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: default;
+  user-select: none;
+  color: var(--popover-foreground, var(--foreground));
+  @apply gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors;
+}
+
+/* Reset link styles */
+a[data-dropdown-menu-part="item"] {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* Hover state */
+[data-dropdown-menu-part="item"]:hover:not([disabled]):not([aria-disabled="true"]) {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+  cursor: pointer;
+}
+
+/* Focus state (keyboard navigation) */
+[data-dropdown-menu-part="item"]:focus {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+/* Disabled state */
+[data-dropdown-menu-part="item"][disabled],
+[data-dropdown-menu-part="item"][aria-disabled="true"] {
+  @apply opacity-50 cursor-not-allowed pointer-events-none;
+}
+
+/* Destructive variant */
+[data-dropdown-menu-part="item"][data-variant="destructive"] {
+  color: var(--destructive);
+}
+
+[data-dropdown-menu-part="item"][data-variant="destructive"]:hover:not([disabled]):not([aria-disabled="true"]),
+[data-dropdown-menu-part="item"][data-variant="destructive"]:focus {
+  background-color: var(--destructive);
+  color: var(--destructive-foreground);
+}
+
+/* Icon support */
+[data-dropdown-menu-part="item"] svg {
+  @apply size-4 shrink-0 pointer-events-none;
+}
+
+/* ===== Label ===== */
+[data-dropdown-menu-part="label"] {
+  @apply px-2 py-1.5 text-sm font-semibold;
+  color: var(--foreground);
+}
+
+/* Inset variant (aligns with items that have icons) */
+[data-dropdown-menu-part="label"][data-inset="true"] {
+  @apply pl-8;
+}
+
+/* ===== Separator ===== */
+[data-dropdown-menu-part="separator"] {
+  @apply -mx-1 my-1 h-px;
+  background-color: var(--muted);
+}
+
+/* ===== Group ===== */
+[data-dropdown-menu-part="group"] {
+  display: flex;
+  flex-direction: column;
+}
+
+/* ===== Shortcut ===== */
+[data-dropdown-menu-part="shortcut"] {
+  @apply ml-auto text-xs tracking-widest;
+  color: var(--muted-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.
+ */