@dynamic-framework/ui-react 1.12.0 → 1.13.0

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

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

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

@@ -7,5 +7,5 @@ type Props = BaseProps & Omit<ReactDatePickerProps, 'onChange' | 'selectsRange'
     headerPrevYearAriaLabel?: string;
     headerNextYearAriaLabel?: string;
 };
-export default function DMonthPicker({ onChangeDate, date, locale, className, headerPrevYearAriaLabel, headerNextYearAriaLabel, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DMonthPicker({ onChangeDate, date, locale, className, calendarClassName, headerPrevYearAriaLabel, headerNextYearAriaLabel, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -24,7 +24,6 @@ export { default as DInputPin } from './DInputPin';
 export { default as DInputSelect, DInputSelectProps } from './DInputSelect';
 export { default as DInputSwitch } from './DInputSwitch';
 export { default as DList, DListItem, } from './DList';
-export { default as DListItemMovement } from './DListItemMovement';
 export { default as DModal, DModalHeader, DModalBody, DModalFooter, } from './DModal';
 export { default as DOffcanvas, DOffcanvasHeader, DOffcanvasBody, DOffcanvasFooter, } from './DOffcanvas';
 export { default as DPaginator } from './DPaginator';

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

@@ -27,6 +27,7 @@ export type LabelIconProps = {
 };
 export type StartIconProps = {
     iconStart?: string;
+    iconStartDisabled?: boolean;
     iconStartFamilyClass?: string;
     iconStartFamilyPrefix?: string;
     iconStartAriaLabel?: string;
@@ -34,6 +35,7 @@ export type StartIconProps = {
 };
 export type EndIconProps = {
     iconEnd?: string;
+    iconEndDisabled?: boolean;
     iconEndFamilyClass?: string;
     iconEndFamilyPrefix?: string;
     iconEndAriaLabel?: string;

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

@@ -1,13 +1,17 @@
 import type { PropsWithChildren } from 'react';
-export type Props = {
-    language?: string;
-    currency?: {
+type Props = {
+    language: string;
+    currency: {
         symbol: string;
         precision: number;
         separator: string;
         decimal: string;
     };
 };
-export declare const DContext: import("react").Context<Required<Props>>;
-export declare function DContextProvider({ language, currency, children, }: PropsWithChildren<Props>): import("react/jsx-runtime").JSX.Element;
-export declare function useDContext(): Required<Props>;
+type Context = Props & {
+    setContext: (value: Props) => void;
+};
+export declare const DContext: import("react").Context<Context>;
+export declare function DContextProvider({ language, currency, children, }: PropsWithChildren<Partial<Props>>): import("react/jsx-runtime").JSX.Element;
+export declare function useDContext(): Context;
+export {};

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "React Dynamic Framework",
   "license": "MIT",
   "repository": {
@@ -144,5 +144,5 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^13.3.1"
   },
-  "gitHead": "df024b0bce28372ce5a296946faf8c080751c84f"
+  "gitHead": "6ef6821f41cdd1a111dfeafc296c50fe3bce0627"
 }

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

@@ -99,7 +99,7 @@ $input-btn-font-size: $font-size-base !default;
 $input-btn-line-height: $line-height-base !default;
 
 $input-btn-focus-width: 0 !default;
-$input-btn-focus-color-opacity: 0 !default;
+$input-btn-focus-color-opacity: 1 !default;
 $input-btn-focus-color: rgba(var(--#{$prefix}secondary-rgb), $input-btn-focus-color-opacity) !default;
 $input-btn-focus-blur: 0 !default;
 $input-btn-focus-box-shadow: none !default;

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

@@ -58,10 +58,11 @@ $input-hover-border-color: var(--#{$prefix}gray) !default;
 $input-focus-bg: $input-bg !default;
 $input-focus-border-color: var(--#{$prefix}focus-ring-color) !default; // unused
 $input-focus-color: $input-color !default;                      // unused
-$input-focus-width: $input-btn-focus-width !default;            // unused
+$input-focus-width: 1px !default;            // unused
 $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
 
 // custom
+$input-group-disabled-color: var(--#{$prefix}secondary-100) !default;
 $input-group-border-color: var(--#{$prefix}gray-300) !default;
 $input-group-border-width: 1px !default;
 $input-group-border-radius: $input-border-radius !default;
@@ -285,7 +286,7 @@ $form-feedback-icon-invalid: null !default;
 
 // scss-docs-start form-validation-colors
 $form-valid-color: $form-label-color !default;
-$form-valid-border-color: $input-group-hover-border-color !default;
+$form-valid-border-color: $form-feedback-valid-color !default;
 $form-invalid-color: $form-feedback-invalid-color !default;
 $form-invalid-border-color: $form-feedback-invalid-color !default;
 // scss-docs-end form-validation-colors

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

@@ -6,7 +6,7 @@ $nav-link-padding-x: $spacer-1 !default;
 $nav-link-font-size: var(--#{$prefix}body-font-size) !default;
 $nav-link-font-weight: var(--#{$prefix}ref-fw-normal) !default;
 $nav-link-color: var(--#{$prefix}gray-500) !default;
-$nav-link-hover-color: var(--#{$prefix}gray-600) !default;
+$nav-link-hover-color: var(--#{$prefix}secondary-600) !default;
 $nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
 $nav-link-disabled-color: var(--#{$prefix}gray-200) !default;
 $nav-link-focus-box-shadow: $focus-ring-box-shadow !default;

package/src/style/abstracts/variables/_quick-action-check.scss

@@ -5,7 +5,7 @@ $quick-action-check-border-radius: var(--#{$prefix}border-radius-sm) !default;
 
 $quick-action-check-line1-font-size: var(--#{$prefix}body-font-size) !default;
 $quick-action-check-line1-font-weight: var(--#{$prefix}ref-fw-bold) !default;
-$quick-action-check-line1-color: var(--#{$prefix}light-text-emphasis) !default;
+$quick-action-check-line1-color: var(--#{$prefix}gray-900) !default;
 
 $quick-action-check-line2-font-size: var(--#{$prefix}ref-fs-small) !default;
 $quick-action-check-line2-font-weight: var(--#{$prefix}ref-fw-normal) !default;

package/src/style/components/_d-datepicker.scss

@@ -20,21 +20,22 @@
 
   --#{$prefix}datepicker-day-name-weight: var(--#{$prefix}ref-fw-bold);
   --#{$prefix}datepicker-day-name-margin: 0;
-  --#{$prefix}datepicker-day-name-size: 20px;
+  --#{$prefix}datepicker-day-name-size: var(--#{$prefix}ref-spacer-3);
   --#{$prefix}datepicker-day-name-color: var(--#{$prefix}gray-500);
 
   // Calendar variables
-  --#{$prefix}datepicker-month-gap: var(--#{$prefix}ref-fs-small);
+  --#{$prefix}datepicker-month-gap: var(--#{$prefix}ref-spacer-2);
   --#{$prefix}datepicker-month-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-4);
   --#{$prefix}datepicker-month-margin: 0;
   --#{$prefix}datepicker-month-color: var(--#{$prefix}white);
 
-  --#{$prefix}datepicker-week-gap: 1.875rem;
+  --#{$prefix}datepicker-week-gap: var(--#{$prefix}ref-spacer-2);
 
   // Day variables
   --#{$prefix}datepicker-day-margin: 0;
   --#{$prefix}datepicker-day-font-size: var(--#{$prefix}ref-fs-small);
-  --#{$prefix}datepicker-day-size: 20px;
+  --#{$prefix}datepicker-day-size: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}datepicker-day-padding: var(--#{$prefix}ref-spacer-3);
   --#{$prefix}datepicker-day-radius: 100%;
 
   --#{$prefix}datepicker-day-bg-hover: var(--#{$prefix}body);
@@ -80,13 +81,17 @@
 
     .react-datepicker__day-names {
       display: flex;
-      justify-content: space-between;
+      gap: var(--#{$prefix}ref-spacer-2);
       margin: var(--#{$prefix}datepicker-day-names-margin);
       font-size: var(--#{$prefix}datepicker-day-names-font-size);
     }
     .react-datepicker__day-name {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: var(--#{$prefix}datepicker-day-name-size);
       height: var(--#{$prefix}datepicker-day-name-size);
+      padding: var(--#{$prefix}datepicker-day-padding);
       margin: var(--#{$prefix}datepicker-day-name-margin);
       font-weight: var(--#{$prefix}datepicker-day-name-weight);
       line-height: var(--#{$prefix}datepicker-day-name-size);
@@ -115,8 +120,12 @@
     }
 
     .react-datepicker__day {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: var(--#{$prefix}datepicker-day-size);
       height: var(--#{$prefix}datepicker-day-size);
+      padding: var(--#{$prefix}datepicker-day-padding);
       margin: var(--#{$prefix}datepicker-day-margin);
       font-size: var(--#{$prefix}datepicker-day-font-size);
       line-height: var(--#{$prefix}datepicker-day-size);
@@ -185,6 +194,10 @@
     color: var(--#{$prefix}datepicker-day-outside-month-color);
   }
 
+  .react-datepicker-wrapper {
+    margin-inline: auto;
+  }
+
   /* Start time selector */
   .react-datepicker__input-time-container {
     width: 100%;

package/src/style/components/_d-input.scss

@@ -31,7 +31,7 @@
   // input disabled
   --#{$prefix}input-group-disabled-border-color: #{$input-disabled-border-color};
   --#{$prefix}input-group-disabled-bg: #{$input-disabled-bg};
-  --#{$prefix}input-group-disabled-color: #{$input-disabled-color};
+  --#{$prefix}input-group-disabled-color: #{$input-group-disabled-color};
 
   display: flex;
   flex-direction: column;
@@ -43,11 +43,6 @@
     .input-group {
       border-color: var(--#{$prefix}input-group-focus-border-color);
       box-shadow: var(--#{$prefix}input-group-focus-box-shadow);
-
-      &:hover:has(.form-control:not(:placeholder-shown:disabled)),
-      &:hover {
-        border-color: var(--#{$prefix}input-group-focus-border-color);
-      }
     }
   }
 
@@ -79,20 +74,20 @@
   }
 
   // not empty
-  &:has(.form-control:not(:placeholder-shown, :focus)) {
-    .input-group {
-      border-color: var(--#{$prefix}input-group-hover-border-color);
-    }
+  .input-group:not(:focus-within):not(.has-validation):has(.form-control:not(:placeholder-shown, :disabled)) {
+    border-color: var(--#{$prefix}input-group-hover-border-color);
   }
 
   // validation states
   @each $state, $data in $form-validation-states {
     $border-color: map-get($data, "border-color");
     $tooltip-bg-color: map-get($data, "tooltip-bg-color");
+    $box-shadow: map-get($data, "focus-box-shadow");
 
     &:has(.form-control.is-#{$state}) {
       .input-group {
         border-color: $border-color;
+        box-shadow: $box-shadow;
       }
 
       .input-group ~ .form-text {
@@ -138,10 +133,21 @@
     appearance: none;
   }
 
+  // disable original form-control styles on d-input
+  .form-control.is-invalid:focus,
+  .form-control.is-valid:focus {
+    border: 0;
+    box-shadow: unset;
+  }
+
   // input addons
   .input-group-text {
     border: 0;
     outline: 0;
+
+    &:disabled {
+      color: var(--#{$prefix}input-group-disabled-color);
+    }
   }
 
   // input disabled
@@ -151,9 +157,11 @@
 
 
   &:has(.form-control:disabled) {
+    border-color: var(--#{$prefix}input-group-disabled-color);
 
     // input addons disabled
     .input-group-text {
+      color: var(--#{$prefix}input-group-disabled-color);
       background: var(--#{$prefix}input-group-disabled-bg);
     }
 

package/src/style/components/_d-stepper-desktop.scss

@@ -131,7 +131,7 @@
         width: 0;
         height: 100%;
         content: "";
-        border: var(--#{$prefix}step-icon-container-border-width) solid var(--#{$prefix}step-icon-container-border-color);
+        border: var(--#{$prefix}step-line-stroke) solid var(--#{$prefix}step-line-color);
       }
 
       &:first-child .d-step-value::after {

package/src/style/components/_d-stepper-mobile.scss

@@ -24,7 +24,6 @@
   --#{$prefix}step-info-description-font-size: var(--#{$prefix}ref-fs-small);
   --#{$prefix}step-info-description-color: var(--#{$prefix}gray-500);
 
-
   display: flex;
   gap: var(--#{$prefix}step-container-gap);
   align-items: center;
@@ -40,6 +39,7 @@
     height: var(--#{$prefix}step-progress-outter-size);
     border-radius: var(--#{$prefix}step-progress-outter-size);
   }
+
   .d-step-bar::after {
     position: absolute;
     z-index: var(--#{$prefix}step-progress-inner-z-index);
@@ -49,19 +49,23 @@
     background-color: var(--#{$prefix}step-progress-inner-background-color);
     border-radius: var(--#{$prefix}step-progress-inner-size);
   }
+
   .d-step-number {
     z-index: var(--#{$prefix}step-current-step-z-index);
     font-weight: var(--#{$prefix}step-current-step-font-weight);
     color: var(--#{$prefix}step-current-step-color);
   }
+
   .d-step-info {
     display: flex;
     flex-direction: column;
     max-width: var(--#{$prefix}step-info-max-width);
   }
+
   .d-step-label {
     font-size: var(--#{$prefix}step-info-label-font-size);
   }
+
   .d-step-description {
     font-size: var(--#{$prefix}step-info-description-font-size);
     color: var(--#{$prefix}step-info-description-color);

package/src/style/components/_d-tabs.scss

@@ -4,6 +4,7 @@
   --#{$prefix}tabs-nav-padding-y: #{$nav-nav-padding-y};
   --#{$prefix}tabs-link-border-height: #{$nav-link-border-height};
   --#{$prefix}tabs-link-line-height: #{$nav-link-line-height};
+  --#{$prefix}tabs-link-hover-color: #{$nav-link-hover-color};
   --#{$prefix}tabs-link-border-border-radius: #{$nav-link-border-border-radius};
   --#{$prefix}tabs-link-border-active-color: #{$nav-link-border-active-color};
   --#{$prefix}tabs-link-border-active-font-weight: #{$nav-link-border-active-font-weight};
@@ -21,6 +22,10 @@
     position: relative;
     line-height: var(--#{$prefix}tabs-link-line-height);
 
+    &:hover {
+      color: var(--#{$prefix}tabs-link-hover-color);
+    }
+
     &.active {
       font-weight: var(--#{$prefix}tabs-link-border-active-font-weight);
       color: var(--#{$prefix}tabs-link-border-active-color);

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

@@ -1,10 +0,0 @@
-import type { ComponentProps } from 'react';
-import { DListItem } from '../DList';
-import type { BaseProps } from '../interface';
-type Props = BaseProps & Omit<ComponentProps<typeof DListItem>, 'children'> & {
-    description: string;
-    date: string;
-    amount: number;
-};
-export default function DListItemMovement({ description, date, amount, className, style, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

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

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