@dynamic-framework/ui-react 1.24.0 → 1.26.0

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

@@ -1,16 +1,16 @@
 import type { ChangeEvent } from 'react';
 import type { BaseProps, InputCheckType } from '../interface';
 type Props = BaseProps & {
+    id?: string;
     type: InputCheckType;
     name?: string;
     label?: string;
     ariaLabel?: string;
     checked?: boolean;
-    id: string;
     disabled?: boolean;
     indeterminate?: boolean;
     value?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 };
-export default function DInputCheck({ type, name, label, ariaLabel, checked, id, disabled, indeterminate, value, onChange, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DInputCheck({ id: idProp, type, name, label, ariaLabel, checked, disabled, indeterminate, value, onChange, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
 import type { BaseProps, FamilyIconProps, LabelIconProps, PinInputMode, PinInputType, StateIcons } from '../interface';
 type Props = BaseProps & LabelIconProps & FamilyIconProps & StateIcons & {
-    id: string;
+    id?: string;
     label?: string;
     placeholder?: string;
     type?: PinInputType;
@@ -15,5 +15,5 @@ type Props = BaseProps & LabelIconProps & FamilyIconProps & StateIcons & {
     valid?: boolean;
     onChange?: (value: string) => void;
 };
-export default function DInputPin({ id, 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, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { BaseProps, LabelIconProps } from '../interface';
+declare const ForwardedDInputRange: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type">, "label" | "ariaLabel" | keyof BaseProps | keyof LabelIconProps | "filledValue"> & BaseProps & LabelIconProps & {
+    label?: string | undefined;
+    ariaLabel?: string | undefined;
+    filledValue?: boolean | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default ForwardedDInputRange;

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

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

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

@@ -1,15 +1,17 @@
 import type { FocusEvent, MouseEvent } from 'react';
-import type { BaseProps, EndIconProps, LabelIconProps, StartIconProps } from '../interface';
+import type { BaseProps, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps, StateIcons } from '../interface';
 export type DefaultOption = {
     value: string | number;
     label: string;
 };
-export type Props<T> = BaseProps & LabelIconProps & StartIconProps & EndIconProps & {
+export type Props<T> = BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & StateIcons & {
     id?: string;
     name?: string;
     label?: string;
     disabled?: boolean;
     loading?: boolean;
+    invalid?: boolean;
+    valid?: boolean;
     hint?: string;
     floatingLabel?: boolean;
     onBlur?: (event: FocusEvent) => void;
@@ -21,4 +23,4 @@ export type Props<T> = BaseProps & LabelIconProps & StartIconProps & EndIconProp
     valueExtractor?: (item: T) => string | number;
     labelExtractor?: (item: T) => string;
 };
-export default function DInputSelect<T extends object = DefaultOption>({ id, name, label, className, style, options, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, disabled, loading, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, hint, value, floatingLabel, 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, floatingLabel, invalid, valid, valueExtractor, labelExtractor, onChange, onBlur, onIconStartClick, onIconEndClick, }: Props<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,13 @@
 import type { BaseProps } from '../interface';
 type Props = BaseProps & {
+    id?: string;
     label?: string;
     ariaLabel?: string;
-    id: string;
     name?: string;
     checked?: boolean;
     disabled?: boolean;
     readonly?: boolean;
     onChange?: (isChecked: boolean) => void;
 };
-export default function DInputSwitch({ label, ariaLabel, id, name, checked, disabled, readonly, className, style, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, readonly, className, style, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 import type { ChangeEvent } from 'react';
 import type { BaseProps } from '../interface';
 type Props = BaseProps & {
-    id: string;
+    id?: string;
     name: string;
     value: string;
     line1: string;
@@ -10,5 +10,5 @@ type Props = BaseProps & {
     checked?: boolean;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 };
-export default function DQuickActionCheck({ id, 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, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 import type { ChangeEvent } from 'react';
 import type { BaseProps } from '../interface';
 type Props = BaseProps & {
-    id: string;
+    id?: string;
     name: string;
     value: string;
     line1: string;
@@ -9,5 +9,5 @@ type Props = BaseProps & {
     selected?: boolean;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 };
-export default function DQuickActionSelect({ id, 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, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -8,13 +8,14 @@ export type DTabOption = {
 };
 export type TabVariant = 'tabs' | 'pills' | 'underline';
 type Props = BaseProps & PropsWithChildren<{
+    classNameTab?: string;
     onChange: (option: DTabOption) => void;
     options: Array<DTabOption>;
     defaultSelected: string;
     vertical?: boolean;
     variant?: TabVariant;
 }>;
-declare function DTabs({ children, defaultSelected, onChange, options, className, style, vertical, variant, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function DTabs({ children, defaultSelected, onChange, options, className, classNameTab, style, vertical, variant, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof DTabs & {
     Tab: typeof DTabContent;
 };

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

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+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 const _default: typeof DToast & {
+    Header: typeof DToastHeader;
+    Body: typeof DToastBody;
+};
+export default _default;

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

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+import { BaseProps } from '../../interface';
+type Props = PropsWithChildren<BaseProps>;
+export default function DToastBody({ children, className, style }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+import { BaseProps } from '../../interface';
+type Props = PropsWithChildren<BaseProps>;
+export default function DToastHeader({ children, className, style }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,4 @@
+import DToast from './DToast';
+export { default as DToastHeader } from './components/DToastHeader';
+export { default as DToastBody } from './components/DToastBody';
+export default DToast;

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

@@ -21,6 +21,7 @@ export { default as DInputCheck } from './DInputCheck';
 export { default as DInputPin } from './DInputPin';
 export { default as DInputSelect, DInputSelectDefaultOption, DInputSelectProps } from './DInputSelect';
 export { default as DInputSwitch } from './DInputSwitch';
+export { default as DInputRange } from './DInputRange';
 export { default as DSelect } from './DSelect';
 export { default as DList, DListItem, } from './DList';
 export { default as DModal, DModalHeader, DModalBody, DModalFooter, } from './DModal';
@@ -38,4 +39,5 @@ 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 DToast } from './DToast';
 export { default as DToastContainer, useDToast, } from './DToastContainer';

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.24.0",
+  "version": "1.26.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -116,7 +116,6 @@
     "autoprefixer": "^10.4.16",
     "axe-playwright": "^1.2.3",
     "babel-loader": "^9.1.3",
-    "bootstrap": "^5.3.2",
     "eslint": "^8.52.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
@@ -156,5 +155,5 @@
       "optional": true
     }
   },
-  "gitHead": "9152b65367486ebe3ac167e46cc6b48d0aeed336"
+  "gitHead": "21163ab260bbaf17d9ec5793a45fd24574649114"
 }

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

@@ -24,7 +24,8 @@ $focus-ring-color: var(--#{$prefix}focus-ring-color) !default;
 // scss-docs-end focus-ring-variables
 
 $component-active-color: var(--#{$prefix}white) !default;
-$component-active-bg: $focus-ring-color !default;
+$component-active-bg: var(--#{$prefix}primary) !default;
+$component-focus-shadow: 0 0 0 4px rgba(var(--#{$prefix}primary-rgb), .4) !default;
 
 $transition-fade: opacity .3s linear !default;
 

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

@@ -120,9 +120,13 @@ $form-select-box-shadow: none !default;
 
 // scss-docs-start form-range-variables
 $form-range-track-bg: var(--#{$prefix}gray-300) !default;
+$form-range-track-height: $spacer-1 !default;
+$form-range-track-border-radius: var(--#{$prefix}ref-spacer-6) !default;
+$form-range-track-box-shadow: none !default;
 
+$form-range-thumb-width: $spacer-4 !default;
 $form-range-thumb-box-shadow: 0 .1rem .25rem rgba(var(--#{$prefix}black-rgb), .1) !default;
-$form-range-thumb-focus-box-shadow: 0 0 0 1px var(--#{$prefix}body-bg), $input-focus-box-shadow !default;
+$form-range-thumb-focus-box-shadow: $component-focus-shadow !default;
 $form-range-thumb-active-bg: $component-active-bg !default;
 $form-range-thumb-disabled-bg: var(--#{$prefix}gray-500) !default;
 // scss-docs-end form-range-variables

package/src/style/base/_+import.scss

@@ -40,6 +40,7 @@
 @import "form-switch";
 @import "form-check";
 @import "form-control";
+@import "form-range";
 @import "form-text";
 @import "input-group";
 @import "buttons";

package/src/style/base/_form-range.scss

@@ -0,0 +1,52 @@
+.form-range {
+
+  &.form-range-value-indicator {
+    &::-webkit-slider-runnable-track {
+      background:
+        linear-gradient(
+          to right,
+          $component-active-bg 0%,
+          $component-active-bg var(--#{$prefix}form-range-component-value),
+          $form-range-track-bg var(--#{$prefix}form-range-component-value),
+          $form-range-track-bg 100%
+        );
+    }
+
+    &::-moz-range-track {
+      background:
+        linear-gradient(
+          to right,
+          $component-active-bg 0%,
+          $component-active-bg var(--#{$prefix}form-range-component-value),
+          $form-range-track-bg var(--#{$prefix}form-range-component-value),
+          $form-range-track-bg 100%
+        );
+    }
+  }
+
+  &:disabled {
+    &.form-range-value-indicator {
+      &::-webkit-slider-runnable-track {
+        background:
+          linear-gradient(
+            to right,
+            $form-range-thumb-disabled-bg 0%,
+            $form-range-thumb-disabled-bg var(--#{$prefix}form-range-component-value),
+            $form-range-track-bg var(--#{$prefix}form-range-component-value),
+            $form-range-track-bg 100%
+          );
+      }
+
+      &::-moz-range-track {
+        background:
+          linear-gradient(
+            to right,
+            $form-range-thumb-disabled-bg 0%,
+            $form-range-thumb-disabled-bg var(--#{$prefix}form-range-component-value),
+            $form-range-track-bg var(--#{$prefix}form-range-component-value),
+            $form-range-track-bg 100%
+          );
+      }
+    }
+  }
+}

package/src/style/base/_input-group.scss

@@ -76,7 +76,7 @@
     $tooltip-bg-color: map-get($data, "tooltip-bg-color");
     $box-shadow: map-get($data, "focus-box-shadow");
 
-    &:has(.form-control.is-#{$state}) {
+    &:has(.form-control.is-#{$state}, .form-select.is-#{$state}) {
       border-color: $border-color;
       box-shadow: $box-shadow;
 

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

@@ -5,6 +5,7 @@
 
   // select
   --#{$prefix}select-menu-shadow: #{$box-shadow-sm};
+  --#{$prefix}select-menu-z-index: #{$zindex-dropdown};
   --#{$prefix}select-option-focus-bg: var(--#{$prefix}gray-100);
   --#{$prefix}select-option-selected-color: var(--#{$prefix}secondary);
   --#{$prefix}select-option-selected-bg: var(--#{$prefix}gray-100);
@@ -101,6 +102,7 @@
   // select menu
   .d-select__menu-list {
     top: calc(var(--#{$prefix}input-border-width) * 2);
+    z-index: var(--#{$prefix}select-menu-z-index);
     margin: calc(var(--#{$prefix}input-border-width) * -1);
     background: $input-bg;
     border-radius: var(--#{$prefix}input-border-radius);