@dynamic-framework/ui-react 2.6.0 → 2.8.0

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

@@ -0,0 +1,54 @@
+.d-otp {
+  --#{$prefix}otp-content-gap: var(--#{$prefix}ref-spacer-6);
+  --#{$prefix}otp-content-padding-x: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}otp-content-padding-bottom: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}otp-footer-gap: var(--#{$prefix}ref-spacer-4);
+}
+
+.d-otp-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$prefix}otp-content-gap);
+  padding: 0 var(--#{$prefix}otp-content-padding-x) var(--#{$prefix}otp-content-padding-bottom);
+}
+
+.d-otp-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$prefix}otp-content-gap);
+}
+
+.d-otp-divider {
+  margin: 0;
+}
+
+.d-otp-footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$prefix}otp-footer-gap);
+  align-items: center;
+
+  @include media-breakpoint-up(lg) {
+    flex-direction: row;
+  }
+}
+
+.d-otp-contact {
+  margin-bottom: 0;
+  font-size: .875em;
+
+  @include media-breakpoint-up(lg) {
+    margin-left: auto;
+  }
+}
+
+.d-otp-countdown {
+  display: flex;
+  gap: var(--#{$prefix}ref-spacer-2);
+  align-items: center;
+}
+
+.d-otp-countdown-text {
+  flex: 1 1 auto;
+  margin-bottom: 0;
+}

package/src/style/components/_d-password-strength-meter.scss

@@ -0,0 +1,76 @@
+.d-password-strength-meter {
+  --#{$prefix}password-strength-meter-margin-top: var(--#{$prefix}ref-spacer-2);
+
+  margin-top: var(--#{$prefix}password-strength-meter-margin-top);
+}
+
+.d-password-strength-bar {
+  --#{$prefix}password-strength-bar-height: 8px;
+  --#{$prefix}password-strength-bar-radius: var(--#{$prefix}border-radius-lg);
+  --#{$prefix}password-strength-bar-bg: var(--#{$prefix}gray-100);
+  --#{$prefix}password-strength-bar-margin-bottom: var(--#{$prefix}ref-spacer-2);
+
+  width: 100%;
+  height: var(--#{$prefix}password-strength-bar-height);
+  margin-bottom: var(--#{$prefix}password-strength-bar-margin-bottom);
+  overflow: hidden;
+  background: var(--#{$prefix}password-strength-bar-bg);
+  border-radius: var(--#{$prefix}password-strength-bar-radius);
+}
+
+.d-password-strength-bar-fill {
+  height: 100%;
+  transition: width .3s ease-in-out;
+
+  &.is-empty {
+    background: var(--#{$prefix}gray-200);
+  }
+
+  &.is-weak {
+    background: var(--#{$prefix}danger);
+  }
+
+  &.is-fair {
+    background: var(--#{$prefix}warning);
+  }
+
+  &.is-good {
+    background: var(--#{$prefix}info);
+  }
+
+  &.is-strong {
+    background: var(--#{$prefix}success);
+  }
+}
+
+.d-password-check-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$prefix}ref-spacer-2);
+  padding-left: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.d-password-check-item {
+  --#{$prefix}password-check-item-color: var(--#{$prefix}gray-600);
+
+  display: flex;
+  gap: var(--#{$prefix}ref-spacer-2);
+  align-items: flex-start;
+  font-size: .875em;
+  color: var(--#{$prefix}password-check-item-color);
+
+  &.is-valid {
+    color: var(--#{$prefix}success);
+  }
+}
+
+.d-password-check-item-icon {
+  flex-shrink: 0;
+  color: var(--#{$prefix}gray-300);
+}
+
+.d-password-check-item.is-valid .d-password-check-item-icon {
+  color: var(--#{$prefix}success);
+}

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

@@ -11,5 +11,9 @@
     &:focus-visible {
       outline: 0;
     }
+
+    &.d-popover-content-fill {
+      width: 100%;
+    }
   }
 }

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

@@ -0,0 +1,8 @@
+// Semantic hook classes for theming. The mobile/desktop toggle itself relies on
+// Bootstrap's responsive display utilities (d-{breakpoint}-none / d-{breakpoint}-block)
+// because the breakpoint is dynamic (component prop) and CSS custom properties
+// cannot be read inside media queries.
+.d-stepper-mobile,
+.d-stepper-desktop {
+  width: 100%;
+}

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

@@ -1,3 +1,21 @@
+.d-tabs {
+  display: flex;
+  width: 100%;
+}
+
+.d-tabs-column {
+  flex-direction: column;
+}
+
+.d-tabs-nav-vertical {
+  flex-direction: column;
+  align-items: center;
+}
+
+.d-tabs-content {
+  width: 100%;
+}
+
 .nav-toggle-button-group {
   --#{$prefix}toggle-button-group-border-color: var(--#{$prefix}gray-50);
   --#{$prefix}toggle-button-group-border-radius: 4rem;

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

@@ -5,6 +5,9 @@
   --#{$prefix}voucher-amount-rounded: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}voucher-footer-gap: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}voucher-margin: 0 0 var(--#{$prefix}ref-spacer-4) 0;
+  --#{$prefix}voucher-title-margin-bottom: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}voucher-amount-value-margin: var(--#{$prefix}ref-spacer-1);
+  --#{$prefix}voucher-divider-margin: var(--#{$prefix}ref-spacer-4);
 }
 
 .d-voucher-header {
@@ -28,3 +31,30 @@
   gap: var(--#{$prefix}voucher-footer-gap);
   justify-content: flex-start;
 }
+
+.d-voucher-title-group {
+  text-align: center;
+}
+
+.d-voucher-title {
+  margin-bottom: var(--#{$prefix}voucher-title-margin-bottom);
+}
+
+.d-voucher-message {
+  margin: 0;
+}
+
+.d-voucher-amount-value {
+  margin: 0;
+  font-size: var(--#{$prefix}fs-3);
+  font-weight: var(--#{$prefix}fw-bold);
+  text-align: center;
+
+  &.d-voucher-amount-value-with-details {
+    margin-bottom: var(--#{$prefix}voucher-amount-value-margin);
+  }
+}
+
+.d-voucher-divider {
+  margin: var(--#{$prefix}voucher-divider-margin) 0;
+}

package/dist/types/components/DOtp/hooks/useCountdown.d.ts

@@ -1,4 +0,0 @@
-export default function useCountdown(seconds: number): {
-    secondsLeft: number;
-    restartCountdown: () => void;
-};