@dynamic-framework/ui-react 2.7.0 → 2.8.0

package/dist/types/components/DDropdown/DDropdown.d.ts

@@ -8,7 +8,14 @@ export type DropdownAction = {
     isDivider?: boolean;
     label: string;
 };
-type DropdownPlacement = 'auto' | 'down' | 'up' | 'start' | 'end';
+type ResolvedSide = 'down' | 'up' | 'start' | 'end';
+type DropdownPlacement = 'auto' | ResolvedSide;
+/**
+ * Horizontal alignment of the menu relative to the toggle, applied only when
+ * the resolved placement is vertical (`down`/`up`) — mirrors Bootstrap's
+ * `dropdown-menu-end`/`dropdown-center` menu alignment options.
+ */
+export type DropdownAlignment = 'start' | 'end' | 'center';
 type Props = {
     actions: DropdownAction[];
     dropdownToggle?: ((props: {
@@ -19,6 +26,7 @@ type Props = {
     classNameMenu?: string;
     asPortal?: boolean;
     placement?: DropdownPlacement;
+    alignment?: DropdownAlignment;
 };
-export default function DDropdown({ actions, dropdownToggle, className, classNameMenu, asPortal, placement, }: Props): import("react").JSX.Element;
+export default function DDropdown({ actions, dropdownToggle, className, classNameMenu, asPortal, placement, alignment, }: Props): import("react").JSX.Element;
 export {};

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

@@ -11,6 +11,7 @@ export type PropsOtp = PropsWithChildren<{
         title?: string;
         contact?: string | React.ReactNode;
         resendText?: string;
+        invalidCode?: string;
     };
 }>;
 export default function DOtp({ className, action, isLoading, otpSize, texts, seconds, }: PropsOtp): import("react").JSX.Element;

package/dist/types/components/DOtp/components/OtpCountdown.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 type Props = {
-    seconds: number;
+    secondsLeft: number;
+    restartCountdown: () => void;
     resendText?: string;
     message?: (secondsLeft: number) => string;
 };
-export default function OtpCountdown({ seconds, resendText, message, }: Props): import("react").JSX.Element;
+export default function OtpCountdown({ secondsLeft, restartCountdown, resendText, message, }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/DVoucher/DVoucher.d.ts

@@ -9,7 +9,9 @@ type Props = PropsWithChildren<{
     title: string;
     downloadText?: string;
     shareText?: string;
+    fileName?: string;
+    hideActions?: boolean;
     onError?: (err: Error) => Promise<void> | void;
 }>;
-export default function DVoucher({ amount, amountDetails, icon, title, onError, message, downloadText, shareText, className, children, }: Props): import("react").JSX.Element;
+export default function DVoucher({ amount, amountDetails, icon, title, onError, message, downloadText, shareText, fileName, hideActions, className, children, }: Props): import("react").JSX.Element;
 export {};

package/dist/types/components/DVoucher/hooks/useScreenshotDownload.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export default function useScreenshotDownload(): {
-    download: () => Promise<void>;
+    download: (fileName?: string) => Promise<void>;
     downloadRef: import("react").RefObject<HTMLDivElement | null>;
 };

package/dist/types/components/DVoucher/hooks/useScreenshotDownload.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DVoucher/hooks/useScreenshotWebShare.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export default function useScreenshotWebShare(): {
-    share: () => Promise<void>;
+    share: (fileName?: string) => Promise<void>;
     shareRef: import("react").RefObject<HTMLDivElement | null>;
 };

package/dist/types/components/DVoucher/hooks/useScreenshotWebShare.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DVoucher/index.d.ts

@@ -1,2 +1,5 @@
 import DVoucher from './DVoucher';
+export { default as useScreenshot } from './hooks/useScreenshot';
+export { default as useScreenshotDownload } from './hooks/useScreenshotDownload';
+export { default as useScreenshotWebShare } from './hooks/useScreenshotWebShare';
 export default DVoucher;

package/dist/types/components/index.d.ts

@@ -50,7 +50,7 @@ export type { DToastContainerProps, DToastOptions, ToastData } from './DToastCon
 export { default as DInputPhone } from './DInputPhone';
 export { default as DCreditCard } from './DCreditCard';
 export { default as DDropdown } from './DDropdown';
-export { default as DVoucher } from './DVoucher';
+export { default as DVoucher, useScreenshot, useScreenshotDownload, useScreenshotWebShare, } from './DVoucher';
 export { default as DOtp } from './DOtp';
 export { default as DErrorBoundary, useErrorBoundary, type FallbackProps, getErrorMessage, } from './DErrorBoundary';
 export { default as DDataStateWrapper, EmptyState, ErrorState, LoadingState, } from './DDataStateWrapper';

package/dist/types/hooks/index.d.ts

@@ -9,3 +9,6 @@ export { default as useMediaQuery } from './useMediaQuery';
 export { default as useConfirmModal } from './useConfirmModal';
 export type { UseConfirmModalConfig, UseConfirmModalReturn, ConfirmModalColor, CriticalConfirmConfig, } from './useConfirmModal';
 export { useMediaBreakpointUpXs, useMediaBreakpointUpSm, useMediaBreakpointUpMd, useMediaBreakpointUpLg, useMediaBreakpointUpXl, useMediaBreakpointUpXxl, } from './useMediaBreakpointUp';
+export { default as useCountdown } from './useCountdown';
+export { default as useOtp } from './useOtp';
+export type { UseOtpConfig, UseOtpReturn } from './useOtp';

package/dist/types/hooks/tests/useCountdown.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,14 @@
+/**
+ * Generic seconds-based countdown hook.
+ *
+ * Starts counting down from `seconds` to `0` and exposes `restartCountdown`
+ * to reset and restart the timer (e.g. for "resend code in Xs" patterns,
+ * session-expiry banners, or any other cooldown/throttle UI).
+ *
+ * @example
+ * const { secondsLeft, restartCountdown } = useCountdown(30);
+ */
+export default function useCountdown(seconds: number): {
+    secondsLeft: number;
+    restartCountdown: () => void;
+};

package/dist/types/hooks/useInputCurrency.d.ts

@@ -1,15 +1,10 @@
 import type { RefObject, ForwardedRef, FocusEvent } from 'react';
 import type { Options } from 'currency.js';
-import type { CustomStyles } from '../components/interface';
-export default function useInputCurrency(currencyOptions: Options, value?: number, onFocus?: (event: FocusEvent<HTMLInputElement>) => void, onChange?: (value?: number) => void, onBlur?: (event: FocusEvent<HTMLInputElement>) => void, ref?: ForwardedRef<HTMLInputElement>): {
+export default function useInputCurrency(currencyOptions: Options, value?: number, onFocus?: (event: FocusEvent<HTMLInputElement>) => void, onChange?: (value?: number) => void, onBlur?: (event: FocusEvent<HTMLInputElement>) => void, ref?: ForwardedRef<HTMLInputElement>, minValue?: number, maxValue?: number): {
     inputRef: RefObject<HTMLInputElement | null>;
     innerValue: string;
     innerType: string;
     handleOnFocus: (event: FocusEvent<HTMLInputElement>) => void;
     handleOnChange: (newValue?: string) => void;
     handleOnBlur: (event: FocusEvent<HTMLInputElement>) => void;
-    generateStyleVariables: CustomStyles;
-    generateSymbolStyleVariables: {
-        color: string;
-    };
 };

package/dist/types/hooks/useOtp.d.ts

@@ -0,0 +1,98 @@
+export type UseOtpConfig = {
+    /** Called when the OTP reaches the expected length and `submit()` is invoked. */
+    action: () => Promise<void> | void;
+    /** Expected number of digits/characters for a valid OTP. Defaults to `6`. */
+    otpSize?: number;
+    /** Initial countdown (in seconds) before resend becomes available. Defaults to `15`. */
+    seconds?: number;
+};
+export type UseOtpReturn = {
+    /** Current OTP value. */
+    otp: string;
+    /**
+     * Updates the OTP value (wire this to your custom pin input's `onChange`).
+     * Also clears `invalid`/`error` as soon as the value actually changes, so
+     * the error state disappears once the user edits the code (a no-op call
+     * with the same value, e.g. from an uncontrolled input re-notifying its
+     * current value, does not reset `invalid`/`error`).
+     */
+    setOtp: (value: string) => void;
+    /**
+     * `true` when `submit()` is called with an OTP shorter than `otpSize`, or
+     * when `action` throws/rejects (e.g. the backend rejected the entered
+     * code as incorrect).
+     */
+    invalid: boolean;
+    /**
+     * The value thrown/rejected by `action`, or `null` otherwise. Use it to
+     * render a specific message for a wrong code, as opposed to a too-short
+     * one.
+     */
+    error: unknown;
+    /**
+     * Validates the OTP length; if valid, calls `action`. If `action`
+     * rejects, the returned promise rejects too (so callers can still
+     * `.catch()` it for logging), and `invalid`/`error` are set beforehand.
+     */
+    submit: () => Promise<void>;
+    /**
+     * `true` while `action` is being awaited inside `submit()` (i.e. the OTP
+     * passed the length check and the async action hasn't settled yet). Wire
+     * it to your submit button's loading/disabled state. It's `false` while
+     * idle and immediately after `action` settles (whether it resolves or
+     * rejects), and it's never set to `true` for the too-short/length
+     * validation failure since `action` isn't called in that case.
+     */
+    isLoading: boolean;
+    /** Seconds remaining until resend is available. */
+    secondsLeft: number;
+    /** Restarts the resend countdown (call it from your "Resend" action). */
+    restartCountdown: () => void;
+};
+/**
+ * Headless hook exposing the same OTP logic used internally by `DOtp`
+ * (code state, length + correctness validation, submit action and resend
+ * countdown), without any bundled markup/styles.
+ *
+ * Use this when the default `DOtp` component doesn't match your design and
+ * you need to build a fully custom UI while reusing the same behavior.
+ *
+ * Internally composes `useCountdown` for the resend timer and re-exposes
+ * `secondsLeft`/`restartCountdown`, so there is no need to call
+ * `useCountdown` separately.
+ *
+ * `invalid` becomes `true` both when the OTP is shorter than `otpSize` and
+ * when `action` throws/rejects (e.g. the backend rejected the entered code
+ * as incorrect). In the latter case, the thrown value is exposed as `error`
+ * so custom UIs can render an appropriate message (e.g. "Invalid code" vs.
+ * "Enter all digits"). `invalid`/`error` are cleared automatically as soon
+ * as the user edits the code via `setOtp`.
+ *
+ * @example
+ * function CustomOtp() {
+ *   const {
+ *     otp,
+ *     setOtp,
+ *     invalid,
+ *     error,
+ *     submit,
+ *     isLoading,
+ *     secondsLeft,
+ *     restartCountdown,
+ *   } = useOtp({ action: async () => verifyOtp(otp), otpSize: 6, seconds: 15 });
+ *
+ *   return (
+ *     <>
+ *       <MyCustomPinInput value={otp} onChange={setOtp} invalid={invalid} />
+ *       {invalid && <span>{error ? 'Invalid code' : 'Enter all digits'}</span>}
+ *       <button disabled={isLoading} onClick={() => { submit().catch(() => {}); }}>
+ *         {isLoading ? 'Submitting...' : 'Submit'}
+ *       </button>
+ *       <button disabled={secondsLeft > 0} onClick={restartCountdown}>
+ *         Resend {secondsLeft > 0 ? `(${secondsLeft}s)` : ''}
+ *       </button>
+ *     </>
+ *   );
+ * }
+ */
+export default function useOtp({ action, otpSize, seconds, }: UseOtpConfig): UseOtpReturn;

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/LICENSE.md",
   "repository": {

package/src/style/abstracts/variables/_+import.scss

@@ -94,4 +94,5 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
 @import "box-file";
 @import "datepicker";
 @import "input-phone";
+@import "input-currency";
 // end custom

package/src/style/abstracts/variables/_input-currency.scss

@@ -0,0 +1 @@
+$input-currency-symbol-color: var(--#{$prefix}secondary) !default;

package/src/style/components/_+import.scss

@@ -22,3 +22,10 @@
 @import "d-table-head";
 @import "d-input-phone";
 @import "d-credit-card";
+@import "d-input-currency";
+@import "d-confirm-modal";
+@import "d-data-state-wrapper";
+@import "d-error-boundary";
+@import "d-otp";
+@import "d-password-strength-meter";
+@import "d-stepper";

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

@@ -69,6 +69,11 @@
   }
 }
 
+.d-box-file-empty-text {
+  margin: 0;
+  text-align: center;
+}
+
 .d-box-files {
   --#{$prefix}box-file-list-gap: #{$box-file-list-gap};
   --#{$prefix}box-file-list-padding: #{$box-file-list-padding};

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

@@ -1,5 +1,6 @@
 .d-close {
   display: flex;
+  align-self: center;
   padding: 0;
   background: transparent;
   border: 0;

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

@@ -0,0 +1,17 @@
+.confirm-modal {
+  --#{$prefix}confirm-modal-body-padding-y: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}confirm-modal-body-padding-x: var(--#{$prefix}ref-spacer-5);
+  --#{$prefix}confirm-modal-field-gap: var(--#{$prefix}ref-spacer-4);
+}
+
+.d-confirm-modal-body {
+  padding: var(--#{$prefix}confirm-modal-body-padding-y) var(--#{$prefix}confirm-modal-body-padding-x);
+}
+
+.d-confirm-modal-message {
+  margin-bottom: var(--#{$prefix}confirm-modal-field-gap);
+}
+
+.d-confirm-modal-field {
+  margin-bottom: var(--#{$prefix}confirm-modal-field-gap);
+}

package/src/style/components/_d-data-state-wrapper.scss

@@ -0,0 +1,47 @@
+.d-empty-state {
+  --#{$prefix}empty-state-padding: var(--#{$prefix}ref-spacer-5);
+  --#{$prefix}empty-state-spacing: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}empty-state-color: var(--#{$prefix}secondary);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--#{$prefix}empty-state-padding);
+  text-align: center;
+}
+
+.d-empty-state-icon {
+  margin-bottom: var(--#{$prefix}empty-state-spacing);
+  color: var(--#{$prefix}empty-state-color);
+}
+
+.d-empty-state-message {
+  margin-bottom: var(--#{$prefix}empty-state-spacing);
+  color: var(--#{$prefix}empty-state-color);
+}
+
+.d-error-state {
+  --#{$prefix}error-state-gap: var(--#{$prefix}ref-spacer-3);
+
+  display: flex;
+  gap: var(--#{$prefix}error-state-gap);
+  align-items: center;
+}
+
+.d-error-state-content {
+  flex: 1 1 auto;
+}
+
+.d-error-state-message {
+  margin-bottom: 0;
+}
+
+.d-loading-state {
+  --#{$prefix}loading-state-padding: var(--#{$prefix}ref-spacer-4);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--#{$prefix}loading-state-padding);
+}

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

@@ -215,6 +215,12 @@
     }
   }
 
+  &-year-selector {
+    display: flex;
+    flex-grow: 1;
+    justify-content: center;
+  }
+
   &-day-selector {
     margin-bottom: var(--#{$prefix}ref-spacer-4);
 
@@ -287,6 +293,11 @@
   margin-top: -.5rem;
 }
 
+.datepicker-top-header-title {
+  margin-bottom: 0;
+  font-weight: var(--#{$prefix}fw-normal);
+}
+
 .react-datepicker__year,
 .react-datepicker__quarterPicker {
   --#{$prefix}datepicker-body-gap: 1rem;

package/src/style/components/_d-error-boundary.scss

@@ -0,0 +1,7 @@
+.d-error-boundary-content {
+  --#{$prefix}error-boundary-gap: var(--#{$prefix}ref-spacer-2);
+
+  display: flex;
+  gap: var(--#{$prefix}error-boundary-gap);
+  align-items: center;
+}

package/src/style/components/_d-input-currency.scss

@@ -0,0 +1,5 @@
+.d-input-currency-symbol {
+  --#{$prefix}input-currency-symbol-color: var(--#{$prefix}input-currency-component-symbol-color, #{$input-currency-symbol-color});
+
+  color: var(--#{$prefix}input-currency-symbol-color);
+}

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;
-};