@dynamic-framework/ui-react 1.26.0 → 1.28.0

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

@@ -0,0 +1,19 @@
+import type { MouseEvent } from 'react';
+import type { BaseProps, ButtonType, ButtonVariant, ComponentSize, FamilyIconProps, InputState } from '../interface';
+type Props = BaseProps & FamilyIconProps & {
+    id?: string;
+    icon: string;
+    size?: ComponentSize;
+    variant?: ButtonVariant;
+    theme?: string;
+    state?: InputState;
+    type?: ButtonType;
+    loading?: boolean;
+    loadingAriaLabel?: string;
+    ariaLabel?: string;
+    stopPropagationEnabled?: boolean;
+    disabled?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+export default function DButtonIcon({ id, icon, size, className, variant, state, loadingAriaLabel, iconMaterialStyle, ariaLabel, theme, type, loading, disabled, stopPropagationEnabled, style, iconFamilyClass, iconFamilyPrefix, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -1,7 +1,7 @@
 import type { Locale } from 'date-fns';
 import type { ReactDatePickerProps } from 'react-datepicker';
-import type { BaseProps, ButtonVariant, ComponentSize, FamilyIconProps } from '../interface';
-type Props<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined> = BaseProps & FamilyIconProps & Pick<ReactDatePickerProps<CustomModifierNames, WithRange>, 'formatWeekDay' | 'onChange' | 'autoFocus' | 'inline' | 'withPortal' | 'minDate' | 'showTimeInput' | 'calendarStartDay' | 'dateFormat' | 'selectsStart' | 'selectsEnd' | 'startDate' | 'endDate' | 'fixedHeight'> & {
+import type { BaseProps, ButtonVariant, ComponentSize, FamilyIconProps, StateIcons } from '../interface';
+type Props<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined> = BaseProps & FamilyIconProps & StateIcons & Pick<ReactDatePickerProps<CustomModifierNames, WithRange>, 'formatWeekDay' | 'onChange' | 'autoFocus' | 'inline' | 'withPortal' | 'minDate' | 'showTimeInput' | 'calendarStartDay' | 'dateFormat' | 'selectsStart' | 'selectsEnd' | 'startDate' | 'endDate' | 'fixedHeight' | 'renderCustomHeader'> & {
     date?: string | null;
     selectsRange?: boolean;
     inputLabel?: string;
@@ -25,5 +25,5 @@ type Props<CustomModifierNames extends string = never, WithRange extends boolean
     invalid?: boolean;
     valid?: boolean;
 };
-export default function DDatePicker<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined>({ date, selectsRange, inputLabel, inputHint, inputAriaLabel, inputActionAriaLabel, inputId, timeId, timeLabel, iconInput: iconInputProp, iconHeaderPrevMonth: iconHeaderPrevMonthProp, iconHeaderNextMonth: iconHeaderNextMonthProp, iconMaterialStyle: iconMaterialStyleProp, iconFamilyClass, iconFamilyPrefix, minYearSelect, maxYearSelect, iconHeaderSize, headerPrevMonthAriaLabel, headerNextMonthAriaLabel, headerButtonVariant, headerButtonTheme, invalid, valid, locale, className, formatWeekDay: formatWeekDayProp, style, ...props }: Props<CustomModifierNames, WithRange>): import("react/jsx-runtime").JSX.Element;
+export default function DDatePicker<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined>({ date, selectsRange, inputLabel, inputHint, inputAriaLabel, inputActionAriaLabel, inputId, timeId, timeLabel, iconInput: iconInputProp, iconHeaderPrevMonth: iconHeaderPrevMonthProp, iconHeaderNextMonth: iconHeaderNextMonthProp, iconMaterialStyle: iconMaterialStyleProp, iconFamilyClass, iconFamilyPrefix, minYearSelect, maxYearSelect, iconHeaderSize, headerPrevMonthAriaLabel, headerNextMonthAriaLabel, headerButtonVariant, headerButtonTheme, invalid, valid, renderCustomHeader: renderCustomHeaderProp, validIcon, invalidIcon, locale, className, formatWeekDay: formatWeekDayProp, style, ...props }: Props<CustomModifierNames, WithRange>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,6 +5,8 @@ type Props = BaseProps & {
     value?: string;
     onClick?: () => void;
     inputLabel?: string;
+    validIcon?: string;
+    invalidIcon?: string;
 } & Omit<ComponentProps<typeof DInput>, 'type' | 'onIconEndClick' | 'value'>;
 declare const ForwardedDDatePickerInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default ForwardedDDatePickerInput;

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

@@ -1,10 +1,11 @@
 import type { ReactNode } from 'react';
-import type { BaseProps, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps, StateIcons } from '../interface';
-declare const ForwardedDInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof BaseProps | keyof FamilyIconProps | keyof LabelIconProps | keyof StartIconProps | keyof EndIconProps | keyof StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & StateIcons & {
+import type { BaseProps, ComponentSize, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps, StateIcons } from '../interface';
+declare const ForwardedDInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof BaseProps | keyof FamilyIconProps | keyof LabelIconProps | keyof StartIconProps | keyof EndIconProps | keyof StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & StateIcons & {
     value?: string | undefined;
     label?: string | undefined;
     loading?: boolean | undefined;
     hint?: string | undefined;
+    size?: ComponentSize | undefined;
     invalid?: boolean | undefined;
     valid?: boolean | undefined;
     floatingLabel?: boolean | undefined;

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

@@ -8,9 +8,11 @@ type Props = BaseProps & {
     ariaLabel?: string;
     checked?: boolean;
     disabled?: boolean;
+    invalid?: boolean;
+    valid?: boolean;
     indeterminate?: boolean;
     value?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 };
-export default function DInputCheck({ id: idProp, type, name, label, ariaLabel, checked, disabled, indeterminate, value, onChange, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DInputCheck({ id: idProp, type, name, label, ariaLabel, checked, disabled, invalid, valid, indeterminate, value, onChange, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,11 +5,12 @@ type NonDInputProps = {
     maxValue: number;
     onChange?: (value?: number) => void;
 };
-declare const ForwardedDInputCounter: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
+declare const ForwardedDInputCounter: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
     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;

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

@@ -6,11 +6,12 @@ type NonDInputProps = {
     currencyCode?: string;
     onChange?: (value?: number) => void;
 };
-declare const ForwardedDInputCurrencyBase: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
+declare const ForwardedDInputCurrencyBase: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
     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;

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

@@ -8,11 +8,12 @@ type NonDInputProps = {
     currencyCode?: string;
     onChange?: (value?: number) => void;
 };
-declare const ForwardedDInputCurrencyBase: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
+declare const ForwardedDInputCurrencyBase: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
     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;

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

@@ -1,10 +1,11 @@
 /// <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">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
+declare const ForwardedDInputMask: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
     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;

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

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-declare const ForwardedDInputSearch: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
+declare const ForwardedDInputSearch: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
     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;

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

@@ -1,5 +1,5 @@
 import type { FocusEvent, MouseEvent } from 'react';
-import type { BaseProps, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps, StateIcons } from '../interface';
+import type { BaseProps, ComponentSize, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps, StateIcons } from '../interface';
 export type DefaultOption = {
     value: string | number;
     label: string;
@@ -19,8 +19,9 @@ export type Props<T> = BaseProps & FamilyIconProps & LabelIconProps & StartIconP
     onIconEndClick?: (event: MouseEvent) => void;
     options: Array<T>;
     value?: string | number;
+    size?: ComponentSize;
     onChange?: (selectedOption: T) => void;
     valueExtractor?: (item: T) => string | number;
     labelExtractor?: (item: T) => string;
 };
-export default function DInputSelect<T extends object = DefaultOption>({ id: idProp, name, label, className, style, options, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, disabled, loading, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, invalidIcon: invalidIconProp, validIcon: validIconProp, hint, value, floatingLabel, invalid, valid, valueExtractor, labelExtractor, onChange, onBlur, onIconStartClick, onIconEndClick, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export default function DInputSelect<T extends object = DefaultOption>({ id: idProp, name, label, className, style, options, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, disabled, loading, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, invalidIcon: invalidIconProp, validIcon: validIconProp, hint, value, size, floatingLabel, invalid, valid, valueExtractor, labelExtractor, onChange, onBlur, onIconStartClick, onIconEndClick, }: Props<T>): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -9,8 +9,8 @@ import DSelectLoadingIndicator from './components/DSelectLoadingIndicator';
 import DSelectOptionEmoji from './components/DSelectOptionEmoji';
 import DSelectSingleValueEmoji from './components/DSelectSingleValueEmoji';
 import DSelectSingleValueEmojiText from './components/DSelectSingleValueEmojiText';
-import type { BaseProps, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps } from '../interface';
-type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & Omit<SelectProps<Option, IsMulti, Group>, 'isDisabled' | 'isClearable' | 'isLoading' | 'isRtl' | 'isSearchable' | 'isMulti'> & {
+import type { BaseProps, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps, StateIcons } from '../interface';
+type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & StateIcons & Omit<SelectProps<Option, IsMulti, Group>, 'isDisabled' | 'isClearable' | 'isLoading' | 'isRtl' | 'isSearchable' | 'isMulti'> & {
     label?: string;
     hint?: string;
     invalid?: boolean;
@@ -25,7 +25,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = B
     searchable?: SelectProps<Option, IsMulti, Group>['isSearchable'];
     multi?: SelectProps<Option, IsMulti, Group>['isMulti'];
 };
-declare function DSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, className, style, label, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent, disabled, clearable, loading, rtl, searchable, multi, components, defaultValue, onIconStartClick, onIconEndClick, ...props }: Props<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
+declare function DSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, className, style, label, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, invalidIcon: invalidIconProp, validIcon: validIconProp, menuWithMaxContent, disabled, clearable, loading, rtl, searchable, multi, components, defaultValue, onIconStartClick, onIconEndClick, ...props }: Props<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof DSelect & {
     OptionCheck: typeof DSelectOptionCheck;
     OptionIcon: typeof DSelectOptionIcon;

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

@@ -12,7 +12,8 @@ type Props = BaseProps & {
     iconSuccessFamilyPrefix?: string;
     iconSuccessMaterialStyle?: boolean;
     vertical?: boolean;
+    completed?: boolean;
     breakpoint?: BreakpointSize;
 };
-export default function DStepper({ options, currentStep, iconSuccess, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical, breakpoint, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DStepper({ options, currentStep, iconSuccess, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical, breakpoint, className, completed, style, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -11,6 +11,7 @@ type Props = BaseProps & {
     iconSuccessFamilyPrefix?: string;
     iconSuccessMaterialStyle?: boolean;
     vertical?: boolean;
+    completed?: boolean;
 };
-export default function DStepper({ options, currentStep, iconSuccess: iconSuccessProp, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DStepper({ options, currentStep, iconSuccess: iconSuccessProp, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical, completed, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,9 @@
+import { BaseProps } from '../interface';
+type Props = BaseProps & {
+    field: string;
+    label: string;
+    value?: string;
+    onChange: (value: string) => void;
+};
+export default function DTableHead({ className, style, field, label, value, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -1,14 +1,2 @@
-import type { CSSProperties } from 'react';
-import type { ToastContainerProps } from 'react-toastify';
-import { BaseProps } from '../interface';
-type Props = BaseProps & Pick<ToastContainerProps, 'autoClose' | 'closeOnClick' | 'position'> & {
-    containerId?: string;
-    stacked?: boolean;
-    style?: CSSProperties & {
-        '--toastify-toast-width': string | number;
-        [index: string]: string | number;
-    };
-    transition?: 'slide' | 'flip' | 'bounce' | 'zoom';
-};
-export default function DToastContainer({ style, className, closeOnClick, position, autoClose, stacked, transition, containerId, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+import { ToasterProps } from 'react-hot-toast';
+export default function DToastContainer({ containerClassName, position, reverseOrder, containerStyle, toastOptions, gutter, }: ToasterProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DToastContainer/useDToast.d.ts

@@ -1,16 +1,15 @@
-import type { ToastPosition } from 'react-toastify';
-import type { AlertType } from '../interface';
-export type ToastConfig = {
-    type?: AlertType;
+import { Renderable, Toast, ValueFunction } from 'react-hot-toast';
+type ToastData = {
+    title: string;
+    description?: string;
+    timestamp?: string;
     icon?: string;
-    iconClose?: string;
-    showClose?: boolean;
-    position?: ToastPosition;
-    autoClose?: number | false;
-    stacked?: boolean;
-    containerId?: string;
-    transition?: 'slide' | 'flip' | 'bounce' | 'zoom';
+    closeIcon?: string;
+    theme?: string;
+    soft?: boolean;
 };
+type Props = Partial<Pick<Toast, 'id' | 'duration' | 'position'>>;
 export default function useDToast(): {
-    toast: (message: string, { icon, iconClose, type, showClose, transition, ...rest }: ToastConfig) => void;
+    toast: (data: ToastData | ValueFunction<Renderable, Toast>, toastProps?: Props) => string;
 };
+export {};

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

@@ -2,6 +2,7 @@ export { default as DAlert } from './DAlert';
 export { default as DBadge } from './DBadge';
 export { default as DBoxFile } from './DBoxFile';
 export { default as DButton } from './DButton';
+export { default as DButtonIcon } from './DButtonIcon';
 export { default as DCard, DCardHeader, DCardBody, DCardFooter, } from './DCard';
 export { default as DCarousel, DCarouselSlide, } from './DCarousel';
 export { default as DChip } from './DChip';
@@ -41,3 +42,4 @@ export { default as DTooltip } from './DTooltip';
 export { default as DTabs, useTabContext, DTabOption, DTabContent, } from './DTabs';
 export { default as DToast } from './DToast';
 export { default as DToastContainer, useDToast, } from './DToastContainer';
+export { default as DTableHead } from './DTableHead';

package/dist/types/contexts/DContext.d.ts

@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react';
 import { PortalContextProps } from './DPortalContext';
 import type { AlertTypeIconMap } from '../components/interface';
-type CurrencyProps = {
+export type CurrencyProps = {
     symbol: string;
     precision: number;
     separator: string;

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

@@ -1,4 +1,5 @@
+import { CurrencyProps } from '../contexts';
 export default function useFormatCurrency(...args: Array<number>): {
-    format: (value: number) => string;
+    format: (value: number, currencyOptions?: CurrencyProps) => string;
     values: string[];
 };

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.26.0",
+  "version": "1.28.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -65,7 +65,8 @@
   "types": "./dist/types/index.d.ts",
   "files": [
     "dist/",
-    "src/style"
+    "src/style",
+    "setupJest.js"
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.1",
@@ -82,8 +83,7 @@
     "react-datepicker": "^4.21.0",
     "react-dropzone": "^14.2.3",
     "react-responsive-pagination": "^2.4.1",
-    "react-select": "^5.8.0",
-    "react-toastify": "^10.0.0"
+    "react-select": "^5.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
@@ -132,6 +132,7 @@
     "postcss-cli": "^10.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-i18next": "^13.3.1",
     "recharts": "^2.12.7",
     "rimraf": "^5.0.5",
@@ -147,6 +148,7 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-i18next": "^13.3.1",
     "recharts": "^2.12.7"
   },
@@ -155,5 +157,5 @@
       "optional": true
     }
   },
-  "gitHead": "21163ab260bbaf17d9ec5793a45fd24574649114"
+  "gitHead": "f4db34343c4608b19f11d876ffad63f1e69feec5"
 }

package/setupJest.js

@@ -0,0 +1,16 @@
+jest.mock('react-content-loader', () => jest.fn());
+
+jest.mock('react-responsive-pagination', () => jest.fn());
+
+jest.mock('@react-input/mask', () => ({
+  InputMask: jest.fn(),
+}));
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (text) => text,
+    i18n: {
+      changeLanguage: () => new Promise(() => {}),
+    },
+  }),
+}));

package/src/style/abstracts/_mixins.scss

@@ -2,18 +2,22 @@
 @mixin df-button-variant-variables(
   $color-name,
   $default-color: var(--#{$prefix}#{$color-name}-500),
-  $hover-color: var(--#{$prefix}#{$color-name}-600),
-  $focus-color: var(--#{$prefix}#{$color-name}-500),
-  $active-color: var(--#{$prefix}#{$color-name}-700),
   $default-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-500)),
+  $hover-color: var(--#{$prefix}#{$color-name}-600),
   $hover-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
+  $focus-color: var(--#{$prefix}#{$color-name}-600),
   $focus-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
+  $active-color: var(--#{$prefix}#{$color-name}-700),
   $active-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-700)),
-  $disabled-opacity: .65
+  $disabled-opacity: $btn-disabled-opacity,
+  $box-shadow: $btn-box-shadow,
+  $focus-shadow-rgb: var(--#{$prefix}#{$color-name}-500-rgb),
+  $active-box-shadow: $btn-active-box-shadow,
 ) {
   --#{$prefix}btn-#{$color-name}-color: #{$default-text-color};
   --#{$prefix}btn-#{$color-name}-bg: #{$default-color};
   --#{$prefix}btn-#{$color-name}-border-color: #{$default-color};
+  --#{$prefix}btn-#{$color-name}-box-shadow: #{$box-shadow};
 
   --#{$prefix}btn-#{$color-name}-hover-color: #{$hover-text-color};
   --#{$prefix}btn-#{$color-name}-hover-bg: #{$hover-color};
@@ -22,10 +26,12 @@
   --#{$prefix}btn-#{$color-name}-focus-color: #{$focus-text-color};
   --#{$prefix}btn-#{$color-name}-focus-bg: #{$focus-color};
   --#{$prefix}btn-#{$color-name}-focus-border-color: #{$focus-color};
+  --#{$prefix}btn-#{$color-name}-focus-shadow-rgb: #{$focus-shadow-rgb};
 
   --#{$prefix}btn-#{$color-name}-active-color: #{$active-text-color};
   --#{$prefix}btn-#{$color-name}-active-bg: #{$active-color};
   --#{$prefix}btn-#{$color-name}-active-border-color: #{$active-color};
+  --#{$prefix}btn-#{$color-name}-active-box-shadow: #{$active-box-shadow};
 
   --#{$prefix}btn-#{$color-name}-disabled-color: #{$default-text-color};
   --#{$prefix}btn-#{$color-name}-disabled-bg: #{$default-color};
@@ -38,29 +44,35 @@
 @mixin df-button-outline-variant-variables(
   $color-name,
   $default-color: var(--#{$prefix}#{$color-name}-500),
-  $hover-bg-color: var(--#{$prefix}#{$color-name}-100),
-  $hover-text-color: var(--#{$prefix}#{$color-name}-500),
-  $focus-text-color: var(--#{$prefix}#{$color-name}-500),
-  $active-text-color: var(--#{$prefix}#{$color-name}-700),
-  $active-bg-color: var(--#{$prefix}#{$color-name}-100),
-  $active-border-color: var(--#{$prefix}#{$color-name}-700),
-  $disabled-opacity: .65
+  $hover-bg-color: var(--#{$prefix}#{$color-name}-600),
+  $hover-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
+  $focus-bg-color: var(--#{$prefix}#{$color-name}-600),
+  $focus-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
+  $active-bg-color: var(--#{$prefix}#{$color-name}-700),
+  $active-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-700)),
+  $disabled-opacity: $btn-disabled-opacity,
+  $box-shadow: $btn-box-shadow,
+  $focus-shadow-rgb: var(--#{$prefix}#{$color-name}-500-rgb),
+  $active-box-shadow: $btn-active-box-shadow,
 ) {
   --#{$prefix}btn-outline-#{$color-name}-color: #{$default-color};
   --#{$prefix}btn-outline-#{$color-name}-bg: transparent;
   --#{$prefix}btn-outline-#{$color-name}-border-color: #{$default-color};
+  --#{$prefix}btn-outline-#{$color-name}-box-shadow: #{$box-shadow};
 
   --#{$prefix}btn-outline-#{$color-name}-hover-color: #{$hover-text-color};
   --#{$prefix}btn-outline-#{$color-name}-hover-bg: #{$hover-bg-color};
-  --#{$prefix}btn-outline-#{$color-name}-hover-border-color: #{$default-color};
+  --#{$prefix}btn-outline-#{$color-name}-hover-border-color: #{$hover-bg-color};
 
   --#{$prefix}btn-outline-#{$color-name}-focus-color: #{$focus-text-color};
-  --#{$prefix}btn-outline-#{$color-name}-focus-bg: transparent;
-  --#{$prefix}btn-outline-#{$color-name}-focus-border-color: #{$default-color};
+  --#{$prefix}btn-outline-#{$color-name}-focus-bg: #{$focus-bg-color};
+  --#{$prefix}btn-outline-#{$color-name}-focus-border-color: #{$focus-bg-color};
+  --#{$prefix}btn-outline-#{$color-name}-focus-shadow-rgb: #{$focus-shadow-rgb};
 
   --#{$prefix}btn-outline-#{$color-name}-active-color: #{$active-text-color};
   --#{$prefix}btn-outline-#{$color-name}-active-bg: #{$active-bg-color};
-  --#{$prefix}btn-outline-#{$color-name}-active-border-color: #{$active-border-color};
+  --#{$prefix}btn-outline-#{$color-name}-active-border-color: #{$active-bg-color};
+  --#{$prefix}btn-outline-#{$color-name}-active-box-shadow: #{$active-box-shadow};
 
   --#{$prefix}btn-outline-#{$color-name}-disabled-color: #{$default-color};
   --#{$prefix}btn-outline-#{$color-name}-disabled-bg: transparent;
@@ -73,28 +85,33 @@
 @mixin df-button-link-variant-variables(
   $color-name,
   $default-color: var(--#{$prefix}#{$color-name}-500),
-  $hover-bg-color: var(--#{$prefix}#{$color-name}-100),
-  $hover-text-color: var(--#{$prefix}#{$color-name}-500),
-  $focus-text-color: var(--#{$prefix}#{$color-name}-500),
+  $hover-text-color: var(--#{$prefix}#{$color-name}-600),
+  $focus-text-color: var(--#{$prefix}#{$color-name}-600),
   $active-text-color: var(--#{$prefix}#{$color-name}-700),
-  $active-bg-color: var(--#{$prefix}#{$color-name}-100),
-  $disabled-opacity: .65
+  $active-bg-color: var(--#{$prefix}#{$color-name}-200),
+  $disabled-opacity: $btn-disabled-opacity,
+  $box-shadow: $btn-box-shadow,
+  $active-box-shadow: $btn-active-box-shadow,
+  $focus-shadow-rgb: var(--#{$prefix}#{$color-name}-500-rgb),
 ) {
   --#{$prefix}btn-link-#{$color-name}-bg: transparent;
   --#{$prefix}btn-link-#{$color-name}-border-color: transparent;
   --#{$prefix}btn-link-#{$color-name}-color: #{$default-color};
+  --#{$prefix}btn-link-#{$color-name}-box-shadow: #{$box-shadow};
 
-  --#{$prefix}btn-link-#{$color-name}-hover-bg: #{$hover-bg-color};
+  --#{$prefix}btn-link-#{$color-name}-hover-bg: transparent;
   --#{$prefix}btn-link-#{$color-name}-hover-border-color: transparent;
   --#{$prefix}btn-link-#{$color-name}-hover-color: #{$hover-text-color};
 
   --#{$prefix}btn-link-#{$color-name}-focus-bg: transparent;
   --#{$prefix}btn-link-#{$color-name}-focus-border-color: transparent;
   --#{$prefix}btn-link-#{$color-name}-focus-color: #{$focus-text-color};
+  --#{$prefix}btn-link-#{$color-name}-focus-shadow-rgb: #{$focus-shadow-rgb};
 
   --#{$prefix}btn-link-#{$color-name}-active-bg: #{$active-bg-color};
   --#{$prefix}btn-link-#{$color-name}-active-border-color: transparent;
   --#{$prefix}btn-link-#{$color-name}-active-color: #{$active-text-color};
+  --#{$prefix}btn-link-#{$color-name}-active-box-shadow: #{$active-box-shadow};
 
   --#{$prefix}btn-link-#{$color-name}-disabled-bg: transparent;
   --#{$prefix}btn-link-#{$color-name}-disabled-border-color: transparent;
@@ -112,6 +129,7 @@
   --#{$prefix}btn-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-color);
   --#{$prefix}btn-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-bg);
   --#{$prefix}btn-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-border-color);
+  --#{$prefix}btn-box-shadow: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-box-shadow);
 
   --#{$prefix}btn-hover-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-hover-color);
   --#{$prefix}btn-hover-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-hover-bg);
@@ -120,10 +138,12 @@
   --#{$prefix}btn-focus-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-color);
   --#{$prefix}btn-focus-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-bg);
   --#{$prefix}btn-focus-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-border-color);
+  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-shadow-rgb);
 
   --#{$prefix}btn-active-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-color);
   --#{$prefix}btn-active-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-bg);
   --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-border-color);
+  --#{$prefix}btn-active-box-shadow: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-box-shadow);
 
   --#{$prefix}btn-disabled-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-color);
   --#{$prefix}btn-disabled-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-bg);

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

@@ -16,16 +16,20 @@ $prefix: $variable-prefix !default;
 @import "box-shadow";
 
 // scss-docs-start focus-ring-variables
-$focus-ring-opacity: 1 !default;
+$focus-ring-width: .25rem !default;
+$focus-ring-opacity: .25 !default;
+$focus-ring-blur: 0 !default;
 // custom
+$focus-ring-border-color: var(--#{$prefix}secondary-300-rgb) !default;
 $focus-ring-color-mapping: "secondary-rgb" !default;
 $focus-ring-color: var(--#{$prefix}focus-ring-color) !default;
 // end custom
+$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
 // scss-docs-end focus-ring-variables
 
 $component-active-color: var(--#{$prefix}white) !default;
 $component-active-bg: var(--#{$prefix}primary) !default;
-$component-focus-shadow: 0 0 0 4px rgba(var(--#{$prefix}primary-rgb), .4) !default;
+$component-focus-border-color: var(--#{$prefix}focus-ring-border-color) !default;
 
 $transition-fade: opacity .3s linear !default;
 
@@ -40,7 +44,11 @@ $transition-fade: opacity .3s linear !default;
 $input-btn-padding-y: $spacer-3 !default;
 $input-btn-padding-x: $spacer-4 !default;
 
-$input-btn-focus-width: 0 !default;
+$input-btn-focus-width: $focus-ring-width !default;
+$input-btn-focus-color-opacity: $focus-ring-opacity !default;
+$input-btn-focus-color: $focus-ring-color !default;
+$input-btn-focus-blur: $focus-ring-blur !default;
+$input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
 $input-btn-focus-color-opacity: 1 !default;
 $input-btn-focus-color: rgba(var(--#{$prefix}secondary-rgb), $input-btn-focus-color-opacity) !default;
 $input-btn-focus-blur: 0 !default;
@@ -72,6 +80,7 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
 @import "alerts";
 @import "progress";
 @import "list-group";
+@import "toast";
 @import "carousel";
 @import "close";
 @import "offcanvas";

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

@@ -3,7 +3,7 @@
 // Define common padding and border radius sizes and more.
 
 // scss-docs-start border-variables
-$border-color: var(--#{$prefix}gray-200) !default;
+$border-color: var(--#{$prefix}gray-300) !default;
 $border-color-translucent: rgba(var(--#{$prefix}black-rgb), .175) !default;
 // scss-docs-end border-variables