@dynamic-framework/ui-react 1.29.0 → 1.30.0

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

@@ -14,5 +14,5 @@ type Props = BaseProps & PropsWithChildren<{
     iconCloseMaterialStyle?: boolean;
     onClose?: () => void;
 }>;
-export default function DAlert({ theme, icon: iconProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, iconClose: iconCloseProp, iconCloseFamilyClass, iconCloseFamilyPrefix, iconCloseMaterialStyle, showClose, onClose, children, id, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DAlert({ theme, icon: iconProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, iconClose: iconCloseProp, iconCloseFamilyClass, iconCloseFamilyPrefix, iconCloseMaterialStyle, showClose, onClose, children, id, className, style, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,5 +5,5 @@ type Props = BaseProps & {
     image?: string;
     title?: string;
 };
-export default function DAvatar({ id, size, image, title, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DAvatar({ id, size, image, title, className, style, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -11,5 +11,5 @@ type Props = BaseProps & {
     iconFamilyClass?: string;
     iconFamilyPrefix?: string;
 };
-export default function DBadge({ text, soft, theme, id, rounded, className, style, iconStart, iconEnd, iconMaterialStyle, iconFamilyClass, iconFamilyPrefix, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DBadge({ text, soft, theme, id, rounded, className, style, iconStart, iconEnd, iconMaterialStyle, iconFamilyClass, iconFamilyPrefix, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,5 +4,5 @@ import type { BaseProps, FamilyIconProps } from '../interface';
 type Props = BaseProps & FamilyIconProps & PropsWithChildren<Pick<DropzoneOptions, 'accept' | 'minSize' | 'maxSize' | 'maxFiles' | 'onDrop' | 'onDropAccepted' | 'onDropRejected' | 'onFileDialogCancel' | 'onFileDialogOpen' | 'disabled'> & {
     icon?: string;
 }>;
-export default function DBoxFile({ icon: iconProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, disabled, children, className, style, ...dropzoneOptions }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DBoxFile({ icon: iconProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, disabled, children, className, style, dataAttributes, ...dropzoneOptions }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -18,5 +18,5 @@ type Props = BaseProps & StartIconProps & EndIconProps & {
     form?: string;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
-export default function DButton({ theme, size, variant, state, text, ariaLabel, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartMaterialStyle, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndMaterialStyle, value, type, loading, loadingAriaLabel, disabled, stopPropagationEnabled, className, style, form, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DButton({ theme, size, variant, state, text, ariaLabel, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartMaterialStyle, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndMaterialStyle, value, type, loading, loadingAriaLabel, disabled, stopPropagationEnabled, className, style, form, dataAttributes, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -15,5 +15,5 @@ type Props = BaseProps & FamilyIconProps & {
     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 default function DButtonIcon({ id, icon, size, className, variant, state, loadingAriaLabel, iconMaterialStyle, ariaLabel, theme, type, loading, disabled, stopPropagationEnabled, style, iconFamilyClass, iconFamilyPrefix, dataAttributes, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,7 +4,7 @@ import DCardBody from './components/DCardBody';
 import DCardFooter from './components/DCardFooter';
 import type { BaseProps } from '../interface';
 type Props = PropsWithChildren<BaseProps>;
-declare function DCard({ className, style, children, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function DCard({ className, style, children, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof DCard & {
     Header: typeof DCardHeader;
     Body: typeof DCardBody;

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

@@ -11,5 +11,5 @@ type Props = BaseProps & FamilyIconProps & {
     closeAriaLabel?: string;
     onClose?: () => void;
 };
-export default function DChip({ theme, text, icon, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, iconClose: iconCloseProp, iconCloseFamilyClass, iconCloseFamilyPrefix, iconCloseMaterialStyle, showClose, closeAriaLabel, className, style, onClose, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DChip({ theme, text, icon, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, iconClose: iconCloseProp, iconCloseFamilyClass, iconCloseFamilyPrefix, iconCloseMaterialStyle, showClose, closeAriaLabel, className, style, dataAttributes, onClose, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -9,5 +9,5 @@ type Props = BaseProps & FamilyIconProps & PropsWithChildren<{
     iconOpen?: string;
     iconClose?: string;
 }>;
-export default function DCollapse({ id, className, style, Component, hasSeparator, defaultCollapsed, onChange, children, iconOpen: iconOpenProp, iconClose: iconCloseProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DCollapse({ id, className, style, Component, hasSeparator, defaultCollapsed, onChange, children, iconOpen: iconOpenProp, iconClose: iconCloseProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,5 +2,5 @@ import type { BaseProps } from '../interface';
 type Props = BaseProps & {
     value: number;
 };
-export default function DCurrencyText({ value, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DCurrencyText({ value, className, style, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -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, renderCustomHeader: renderCustomHeaderProp, validIcon, invalidIcon, 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, dataAttributes, ...props }: Props<CustomModifierNames, WithRange>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -13,5 +13,5 @@ type Props = BaseProps & {
     familyClass?: string;
     familyPrefix?: string;
 };
-export default function DIconBase({ icon, theme, style, className, size, loading, loadingDuration, hasCircle, circleSize, color, backgroundColor, materialStyle, familyClass, familyPrefix, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DIconBase({ icon, theme, style, className, size, loading, loadingDuration, hasCircle, circleSize, color, backgroundColor, materialStyle, familyClass, familyPrefix, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -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, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
+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 {};

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

@@ -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, 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, dataAttributes, valueExtractor, labelExtractor, onChange, onBlur, onIconStartClick, onIconEndClick, }: Props<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -11,5 +11,5 @@ type Props = BaseProps & {
     readonly?: boolean;
     onChange?: (isChecked: boolean) => void;
 };
-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 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 {};

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

@@ -7,7 +7,7 @@ type Props = BaseProps & PropsWithChildren<{
     horizontal?: boolean;
     horizontalBreakpoint?: BreakpointSize;
 }>;
-declare function DList({ children, className, style, flush, numbered, horizontal, horizontalBreakpoint, }: Props): import("react/jsx-runtime").JSX.Element;
+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/DModal/DModal.d.ts

@@ -12,7 +12,7 @@ type Props = BaseProps & PropsWithChildren<{
     fullScreenFrom?: ModalFullScreenFrom;
     size?: ModalSize;
 }>;
-declare function DModal({ name, className, style, staticBackdrop, scrollable, centered, fullScreen, fullScreenFrom, size, children, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function DModal({ name, className, style, staticBackdrop, scrollable, centered, fullScreen, fullScreenFrom, size, children, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof DModal & {
     Header: typeof DModalHeader;
     Body: typeof DModalBody;

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

@@ -9,7 +9,7 @@ type Props = BaseProps & PropsWithChildren<{
     scrollable?: boolean;
     openFrom?: OffcanvasPositionToggleFrom;
 }>;
-declare function DOffcanvas({ name, className, style, staticBackdrop, scrollable, openFrom, children, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function DOffcanvas({ name, className, style, staticBackdrop, scrollable, openFrom, children, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof DOffcanvas & {
     Header: typeof DOffcanvasHeader;
     Body: typeof DOffcanvasBody;

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

@@ -1,4 +1,5 @@
 import type { ResponsivePaginationProps } from 'react-responsive-pagination';
+import { DataAttributes } from '../interface';
 export type Props = {
     className?: ResponsivePaginationProps['extraClassName'];
     page: ResponsivePaginationProps['current'];
@@ -8,5 +9,6 @@ export type Props = {
     nextLabel?: ResponsivePaginationProps['nextLabel'];
     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;

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

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

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

@@ -6,5 +6,5 @@ type Props = BaseProps & {
     hideCurrentValue?: boolean;
     enableStripedAnimation?: boolean;
 };
-export default function DProgress({ className, style, currentValue, minValue, maxValue, hideCurrentValue, enableStripedAnimation, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DProgress({ className, style, currentValue, minValue, maxValue, hideCurrentValue, enableStripedAnimation, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -18,5 +18,5 @@ type Props = BaseProps & {
     onClick?: () => void;
     onClickSecondary?: () => void;
 };
-export default function DQuickActionButton({ line1, line2, className, actionLinkText, actionLinkTheme, actionIcon, secondaryActionIcon, secondaryActionAriaLabel, actionIconFamilyClass, actionIconFamilyPrefix, representativeImage, representativeIcon, representativeIconTheme, representativeIconHasCircle, representativeIconFamilyClass, representativeIconFamilyPrefix, onClick, onClickSecondary, style, }: Props): import("react/jsx-runtime").JSX.Element;
+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,5 @@ type Props = BaseProps & {
     checked?: boolean;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 };
-export default function DQuickActionCheck({ id: idProp, name, value, line1, line2, line3, className, style, checked, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
+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/DQuickActionSelect/DQuickActionSelect.d.ts

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

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

@@ -8,5 +8,5 @@ type Props = BaseProps & {
     disabled?: boolean;
     onClick?: (isChecked: boolean | undefined) => void;
 };
-export default function DQuickActionSwitch({ id: idProp, name, label, hint, checked, disabled, className, style, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
+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

@@ -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, ...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, 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/DStepper/DStepper.d.ts

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

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

@@ -15,7 +15,7 @@ type Props = BaseProps & PropsWithChildren<{
     vertical?: boolean;
     variant?: TabVariant;
 }>;
-declare function DTabs({ children, defaultSelected, onChange, options, className, classNameTab, style, vertical, variant, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function DTabs({ children, defaultSelected, onChange, options, className, classNameTab, style, vertical, variant, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof DTabs & {
     Tab: typeof DTabContent;
 };

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

@@ -3,7 +3,7 @@ import DToastHeader from './components/DToastHeader';
 import DToastBody from './components/DToastBody';
 import { BaseProps } from '../interface';
 type Props = PropsWithChildren<BaseProps>;
-declare function DToast({ children, className, style }: Props): import("react/jsx-runtime").JSX.Element;
+declare function DToast({ children, className, style, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof DToast & {
     Header: typeof DToastHeader;
     Body: typeof DToastBody;

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

@@ -13,9 +13,11 @@ export type NavegableProps = {
 export type ComponentSize = 'sm' | 'lg';
 export type BreakpointSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export type AvatarSize = 'xs' | 'sm' | 'lg' | 'xl' | 'xxl';
+export type DataAttributes = Record<`data-${string}`, string | number | undefined | null | boolean>;
 export type BaseProps = {
     style?: CSSProperties;
     className?: string;
+    dataAttributes?: DataAttributes;
 };
 export type FamilyIconProps = {
     iconFamilyClass?: string;

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.29.0",
+  "version": "1.30.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -157,5 +157,5 @@
       "optional": true
     }
   },
-  "gitHead": "cf832f6d5da30a387a87354ffb60c2173e3804ea"
+  "gitHead": "974c8400ba9af5aa8c518c309464de0d93ef4271"
 }

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

@@ -1,23 +1,44 @@
 // Accordion
 
 // scss-docs-start accordion-variables
-$accordion-padding-y: var(--#{$prefix}ref-spacer-6) !default;
-$accordion-padding-x: var(--#{$prefix}ref-spacer-4) !default;
-$accordion-color: var(--#{$prefix}gray-700) !default;
-$accordion-bg: var(--#{$prefix}white) !default;
+$accordion-padding-y: var(--#{$prefix}default-accordion-padding-y) !default;
+$accordion-padding-x: var(--#{$prefix}default-accordion-padding-x) !default;
+$accordion-color: var(--#{$prefix}default-accordion-color) !default;
+$accordion-bg: var(--#{$prefix}default-accordion-bg) !default;
+$accordion-border-width: var(--#{$prefix}default-accordion-border-width) !default;
+$accordion-border-color: var(--#{$prefix}default-accordion-border-color) !default;
+$accordion-border-radius: var(--#{$prefix}default-accordion-border-radius) !default;
+$accordion-inner-border-radius: var(--#{$prefix}default-accordion-inner-border-radius) !default;
+
+$accordion-body-padding-y: var(--#{$prefix}default-accordion-body-padding-y) !default;
+$accordion-body-padding-x: var(--#{$prefix}default-accordion-body-padding-x) !default;
 
 // custom
-$accordion-body-padding-top: $accordion-padding-x !default;
-$accordion-button-border-color: var(--#{$prefix}gray-100) !default;
-$accordion-button-font-weight: var(--#{$prefix}fw-bold) !default;
-$accordion-button-font-size: var(--#{$prefix}fs-6) !default;
+$accordion-body-padding-top: var(--#{$prefix}default-accordion-body-padding-top) !default;
+$accordion-button-font-weight: var(--#{$prefix}default-accordion-btn-font-weight) !default;
+$accordion-button-font-size: var(--#{$prefix}default-accordion-btn-font-size) !default;
 // end custom
 
-$accordion-button-active-bg: var(--#{$prefix}secondary-soft) !default;
-$accordion-button-active-color: var(--#{$prefix}body-color) !default;
+$accordion-button-padding-y: var(--#{$prefix}default-accordion-btn-padding-y) !default;
+$accordion-button-padding-x: var(--#{$prefix}default-accordion-btn-padding-x) !default;
+$accordion-button-color: var(--#{$prefix}default-accordion-btn-color) !default;
+$accordion-button-bg: var(--#{$prefix}default-accordion-btn-bg) !default;
+$accordion-transition: var(--#{$prefix}default-accordion-transition) !default;
+$accordion-button-active-bg: var(--#{$prefix}default-accordion-active-bg) !default;
+$accordion-button-active-color: var(--#{$prefix}default-accordion-active-color) !default;
+
+$accordion-button-focus-box-shadow: var(--#{$prefix}default-accordion-btn-focus-box-shadow) !default;
 
+$accordion-icon-width: var(--#{$prefix}default-accordion-btn-icon-width) !default;
 $accordion-icon-color: $body-color !default;
 $accordion-icon-active-color: $primary-text-emphasis !default;
-$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
-$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-icon-transition: var(--#{$prefix}default-accordion-btn-icon-transition) !default;
+$accordion-icon-transform: var(--#{$prefix}default-accordion-btn-icon-transform) !default;
+
+// custom
+$accordion-button-icon: var(--#{$prefix}default-accordion-btn-icon) !default;
+$accordion-button-icon-url: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-active-icon: var(--#{$prefix}default-accordion-btn-active-icon) !default;
+$accordion-button-active-icon-url: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+// end custom
 // scss-docs-end accordion-variables

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

@@ -25,4 +25,6 @@ $btn-active-box-shadow: 0 0 0 transparent !default; // to avoid the none in the
 $btn-border-radius: var(--#{$prefix}border-radius-pill) !default;
 $btn-border-radius-sm: var(--#{$prefix}border-radius-pill) !default;
 $btn-border-radius-lg: var(--#{$prefix}border-radius-pill) !default;
+
+$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 // scss-docs-end btn-variables

package/src/style/base/_badge.scss

@@ -4,7 +4,7 @@
   --#{$prefix}badge-bg: #{$badge-bg};
   --#{$prefix}badge-color: #{$badge-color};
 
-  display: flex;
+  display: inline-flex;
   gap: var(--#{$prefix}badge-gap);
   color: var(--#{$prefix}badge-color);
 

package/src/style/root/_root.scss

@@ -295,6 +295,33 @@
   @each $level, $value in $spacers {
     --#{$prefix}ref-spacer-#{$level}: #{$value};
   }
+
+  --#{$prefix}default-accordion-padding-x: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}default-accordion-padding-y: var(--#{$prefix}ref-spacer-6);
+  --#{$prefix}default-accordion-color: var(--#{$prefix}gray-700);
+  --#{$prefix}default-accordion-bg: var(--#{$prefix}white);
+  --#{$prefix}default-accordion-transition: #{$btn-transition}, border-radius .15s ease;
+  --#{$prefix}default-accordion-border-color: var(--#{$prefix}border-color);
+  --#{$prefix}default-accordion-border-width: var(--#{$prefix}border-width);
+  --#{$prefix}default-accordion-border-radius: var(--#{$prefix}border-radius);
+  --#{$prefix}default-accordion-inner-border-radius: calc(var(--#{$prefix}default-accordion-border-radius) - var(--#{$prefix}default-accordion-border-width));
+  --#{$prefix}default-accordion-btn-padding-x: var(--#{$prefix}default-accordion-padding-x);
+  --#{$prefix}default-accordion-btn-padding-y: var(--#{$prefix}default-accordion-padding-y);
+  --#{$prefix}default-accordion-btn-color: var(--#{$prefix}body-color);
+  --#{$prefix}default-accordion-btn-bg: var(--#{$prefix}default-accordion-bg);
+  --#{$prefix}default-accordion-btn-icon: #{escape-svg($accordion-button-icon-url)};
+  --#{$prefix}default-accordion-btn-icon-width: var(--#{$prefix}ref-spacer-5);
+  --#{$prefix}default-accordion-btn-icon-transform: rotate(-180deg);
+  --#{$prefix}default-accordion-btn-icon-transition: transform .2s ease-in-out;
+  --#{$prefix}default-accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-url)};
+  --#{$prefix}default-accordion-btn-focus-box-shadow: #{$input-btn-focus-box-shadow};
+  --#{$prefix}default-accordion-btn-font-weight: var(--#{$prefix}fw-bold);
+  --#{$prefix}default-accordion-btn-font-size: var(--#{$prefix}fs-6);
+  --#{$prefix}default-accordion-body-padding-top: var(--#{$prefix}default-accordion-padding-y);
+  --#{$prefix}default-accordion-body-padding-x: var(--#{$prefix}default-accordion-padding-x);
+  --#{$prefix}default-accordion-body-padding-y: var(--#{$prefix}default-accordion-padding-y);
+  --#{$prefix}default-accordion-active-color: var(--#{$prefix}body-color);
+  --#{$prefix}default-accordion-active-bg: var(--#{$prefix}secondary-soft);
 }
 
 @if $enable-dark-mode {