maquina-components 0.1.2 → 0.2.0

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

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