maquina-components 0.1.2 → 0.2.0

data/app/assets/stylesheets/maquina_components.css

@@ -1,99 +1,178 @@
-@utility button-base {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  /* gap-2 */
-  white-space: nowrap;
-  border-radius: 0.375rem;
-  /* rounded-md */
-  font-size: 0.875rem;
-  /* text-sm */
-  font-weight: 500;
-  /* font-medium */
-  height: 2.25rem;
-  /* h-9 */
-  padding: 0.5rem 1rem;
-  /* px-4 py-2 */
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+/* Base animation utilities */
+@utility animate-in {
+  animation-duration: var(--duration-normal);
+  animation-timing-function: var(--ease-out);
+  animation-fill-mode: forwards;
+}
+
+@utility animate-out {
+  animation-duration: var(--duration-normal);
+  animation-timing-function: var(--ease-in);
+  animation-fill-mode: forwards;
+}
+
+/* Fade animations */
+@keyframes fade-in-0 {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out-0 {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@utility fade-in-0 {
+  animation-name: fade-in-0;
+}
+
+@utility fade-out-0 {
+  animation-name: fade-out-0;
+}
 
-  &:focus-visible {
-    outline: none;
-    ring-width: 1px;
-    ring-color: var(--color-ring);
+/* Zoom animations */
+@keyframes zoom-in-95 {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
   }
 
-  &:disabled {
-    pointer-events: none;
-    opacity: 0.5;
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes zoom-out-95 {
+  from {
+    transform: scale(1);
+    opacity: 1;
   }
 
-  & svg {
-    pointer-events: none;
-    width: 1rem;
-    /* size-4 */
-    height: 1rem;
-    /* size-4 */
-    flex-shrink: 0;
+  to {
+    transform: scale(0.95);
+    opacity: 0;
   }
 }
 
-/* Form */
-.form-base {
-  @apply flex flex-col w-full gap-6;
+@utility zoom-in-95 {
+  animation-name: zoom-in-95;
 }
 
-.form-group {
-  @apply flex flex-col gap-2;
+@utility zoom-out-95 {
+  animation-name: zoom-out-95;
 }
 
-.form-label {
-  @apply text-foreground text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
+/* Slide animations with specific measurements */
+@keyframes slide-in-from-top-2 {
+  from {
+    transform: translateY(-0.5rem);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 
-.form-input {
-  @apply flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
+@keyframes slide-in-from-bottom-2 {
+  from {
+    transform: translateY(0.5rem);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 
-.form-select {
-  @apply col-start-1 row-start-1 w-full appearance-none rounded-md bg-transparent py-1.5 pl-3 pr-8 text-base text-foreground border border-input shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm/6;
+@keyframes slide-in-from-left-2 {
+  from {
+    transform: translateX(-0.5rem);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
 
-.form-select-group {
-  @apply grid grid-cols-1;
+@keyframes slide-in-from-right-2 {
+  from {
+    transform: translateX(0.5rem);
+    opacity: 0;
+  }
 
-  & svg {
-    @apply pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-muted-foreground sm:size-4;
+  to {
+    transform: translateX(0);
+    opacity: 1;
   }
 }
 
-.form-help-text {
-  @apply text-sm text-muted-foreground;
+@utility slide-in-from-top-2 {
+  animation-name: slide-in-from-top-2;
+}
+
+@utility slide-in-from-bottom-2 {
+  animation-name: slide-in-from-bottom-2;
+}
+
+@utility slide-in-from-left-2 {
+  animation-name: slide-in-from-left-2;
 }
 
-.form-error-text {
-  @apply text-sm text-destructive;
+@utility slide-in-from-right-2 {
+  animation-name: slide-in-from-right-2;
 }
 
-/* Buttons */
-.button-primary {
-  @apply button-base bg-primary text-primary-foreground hover:bg-primary/90;
+/* Duration modifiers */
+@utility duration-fast {
+  animation-duration: var(--duration-fast);
 }
 
-.button-secondary {
-  @apply button-base bg-secondary text-secondary-foreground hover:bg-secondary/80;
+@utility duration-normal {
+  animation-duration: var(--duration-normal);
 }
 
-.button-ghost {
-  @apply button-base hover:bg-secondary hover:text-secondary-foreground;
+@utility duration-slow {
+  animation-duration: var(--duration-slow);
 }
 
-.button-outline {
-  @apply button-base border border-border bg-background shadow-sm hover:bg-secondary/40 hover:text-secondary-foreground;
+/* Sidebar */
+
+.sidebar-primary-button {
+  @apply flex w-full items-center gap-2 overflow-hidden rounded-md p-2
+    text-left outline-hidden ring-sidebar-ring transition-[width,height,padding]
+    focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50
+    group-has-data-[sidebar=menu-action]/menu-item:pr-8
+    aria-disabled:pointer-events-none aria-disabled:opacity-50
+    group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2!
+    [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 h-8 text-sm
+    bg-primary text-primary-foreground hover:bg-primary/90
+    hover:text-primary-foreground min-w-8 duration-200 ease-linear;
 }
 
-.button-destructive {
-  @apply button-base bg-destructive text-destructive shadow-sm hover:bg-destructive/90;
+.sidebar-outline-button {
+  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md
+    text-sm font-medium transition-all disabled:pointer-events-none
+    disabled:opacity-50 [&_svg]:pointer-events-none
+    [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none
+    focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
+    aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
+    aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent
+    hover:text-accent-foreground dark:bg-input/30 dark:border-input
+    dark:hover:bg-input/50 size-8 group-data-[collapsible=icon]:opacity-0;
 }

data/app/assets/stylesheets/pagination.css

@@ -0,0 +1,154 @@
+/* ===== Pagination Component Styles ===== */
+/*
+ * Navigation for paginated content following shadcn/ui patterns.
+ * Uses data attributes for styling to avoid inline utility classes.
+ * Fully compatible with dark mode via CSS variables.
+ *
+ * Structure:
+ * - pagination (nav root)
+ *   - content (ul list)
+ *     - item (li wrapper)
+ *       - link / previous / next / ellipsis
+ */
+
+/* ===== Root Container ===== */
+[data-component="pagination"] {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  @apply mx-auto;
+}
+
+/* ===== Content List ===== */
+[data-pagination-part="content"] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  @apply gap-1;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ===== Item Wrapper ===== */
+[data-pagination-part="item"] {
+  /* No specific styles needed, just a wrapper */
+}
+
+/* ===== Shared Button/Link Base Styles ===== */
+[data-pagination-part="link"],
+[data-pagination-part="previous"],
+[data-pagination-part="next"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  @apply rounded-md text-sm font-medium;
+  @apply transition-colors duration-150;
+  
+  /* Size */
+  @apply h-9 min-w-9 px-3;
+  
+  /* Colors - ghost style */
+  background-color: transparent;
+  color: var(--foreground);
+  
+  /* Remove default link/button styles */
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+}
+
+/* ===== Page Number Links ===== */
+[data-pagination-part="link"]:hover:not([aria-disabled="true"]) {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+[data-pagination-part="link"][data-active="true"] {
+  border: 1px solid var(--border);
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
+[data-pagination-part="link"][data-active="true"]:hover {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+/* ===== Previous/Next Navigation ===== */
+[data-pagination-part="previous"],
+[data-pagination-part="next"] {
+  @apply gap-1 px-2.5;
+}
+
+[data-pagination-part="previous"]:hover:not([aria-disabled="true"]),
+[data-pagination-part="next"]:hover:not([aria-disabled="true"]) {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+/* Hide labels on small screens */
+@media (max-width: 640px) {
+  [data-pagination-part="previous"] span,
+  [data-pagination-part="next"] span {
+    @apply sr-only;
+  }
+  
+  [data-pagination-part="previous"],
+  [data-pagination-part="next"] {
+    @apply px-2;
+  }
+}
+
+/* ===== Ellipsis ===== */
+[data-pagination-part="ellipsis"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  @apply h-9 w-9;
+  color: var(--muted-foreground);
+}
+
+/* ===== Disabled State ===== */
+[data-pagination-part="link"][aria-disabled="true"],
+[data-pagination-part="previous"][aria-disabled="true"],
+[data-pagination-part="next"][aria-disabled="true"] {
+  @apply opacity-50 pointer-events-none cursor-not-allowed;
+}
+
+/* ===== Focus Visible ===== */
+[data-pagination-part="link"]:focus-visible,
+[data-pagination-part="previous"]:focus-visible,
+[data-pagination-part="next"]:focus-visible {
+  @apply outline-none;
+  box-shadow: 0 0 0 2px var(--background),
+              0 0 0 4px var(--ring);
+}
+
+/* ===== Icon Sizing ===== */
+[data-pagination-part="previous"] svg,
+[data-pagination-part="next"] svg,
+[data-pagination-part="ellipsis"] svg {
+  @apply size-4 shrink-0;
+}
+
+/* ===== Screen Reader Only ===== */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* ===== 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.
+ */