@dynamic-framework/ui-react 1.31.0 → 1.32.0

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

@@ -3,7 +3,10 @@ type Props = BaseProps & {
     id?: string;
     size?: AvatarSize;
     image?: string;
-    title?: string;
+    name?: string;
+    useNameAsInitials?: boolean;
+    theme?: string;
+    variant?: 'light' | 'dark';
 };
-export default function DAvatar({ id, size, image, title, className, style, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DAvatar({ id, size, image, name: nameProp, useNameAsInitials, theme, variant, className, style, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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, 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'> & {
+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' | 'renderCustomHeader'> & {
     date?: string | null;
     selectsRange?: boolean;
     inputLabel?: string;
@@ -24,6 +24,10 @@ type Props<CustomModifierNames extends string = never, WithRange extends boolean
     maxYearSelect?: number;
     invalid?: boolean;
     valid?: boolean;
+    placeholder?: string;
 };
-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, dataAttributes, ...props }: Props<CustomModifierNames, WithRange>): import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated
+ */
+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, locale, className, formatWeekDay: formatWeekDayProp, style, dataAttributes, placeholder, ...props }: Props<CustomModifierNames, WithRange>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
-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 & {
+import type { BaseProps, ComponentSize, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps } 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 | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & {
     value?: string | undefined;
     label?: string | undefined;
     loading?: boolean | undefined;

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

@@ -5,7 +5,7 @@ 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" | "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 & {
+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 | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
     value?: string | undefined;
     label?: string | undefined;
     loading?: boolean | undefined;
@@ -19,5 +19,5 @@ declare const ForwardedDInputCounter: import("react").ForwardRefExoticComponent<
     onChange?: ((value: string) => void) | undefined;
     onIconStartClick?: ((value?: string | undefined) => void) | undefined;
     onIconEndClick?: ((value?: string | undefined) => void) | undefined;
-} & import("react").RefAttributes<HTMLInputElement>, "ref">, "type" | "value" | "onChange" | "invalidIcon" | "validIcon">, keyof NonDInputProps> & NonDInputProps & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<HTMLInputElement>, "ref">, "type" | "value" | "onChange" | "validIcon" | "invalidIcon">, keyof NonDInputProps> & NonDInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default ForwardedDInputCounter;

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

@@ -6,7 +6,7 @@ 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" | "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 & {
+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 | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
     value?: string | undefined;
     label?: string | undefined;
     loading?: boolean | undefined;

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

@@ -8,7 +8,7 @@ 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" | "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 & {
+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 | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
     value?: string | undefined;
     label?: string | undefined;
     loading?: boolean | undefined;

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

@@ -1,6 +1,6 @@
 /// <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" | "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 & {
+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 | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
     value?: string | undefined;
     label?: string | undefined;
     loading?: boolean | undefined;

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

@@ -1,5 +1,5 @@
-import type { BaseProps, FamilyIconProps, LabelIconProps, PinInputMode, PinInputType, StateIcons } from '../interface';
-type Props = BaseProps & LabelIconProps & FamilyIconProps & StateIcons & {
+import type { BaseProps, FamilyIconProps, LabelIconProps, PinInputMode, PinInputType } from '../interface';
+type Props = BaseProps & LabelIconProps & FamilyIconProps & {
     id?: string;
     label?: string;
     placeholder?: string;
@@ -15,5 +15,5 @@ type Props = BaseProps & LabelIconProps & FamilyIconProps & StateIcons & {
     valid?: boolean;
     onChange?: (value: string) => void;
 };
-export default function DInputPin({ id: idProp, label, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, placeholder, type, disabled, loading, secret, iconFamilyClass, iconFamilyPrefix, characters, invalidIcon: invalidIconProp, validIcon: validIconProp, innerInputMode, hint, invalid, valid, className, style, dataAttributes, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DInputPin({ id: idProp, label, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, placeholder, type, disabled, loading, secret, characters, innerInputMode, hint, invalid, valid, className, style, dataAttributes, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 /// <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" | "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 & {
+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 | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
     value?: string | undefined;
     label?: string | undefined;
     loading?: boolean | undefined;

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

@@ -1,10 +1,10 @@
 import type { FocusEvent, MouseEvent } from 'react';
-import type { BaseProps, ComponentSize, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps, StateIcons } from '../interface';
+import type { BaseProps, ComponentSize, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps } from '../interface';
 export type DefaultOption = {
     value: string | number;
     label: string;
 };
-export type Props<T> = BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & StateIcons & {
+export type Props<T> = BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & {
     id?: string;
     name?: string;
     label?: string;
@@ -24,4 +24,4 @@ export type Props<T> = BaseProps & FamilyIconProps & LabelIconProps & StartIconP
     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, size, floatingLabel, invalid, valid, dataAttributes, 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, hint, value, size, floatingLabel, invalid, valid, dataAttributes, valueExtractor, labelExtractor, onChange, onBlur, onIconStartClick, onIconEndClick, }: Props<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -7,6 +7,9 @@ type Props = BaseProps & PropsWithChildren<{
     horizontal?: boolean;
     horizontalBreakpoint?: BreakpointSize;
 }>;
+/**
+ * @deprecated Please use DListGroup instead
+ */
 declare function DList({ children, className, style, flush, numbered, horizontal, horizontalBreakpoint, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof DList & {
     Item: typeof DListItem;

package/dist/types/components/DList/components/DListItem.d.ts

@@ -6,5 +6,8 @@ type Props = BaseProps & PropsWithChildren<{
     theme?: string;
     onClick?: () => void;
 }>;
+/**
+ * @deprecated Please use DListGroup.Item or DListGroupItem instead
+ */
 export default function DListItem({ children, className, style, active, disabled, theme, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from 'react';
+import DListGroupItem from './components/DListGroupItem';
+import type { BaseProps } from '../interface';
+type Props = BaseProps & PropsWithChildren<{
+    as?: 'ul' | 'ol' | 'div';
+    numbered?: boolean;
+    flush?: boolean;
+    horizontal?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+}>;
+declare function DListGroup({ as, numbered, flush, horizontal, children, className, style, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+declare const _default: typeof DListGroup & {
+    Item: typeof DListGroupItem;
+};
+export default _default;

package/dist/types/components/DListGroup/components/DListGroupItem.d.ts

@@ -0,0 +1,13 @@
+import type { PropsWithChildren } from 'react';
+import type { BaseProps } from '../../interface';
+type Props = BaseProps & PropsWithChildren<{
+    as?: 'li' | 'a' | 'button';
+    action?: boolean;
+    active?: boolean;
+    disabled?: boolean;
+    href?: string;
+    onClick?: () => void;
+    theme?: string;
+}>;
+export default function DListGroupItem({ as, action: actionProp, active, disabled, href, onClick, theme, children, className, style, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,3 @@
+import DListGroup from './DListGroup';
+export { default as DListGroupItem } from './components/DListGroupItem';
+export default DListGroup;

package/dist/types/components/DModal/components/DModalFooter.d.ts

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import type { BaseProps } from '../../interface';
 type Props = BaseProps & PropsWithChildren<{
     actionPlacement?: 'start' | 'end' | 'fill' | 'center';

package/dist/types/components/DOffcanvas/components/DOffcanvasFooter.d.ts

@@ -1,7 +1,7 @@
-import type { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import type { BaseProps } from '../../interface';
 type Props = BaseProps & PropsWithChildren<{
-    footerActionPlacement?: 'start' | 'end' | 'fill';
+    actionPlacement?: 'start' | 'end' | 'fill';
 }>;
-export default function DOffcanvasFooter({ footerActionPlacement, children, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DOffcanvasFooter({ actionPlacement, children, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,14 +1,31 @@
 import type { ResponsivePaginationProps } from 'react-responsive-pagination';
 import { DataAttributes } from '../interface';
-export type Props = {
+export type Props = Omit<ResponsivePaginationProps, 'current'> & {
+    current?: ResponsivePaginationProps['current'];
+    /**
+     * @deprecated its use is changing, use extraClassName instead, originally
+     *  we set className prop to extraClassName from react-responsive-pagination API.
+     *
+     *  now we are trying to expose the entire API of react-responsive-pagination and
+     *  to ensure backward compatibility we are setting the className prop to
+     *  extraClassName from react-responsive-pagination only if extraClassName is not present.
+     */
     className?: ResponsivePaginationProps['extraClassName'];
-    page: ResponsivePaginationProps['current'];
-    onPageChange: ResponsivePaginationProps['onPageChange'];
-    total: ResponsivePaginationProps['total'];
-    previousLabel?: ResponsivePaginationProps['previousLabel'];
-    nextLabel?: ResponsivePaginationProps['nextLabel'];
+    /**
+     * @deprecated use current instead, react-responsive-pagination API.
+     */
+    page?: ResponsivePaginationProps['current'];
+    /**
+     * @deprecated use renderNav instead, react-responsive-pagination API.
+     */
     showArrows?: ResponsivePaginationProps['renderNav'];
-    maxWidth?: ResponsivePaginationProps['maxWidth'];
     dataAttributes?: DataAttributes;
 };
-export default function DPaginator({ className, nextLabel, previousLabel, showArrows, page, onPageChange, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export type ConditionalProps = Props | (Props & {
+    current: number;
+    page?: undefined;
+}) | (Props & {
+    page: number;
+    current?: undefined;
+});
+export default function DPaginator({ className, page, current, showArrows, navClassName, ...props }: ConditionalProps): import("react/jsx-runtime").JSX.Element;

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

@@ -11,5 +11,8 @@ type Props = BaseProps & PropsWithChildren<{
     setOpen?: (open: boolean) => void;
     adjustContentToRender?: boolean;
 }>;
+/**
+ * @deprecated
+ */
 export default function DPopover({ children, renderComponent, open, setOpen, adjustContentToRender, className, style, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -18,5 +18,8 @@ type Props = BaseProps & {
     onClick?: () => void;
     onClickSecondary?: () => void;
 };
+/**
+ * @deprecated
+ */
 export default function DQuickActionButton({ line1, line2, className, actionLinkText, actionLinkTheme, actionIcon, secondaryActionIcon, secondaryActionAriaLabel, actionIconFamilyClass, actionIconFamilyPrefix, representativeImage, representativeIcon, representativeIconTheme, representativeIconHasCircle, representativeIconFamilyClass, representativeIconFamilyPrefix, onClick, onClickSecondary, style, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -10,5 +10,8 @@ type Props = BaseProps & {
     checked?: boolean;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 };
+/**
+ * @deprecated
+ */
 export default function DQuickActionCheck({ id: idProp, name, value, line1, line2, line3, className, style, checked, dataAttributes, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,5 +8,8 @@ type Props = BaseProps & {
     disabled?: boolean;
     onClick?: (isChecked: boolean | undefined) => void;
 };
+/**
+ * @deprecated
+ */
 export default function DQuickActionSwitch({ id: idProp, name, label, hint, checked, disabled, className, style, dataAttributes, onClick, }: 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, 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'> & {
+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'> & {
     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, invalidIcon: invalidIconProp, validIcon: validIconProp, menuWithMaxContent, disabled, clearable, loading, rtl, searchable, multi, components, defaultValue, onIconStartClick, onIconEndClick, dataAttributes, ...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, menuWithMaxContent, disabled, clearable, loading, rtl, searchable, multi, components, defaultValue, onIconStartClick, onIconEndClick, dataAttributes, ...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/DTabs/DTabs.d.ts

@@ -9,7 +9,7 @@ export type DTabOption = {
 export type TabVariant = 'tabs' | 'pills' | 'underline';
 type Props = BaseProps & PropsWithChildren<{
     classNameTab?: string;
-    onChange: (option: DTabOption) => void;
+    onChange?: (option: DTabOption) => void;
     options: Array<DTabOption>;
     defaultSelected: string;
     vertical?: boolean;

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

@@ -21,11 +21,13 @@ export { default as DInputSearch } from './DInputSearch';
 export { default as DInputPassword } from './DInputPassword';
 export { default as DInputCheck } from './DInputCheck';
 export { default as DInputPin } from './DInputPin';
-export { default as DInputSelect, DInputSelectDefaultOption, DInputSelectProps } from './DInputSelect';
+export { default as DInputSelect } from './DInputSelect';
+export type { DInputSelectDefaultOption, DInputSelectProps } from './DInputSelect';
 export { default as DInputSwitch } from './DInputSwitch';
 export { default as DInputRange } from './DInputRange';
 export { default as DSelect } from './DSelect';
 export { default as DList, DListItem, } from './DList';
+export { default as DListGroup, DListGroupItem, } from './DListGroup';
 export { default as DModal, DModalHeader, DModalBody, DModalFooter, } from './DModal';
 export { default as DOffcanvas, DOffcanvasHeader, DOffcanvasBody, DOffcanvasFooter, } from './DOffcanvas';
 export { default as DPaginator } from './DPaginator';
@@ -40,7 +42,8 @@ export { default as DStepper } from './DStepper';
 export { default as DStepperDesktop } from './DStepperDesktop';
 export { default as DStepperMobile } from './DStepperMobile';
 export { default as DTooltip } from './DTooltip';
-export { default as DTabs, useTabContext, DTabOption, DTabContent, } from './DTabs';
+export { default as DTabs, useTabContext } from './DTabs';
+export type { 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/components/interface.d.ts

@@ -48,10 +48,6 @@ export type EndIconProps = {
     iconEndTabIndex?: number;
     iconEndMaterialStyle?: boolean;
 };
-export type StateIcons = {
-    invalidIcon?: string;
-    validIcon?: string;
-};
 export type AlertTheme = 'success' | 'info' | 'warning' | 'danger' | 'primary' | 'secondary';
 export type AlertThemeIconMap = {
     [state in AlertTheme]: string;

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

@@ -1,2 +1,3 @@
 export * from './DContext';
-export { useDPortalContext, PortalProps } from './DPortalContext';
+export { useDPortalContext } from './DPortalContext';
+export type { PortalProps } from './DPortalContext';

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

@@ -5,3 +5,4 @@ export { default as useProvidedRefOrCreate } from './useProvidedRefOrCreate';
 export { default as useStackState } from './useStackState';
 export { default as useDisableBodyScrollEffect } from './useDisableBodyScrollEffect';
 export { default as usePortal } from './usePortal';
+export { default as useItemSelection } from './useItemSelection';

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

@@ -0,0 +1,16 @@
+type Identifiable = {
+    id: string | number;
+};
+type ItemSelection<T extends Identifiable> = {
+    selectedItems: T[];
+    isSelectedItem: (item: T) => boolean;
+    toggleSelectedItem: (item: T) => void;
+    resetSelectedItems: () => void;
+    setSelectedItems: (items: T[]) => void;
+};
+type Props<T extends Identifiable> = {
+    getItemIdentifier?: (item: T) => string | number;
+    previousSelected?: T[];
+};
+export default function useItemSelection<T extends Identifiable>({ getItemIdentifier: getItemIdentifierProp, previousSelected, }?: Props<T>): ItemSelection<T>;
+export {};

package/dist/types/utils/changeQueryString.d.ts

@@ -0,0 +1,4 @@
+export default function changeQueryString(values: Record<string, string | number | null>, { useSearch, pushState, }?: {
+    useSearch?: boolean | undefined;
+    pushState?: boolean | undefined;
+}): string;

package/dist/types/utils/getQueryString.d.ts

@@ -0,0 +1,4 @@
+export default function getQueryString(value: string, config?: {
+    default?: string;
+    useSearch?: boolean;
+}): string | undefined;

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

@@ -1,2 +1,4 @@
-export { default as formatCurrency } from './format-currency';
+export { default as formatCurrency } from './formatCurrency';
 export { default as configureI18n } from './configureI18n';
+export { default as getQueryString } from './getQueryString';
+export { default as changeQueryString } from './changeQueryString';

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.31.0",
+  "version": "1.32.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -47,8 +47,9 @@
     "build:react": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
     "build:react:watch": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
     "build:scss": "node scripts/build-scss.js",
-    "cp": "pnpm cp:bootstrap && pnpm cp:popper",
+    "cp": "pnpm cp:bootstrap && pnpm cp:popper && pnpm cp:bootstrap-icons",
     "cp:bootstrap": "scripts/cp-boostrap.sh",
+    "cp:bootstrap-icons": "scripts/cp-boostrap-icons.sh",
     "cp:popper": "scripts/cp-popper.sh",
     "clean": "rimraf dist-transpiled && rimraf dist",
     "compile": "tsc -p . && rollup -c rollup.config.mjs",
@@ -99,18 +100,17 @@
     "@mdx-js/react": "^2.3.0",
     "@popperjs/core": "^2.11.8",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@storybook/addon-a11y": "^7.5.3",
-    "@storybook/addon-actions": "^7.5.1",
-    "@storybook/addon-essentials": "^7.5.1",
-    "@storybook/addon-interactions": "^7.5.1",
-    "@storybook/addon-links": "^7.5.1",
-    "@storybook/addon-viewport": "^7.5.1",
-    "@storybook/blocks": "^7.5.1",
-    "@storybook/react": "^7.5.1",
-    "@storybook/react-webpack5": "^7.5.1",
-    "@storybook/test-runner": "^0.14.1",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.5.1",
+    "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-actions": "^8.2.9",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-viewport": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
+    "@storybook/theming": "^8.2.9",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.12",
@@ -123,6 +123,7 @@
     "autoprefixer": "^10.4.16",
     "axe-playwright": "^1.2.3",
     "babel-loader": "^9.1.3",
+    "bootstrap-icons": "^1.11.3",
     "eslint": "^8.52.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
@@ -145,7 +146,7 @@
     "rimraf": "^5.0.5",
     "rollup": "^4.1.4",
     "sass": "^1.69.4",
-    "storybook": "^7.5.1",
+    "storybook": "^8.2.9",
     "stylelint": "^15.11.0",
     "stylelint-config-twbs-bootstrap": "^11.0.1",
     "ts-jest": "^29.2.3",
@@ -164,5 +165,5 @@
       "optional": true
     }
   },
-  "gitHead": "215888b4375e8906c7a36f68c92754a4fa7ad53e"
+  "gitHead": "e4238e6e7ba2b467077cb9b1f41c11496007e92d"
 }

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

@@ -120,9 +120,10 @@ $form-feedback-valid-color: var(--#{$prefix}success) !default;
 $form-feedback-invalid-color: var(--#{$prefix}danger) !default;
 
 $form-feedback-icon-valid-color: $form-feedback-valid-color !default;
-$form-feedback-icon-valid: null !default;
+$form-feedback-icon-valid: var(--#{$prefix}form-feedback-icon-valid) !default;
+
 $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
-$form-feedback-icon-invalid: null !default;
+$form-feedback-icon-invalid: var(--#{$prefix}form-feedback-icon-invalid) !default;
 // scss-docs-end form-feedback-variables
 
 // scss-docs-start form-validation-colors

package/src/style/abstracts/variables/_list-group.scss

@@ -14,14 +14,14 @@ $list-group-item-bg-scale: 0% !default;
 $list-group-item-color-scale: 40% !default;
 // fusv-enable
 
-$list-group-hover-bg: var(--#{$prefix}gray-100) !default;
+$list-group-hover-bg: var(--#{$prefix}surface-primary) !default;
 
 $list-group-disabled-color: var(--#{$prefix}gray-600) !default;
 
-$list-group-action-color: var(--#{$prefix}gray-700) !default;
+$list-group-action-color: var(--#{$prefix}gray-900) !default;
 $list-group-action-hover-color: $list-group-action-color !default;
 
-$list-group-action-active-bg: var(--#{$prefix}gray-200) !default;
+$list-group-action-active-bg: var(--#{$prefix}primary-100) !default;
 
 // custom
 $list-group-item-border-radius: 0 !default;

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

@@ -1,35 +1,32 @@
 // Navs
 
 // scss-docs-start nav-variables
+$nav-link-padding-y: $spacer-2 !default;
+$nav-link-padding-x: $spacer-4 !default;
 $nav-link-font-size: var(--#{$prefix}body-font-size) !default;
 $nav-link-font-weight: var(--#{$prefix}fw-normal) !default;
-$nav-link-color: var(--#{$prefix}gray-500) !default;
-$nav-link-hover-color: var(--#{$prefix}secondary-600) !default;
-$nav-link-disabled-color: var(--#{$prefix}gray-200) !default;
+$nav-link-color: var(--#{$prefix}gray-900) !default;
+$nav-link-hover-color: var(--#{$prefix}primary-600) !default;
+$nav-link-hover-bg: var(--#{$prefix}surface-primary) !default;
+$nav-link-disabled-color: var(--#{$prefix}gray-300) !default;
 
 // custom
-$nav-link-border-height: 2px !default;
-$nav-link-line-height: var(--#{$prefix}ref-spacer-6) !default;
-$nav-link-border-border-radius: $border-radius-pill !default;
-$nav-link-border-active-color: var(--#{$prefix}secondary) !default;
 $nav-link-border-active-font-weight: var(--#{$prefix}fw-bold) !default;
-$nav-link-border-active-bg: var(--#{$prefix}secondary) !default;
 // end custom
 
 $nav-tabs-border-radius: var(--#{$prefix}border-radius-sm) !default;
-$nav-tabs-link-active-color: var(--#{$prefix}secondary) !default;
-$nav-tabs-link-active-bg: var(--#{$prefix}secondary-100) !default;
-$nav-tabs-link-active-border-color: var(--#{$prefix}secondary) !default;
+$nav-tabs-link-active-color: var(--#{$prefix}primary) !default;
+$nav-tabs-link-active-bg: var(--#{$prefix}white) !default;
+$nav-tabs-link-active-border-color: var(--#{$prefix}gray-300) !default;
+$nav-tabs-border-color: var(--#{$prefix}gray-300) !default;
 
 // custom
-$nav-nav-padding-x: var(--#{$prefix}ref-spacer-6) !default;
-$nav-nav-padding-y: var(--#{$prefix}ref-spacer-4) !default;
-$nav-nav-gap: var(--#{$prefix}ref-spacer-6) !default;
+$nav-nav-gap: var(--#{$prefix}ref-spacer-0) !default;
 // end custom
 
-$nav-pills-border-radius: 100px !default;
+$nav-pills-border-radius: var(--#{$prefix}border-radius-sm) !default;
 $nav-pills-link-active-color: var(--#{$prefix}white) !default;
-$nav-pills-link-active-bg: var(--#{$prefix}secondary) !default;
+$nav-pills-link-active-bg: var(--#{$prefix}primary) !default;
 // scss-docs-end nav-variables
 
-$nav-underline-link-active-color: var(--#{$prefix}secondary) !default;
+$nav-underline-link-active-color: var(--#{$prefix}primary) !default;