@dynamic-framework/ui-react 1.18.0 → 1.19.1

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

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

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

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

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

@@ -1,10 +1,11 @@
-import type { PropsWithChildren } from 'react';
+/// <reference types="react" />
+import { Splide } from '@splidejs/react-splide';
 import type { SplideProps } from '@splidejs/react-splide';
 import DCarouselSlide from './components/DCarouselSlide';
 import type { BaseProps } from '../interface';
-type Props = SplideProps & PropsWithChildren<BaseProps>;
-declare function DCarousel({ children, className, style, options, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-declare const _default: typeof DCarousel & {
+declare const _default: import("react").ForwardRefExoticComponent<SplideProps & BaseProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<Splide>> & {
     Slide: typeof DCarouselSlide;
 };
 export default _default;

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

@@ -1,9 +1,8 @@
 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 & Omit<ReactDatePickerProps<CustomModifierNames, WithRange>, 'selected' | 'selectsRange' | 'locale'> & {
+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'> & {
     date?: string | null;
-    withMonthSelector?: boolean;
     selectsRange?: boolean;
     inputLabel?: string;
     inputAriaLabel?: string;
@@ -14,12 +13,14 @@ type Props<CustomModifierNames extends string = never, WithRange extends boolean
     timeLabel?: string;
     iconHeaderPrevMonth?: string;
     iconHeaderNextMonth?: string;
+    iconHeaderSize?: ComponentSize;
     headerPrevMonthAriaLabel?: string;
     headerNextMonthAriaLabel?: string;
-    headerIconSize?: ComponentSize;
     headerButtonVariant?: ButtonVariant;
     headerButtonTheme?: string;
     locale?: Locale;
+    minYearSelect?: number;
+    maxYearSelect?: number;
 };
-export default function DDatePicker<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined>({ date, selectsRange, withMonthSelector, inputLabel, inputAriaLabel, inputActionAriaLabel, inputId, timeId, timeLabel, iconInput: iconInputProp, iconHeaderPrevMonth: iconHeaderPrevMonthProp, iconHeaderNextMonth: iconHeaderNextMonthProp, iconMaterialStyle: iconMaterialStyleProp, iconFamilyClass, iconFamilyPrefix, headerPrevMonthAriaLabel, headerNextMonthAriaLabel, headerIconSize, headerButtonVariant, headerButtonTheme, locale, className, 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, inputAriaLabel, inputActionAriaLabel, inputId, timeId, timeLabel, iconInput: iconInputProp, iconHeaderPrevMonth: iconHeaderPrevMonthProp, iconHeaderNextMonth: iconHeaderNextMonthProp, iconMaterialStyle: iconMaterialStyleProp, iconFamilyClass, iconFamilyPrefix, minYearSelect, maxYearSelect, iconHeaderSize, headerPrevMonthAriaLabel, headerNextMonthAriaLabel, headerButtonVariant, headerButtonTheme, locale, className, formatWeekDay: formatWeekDayProp, style, ...props }: Props<CustomModifierNames, WithRange>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,14 +3,13 @@ import DButton from '../DButton';
 import type { BaseProps, ButtonVariant, ComponentSize, FamilyIconProps } from '../interface';
 type Props = BaseProps & FamilyIconProps & {
     locale?: Locale;
-    monthDate: Date;
+    date: Date;
     decreaseMonth: () => void;
     increaseMonth: () => void;
     changeMonth: (monthNumber: number) => void;
     changeYear: (yearNumber: number) => void;
     prevMonthButtonDisabled: boolean;
     nextMonthButtonDisabled: boolean;
-    withMonthSelector: boolean;
     iconPrevMonth: string;
     iconNextMonth: string;
     prevMonthAriaLabel?: string;
@@ -18,6 +17,8 @@ type Props = BaseProps & FamilyIconProps & {
     iconSize: ComponentSize;
     buttonVariant: ButtonVariant;
     buttonTheme: string;
-} & Omit<ComponentProps<typeof DButton>, 'iconStart' | 'onMClick' | 'isDisabled'>;
-export default function DDatePickerHeader({ monthDate, changeMonth, changeYear, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, withMonthSelector, iconPrevMonth, iconNextMonth, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, prevMonthAriaLabel, nextMonthAriaLabel, iconSize, buttonVariant, buttonTheme, locale, style, className, }: Props): import("react/jsx-runtime").JSX.Element;
+    minYearSelect: number;
+    maxYearSelect: number;
+} & Omit<ComponentProps<typeof DButton>, 'iconStart' | 'onClick' | 'disabled'>;
+export default function DDatePickerHeader({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, iconPrevMonth, iconNextMonth, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, prevMonthAriaLabel, nextMonthAriaLabel, iconSize, buttonVariant, buttonTheme, locale, style, className, minYearSelect, maxYearSelect, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -1,12 +1,14 @@
 import type { CSSProperties } from 'react';
-import type { ToastPosition } from 'react-toastify';
-import type { BaseProps } from '../interface';
-type Props = BaseProps & {
+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': any;
-        [index: string]: any;
+        '--toastify-toast-width': string | number;
+        [index: string]: string | number;
     };
-    position?: ToastPosition;
+    transition?: 'slide' | 'flip' | 'bounce' | 'zoom';
 };
-export default function DToastContainer({ style, position, className, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DToastContainer({ style, className, closeOnClick, position, autoClose, stacked, transition, containerId, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,3 +1,3 @@
 import DToastContainer from './DToastContainer';
-export { default as useToast } from './useToast';
+export { default as useDToast } from './useDToast';
 export default DToastContainer;

package/dist/types/components/DToastContainer/{useToast.d.ts → useDToast.d.ts}

@@ -2,12 +2,15 @@ import type { ToastPosition } from 'react-toastify';
 import type { AlertType } from '../interface';
 export type ToastConfig = {
     type?: AlertType;
+    icon?: string;
+    iconClose?: string;
     showClose?: boolean;
     position?: ToastPosition;
     autoClose?: number | false;
-    icon?: string;
-    iconClose?: string;
+    stacked?: boolean;
+    containerId?: string;
+    transition?: 'slide' | 'flip' | 'bounce' | 'zoom';
 };
-export default function useToast(): {
-    toast: (message: string, { position, type, showClose, autoClose, icon, iconClose, }?: ToastConfig) => void;
+export default function useDToast(): {
+    toast: (message: string, { icon, iconClose, type, showClose, transition, ...rest }: ToastConfig) => void;
 };

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

@@ -38,4 +38,4 @@ 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 DToastContainer, useToast, } from './DToastContainer';
+export { default as DToastContainer, useDToast, } from './DToastContainer';

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

@@ -12,6 +12,7 @@ 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 BaseProps = {
     style?: CSSProperties;
     className?: string;

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

@@ -1,4 +1,5 @@
 import type { PropsWithChildren } from 'react';
+import { PortalContextProps } from './DPortalContext';
 import type { AlertTypeIconMap } from '../components/interface';
 type CurrencyProps = {
     symbol: string;
@@ -32,16 +33,16 @@ type IconMapProps = {
         increase: string;
     };
 };
-type Props = {
+type Props<T extends Record<string, unknown>> = {
     language: string;
     currency: CurrencyProps;
     icon: IconProps;
     iconMap: IconMapProps;
+} & PortalContextProps<T>;
+type Context<T extends Record<string, unknown>> = Props<T> & {
+    setContext: (value: Partial<Props<T>>) => void;
 };
-type Context = Props & {
-    setContext: (value: Partial<Props>) => void;
-};
-export declare const DContext: import("react").Context<Partial<Context>>;
-export declare function DContextProvider({ language, currency, icon, iconMap, children, }: PropsWithChildren<Partial<Props>>): import("react/jsx-runtime").JSX.Element;
-export declare function useDContext(): Context;
+export declare const DContext: import("react").Context<Partial<Context<any>>>;
+export declare function DContextProvider<T extends Record<string, unknown>>({ language, currency, icon, iconMap, portalName, availablePortals, children, }: PropsWithChildren<Partial<Props<T>>>): import("react/jsx-runtime").JSX.Element;
+export declare function useDContext<T extends Record<string, unknown>>(): Context<T>;
 export {};

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

@@ -0,0 +1,29 @@
+import type { PropsWithChildren, FC } from 'react';
+type PortalComponent<P = any> = FC<PortalProps<P>>;
+type PortalAvailableList<T extends Record<string, unknown>> = {
+    [K in keyof T]: PortalComponent<T[K]>;
+};
+export type PortalContextProps<T extends Record<string, unknown>> = PropsWithChildren<{
+    portalName: string;
+    availablePortals?: PortalAvailableList<T>;
+}>;
+type PortalStackItem<N extends string = string, P = any> = {
+    name: N;
+    Component: PortalComponent<P>;
+    payload: P;
+};
+type OpenPortalFunction<P = unknown> = (name: string, payload: P) => void;
+type ClosePortalFunction = () => void;
+export type PortalContextType<T extends Record<string, unknown>> = {
+    stack: PortalStackItem<string, T[keyof T]>[];
+    openPortal: OpenPortalFunction<T[keyof T]>;
+    closePortal: ClosePortalFunction;
+};
+export type PortalProps<P = unknown> = {
+    name: string;
+    payload: P;
+};
+export declare const DPortalContext: import("react").Context<PortalContextType<any> | undefined>;
+export declare function DPortalContextProvider<T extends Record<string, unknown>>({ portalName, children, availablePortals, }: PortalContextProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function useDPortalContext<T extends Record<string, unknown>>(): PortalContextType<T>;
+export {};

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

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

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

@@ -6,7 +6,7 @@
  * @returns The list and controls to modify the stack
  * @see https://react-hooks.org/docs/useStackState
  */
-export default function useStackState<T>(initialList: T[]): [
+export default function useStackState<T>(initialList?: T[]): [
     T[],
     {
         clear: () => void;

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.18.0",
+  "version": "1.19.1",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -83,7 +83,7 @@
     "react-dropzone": "^14.2.3",
     "react-responsive-pagination": "^2.4.1",
     "react-select": "^5.8.0",
-    "react-toastify": "^9.1.3"
+    "react-toastify": "^10.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
@@ -149,5 +149,5 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^13.3.1"
   },
-  "gitHead": "42b36587373ddc1a2ccf2c120c0bf17285bdfd16"
+  "gitHead": "a8a398fe7b2718df5329a1f1ca6d38aa36b8ef02"
 }

package/src/style/abstracts/_mixins.scss

@@ -1,126 +1,142 @@
-// scss-docs-start df-btn-variant-mixin
-@mixin df-button-variant(
+// scss-docs-start df-button-variant-variables-mixin
+@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}-600),
+  $focus-color: var(--#{$prefix}#{$color-name}-500),
   $active-color: var(--#{$prefix}#{$color-name}-700),
-  $disabled-color: var(--#{$prefix}#{$color-name}-100),
   $default-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-500)),
   $hover-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-600)),
   $focus-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-600)),
   $active-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-700)),
-  $disabled-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-100)),
+  $disabled-opacity: .5
 ) {
-  --#{$prefix}btn-color: #{$default-text-color};
-  --#{$prefix}btn-bg: #{$default-color};
-  --#{$prefix}btn-border-color: #{$default-color};
-
-  --#{$prefix}btn-hover-color: #{$hover-text-color};
-  --#{$prefix}btn-hover-bg: #{$hover-color};
-  --#{$prefix}btn-hover-border-color: #{$hover-color};
-
-  --#{$prefix}btn-focus-color: #{$focus-text-color};
-  --#{$prefix}btn-focus-bg: #{$focus-color};
-  --#{$prefix}btn-focus-border-color: #{$focus-color};
-
-  --#{$prefix}btn-active-color: #{$active-text-color};
-  --#{$prefix}btn-active-bg: #{$active-color};
-  --#{$prefix}btn-active-border-color: #{$active-color};
-
-  --#{$prefix}btn-disabled-color: #{$disabled-text-color};
-  --#{$prefix}btn-disabled-bg: #{$disabled-color};
-  --#{$prefix}btn-disabled-border-color: #{$disabled-color};
-
-  &.loading {
-    --#{$prefix}btn-disabled-opacity: 1;
-    --#{$prefix}btn-disabled-bg: #{$active-color};
-    --#{$prefix}btn-disabled-border-color: #{$active-color};
-    --#{$prefix}btn-disabled-color: #{$hover-text-color};
-  }
+  --#{$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}-hover-color: #{$hover-text-color};
+  --#{$prefix}btn-#{$color-name}-hover-bg: #{$hover-color};
+  --#{$prefix}btn-#{$color-name}-hover-border-color: #{$hover-color};
+
+  --#{$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}-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}-disabled-color: #{$default-text-color};
+  --#{$prefix}btn-#{$color-name}-disabled-bg: #{$default-color};
+  --#{$prefix}btn-#{$color-name}-disabled-border-color: #{$default-color};
+  --#{$prefix}btn-#{$color-name}-disabled-opacity: #{$disabled-opacity};
 }
-// scss-docs-end df-btn-variant-mixin
+// scss-docs-end df-button-variant-variables-mixin
 
-
-// scss-docs-start df-btn-outline-variant-mixin
-@mixin df-button-outline-variant(
+// scss-docs-start df-btn-outline-variant-variables-mixin
+@mixin df-button-outline-variant-variables(
   $color-name,
   $default-color: var(--#{$prefix}#{$color-name}-500),
   $hover-bg-color: var(--#{$prefix}#{$color-name}-100),
-  $focus-bg-color: var(--#{$prefix}#{$color-name}-100),
-  $active-bg-color: var(--#{$prefix}#{$color-name}-200),
-  $disabled-color: var(--#{$prefix}#{$color-name}-100),
-  $disabled-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$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: .5
 ) {
-  --#{$prefix}btn-bg: transparent;
-  --#{$prefix}btn-border-color: #{$default-color};
-  --#{$prefix}btn-color: #{$default-color};
-
-  --#{$prefix}btn-hover-bg: #{$hover-bg-color};
-  --#{$prefix}btn-hover-border-color: #{$default-color};
-  --#{$prefix}btn-hover-color: #{$default-color};
-
-  --#{$prefix}btn-focus-bg: #{$focus-bg-color};
-  --#{$prefix}btn-focus-border-color: #{$default-color};
-  --#{$prefix}btn-focus-color: #{$default-color};
-
-  --#{$prefix}btn-active-bg: #{$active-bg-color};
-  --#{$prefix}btn-active-border-color: #{$default-color};
-  --#{$prefix}btn-active-color: #{$default-color};
-
-  --#{$prefix}btn-disabled-bg: transparent;
-  --#{$prefix}btn-disabled-border-color: #{$disabled-color};
-  --#{$prefix}btn-disabled-color: #{$disabled-text-color};
-
-  --#{$prefix}gradient: none;
-
-  &.loading {
-    --#{$prefix}btn-disabled-opacity: 1;
-    --#{$prefix}btn-disabled-bg: transparent;
-    --#{$prefix}btn-disabled-border-color: #{$default-color};
-    --#{$prefix}btn-disabled-color: #{$default-color};
-  }
+  --#{$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}-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}-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}-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}-disabled-color: #{$default-color};
+  --#{$prefix}btn-outline-#{$color-name}-disabled-bg: transparent;
+  --#{$prefix}btn-outline-#{$color-name}-disabled-border-color: #{$default-color};
+  --#{$prefix}btn-outline-#{$color-name}-disabled-opacity: #{$disabled-opacity};
 }
-// scss-docs-end df-btn-outline-variant-mixin
+// scss-docs-end df-btn-outline-variant-variables-mixin
 
-// scss-docs-start df-btn-link-variant-mixin
-@mixin df-button-link-variant(
+// scss-docs-start df-btn-link-variant-variables-mixin
+@mixin df-button-link-variant-variables(
   $color-name,
-  $default-color: var(--#{$prefix}#{$color-name}-600),
+  $default-color: var(--#{$prefix}#{$color-name}-500),
   $hover-bg-color: var(--#{$prefix}#{$color-name}-100),
-  $active-bg-color: var(--#{$prefix}#{$color-name}-200),
-  $disable-color: var(--#{$prefix}#{$color-name}-300),
+  $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),
+  $disabled-opacity: .5
 ) {
-  --#{$prefix}btn-bg: transparent;
-  --#{$prefix}btn-border-color: transparent;
-  --#{$prefix}btn-color: #{$default-color};
+  --#{$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}-hover-bg: #{$hover-bg-color};
+  --#{$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}-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}-disabled-bg: transparent;
+  --#{$prefix}btn-link-#{$color-name}-disabled-border-color: transparent;
+  --#{$prefix}btn-link-#{$color-name}-disabled-color: #{$default-color};
+  --#{$prefix}btn-link-#{$color-name}-disabled-opacity: #{$disabled-opacity};
+}
+// scss-docs-end df-btn-link-variant-variables-mixin
+
+// scss-docs-start df-btn-variant-mixin
+@mixin df-button-variant-mapper($color-name, $variant-name: "") {
+  @if $variant-name != "" {
+    $variant-name: "#{$variant-name}-";
+  }
 
-  --#{$prefix}btn-hover-bg: #{$hover-bg-color};
-  --#{$prefix}btn-hover-border-color: transparent;
-  --#{$prefix}btn-hover-color: #{$default-color};
+  --#{$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-focus-bg: transparent;
-  --#{$prefix}btn-focus-border-color: transparent;
-  --#{$prefix}btn-focus-color: #{$default-color};
+  --#{$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);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-hover-border-color);
 
-  --#{$prefix}btn-active-bg: #{$active-bg-color};
-  --#{$prefix}btn-active-border-color: transparent;
-  --#{$prefix}btn-active-color: #{$default-color};
+  --#{$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-disabled-bg: transparent;
-  --#{$prefix}btn-disabled-border-color: transparent;
-  --#{$prefix}btn-disabled-color: #{$disable-color};
+  --#{$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-focus-outline-offset: 0;
+  --#{$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);
+  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-border-color);
+  --#{$prefix}btn-disabled-opacity: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-opacity);
 
   &.loading {
-    --#{$prefix}btn-disabled-opacity: 1;
-    --#{$prefix}btn-disabled-bg: transparent;
-    --#{$prefix}btn-disabled-border-color: transparent;
-    --#{$prefix}btn-disabled-color: #{$default-color};
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-color);
+    --#{$prefix}btn-disabled-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-bg);
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-border-color);
   }
 }
-// scss-docs-end df-btn-link-variant-mixin
+// scss-docs-end df-btn-variant-mixin
 
 // scss-docs-start df-table-variant
 @mixin df-table-variant($state, $background) {

package/src/style/abstracts/_utilities.scss

@@ -55,6 +55,12 @@ $utilities: map-merge(
         )
       )
     ),
+    "font-weight": map-merge(
+      map-get($utilities, "font-weight"),
+      (
+        responsive: true
+      )
+    ),
     "border-color": map-merge(
       map-get($utilities, "border-color"),
       (
@@ -76,9 +82,48 @@ $utilities: map-merge(
         100: 1
       )
     ),
+    "text-truncate": (
+      responsive: true,
+      class: "text-truncate",
+      css-var: true,
+      values: (
+        1: 1,
+        2: 2,
+        3: 3,
+        4: 4,
+        5: 6,
+        6: 6
+      )
+    ),
     "cursor": (
       property: cursor,
-      values: $cursors,
+      values: $cursors
+    ),
+    "font-size": map-merge(
+      map-get($utilities, "font-size"),
+      (
+        responsive: true,
+        rfs: false
+      )
+    ),
+    "display-font-size": (
+      class: "display",
+      responsive: true,
+      css-var: true,
+      css-variable-name: display-font-size,
+      values: $display-font-sizes
+    ),
+    "height": map-merge(
+      map-get($utilities, "height"),
+      (
+        responsive: true,
+      )
+    ),
+    "width": map-merge(
+      map-get($utilities, "width"),
+      (
+        responsive: true,
+      )
     ),
   )
 );

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

@@ -57,6 +57,7 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
 
 @import "buttons";
 @import "forms";
+@import "z-index";
 @import "navs";
 @import "navbar";
 @import "dropdowns";
@@ -64,6 +65,7 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
 
 @import "cards";
 @import "accordion";
+@import "tooltip";
 @import "badges";
 @import "modals";
 @import "alerts";

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

@@ -9,8 +9,8 @@ $accordion-bg: var(--#{$prefix}white) !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}ref-fw-bold) !default;
-$accordion-button-font-size: var(--#{$prefix}ref-fs-6) !default;
+$accordion-button-font-weight: var(--#{$prefix}fw-bold) !default;
+$accordion-button-font-size: var(--#{$prefix}fs-6) !default;
 // end custom
 
 $accordion-button-active-bg: var(--#{$prefix}secondary-soft) !default;

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

@@ -5,7 +5,7 @@
 // scss-docs-start alert-variables
 $alert-padding-x: $spacer-6 !default;
 $alert-border-radius: var(--#{$prefix}border-radius-sm) !default;
-$alert-link-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$alert-link-font-weight: var(--#{$prefix}fw-bold) !default;
 // scss-docs-end alert-variables
 
 // fusv-disable

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

@@ -4,4 +4,6 @@
 $card-border-width: 0px !default; // stylelint-disable-line length-zero-no-unit
 $card-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
 $card-bg: var(--#{$prefix}white) !default;
+$card-spacer-y: $spacer-6 !default;
+$card-spacer-x: $spacer-6 !default;
 // scss-docs-end card-variables

package/src/style/abstracts/variables/_collapse-icon-text.scss

@@ -1,3 +1,3 @@
 $collapse-icon-text-header-gap: var(--#{$prefix}ref-spacer-4) !default;
-$collapse-icon-text-header-font-size: var(--#{$prefix}ref-fs-6) !default;
-$collapse-icon-text-header-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$collapse-icon-text-header-font-size: var(--#{$prefix}fs-6) !default;
+$collapse-icon-text-header-font-weight: var(--#{$prefix}fw-bold) !default;