better_ui 0.5.0 → 0.5.1

data/lib/generators/better_ui/templates/components/_icon.scss

@@ -1,90 +1,134 @@
-/* ==============================
- * Icon Component
- * ============================== */
-
-/* Stili di base e presentazione */
-.bui-icon-base {
-  @apply inline-block;
-}
-
-/* Varianti di stile */
-.bui-icon-solid {
-  @apply fas;
-}
-
-.bui-icon-regular {
-  @apply far;
-}
-
-.bui-icon-light {
-  @apply fal;
-}
-
-.bui-icon-brands {
-  @apply fab;
-}
-
-.bui-icon-duotone {
-  @apply fad;
-}
-
-/* Dimensioni */
-.bui-icon-xsmall {
-  @apply fa-xs;
-}
-
-.bui-icon-small {
-  @apply fa-sm;
-}
-
-.bui-icon-medium {
-  /* Default di Font Awesome, non richiede classi aggiuntive */
-}
-
-.bui-icon-large {
-  @apply fa-lg;
-}
-
-.bui-icon-xlarge {
-  @apply fa-xl;
-}
-
-/* Rotazioni */
-.bui-icon-rotate-90 {
-  @apply fa-rotate-90;
-}
-
-.bui-icon-rotate-180 {
-  @apply fa-rotate-180;
-}
-
-.bui-icon-rotate-270 {
-  @apply fa-rotate-270;
-}
-
-/* Flip */
-.bui-icon-flip-horizontal {
-  @apply fa-flip-horizontal;
-}
-
-.bui-icon-flip-vertical {
-  @apply fa-flip-vertical;
-}
-
-/* Animazioni */
-.bui-icon-spin {
-  @apply fa-spin;
-}
-
-.bui-icon-pulse {
-  @apply fa-pulse;
-}
-
-/* Altre opzioni */
-.bui-icon-fw {
-  @apply fa-fw;
-}
-
-.bui-icon-border {
-  @apply fa-border;
+@layer components {
+  // Classe base per l'icona (Block)
+  .bui-icon {
+    @apply inline-flex items-center justify-center;
+    
+    // Modifiers (dimensioni)
+    &--xs {
+      @apply h-3 w-3;
+      
+      svg {
+        @apply h-3 w-3;
+      }
+    }
+    
+    &--sm {
+      @apply h-4 w-4;
+      
+      svg {
+        @apply h-4 w-4;
+      }
+    }
+    
+    &--md {
+      @apply h-5 w-5;
+      
+      svg {
+        @apply h-5 w-5;
+      }
+    }
+    
+    &--lg {
+      @apply h-6 w-6;
+      
+      svg {
+        @apply h-6 w-6;
+      }
+    }
+    
+    &--xl {
+      @apply h-8 w-8;
+      
+      svg {
+        @apply h-8 w-8;
+      }
+    }
+    
+    // Modifiers (varianti colore)
+    &--default {
+      @apply text-gray-500;
+    }
+    
+    &--white {
+      @apply text-white;
+    }
+    
+    &--red {
+      @apply text-red-500;
+    }
+    
+    &--rose {
+      @apply text-rose-500;
+    }
+    
+    &--orange {
+      @apply text-orange-500;
+    }
+    
+    &--green {
+      @apply text-green-500;
+    }
+    
+    &--blue {
+      @apply text-blue-500;
+    }
+    
+    &--yellow {
+      @apply text-yellow-500;
+    }
+    
+    &--violet {
+      @apply text-violet-500;
+    }
+    
+    // Modifiers (varianti stile)
+    &--solid {
+      @apply rounded-full p-2 bg-gray-100;
+    }
+    
+    &--solid-primary {
+      @apply rounded-full p-2 text-white;
+      
+      &.bui-icon--red {
+        @apply bg-red-500;
+      }
+      
+      &.bui-icon--rose {
+        @apply bg-rose-500;
+      }
+      
+      &.bui-icon--orange {
+        @apply bg-orange-500;
+      }
+      
+      &.bui-icon--green {
+        @apply bg-green-500;
+      }
+      
+      &.bui-icon--blue {
+        @apply bg-blue-500;
+      }
+      
+      &.bui-icon--yellow {
+        @apply bg-yellow-500;
+      }
+      
+      &.bui-icon--violet {
+        @apply bg-violet-500;
+      }
+    }
+    
+    // Stati
+    &--spin {
+      @apply animate-spin;
+    }
+    
+    &--pulse {
+      @apply animate-pulse;
+    }
+    
+    &--fixed-width {
+      @apply w-5;
+    }
+  }
 } 

data/lib/generators/better_ui/templates/components/_index.scss

@@ -0,0 +1,17 @@
+// Index file che raggruppa e riespone tutti i componenti
+// Nota: È possibile utilizzare le variabili con @use "better_ui/components/variables" as vars;
+
+// Componenti generali
+@forward "button";
+@forward "panel";
+@forward "table";
+@forward "badge";
+@forward "avatar";
+@forward "icon";
+@forward "link";
+@forward "heading";
+@forward "breadcrumb";
+@forward "spinner";
+
+// Componenti applicativi
+@forward "card"; 

data/lib/generators/better_ui/templates/components/_link.scss

@@ -1,130 +1,100 @@
-/* ==============================
- * Link Component
- * ============================== */
-
-/* Classe base per i link */
-.bui-link-base {
-  @apply flex items-center;
-}
-
-/* Contenitore icona */
-.bui-link-icon-wrapper {
-  @apply mr-1.5;
-}
-
-/* Temi di colore - Default */
-.bui-link-default-link {
-  @apply text-gray-300 hover:text-white;
-}
-
-.bui-link-default-active {
-  @apply text-white font-medium;
-}
-
-.bui-link-default-text {
-  @apply text-white;
-}
-
-/* Temi di colore - White */
-.bui-link-white-link {
-  @apply text-gray-600 hover:text-gray-900;
-}
-
-.bui-link-white-active {
-  @apply text-black font-medium;
-}
-
-.bui-link-white-text {
-  @apply text-black;
-}
-
-/* Temi di colore - Red */
-.bui-link-red-link {
-  @apply text-red-200 hover:text-white;
-}
-
-.bui-link-red-active {
-  @apply text-white font-medium;
-}
-
-.bui-link-red-text {
-  @apply text-white;
-}
-
-/* Temi di colore - Rose */
-.bui-link-rose-link {
-  @apply text-rose-200 hover:text-white;
-}
-
-.bui-link-rose-active {
-  @apply text-white font-medium;
-}
-
-.bui-link-rose-text {
-  @apply text-white;
-}
-
-/* Temi di colore - Orange */
-.bui-link-orange-link {
-  @apply text-orange-200 hover:text-white;
-}
-
-.bui-link-orange-active {
-  @apply text-white font-medium;
-}
-
-.bui-link-orange-text {
-  @apply text-white;
-}
-
-/* Temi di colore - Green */
-.bui-link-green-link {
-  @apply text-green-200 hover:text-white;
-}
-
-.bui-link-green-active {
-  @apply text-white font-medium;
-}
-
-.bui-link-green-text {
-  @apply text-white;
-}
-
-/* Temi di colore - Blue */
-.bui-link-blue-link {
-  @apply text-blue-200 hover:text-white;
-}
-
-.bui-link-blue-active {
-  @apply text-white font-medium;
-}
-
-.bui-link-blue-text {
-  @apply text-white;
-}
-
-/* Temi di colore - Yellow */
-.bui-link-yellow-link {
-  @apply text-yellow-700 hover:text-black;
-}
-
-.bui-link-yellow-active {
-  @apply text-black font-medium;
-}
-
-.bui-link-yellow-text {
-  @apply text-black;
-}
-
-/* Temi di colore - Violet */
-.bui-link-violet-link {
-  @apply text-violet-200 hover:text-white;
-}
-
-.bui-link-violet-active {
-  @apply text-white font-medium;
-}
-
-.bui-link-violet-text {
-  @apply text-white;
+@layer components {
+  // Classe base per il link (Block)
+  .bui-link {
+    @apply inline-flex items-center transition-colors duration-200;
+    
+    // Elements
+    &__icon {
+      @apply flex-shrink-0;
+      
+      &--left {
+        @apply mr-1.5;
+      }
+      
+      &--right {
+        @apply ml-1.5;
+      }
+    }
+    
+    &__text {
+      @apply inline;
+    }
+    
+    // Modifiers (varianti colore)
+    &--default {
+      @apply text-gray-700 hover:text-gray-900;
+    }
+    
+    &--white {
+      @apply text-white hover:text-gray-100;
+    }
+    
+    &--red {
+      @apply text-red-600 hover:text-red-700;
+    }
+    
+    &--rose {
+      @apply text-rose-600 hover:text-rose-700;
+    }
+    
+    &--orange {
+      @apply text-orange-600 hover:text-orange-700;
+    }
+    
+    &--green {
+      @apply text-green-600 hover:text-green-700;
+    }
+    
+    &--blue {
+      @apply text-blue-600 hover:text-blue-700;
+    }
+    
+    &--yellow {
+      @apply text-yellow-600 hover:text-yellow-700;
+    }
+    
+    &--violet {
+      @apply text-violet-600 hover:text-violet-700;
+    }
+    
+    // Modifiers (varianti stile)
+    &--underlined {
+      @apply underline decoration-1 underline-offset-2;
+    }
+    
+    &--hover-underlined {
+      @apply no-underline hover:underline decoration-1 underline-offset-2;
+    }
+    
+    &--bold {
+      @apply font-semibold;
+    }
+    
+    // Modifiers (dimensioni)
+    &--sm {
+      @apply text-sm;
+    }
+    
+    &--base {
+      @apply text-base;
+    }
+    
+    &--lg {
+      @apply text-lg;
+    }
+    
+    // Stati
+    &--active {
+      @apply font-medium;
+    }
+    
+    &--disabled {
+      @apply pointer-events-none opacity-50;
+    }
+    
+    // Stili specifici per bottoni che sembrano link
+    &--button {
+      @apply appearance-none bg-transparent border-none p-0 cursor-pointer;
+    }
+  }
 }