@dynamic-framework/ui-react 2.0.0-dev.3 → 2.0.0-dev.5

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

@@ -1,23 +1,13 @@
-import type { MouseEvent, ReactNode } from 'react';
-import type { BaseProps, ButtonType, ButtonVariant, ComponentColor, ComponentSize, EndIconProps, InputState, StartIconProps } from '../interface';
-type Props = BaseProps & StartIconProps & EndIconProps & {
-    id?: string;
+import { type ButtonHTMLAttributes } from 'react';
+import type { BaseProps, ButtonVariant, ComponentColor, ComponentSize, EndIconProps, StartIconProps } from '../interface';
+interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, BaseProps, StartIconProps, EndIconProps {
     color?: ComponentColor;
     size?: ComponentSize;
     variant?: ButtonVariant;
-    state?: InputState;
     text?: string;
-    children?: ReactNode;
-    ariaLabel?: string;
-    value?: string;
-    type?: ButtonType;
-    loadingText?: string;
     loading?: boolean;
+    loadingText?: string;
     loadingAriaLabel?: string;
-    disabled?: boolean;
-    stopPropagationEnabled?: boolean;
-    form?: string;
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-};
-export default function DButton({ color, size, variant, state, text, children, ariaLabel, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartMaterialStyle, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndMaterialStyle, loadingText, value, type, loading, loadingAriaLabel, disabled, stopPropagationEnabled, className, style, form, dataAttributes, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+}
+declare const DButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement>>;
+export default DButton;

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

@@ -7,6 +7,7 @@ type Props = ComponentPropsWithoutRef<'input'> & BaseProps & {
     label?: string;
     ariaLabel?: string;
     checked?: boolean;
+    inputClassName?: string;
     disabled?: boolean;
     invalid?: boolean;
     valid?: boolean;
@@ -15,5 +16,5 @@ type Props = ComponentPropsWithoutRef<'input'> & BaseProps & {
     value?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 };
-export default function DInputCheck({ id: idProp, type, name, label, ariaLabel, checked, disabled, invalid, valid, indeterminate, value, hint, onChange, className, style, dataAttributes, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DInputCheck({ id: idProp, type, name, label, ariaLabel, checked, disabled, invalid, valid, indeterminate, inputClassName, value, hint, onChange, className, style, dataAttributes, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,18 +1,8 @@
-/// <reference types="react" />
-import type { MaskProps } from '@react-input/mask';
-declare const ForwardedDInputMask: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "value">, "size" | "onChange" | "label" | "invalid" | "value" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "loading" | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
-    value?: string | undefined;
-    label?: string | undefined;
-    loading?: boolean | undefined;
-    hint?: string | undefined;
-    size?: import("../interface").ComponentSize | undefined;
-    invalid?: boolean | undefined;
-    valid?: boolean | undefined;
-    floatingLabel?: boolean | undefined;
-    inputStart?: import("react").ReactNode;
-    inputEnd?: import("react").ReactNode;
-    onChange?: ((value: string) => void) | undefined;
-    onIconStartClick?: ((value?: string | undefined) => void) | undefined;
-    onIconEndClick?: ((value?: string | undefined) => void) | undefined;
-} & import("react").RefAttributes<HTMLInputElement>, "ref">, keyof MaskProps> & MaskProps & import("react").RefAttributes<HTMLInputElement>>;
+import { type InputMaskProps } from '@react-input/mask';
+import type { ComponentPropsWithoutRef } from 'react';
+import DInput from '../DInput';
+import type { Merge } from '../../types';
+type NonDInputProps = InputMaskProps<typeof DInput>;
+type Props = Merge<ComponentPropsWithoutRef<typeof DInput>, NonDInputProps>;
+declare const ForwardedDInputMask: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default ForwardedDInputMask;

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

@@ -6,10 +6,11 @@ type Props = BaseProps & {
     name?: string;
     checked?: boolean;
     disabled?: boolean;
+    inputClassName?: string;
     invalid?: boolean;
     valid?: boolean;
     readonly?: boolean;
     onChange?: (isChecked: boolean) => void;
 };
-export default function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, invalid, valid, readonly, className, style, dataAttributes, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, invalid, valid, readonly, className, style, dataAttributes, inputClassName, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -13,8 +13,9 @@ type Props = PropsWithChildren<BaseProps & {
     gapLg?: Gap;
     gapXl?: Gap;
     gapXxl?: Gap;
+    columns?: number;
 }>;
-declare function DLayout({ className, style, children, gap, gapSm, gapMd, gapLg, gapXl, gapXxl, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function DLayout({ className, style, children, gap, columns, gapSm, gapMd, gapLg, gapXl, gapXxl, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof DLayout & {
     Pane: typeof DLayoutPane;
 };

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

@@ -0,0 +1,23 @@
+import type { BaseProps } from '../interface';
+export type ValidationMessages = {
+    number: string;
+    lowercaseLetter: string;
+    uppercaseLetter: string;
+    especialChar: string;
+    notMatch?: string;
+};
+export type ValidationCheck = 'uppercase' | 'lowercase' | 'number' | 'specialChar';
+type Props = BaseProps & {
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    name?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    validationMessages?: ValidationMessages;
+    enabledChecks?: ValidationCheck[];
+    onChange?: (value: string) => void;
+};
+export default function DPasswordStrengthMeter({ id, label, placeholder, value, name, disabled, invalid, validationMessages, enabledChecks, className, style, dataAttributes, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DPasswordStrengthMeter/PasswordCheckItem.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    password: string;
+    regex: RegExp;
+    text: string;
+};
+export default function PasswordCheckItem({ password, regex, text, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DPasswordStrengthMeter/PasswordCheckList.d.ts

@@ -0,0 +1,14 @@
+import type { ValidationMessages, ValidationCheck } from './DPasswordStrengthMeter';
+type Props = {
+    password: string;
+    validationMessages: ValidationMessages;
+    enabledChecks: ValidationCheck[];
+};
+export declare const CHECK_REGEX: {
+    uppercase: RegExp;
+    lowercase: RegExp;
+    number: RegExp;
+    specialChar: RegExp;
+};
+export default function PasswordChecksList({ password, validationMessages, enabledChecks, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DPasswordStrengthMeter/PasswordStrength.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    strength: number;
+    total: number;
+};
+export default function PasswordStrengthBar({ strength, total }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,3 @@
+import DPasswordStrengthMeter from './DPasswordStrengthMeter';
+export type { ValidationMessages, ValidationCheck } from './DPasswordStrengthMeter';
+export default DPasswordStrengthMeter;

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

@@ -0,0 +1,14 @@
+import { PropsWithChildren, ReactNode } from 'react';
+type Props = PropsWithChildren<{
+    amount?: string;
+    amountDetails?: ReactNode;
+    icon?: string;
+    color?: string;
+    message: string;
+    title: string;
+    downloadText?: string;
+    shareText?: string;
+    onError?: (err: Error) => Promise<void> | void;
+}>;
+export default function DVoucher({ amount, amountDetails, icon, color, title, onError, message, downloadText, shareText, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function useScreenshot(): {
+    clipRef: import("react").RefObject<HTMLDivElement | null>;
+    takeBlob: (type?: string) => Promise<Blob>;
+};

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

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

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

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

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

@@ -0,0 +1,2 @@
+import DVoucher from './DVoucher';
+export default DVoucher;

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

@@ -19,6 +19,8 @@ export { default as DInputMask } from './DInputMask';
 export { default as DInputCounter } from './DInputCounter';
 export { default as DInputCurrency } from './DInputCurrency';
 export { default as DInputPassword } from './DInputPassword';
+export { default as DPasswordStrengthMeter } from './DPasswordStrengthMeter';
+export type { ValidationMessages, ValidationCheck } from './DPasswordStrengthMeter';
 export { default as DInputCheck } from './DInputCheck';
 export { default as DInputPin } from './DInputPin';
 export { default as DInputSelect } from './DInputSelect';
@@ -45,3 +47,4 @@ export { default as DTableHead } from './DTableHead';
 export { default as DInputPhone } from './DInputPhone';
 export { default as DCreditCard } from './DCreditCard';
 export { default as DDropdown } from './DDropdown';
+export { default as DVoucher } from './DVoucher';

package/jest/setup.js

@@ -1,8 +1,6 @@
 /* eslint-disable react/prop-types */
 const React = require('react');
 
-jest.mock('react-content-loader', () => jest.fn());
-
 jest.mock('react-responsive-pagination', () => {
   function MockPagination(props) {
     const {

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.0.0-dev.3",
+  "version": "2.0.0-dev.5",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -89,22 +89,23 @@
     "jest/"
   ],
   "dependencies": {
-    "@floating-ui/react": "~0.26.1",
-    "@react-input/mask": "~1.0.20",
+    "@floating-ui/react": "~0.27.16",
+    "@react-input/mask": "~2.0.4",
     "@splidejs/react-splide": "~0.7.12",
     "@splidejs/splide": "~4.1.4",
-    "bootstrap": "~5.3.3",
-    "classnames": "~2.3.2",
+    "bootstrap": "~5.3.8",
+    "classnames": "~2.5.1",
     "currency.js": "~2.0.4",
-    "date-fns": "~2.30.0",
-    "file-selector": "^2.1.2",
-    "google-libphonenumber": "^3.2.40",
-    "i18next": "~23.6.0",
-    "lucide-react": "^0.548.0",
+    "date-fns": "~4.1.0",
+    "file-selector": "~2.1.2",
+    "google-libphonenumber": "~3.2.43",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^3.0.3",
+    "lucide-react": "^0.553.0",
     "react-datepicker": "~8.3.0",
-    "react-international-phone": "~4.5.0",
-    "react-responsive-pagination": "^2.9.0",
-    "react-select": "^5.8.3"
+    "react-international-phone": "~4.6.0",
+    "react-responsive-pagination": "~2.11.3",
+    "react-select": "~5.10.2"
   },
   "devDependencies": {
     "@babel/core": "~7.23.2",
@@ -126,8 +127,8 @@
     "@types/google-libphonenumber": "~7.4.30",
     "@types/jest": "~29.5.12",
     "@types/node": "~18.15.3",
-    "@types/react": "~19.1.8",
-    "@types/react-dom": "~19.1.6",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
     "@typescript-eslint/eslint-plugin": "~6.9.0",
     "@typescript-eslint/parser": "~6.9.0",
     "@vitejs/plugin-react": "~4.7.0",
@@ -144,23 +145,24 @@
     "eslint-plugin-jsx-a11y": "~6.7.1",
     "eslint-plugin-react": "~7.33.2",
     "eslint-plugin-react-hooks": "~4.6.0",
-    "formik": "~2.4.6",
-    "glob": "~10.3.10",
+    "formik": "~2.4.8",
+    "glob": "^11.1.0",
     "husky": "~9.1.7",
+    "i18next": "~25.6.1",
     "jest": "~29.7.0",
     "jest-axe": "~8.0.0",
     "jest-cli": "~29.7.0",
     "jest-environment-jsdom": "~29.7.0",
     "lint-staged": "^15.2.10",
     "postcss-cli": "~10.1.0",
-    "react": "~19.1.0",
-    "react-dom": "~19.1.0",
-    "react-hot-toast": "~2.5.2",
-    "react-i18next": "~13.3.1",
-    "recharts": "~3.1.0",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "react-hot-toast": "~2.6.0",
+    "react-i18next": "~16.2.4",
+    "recharts": "~3.3.0",
     "remark-gfm": "~4.0.1",
-    "rimraf": "~6.0.1",
-    "rollup": "^4.27.4",
+    "rimraf": "~6.1.0",
+    "rollup": "~4.53.1",
     "sass": "~1.69.4",
     "storybook": "~9.0.17",
     "stylelint": "^16.16.0",
@@ -172,15 +174,19 @@
     "yup": "^1.6.1"
   },
   "peerDependencies": {
-    "react": "~19.1.0",
-    "react-dom": "~19.1.0",
-    "react-hot-toast": "~2.5.2",
-    "react-i18next": "~13.3.1",
-    "recharts": "~3.1.0"
+    "i18next": "~25.6.1",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "react-hot-toast": "~2.6.0",
+    "react-i18next": "~16.2.4",
+    "recharts": "~3.3.0"
   },
   "peerDependenciesMeta": {
     "recharts": {
       "optional": true
+    },
+    "formik": {
+      "optional": true
     }
   }
 }

package/src/style/abstracts/_utilities.scss

@@ -81,6 +81,25 @@ $utilities: map-merge(
         )
       )
     ),
+    "grid-column": (
+      class: "g-col",
+      property: grid-column,
+      responsive: true,
+      values: (
+        13: auto/span 13,
+        14: auto/span 14,
+        15: auto/span 15,
+        16: auto/span 16,
+        17: auto/span 17,
+        18: auto/span 18,
+        19: auto/span 19,
+        20: auto/span 20,
+        21: auto/span 21,
+        22: auto/span 22,
+        23: auto/span 23,
+        24: auto/span 24
+      )
+    ),
     "overlay": (
       property: opacity,
       class: "overlay",

package/src/style/abstracts/variables/_buttons.scss

@@ -34,3 +34,5 @@ $btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, bord
 $btn-outline-primary-hover-color: inherit !default;
 $btn-outline-primary-hover-bg: transparent !default;
 $btn-outline-primary-focus-bg: transparent !default;
+
+$btn-loading-gap: var(--#{$prefix}ref-spacer-2) !default;

package/src/style/base/_buttons.scss

@@ -21,7 +21,9 @@
   --#{$prefix}btn-sm-padding-x: #{$btn-padding-x-sm};
   --#{$prefix}btn-sm-font-size: #{$btn-font-size-sm};
   --#{$prefix}btn-box-shadow: #{btn-box-shadow};
+  --#{$prefix}btn-loading-gap: #{$btn-loading-gap};
 
+  position: relative;
   display: inline-flex;
   flex-direction: row;
   gap: var(--#{$prefix}btn-gap, $spacer-2);
@@ -46,10 +48,6 @@
   @include box-shadow(var(--#{$prefix}btn-box-shadow));
   @include transition($btn-transition);
 
-  > span {
-    text-decoration: var(--#{$prefix}btn-text-decoration);
-  }
-
   // hover selectors
   &.hover,
   &:hover {
@@ -81,6 +79,16 @@
       box-shadow: var(--#{$prefix}btn-focus-box-shadow);
     }
   }
+  /* stylelint-disable-next-line scss/selector-no-union-class-name */
+  &-loading {
+    position: relative;
+    display: inline-flex;
+    gap: var(--#{$prefix}btn-loading-gap);
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
 
   .btn-check.focus-visible + &,
   .btn-check:focus-visible + & {
@@ -130,11 +138,13 @@
   &.disabled,
   &:disabled,
   fieldset:disabled & {
+
     color: var(--#{$prefix}btn-disabled-color);
     pointer-events: none;
     background-color: var(--#{$prefix}btn-disabled-bg);
     background-image: if($enable-gradients, none, null);
     border-color: var(--#{$prefix}btn-disabled-border-color);
+
     opacity: var(--#{$prefix}btn-disabled-opacity);
     @include box-shadow(none);
   }
@@ -157,20 +167,17 @@
 
 .btn-outline-primary {
   --#{$prefix}btn-color: var(--#{$prefix}primary-500);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}primary-700);
   --#{$prefix}btn-border-color: var(--#{$prefix}primary-500);
-  --#{$prefix}btn-active-color: var(--#{$prefix}primary-500);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}primary-600);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}primary-700);
-  --#{$prefix}btn-focus-color: var(--#{$prefix}primary-600);
-  --#{$prefix}btn-active-color: var(--#{$prefix}primary-600);
-  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  --#{$prefix}btn-hover-color: var(--#{$prefix}primary-600);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}primary-600);
+  --#{$prefix}btn-active-color: var(--#{$prefix}primary-700);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}primary-700);
+  --#{$prefix}btn-focus-color: var(--#{$prefix}primary-700);
   --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-primary-focus-shadow-rgb);
-  &:disabled,
-  &.disabled {
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}primary-500);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}primary-500);
-  }
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  // Disabled state
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}primary-500);
+  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}primary-500);
 }
 
 .btn-outline-secondary {
@@ -178,21 +185,17 @@
   --#{$prefix}btn-hover-border-color: var(--#{$prefix}secondary-400);
   --#{$prefix}btn-border-color: var(--#{$prefix}secondary-200);
   --#{$prefix}btn-active-border-color: var(--#{$prefix}secondary-400);
-  --#{$prefix}btn-active-color: var(--#{$prefix}secondary-700);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}secondary-700);
   --#{$prefix}btn-focus-color: var(--#{$prefix}secondary-700);
-  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
   --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-secondary-focus-shadow-rgb);
-  &:disabled,
-  &.disabled {
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}secondary-200);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}secondary-600);
-  }
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  // Disabled state
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}secondary-700);
+  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}secondary-200);
 }
 
 .btn-outline-light {
   --#{$prefix}btn-color: var(--#{$prefix}gray-25);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}gray-25);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}gray-50);
   --#{$prefix}btn-border-color: var(--#{$prefix}gray-25);
   --#{$prefix}btn-active-border-color: var(--#{$prefix}gray-50);
   --#{$prefix}btn-active-color: var(--#{$prefix}gray-50);
@@ -200,12 +203,10 @@
   --#{$prefix}btn-focus-color: var(--#{$prefix}gray-50);
   --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
   --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-light-focus-shadow-rgb);
-  &:disabled,
-  &.disabled {
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}gray-25);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}gray-25);
-    opacity: var(--#{$prefix}btn-disabled-opacity);
-  }
+  // Disabled state
+  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}gray-25);
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}gray-25);
+  opacity: var(--#{$prefix}btn-disabled-opacity);
 }
 
 .btn-outline-success {
@@ -218,11 +219,9 @@
   --#{$prefix}btn-focus-color: var(--#{$prefix}success-700);
   --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
   --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-success-focus-shadow-rgb);
-  &:disabled,
-  &.disabled {
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}success-500);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}success-500);
-  }
+  // Disabled state
+  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}success-500);
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}success-500);
 }
 
 .btn-outline-danger {
@@ -235,11 +234,9 @@
   --#{$prefix}btn-focus-color: var(--#{$prefix}danger-700);
   --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
   --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-danger-focus-shadow-rgb);
-  &:disabled,
-  &.disabled {
-    --#{$prefix}btn-active-border-color: var(--#{$prefix}danger-500);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}danger-500);
-  }
+  // Disabled state
+  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}danger-500);
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}danger-500);
 }
 
 .btn-outline-info {
@@ -252,45 +249,39 @@
   --#{$prefix}btn-focus-color: var(--#{$prefix}info-700);
   --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
   --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-info-focus-shadow-rgb);
-  &:disabled,
-  &.disabled {
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}info-500);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}info-500);
-  }
+  // Disabled state
+  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}info-500);
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}info-500);
 }
 
 .btn-outline-warning {
-  --#{$prefix}btn-color: var(--#{$prefix}warning-600);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}warning-700);
+  --#{$prefix}btn-color: var(--#{$prefix}warning-500);
   --#{$prefix}btn-border-color: var(--#{$prefix}warning-500);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}warning-600);
+  --#{$prefix}btn-hover-color: var(--#{$prefix}warning-600);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}warning-600);
   --#{$prefix}btn-active-color: var(--#{$prefix}warning-700);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}warning-700);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}warning-700);
   --#{$prefix}btn-focus-color: var(--#{$prefix}warning-700);
-  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
   --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-warning-focus-shadow-rgb);
-  &:disabled,
-  &.disabled {
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}warning-500);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}warning-600);
-  }
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  // Disabled state
+  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}warning-500);
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}warning-500);
 }
 
 .btn-outline-dark {
   --#{$prefix}btn-color: var(--#{$prefix}black);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}black);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}gray-600);
   --#{$prefix}btn-border-color: var(--#{$prefix}black);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}black);
-  --#{$prefix}btn-active-color: var(--#{$prefix}black);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}black);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}gray-600);
+  --#{$prefix}btn-active-color: var(--#{$prefix}gray-600);
+  --#{$prefix}btn-hover-color: var(--#{$prefix}gray-600);
   --#{$prefix}btn-focus-color: var(--#{$prefix}black);
   --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
   --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-dark-focus-shadow-rgb);
-  &:disabled,
-  &.disabled {
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}black);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}black);
-  }
+  // Disabled state
+  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}black);
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}black);
 }
 
 .btn-lg {

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

@@ -11,6 +11,7 @@
 @import "d-collapse-icon-text";
 @import "d-datepicker";
 @import "d-timepicker";
+@import "d-voucher";
 @import "d-close";
 @import "d-popover";
 @import "d-box-file";

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

@@ -0,0 +1,30 @@
+.d-voucher {
+  --#{$prefix}voucher-header-gap: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}voucher-amount-padding: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}voucher-amount-background: var(--#{$prefix}secondary-50);
+  --#{$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;
+}
+
+.d-voucher-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$prefix}voucher-header-gap);
+  align-items: center;
+  justify-content: center;
+  margin: var(--#{$prefix}voucher-margin);
+}
+
+.d-voucher-amount {
+  padding: var(--#{$prefix}voucher-amount-padding);
+  background: var(--#{$prefix}voucher-amount-background);
+  border-radius: var(--#{$prefix}voucher-amount-rounded);
+}
+
+.d-voucher-footer {
+  display: flex;
+  gap: var(--#{$prefix}voucher-footer-gap);
+  justify-content: center;
+  justify-content: flex-start;
+}