@itcase/ui-web 1.9.82 → 1.9.84
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/Avatar_cjs_B7uiPPJz.js +1 -0
- package/dist/Avatar_es_sVVoRDHX.js +1 -0
- package/dist/Button_cjs_CKSxHfMM.js +1 -0
- package/dist/Button_es_byVASRY8.js +1 -0
- package/dist/{ChipsGroup_cjs_BlbEYAYF.js → ChipsGroup_cjs_BeOUW9Ph.js} +1 -1
- package/dist/{ChipsGroup_es_oBJDKTBL.js → ChipsGroup_es_CVn85hj2.js} +1 -1
- package/dist/{DatePicker_cjs_D96Oz7cl.js → DatePicker_cjs_YbxC7o6W.js} +1 -1
- package/dist/{DatePicker_es_DMePdexK.js → DatePicker_es_B_Ohymbm.js} +1 -1
- package/dist/Group_cjs_CiLUYKP7.js +1 -0
- package/dist/Group_es_DIuSNHx3.js +1 -0
- package/dist/Input_cjs_CgWxKHuR.js +1 -0
- package/dist/Input_es_BLo9TAve.js +1 -0
- package/dist/Label_cjs_NYoev96S.js +1 -0
- package/dist/Label_es_C-a522jk.js +1 -0
- package/dist/{Loader_cjs_CGugAIv_.js → Loader_cjs_BFLrUlMX.js} +1 -1
- package/dist/{Loader_es_DWZILN4t.js → Loader_es_pnhZ5s_O.js} +1 -1
- package/dist/SelectContainer_cjs_DfKmrpLN.js +1 -0
- package/dist/SelectContainer_es_DicmpT12.js +1 -0
- package/dist/cjs/components/Accordion.js +1 -1
- package/dist/cjs/components/Avatar.js +1 -1
- package/dist/cjs/components/AvatarStack.js +1 -1
- package/dist/cjs/components/Badge.js +1 -1
- package/dist/cjs/components/Breadcrumbs.js +1 -1
- package/dist/cjs/components/Button.js +1 -1
- package/dist/cjs/components/Cell.js +1 -1
- package/dist/cjs/components/Checkbox.js +1 -1
- package/dist/cjs/components/Checkmark.js +1 -1
- package/dist/cjs/components/Chips.js +1 -1
- package/dist/cjs/components/Choice.js +1 -1
- package/dist/cjs/components/Code.js +1 -1
- package/dist/cjs/components/CookiesWarning.js +1 -1
- package/dist/cjs/components/Dadata.js +1 -1
- package/dist/cjs/components/DatePeriod.js +1 -1
- package/dist/cjs/components/DatePicker.js +1 -1
- package/dist/cjs/components/Divider.js +1 -1
- package/dist/cjs/components/Drawer.js +1 -1
- package/dist/cjs/components/Dropdown.js +1 -1
- package/dist/cjs/components/Dropzone.js +1 -1
- package/dist/cjs/components/Group.js +1 -1
- package/dist/cjs/components/HeroTitle.js +1 -1
- package/dist/cjs/components/Icon.js +1 -1
- package/dist/cjs/components/Input.js +1 -1
- package/dist/cjs/components/InputNumber.js +1 -1
- package/dist/cjs/components/InputPassword.js +1 -1
- package/dist/cjs/components/Label.js +1 -1
- package/dist/cjs/components/Link.js +1 -1
- package/dist/cjs/components/List.js +1 -1
- package/dist/cjs/components/Loader.js +1 -1
- package/dist/cjs/components/Logo.js +1 -1
- package/dist/cjs/components/MenuItem.js +1 -1
- package/dist/cjs/components/Modal.js +1 -1
- package/dist/cjs/components/ModalSheetBottom.js +1 -1
- package/dist/cjs/components/Notification.js +1 -1
- package/dist/cjs/components/Pagination.js +1 -1
- package/dist/cjs/components/Radio.js +1 -1
- package/dist/cjs/components/Response.js +1 -1
- package/dist/cjs/components/Search.js +1 -1
- package/dist/cjs/components/Segmented.js +1 -1
- package/dist/cjs/components/Select.js +1 -1
- package/dist/cjs/components/Swiper.js +1 -1
- package/dist/cjs/components/Switch.js +1 -1
- package/dist/cjs/components/Tab.js +1 -1
- package/dist/cjs/components/Text.js +1 -1
- package/dist/cjs/components/Textarea.js +1 -1
- package/dist/cjs/components/Tile.js +1 -1
- package/dist/cjs/components/Title.js +1 -1
- package/dist/cjs/components/Tooltip.js +1 -1
- package/dist/cjs/components/Warning.js +1 -1
- package/dist/components/Accordion.js +1 -1
- package/dist/components/Avatar.js +1 -1
- package/dist/components/AvatarStack.js +1 -1
- package/dist/components/Badge.js +1 -1
- package/dist/components/Breadcrumbs.js +1 -1
- package/dist/components/Button.js +1 -1
- package/dist/components/Cell.js +1 -1
- package/dist/components/Checkbox.js +1 -1
- package/dist/components/Checkmark.js +1 -1
- package/dist/components/Chips.js +1 -1
- package/dist/components/Choice.js +1 -1
- package/dist/components/Code.js +1 -1
- package/dist/components/CookiesWarning.js +1 -1
- package/dist/components/Dadata.js +1 -1
- package/dist/components/DatePeriod.js +1 -1
- package/dist/components/DatePicker.js +1 -1
- package/dist/components/Divider.js +1 -1
- package/dist/components/Drawer.js +1 -1
- package/dist/components/Dropdown.js +1 -1
- package/dist/components/Dropzone.js +1 -1
- package/dist/components/Group.js +1 -1
- package/dist/components/HeroTitle.js +1 -1
- package/dist/components/Icon.js +1 -1
- package/dist/components/Input.js +1 -1
- package/dist/components/InputNumber.js +1 -1
- package/dist/components/InputPassword.js +1 -1
- package/dist/components/Label.js +1 -1
- package/dist/components/Link.js +1 -1
- package/dist/components/List.js +1 -1
- package/dist/components/Loader.js +1 -1
- package/dist/components/Logo.js +1 -1
- package/dist/components/MenuItem.js +1 -1
- package/dist/components/Modal.js +1 -1
- package/dist/components/ModalSheetBottom.js +1 -1
- package/dist/components/Notification.js +1 -1
- package/dist/components/Pagination.js +1 -1
- package/dist/components/Radio.js +1 -1
- package/dist/components/Response.js +1 -1
- package/dist/components/Search.js +1 -1
- package/dist/components/Segmented.js +1 -1
- package/dist/components/Select.js +1 -1
- package/dist/components/Swiper.js +1 -1
- package/dist/components/Switch.js +1 -1
- package/dist/components/Tab.js +1 -1
- package/dist/components/Text.js +1 -1
- package/dist/components/Textarea.js +1 -1
- package/dist/components/Tile.js +1 -1
- package/dist/components/Title.js +1 -1
- package/dist/components/Tooltip.js +1 -1
- package/dist/components/Warning.js +1 -1
- package/dist/css/styles/bundles.css +13 -2
- package/dist/primitives_cjs_C-jtJ9pL.js +1 -0
- package/dist/primitives_es_CJQjjxtH.js +1 -0
- package/dist/types/components/Accordion/Accordion.interface.d.ts +1 -3
- package/dist/types/components/Accordion/Accordion.js +2 -2
- package/dist/types/components/Accordion/AccordionItem.js +2 -2
- package/dist/types/components/Avatar/Avatar.interface.d.ts +1 -2
- package/dist/types/components/Avatar/Avatar.js +2 -2
- package/dist/types/components/Avatar/appearance/avatarShape.js +0 -4
- package/dist/types/components/Badge/Badge.interface.d.ts +1 -2
- package/dist/types/components/Badge/Badge.js +2 -2
- package/dist/types/components/Badge/appearance/badgeShape.js +0 -4
- package/dist/types/components/Button/Button.d.ts +0 -1
- package/dist/types/components/Button/Button.interface.d.ts +1 -2
- package/dist/types/components/Button/Button.js +2 -2
- package/dist/types/components/Button/__test__/ButtonTest.stories.d.ts +0 -1
- package/dist/types/components/Button/appearance/buttonShape.js +0 -4
- package/dist/types/components/Button/stories/ButtonDefault.stories.d.ts +0 -1
- package/dist/types/components/Button/stories/ButtonDemo.stories.d.ts +0 -1
- package/dist/types/components/Button/stories/ButtonIcon.stories.d.ts +0 -1
- package/dist/types/components/Button/stories/ButtonLabel.stories.d.ts +0 -1
- package/dist/types/components/Button/stories/ButtonLoading.stories.d.ts +0 -1
- package/dist/types/components/Button/stories/ButtonMuted.stories.d.ts +0 -1
- package/dist/types/components/Button/stories/ButtonMutedIcon.stories.d.ts +0 -1
- package/dist/types/components/Button/stories/ButtonShape.stories.d.ts +0 -1
- package/dist/types/components/Button/stories/ButtonSize.stories.d.ts +0 -1
- package/dist/types/components/Checkbox/Checkbox.interface.d.ts +1 -2
- package/dist/types/components/Checkbox/Checkbox.js +2 -2
- package/dist/types/components/Checkbox/appearance/checkboxShape.js +0 -1
- package/dist/types/components/Chips/Chips.interface.d.ts +1 -2
- package/dist/types/components/Chips/Chips.js +2 -2
- package/dist/types/components/Chips/appearance/chipsShape.js +0 -4
- package/dist/types/components/Choice/Choice.interface.d.ts +1 -2
- package/dist/types/components/Choice/Choice.js +3 -3
- package/dist/types/components/Choice/appearance/choiceShape.js +0 -4
- package/dist/types/components/Code/Code.interface.d.ts +1 -2
- package/dist/types/components/Code/Code.js +2 -2
- package/dist/types/components/Code/appearance/codeShape.js +0 -4
- package/dist/types/components/DatePeriod/DatePeriod.interface.d.ts +1 -2
- package/dist/types/components/DatePeriod/DatePeriod.js +2 -2
- package/dist/types/components/DatePeriod/appearance/datePeriodShape.js +0 -4
- package/dist/types/components/Divider/Divider.interface.d.ts +1 -2
- package/dist/types/components/Divider/Divider.js +2 -2
- package/dist/types/components/Dropdown/Dropdown.interface.d.ts +1 -3
- package/dist/types/components/Dropdown/Dropdown.js +2 -2
- package/dist/types/components/Dropdown/DropdownItem.js +2 -2
- package/dist/types/components/Dropdown/appearance/dropdownShape.js +0 -4
- package/dist/types/components/Dropzone/Dropzone.interface.d.ts +1 -2
- package/dist/types/components/Dropzone/appearance/dropzoneShape.js +0 -4
- package/dist/types/components/Group/Group.d.ts +0 -1
- package/dist/types/components/Group/Group.interface.d.ts +1 -2
- package/dist/types/components/Group/Group.js +2 -2
- package/dist/types/components/Group/stories/GroupAlignItems.stories.d.ts +0 -2
- package/dist/types/components/Group/stories/GroupAlignSelf.stories.d.ts +0 -2
- package/dist/types/components/Group/stories/GroupColumns.stories.d.ts +0 -2
- package/dist/types/components/Group/stories/GroupDirection.stories.d.ts +0 -2
- package/dist/types/components/Group/stories/GroupJustifyContent.stories.d.ts +0 -2
- package/dist/types/components/Group/stories/GroupWrap.stories.d.ts +0 -2
- package/dist/types/components/Icon/Icon.interface.d.ts +1 -2
- package/dist/types/components/Icon/Icon.js +2 -2
- package/dist/types/components/Icon/appearance/iconShape.js +0 -4
- package/dist/types/components/Input/Input.interface.d.ts +1 -2
- package/dist/types/components/Input/Input.js +2 -2
- package/dist/types/components/Input/appearance/inputShape.js +0 -4
- package/dist/types/components/InputNumber/InputNumber.interfaces.d.ts +8 -4
- package/dist/types/components/InputNumber/InputNumber.js +14 -15
- package/dist/types/components/InputNumber/appearance/InputNumberShape.js +0 -4
- package/dist/types/components/InputPassword/InputPassword.interface.d.ts +1 -2
- package/dist/types/components/InputPassword/InputPassword.js +2 -2
- package/dist/types/components/InputPassword/appearance/inputPasswordShape.js +0 -4
- package/dist/types/components/Label/Label.interface.d.ts +1 -2
- package/dist/types/components/Label/Label.js +2 -2
- package/dist/types/components/Label/appearance/labelShape.js +0 -4
- package/dist/types/components/Loader/Loader.interface.d.ts +1 -2
- package/dist/types/components/Loader/Loader.js +2 -2
- package/dist/types/components/MenuItem/MenuItem.interface.d.ts +1 -3
- package/dist/types/components/MenuItem/MenuItem.js +3 -5
- package/dist/types/components/MenuItem/appearance/menuItemShape.js +0 -4
- package/dist/types/components/Modal/Modal.d.ts +0 -1
- package/dist/types/components/Modal/Modal.interface.d.ts +1 -2
- package/dist/types/components/Modal/Modal.js +2 -2
- package/dist/types/components/Modal/appearance/modalShape.js +0 -4
- package/dist/types/components/Modal/stories/ModalAbsoluteHeader.stories.d.ts +0 -1
- package/dist/types/components/Modal/stories/ModalDemo.stories.d.ts +0 -1
- package/dist/types/components/Modal/stories/ModalScroll.stories.d.ts +0 -1
- package/dist/types/components/Modal/stories/ModalSize.stories.d.ts +0 -1
- package/dist/types/components/Modal/stories/ModalStickyHeader.stories.d.ts +0 -1
- package/dist/types/components/Modal/stories/ModalStyle.stories.d.ts +0 -1
- package/dist/types/components/Notification/Notification.interface.d.ts +1 -2
- package/dist/types/components/Notification/Notification.js +2 -2
- package/dist/types/components/Notification/appearance/notificationShape.js +0 -4
- package/dist/types/components/Pagination/Pagination.interface.d.ts +1 -3
- package/dist/types/components/Pagination/Pagination.js +2 -3
- package/dist/types/components/Pagination/appearance/paginationShape.js +0 -8
- package/dist/types/components/Radio/Radio.interface.d.ts +1 -2
- package/dist/types/components/Radio/Radio.js +2 -2
- package/dist/types/components/Radio/appearance/radioShape.js +0 -4
- package/dist/types/components/Response/Response.d.ts +0 -1
- package/dist/types/components/Response/Response.interface.d.ts +1 -2
- package/dist/types/components/Response/Response.js +2 -2
- package/dist/types/components/Response/stories/ResponseConfirm.stories.d.ts +0 -1
- package/dist/types/components/Response/stories/ResponseDemo.stories.d.ts +0 -1
- package/dist/types/components/Response/stories/ResponseError.stories.d.ts +0 -1
- package/dist/types/components/Response/stories/ResponseFail.stories.d.ts +0 -1
- package/dist/types/components/Response/stories/ResponseNothingFound.stories.d.ts +0 -1
- package/dist/types/components/Response/stories/ResponseRefresh.stories.d.ts +0 -1
- package/dist/types/components/Response/stories/ResponseSuccess.stories.d.ts +0 -1
- package/dist/types/components/Response/stories/ResponseUnableLoadData.stories.d.ts +0 -1
- package/dist/types/components/Response/stories/ResponseWarning.stories.d.ts +0 -1
- package/dist/types/components/Search/Search.interface.d.ts +1 -3
- package/dist/types/components/Search/SearchInput.d.ts +0 -1
- package/dist/types/components/Search/SearchInput.js +2 -2
- package/dist/types/components/Search/SearchResult.d.ts +0 -1
- package/dist/types/components/Search/SearchResult.js +2 -2
- package/dist/types/components/Search/appearance/searchShape.js +0 -4
- package/dist/types/components/Search/stories/SearchInputDefault.stories.d.ts +0 -1
- package/dist/types/components/Search/stories/SearchInputDemo.stories.d.ts +0 -1
- package/dist/types/components/Search/stories/SearchInputDisabled.stories.d.ts +0 -1
- package/dist/types/components/Search/stories/SearchInputError.stories.d.ts +0 -1
- package/dist/types/components/Search/stories/SearchInputRequire.stories.d.ts +0 -1
- package/dist/types/components/Search/stories/SearchInputShape.stories.d.ts +0 -1
- package/dist/types/components/Search/stories/SearchInputSize.stories.d.ts +0 -1
- package/dist/types/components/Search/stories/SearchInputStyle.stories.d.ts +0 -1
- package/dist/types/components/Search/stories/SearchInputSuccess.stories.d.ts +0 -1
- package/dist/types/components/Segmented/Segmented.interface.d.ts +1 -2
- package/dist/types/components/Segmented/Segmented.js +2 -2
- package/dist/types/components/Segmented/appearance/segmentedShape.js +0 -4
- package/dist/types/components/Select/Select.interface.d.ts +1 -5
- package/dist/types/components/Select/SelectContainer.js +3 -3
- package/dist/types/components/Select/SelectMenu.js +2 -2
- package/dist/types/components/Select/SelectOption.js +2 -2
- package/dist/types/components/Select/appearance/selectShape.js +0 -4
- package/dist/types/components/Tab/Tab.interface.d.ts +1 -2
- package/dist/types/components/Tab/Tab.js +2 -2
- package/dist/types/components/Textarea/Textarea.interface.d.ts +1 -2
- package/dist/types/components/Textarea/Textarea.js +2 -2
- package/dist/types/components/Textarea/appearance/textareaShape.js +0 -4
- package/dist/types/components/Tile/Tile.interface.d.ts +1 -2
- package/dist/types/components/Tile/Tile.js +2 -2
- package/dist/types/components/Tile/appearance/tileShape.js +0 -4
- package/dist/types/components/Tooltip/Tooltip.d.ts +0 -1
- package/dist/types/components/Tooltip/Tooltip.interface.d.ts +1 -2
- package/dist/types/components/Tooltip/Tooltip.js +2 -2
- package/dist/types/components/Tooltip/appearance/tooltipShape.js +0 -4
- package/dist/types/components/Tooltip/stories/TooltipAppearance.stories.d.ts +0 -1
- package/dist/types/components/Tooltip/stories/TooltipArrow.stories.d.ts +0 -1
- package/dist/types/components/Tooltip/stories/TooltipCustom.stories.d.ts +0 -1
- package/dist/types/components/Tooltip/stories/TooltipDemo.stories.d.ts +0 -1
- package/dist/types/components/Tooltip/stories/TooltipSize.stories.d.ts +0 -1
- package/dist/types/components/Tooltip/stories/TooltipStyle.stories.d.ts +0 -1
- package/dist/types/components/Warning/Warning.interface.d.ts +1 -2
- package/dist/types/components/Warning/Warning.js +2 -2
- package/dist/types/components/Warning/appearance/warningShape.js +0 -4
- package/package.json +3 -3
- package/dist/Avatar_cjs_DdnwG1w2.js +0 -1
- package/dist/Avatar_es_euIbzcZ-.js +0 -1
- package/dist/Button_cjs_CzPantyj.js +0 -1
- package/dist/Button_es_BVekDLIK.js +0 -1
- package/dist/Group_cjs_BflQVW_G.js +0 -1
- package/dist/Group_es_YMaKEE-1.js +0 -1
- package/dist/Input_cjs_lvK2GCQw.js +0 -1
- package/dist/Input_es_BrC02Clu.js +0 -1
- package/dist/Label_cjs_BQhRLATI.js +0 -1
- package/dist/Label_es_CXOrFvDM.js +0 -1
- package/dist/SelectContainer_cjs_MCml-znP.js +0 -1
- package/dist/SelectContainer_es_DhPannXl.js +0 -1
- package/dist/primitives_cjs_CHD2pBSn.js +0 -1
- package/dist/primitives_es_AOPzysvv.js +0 -1
|
@@ -7,19 +7,15 @@ const dropdownAppearanceShape = {
|
|
|
7
7
|
},
|
|
8
8
|
roundedXL: {
|
|
9
9
|
shape: 'rounded',
|
|
10
|
-
shapeStrength: '2m',
|
|
11
10
|
},
|
|
12
11
|
roundedL: {
|
|
13
12
|
shape: 'rounded',
|
|
14
|
-
shapeStrength: '1_5m',
|
|
15
13
|
},
|
|
16
14
|
roundedM: {
|
|
17
15
|
shape: 'rounded',
|
|
18
|
-
shapeStrength: '1m',
|
|
19
16
|
},
|
|
20
17
|
roundedS: {
|
|
21
18
|
shape: 'rounded',
|
|
22
|
-
shapeStrength: '0_5m',
|
|
23
19
|
},
|
|
24
20
|
};
|
|
25
21
|
export { dropdownAppearanceShape };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AppearanceConfig, AppearanceKeysState, AppearanceSizeKey, BorderColorHoverProps, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceStateDefault, DirectionProps, FillHoverProps, FillProps, ShapeProps
|
|
1
|
+
import { AppearanceConfig, AppearanceKeysState, AppearanceSizeKey, BorderColorHoverProps, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceStateDefault, DirectionProps, FillHoverProps, FillProps, ShapeProps } from '@itcase/types-ui';
|
|
2
2
|
import { StyleAttributes } from '@itcase/ui-core/hooks';
|
|
3
3
|
import { ButtonProps } from '../Button/Button.interface';
|
|
4
4
|
import { TextProps } from '../Text/Text.interface';
|
|
@@ -28,7 +28,6 @@ type DropzoneAppearanceProps = {
|
|
|
28
28
|
removeThumbTextHoverColor?: TextProps['textColorHover'];
|
|
29
29
|
removeThumbTextWeight?: ButtonProps['labelTextWeight'];
|
|
30
30
|
shape?: ShapeProps;
|
|
31
|
-
shapeStrength?: ShapeStrengthProps;
|
|
32
31
|
size?: AppearanceSizeKey;
|
|
33
32
|
thumbBorderColor?: BorderColorProps;
|
|
34
33
|
thumbBorderColorHover?: BorderColorHoverProps;
|
|
@@ -7,19 +7,15 @@ const dropzoneAppearanceShape = {
|
|
|
7
7
|
},
|
|
8
8
|
roundedXL: {
|
|
9
9
|
shape: 'rounded',
|
|
10
|
-
shapeStrength: '2m',
|
|
11
10
|
},
|
|
12
11
|
roundedL: {
|
|
13
12
|
shape: 'rounded',
|
|
14
|
-
shapeStrength: '1_5m',
|
|
15
13
|
},
|
|
16
14
|
roundedM: {
|
|
17
15
|
shape: 'rounded',
|
|
18
|
-
shapeStrength: '1m',
|
|
19
16
|
},
|
|
20
17
|
roundedS: {
|
|
21
18
|
shape: 'rounded',
|
|
22
|
-
shapeStrength: '0_5m',
|
|
23
19
|
},
|
|
24
20
|
};
|
|
25
21
|
export { dropzoneAppearanceShape };
|
|
@@ -26,7 +26,6 @@ declare const Group: React.ForwardRefExoticComponent<{
|
|
|
26
26
|
justifyContent?: import("@itcase/types-ui").JustifyContentProps;
|
|
27
27
|
labelTextColor?: import("../Label").LabelProps["labelTextColor"];
|
|
28
28
|
shape?: import("@itcase/types-ui").ShapeProps;
|
|
29
|
-
shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
|
|
30
29
|
stacking?: import("@itcase/types-ui").StackingProps;
|
|
31
30
|
textColor?: import("../Text").TextProps["textColor"];
|
|
32
31
|
textColorActive?: import("../Text").TextProps["textColorActive"];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { CSSProperties, ElementType, MouseEventHandler, ReactNode } from 'react';
|
|
2
2
|
import { GeneratedId } from '@itcase/types-core';
|
|
3
|
-
import { AlignProps, AppearanceConfig, AppearanceKeysDefault, BorderColorActiveProps, BorderColorProps, BorderTypeProps, BorderWidthProps, DirectionProps, ElevationProps, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, HeightProps, JustifyContentProps, ShapeProps,
|
|
3
|
+
import { AlignProps, AppearanceConfig, AppearanceKeysDefault, BorderColorActiveProps, BorderColorProps, BorderTypeProps, BorderWidthProps, DirectionProps, ElevationProps, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, HeightProps, JustifyContentProps, ShapeProps, StackingProps, WidthProps, WrapProps } from '@itcase/types-ui';
|
|
4
4
|
import { StyleAttributes } from '@itcase/ui-core/hooks';
|
|
5
5
|
import { IconProps } from 'src/components/Icon/Icon.interface';
|
|
6
6
|
import { LabelProps } from 'src/components/Label/Label.interface';
|
|
@@ -30,7 +30,6 @@ type GroupAppearanceProps = {
|
|
|
30
30
|
justifyContent?: JustifyContentProps;
|
|
31
31
|
labelTextColor?: LabelProps['labelTextColor'];
|
|
32
32
|
shape?: ShapeProps;
|
|
33
|
-
shapeStrength?: ShapeStrengthProps;
|
|
34
33
|
stacking?: StackingProps;
|
|
35
34
|
textColor?: TextProps['textColor'];
|
|
36
35
|
textColorActive?: TextProps['textColorActive'];
|
|
@@ -13,7 +13,7 @@ const Group = React.forwardRef(function Group(props, ref) {
|
|
|
13
13
|
const { id, appearance, className, dataTestId, dataTour, name, dataId, easing, htmlFor, print, scroll, style, tag: Tag = 'div', isActive, isDisabled, onClick, onMouseDown, onMouseEnter, onMouseLeave, children, } = props;
|
|
14
14
|
const appearanceConfig = useAppearanceConfig(appearance, groupConfig);
|
|
15
15
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
16
|
-
const { directionClass, flexGrowClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColorActiveClass, textColorClass, textColorHoverClass, columnsClass, elevationClass, heightClass, hoverFilterClass, iconFillHoverClass, shapeClass,
|
|
16
|
+
const { directionClass, flexGrowClass, justifyContentClass, alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, textColorActiveClass, textColorClass, textColorHoverClass, columnsClass, elevationClass, heightClass, hoverFilterClass, iconFillHoverClass, shapeClass, stackingClass, widthClass, wrapClass, } = propsGenerator;
|
|
17
17
|
const { styles: groupStyles } = useStyles(props);
|
|
18
18
|
return (_jsx(Tag, { id: id, className: clsx(className, 'group', easing && `easing_${easing}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, hoverFilterClass && `hover-filter_${hoverFilterClass}`, columnsClass && `group_columns_${columnsClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, justifyContentClass && `justify-content_${justifyContentClass}`, textColorClass && `group_text-color_${textColorClass}`, textColorActiveClass &&
|
|
19
19
|
`group_text-color_active_${textColorActiveClass}`, textColorHoverClass && `group_text-color_hover_${textColorHoverClass}`, iconFillHoverClass && `group_icon_fill_hover_${iconFillHoverClass}`, !isDisabled
|
|
@@ -25,7 +25,7 @@ const Group = React.forwardRef(function Group(props, ref) {
|
|
|
25
25
|
? fillHoverClass && `fill_hover_${fillHoverClass}`
|
|
26
26
|
: fillActiveHoverClass &&
|
|
27
27
|
`fill_active_hover_${fillActiveHoverClass}`
|
|
28
|
-
: fillDisabledClass && `fill_${fillDisabledClass}`, scroll && `group_scroll_${scroll}`, stackingClass && `group_stacking_${stackingClass}`, wrapClass && `group_wrap_${wrapClass}`, flexGrowClass && `flex-grow_${flexGrowClass}`, shapeClass && `shape_${shapeClass}`,
|
|
28
|
+
: fillDisabledClass && `fill_${fillDisabledClass}`, scroll && `group_scroll_${scroll}`, stackingClass && `group_stacking_${stackingClass}`, wrapClass && `group_wrap_${wrapClass}`, flexGrowClass && `flex-grow_${flexGrowClass}`, shapeClass && `shape_${shapeClass}`, !isDisabled
|
|
29
29
|
? !isActive
|
|
30
30
|
? borderColorClass && `border-color_${borderColorClass}`
|
|
31
31
|
: borderColorActiveClass &&
|
|
@@ -26,7 +26,6 @@ declare const meta: {
|
|
|
26
26
|
justifyContent?: import("@itcase/types-ui").JustifyContentProps;
|
|
27
27
|
labelTextColor?: import("../../Label").LabelProps["labelTextColor"];
|
|
28
28
|
shape?: import("@itcase/types-ui").ShapeProps;
|
|
29
|
-
shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
|
|
30
29
|
stacking?: import("@itcase/types-ui").StackingProps;
|
|
31
30
|
textColor?: import("src/components/Text").TextProps["textColor"];
|
|
32
31
|
textColorActive?: import("src/components/Text").TextProps["textColorActive"];
|
|
@@ -88,7 +87,6 @@ declare const meta: {
|
|
|
88
87
|
justifyContent?: import("@itcase/types-ui").JustifyContentProps;
|
|
89
88
|
labelTextColor?: import("../../Label").LabelProps["labelTextColor"];
|
|
90
89
|
shape?: import("@itcase/types-ui").ShapeProps;
|
|
91
|
-
shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
|
|
92
90
|
stacking?: import("@itcase/types-ui").StackingProps;
|
|
93
91
|
textColor?: import("src/components/Text").TextProps["textColor"];
|
|
94
92
|
textColorActive?: import("src/components/Text").TextProps["textColorActive"];
|
|
@@ -26,7 +26,6 @@ declare const meta: {
|
|
|
26
26
|
justifyContent?: import("@itcase/types-ui").JustifyContentProps;
|
|
27
27
|
labelTextColor?: import("../../Label").LabelProps["labelTextColor"];
|
|
28
28
|
shape?: import("@itcase/types-ui").ShapeProps;
|
|
29
|
-
shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
|
|
30
29
|
stacking?: import("@itcase/types-ui").StackingProps;
|
|
31
30
|
textColor?: import("src/components/Text").TextProps["textColor"];
|
|
32
31
|
textColorActive?: import("src/components/Text").TextProps["textColorActive"];
|
|
@@ -88,7 +87,6 @@ declare const meta: {
|
|
|
88
87
|
justifyContent?: import("@itcase/types-ui").JustifyContentProps;
|
|
89
88
|
labelTextColor?: import("../../Label").LabelProps["labelTextColor"];
|
|
90
89
|
shape?: import("@itcase/types-ui").ShapeProps;
|
|
91
|
-
shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
|
|
92
90
|
stacking?: import("@itcase/types-ui").StackingProps;
|
|
93
91
|
textColor?: import("src/components/Text").TextProps["textColor"];
|
|
94
92
|
textColorActive?: import("src/components/Text").TextProps["textColorActive"];
|
|
@@ -26,7 +26,6 @@ declare const meta: {
|
|
|
26
26
|
justifyContent?: import("@itcase/types-ui").JustifyContentProps;
|
|
27
27
|
labelTextColor?: import("../../Label").LabelProps["labelTextColor"];
|
|
28
28
|
shape?: import("@itcase/types-ui").ShapeProps;
|
|
29
|
-
shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
|
|
30
29
|
stacking?: import("@itcase/types-ui").StackingProps;
|
|
31
30
|
textColor?: import("src/components/Text").TextProps["textColor"];
|
|
32
31
|
textColorActive?: import("src/components/Text").TextProps["textColorActive"];
|
|
@@ -88,7 +87,6 @@ declare const meta: {
|
|
|
88
87
|
justifyContent?: import("@itcase/types-ui").JustifyContentProps;
|
|
89
88
|
labelTextColor?: import("../../Label").LabelProps["labelTextColor"];
|
|
90
89
|
shape?: import("@itcase/types-ui").ShapeProps;
|
|
91
|
-
shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
|
|
92
90
|
stacking?: import("@itcase/types-ui").StackingProps;
|
|
93
91
|
textColor?: import("src/components/Text").TextProps["textColor"];
|
|
94
92
|
textColorActive?: import("src/components/Text").TextProps["textColorActive"];
|
|
@@ -26,7 +26,6 @@ declare const meta: {
|
|
|
26
26
|
justifyContent?: import("@itcase/types-ui").JustifyContentProps;
|
|
27
27
|
labelTextColor?: import("../../Label").LabelProps["labelTextColor"];
|
|
28
28
|
shape?: import("@itcase/types-ui").ShapeProps;
|
|
29
|
-
shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
|
|
30
29
|
stacking?: import("@itcase/types-ui").StackingProps;
|
|
31
30
|
textColor?: import("src/components/Text").TextProps["textColor"];
|
|
32
31
|
textColorActive?: import("src/components/Text").TextProps["textColorActive"];
|
|
@@ -87,7 +86,6 @@ declare const meta: {
|
|
|
87
86
|
justifyContent?: import("@itcase/types-ui").JustifyContentProps;
|
|
88
87
|
labelTextColor?: import("../../Label").LabelProps["labelTextColor"];
|
|
89
88
|
shape?: import("@itcase/types-ui").ShapeProps;
|
|
90
|
-
shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
|
|
91
89
|
stacking?: import("@itcase/types-ui").StackingProps;
|
|
92
90
|
textColor?: import("src/components/Text").TextProps["textColor"];
|
|
93
91
|
textColorActive?: import("src/components/Text").TextProps["textColorActive"];
|
|
@@ -26,7 +26,6 @@ declare const meta: {
|
|
|
26
26
|
justifyContent?: import("@itcase/types-ui").JustifyContentProps;
|
|
27
27
|
labelTextColor?: import("../../Label").LabelProps["labelTextColor"];
|
|
28
28
|
shape?: import("@itcase/types-ui").ShapeProps;
|
|
29
|
-
shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
|
|
30
29
|
stacking?: import("@itcase/types-ui").StackingProps;
|
|
31
30
|
textColor?: import("src/components/Text").TextProps["textColor"];
|
|
32
31
|
textColorActive?: import("src/components/Text").TextProps["textColorActive"];
|
|
@@ -88,7 +87,6 @@ declare const meta: {
|
|
|
88
87
|
justifyContent?: import("@itcase/types-ui").JustifyContentProps;
|
|
89
88
|
labelTextColor?: import("../../Label").LabelProps["labelTextColor"];
|
|
90
89
|
shape?: import("@itcase/types-ui").ShapeProps;
|
|
91
|
-
shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
|
|
92
90
|
stacking?: import("@itcase/types-ui").StackingProps;
|
|
93
91
|
textColor?: import("src/components/Text").TextProps["textColor"];
|
|
94
92
|
textColorActive?: import("src/components/Text").TextProps["textColorActive"];
|
|
@@ -26,7 +26,6 @@ declare const meta: {
|
|
|
26
26
|
justifyContent?: import("@itcase/types-ui").JustifyContentProps;
|
|
27
27
|
labelTextColor?: import("../../Label").LabelProps["labelTextColor"];
|
|
28
28
|
shape?: import("@itcase/types-ui").ShapeProps;
|
|
29
|
-
shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
|
|
30
29
|
stacking?: import("@itcase/types-ui").StackingProps;
|
|
31
30
|
textColor?: import("src/components/Text").TextProps["textColor"];
|
|
32
31
|
textColorActive?: import("src/components/Text").TextProps["textColorActive"];
|
|
@@ -88,7 +87,6 @@ declare const meta: {
|
|
|
88
87
|
justifyContent?: import("@itcase/types-ui").JustifyContentProps;
|
|
89
88
|
labelTextColor?: import("../../Label").LabelProps["labelTextColor"];
|
|
90
89
|
shape?: import("@itcase/types-ui").ShapeProps;
|
|
91
|
-
shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
|
|
92
90
|
stacking?: import("@itcase/types-ui").StackingProps;
|
|
93
91
|
textColor?: import("src/components/Text").TextProps["textColor"];
|
|
94
92
|
textColorActive?: import("src/components/Text").TextProps["textColorActive"];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CSSProperties, FunctionComponent, MouseEvent, ReactNode, SVGAttributes, SVGProps } from 'react';
|
|
2
|
-
import { AlignmentProps, AlignProps, AppearanceConfig, AppearanceKeysIcon, AppearanceSizeKey, BorderColorHoverProps, BorderColorProps, BorderTypeProps, BorderWidthProps, CenteringProps, CompositeAppearanceIconKeys, DirectionProps, FillActiveHoverProps, FillActiveProps, FillDisabledProps, FillHoverProps, FillProps, FillSizeProps, IconFillSizeProps, IconSizeProps, ItemFillProps, ShapeProps,
|
|
2
|
+
import { AlignmentProps, AlignProps, AppearanceConfig, AppearanceKeysIcon, AppearanceSizeKey, BorderColorHoverProps, BorderColorProps, BorderTypeProps, BorderWidthProps, CenteringProps, CompositeAppearanceIconKeys, DirectionProps, FillActiveHoverProps, FillActiveProps, FillDisabledProps, FillHoverProps, FillProps, FillSizeProps, IconFillSizeProps, IconSizeProps, ItemFillProps, ShapeProps, SizePXProps, TextColorProps, TextSizeProps } from '@itcase/types-ui';
|
|
3
3
|
import { StyleAttributes } from '@itcase/ui-core/hooks';
|
|
4
4
|
import { BadgeProps } from '../Badge/Badge.interface';
|
|
5
5
|
import { LinkWrapperProps } from '../Link/Link.interface';
|
|
@@ -34,7 +34,6 @@ type IconAppearanceProps = {
|
|
|
34
34
|
iconShape?: ShapeProps;
|
|
35
35
|
iconSize?: IconSizeProps;
|
|
36
36
|
shape?: ShapeProps;
|
|
37
|
-
shapeStrength?: ShapeStrengthProps;
|
|
38
37
|
size?: SizePXProps;
|
|
39
38
|
textColor?: TextColorProps;
|
|
40
39
|
textSize?: TextSizeProps;
|
|
@@ -42,7 +42,7 @@ const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
|
|
|
42
42
|
}, [SvgImage, imageSrc, width, height, svgImageStyles, saveFillStroke]);
|
|
43
43
|
const appearanceConfig = useAppearanceConfig(appearance, iconConfig, isDisabled);
|
|
44
44
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
45
|
-
const { alignmentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, fillSizeClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, centeringClass, iconFillActiveClass, iconFillActiveHoverClass, iconFillClass, iconFillDisabledClass, iconFillHoverClass, iconSizeClass, shapeClass,
|
|
45
|
+
const { alignmentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, fillSizeClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, centeringClass, iconFillActiveClass, iconFillActiveHoverClass, iconFillClass, iconFillDisabledClass, iconFillHoverClass, iconSizeClass, shapeClass, tooltipAppearance, tooltipText, tooltipTextSize, tooltipTitle, tooltipTitleSize, } = propsGenerator;
|
|
46
46
|
const { styles: iconStyles } = useStyles(props);
|
|
47
47
|
return (_jsxs("div", { id: id, className: clsx(className, 'icon', !isActive
|
|
48
48
|
? fillClass && `fill_${fillClass}`
|
|
@@ -56,7 +56,7 @@ const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
|
|
|
56
56
|
: iconFillActiveHoverClass &&
|
|
57
57
|
`icon_fill_active_hover_${iconFillActiveHoverClass}`, isDisabled &&
|
|
58
58
|
iconFillDisabledClass &&
|
|
59
|
-
`icon_fill_disabled_${iconFillDisabledClass}`, shapeClass && `shape_${shapeClass}`,
|
|
59
|
+
`icon_fill_disabled_${iconFillDisabledClass}`, shapeClass && `shape_${shapeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
|
|
60
60
|
`border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, badgeValue && 'icon_with-badge', centeringClass && `centering_${centeringClass}`, onClick && 'cursor_type_pointer', isSkeleton && `skeleton`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, _jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && `icon_size_${iconSizeClass}`), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (_jsx(Badge, { appearance: mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: clsx(badgeClass, 'icon__badge'), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (_jsx(Tooltip, { appearance: tooltipAppearance, className: clsx(className, 'icon__tooltip', alignmentClass && `alignment_${alignmentClass}`), title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
|
|
61
61
|
}));
|
|
62
62
|
const removeFillStroke = (code) => {
|
|
@@ -7,19 +7,15 @@ const iconAppearanceShape = {
|
|
|
7
7
|
},
|
|
8
8
|
roundedXL: {
|
|
9
9
|
shape: 'rounded',
|
|
10
|
-
shapeStrength: '2m',
|
|
11
10
|
},
|
|
12
11
|
roundedL: {
|
|
13
12
|
shape: 'rounded',
|
|
14
|
-
shapeStrength: '1_5m',
|
|
15
13
|
},
|
|
16
14
|
roundedM: {
|
|
17
15
|
shape: 'rounded',
|
|
18
|
-
shapeStrength: '1m',
|
|
19
16
|
},
|
|
20
17
|
roundedS: {
|
|
21
18
|
shape: 'rounded',
|
|
22
|
-
shapeStrength: '0_5m',
|
|
23
19
|
},
|
|
24
20
|
};
|
|
25
21
|
export { iconAppearanceShape };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AppearanceConfig, AppearanceKeysState, BorderColorHoverProps, BorderColorProps, BorderWidthProps, CompositeAppearanceStateDefault, FillHoverProps, FillProps, ShapeProps,
|
|
1
|
+
import { AppearanceConfig, AppearanceKeysState, BorderColorHoverProps, BorderColorProps, BorderWidthProps, CompositeAppearanceStateDefault, FillHoverProps, FillProps, ShapeProps, SizeProps, WidthProps } from '@itcase/types-ui';
|
|
2
2
|
import type { StyleAttributes } from '@itcase/ui-core/hooks';
|
|
3
3
|
import { TextProps } from 'src/components/Text/Text.interface';
|
|
4
4
|
type InputAppearanceProps = {
|
|
@@ -15,7 +15,6 @@ type InputAppearanceProps = {
|
|
|
15
15
|
placeholderTextColor?: TextProps['textColor'];
|
|
16
16
|
placeholderTextColorDisabled?: TextProps['textColor'];
|
|
17
17
|
shape?: ShapeProps;
|
|
18
|
-
shapeStrength?: ShapeStrengthProps;
|
|
19
18
|
size?: SizeProps;
|
|
20
19
|
textColor?: TextProps['textColor'];
|
|
21
20
|
textSize?: TextProps['size'];
|
|
@@ -13,9 +13,9 @@ const Input = React.forwardRef(function Input(props, ref) {
|
|
|
13
13
|
const { id, appearance, className, dataTestId, dataTour, type = 'text', name, autocomplete, index, placeholder, value, isDisabled, isSkeleton, isReadOnly, onClick, onBlur, onChange, onFocus, onKeyDown, } = props;
|
|
14
14
|
const appearanceConfig = useAppearanceConfig(appearance, inputConfig, isDisabled);
|
|
15
15
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
16
|
-
const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass,
|
|
16
|
+
const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, sizeClass, widthClass, } = propsGenerator;
|
|
17
17
|
const fallbackId = useId();
|
|
18
18
|
return (_jsx("input", { id: String(id ?? fallbackId), className: clsx(className, 'input', type === 'number' && 'input_type_number', isDisabled && 'input_state_disabled', (textSizeClass || textColorClass || textWeightClass) && 'text', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, placeholderTextColorClass &&
|
|
19
|
-
`placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`,
|
|
19
|
+
`placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`, isSkeleton && 'skeleton'), type: type, ref: ref, autoComplete: autocomplete, "data-index": index, "data-testid": dataTestId || (name ? `${name}-input` : 'input'), "data-tour": dataTour, disabled: isDisabled, placeholder: placeholder, readOnly: isReadOnly, value: value, onClick: onClick, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
|
|
20
20
|
});
|
|
21
21
|
export { Input, inputConfig };
|
|
@@ -7,19 +7,15 @@ const inputAppearanceShape = {
|
|
|
7
7
|
},
|
|
8
8
|
roundedXL: {
|
|
9
9
|
shape: 'rounded',
|
|
10
|
-
shapeStrength: '2m',
|
|
11
10
|
},
|
|
12
11
|
roundedL: {
|
|
13
12
|
shape: 'rounded',
|
|
14
|
-
shapeStrength: '1_5m',
|
|
15
13
|
},
|
|
16
14
|
roundedM: {
|
|
17
15
|
shape: 'rounded',
|
|
18
|
-
shapeStrength: '1m',
|
|
19
16
|
},
|
|
20
17
|
roundedS: {
|
|
21
18
|
shape: 'rounded',
|
|
22
|
-
shapeStrength: '0_5m',
|
|
23
19
|
},
|
|
24
20
|
};
|
|
25
21
|
export { inputAppearanceShape };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
2
|
-
import { AppearanceConfig, AppearanceKeysState, BorderColorHoverProps, BorderColorProps, BorderWidthProps, CompositeAppearanceStateDefault, FillHoverProps, FillProps, ShapeProps,
|
|
1
|
+
import { ChangeEvent, CSSProperties } from 'react';
|
|
2
|
+
import { AppearanceConfig, AppearanceKeysState, BorderColorHoverProps, BorderColorProps, BorderWidthProps, CompositeAppearanceStateDefault, FillHoverProps, FillProps, ShapeProps, SizeProps, SvgFillHoverProps, SvgFillProps } from '@itcase/types-ui';
|
|
3
3
|
import { StyleAttributes } from '@itcase/ui-core/hooks';
|
|
4
4
|
import { ButtonProps } from 'src/components/Button/Button.interface';
|
|
5
5
|
import { IconProps } from 'src/components/Icon/Icon.interface';
|
|
@@ -23,7 +23,6 @@ type InputNumberAppearanceProps = {
|
|
|
23
23
|
inputNumberTextWeight?: TextProps['textWeight'];
|
|
24
24
|
labelTextWeight?: TextProps['textWeight'];
|
|
25
25
|
shape?: ShapeProps;
|
|
26
|
-
shapeStrength?: ShapeStrengthProps;
|
|
27
26
|
size?: SizeProps;
|
|
28
27
|
svgFill?: SvgFillProps;
|
|
29
28
|
svgFillHover?: SvgFillHoverProps;
|
|
@@ -45,4 +44,9 @@ type InputNumberProps = InputNumberAppearanceProps & StyleAttributes & {
|
|
|
45
44
|
};
|
|
46
45
|
type InputNumberConfig = AppearanceConfig<AppearanceKeysState, InputNumberAppearanceProps>;
|
|
47
46
|
type InputNumberAppearance = InputNumberConfig['appearance'];
|
|
48
|
-
|
|
47
|
+
type OnChangeValueParams = {
|
|
48
|
+
event?: ChangeEvent<HTMLInputElement>;
|
|
49
|
+
mode?: 'button' | 'input';
|
|
50
|
+
operation?: 'minus' | 'plus';
|
|
51
|
+
};
|
|
52
|
+
export type { InputNumberAppearance, InputNumberConfig, InputNumberProps, OnChangeValueParams, };
|
|
@@ -13,31 +13,30 @@ const inputNumberConfig = {
|
|
|
13
13
|
const InputNumber = (props) => {
|
|
14
14
|
const { id, appearance, className, dataTestId, dataTour, type = 'custom', name, min = 0, max = Infinity, step = 1, value = 0, onChange, } = props;
|
|
15
15
|
const [number, setNumber] = useState(value);
|
|
16
|
-
const
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
if (
|
|
20
|
-
|
|
16
|
+
const onChangeValue = useCallback((params) => {
|
|
17
|
+
const { event, mode = 'button', operation } = params;
|
|
18
|
+
let value;
|
|
19
|
+
if (mode === 'input') {
|
|
20
|
+
value = Number(event?.target.value);
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
const operationType = operation === 'minus' ? -step : step;
|
|
24
|
+
value = number + operationType;
|
|
21
25
|
}
|
|
22
|
-
setNumber(nextValue);
|
|
23
|
-
onChange?.(nextValue);
|
|
24
|
-
}, [max, min, number, onChange, step]);
|
|
25
|
-
const handleInputValue = (event) => {
|
|
26
|
-
const value = Number(event.target.value);
|
|
27
26
|
if (value < min || value > max) {
|
|
28
27
|
return null;
|
|
29
28
|
}
|
|
30
29
|
setNumber(value);
|
|
31
30
|
onChange?.(value);
|
|
32
|
-
};
|
|
31
|
+
}, [max, min, number, onChange, step]);
|
|
33
32
|
const appearanceConfig = useAppearanceConfig(appearance, inputNumberConfig);
|
|
34
33
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
35
|
-
const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, iconFill, iconFillHover, iconFillIcon, iconMinus, iconPlus, iconShape, iconSize, inputNumberTextColorClass, inputNumberTextSizeClass, inputNumberTextWeightClass, shapeClass,
|
|
34
|
+
const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, iconFill, iconFillHover, iconFillIcon, iconMinus, iconPlus, iconShape, iconSize, inputNumberTextColorClass, inputNumberTextSizeClass, inputNumberTextWeightClass, shapeClass, sizeClass, widthClass, } = propsGenerator;
|
|
36
35
|
if (type === 'native') {
|
|
37
|
-
return (_jsx("input", { id: String(id), type: "number", min: min, max: max, step: step, value: number, onChange: (event) =>
|
|
36
|
+
return (_jsx("input", { id: String(id), type: "number", min: min, max: max, step: step, value: number, onChange: (event) => onChangeValue({ event: event, mode: 'input' }) }));
|
|
38
37
|
}
|
|
39
|
-
return (_jsxs("div", { id: String(id), className: clsx(className, 'input-number', 'input-number__custom', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`,
|
|
38
|
+
return (_jsxs("div", { id: String(id), className: clsx(className, 'input-number', 'input-number__custom', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `input-number_size_${sizeClass}`, widthClass && `width_${widthClass}`), "data-tour": dataTour, "date-testid": dataTestId, children: [_jsx(Button, { className: "input-number__icon", icon: iconMinus, iconFill: iconFill, iconFillHover: iconFillHover, iconFillIcon: iconFillIcon, iconShape: iconShape, iconSize: iconSize, onClick: () => onChangeValue({ operation: 'minus' }) }), _jsx("input", { className: clsx(inputNumberTextColorClass &&
|
|
40
39
|
`text-color_${inputNumberTextColorClass}`, inputNumberTextSizeClass && `text_size_${inputNumberTextSizeClass}`, inputNumberTextWeightClass &&
|
|
41
|
-
`text-weight_${inputNumberTextWeightClass}`), type: "number", min: min, max: max, "data-testid": dataTestId || (name ? `${name}-input-number` : 'input-number'), step: step, value: number, onChange: (event) =>
|
|
40
|
+
`text-weight_${inputNumberTextWeightClass}`), type: "number", min: min, max: max, "data-testid": dataTestId || (name ? `${name}-input-number` : 'input-number'), step: step, value: number, onChange: (event) => onChangeValue({ event: event, mode: 'input' }) }), _jsx(Button, { className: "input-number__icon", icon: iconPlus, iconFill: iconFill, iconFillHover: iconFillHover, iconFillIcon: iconFillIcon, iconShape: iconShape, iconSize: iconSize, onClick: () => onChangeValue({ operation: 'plus' }) })] }));
|
|
42
41
|
};
|
|
43
42
|
export { InputNumber };
|
|
@@ -7,19 +7,15 @@ const inputNumberAppearanceShape = {
|
|
|
7
7
|
},
|
|
8
8
|
roundedXL: {
|
|
9
9
|
shape: 'rounded',
|
|
10
|
-
shapeStrength: '2m',
|
|
11
10
|
},
|
|
12
11
|
roundedL: {
|
|
13
12
|
shape: 'rounded',
|
|
14
|
-
shapeStrength: '1_5m',
|
|
15
13
|
},
|
|
16
14
|
roundedM: {
|
|
17
15
|
shape: 'rounded',
|
|
18
|
-
shapeStrength: '1m',
|
|
19
16
|
},
|
|
20
17
|
roundedS: {
|
|
21
18
|
shape: 'rounded',
|
|
22
|
-
shapeStrength: '0_5m',
|
|
23
19
|
},
|
|
24
20
|
};
|
|
25
21
|
export { inputNumberAppearanceShape };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AppearanceConfig, AppearanceKeysState, BorderColorHoverProps, BorderColorProps, BorderWidthProps, CompositeAppearanceStateDefault, FillHoverProps, FillProps, ItemFillProps, ShapeProps,
|
|
1
|
+
import { AppearanceConfig, AppearanceKeysState, BorderColorHoverProps, BorderColorProps, BorderWidthProps, CompositeAppearanceStateDefault, FillHoverProps, FillProps, ItemFillProps, ShapeProps, SizeProps, WidthProps } from '@itcase/types-ui';
|
|
2
2
|
import { StyleAttributes } from '@itcase/ui-core/hooks';
|
|
3
3
|
import { IconProps } from 'src/components/Icon/Icon.interface';
|
|
4
4
|
import { TextProps } from 'src/components/Text/Text.interface';
|
|
@@ -20,7 +20,6 @@ type InputAppearanceProps = {
|
|
|
20
20
|
isRevealable?: boolean;
|
|
21
21
|
placeholderTextColor?: TextProps['textColor'];
|
|
22
22
|
shape?: ShapeProps;
|
|
23
|
-
shapeStrength?: ShapeStrengthProps;
|
|
24
23
|
size?: SizeProps;
|
|
25
24
|
textColor?: TextProps['textColor'];
|
|
26
25
|
textSize?: TextProps['size'];
|
|
@@ -22,9 +22,9 @@ function InputPassword(props) {
|
|
|
22
22
|
}, []);
|
|
23
23
|
const appearanceConfig = useAppearanceConfig(appearance, inputPasswordConfig, isDisabled);
|
|
24
24
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
25
|
-
const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, iconFill, iconFillHover, iconRevealableHide, iconRevealableShow, iconShape, iconSize, imageRevealableHide, imageRevealableShow, placeholderTextColorClass, shapeClass,
|
|
25
|
+
const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, iconFill, iconFillHover, iconRevealableHide, iconRevealableShow, iconShape, iconSize, imageRevealableHide, imageRevealableShow, placeholderTextColorClass, shapeClass, sizeClass, widthClass, } = propsGenerator;
|
|
26
26
|
return (_jsxs("div", { className: "input-password", children: [_jsx("input", { id: String(id), className: clsx(className, 'input-password__input', (textSizeClass || textColorClass || textWeightClass) && 'text', borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
|
|
27
27
|
`border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, placeholderTextColorClass &&
|
|
28
|
-
`placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`,
|
|
28
|
+
`placeholder-text-color_${placeholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `input-password__input_size_${sizeClass}`, textColorClass && `text-color_${textColorClass}`, textColorClass && `text-color_${textColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), type: inputType, "data-testid": dataTestId || (name ? `${name}-input-password` : 'input-password'), "data-tour": dataTour, "date-testid": dataTestId, disabled: isDisabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }), _jsx(Icon, { className: "input-password__icon", size: iconSize, iconFill: iconFill, iconFillHover: iconFillHover, imageSrc: isRevealed ? imageRevealableHide : imageRevealableShow, shape: iconShape, SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow, onClick: onClickIconReveal })] }));
|
|
29
29
|
}
|
|
30
30
|
export { InputPassword, inputPasswordConfig };
|
|
@@ -7,19 +7,15 @@ const inputPasswordAppearanceShape = {
|
|
|
7
7
|
},
|
|
8
8
|
roundedXL: {
|
|
9
9
|
shape: 'rounded',
|
|
10
|
-
shapeStrength: '2m',
|
|
11
10
|
},
|
|
12
11
|
roundedL: {
|
|
13
12
|
shape: 'rounded',
|
|
14
|
-
shapeStrength: '1_5m',
|
|
15
13
|
},
|
|
16
14
|
roundedM: {
|
|
17
15
|
shape: 'rounded',
|
|
18
|
-
shapeStrength: '1m',
|
|
19
16
|
},
|
|
20
17
|
roundedS: {
|
|
21
18
|
shape: 'rounded',
|
|
22
|
-
shapeStrength: '0_5m',
|
|
23
19
|
},
|
|
24
20
|
};
|
|
25
21
|
export { inputPasswordAppearanceShape };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CSSProperties, MouseEvent, ReactNode } from 'react';
|
|
2
|
-
import { AlignProps, AppearanceConfig, AppearanceKeysDefault, BorderColorProps, BorderTypeProps, CompositeAppearanceKeys, FillGradientProps, FillHoverProps, FillProps, ShapeProps,
|
|
2
|
+
import { AlignProps, AppearanceConfig, AppearanceKeysDefault, BorderColorProps, BorderTypeProps, CompositeAppearanceKeys, FillGradientProps, FillHoverProps, FillProps, ShapeProps, SizeProps, WrapProps } from '@itcase/types-ui';
|
|
3
3
|
import { StyleAttributes } from '@itcase/ui-core/hooks';
|
|
4
4
|
import { IconProps } from 'src/components/Icon/Icon.interface';
|
|
5
5
|
import { TextProps } from 'src/components/Text/Text.interface';
|
|
@@ -30,7 +30,6 @@ type LabelAppearanceProps = {
|
|
|
30
30
|
labelTextWeight?: TextProps['textWeight'];
|
|
31
31
|
labelTextWrap?: TextProps['textWrap'];
|
|
32
32
|
shape?: ShapeProps;
|
|
33
|
-
shapeStrength?: ShapeStrengthProps;
|
|
34
33
|
size?: SizeProps;
|
|
35
34
|
tooltipAlignment?: TooltipProps['alignment'];
|
|
36
35
|
tooltipAppearance?: TooltipProps['appearance'];
|
|
@@ -23,8 +23,8 @@ function Label(props) {
|
|
|
23
23
|
}, []);
|
|
24
24
|
const appearanceConfig = useAppearanceConfig(appearance, labelConfig, isDisabled);
|
|
25
25
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
26
|
-
const { alignClass, fillClass, fillHoverClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass,
|
|
26
|
+
const { alignClass, fillClass, fillHoverClass, labelTextColor, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, sizeClass, tooltipAlignment, tooltipAppearance, tooltipArrowPosition, tooltipText, tooltipTextSize, tooltipTextWeight, tooltipTitle, tooltipTitleSize, tooltipTitleWeight, widthClass, wrapClass, } = propsGenerator;
|
|
27
27
|
const { styles: labelStyles } = useStyles(props);
|
|
28
|
-
return (_jsxs("div", { className: clsx(className, 'label', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `label_size_${sizeClass}`, wrapClass && `word-wrap_${wrapClass}`, widthClass && `label_width_${widthClass}`, alignClass && `align_${alignClass}`,
|
|
28
|
+
return (_jsxs("div", { className: clsx(className, 'label', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `label_size_${sizeClass}`, wrapClass && `word-wrap_${wrapClass}`, widthClass && `label_width_${widthClass}`, alignClass && `align_${alignClass}`, isSkeleton && `skeleton`, onClick && (cursor || 'cursor_type_pointer')), "data-testid": dataTestId, "data-tour": dataTour, style: labelStyles, onClick: onClick, onMouseEnter: onMouseEnterLabel, onMouseLeave: onMouseLeaveLabel, children: [before, (iconBefore || iconBeforeSrc) && (_jsx(Icon, { className: clsx('label__icon_before'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), _jsxs("div", { className: "label__inner", children: [typeof label === 'string' ? (_jsx(Text, { className: "label__text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (_jsx("div", { className: "label__text", children: label })), children, tooltipContent && (_jsx(Tooltip, { appearance: tooltipAppearance, className: "label__tooltip", ref: tooltipRef, alignment: tooltipAlignment, title: tooltipTitle, titleSize: tooltipTitleSize, titleWeight: tooltipTitleWeight, text: tooltipText, textSize: tooltipTextSize, textWeight: tooltipTextWeight, arrowPosition: tooltipArrowPosition, children: tooltipContent }))] }), (iconAfter || iconAfterSrc) && (_jsx(Icon, { className: clsx('label__icon_after'), fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), after] }));
|
|
29
29
|
}
|
|
30
30
|
export { Label, labelConfig };
|
|
@@ -7,19 +7,15 @@ const labelAppearanceShape = {
|
|
|
7
7
|
},
|
|
8
8
|
roundedXL: {
|
|
9
9
|
shape: 'rounded',
|
|
10
|
-
shapeStrength: '2m',
|
|
11
10
|
},
|
|
12
11
|
roundedL: {
|
|
13
12
|
shape: 'rounded',
|
|
14
|
-
shapeStrength: '1_5m',
|
|
15
13
|
},
|
|
16
14
|
roundedM: {
|
|
17
15
|
shape: 'rounded',
|
|
18
|
-
shapeStrength: '1m',
|
|
19
16
|
},
|
|
20
17
|
roundedS: {
|
|
21
18
|
shape: 'rounded',
|
|
22
|
-
shapeStrength: '0_5m',
|
|
23
19
|
},
|
|
24
20
|
};
|
|
25
21
|
export { labelAppearanceShape };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CSSProperties, ReactNode } from 'react';
|
|
2
|
-
import { AppearanceConfig, AppearanceKeysDefault, BorderColorProps, CompositeAppearanceKeys, FillProps, ItemFillProps, ShapeProps,
|
|
2
|
+
import { AppearanceConfig, AppearanceKeysDefault, BorderColorProps, CompositeAppearanceKeys, FillProps, ItemFillProps, ShapeProps, SizeProps } from '@itcase/types-ui';
|
|
3
3
|
import { StyleAttributes } from '@itcase/ui-core/hooks';
|
|
4
4
|
import { TextProps } from '../Text/Text.interface';
|
|
5
5
|
type LoaderAppearanceProps = {
|
|
@@ -19,7 +19,6 @@ type LoaderProps = LoaderAppearanceProps & StyleAttributes & {
|
|
|
19
19
|
isDisabled?: boolean;
|
|
20
20
|
isSkeleton?: boolean;
|
|
21
21
|
shape?: ShapeProps;
|
|
22
|
-
shapeStrength?: ShapeStrengthProps;
|
|
23
22
|
style?: CSSProperties;
|
|
24
23
|
text?: string;
|
|
25
24
|
type?: 'circular' | 'dot';
|
|
@@ -13,8 +13,8 @@ function Loader(props) {
|
|
|
13
13
|
const { appearance, className, dataTestId, dataTour, type = 'dot', text, isDisabled, isSkeleton, children, } = props;
|
|
14
14
|
const appearanceConfig = useAppearanceConfig(appearance, loaderConfig, isDisabled);
|
|
15
15
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
16
|
-
const { fillClass, borderColorClass, textColor, textSize, heightClass, itemFillClass, shapeClass,
|
|
16
|
+
const { fillClass, borderColorClass, textColor, textSize, heightClass, itemFillClass, shapeClass, sizeClass, widthClass, } = propsGenerator;
|
|
17
17
|
const { styles: loader } = useStyles(props);
|
|
18
|
-
return (_jsxs("div", { className: clsx('loader', className, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, fillClass && `fill_${fillClass}`, sizeClass && `loader_size_${sizeClass}`, isSkeleton && `skeleton`, type && `loader_type_${type}`, shapeClass && `shape_${shapeClass}
|
|
18
|
+
return (_jsxs("div", { className: clsx('loader', className, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, fillClass && `fill_${fillClass}`, sizeClass && `loader_size_${sizeClass}`, isSkeleton && `skeleton`, type && `loader_type_${type}`, shapeClass && `shape_${shapeClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: loader, children: [children || (_jsxs("div", { className: "loader__inner", children: [_jsx("span", { className: clsx('loader__item', itemFillClass && `fill_${itemFillClass}`, type === 'circular' && `border-color_${borderColorClass}`), children: "\u00A0" }), _jsx("span", { className: clsx('loader__item', itemFillClass && `fill_${itemFillClass}`), children: "\u00A0" }), _jsx("span", { className: clsx('loader__item', itemFillClass && `fill_${itemFillClass}`), children: "\u00A0" })] })), text && (_jsx(Text, { className: "loader__text", size: textSize, textColor: textColor, children: text }))] }));
|
|
19
19
|
}
|
|
20
20
|
export { Loader, loaderConfig };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { CSSProperties, ElementType, ReactNode } from 'react';
|
|
2
2
|
import type { LinkProps } from 'react-scroll';
|
|
3
|
-
import type { AlignProps, AppearanceConfig, AppearanceKeysDefault, ArrowPosition, BorderColorProps, CompositeAppearanceKeys, DirectionProps, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, JustifyContentProps, ShapeProps,
|
|
3
|
+
import type { AlignProps, AppearanceConfig, AppearanceKeysDefault, ArrowPosition, BorderColorProps, CompositeAppearanceKeys, DirectionProps, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, JustifyContentProps, ShapeProps, TextSizeProps, UnderlineProps } from '@itcase/types-ui';
|
|
4
4
|
import { StyleAttributes } from '@itcase/ui-core/hooks';
|
|
5
5
|
import type { IconProps } from '../Icon/Icon.interface';
|
|
6
6
|
import type { TextProps } from '../Text/Text.interface';
|
|
@@ -47,11 +47,9 @@ type MenuItemAppearanceProps = {
|
|
|
47
47
|
labelWeight?: TextProps['textWeight'];
|
|
48
48
|
labelWrap?: TextProps['textWrap'];
|
|
49
49
|
shape?: ShapeProps;
|
|
50
|
-
shapeStrength?: ShapeStrengthProps;
|
|
51
50
|
size?: TextSizeProps;
|
|
52
51
|
tooltipFill?: TooltipProps['fill'];
|
|
53
52
|
tooltipShape?: TooltipProps['shape'];
|
|
54
|
-
tooltipShapeStrength?: TooltipProps['shapeStrength'];
|
|
55
53
|
tooltipSize?: TooltipProps['size'];
|
|
56
54
|
tooltipText?: TooltipProps['text'];
|
|
57
55
|
tooltipTextColor?: TooltipProps['textColor'];
|