@dynamic-framework/ui-react 2.0.0-dev.2 → 2.0.0-dev.4

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

@@ -1,18 +1,8 @@
-/// <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">, "onChange" | "value">, "size" | "onChange" | "label" | "invalid" | "value" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | "loading" | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & {
-    value?: string | undefined;
-    label?: string | undefined;
-    loading?: boolean | undefined;
-    hint?: string | undefined;
-    size?: import("../interface").ComponentSize | undefined;
-    invalid?: boolean | undefined;
-    valid?: boolean | undefined;
-    floatingLabel?: boolean | undefined;
-    inputStart?: import("react").ReactNode;
-    inputEnd?: import("react").ReactNode;
-    onChange?: ((value: string) => void) | undefined;
-    onIconStartClick?: ((value?: string | undefined) => void) | undefined;
-    onIconEndClick?: ((value?: string | undefined) => void) | undefined;
-} & import("react").RefAttributes<HTMLInputElement>, "ref">, keyof MaskProps> & MaskProps & import("react").RefAttributes<HTMLInputElement>>;
+import { type InputMaskProps } from '@react-input/mask';
+import type { ComponentPropsWithoutRef } from 'react';
+import DInput from '../DInput';
+import type { Merge } from '../../types';
+type NonDInputProps = InputMaskProps<typeof DInput>;
+type Props = Merge<ComponentPropsWithoutRef<typeof DInput>, NonDInputProps>;
+declare const ForwardedDInputMask: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default ForwardedDInputMask;

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

@@ -1,10 +1,21 @@
 import type { PropsWithChildren } from 'react';
 import DLayoutPane from './components/DLayoutPane';
 import type { BaseProps } from '../interface';
+/**
+ * Define the spacing (gap) on a scale from 0 to 30.
+ * @type {number}
+ */
+type Gap = number;
 type Props = PropsWithChildren<BaseProps & {
-    gap?: string | number;
+    gap?: Gap;
+    gapSm?: Gap;
+    gapMd?: Gap;
+    gapLg?: Gap;
+    gapXl?: Gap;
+    gapXxl?: Gap;
+    columns?: number;
 }>;
-declare function DLayout({ className, style, children, gap, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function DLayout({ className, style, children, gap, columns, gapSm, gapMd, gapLg, gapXl, gapXxl, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof DLayout & {
     Pane: typeof DLayoutPane;
 };

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.0.0-dev.2",
+  "version": "2.0.0-dev.4",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -89,22 +89,21 @@
     "jest/"
   ],
   "dependencies": {
-    "@floating-ui/react": "~0.26.1",
-    "@react-input/mask": "~1.0.20",
+    "@floating-ui/react": "~0.27.16",
+    "@react-input/mask": "~2.0.4",
     "@splidejs/react-splide": "~0.7.12",
     "@splidejs/splide": "~4.1.4",
-    "bootstrap": "~5.3.3",
-    "classnames": "~2.3.2",
+    "bootstrap": "~5.3.8",
+    "classnames": "~2.5.1",
     "currency.js": "~2.0.4",
-    "date-fns": "~2.30.0",
-    "file-selector": "^2.1.2",
-    "google-libphonenumber": "^3.2.40",
-    "i18next": "~23.6.0",
-    "lucide-react": "^0.548.0",
+    "date-fns": "~4.1.0",
+    "file-selector": "~2.1.2",
+    "google-libphonenumber": "~3.2.43",
+    "lucide-react": "^0.553.0",
     "react-datepicker": "~8.3.0",
-    "react-international-phone": "~4.5.0",
-    "react-responsive-pagination": "^2.9.0",
-    "react-select": "^5.8.3"
+    "react-international-phone": "~4.6.0",
+    "react-responsive-pagination": "~2.11.3",
+    "react-select": "~5.10.2"
   },
   "devDependencies": {
     "@babel/core": "~7.23.2",
@@ -126,8 +125,8 @@
     "@types/google-libphonenumber": "~7.4.30",
     "@types/jest": "~29.5.12",
     "@types/node": "~18.15.3",
-    "@types/react": "~19.1.8",
-    "@types/react-dom": "~19.1.6",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
     "@typescript-eslint/eslint-plugin": "~6.9.0",
     "@typescript-eslint/parser": "~6.9.0",
     "@vitejs/plugin-react": "~4.7.0",
@@ -144,8 +143,8 @@
     "eslint-plugin-jsx-a11y": "~6.7.1",
     "eslint-plugin-react": "~7.33.2",
     "eslint-plugin-react-hooks": "~4.6.0",
-    "formik": "~2.4.6",
-    "glob": "~10.3.10",
+    "formik": "~2.4.8",
+    "glob": "~11.0.3",
     "husky": "~9.1.7",
     "jest": "~29.7.0",
     "jest-axe": "~8.0.0",
@@ -153,14 +152,15 @@
     "jest-environment-jsdom": "~29.7.0",
     "lint-staged": "^15.2.10",
     "postcss-cli": "~10.1.0",
-    "react": "~19.1.0",
-    "react-dom": "~19.1.0",
-    "react-hot-toast": "~2.5.2",
-    "react-i18next": "~13.3.1",
-    "recharts": "~3.1.0",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "react-hot-toast": "~2.6.0",
+    "react-i18next": "~16.2.4",
+    "i18next": "~25.6.1",
+    "recharts": "~3.3.0",
     "remark-gfm": "~4.0.1",
-    "rimraf": "~6.0.1",
-    "rollup": "^4.27.4",
+    "rimraf": "~6.1.0",
+    "rollup": "~4.53.1",
     "sass": "~1.69.4",
     "storybook": "~9.0.17",
     "stylelint": "^16.16.0",
@@ -172,15 +172,19 @@
     "yup": "^1.6.1"
   },
   "peerDependencies": {
-    "react": "~19.1.0",
-    "react-dom": "~19.1.0",
-    "react-hot-toast": "~2.5.2",
-    "react-i18next": "~13.3.1",
-    "recharts": "~3.1.0"
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "react-hot-toast": "~2.6.0",
+    "react-i18next": "~16.2.4",
+    "i18next": "~25.6.1",
+    "recharts": "~3.3.0"
   },
   "peerDependenciesMeta": {
     "recharts": {
       "optional": true
+    },
+    "formik": {
+      "optional": true
     }
   }
 }

package/src/style/abstracts/_mixins.scss

@@ -149,10 +149,6 @@
   --#{$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-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-color);
-  }
 }
 // scss-docs-end df-btn-variant-mixin
 

package/src/style/abstracts/_utilities.scss

@@ -81,6 +81,25 @@ $utilities: map-merge(
         )
       )
     ),
+    "grid-column": (
+      class: "g-col",
+      property: grid-column,
+      responsive: true,
+      values: (
+        13: auto/span 13,
+        14: auto/span 14,
+        15: auto/span 15,
+        16: auto/span 16,
+        17: auto/span 17,
+        18: auto/span 18,
+        19: auto/span 19,
+        20: auto/span 20,
+        21: auto/span 21,
+        22: auto/span 22,
+        23: auto/span 23,
+        24: auto/span 24
+      )
+    ),
     "overlay": (
       property: opacity,
       class: "overlay",

package/src/style/base/_buttons.scss

@@ -53,7 +53,7 @@
   // hover selectors
   &.hover,
   &:hover {
-    // color: var(--#{$prefix}btn-hover-color);
+    color: var(--#{$prefix}btn-hover-color);
     text-decoration: none;
     background-color: var(--#{$prefix}btn-hover-bg);
     border-color: var(--#{$prefix}btn-hover-border-color);
@@ -157,11 +157,11 @@
 
 .btn-outline-primary {
   --#{$prefix}btn-color: var(--#{$prefix}primary-500);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}primary-600);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}primary-700);
   --#{$prefix}btn-border-color: var(--#{$prefix}primary-500);
   --#{$prefix}btn-active-color: var(--#{$prefix}primary-500);
   --#{$prefix}btn-active-border-color: var(--#{$prefix}primary-600);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}primary-600);
+  --#{$prefix}btn-hover-color: var(--#{$prefix}primary-700);
   --#{$prefix}btn-focus-color: var(--#{$prefix}primary-600);
   --#{$prefix}btn-active-color: var(--#{$prefix}primary-600);
   --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
@@ -174,19 +174,19 @@
 }
 
 .btn-outline-secondary {
-  --#{$prefix}btn-color: var(--#{$prefix}gray-700);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}gray-400);
-  --#{$prefix}btn-border-color: var(--#{$prefix}gray-200);
-  --#{$prefix}btn-active-border-color: var(--#{$prefix}gray-400);
-  --#{$prefix}btn-active-color: var(--#{$prefix}gray-700);
-  --#{$prefix}btn-hover-color: var(--#{$prefix}gray-700);
-  --#{$prefix}btn-focus-color: var(--#{$prefix}gray-700);
+  --#{$prefix}btn-color: var(--#{$prefix}secondary-700);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}secondary-400);
+  --#{$prefix}btn-border-color: var(--#{$prefix}secondary-200);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}secondary-400);
+  --#{$prefix}btn-active-color: var(--#{$prefix}secondary-700);
+  --#{$prefix}btn-hover-color: var(--#{$prefix}secondary-700);
+  --#{$prefix}btn-focus-color: var(--#{$prefix}secondary-700);
   --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
   --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-secondary-focus-shadow-rgb);
   &:disabled,
   &.disabled {
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}gray-700);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}gray-700);
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}secondary-200);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}secondary-600);
   }
 }
 
@@ -200,11 +200,17 @@
   --#{$prefix}btn-focus-color: var(--#{$prefix}gray-50);
   --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
   --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-light-focus-shadow-rgb);
+  &:disabled,
+  &.disabled {
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}gray-25);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}gray-25);
+    opacity: var(--#{$prefix}btn-disabled-opacity);
+  }
 }
 
 .btn-outline-success {
   --#{$prefix}btn-color: var(--#{$prefix}success-500);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}success-600);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}success-700);
   --#{$prefix}btn-border-color: var(--#{$prefix}success-500);
   --#{$prefix}btn-active-border-color: var(--#{$prefix}success-600);
   --#{$prefix}btn-active-color: var(--#{$prefix}success-700);
@@ -221,7 +227,7 @@
 
 .btn-outline-danger {
   --#{$prefix}btn-color: var(--#{$prefix}danger-500);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}danger-600);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}danger-700);
   --#{$prefix}btn-border-color: var(--#{$prefix}danger-500);
   --#{$prefix}btn-active-border-color: var(--#{$prefix}danger-600);
   --#{$prefix}btn-active-color: var(--#{$prefix}danger-700);
@@ -238,7 +244,7 @@
 
 .btn-outline-info {
   --#{$prefix}btn-color: var(--#{$prefix}info-500);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}info-600);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}info-700);
   --#{$prefix}btn-border-color: var(--#{$prefix}info-500);
   --#{$prefix}btn-active-border-color: var(--#{$prefix}info-600);
   --#{$prefix}btn-active-color: var(--#{$prefix}info-700);
@@ -255,7 +261,7 @@
 
 .btn-outline-warning {
   --#{$prefix}btn-color: var(--#{$prefix}warning-600);
-  --#{$prefix}btn-hover-border-color: var(--#{$prefix}warning-600);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}warning-700);
   --#{$prefix}btn-border-color: var(--#{$prefix}warning-500);
   --#{$prefix}btn-active-border-color: var(--#{$prefix}warning-600);
   --#{$prefix}btn-active-color: var(--#{$prefix}warning-700);