@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/styles/06-components/_components.data-table.scss

@@ -1,7 +1,7 @@
-@use "../01-settings/settings.config" as config;
-@use "../01-settings/settings.data-table" as data-table;
-@use "../02-tools/tools.color-functions" as *;
-@use "../02-tools/tools.to-rgb" as *;
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.data-table' as data-table;
+@use '../02-tools/tools.color-functions' as *;
+@use '../02-tools/tools.to-rgb' as *;
 
 // Component: DataTable
 // Description: Styles for the DataTable component
@@ -28,117 +28,122 @@
   --#{config.$prefix}data-table-header-color: #{data-table.$data-table-header-color};
   --#{config.$prefix}data-table-striped-bg: #{data-table.$data-table-striped-bg};
   --#{config.$prefix}data-table-hover-bg: #{data-table.$data-table-hover-bg};
-  
+
   width: 100%;
   margin-bottom: 0;
   color: var(--#{config.$prefix}data-table-color);
   background-color: var(--#{config.$prefix}data-table-bg);
   border-collapse: collapse;
-  
+
   // Header
   &__header {
     background-color: var(--#{config.$prefix}data-table-header-bg);
   }
-  
+
   &__header-cell {
     padding: data-table.$data-table-cell-padding-y data-table.$data-table-cell-padding-x;
     font-weight: data-table.$data-table-header-font-weight;
     color: var(--#{config.$prefix}data-table-header-color);
-    border-bottom: data-table.$data-table-border-width data-table.$data-table-border-style var(--#{config.$prefix}data-table-border-color);
+    border-bottom: data-table.$data-table-border-width data-table.$data-table-border-style
+      var(--#{config.$prefix}data-table-border-color);
     text-align: left;
     white-space: nowrap;
-    
+
     &--sortable {
       cursor: pointer;
       user-select: none;
-      
+
       &:hover {
         background-color: rgba(0, 0, 0, 0.05);
       }
     }
   }
-  
+
   &__header-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
-  
+
   &__sort-icon {
     margin-left: 0.5rem;
     font-size: data-table.$data-table-sort-icon-size;
     color: data-table.$data-table-sort-icon-color;
-    
+
     .c-data-table__header-cell[aria-sort] & {
       color: data-table.$data-table-sort-icon-active-color;
     }
   }
-  
+
   // Body cells
   &__cell {
     padding: data-table.$data-table-cell-padding-y data-table.$data-table-cell-padding-x;
-    border-bottom: data-table.$data-table-border-width data-table.$data-table-border-style var(--#{config.$prefix}data-table-border-color);
+    border-bottom: data-table.$data-table-border-width data-table.$data-table-border-style
+      var(--#{config.$prefix}data-table-border-color);
     vertical-align: middle;
   }
-  
+
   // Rows
   &__row {
     background-color: var(--#{config.$prefix}data-table-bg);
-    
+
     &:hover {
       background-color: var(--#{config.$prefix}data-table-hover-bg);
     }
-    
-    &[role="button"] {
+
+    &[role='button'] {
       cursor: pointer;
     }
   }
-  
+
   // Loading state
   &__loading-cell {
     padding: 2rem;
     text-align: center;
   }
-  
+
   &__loading-indicator {
     display: inline-block;
   }
-  
+
   // Empty state
   &__empty-cell {
     padding: 2rem;
     text-align: center;
     color: var(--#{config.$prefix}gray-500);
   }
-  
+
   // Variants
   &--striped {
     tbody tr:nth-of-type(odd) {
       background-color: var(--#{config.$prefix}data-table-striped-bg);
     }
   }
-  
+
   &--bordered {
-    border: data-table.$data-table-border-width data-table.$data-table-border-style var(--#{config.$prefix}data-table-border-color);
+    border: data-table.$data-table-border-width data-table.$data-table-border-style
+      var(--#{config.$prefix}data-table-border-color);
     border-radius: data-table.$data-table-border-radius;
-    
-    th, td {
-      border: data-table.$data-table-border-width data-table.$data-table-border-style var(--#{config.$prefix}data-table-border-color);
+
+    th,
+    td {
+      border: data-table.$data-table-border-width data-table.$data-table-border-style
+        var(--#{config.$prefix}data-table-border-color);
     }
   }
-  
+
   &--dense {
-    th, td {
+    th,
+    td {
       padding: data-table.$data-table-cell-padding-y-sm data-table.$data-table-cell-padding-x-sm;
     }
   }
-  
+
   &--loading {
     opacity: 0.7;
   }
 }
 
-
 // Toolbar
 .c-data-table-toolbar {
   display: flex;
@@ -150,7 +155,7 @@
 // Search
 .c-data-table-search {
   flex: 0 0 auto;
-  
+
   &__input {
     // Styles are now inherited from c-input class
     width: 240px;
@@ -167,13 +172,12 @@
 // Override small pagination in data tables
 .c-data-table__pagination {
   margin: 0;
-  
+
   .c-pagination__items {
     gap: 0.125rem;
   }
-  
+
   .c-pagination__link {
     font-size: 0.75rem;
   }
 }
-  

package/src/styles/06-components/_components.datepicker.scss

@@ -42,7 +42,7 @@
   --#{$prefix}datepicker-day-selected-bg: #{$datepicker-day-selected-bg};
   --#{$prefix}datepicker-day-in-range-bg: #{$datepicker-day-in-range-bg};
   --#{$prefix}datepicker-active-hover-bg: var(--#{$prefix}brand-bg-subtle);
-  
+
   // Base component styles
   position: relative;
   display: inline-block;
@@ -58,7 +58,7 @@
     display: flex;
     align-items: center;
   }
-  
+
   // Input field
   // --------------------------------------------------
   &__input {
@@ -66,7 +66,7 @@
     width: 100%;
     padding-right: rem(40px);
   }
-  
+
   // Calendar icon
   // --------------------------------------------------
   &__calendar-icon {
@@ -75,7 +75,7 @@
     color: var(--#{$prefix}secondary-text-emphasis);
     pointer-events: none;
   }
-  
+
   // Clear button
   // --------------------------------------------------
   &__clear-button {
@@ -91,13 +91,13 @@
     padding: rem(4px);
     font-size: rem(12px);
     border-radius: var(--#{$prefix}border-radius-sm);
-    
+
     &:hover {
       color: var(--#{$prefix}body-color);
       background-color: var(--#{$prefix}secondary-bg-subtle);
     }
   }
-  
+
   // Calendar popup
   // --------------------------------------------------
   &__calendar {
@@ -109,7 +109,7 @@
     border-radius: var(--#{$prefix}datepicker-border-radius);
     box-shadow: var(--#{$prefix}datepicker-box-shadow);
     margin-top: rem(4px);
-    
+
     // Calendar placements
     &--top-start,
     &--top-end {
@@ -117,44 +117,58 @@
       margin-bottom: rem(4px);
       margin-top: 0;
     }
-    
-    &--top-start { left: 0; }
-    &--top-end { right: 0; }
-    
+
+    &--top-start {
+      left: 0;
+    }
+    &--top-end {
+      right: 0;
+    }
+
     &--bottom-start {
       top: 100%;
       left: 0;
     }
-    
+
     &--bottom-end {
       top: 100%;
       right: 0;
     }
-    
+
     &--left-start,
     &--left-end {
       right: 100%;
       margin-right: rem(4px);
     }
-    
-    &--left-start { top: 0; }
-    &--left-end { bottom: 0; }
-    
+
+    &--left-start {
+      top: 0;
+    }
+    &--left-end {
+      bottom: 0;
+    }
+
     &--right-start,
     &--right-end {
       left: 100%;
       margin-left: rem(4px);
     }
-    
-    &--right-start { top: 0; }
-    &--right-end { bottom: 0; }
+
+    &--right-start {
+      top: 0;
+    }
+    &--right-end {
+      bottom: 0;
+    }
   }
-  
+
   // Inline mode
   // --------------------------------------------------
   &--inline {
-    --#{$prefix}datepicker-width: calc(var(--#{$prefix}datepicker-width) + var(--#{$prefix}datepicker-week-width));
-    
+    --#{$prefix}datepicker-width: calc(
+      var(--#{$prefix}datepicker-width) + var(--#{$prefix}datepicker-week-width)
+    );
+
     .c-datepicker__calendar {
       position: static;
       margin-top: 0;
@@ -168,7 +182,7 @@
       grid-template-columns: repeat(8, 1fr);
     }
   }
-  
+
   // Range selection status
   // --------------------------------------------------
   &__range-status {
@@ -177,7 +191,7 @@
     margin-bottom: rem(8px);
     border-radius: var(--#{$prefix}datepicker-border-radius);
   }
-  
+
   // Calendar header
   // --------------------------------------------------
   &__header {
@@ -187,7 +201,7 @@
     padding: var(--#{$prefix}datepicker-body-padding-y) var(--#{$prefix}datepicker-body-padding-x);
     border-bottom: 1px solid var(--#{$prefix}primary-border-subtle);
   }
-  
+
   // Navigation buttons
   // --------------------------------------------------
   &__nav-button {
@@ -202,17 +216,17 @@
     cursor: pointer;
     border-radius: var(--#{$prefix}border-radius-sm);
     padding: 0;
-    
+
     &:hover {
       background-color: var(--#{$prefix}secondary-bg-subtle);
     }
-    
+
     &:focus-visible {
       outline: none;
       box-shadow: var(--#{$prefix}focus-ring);
     }
   }
-  
+
   // View switch button
   // --------------------------------------------------
   &__view-switch {
@@ -226,23 +240,23 @@
     border-radius: var(--#{$prefix}border-radius-sm);
     cursor: pointer;
     font-size: var(--#{$prefix}datepicker-month-font-size);
-    
+
     &:hover {
       background-color: var(--#{$prefix}secondary-bg-subtle);
     }
-    
+
     &:focus-visible {
       outline: none;
       box-shadow: var(--#{$prefix}focus-ring);
     }
   }
-  
+
   // Calendar body
   // --------------------------------------------------
   &__body {
     padding: var(--#{$prefix}datepicker-body-padding-y) var(--#{$prefix}datepicker-body-padding-x);
   }
-  
+
   // Weekdays header
   // --------------------------------------------------
   &__weekdays {
@@ -250,12 +264,12 @@
     grid-template-columns: repeat(7, 1fr);
     text-align: center;
     overflow: hidden;
-    
+
     &--has-weeknumber {
       grid-template-columns: auto repeat(7, 1fr);
     }
   }
-  
+
   &__weekday {
     text-align: center;
     display: grid;
@@ -269,7 +283,7 @@
     height: var(--#{$prefix}datepicker-week-height);
     user-select: none;
   }
-  
+
   // Week numbers column
   // --------------------------------------------------
   &__weeknumber {
@@ -283,7 +297,7 @@
     width: var(--#{$prefix}datepicker-week-width);
     height: var(--#{$prefix}datepicker-week-height);
   }
-  
+
   // Days grid
   // --------------------------------------------------
   &__days {
@@ -292,12 +306,12 @@
     width: 100%;
     position: relative;
     overflow: hidden;
-    
+
     &--has-weeknumber {
       grid-template-columns: auto repeat(7, 1fr);
     }
   }
-  
+
   // Day cells
   // --------------------------------------------------
   &__day {
@@ -315,28 +329,28 @@
     cursor: pointer;
     user-select: none;
     position: relative;
-    
+
     &:hover:not(&--disabled):not(&--selected):not(&--in-range) {
       background-color: var(--#{$prefix}datepicker-day-hover-bg);
     }
-    
+
     &:focus-visible {
       outline: none;
       box-shadow: var(--#{$prefix}focus-ring);
     }
-    
+
     // Days from adjacent months
     &--outside {
       color: var(--#{$prefix}datepicker-deactivate-color);
       opacity: 0.6;
     }
-    
+
     // Current day
     &--today {
       position: relative;
       font-weight: 600;
       color: var(--#{$prefix}datepicker-today-color);
-      
+
       &::after {
         content: '';
         position: absolute;
@@ -350,13 +364,11 @@
       }
     }
 
-
-    
     // Range selection
     &--in-range {
       border-radius: 0;
       background-color: var(--#{$prefix}datepicker-day-in-range-bg);
-      
+
       &:hover {
         background-color: var(--#{$prefix}datepicker-active-hover-bg);
       }
@@ -368,17 +380,17 @@
       color: var(--#{$prefix}datepicker-day-selected-color);
       border-radius: var(--#{$prefix}datepicker-day-border-radius);
       z-index: 1;
-      
+
       &:hover {
         background-color: var(--#{$prefix}datepicker-active-hover-bg);
       }
-      
+
       // Range endpoints styling
       &:first-of-type {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
       }
-      
+
       &:last-of-type {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
@@ -394,19 +406,19 @@
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
-    
+
     // Disabled days
     &--disabled {
       opacity: 0.5;
       cursor: not-allowed;
       color: var(--#{$prefix}disabled-text-emphasis);
-      
+
       &:hover {
         background: none;
       }
     }
   }
-  
+
   // Months view
   // --------------------------------------------------
   &__months {
@@ -414,7 +426,7 @@
     grid-template-columns: repeat(3, 1fr);
     gap: rem(8px);
   }
-  
+
   &__month {
     display: flex;
     align-items: center;
@@ -427,26 +439,26 @@
     font-weight: var(--#{$prefix}datepicker-month-font-weight);
     cursor: pointer;
     color: var(--#{$prefix}datepicker-color);
-    
+
     &:hover:not(&--selected) {
       background-color: var(--#{$prefix}datepicker-day-hover-bg);
     }
-    
+
     &:focus-visible {
       outline: none;
       box-shadow: var(--#{$prefix}focus-ring);
     }
-    
+
     &--selected {
       background-color: var(--#{$prefix}datepicker-day-selected-bg);
       color: var(--#{$prefix}datepicker-day-selected-color);
-      
+
       &:hover {
         background-color: var(--#{$prefix}datepicker-active-hover-bg);
       }
     }
   }
-  
+
   // Years view
   // --------------------------------------------------
   &__years {
@@ -454,7 +466,7 @@
     grid-template-columns: repeat(3, 1fr);
     gap: rem(8px);
   }
-  
+
   &__year {
     display: flex;
     align-items: center;
@@ -467,26 +479,26 @@
     font-weight: var(--#{$prefix}datepicker-year-font-weight);
     cursor: pointer;
     color: var(--#{$prefix}datepicker-color);
-    
+
     &:hover:not(&--selected) {
       background-color: var(--#{$prefix}datepicker-day-hover-bg);
     }
-    
+
     &:focus-visible {
       outline: none;
       box-shadow: var(--#{$prefix}focus-ring);
     }
-    
+
     &--selected {
       background-color: var(--#{$prefix}datepicker-day-selected-bg);
       color: var(--#{$prefix}datepicker-day-selected-color);
-      
+
       &:hover {
         background-color: var(--#{$prefix}datepicker-active-hover-bg);
       }
     }
   }
-  
+
   // Footer
   // --------------------------------------------------
   &__footer {
@@ -500,16 +512,26 @@
   &__close-button {
     margin-left: auto;
   }
-  
-  
-  
+
   // Size variants
   // --------------------------------------------------
-  @each $size, $values in (
-    sm: (padding: rem(4px) rem(8px), font-size: rem(14px)),
-    md: (padding: rem(6px) rem(12px), font-size: rem(16px)),
-    lg: (padding: rem(8px) rem(16px), font-size: rem(18px))
-  ) {
+  @each $size,
+    $values
+      in (
+        sm: (
+            padding: rem(4px) rem(8px),
+            font-size: rem(14px),
+          ),
+        md: (
+            padding: rem(6px) rem(12px),
+            font-size: rem(16px),
+          ),
+        lg: (
+            padding: rem(8px) rem(16px),
+            font-size: rem(18px),
+          )
+      )
+  {
     &__input.c-input--#{$size} {
       padding: map.get($values, padding);
       font-size: map.get($values, font-size);

package/src/styles/06-components/_components.dropdown.scss

@@ -75,7 +75,8 @@
   }
 
   &__toggle-icon {
-    transition: transform var(--#{$prefix}dropdown-animation-duration) var(--#{$prefix}dropdown-animation-timing);
+    transition: transform var(--#{$prefix}dropdown-animation-duration)
+      var(--#{$prefix}dropdown-animation-timing);
     margin-left: 0.25rem;
   }
 
@@ -88,10 +89,13 @@
     visibility: hidden;
     transform-origin: top center;
     // Improved transitions - shorter and with better easing
-    transition: 
-      opacity var(--#{$prefix}dropdown-animation-duration) var(--#{$prefix}dropdown-animation-timing),
-      visibility var(--#{$prefix}dropdown-animation-duration) var(--#{$prefix}dropdown-animation-timing),
-      transform var(--#{$prefix}dropdown-animation-duration) var(--#{$prefix}dropdown-animation-timing);
+    transition:
+      opacity var(--#{$prefix}dropdown-animation-duration)
+        var(--#{$prefix}dropdown-animation-timing),
+      visibility var(--#{$prefix}dropdown-animation-duration)
+        var(--#{$prefix}dropdown-animation-timing),
+      transform var(--#{$prefix}dropdown-animation-duration)
+        var(--#{$prefix}dropdown-animation-timing);
     transform: translateY(-15px) scale(0.95);
     pointer-events: none;
     will-change: transform, opacity, visibility;
@@ -100,12 +104,14 @@
       opacity: 1;
       transform: translateY(0) scale(1);
       visibility: visible;
-      animation: #{$prefix}dropdown-fade-in var(--#{$prefix}dropdown-animation-duration) var(--#{$prefix}dropdown-animation-timing) forwards;
+      animation: #{$prefix}dropdown-fade-in var(--#{$prefix}dropdown-animation-duration)
+        var(--#{$prefix}dropdown-animation-timing) forwards;
       pointer-events: auto;
     }
 
     &:not(.is-open) {
-      animation: #{$prefix}dropdown-fade-out var(--#{$prefix}dropdown-animation-duration) var(--#{$prefix}dropdown-animation-timing) forwards;
+      animation: #{$prefix}dropdown-fade-out var(--#{$prefix}dropdown-animation-duration)
+        var(--#{$prefix}dropdown-animation-timing) forwards;
     }
 
     // Placement variations - using a mixin to reduce duplication
@@ -190,7 +196,8 @@
     cursor: pointer;
     transition: all 0.2s ease;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       color: var(--#{$prefix}dropdown-link-hover-color);
       background-color: var(--#{$prefix}dropdown-link-hover-bg);
       outline: none;
@@ -240,7 +247,6 @@
     }
   }
 
-  
   &.is-open {
     #{$root}__toggle-icon {
       transform: rotate(-180deg);