better_ui 0.3.0 → 0.5.1

data/app/assets/stylesheets/better_ui/components/_avatar.scss

@@ -0,0 +1,200 @@
+@layer components {
+  // Classe base per l'avatar (Block)
+  .bui-avatar {
+    @apply inline-flex items-center justify-center relative;
+    
+    // Elements
+    &__image {
+      @apply object-cover;
+    }
+    
+    &__placeholder {
+      @apply flex items-center justify-center font-medium text-white uppercase;
+    }
+    
+    &__status {
+      @apply absolute bottom-0 right-0 block rounded-full ring-2 ring-white;
+      
+      &--online {
+        @apply bg-green-400;
+      }
+      
+      &--offline {
+        @apply bg-gray-400;
+      }
+      
+      &--busy {
+        @apply bg-red-400;
+      }
+      
+      &--away {
+        @apply bg-yellow-400;
+      }
+    }
+    
+    &__presence {
+      @apply absolute block rounded-full ring-2 ring-white;
+    }
+    
+    &__badge {
+      @apply absolute -top-1 -right-1 flex items-center justify-center;
+    }
+    
+    // Modifiers (dimensioni)
+    &--xs {
+      @apply h-6 w-6;
+      
+      .bui-avatar__placeholder {
+        @apply text-xs;
+      }
+      
+      .bui-avatar__status {
+        @apply h-1.5 w-1.5;
+      }
+      
+      .bui-avatar__badge {
+        @apply h-4 w-4 text-[0.6rem];
+      }
+    }
+    
+    &--sm {
+      @apply h-8 w-8;
+      
+      .bui-avatar__placeholder {
+        @apply text-xs;
+      }
+      
+      .bui-avatar__status {
+        @apply h-2 w-2;
+      }
+      
+      .bui-avatar__badge {
+        @apply h-5 w-5 text-xs;
+      }
+    }
+    
+    &--md {
+      @apply h-10 w-10;
+      
+      .bui-avatar__placeholder {
+        @apply text-sm;
+      }
+      
+      .bui-avatar__status {
+        @apply h-2.5 w-2.5;
+      }
+      
+      .bui-avatar__badge {
+        @apply h-6 w-6 text-xs;
+      }
+    }
+    
+    &--lg {
+      @apply h-12 w-12;
+      
+      .bui-avatar__placeholder {
+        @apply text-base;
+      }
+      
+      .bui-avatar__status {
+        @apply h-3 w-3;
+      }
+      
+      .bui-avatar__badge {
+        @apply h-7 w-7 text-sm;
+      }
+    }
+    
+    &--xl {
+      @apply h-16 w-16;
+      
+      .bui-avatar__placeholder {
+        @apply text-lg;
+      }
+      
+      .bui-avatar__status {
+        @apply h-4 w-4;
+      }
+      
+      .bui-avatar__badge {
+        @apply h-8 w-8 text-sm;
+      }
+    }
+    
+    // Modifiers (colori placeholders)
+    &--gray {
+      .bui-avatar__placeholder {
+        @apply bg-gray-500;
+      }
+    }
+    
+    &--red {
+      .bui-avatar__placeholder {
+        @apply bg-red-500;
+      }
+    }
+    
+    &--blue {
+      .bui-avatar__placeholder {
+        @apply bg-blue-500;
+      }
+    }
+    
+    &--green {
+      .bui-avatar__placeholder {
+        @apply bg-green-500;
+      }
+    }
+    
+    &--violet {
+      .bui-avatar__placeholder {
+        @apply bg-violet-500;
+      }
+    }
+    
+    &--orange {
+      .bui-avatar__placeholder {
+        @apply bg-orange-500;
+      }
+    }
+    
+    &--yellow {
+      .bui-avatar__placeholder {
+        @apply bg-yellow-500 text-yellow-900;
+      }
+    }
+    
+    // Modifiers (forma)
+    &--circle {
+      @apply rounded-full;
+      
+      .bui-avatar__image,
+      .bui-avatar__placeholder {
+        @apply rounded-full;
+      }
+    }
+    
+    &--square {
+      @apply rounded-md;
+      
+      .bui-avatar__image,
+      .bui-avatar__placeholder {
+        @apply rounded-md;
+      }
+    }
+    
+    // Modifiers (gruppo)
+    &--group {
+      @apply -ml-2 first:ml-0;
+    }
+  }
+  
+  // Avatar group container
+  .bui-avatar-group {
+    @apply flex;
+    
+    .bui-avatar {
+      @apply border-2 border-white;
+    }
+  }
+} 

data/app/assets/stylesheets/better_ui/components/_badge.scss

@@ -0,0 +1,154 @@
+@layer components {
+  // Classe base per il badge (Block)
+  .bui-badge {
+    @apply inline-flex items-center justify-center rounded-full px-2.5 py-0.5 text-xs font-medium;
+    
+    // Elements
+    &__icon {
+      @apply flex-shrink-0;
+      
+      &--left {
+        @apply -ml-0.5 mr-1.5;
+      }
+      
+      &--right {
+        @apply -mr-0.5 ml-1.5;
+      }
+    }
+    
+    &__text {
+      @apply whitespace-nowrap;
+    }
+    
+    &__dot {
+      @apply h-2 w-2 rounded-full mr-1.5;
+    }
+    
+    // Modifiers (varianti colore)
+    &--default {
+      @apply bg-gray-100 text-gray-800;
+      
+      .bui-badge__dot {
+        @apply bg-gray-500;
+      }
+    }
+    
+    &--white {
+      @apply bg-white text-gray-800 border border-gray-200;
+      
+      .bui-badge__dot {
+        @apply bg-gray-400;
+      }
+    }
+    
+    &--red {
+      @apply bg-red-100 text-red-800;
+      
+      .bui-badge__dot {
+        @apply bg-red-500;
+      }
+    }
+    
+    &--rose {
+      @apply bg-rose-100 text-rose-800;
+      
+      .bui-badge__dot {
+        @apply bg-rose-500;
+      }
+    }
+    
+    &--orange {
+      @apply bg-orange-100 text-orange-800;
+      
+      .bui-badge__dot {
+        @apply bg-orange-500;
+      }
+    }
+    
+    &--green {
+      @apply bg-green-100 text-green-800;
+      
+      .bui-badge__dot {
+        @apply bg-green-500;
+      }
+    }
+    
+    &--blue {
+      @apply bg-blue-100 text-blue-800;
+      
+      .bui-badge__dot {
+        @apply bg-blue-500;
+      }
+    }
+    
+    &--yellow {
+      @apply bg-yellow-100 text-yellow-800;
+      
+      .bui-badge__dot {
+        @apply bg-yellow-500;
+      }
+    }
+    
+    &--violet {
+      @apply bg-violet-100 text-violet-800;
+      
+      .bui-badge__dot {
+        @apply bg-violet-500;
+      }
+    }
+    
+    // Modifiers (varianti dimensione)
+    &--small {
+      @apply text-xs px-2 py-0.5;
+    }
+    
+    &--medium {
+      @apply text-sm px-2.5 py-0.5;
+    }
+    
+    &--large {
+      @apply text-sm px-3 py-1;
+    }
+    
+    // Modifiers (varianti stile)
+    &--pill {
+      @apply rounded-full;
+    }
+    
+    &--square {
+      @apply rounded-md;
+    }
+    
+    &--outline {
+      @apply bg-transparent border;
+      
+      &.bui-badge--red {
+        @apply border-red-500 text-red-700 bg-transparent;
+      }
+      
+      &.bui-badge--green {
+        @apply border-green-500 text-green-700 bg-transparent;
+      }
+      
+      &.bui-badge--blue {
+        @apply border-blue-500 text-blue-700 bg-transparent;
+      }
+      
+      &.bui-badge--yellow {
+        @apply border-yellow-500 text-yellow-700 bg-transparent;
+      }
+      
+      &.bui-badge--violet {
+        @apply border-violet-500 text-violet-700 bg-transparent;
+      }
+      
+      &.bui-badge--orange {
+        @apply border-orange-500 text-orange-700 bg-transparent;
+      }
+      
+      &.bui-badge--rose {
+        @apply border-rose-500 text-rose-700 bg-transparent;
+      }
+    }
+  }
+} 

data/app/assets/stylesheets/better_ui/components/_breadcrumb.scss

@@ -0,0 +1,106 @@
+@layer components {
+  // Classe base per il breadcrumb (Block)
+  .bui-breadcrumb {
+    @apply flex items-center flex-wrap;
+    
+    // Elements
+    &__list {
+      @apply flex flex-wrap items-center;
+    }
+    
+    &__item {
+      @apply flex items-center;
+    }
+    
+    &__separator {
+      @apply mx-2;
+      
+      // Modifiers per il separatore
+      &--default {
+        @apply text-gray-500;
+      }
+      
+      &--white {
+        @apply text-gray-400;
+      }
+      
+      &--red {
+        @apply text-red-300;
+      }
+      
+      &--rose {
+        @apply text-rose-300;
+      }
+      
+      &--orange {
+        @apply text-orange-300;
+      }
+      
+      &--green {
+        @apply text-green-300;
+      }
+      
+      &--blue {
+        @apply text-blue-300;
+      }
+      
+      &--yellow {
+        @apply text-yellow-600;
+      }
+      
+      &--violet {
+        @apply text-violet-300;
+      }
+    }
+    
+    // Modifiers (dimensioni)
+    &--small {
+      @apply text-xs;
+    }
+    
+    &--medium {
+      @apply text-sm;
+    }
+    
+    &--large {
+      @apply text-base;
+    }
+    
+    // Modifiers (temi colore)
+    &--default {
+      @apply text-white;
+    }
+    
+    &--white {
+      @apply text-black;
+    }
+    
+    &--red {
+      @apply text-white;
+    }
+    
+    &--rose {
+      @apply text-white;
+    }
+    
+    &--orange {
+      @apply text-white;
+    }
+    
+    &--green {
+      @apply text-white;
+    }
+    
+    &--blue {
+      @apply text-white;
+    }
+    
+    &--yellow {
+      @apply text-black;
+    }
+    
+    &--violet {
+      @apply text-white;
+    }
+  }
+} 

data/app/assets/stylesheets/better_ui/components/_button.scss

@@ -0,0 +1,105 @@
+@layer components {
+  // Classe base per il bottone (Block)
+  .bui-button {
+    @apply inline-flex items-center justify-center font-medium 
+           transition-colors duration-200 rounded-md
+           focus:outline-none focus:ring-2 focus:ring-offset-2;
+    
+    // Elements
+    &__icon {
+      @apply flex-shrink-0;
+      
+      &--left {
+        @apply mr-2;
+      }
+      
+      &--right {
+        @apply ml-2;
+      }
+    }
+    
+    &__text {
+      @apply flex-grow;
+    }
+    
+    // Modifiers (varianti colore)
+    &--default {
+      @apply bg-black text-white hover:bg-gray-900 focus:ring-gray-900;
+    }
+    
+    &--white {
+      @apply bg-white text-black hover:bg-gray-100 focus:ring-gray-400;
+    }
+    
+    &--red {
+      @apply bg-red-500 text-white hover:bg-red-600 focus:ring-red-500;
+    }
+    
+    &--rose {
+      @apply bg-rose-500 text-white hover:bg-rose-600 focus:ring-rose-500;
+    }
+    
+    &--orange {
+      @apply bg-orange-500 text-white hover:bg-orange-600 focus:ring-orange-500;
+    }
+    
+    &--green {
+      @apply bg-green-500 text-white hover:bg-green-600 focus:ring-green-500;
+    }
+    
+    &--blue {
+      @apply bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500;
+    }
+    
+    &--yellow {
+      @apply bg-yellow-500 text-black hover:bg-yellow-600 focus:ring-yellow-500;
+    }
+    
+    &--violet {
+      @apply bg-violet-500 text-white hover:bg-violet-600 focus:ring-violet-500;
+    }
+    
+    // Modifiers (dimensioni)
+    &--small {
+      @apply px-2.5 py-1.5 text-xs;
+    }
+    
+    &--medium {
+      @apply px-4 py-2 text-sm;
+    }
+    
+    &--large {
+      @apply px-6 py-3 text-base;
+    }
+    
+    // Modifiers (border radius)
+    &--radius-none {
+      @apply rounded-none;
+    }
+    
+    &--radius-small {
+      @apply rounded-md;
+    }
+    
+    &--radius-medium {
+      @apply rounded-lg;
+    }
+    
+    &--radius-large {
+      @apply rounded-xl;
+    }
+    
+    &--radius-full {
+      @apply rounded-full;
+    }
+    
+    // Modifiers (stati)
+    &--disabled {
+      @apply opacity-50 cursor-not-allowed;
+    }
+    
+    &--full-width {
+      @apply w-full;
+    }
+  }
+} 

data/app/assets/stylesheets/better_ui/components/_card.scss

@@ -0,0 +1,60 @@
+@layer components {
+  // Classe base per la card (Block)
+  .bui-card {
+    @apply bg-white border shadow-sm overflow-hidden;
+    
+    // Elements
+    &__content {
+      @apply p-4;
+    }
+    
+    &__header {
+      @apply p-4 border-b;
+    }
+    
+    &__footer {
+      @apply p-4 border-t;
+    }
+    
+    &__body {
+      @apply flex flex-col;
+    }
+    
+    &__title {
+      @apply text-lg font-medium;
+    }
+    
+    &__value {
+      @apply text-2xl font-bold mt-2;
+      
+      &--reference {
+        @apply text-sm text-gray-500 mt-1;
+      }
+    }
+    
+    &__trend {
+      @apply mt-2 inline-flex items-center px-2 py-1 text-xs font-medium rounded;
+    }
+    
+    // Modifiers (border radius)
+    &--radius-none {
+      @apply rounded-none;
+    }
+    
+    &--radius-small {
+      @apply rounded-md;
+    }
+    
+    &--radius-medium {
+      @apply rounded-lg;
+    }
+    
+    &--radius-large {
+      @apply rounded-xl;
+    }
+    
+    &--radius-full {
+      @apply rounded-full;
+    }
+  }
+}

data/app/assets/stylesheets/better_ui/components/_heading.scss

@@ -0,0 +1,81 @@
+@layer components {
+  // Classe base per il titolo (Block)
+  .bui-heading {
+    @apply font-bold text-gray-900 leading-tight;
+    
+    // Modifiers (dimensioni/livelli)
+    &--1 {
+      @apply text-3xl sm:text-4xl;
+    }
+    
+    &--2 {
+      @apply text-2xl sm:text-3xl;
+    }
+    
+    &--3 {
+      @apply text-xl sm:text-2xl;
+    }
+    
+    &--4 {
+      @apply text-lg sm:text-xl;
+    }
+    
+    &--5 {
+      @apply text-base sm:text-lg;
+    }
+    
+    &--6 {
+      @apply text-sm sm:text-base;
+    }
+    
+    // Modifiers (varianti colore)
+    &--default {
+      @apply text-gray-900;
+    }
+    
+    &--white {
+      @apply text-white;
+    }
+    
+    &--red {
+      @apply text-red-600;
+    }
+    
+    &--rose {
+      @apply text-rose-600;
+    }
+    
+    &--orange {
+      @apply text-orange-600;
+    }
+    
+    &--green {
+      @apply text-green-600;
+    }
+    
+    &--blue {
+      @apply text-blue-600;
+    }
+    
+    &--yellow {
+      @apply text-yellow-600;
+    }
+    
+    &--violet {
+      @apply text-violet-600;
+    }
+    
+    // Modifiers (allineamento)
+    &--left {
+      @apply text-left;
+    }
+    
+    &--center {
+      @apply text-center;
+    }
+    
+    &--right {
+      @apply text-right;
+    }
+  }
+}