@dynamic-framework/ui-react 2.0.0-dev.1 → 2.0.0-dev.10

package/src/style/components/_d-avatar.scss

@@ -1,8 +1,8 @@
 .d-avatar {
   --#{$prefix}avatar-border: 1px solid var(--#{$prefix}avatar-bg);
   --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-12);
-  --#{$prefix}avatar-bg: var(--#{$prefix}secondary-100);
-  --#{$prefix}avatar-color: var(--#{$prefix}secondary-500);
+  --#{$prefix}avatar-bg: var(--#{$prefix}gray-100);
+  --#{$prefix}avatar-color: var(--#{$prefix}gray-500);
   --#{$prefix}avatar-font-weight: var(--#{$prefix}fw-bold);
   --#{$prefix}avatar-border-radius: var(--#{$prefix}border-radius-pill);
 
@@ -33,24 +33,6 @@
     background-color: var(--#{$prefix}avatar-bg);
     border-radius: var(--#{$prefix}avatar-border-radius);
   }
-
-  @each $theme, $value in map-remove($theme-colors, "light", "dark") {
-    $color: color-contrast($value);
-    &.d-avatar-#{$theme} {
-      --#{$prefix}avatar-color: var(--#{$prefix}#{$theme}-500);
-      --#{$prefix}avatar-bg: var(--#{$prefix}#{$theme}-100);
-    }
-
-    &.d-avatar-dark-#{$theme} {
-      --#{$prefix}avatar-color: var(--#{$prefix}white);
-      --#{$prefix}avatar-bg: var(--#{$prefix}#{$theme}-500);
-    }
-
-    &.d-avatar-light-#{$theme} {
-      --#{$prefix}avatar-color: var(--#{$prefix}#{$theme}-500);
-      --#{$prefix}avatar-bg: var(--#{$prefix}white);
-    }
-  }
 }
 
 .d-avatar-xs {

package/src/style/components/_d-box-file.scss

@@ -50,7 +50,7 @@
     border: var(--#{$prefix}box-file-disabled-border);
   }
 
-  .d-icon {
+  .d-box-file-dropzone > .d-icon {
     --#{$prefix}icon-size: var(--#{$prefix}box-file-icon-size);
     --#{$prefix}icon-color: var(--#{$prefix}box-file-icon-color);
   }

package/src/style/components/_d-box.scss

@@ -0,0 +1,13 @@
+.d-box {
+  --#{$prefix}box-bg: #{var(--#{$prefix}white)};
+  --#{$prefix}box-border: 0;
+  --#{$prefix}box-border-radius: #{var(--#{$prefix}border-radius)};
+  --#{$prefix}box-padding: #{var(--#{$prefix}ref-spacer-4)};
+  --#{$prefix}box-shadow: #{var(--#{$prefix}box-shadow-lg)};
+  padding: var(--#{$prefix}box-padding);
+
+  background-color: var(--#{$prefix}box-bg);
+  border: var(--#{$prefix}box-border);
+  border-radius: var(--#{$prefix}box-border-radius);
+  box-shadow: var(--#{$prefix}box-shadow);
+}

package/src/style/components/_d-carousel.scss

@@ -1,5 +1,5 @@
 @import "node_modules/@splidejs/splide/src/css/template/default/index";
-
+// stylelint-disable
 .d-carousel {
   // Arrows
   --#{$prefix}carousel-arrow-space: calc(var(--#{$prefix}ref-spacer-4) * -1);
@@ -19,8 +19,26 @@
     }
   }
 
+  .splide__pagination__page {
+    margin: 0;
+  }
+
   .d-carousel-pagination {
     bottom: var(--#{$prefix}carousel-pagination-bottom);
+    position: relative;
+    bottom: auto;
+    top: -0.5rem;
+    width: fit-content;
+    background: var(--#{$prefix}gray-25);
+    padding: var(--#{$prefix}ref-spacer-2) var(--#{$prefix}ref-spacer-4);
+    border-radius: var(--#{$prefix}border-radius-lg);
+    margin: auto;
+    gap: var(--#{$prefix}ref-spacer-2);
+
+    li {
+      margin: 0;
+      display: flex;
+    }
 
     .d-carousel-pagination-page {
       background-color: var(--#{$prefix}carousel-pagination-page-bg);

package/src/style/components/_d-credit-card.scss

@@ -0,0 +1,67 @@
+.d-credit-card {
+  --#{$prefix}d-credit-card-bg:
+    radial-gradient(circle at 25% 10%, rgba(255, 255, 255, .12), transparent 18%), linear-gradient(
+      135deg,
+      #ff9a8b 0%,
+      #ffb199 12%,
+      #caa6ff 40%,
+      #7aa7ff 65%,
+      #39e6d6 100%
+    );
+  --#{$prefix}d-credit-card-aspect-ratio: 16/9;
+  --#{$prefix}d-credit-card-chip-bg: rgba(255, 255, 255, .12);
+  --#{$prefix}d-credit-card-font-family-number: var(--#{$prefix}font-monospace);
+  --#{$prefix}d-credit-card-padding: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}d-credit-card-number-size: inherit;
+  --#{$prefix}d-credit-card-chip-size: 30px;
+  flex-direction: column;
+
+  aspect-ratio: var(--#{$prefix}d-credit-card-aspect-ratio);
+  padding: var(--#{$prefix}d-credit-card-padding);
+  background: var(--#{$prefix}d-credit-card-bg);
+  --#{$prefix}d-credit-card-logo-size: 22%;
+
+  > * {
+    display: flex;
+    align-items: center;
+  }
+
+  .d-credit-card-details {
+    .name {
+      font-size: var(--#{$prefix}ref-fs-6);
+    }
+    .date {
+      font-size: var(--#{$prefix}ref-fs-6);
+    }
+  }
+
+  .d-credit-card-logo {
+    width: var(--#{$prefix}d-credit-card-logo-size);
+  }
+
+  .d-credit-card-chip {
+    background: var(--#{$prefix}d-credit-card-chip-bg);
+  }
+
+  .d-credit-card-chip-image {
+    width: var(--#{$prefix}d-credit-card-chip-size);
+  }
+
+  .d-credit-card-number {
+    font-family: var(--#{$prefix}d-credit-card-font-family-number);
+    font-size: var(--#{$prefix}d-credit-card-number-size);
+  }
+
+  &.is-vertical {
+    --#{$prefix}d-credit-card-aspect-ratio: 9/16;
+    --#{$prefix}d-credit-card-number-size: var(--#{$prefix}ref-spacer-3);
+    --#{$prefix}d-credit-card-logo-size: 30%;
+  }
+
+  .d-credit-card-header {
+    align-items: center;
+    justify-content: space-between;
+    min-height: 45px;
+  }
+
+}

package/src/style/components/_d-datepicker.scss

@@ -74,9 +74,12 @@
   --#{$prefix}datepicker-in-range-disabled-bg: #{$datepicker-in-range-disabled-bg};
 
   // Time
-  --#{$prefix}datepicker-time-list-item-width: 85px;
+  --#{$prefix}datepicker-time-list-item-width: #{$datepicker-time-list-item-width};
   --#{$prefix}datepicker-time-list-item-padding: var(--#{$prefix}ref-spacer-2) var(--#{$prefix}ref-spacer-1);
 
+  // Top
+  --#{$prefix}datepicker-top-header-bg: var(--#{$prefix}primary-500);
+
 
   background-color: var(--#{$prefix}datepicker-bg);
   border: var(--#{$prefix}datepicker-border);
@@ -85,6 +88,10 @@
   display: inline-block;
   position: relative;
   line-height: initial;
+  overflow: hidden;
+  p {
+    font-weight: 500;
+  }
 }
 
 .react-datepicker--time-only {
@@ -102,27 +109,10 @@
 .react-datepicker-popper {
   z-index: 1;
   line-height: 0;
+}
 
-  .react-datepicker__triangle {
-    --#{$prefix}datepicker-border-color: var(--#{$prefix}gray-100);
-    stroke: var(--#{$prefix}datepicker-border-color);
-  }
-
-  &[data-placement^="bottom"] {
-    .react-datepicker__triangle {
-      --#{$prefix}datepicker-header-bg: var(--#{$prefix}secondary-soft);
-      fill: var(--#{$prefix}datepicker-header-bg);
-      color: var(--#{$prefix}datepicker-header-bg);
-    }
-  }
-
-  &[data-placement^="top"] {
-    .react-datepicker__triangle {
-      --#{$prefix}datepicker-header-bg: var(--#{$prefix}white);
-      fill: var(--#{$prefix}datepicker-header-bg);
-      color: var(--#{$prefix}datepicker-header-bg);
-    }
-  }
+.react-datepicker__triangle {
+  display: none;
 }
 
 .react-datepicker__header {
@@ -147,6 +137,32 @@
     border-top-right-radius: var(--#{$prefix}datepicker-border-radius);
   }
 
+  .custom-year-selector {
+    width: 8ch;
+    background: transparent;
+    color: var(--#{$prefix}body-color);
+    margin: auto;
+
+    .input-group {
+      border: 0;
+    }
+
+    .d-select__indicator-separator {
+      display: none;
+    }
+
+    .d-select__control {
+      background-color: var(--#{$prefix}datepicker-top-header-bg);
+      padding: var(--bs-ref-spacer-1) var(--bs-ref-spacer-1);
+      flex-wrap: nowrap;
+      color: var(--#{$prefix}white);
+      border: 0;
+    }
+    .d-select__menu-list {
+      max-height: 10lh;
+    }
+  }
+
   &-selector {
     display: flex;
     align-items: center;
@@ -179,15 +195,11 @@
           }
         }
       }
-
-      &.custom-year-selector .d-select__single-value {
-        width: 4ch;
-      }
     }
 
     p {
       margin: 0;
-      font-weight: bold;
+      font-weight: 500;
     }
 
     .header-button:first-child {
@@ -237,6 +249,7 @@
 
 .react-datepicker__year {
   margin: var(--#{$prefix}datepicker-body-margin);
+  padding: 1rem;
   text-align: center;
 
   &-wrapper {
@@ -252,6 +265,34 @@
   }
 }
 
+.react-datepicker__month {
+  padding: 1rem;
+}
+
+.react-datepicker__header--custom,
+.react-datepicker__header-month-selector {
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+}
+
+.react-datepicker__month-text--selected {
+  font-weight: var(--#{$prefix}fw-semibold);
+}
+
+.datepicker-top-header {
+  background: var(--#{$prefix}primary-500);
+  color: var(--#{$prefix}white);
+  padding: 1rem;
+  margin-bottom: 1rem;
+  margin-top: -.5rem;
+}
+
+.react-datepicker__year,
+.react-datepicker__quarterPicker {
+  --#{$prefix}datepicker-body-gap: 1rem;
+  --#{$prefix}datepicker-body-margin: 1rem;
+}
+
 .react-datepicker__month,
 .react-datepicker__quarter {
   margin: var(--#{$prefix}datepicker-body-margin);
@@ -277,6 +318,22 @@
     width: 6ch;
   }
 }
+
+.react-datepicker__month-text,
+.react-datepicker__quarter-text,
+.react-datepicker__year-text {
+  padding: .25rem;
+  border: 1px solid var(--#{$prefix}gray-50);
+  border-radius: var(--#{$prefix}datepicker-border-radius);
+}
+
+
+.react-datepicker__month-text--today,
+.react-datepicker__year-text--today,
+.react-datepicker__quarter-text--today {
+  font-weight: var(--#{$prefix}fw-semibold) !important;
+}
+
 // START TODO: Revisar con Mati diseño del time
 .react-datepicker__time-container {
   float: right;

package/src/style/components/_d-icon.scss

@@ -8,13 +8,20 @@
   display: inline-flex !important; /* stylelint-disable-line declaration-no-important */
   align-items: center;
   justify-content: center;
-  width: var(--#{$prefix}icon-size);
-  height: var(--#{$prefix}icon-size);
   padding: var(--#{$prefix}icon-padding);
   font-size: var(--#{$prefix}icon-size) !important; /* stylelint-disable-line declaration-no-important */
+  line-height: 1;
   color: var(--#{$prefix}icon-color);
   background-color: var(--#{$prefix}icon-bg-color);
-  border-radius: var(--#{$prefix}icon-padding);
+  border-radius: calc(var(--bs-icon-padding) * 4);
+
+  // For Lucide icons (SVG)
+  svg {
+    display: block;
+    width: var(--#{$prefix}icon-size);
+    height: var(--#{$prefix}icon-size);
+    color: var(--#{$prefix}icon-color);
+  }
 }
 
 .d-icon-loading {

package/src/style/components/_d-modal.scss

@@ -25,6 +25,9 @@
   .modal-footer {
     gap: var(--#{$prefix}modal-footer-gap);
     padding: var(--#{$prefix}modal-footer-padding);
+    > * {
+      margin: 0;
+    }
   }
 
   .d-modal-action-fill > * {

package/src/style/components/_d-stepper-desktop.scss

@@ -1,32 +1,30 @@
 .d-stepper-desktop {
   /* Icon container */
-  --#{$prefix}step-icon-container-color: var(--#{$prefix}secondary);
-  --#{$prefix}step-icon-container-background-color: var(--#{$prefix}white);
+  --#{$prefix}step-icon-container-color: var(--#{$prefix}gray-400);
+  --#{$prefix}step-icon-container-background-color: transparent;
   --#{$prefix}step-icon-container-size: var(--#{$prefix}ref-spacer-9);
   --#{$prefix}step-icon-container-font-size: var(--#{$prefix}ref-spacer-4);
-  --#{$prefix}step-icon-container-border-width: 1px;
-  --#{$prefix}step-icon-container-border-color: var(--#{$prefix}secondary);
+  --#{$prefix}step-icon-container-border-width: 2px;
+  --#{$prefix}step-icon-container-border-color: var(--#{$prefix}gray-200);
   --#{$prefix}step-icon-container-border-radius: 100%;
   --#{$prefix}step-icon-container-z-index: 1;
 
   /* Base step */
-  --#{$prefix}step-label-height: var(--#{$prefix}ref-spacer-12);
   --#{$prefix}step-icon-size: var(--#{$prefix}ref-spacer-6);
   --#{$prefix}step-gap: var(--#{$prefix}ref-spacer-2);
   --#{$prefix}step-z-index: 0;
 
   /* Checked step */
-  --#{$prefix}step-check-text-color: var(--#{$prefix}white);
   --#{$prefix}step-check-background-color: var(--#{$prefix}success);
   --#{$prefix}step-check-border-color: var(--#{$prefix}success);
 
   /* Current step */
-  --#{$prefix}step-current-text-color: var(--#{$prefix}white);
-  --#{$prefix}step-current-background-color: var(--#{$prefix}secondary);
+  --#{$prefix}step-current-text-color: var(--#{$prefix}step-icon-container-color);
+  --#{$prefix}step-current-background-color: transparent;
 
   /* Step line */
-  --#{$prefix}step-line-stroke: 1px;
-  --#{$prefix}step-line-color: var(--#{$prefix}secondary);
+  --#{$prefix}step-line-stroke: 2px;
+  --#{$prefix}step-line-color: var(--#{$prefix}gray-200);
 
   /* Step label */
   --#{$prefix}step-label-padding: var(--#{$prefix}ref-spacer-4);
@@ -38,11 +36,30 @@
   display: flex;
 
   .d-step {
+    position: relative;
     display: flex;
     flex: 1 1 0;
     flex-direction: column;
     gap: var(--#{$prefix}step-gap);
 
+    &:last-child {
+      &::after {
+        content: none;
+      }
+    }
+
+    &::after {
+      position: absolute;
+      top: 16px;
+      left: calc(50% + var(--bs-step-icon-container-size));
+      z-index: 1;
+      width: calc(100% - var(--bs-step-icon-container-size) * 2);
+      height: var(--#{$prefix}step-icon-container-border-width);
+      content: "";
+      background: var(--#{$prefix}gray-100);
+      border-radius: 10px;
+    }
+
     .d-step-value {
       position: relative;
       display: flex;
@@ -66,37 +83,24 @@
     }
 
     .d-step-check {
-      color: var(--#{$prefix}step-check-text-color);
-      background-color: var(--#{$prefix}step-check-background-color);
-      border-color: var(--#{$prefix}step-check-border-color);
-    }
-
-    .d-step-current {
-      color: var(--#{$prefix}step-current-text-color);
-      background-color: var(--#{$prefix}step-current-background-color);
-    }
-
-    .d-step-value::after {
-      position: absolute;
-      top: 50%;
-      z-index: var(--#{$prefix}step-z-index);
-      width: 100%;
-      height: var(--#{$prefix}step-line-stroke);
-      content: "";
-      background-color: var(--#{$prefix}step-line-color);
+      .d-step-icon {
+        --#{$prefix}icon-color: var(--#{$prefix}white);
+        --#{$prefix}icon-component-size: .25rem;
+        --#{$prefix}icon-size: 1rem;
+        --#{$prefix}icon-component-padding: calc(var(--#{$prefix}icon-component-size, 24px) * .4);
+        --#{$prefix}icon-component-bg-color: var(--#{$prefix}step-check-background-color);
+        border-radius: 2rem;
+      }
     }
 
-    &:first-child .d-step-value::after {
-      left: 50%;
-      z-index: var(--#{$prefix}step-z-index);
-      width: 50%;
+    &.d-step-current {
+      --#{$prefix}step-icon-container-color: var(--#{$prefix}primary-500);
+      --#{$prefix}step-icon-container-border-color: var(--#{$prefix}primary-500);
+      .d-step-icon-container {
+        font-weight: 500;
+      }
     }
 
-    &:last-child .d-step-value::after {
-      right: 50%;
-      z-index: var(--#{$prefix}step-z-index);
-      width: 50%;
-    }
 
     .d-step-text-container {
       padding-right: var(--#{$prefix}step-label-padding);
@@ -109,10 +113,18 @@
 
       .d-step-description {
         font-size: var(--#{$prefix}step-description-font-size);
+        color: var(--#{$prefix}gray-400);
       }
     }
   }
 
+  .d-step-current {
+    .d-step-label {
+      --font-weight-active-text: 500;
+      font-weight: var(--font-weight-active-text);
+    }
+  }
+
   &.is-align-start {
     .d-step-text-container {
       text-align: left;
@@ -122,14 +134,14 @@
 
   &.is-vertical {
     flex-direction: column;
+    gap: var(--#{$prefix}step-gap);
 
     .d-step {
       flex-direction: row;
-      align-items: center;
+      align-items: start;
 
       .d-step-value {
-        align-items: center;
-        height: 100%;
+        align-items: start;
       }
 
       .d-step-text-container {
@@ -137,43 +149,27 @@
         flex-grow: 1;
         flex-direction: column;
         align-items: flex-start;
-        min-height: var(--#{$prefix}step-label-height);
-        padding: var(--#{$prefix}step-vertical-label-padding);
+        padding-inline: var(--#{$prefix}step-vertical-label-padding);
       }
 
       .d-step-label {
         text-align: left;
       }
 
-      .d-step-value::after {
-        position: absolute;
-        top: 0;
-        left: calc(50% - var(--#{$prefix}step-line-stroke));
-        z-index: var(--#{$prefix}step-z-index);
-        width: 0;
-        height: 100%;
-        content: "";
-        border: var(--#{$prefix}step-line-stroke) solid var(--#{$prefix}step-line-color);
-      }
-
-      &:first-child .d-step-value::after {
-        top: 50%;
-        z-index: var(--#{$prefix}step-z-index);
-        width: 0;
-        height: 50%;
-      }
-
-      &:last-child .d-step-value::after {
-        z-index: var(--#{$prefix}step-z-index);
-        width: 0;
-        height: 50%;
+      &::after {
+        top: calc(var(--bs-step-icon-container-size) + 4px);
+        left: 16px;
+        width: var(--#{$prefix}step-icon-container-border-width);
+        height: calc(100% - var(--bs-step-icon-container-size));
       }
     }
   }
 
   .d-step-icon {
     --#{$prefix}icon-size: var(--#{$prefix}step-icon-size);
-
+    position: absolute;
+    right: -10px;
+    bottom: -4px;
     display: flex;
     font-size: inherit;
   }

package/src/style/components/_d-stepper-mobile.scss

@@ -5,8 +5,8 @@
   /* Outter circle */
   --#{$prefix}step-progress-outter-size: 62px;
   --#{$prefix}step-progress-outter-z-index: 1;
-  --#{$prefix}step-progress-outter-fill-background-color: var(--#{$prefix}secondary-500);
-  --#{$prefix}step-progress-outter-background-color: var(--#{$prefix}secondary-100);
+  --#{$prefix}step-progress-outter-fill-background-color: var(--#{$prefix}primary-500);
+  --#{$prefix}step-progress-outter-background-color: var(--#{$prefix}primary-50);
 
   /* Inner circle */
   --#{$prefix}step-progress-inner-size: 50px;

package/src/style/components/_d-tabs.scss

@@ -0,0 +1,37 @@
+.tab-content {
+  margin-bottom: var(--#{$prefix}ref-spacer-4);
+}
+
+.nav-pills {
+  --#{$prefix}nav-pills-link-active-bg: var(--#{$prefix}gray-50);
+  --#{$prefix}nav-pills-link-active-color: var(--#{$prefix}primary-500);
+}
+
+.nav-tabs {
+  --#{$prefix}nav-tabs-border-color: var(--#{$prefix}gray-100);
+  --#{$prefix}nav-tabs-link-active-border-color: var(--#{$prefix}nav-tabs-border-color);
+}
+
+.nav-toggle-button-group {
+  --#{$prefix}toggle-button-group-border-radius: 4rem;
+  --#{$prefix}toggle-button-group-link-active-color: var(--#{$prefix}white);
+  --#{$prefix}toggle-button-group-link-active-bg: var(--#{$prefix}primary);
+  --#{$prefix}toggle-button-group-link-hover-bg: var(--#{$prefix}secondary-500);
+  --#{$prefix}toggle-button-group-bg: var(--#{$prefix}gray-25);
+  --#{$prefix}toggle-button-group-radius: 4rem;
+  --#{$prefix}toggle-button-group-padding: .25rem;
+  padding: var(--#{$prefix}toggle-button-group-padding);
+  overflow: hidden;
+  background: var(--#{$prefix}toggle-button-group-bg);
+  border: 1px solid var(--#{$prefix}gray-50);
+  border-radius: var(--#{$prefix}toggle-button-group-radius);
+  .nav-link {
+    flex: 1;
+    border-radius: var(--#{$prefix}toggle-button-group-border-radius);
+  }
+  .nav-link.active {
+    font-weight: var(--#{$prefix}fw-semibold);
+    color: var(--#{$prefix}toggle-button-group-link-active-color);
+    background: var(--#{$prefix}toggle-button-group-link-active-bg);
+  }
+}