@dynamic-framework/ui-react 2.1.1 → 2.3.0

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

@@ -1,8 +1,9 @@
 import type { BaseProps, ComponentColor } from '../interface';
+import { ResponsiveProp } from '../../hooks/useResponsiveProp';
 type Props = BaseProps & {
     text?: string;
     soft?: boolean;
-    size?: 'sm' | 'lg';
+    size?: string | ResponsiveProp;
     rounded?: boolean;
     color?: ComponentColor;
     id?: string;
@@ -12,5 +13,5 @@ type Props = BaseProps & {
     iconFamilyClass?: string;
     iconFamilyPrefix?: string;
 };
-export default function DBadge({ text, soft, color, id, rounded, className, size, style, iconStart, iconEnd, iconMaterialStyle, iconFamilyClass, iconFamilyPrefix, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DBadge(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,13 +1,17 @@
 import { type ButtonHTMLAttributes } from 'react';
-import type { BaseProps, ButtonVariant, ComponentColor, ComponentSize, EndIconProps, StartIconProps } from '../interface';
+import { ResponsiveProp } from '../../hooks/useResponsiveProp';
+import type { BaseProps, ButtonVariant, ComponentColor, EndIconProps, StartIconProps } from '../interface';
 interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, BaseProps, StartIconProps, EndIconProps {
+    href?: string;
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
     color?: ComponentColor;
-    size?: ComponentSize;
+    size?: string | ResponsiveProp;
     variant?: ButtonVariant;
     text?: string;
     loading?: boolean;
     loadingText?: string;
     loadingAriaLabel?: string;
 }
-declare const DButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement>>;
+declare const DButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export default DButton;

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

@@ -1,19 +1,18 @@
 import type { MouseEvent } from 'react';
-import type { BaseProps, ButtonType, ButtonVariant, ComponentColor, ComponentSize, FamilyIconProps, InputState } from '../interface';
-type Props = BaseProps & FamilyIconProps & {
-    id?: string;
+import type { BaseProps, ButtonVariant, ComponentColor, ComponentSize, FamilyIconProps, InputState } from '../interface';
+type Props = BaseProps & FamilyIconProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     icon: string;
     size?: ComponentSize;
     variant?: ButtonVariant;
     color?: ComponentColor;
     state?: InputState;
-    type?: ButtonType;
     loading?: boolean;
     loadingAriaLabel?: string;
-    ariaLabel?: string;
     stopPropagationEnabled?: boolean;
-    disabled?: boolean;
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    href?: string;
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
+    onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
 };
-export default function DButtonIcon({ id, icon, size, className, variant, state, loadingAriaLabel, iconMaterialStyle, ariaLabel, color, type, loading, disabled, stopPropagationEnabled, style, iconFamilyClass, iconFamilyPrefix, dataAttributes, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DButtonIcon({ id, icon, size, className, variant, state, loadingAriaLabel, iconMaterialStyle, disabled, color, loading, href, target, rel, stopPropagationEnabled, style, iconFamilyClass, iconFamilyPrefix, dataAttributes, onClick, 'aria-label': ariaLabelProp, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,7 +3,6 @@ import type { BaseProps, FamilyIconProps } from '../interface';
 type Props = BaseProps & FamilyIconProps & PropsWithChildren<{
     id?: string;
     Component: ReactElement<unknown> | ReactNode;
-    hasSeparator?: boolean;
     /**
      * Reactive prop for controlled and uncontrolled mode.
      *
@@ -15,5 +14,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, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DCollapse({ id, className, style, Component, defaultCollapsed, onChange, children, iconOpen: iconOpenProp, iconClose: iconCloseProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
+type CardBrand = 'visa' | 'mastercard';
 type Props = {
     className?: string;
-    brand?: string;
+    brand?: CardBrand;
     isChipVisible?: boolean;
     name?: string;
     number?: string;

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+type Renderable = ReactNode | (() => ReactNode);
+type DDataStateWrapperProps<T> = {
+    isLoading: boolean;
+    isError: boolean;
+    data: T[] | undefined;
+    onRetry?: () => void;
+    renderLoading?: Renderable;
+    renderEmpty?: Renderable;
+    renderError?: Renderable;
+    children: (data: T[]) => ReactNode;
+};
+export default function DDataStateWrapper<T>({ isLoading, isError, data, onRetry, renderLoading, renderEmpty, renderError, children, }: DDataStateWrapperProps<T>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/dist/types/components/DDataStateWrapper/components/EmptyState.d.ts

@@ -0,0 +1,8 @@
+interface EmptyStateProps {
+    message?: string;
+    icon?: string;
+    actionText?: string;
+    onAction?: () => void;
+}
+export declare function EmptyState({ message, icon, actionText, onAction, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DDataStateWrapper/components/ErrorState.d.ts

@@ -0,0 +1,8 @@
+type ErrorStateProps = {
+    message?: string;
+    onRetry?: () => void;
+    retryMessage?: string;
+    color?: 'danger' | 'warning';
+};
+export declare function ErrorState({ message, onRetry, retryMessage, color, }: ErrorStateProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DDataStateWrapper/components/LoadingState.d.ts

@@ -0,0 +1,6 @@
+type LoadingStateProps = {
+    ariaLabel?: string;
+    className?: string;
+};
+export declare function LoadingState({ ariaLabel, className }: LoadingStateProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -24,6 +24,7 @@ type Props = BaseProps & FamilyIconProps & Omit<DatePickerProps, 'showMonthDropd
     showHeaderSelectors?: boolean;
     formatHeaderDate?: string;
     locale?: Locale;
+    ariaLabelInputTime?: string;
 };
-export default function DDatePicker({ inputLabel, inputHint, inputAriaLabel, inputActionAriaLabel, inputId, timeId, timeInputLabel, minYearSelect, maxYearSelect, iconHeaderSize, iconMaterialStyle, iconInput, headerPrevMonthAriaLabel, headerNextMonthAriaLabel, invalid, valid, renderCustomHeader: renderCustomHeaderProp, className, dateFormatCalendar, style, dataAttributes, placeholder, showHeaderSelectors, formatHeaderDate, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DDatePicker({ inputLabel, inputHint, inputAriaLabel, ariaLabelInputTime, inputActionAriaLabel, inputId, timeId, timeInputLabel, minYearSelect, maxYearSelect, iconHeaderSize, iconMaterialStyle, iconInput, headerPrevMonthAriaLabel, headerNextMonthAriaLabel, invalid, valid, renderCustomHeader: renderCustomHeaderProp, className, dateFormatCalendar, style, dataAttributes, placeholder, showHeaderSelectors, formatHeaderDate, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,5 @@
-type Props = {
-    id?: string;
-    value?: string;
-    onChange?: (time: string) => void;
-};
-export default function DDatePickerTime({ value, onChange, id, }: Props): import("react/jsx-runtime").JSX.Element;
+import { ComponentProps } from 'react';
+import DInput from '../../DInput';
+type Props = Pick<ComponentProps<typeof DInput>, 'id' | 'value' | 'onChange' | 'aria-label'>;
+export default function DDatePickerTime({ ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,11 @@
+import { type PropsWithChildren, type ReactNode, type ErrorInfo } from 'react';
+import { FallbackProps, useErrorBoundary, getErrorMessage } from 'react-error-boundary';
+export { type FallbackProps, useErrorBoundary, getErrorMessage, };
+export type DErrorBoundaryProps = PropsWithChildren<{
+    name?: string;
+    fallback?: (props: FallbackProps) => ReactNode;
+    resetKeys?: unknown[];
+    onReset?: () => void;
+    onError?: (error: unknown, info: ErrorInfo) => void;
+}>;
+export default function DErrorBoundary({ name, fallback, resetKeys, onReset, onError, children, }: DErrorBoundaryProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DErrorBoundary/components/DefaultErrorBoundary.d.ts

@@ -0,0 +1,6 @@
+import { FallbackProps } from 'react-error-boundary';
+type Props = {
+    resetErrorBoundary: FallbackProps['resetErrorBoundary'];
+};
+export default function DefaultErrorBoundary({ resetErrorBoundary }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,3 @@
+import DErrorBoundary, { type FallbackProps, useErrorBoundary, getErrorMessage } from './DErrorBoundary';
+export { type FallbackProps, useErrorBoundary, getErrorMessage, };
+export default DErrorBoundary;

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

@@ -14,6 +14,7 @@ type Props = BaseProps & FamilyIconProps & {
     invalid?: boolean;
     valid?: boolean;
     onChange?: (value: string) => void;
+    'aria-label'?: string;
 };
-export default function DInputPin({ id: idProp, label, placeholder, type, disabled, loading, secret, characters, innerInputMode, hint, invalid, valid, className, style, dataAttributes, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DInputPin({ id: idProp, label, placeholder, type, disabled, loading, secret, characters, innerInputMode, hint, invalid, valid, className, style, dataAttributes, onChange, 'aria-label': ariaLabel, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,12 +1,7 @@
-import type { PropsWithChildren, ReactElement } from 'react';
+import type { ReactElement, PropsWithChildren } from 'react';
 import type { BaseProps } from '../interface';
 type Props = BaseProps & PropsWithChildren<{
-    /**
-     * Component to render in call to action
-     * @param {boolean} open
-     * @returns {React.ReactElement}
-     */
-    renderComponent: (open: boolean) => ReactElement<unknown>;
+    renderComponent: (open: boolean) => ReactElement;
     open: boolean;
     setOpen?: (open: boolean) => void;
     adjustContentToRender?: boolean;

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

@@ -13,6 +13,7 @@ import DSelectPlaceholder from './components/DSelectPlaceholder';
 import type { BaseProps, EndIconProps, FamilyIconProps, StartIconProps } from '../interface';
 type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = BaseProps & FamilyIconProps & StartIconProps & EndIconProps & Omit<SelectProps<Option, IsMulti, Group>, 'isDisabled' | 'isClearable' | 'isLoading' | 'isRtl' | 'isSearchable' | 'isMulti'> & {
     label?: string;
+    ariaLabel?: string;
     hint?: string;
     invalid?: boolean;
     valid?: boolean;
@@ -27,7 +28,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: idProp, className, style, label, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent, disabled, clearable, loading, floatingLabel, rtl, searchable, multi, components, defaultValue, placeholder, 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: idProp, className, style, label, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent, disabled, clearable, loading, floatingLabel, rtl, searchable, multi, components, defaultValue, placeholder, onIconStartClick, onIconEndClick, dataAttributes, ariaLabel, ...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/DSelect/components/DSelectOptionCheck.d.ts

@@ -1,2 +1,2 @@
 import type { GroupBase, OptionProps } from 'react-select';
-export default function DSelectOptionCheck<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ innerProps, children, isSelected, ...props }: OptionProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
+export default function DSelectOptionCheck<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ children, isSelected, ...props }: OptionProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

@@ -48,3 +48,5 @@ export { default as DCreditCard } from './DCreditCard';
 export { default as DDropdown } from './DDropdown';
 export { default as DVoucher } from './DVoucher';
 export { default as DOtp } from './DOtp';
+export { default as DErrorBoundary, useErrorBoundary, type FallbackProps, getErrorMessage, } from './DErrorBoundary';
+export { default as DDataStateWrapper } from './DDataStateWrapper';

package/package.json

@@ -3,9 +3,9 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.1.1",
+  "version": "2.3.0",
   "description": "React Dynamic Framework",
-  "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
+  "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/LICENSE.md",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dynamic-framework/dynamic-ui.git"
@@ -75,7 +75,8 @@
     "lint-staged": "lint-staged",
     "prepare": "husky",
     "commitlint": "commitlint --edit",
-    "verify": "node scripts/verify.js"
+    "verify": "node scripts/verify.js",
+    "axe": "npx tsx scripts/generate-a11y-report.ts"
   },
   "engines": {
     "node": ">=22.0.0"
@@ -103,24 +104,22 @@
     "jspdf": "^4.0.0",
     "lucide-react": "^0.553.0",
     "react-datepicker": "~8.3.0",
+    "react-error-boundary": "^6.1.0",
     "react-international-phone": "~4.6.0",
     "react-responsive-pagination": "~2.11.3",
     "react-select": "~5.10.2"
   },
   "devDependencies": {
-    "@babel/core": "~7.23.2",
-    "@babel/preset-env": "~7.23.2",
-    "@babel/preset-react": "~7.22.15",
-    "@babel/preset-typescript": "~7.23.2",
+    "@axe-core/playwright": "^4.11.1",
     "@commitlint/cli": "~19.3.0",
     "@commitlint/config-conventional": "~19.2.2",
     "@mdx-js/react": "~2.3.0",
     "@popperjs/core": "~2.11.8",
     "@rollup/plugin-node-resolve": "^15.3.0",
-    "@storybook/addon-a11y": "~9.0.17",
-    "@storybook/addon-docs": "~9.0.17",
-    "@storybook/addon-links": "~9.0.17",
-    "@storybook/react-vite": "~9.0.17",
+    "@storybook/addon-a11y": "~10.2.8",
+    "@storybook/addon-docs": "~10.2.8",
+    "@storybook/addon-links": "~10.2.8",
+    "@storybook/react-vite": "~10.2.8",
     "@testing-library/jest-dom": "~6.6.3",
     "@testing-library/react": "~16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -134,8 +133,6 @@
     "@vitejs/plugin-react": "~4.7.0",
     "autoprefixer": "~10.4.16",
     "axe-playwright": "~1.2.3",
-    "babel-jest": "^29.7.0",
-    "babel-loader": "~9.1.3",
     "conventional-changelog-conventionalcommits": "~6.1.0",
     "eslint": "~8.52.0",
     "eslint-config-airbnb": "~19.0.4",
@@ -146,14 +143,13 @@
     "eslint-plugin-react-hooks": "~4.6.0",
     "formik": "~2.4.8",
     "framer-motion": "^12.23.24",
-    "glob": "^11.1.0",
     "husky": "~9.1.7",
     "i18next": "~25.6.1",
-    "jest": "~29.7.0",
-    "jest-axe": "~8.0.0",
-    "jest-cli": "~29.7.0",
-    "jest-environment-jsdom": "~29.7.0",
+    "jest": "^30.3.0",
+    "jest-axe": "^10.0.0",
+    "jest-environment-jsdom": "^30.3.0",
     "lint-staged": "^15.2.10",
+    "playwright": "^1.58.2",
     "postcss-cli": "~10.1.0",
     "react": "~19.2.1",
     "react-dom": "~19.2.1",
@@ -162,13 +158,14 @@
     "recharts": "~3.3.0",
     "remark-gfm": "~4.0.1",
     "rimraf": "~6.1.0",
-    "rollup": "~4.53.1",
+    "rollup": "^4.59.0",
     "sass": "~1.69.4",
-    "storybook": "^9.1.17",
+    "storybook": "^10.2.8",
     "stylelint": "^16.16.0",
     "stylelint-config-twbs-bootstrap": "^16.0.0",
-    "ts-jest": "~29.2.3",
+    "ts-jest": "^29.4.6",
     "tslib": "~2.6.2",
+    "tsx": "^4.21.0",
     "typescript": "~5.2.2",
     "vite": "^6.4.1",
     "yup": "^1.6.1"

package/src/style/_shame.scss

@@ -5,12 +5,12 @@
 }
 
 .text-muted {
-  --#{$prefix}text-muted: var(--#{$prefix}gray-400);
+  --#{$prefix}text-muted: var(--#{$prefix}gray-500);
   color: var(--#{$prefix}text-muted) !important;
 }
 
 .form-text {
-  --#{$prefix}form-text: var(--#{$prefix}gray-400);
+  --#{$prefix}form-text: var(--#{$prefix}gray-500);
   color: var(--#{$prefix}form-text) !important;
 }
 

package/src/style/abstracts/_mixins.scss

@@ -43,12 +43,12 @@
 // scss-docs-start df-btn-outline-variant-variables-mixin
 @mixin df-button-outline-variant-variables(
   $color-name,
-  $default-color: var(--#{$prefix}#{$color-name}-500),
+  $default-color: if($color-name == "warning", var(--#{$prefix}#{$color-name}-700), var(--#{$prefix}#{$color-name}-500)),
   $default-border-color: $default-color,
-  $hover-color: var(--#{$prefix}#{$color-name}-600),
+  $hover-color: if($color-name == "warning", var(--#{$prefix}#{$color-name}-800), var(--#{$prefix}#{$color-name}-600)),
   $hover-border-color: $hover-color,
   $focus-color: $hover-color,
-  $active-color: var(--#{$prefix}#{$color-name}-700),
+  $active-color: if($color-name == "warning", var(--#{$prefix}#{$color-name}-900), var(--#{$prefix}#{$color-name}-700)),
   $active-border-color: $active-color,
   $disabled-opacity: $btn-disabled-opacity,
   $box-shadow: $btn-box-shadow,
@@ -84,7 +84,7 @@
 // scss-docs-start df-btn-link-variant-variables-mixin
 @mixin df-button-link-variant-variables(
   $color-name,
-  $default-color: var(--#{$prefix}#{$color-name}-500),
+  $default-color: if($color-name == "warning", var(--#{$prefix}#{$color-name}-700), var(--#{$prefix}#{$color-name}-500)),
   $hover-text-color: var(--#{$prefix}#{$color-name}-600),
   $focus-text-color: var(--#{$prefix}#{$color-name}-600),
   $active-text-color: var(--#{$prefix}#{$color-name}-700),

package/src/style/abstracts/_utilities-dark.scss

@@ -0,0 +1,72 @@
+@mixin generate-dark-utility($utility) {
+  $values: map-get($utility, values);
+
+  @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
+    $values: zip($values, $values);
+  }
+
+  @each $key, $value in $values {
+    $properties: map-get($utility, property);
+
+    @if type-of($properties) == "string" {
+      $properties: append((), $properties);
+    }
+
+    $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
+    $property-class: if($property-class == null, "", $property-class);
+    $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
+    $property-class-modifier: if($key, if($property-class == "", "", "-") + $key, "");
+
+    $is-css-var: map-get($utility, css-var);
+    $is-local-vars: map-get($utility, local-vars);
+
+    @if $value != null {
+      $escaped-prefix: "dark\\:";
+      $selector: ".#{$escaped-prefix}#{$property-class}#{$property-class-modifier}";
+
+      @if $is-css-var {
+        @media (prefers-color-scheme: dark) {
+          #{$selector} {
+            --#{$prefix}#{$css-variable-name}: #{$value};
+          }
+        }
+        .dark #{$selector} {
+          --#{$prefix}#{$css-variable-name}: #{$value};
+        }
+      } @else {
+        @media (prefers-color-scheme: dark) {
+          #{$selector} {
+            @each $property in $properties {
+              @if $is-local-vars {
+                @each $local-var, $variable in $is-local-vars {
+                  --#{$prefix}#{$local-var}: #{$variable};
+                }
+              }
+              #{$property}: $value if($enable-important-utilities, !important, null);
+            }
+          }
+        }
+        .dark #{$selector} {
+          @each $property in $properties {
+            @if $is-local-vars {
+              @each $local-var, $variable in $is-local-vars {
+                --#{$prefix}#{$local-var}: #{$variable};
+              }
+            }
+            #{$property}: $value if($enable-important-utilities, !important, null);
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin generate-dark-utilities($utilities-map) {
+  @each $name, $utility in $utilities-map {
+    @if map-has-key($utility, values) and map-has-key($utility, property) {
+      @include generate-dark-utility($utility);
+    }
+  }
+}
+
+@include generate-dark-utilities($utilities);

package/src/style/abstracts/_utilities.scss

@@ -41,6 +41,7 @@ $utilities: map-merge(
     "shadow": map-merge(
       map-get($utilities, "shadow"),
       (
+        responsive: true,
         values: (
           null: var(--#{$prefix}box-shadow),
           sm: var(--#{$prefix}box-shadow-sm),
@@ -52,6 +53,7 @@ $utilities: map-merge(
     "text-opacity": map-merge(
       map-get($utilities, "text-opacity"),
       (
+        responsive: true,
         values: map-merge(
           map-get(map-get($utilities, "text-opacity"), "values"),
           (
@@ -72,15 +74,82 @@ $utilities: map-merge(
         responsive: true
       )
     ),
+    "border": map-merge(
+      map-get($utilities, "border"),
+      (
+        responsive: true,
+      )
+    ),
+    "border-top": map-merge(
+      map-get($utilities, "border-top"),
+      (
+        responsive: true,
+      )
+    ),
+    "border-end": map-merge(
+      map-get($utilities, "border-end"),
+      (
+        responsive: true,
+      )
+    ),
+    "border-bottom": map-merge(
+      map-get($utilities, "border-bottom"),
+      (
+        responsive: true,
+      )
+    ),
+    "border-start": map-merge(
+      map-get($utilities, "border-start"),
+      (
+        responsive: true,
+      )
+    ),
     "border-color": map-merge(
       map-get($utilities, "border-color"),
       (
+        responsive: true,
         values: map-merge(
           map-get(map-get($utilities, "border-color"), "values"),
           map-loop($palette-grays, rgba-css-var, "$key", "border"),
         )
       )
     ),
+    "border-width": map-merge(
+      map-get($utilities, "border-width"),
+      (
+        responsive: true,
+      )
+    ),
+    "rounded": map-merge(
+      map-get($utilities, "rounded"),
+      (
+        responsive: true,
+      )
+    ),
+    "rounded-top": map-merge(
+      map-get($utilities, "rounded-top"),
+      (
+        responsive: true,
+      )
+    ),
+    "rounded-end": map-merge(
+      map-get($utilities, "rounded-end"),
+      (
+        responsive: true,
+      )
+    ),
+    "rounded-bottom": map-merge(
+      map-get($utilities, "rounded-bottom"),
+      (
+        responsive: true,
+      )
+    ),
+    "rounded-start": map-merge(
+      map-get($utilities, "rounded-start"),
+      (
+        responsive: true,
+      )
+    ),
     "grid-column": (
       class: "g-col",
       property: grid-column,
@@ -133,7 +202,13 @@ $utilities: map-merge(
       map-get($utilities, "font-size"),
       (
         responsive: true,
-        rfs: false
+        rfs: false,
+        values: map-merge(
+          map-get(map-get($utilities, "font-size"), "values"),
+          (
+            body: var(--#{$prefix}body-font-size)
+          )
+        )
       )
     ),
     "display-font-size": (
@@ -199,13 +274,6 @@ $utilities: map-merge(
         wrap: wrap
       )
     ),
-    "body-font-size": (
-      class: "fs-body",
-      responsive: true,
-      css-var: true,
-      css-variable-name: fs-body-font-size,
-      values: $body-font-sizes
-    ),
     "line-height": (
       property: line-height,
       class: lh,

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

@@ -20,8 +20,8 @@ $focus-ring-opacity: .25 !default;
 $focus-ring-blur: 0 !default;
 // custom
 $focus-ring-border-color: transparent !default;
-$focus-ring-color-mapping: "secondary-rgb" !default;
-$focus-ring-color: var(--#{$prefix}gray-100) !default;
+$focus-ring-color-mapping: "primary-rgb" !default;
+$focus-ring-color: var(--#{$prefix}focus-ring-color) !default;
 // end custom
 $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
 // scss-docs-end focus-ring-variables
@@ -88,10 +88,6 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
 @import "code";
 
 // custom
-@import "quick-action-button";
-@import "quick-action-select";
-@import "quick-action-check";
-@import "quick-action-switch";
 @import "cursors";
 @import "chips";
 @import "collapse-icon-text";