@dynamic-framework/ui-react 1.26.0 → 1.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/dynamic-ui-non-root.css +269 -905
- package/dist/css/dynamic-ui-non-root.min.css +2 -2
- package/dist/css/dynamic-ui-root.css +228 -152
- package/dist/css/dynamic-ui-root.min.css +2 -2
- package/dist/css/dynamic-ui.css +496 -1056
- package/dist/css/dynamic-ui.min.css +2 -2
- package/dist/index.esm.js +112 -47
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +113 -46
- package/dist/index.js.map +1 -1
- package/dist/types/components/DButtonIcon/DButtonIcon.d.ts +19 -0
- package/dist/types/components/DButtonIcon/index.d.ts +2 -0
- package/dist/types/components/DInput/DInput.d.ts +3 -2
- package/dist/types/components/DInputCheck/DInputCheck.d.ts +3 -1
- package/dist/types/components/DInputCounter/DInputCounter.d.ts +2 -1
- package/dist/types/components/DInputCurrency/DInputCurrency.d.ts +2 -1
- package/dist/types/components/DInputCurrencyBase/DInputCurrencyBase.d.ts +2 -1
- package/dist/types/components/DInputMask/DInputMask.d.ts +2 -1
- package/dist/types/components/DInputSearch/DInputSearch.d.ts +2 -1
- package/dist/types/components/DInputSelect/DInputSelect.d.ts +3 -2
- package/dist/types/components/DInputSwitch/DInputSwitch.d.ts +3 -1
- package/dist/types/components/DSelect/DSelect.d.ts +3 -3
- package/dist/types/components/DStepper/DStepper.d.ts +2 -1
- package/dist/types/components/DStepperDesktop/DStepperDesktop.d.ts +2 -1
- package/dist/types/components/DTableHead/DTableHead.d.ts +9 -0
- package/dist/types/components/DTableHead/index.d.ts +2 -0
- package/dist/types/components/DToastContainer/DToastContainer.d.ts +2 -14
- package/dist/types/components/DToastContainer/useDToast.d.ts +11 -12
- package/dist/types/components/index.d.ts +2 -0
- package/dist/types/contexts/DContext.d.ts +1 -1
- package/dist/types/hooks/useFormatCurrency.d.ts +2 -1
- package/package.json +4 -4
- package/src/style/abstracts/_mixins.scss +41 -21
- package/src/style/abstracts/variables/_+import.scss +11 -3
- package/src/style/abstracts/variables/_border.scss +1 -1
- package/src/style/abstracts/variables/_buttons.scss +3 -5
- package/src/style/abstracts/variables/_colors.scss +10 -10
- package/src/style/abstracts/variables/_forms.scss +24 -50
- package/src/style/abstracts/variables/_quick-action-switch.scss +0 -2
- package/src/style/base/_alert.scss +1 -1
- package/src/style/base/_buttons.scss +41 -16
- package/src/style/base/_form-check.scss +2 -19
- package/src/style/base/_form-switch.scss +4 -53
- package/src/style/components/_+import.scss +3 -2
- package/src/style/components/_d-button-icon.scss +26 -0
- package/src/style/components/_d-close.scss +11 -0
- package/src/style/components/_d-modal.scss +0 -11
- package/src/style/components/_d-offcanvas.scss +0 -11
- package/src/style/components/_d-quick-action-switch.scss +0 -7
- package/src/style/components/_d-table-head.scss +18 -0
- package/src/style/root/_root.scss +42 -36
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { MouseEvent } from 'react';
|
|
2
|
+
import type { BaseProps, ButtonType, ButtonVariant, ComponentSize, FamilyIconProps, InputState } from '../interface';
|
|
3
|
+
type Props = BaseProps & FamilyIconProps & {
|
|
4
|
+
id?: string;
|
|
5
|
+
icon: string;
|
|
6
|
+
size?: ComponentSize;
|
|
7
|
+
variant?: ButtonVariant;
|
|
8
|
+
theme?: string;
|
|
9
|
+
state?: InputState;
|
|
10
|
+
type?: ButtonType;
|
|
11
|
+
loading?: boolean;
|
|
12
|
+
loadingAriaLabel?: string;
|
|
13
|
+
ariaLabel?: string;
|
|
14
|
+
stopPropagationEnabled?: boolean;
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
17
|
+
};
|
|
18
|
+
export default function DButtonIcon({ id, icon, size, className, variant, state, loadingAriaLabel, iconMaterialStyle, ariaLabel, theme, type, loading, disabled, stopPropagationEnabled, style, iconFamilyClass, iconFamilyPrefix, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export {};
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
-
import type { BaseProps, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps, StateIcons } from '../interface';
|
|
3
|
-
declare const ForwardedDInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof BaseProps | keyof FamilyIconProps | keyof LabelIconProps | keyof StartIconProps | keyof EndIconProps | keyof StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & StateIcons & {
|
|
2
|
+
import type { BaseProps, ComponentSize, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps, StateIcons } from '../interface';
|
|
3
|
+
declare const ForwardedDInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof BaseProps | keyof FamilyIconProps | keyof LabelIconProps | keyof StartIconProps | keyof EndIconProps | keyof StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & StateIcons & {
|
|
4
4
|
value?: string | undefined;
|
|
5
5
|
label?: string | undefined;
|
|
6
6
|
loading?: boolean | undefined;
|
|
7
7
|
hint?: string | undefined;
|
|
8
|
+
size?: ComponentSize | undefined;
|
|
8
9
|
invalid?: boolean | undefined;
|
|
9
10
|
valid?: boolean | undefined;
|
|
10
11
|
floatingLabel?: boolean | undefined;
|
|
@@ -8,9 +8,11 @@ type Props = BaseProps & {
|
|
|
8
8
|
ariaLabel?: string;
|
|
9
9
|
checked?: boolean;
|
|
10
10
|
disabled?: boolean;
|
|
11
|
+
invalid?: boolean;
|
|
12
|
+
valid?: boolean;
|
|
11
13
|
indeterminate?: boolean;
|
|
12
14
|
value?: string;
|
|
13
15
|
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
14
16
|
};
|
|
15
|
-
export default function DInputCheck({ id: idProp, type, name, label, ariaLabel, checked, disabled, indeterminate, value, onChange, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export default function DInputCheck({ id: idProp, type, name, label, ariaLabel, checked, disabled, invalid, valid, indeterminate, value, onChange, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
16
18
|
export {};
|
|
@@ -5,11 +5,12 @@ type NonDInputProps = {
|
|
|
5
5
|
maxValue: number;
|
|
6
6
|
onChange?: (value?: number) => void;
|
|
7
7
|
};
|
|
8
|
-
declare const ForwardedDInputCounter: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
|
|
8
|
+
declare const ForwardedDInputCounter: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
|
|
9
9
|
value?: string | undefined;
|
|
10
10
|
label?: string | undefined;
|
|
11
11
|
loading?: boolean | undefined;
|
|
12
12
|
hint?: string | undefined;
|
|
13
|
+
size?: import("../interface").ComponentSize | undefined;
|
|
13
14
|
invalid?: boolean | undefined;
|
|
14
15
|
valid?: boolean | undefined;
|
|
15
16
|
floatingLabel?: boolean | undefined;
|
|
@@ -6,11 +6,12 @@ type NonDInputProps = {
|
|
|
6
6
|
currencyCode?: string;
|
|
7
7
|
onChange?: (value?: number) => void;
|
|
8
8
|
};
|
|
9
|
-
declare const ForwardedDInputCurrencyBase: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
|
|
9
|
+
declare const ForwardedDInputCurrencyBase: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
|
|
10
10
|
value?: string | undefined;
|
|
11
11
|
label?: string | undefined;
|
|
12
12
|
loading?: boolean | undefined;
|
|
13
13
|
hint?: string | undefined;
|
|
14
|
+
size?: import("../interface").ComponentSize | undefined;
|
|
14
15
|
invalid?: boolean | undefined;
|
|
15
16
|
valid?: boolean | undefined;
|
|
16
17
|
floatingLabel?: boolean | undefined;
|
|
@@ -8,11 +8,12 @@ type NonDInputProps = {
|
|
|
8
8
|
currencyCode?: string;
|
|
9
9
|
onChange?: (value?: number) => void;
|
|
10
10
|
};
|
|
11
|
-
declare const ForwardedDInputCurrencyBase: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
|
|
11
|
+
declare const ForwardedDInputCurrencyBase: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
|
|
12
12
|
value?: string | undefined;
|
|
13
13
|
label?: string | undefined;
|
|
14
14
|
loading?: boolean | undefined;
|
|
15
15
|
hint?: string | undefined;
|
|
16
|
+
size?: import("../interface").ComponentSize | undefined;
|
|
16
17
|
invalid?: boolean | undefined;
|
|
17
18
|
valid?: boolean | undefined;
|
|
18
19
|
floatingLabel?: boolean | undefined;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { MaskProps } from '@react-input/mask';
|
|
3
|
-
declare const ForwardedDInputMask: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
|
|
3
|
+
declare const ForwardedDInputMask: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
|
|
4
4
|
value?: string | undefined;
|
|
5
5
|
label?: string | undefined;
|
|
6
6
|
loading?: boolean | undefined;
|
|
7
7
|
hint?: string | undefined;
|
|
8
|
+
size?: import("../interface").ComponentSize | undefined;
|
|
8
9
|
invalid?: boolean | undefined;
|
|
9
10
|
valid?: boolean | undefined;
|
|
10
11
|
floatingLabel?: boolean | undefined;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
declare const ForwardedDInputSearch: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
|
|
2
|
+
declare const ForwardedDInputSearch: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
|
|
3
3
|
value?: string | undefined;
|
|
4
4
|
label?: string | undefined;
|
|
5
5
|
loading?: boolean | undefined;
|
|
6
6
|
hint?: string | undefined;
|
|
7
|
+
size?: import("../interface").ComponentSize | undefined;
|
|
7
8
|
invalid?: boolean | undefined;
|
|
8
9
|
valid?: boolean | undefined;
|
|
9
10
|
floatingLabel?: boolean | undefined;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { FocusEvent, MouseEvent } from 'react';
|
|
2
|
-
import type { BaseProps, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps, StateIcons } from '../interface';
|
|
2
|
+
import type { BaseProps, ComponentSize, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps, StateIcons } from '../interface';
|
|
3
3
|
export type DefaultOption = {
|
|
4
4
|
value: string | number;
|
|
5
5
|
label: string;
|
|
@@ -19,8 +19,9 @@ export type Props<T> = BaseProps & FamilyIconProps & LabelIconProps & StartIconP
|
|
|
19
19
|
onIconEndClick?: (event: MouseEvent) => void;
|
|
20
20
|
options: Array<T>;
|
|
21
21
|
value?: string | number;
|
|
22
|
+
size?: ComponentSize;
|
|
22
23
|
onChange?: (selectedOption: T) => void;
|
|
23
24
|
valueExtractor?: (item: T) => string | number;
|
|
24
25
|
labelExtractor?: (item: T) => string;
|
|
25
26
|
};
|
|
26
|
-
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;
|
|
27
|
+
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, size, floatingLabel, invalid, valid, valueExtractor, labelExtractor, onChange, onBlur, onIconStartClick, onIconEndClick, }: Props<T>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -6,8 +6,10 @@ type Props = BaseProps & {
|
|
|
6
6
|
name?: string;
|
|
7
7
|
checked?: boolean;
|
|
8
8
|
disabled?: boolean;
|
|
9
|
+
invalid?: boolean;
|
|
10
|
+
valid?: boolean;
|
|
9
11
|
readonly?: boolean;
|
|
10
12
|
onChange?: (isChecked: boolean) => void;
|
|
11
13
|
};
|
|
12
|
-
export default function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, readonly, className, style, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export default function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, invalid, valid, readonly, className, style, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
13
15
|
export {};
|
|
@@ -9,8 +9,8 @@ import DSelectLoadingIndicator from './components/DSelectLoadingIndicator';
|
|
|
9
9
|
import DSelectOptionEmoji from './components/DSelectOptionEmoji';
|
|
10
10
|
import DSelectSingleValueEmoji from './components/DSelectSingleValueEmoji';
|
|
11
11
|
import DSelectSingleValueEmojiText from './components/DSelectSingleValueEmojiText';
|
|
12
|
-
import type { BaseProps, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps } from '../interface';
|
|
13
|
-
type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & Omit<SelectProps<Option, IsMulti, Group>, 'isDisabled' | 'isClearable' | 'isLoading' | 'isRtl' | 'isSearchable' | 'isMulti'> & {
|
|
12
|
+
import type { BaseProps, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps, StateIcons } from '../interface';
|
|
13
|
+
type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & StateIcons & Omit<SelectProps<Option, IsMulti, Group>, 'isDisabled' | 'isClearable' | 'isLoading' | 'isRtl' | 'isSearchable' | 'isMulti'> & {
|
|
14
14
|
label?: string;
|
|
15
15
|
hint?: string;
|
|
16
16
|
invalid?: boolean;
|
|
@@ -25,7 +25,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = B
|
|
|
25
25
|
searchable?: SelectProps<Option, IsMulti, Group>['isSearchable'];
|
|
26
26
|
multi?: SelectProps<Option, IsMulti, Group>['isMulti'];
|
|
27
27
|
};
|
|
28
|
-
declare function DSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, className, style, label, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent, disabled, clearable, loading, rtl, searchable, multi, components, defaultValue, onIconStartClick, onIconEndClick, ...props }: Props<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
declare function DSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, className, style, label, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, invalidIcon: invalidIconProp, validIcon: validIconProp, menuWithMaxContent, disabled, clearable, loading, rtl, searchable, multi, components, defaultValue, onIconStartClick, onIconEndClick, ...props }: Props<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
|
|
29
29
|
declare const _default: typeof DSelect & {
|
|
30
30
|
OptionCheck: typeof DSelectOptionCheck;
|
|
31
31
|
OptionIcon: typeof DSelectOptionIcon;
|
|
@@ -12,7 +12,8 @@ type Props = BaseProps & {
|
|
|
12
12
|
iconSuccessFamilyPrefix?: string;
|
|
13
13
|
iconSuccessMaterialStyle?: boolean;
|
|
14
14
|
vertical?: boolean;
|
|
15
|
+
completed?: boolean;
|
|
15
16
|
breakpoint?: BreakpointSize;
|
|
16
17
|
};
|
|
17
|
-
export default function DStepper({ options, currentStep, iconSuccess, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical, breakpoint, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export default function DStepper({ options, currentStep, iconSuccess, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical, breakpoint, className, completed, style, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
18
19
|
export {};
|
|
@@ -11,6 +11,7 @@ type Props = BaseProps & {
|
|
|
11
11
|
iconSuccessFamilyPrefix?: string;
|
|
12
12
|
iconSuccessMaterialStyle?: boolean;
|
|
13
13
|
vertical?: boolean;
|
|
14
|
+
completed?: boolean;
|
|
14
15
|
};
|
|
15
|
-
export default function DStepper({ options, currentStep, iconSuccess: iconSuccessProp, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export default function DStepper({ options, currentStep, iconSuccess: iconSuccessProp, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical, completed, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
16
17
|
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { BaseProps } from '../interface';
|
|
2
|
+
type Props = BaseProps & {
|
|
3
|
+
field: string;
|
|
4
|
+
label: string;
|
|
5
|
+
value?: string;
|
|
6
|
+
onChange: (value: string) => void;
|
|
7
|
+
};
|
|
8
|
+
export default function DTableHead({ className, style, field, label, value, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -1,14 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import { BaseProps } from '../interface';
|
|
4
|
-
type Props = BaseProps & Pick<ToastContainerProps, 'autoClose' | 'closeOnClick' | 'position'> & {
|
|
5
|
-
containerId?: string;
|
|
6
|
-
stacked?: boolean;
|
|
7
|
-
style?: CSSProperties & {
|
|
8
|
-
'--toastify-toast-width': string | number;
|
|
9
|
-
[index: string]: string | number;
|
|
10
|
-
};
|
|
11
|
-
transition?: 'slide' | 'flip' | 'bounce' | 'zoom';
|
|
12
|
-
};
|
|
13
|
-
export default function DToastContainer({ style, className, closeOnClick, position, autoClose, stacked, transition, containerId, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
14
|
-
export {};
|
|
1
|
+
import { ToasterProps } from 'react-hot-toast';
|
|
2
|
+
export default function DToastContainer({ containerClassName, position, reverseOrder, containerStyle, toastOptions, gutter, }: ToasterProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { Renderable, Toast, ValueFunction } from 'react-hot-toast';
|
|
2
|
+
type ToastData = {
|
|
3
|
+
title: string;
|
|
4
|
+
description?: string;
|
|
5
|
+
timestamp?: string;
|
|
5
6
|
icon?: string;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
autoClose?: number | false;
|
|
10
|
-
stacked?: boolean;
|
|
11
|
-
containerId?: string;
|
|
12
|
-
transition?: 'slide' | 'flip' | 'bounce' | 'zoom';
|
|
7
|
+
closeIcon?: string;
|
|
8
|
+
theme?: string;
|
|
9
|
+
soft?: boolean;
|
|
13
10
|
};
|
|
11
|
+
type Props = Partial<Pick<Toast, 'id' | 'duration' | 'position'>>;
|
|
14
12
|
export default function useDToast(): {
|
|
15
|
-
toast: (
|
|
13
|
+
toast: (data: ToastData | ValueFunction<Renderable, Toast>, toastProps: Props) => string;
|
|
16
14
|
};
|
|
15
|
+
export {};
|
|
@@ -2,6 +2,7 @@ export { default as DAlert } from './DAlert';
|
|
|
2
2
|
export { default as DBadge } from './DBadge';
|
|
3
3
|
export { default as DBoxFile } from './DBoxFile';
|
|
4
4
|
export { default as DButton } from './DButton';
|
|
5
|
+
export { default as DButtonIcon } from './DButtonIcon';
|
|
5
6
|
export { default as DCard, DCardHeader, DCardBody, DCardFooter, } from './DCard';
|
|
6
7
|
export { default as DCarousel, DCarouselSlide, } from './DCarousel';
|
|
7
8
|
export { default as DChip } from './DChip';
|
|
@@ -41,3 +42,4 @@ export { default as DTooltip } from './DTooltip';
|
|
|
41
42
|
export { default as DTabs, useTabContext, DTabOption, DTabContent, } from './DTabs';
|
|
42
43
|
export { default as DToast } from './DToast';
|
|
43
44
|
export { default as DToastContainer, useDToast, } from './DToastContainer';
|
|
45
|
+
export { default as DTableHead } from './DTableHead';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { PropsWithChildren } from 'react';
|
|
2
2
|
import { PortalContextProps } from './DPortalContext';
|
|
3
3
|
import type { AlertTypeIconMap } from '../components/interface';
|
|
4
|
-
type CurrencyProps = {
|
|
4
|
+
export type CurrencyProps = {
|
|
5
5
|
symbol: string;
|
|
6
6
|
precision: number;
|
|
7
7
|
separator: string;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"sideEffects": [
|
|
4
4
|
"*.css"
|
|
5
5
|
],
|
|
6
|
-
"version": "1.
|
|
6
|
+
"version": "1.27.0",
|
|
7
7
|
"description": "React Dynamic Framework",
|
|
8
8
|
"license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
|
|
9
9
|
"repository": {
|
|
@@ -81,9 +81,9 @@
|
|
|
81
81
|
"react-content-loader": "^6.2.1",
|
|
82
82
|
"react-datepicker": "^4.21.0",
|
|
83
83
|
"react-dropzone": "^14.2.3",
|
|
84
|
+
"react-hot-toast": "^2.4.1",
|
|
84
85
|
"react-responsive-pagination": "^2.4.1",
|
|
85
|
-
"react-select": "^5.8.0"
|
|
86
|
-
"react-toastify": "^10.0.0"
|
|
86
|
+
"react-select": "^5.8.0"
|
|
87
87
|
},
|
|
88
88
|
"devDependencies": {
|
|
89
89
|
"@babel/core": "^7.23.2",
|
|
@@ -155,5 +155,5 @@
|
|
|
155
155
|
"optional": true
|
|
156
156
|
}
|
|
157
157
|
},
|
|
158
|
-
"gitHead": "
|
|
158
|
+
"gitHead": "6d8d838d164ddfddbb407e5bac99965970656a64"
|
|
159
159
|
}
|
|
@@ -2,18 +2,22 @@
|
|
|
2
2
|
@mixin df-button-variant-variables(
|
|
3
3
|
$color-name,
|
|
4
4
|
$default-color: var(--#{$prefix}#{$color-name}-500),
|
|
5
|
-
$hover-color: var(--#{$prefix}#{$color-name}-600),
|
|
6
|
-
$focus-color: var(--#{$prefix}#{$color-name}-500),
|
|
7
|
-
$active-color: var(--#{$prefix}#{$color-name}-700),
|
|
8
5
|
$default-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-500)),
|
|
6
|
+
$hover-color: var(--#{$prefix}#{$color-name}-600),
|
|
9
7
|
$hover-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
|
|
8
|
+
$focus-color: var(--#{$prefix}#{$color-name}-600),
|
|
10
9
|
$focus-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
|
|
10
|
+
$active-color: var(--#{$prefix}#{$color-name}-700),
|
|
11
11
|
$active-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-700)),
|
|
12
|
-
$disabled-opacity:
|
|
12
|
+
$disabled-opacity: $btn-disabled-opacity,
|
|
13
|
+
$box-shadow: $btn-box-shadow,
|
|
14
|
+
$focus-shadow-rgb: var(--#{$prefix}#{$color-name}-500-rgb),
|
|
15
|
+
$active-box-shadow: $btn-active-box-shadow,
|
|
13
16
|
) {
|
|
14
17
|
--#{$prefix}btn-#{$color-name}-color: #{$default-text-color};
|
|
15
18
|
--#{$prefix}btn-#{$color-name}-bg: #{$default-color};
|
|
16
19
|
--#{$prefix}btn-#{$color-name}-border-color: #{$default-color};
|
|
20
|
+
--#{$prefix}btn-#{$color-name}-box-shadow: #{$box-shadow};
|
|
17
21
|
|
|
18
22
|
--#{$prefix}btn-#{$color-name}-hover-color: #{$hover-text-color};
|
|
19
23
|
--#{$prefix}btn-#{$color-name}-hover-bg: #{$hover-color};
|
|
@@ -22,10 +26,12 @@
|
|
|
22
26
|
--#{$prefix}btn-#{$color-name}-focus-color: #{$focus-text-color};
|
|
23
27
|
--#{$prefix}btn-#{$color-name}-focus-bg: #{$focus-color};
|
|
24
28
|
--#{$prefix}btn-#{$color-name}-focus-border-color: #{$focus-color};
|
|
29
|
+
--#{$prefix}btn-#{$color-name}-focus-shadow-rgb: #{$focus-shadow-rgb};
|
|
25
30
|
|
|
26
31
|
--#{$prefix}btn-#{$color-name}-active-color: #{$active-text-color};
|
|
27
32
|
--#{$prefix}btn-#{$color-name}-active-bg: #{$active-color};
|
|
28
33
|
--#{$prefix}btn-#{$color-name}-active-border-color: #{$active-color};
|
|
34
|
+
--#{$prefix}btn-#{$color-name}-active-box-shadow: #{$active-box-shadow};
|
|
29
35
|
|
|
30
36
|
--#{$prefix}btn-#{$color-name}-disabled-color: #{$default-text-color};
|
|
31
37
|
--#{$prefix}btn-#{$color-name}-disabled-bg: #{$default-color};
|
|
@@ -38,29 +44,35 @@
|
|
|
38
44
|
@mixin df-button-outline-variant-variables(
|
|
39
45
|
$color-name,
|
|
40
46
|
$default-color: var(--#{$prefix}#{$color-name}-500),
|
|
41
|
-
$hover-bg-color: var(--#{$prefix}#{$color-name}-
|
|
42
|
-
$hover-text-color: var(
|
|
43
|
-
$focus-
|
|
44
|
-
$
|
|
45
|
-
$active-bg-color: var(--#{$prefix}#{$color-name}-
|
|
46
|
-
$active-
|
|
47
|
-
$disabled-opacity:
|
|
47
|
+
$hover-bg-color: var(--#{$prefix}#{$color-name}-600),
|
|
48
|
+
$hover-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
|
|
49
|
+
$focus-bg-color: var(--#{$prefix}#{$color-name}-600),
|
|
50
|
+
$focus-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
|
|
51
|
+
$active-bg-color: var(--#{$prefix}#{$color-name}-700),
|
|
52
|
+
$active-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-700)),
|
|
53
|
+
$disabled-opacity: $btn-disabled-opacity,
|
|
54
|
+
$box-shadow: $btn-box-shadow,
|
|
55
|
+
$focus-shadow-rgb: var(--#{$prefix}#{$color-name}-500-rgb),
|
|
56
|
+
$active-box-shadow: $btn-active-box-shadow,
|
|
48
57
|
) {
|
|
49
58
|
--#{$prefix}btn-outline-#{$color-name}-color: #{$default-color};
|
|
50
59
|
--#{$prefix}btn-outline-#{$color-name}-bg: transparent;
|
|
51
60
|
--#{$prefix}btn-outline-#{$color-name}-border-color: #{$default-color};
|
|
61
|
+
--#{$prefix}btn-outline-#{$color-name}-box-shadow: #{$box-shadow};
|
|
52
62
|
|
|
53
63
|
--#{$prefix}btn-outline-#{$color-name}-hover-color: #{$hover-text-color};
|
|
54
64
|
--#{$prefix}btn-outline-#{$color-name}-hover-bg: #{$hover-bg-color};
|
|
55
|
-
--#{$prefix}btn-outline-#{$color-name}-hover-border-color: #{$
|
|
65
|
+
--#{$prefix}btn-outline-#{$color-name}-hover-border-color: #{$hover-bg-color};
|
|
56
66
|
|
|
57
67
|
--#{$prefix}btn-outline-#{$color-name}-focus-color: #{$focus-text-color};
|
|
58
|
-
--#{$prefix}btn-outline-#{$color-name}-focus-bg:
|
|
59
|
-
--#{$prefix}btn-outline-#{$color-name}-focus-border-color: #{$
|
|
68
|
+
--#{$prefix}btn-outline-#{$color-name}-focus-bg: #{$focus-bg-color};
|
|
69
|
+
--#{$prefix}btn-outline-#{$color-name}-focus-border-color: #{$focus-bg-color};
|
|
70
|
+
--#{$prefix}btn-outline-#{$color-name}-focus-shadow-rgb: #{$focus-shadow-rgb};
|
|
60
71
|
|
|
61
72
|
--#{$prefix}btn-outline-#{$color-name}-active-color: #{$active-text-color};
|
|
62
73
|
--#{$prefix}btn-outline-#{$color-name}-active-bg: #{$active-bg-color};
|
|
63
|
-
--#{$prefix}btn-outline-#{$color-name}-active-border-color: #{$active-
|
|
74
|
+
--#{$prefix}btn-outline-#{$color-name}-active-border-color: #{$active-bg-color};
|
|
75
|
+
--#{$prefix}btn-outline-#{$color-name}-active-box-shadow: #{$active-box-shadow};
|
|
64
76
|
|
|
65
77
|
--#{$prefix}btn-outline-#{$color-name}-disabled-color: #{$default-color};
|
|
66
78
|
--#{$prefix}btn-outline-#{$color-name}-disabled-bg: transparent;
|
|
@@ -73,28 +85,33 @@
|
|
|
73
85
|
@mixin df-button-link-variant-variables(
|
|
74
86
|
$color-name,
|
|
75
87
|
$default-color: var(--#{$prefix}#{$color-name}-500),
|
|
76
|
-
$hover-
|
|
77
|
-
$
|
|
78
|
-
$focus-text-color: var(--#{$prefix}#{$color-name}-500),
|
|
88
|
+
$hover-text-color: var(--#{$prefix}#{$color-name}-600),
|
|
89
|
+
$focus-text-color: var(--#{$prefix}#{$color-name}-600),
|
|
79
90
|
$active-text-color: var(--#{$prefix}#{$color-name}-700),
|
|
80
|
-
$active-bg-color: var(--#{$prefix}#{$color-name}-
|
|
81
|
-
$disabled-opacity:
|
|
91
|
+
$active-bg-color: var(--#{$prefix}#{$color-name}-200),
|
|
92
|
+
$disabled-opacity: $btn-disabled-opacity,
|
|
93
|
+
$box-shadow: $btn-box-shadow,
|
|
94
|
+
$active-box-shadow: $btn-active-box-shadow,
|
|
95
|
+
$focus-shadow-rgb: var(--#{$prefix}#{$color-name}-500-rgb),
|
|
82
96
|
) {
|
|
83
97
|
--#{$prefix}btn-link-#{$color-name}-bg: transparent;
|
|
84
98
|
--#{$prefix}btn-link-#{$color-name}-border-color: transparent;
|
|
85
99
|
--#{$prefix}btn-link-#{$color-name}-color: #{$default-color};
|
|
100
|
+
--#{$prefix}btn-link-#{$color-name}-box-shadow: #{$box-shadow};
|
|
86
101
|
|
|
87
|
-
--#{$prefix}btn-link-#{$color-name}-hover-bg:
|
|
102
|
+
--#{$prefix}btn-link-#{$color-name}-hover-bg: transparent;
|
|
88
103
|
--#{$prefix}btn-link-#{$color-name}-hover-border-color: transparent;
|
|
89
104
|
--#{$prefix}btn-link-#{$color-name}-hover-color: #{$hover-text-color};
|
|
90
105
|
|
|
91
106
|
--#{$prefix}btn-link-#{$color-name}-focus-bg: transparent;
|
|
92
107
|
--#{$prefix}btn-link-#{$color-name}-focus-border-color: transparent;
|
|
93
108
|
--#{$prefix}btn-link-#{$color-name}-focus-color: #{$focus-text-color};
|
|
109
|
+
--#{$prefix}btn-link-#{$color-name}-focus-shadow-rgb: #{$focus-shadow-rgb};
|
|
94
110
|
|
|
95
111
|
--#{$prefix}btn-link-#{$color-name}-active-bg: #{$active-bg-color};
|
|
96
112
|
--#{$prefix}btn-link-#{$color-name}-active-border-color: transparent;
|
|
97
113
|
--#{$prefix}btn-link-#{$color-name}-active-color: #{$active-text-color};
|
|
114
|
+
--#{$prefix}btn-link-#{$color-name}-active-box-shadow: #{$active-box-shadow};
|
|
98
115
|
|
|
99
116
|
--#{$prefix}btn-link-#{$color-name}-disabled-bg: transparent;
|
|
100
117
|
--#{$prefix}btn-link-#{$color-name}-disabled-border-color: transparent;
|
|
@@ -112,6 +129,7 @@
|
|
|
112
129
|
--#{$prefix}btn-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-color);
|
|
113
130
|
--#{$prefix}btn-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-bg);
|
|
114
131
|
--#{$prefix}btn-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-border-color);
|
|
132
|
+
--#{$prefix}btn-box-shadow: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-box-shadow);
|
|
115
133
|
|
|
116
134
|
--#{$prefix}btn-hover-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-hover-color);
|
|
117
135
|
--#{$prefix}btn-hover-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-hover-bg);
|
|
@@ -120,10 +138,12 @@
|
|
|
120
138
|
--#{$prefix}btn-focus-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-color);
|
|
121
139
|
--#{$prefix}btn-focus-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-bg);
|
|
122
140
|
--#{$prefix}btn-focus-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-border-color);
|
|
141
|
+
--#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-shadow-rgb);
|
|
123
142
|
|
|
124
143
|
--#{$prefix}btn-active-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-color);
|
|
125
144
|
--#{$prefix}btn-active-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-bg);
|
|
126
145
|
--#{$prefix}btn-active-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-border-color);
|
|
146
|
+
--#{$prefix}btn-active-box-shadow: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-box-shadow);
|
|
127
147
|
|
|
128
148
|
--#{$prefix}btn-disabled-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-color);
|
|
129
149
|
--#{$prefix}btn-disabled-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-bg);
|
|
@@ -16,16 +16,20 @@ $prefix: $variable-prefix !default;
|
|
|
16
16
|
@import "box-shadow";
|
|
17
17
|
|
|
18
18
|
// scss-docs-start focus-ring-variables
|
|
19
|
-
$focus-ring-
|
|
19
|
+
$focus-ring-width: .25rem !default;
|
|
20
|
+
$focus-ring-opacity: .25 !default;
|
|
21
|
+
$focus-ring-blur: 0 !default;
|
|
20
22
|
// custom
|
|
23
|
+
$focus-ring-border-color: var(--#{$prefix}secondary-300-rgb) !default;
|
|
21
24
|
$focus-ring-color-mapping: "secondary-rgb" !default;
|
|
22
25
|
$focus-ring-color: var(--#{$prefix}focus-ring-color) !default;
|
|
23
26
|
// end custom
|
|
27
|
+
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
|
|
24
28
|
// scss-docs-end focus-ring-variables
|
|
25
29
|
|
|
26
30
|
$component-active-color: var(--#{$prefix}white) !default;
|
|
27
31
|
$component-active-bg: var(--#{$prefix}primary) !default;
|
|
28
|
-
$component-focus-
|
|
32
|
+
$component-focus-border-color: var(--#{$prefix}focus-ring-border-color) !default;
|
|
29
33
|
|
|
30
34
|
$transition-fade: opacity .3s linear !default;
|
|
31
35
|
|
|
@@ -40,7 +44,11 @@ $transition-fade: opacity .3s linear !default;
|
|
|
40
44
|
$input-btn-padding-y: $spacer-3 !default;
|
|
41
45
|
$input-btn-padding-x: $spacer-4 !default;
|
|
42
46
|
|
|
43
|
-
$input-btn-focus-width:
|
|
47
|
+
$input-btn-focus-width: $focus-ring-width !default;
|
|
48
|
+
$input-btn-focus-color-opacity: $focus-ring-opacity !default;
|
|
49
|
+
$input-btn-focus-color: $focus-ring-color !default;
|
|
50
|
+
$input-btn-focus-blur: $focus-ring-blur !default;
|
|
51
|
+
$input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
|
|
44
52
|
$input-btn-focus-color-opacity: 1 !default;
|
|
45
53
|
$input-btn-focus-color: rgba(var(--#{$prefix}secondary-rgb), $input-btn-focus-color-opacity) !default;
|
|
46
54
|
$input-btn-focus-blur: 0 !default;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
// Define common padding and border radius sizes and more.
|
|
4
4
|
|
|
5
5
|
// scss-docs-start border-variables
|
|
6
|
-
$border-color: var(--#{$prefix}gray-
|
|
6
|
+
$border-color: var(--#{$prefix}gray-300) !default;
|
|
7
7
|
$border-color-translucent: rgba(var(--#{$prefix}black-rgb), .175) !default;
|
|
8
8
|
// scss-docs-end border-variables
|
|
9
9
|
|
|
@@ -18,11 +18,9 @@ $btn-font-size-lg: $h6-font-size !default;
|
|
|
18
18
|
|
|
19
19
|
$btn-border-width: $input-btn-border-width !default;
|
|
20
20
|
|
|
21
|
-
$btn-box-shadow:
|
|
22
|
-
$btn-
|
|
23
|
-
$btn-
|
|
24
|
-
$btn-disabled-opacity: 1 !default;
|
|
25
|
-
$btn-active-box-shadow: none !default;
|
|
21
|
+
$btn-box-shadow: 0 0 0 transparent !default; // to avoid the none in the bootstrap box-shadow calculation
|
|
22
|
+
$btn-disabled-opacity: .65 !default;
|
|
23
|
+
$btn-active-box-shadow: 0 0 0 transparent !default; // to avoid the none in the bootstrap box-shadow calculation
|
|
26
24
|
|
|
27
25
|
$btn-border-radius: var(--#{$prefix}border-radius-pill) !default;
|
|
28
26
|
$btn-border-radius-sm: var(--#{$prefix}border-radius-pill) !default;
|
|
@@ -3,16 +3,16 @@
|
|
|
3
3
|
// scss-docs-start gray-color-variables
|
|
4
4
|
$white: #fff !default;
|
|
5
5
|
$gray-25: #fbfbfc !default;
|
|
6
|
-
$gray-50: #
|
|
7
|
-
$gray-100: #
|
|
8
|
-
$gray-200: #
|
|
9
|
-
$gray-300: #
|
|
10
|
-
$gray-400: #
|
|
11
|
-
$gray-500: #
|
|
12
|
-
$gray-600: #
|
|
13
|
-
$gray-700: #
|
|
14
|
-
$gray-800: #
|
|
15
|
-
$gray-900: #
|
|
6
|
+
$gray-50: #f0f0f2 !default;
|
|
7
|
+
$gray-100: #e1e1e6 !default;
|
|
8
|
+
$gray-200: #c4c4cd !default;
|
|
9
|
+
$gray-300: #a7a7b4 !default;
|
|
10
|
+
$gray-400: #8a8a9b !default;
|
|
11
|
+
$gray-500: #6d6d82 !default;
|
|
12
|
+
$gray-600: #575768 !default;
|
|
13
|
+
$gray-700: #41414e !default;
|
|
14
|
+
$gray-800: #2b2b34 !default;
|
|
15
|
+
$gray-900: #15151a !default;
|
|
16
16
|
$black: #000 !default;
|
|
17
17
|
// scss-docs-end gray-color-variables
|
|
18
18
|
|