@itcase/ui 1.2.34 → 1.2.35

package/dist/components/Search.js

@@ -3,8 +3,8 @@ import React, { useCallback } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { I as Icon } from '../Icon-DptCmI_y.js';
-import { T as Text } from '../Text-C4Bg2Mv6.js';
+import { I as Icon } from '../Icon-21rsw8YW.js';
+import { T as Text } from '../Text-DGEJa_FL.js';
 import { S as Scrollbar } from '../Scrollbar-Bo7z7ELm.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -17,8 +17,8 @@ import '../hooks/styleAttributes.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react-inlinesvg';
 import '../Link-CeQuavin.js';
-import '../Tooltip--c-4Qp04.js';
-import '../Title-YVzIwk68.js';
+import '../Tooltip-BsMYxi_I.js';
+import '../Title-Bp-4wxkT.js';
 import 'react-scrollbars-custom';
 
 var searchAppearance = {
@@ -139,4 +139,4 @@ var SearchResult = React.forwardRef(function SearchResult(props, ref) {
     return (jsx("div", { className: clsx(className, 'search-result', fillClass, type && "search-result_type_".concat(type)), children: jsxs("div", { className: "search-result__wrapper", children: [before, React.Children.toArray(children).filter(Boolean).length && (jsx(Scrollbar, { scrollHeight: scrollHeight ? "".concat(scrollHeight, "px") : '300px', children: children })), after] }) }));
 });
 
-export { SearchInput, SearchResult, searchInputConfig };
+export { SearchInput, SearchResult, searchAppearance, searchInputConfig };

package/dist/components/Segmented.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { T as Text } from '../Text-C4Bg2Mv6.js';
+import { T as Text } from '../Text-DGEJa_FL.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
@@ -115,4 +115,4 @@ var Segmented = React.forwardRef(function (props, ref) {
 });
 Segmented.displayName = 'Segmented';
 
-export { Segmented, segmentedConfig };
+export { Segmented, segmentedAppearance, segmentedConfig };

package/dist/components/Select.js

@@ -1,15 +1,15 @@
 import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Select, { components } from 'react-select';
-import { I as Icon } from '../Icon-DptCmI_y.js';
+import { I as Icon } from '../Icon-21rsw8YW.js';
 import React, { useMemo, useRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { T as Text } from '../Text-C4Bg2Mv6.js';
-import { B as Badge } from '../Badge-DBjlLLfX.js';
-import { G as Group } from '../Group-BCvs5UxK.js';
-import { D as Divider } from '../Divider-DHIuQUsH.js';
+import { T as Text } from '../Text-DGEJa_FL.js';
+import { B as Badge } from '../Badge-MPtjfQS8.js';
+import { G as Group } from '../Group-D95Sf0X0.js';
+import { D as Divider } from '../Divider-Bdz66wfW.js';
 import 'react-inlinesvg';
 import '../hooks/useStyles.js';
 import 'lodash/camelCase';
@@ -20,8 +20,8 @@ import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
-import '../Tooltip--c-4Qp04.js';
-import '../Title-YVzIwk68.js';
+import '../Tooltip-BsMYxi_I.js';
+import '../Title-Bp-4wxkT.js';
 import 'lodash/castArray';
 
 var selectAppearance = {

package/dist/components/SiteMenu.js

@@ -3,8 +3,8 @@ import { useCallback } from 'react';
 import clsx from 'clsx';
 import { useSiteMenuContext } from '../context/UIContext.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { I as Icon } from '../Icon-DptCmI_y.js';
-import { T as Text } from '../Text-C4Bg2Mv6.js';
+import { I as Icon } from '../Icon-21rsw8YW.js';
+import { T as Text } from '../Text-DGEJa_FL.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/camelCase';
@@ -16,8 +16,8 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
-import '../Tooltip--c-4Qp04.js';
-import '../Title-YVzIwk68.js';
+import '../Tooltip-BsMYxi_I.js';
+import '../Title-Bp-4wxkT.js';
 
 var siteMenuAppearance = {
     dev: {},
@@ -81,4 +81,4 @@ function SiteMenuButton(props) {
     return (jsx("div", { className: clsx(className, 'site-menu__button'), onClick: onClickButton, children: children || text }));
 }
 
-export { SiteMenu, SiteMenuButton, siteMenuConfig };
+export { SiteMenu, SiteMenuButton, siteMenuAppearance, siteMenuConfig };

package/dist/components/Swiper.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { Swiper as Swiper$1, SwiperSlide } from 'swiper/react';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { T as Title } from '../Title-YVzIwk68.js';
+import { T as Title } from '../Title-Bp-4wxkT.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';

package/dist/components/Switch.js

@@ -20,4 +20,4 @@ var Switch = React.forwardRef(function Switch(props, ref) {
                 ref: ref, checked: checked, disabled: disabled, id: id, type: "checkbox", onChange: onChange }), jsx("div", { className: "switch__bg", children: "\u00A0" }), jsx("div", { className: "switch__toggle", children: "\u00A0" })] }));
 });
 
-export { Switch, switchConfig };
+export { Switch, switchAppearance, switchConfig };

package/dist/components/Tab.js

@@ -3,10 +3,10 @@ import React from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Badge } from '../Badge-DBjlLLfX.js';
-import { D as Divider } from '../Divider-DHIuQUsH.js';
+import { B as Badge } from '../Badge-MPtjfQS8.js';
+import { D as Divider } from '../Divider-Bdz66wfW.js';
 import { L as Link } from '../Link-CeQuavin.js';
-import { T as Text } from '../Text-C4Bg2Mv6.js';
+import { T as Text } from '../Text-DGEJa_FL.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';

package/dist/components/Text.js

@@ -1,4 +1,4 @@
-export { T as Text, t as textConfig } from '../Text-C4Bg2Mv6.js';
+export { T as Text, a as textAppearance, t as textConfig } from '../Text-DGEJa_FL.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDeviceTargetClass.js';

package/dist/components/Textarea.js

@@ -154,4 +154,4 @@ Textarea.defaultProps = {
     size: 'm',
 };
 
-export { Textarea, textareaConfig };
+export { Textarea, textareaAppearance, textareaConfig, textareaState };

package/dist/components/Tile.js

@@ -2,9 +2,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Badge } from '../Badge-DBjlLLfX.js';
-import { T as Text } from '../Text-C4Bg2Mv6.js';
-import { T as Title } from '../Title-YVzIwk68.js';
+import { B as Badge } from '../Badge-MPtjfQS8.js';
+import { T as Text } from '../Text-DGEJa_FL.js';
+import { T as Title } from '../Title-Bp-4wxkT.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -77,4 +77,4 @@ Tile.defaultProps = {
     textTag: 'span',
 };
 
-export { Tile, tileConfig };
+export { Tile, tileAppearance, tileConfig };

package/dist/components/Title.js

@@ -1,4 +1,4 @@
-export { T as Title, t as titleConfig } from '../Title-YVzIwk68.js';
+export { T as Title, a as titleAppearance, t as titleConfig } from '../Title-Bp-4wxkT.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-export { T as Tooltip, t as tooltipConfig } from '../Tooltip--c-4Qp04.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip-BsMYxi_I.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -12,5 +12,5 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-C4Bg2Mv6.js';
-import '../Title-YVzIwk68.js';
+import '../Text-DGEJa_FL.js';
+import '../Title-Bp-4wxkT.js';

package/dist/stories/Select.stories.js

@@ -1,4 +1,3 @@
-import { defaultSelectProps } from '../../../config/forms'
 import {
   borderColorHoverProps,
   borderColorProps,
@@ -12,19 +11,66 @@ import { Button } from '../../Button'
 import { Loader } from '../../Loader'
 import { Select } from '../index'
 
-// import { Select } from '../Select'
-
-// import { icon16 } from 'src/icons'
-
 export default {
   args: {
-    ...defaultSelectProps,
+    elevation: 8,
     isClearable: true,
     isMulti: false,
     isSearchable: false,
+    badgeAppearance: 'accent',
+    badgeSize: 'm',
+    badgeTextSize: 'm',
+    // clearIcon: icon24.Clear,
+    clearIconFill: 'surfaceItemPrimary',
+    closeMenuOnSelect: true,
+    dividerDirection: 'horizontal',
+    // optionSelected: <Icon iconFill="surfaceItemAccent" SvgImage={icon24.Check} />,
+
+    dividerFill: 'surfaceTertiary',
+    dividerSize: 'xxs',
+    // dropdownIcon: icon24.ChevronDownSmall,
     dropdownIconFill: 'surfaceItemPrimary',
+    // error
+    errorInputBorderColor: 'errorBorderPrimary',
+    headingFill: 'surfaceSecondary',
+    headingTextColor: 'surfaceTextPrimary',
+    headingTextSize: 'm',
+
+    headingTextWeight: '600',
     hideSelectedOptions: false,
+    inputBorderColor: 'surfaceBorderTertiary',
+    inputBorderColorHover: 'surfaceBorderQuaternary',
+    inputCaretColor: 'secondaryItemPrimary',
+
+    inputFill: 'surfacePrimary',
+
+    inputShape: 'rounded',
+    inputTextColor: 'surfaceTextPrimary',
+    inputTextSize: 'm',
+    loadingMessage: (
+      <Loader
+        width="fill"
+        height="fill"
+        fill="surfacePrimary"
+        position="absolute"
+        left="0px"
+        right="0px"
+        zIndex="1"
+        itemFill="surfaceItemAccent"
+        set="simple"
+      />
+    ),
+
     menuItemSize: 'l',
+    multipleItemFill: 'accentPrimary',
+    multipleItemFillHover: 'accentPrimaryHover',
+    // multipleItemIcon: icon14.Remove,
+    multipleItemIconFill: 'accentItemPrimary',
+    multipleItemTextColor: 'accentTextPrimary',
+
+    multipleItemTextSize: 'm',
+
+    noOptionsSearchText: 'Ничего не найдено...',
     noOptionsText: (
       <Loader
         width="fill"
@@ -38,6 +84,10 @@ export default {
         set="simple"
       />
     ),
+    noOptionsTextColor: 'surfaceTextPrimary',
+    noOptionsTextSize: 'm',
+
+    optionBorder: 'none',
     optionFill: 'surfacePrimary',
     optionFillHover: 'surfacePrimaryHover',
     options: [
@@ -48,9 +98,22 @@ export default {
       { label: 'Планируемые', value: 'planned' },
       { label: 'Продолжены', value: 'continued' },
     ],
+    optionShape: 'rounded',
+
     optionTextColor: 'surfaceTextPrimary',
     optionTextSize: 'l',
+    placeholder: 'Выбрать...',
+
+    placeholderTextColor: 'surfaceTextQuaternary',
+
+    placeholderTextSize: 'm',
+    // appearance depending on the type of error
+    // required
+    requiredInputBorderColor: 'warningBorderPrimary',
+    showBadge: false,
     showDivider: false,
+
+    size: 'm',
   },
   argTypes: {
     elevation: {

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

@@ -1 +1,2 @@
 export { Avatar, avatarConfig } from './Avatar';
+export { avatarAppearance } from './Avatar.appearance';

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

@@ -1 +1,2 @@
 export { Checkbox, checkboxConfig } from './Checkbox';
+export { checkboxAppearance, checkboxState } from './Checkbox.appearance';

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

@@ -1 +1,2 @@
 export { Choice, choiceConfig } from './Choice';
+export { choiceAppearance } from './Choice.appearance';

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

@@ -1 +1,2 @@
 export { Code, codeConfig } from './Code';
+export { codeAppearance } from './Code.appearance';

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

@@ -1 +1,2 @@
 export { DatePickerInput, datePickerConfig } from './DatePicker';
+export { datePickerAppearance } from './DatePicker.appearance';

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

@@ -1 +1,2 @@
 export { Divider, dividerConfig } from './Divider';
+export { dividerAppearance } from './Divider.appearance';

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

@@ -1,3 +1,4 @@
 import { Dropdown } from './Dropdown';
 import { DropdownItem, dropdownItemConfig } from './DropdownItem';
-export { Dropdown, DropdownItem, dropdownItemConfig };
+import { dropdownItemAppearance } from './DropdownItem.appearance';
+export { Dropdown, DropdownItem, dropdownItemAppearance, dropdownItemConfig };

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

@@ -1 +1,2 @@
 export { Group, groupConfig } from './Group';
+export { groupAppearance } from './Group.appearance';

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

@@ -1 +1,2 @@
 export { Icon, iconConfig } from './Icon';
+export { iconAppearance } from './Icon.appearance';

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

@@ -1 +1,2 @@
 export { Input, inputConfig } from './Input';
+export { inputAppearance, inputState } from './Input.appearance';

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

@@ -1 +1,2 @@
+export { InputPasswordAppearance, InputPasswordState } from './InputPassword.appearance';
 export { InputPassword, inputPasswordConfig } from './InputPassword';

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

@@ -1 +1,2 @@
 export { Loader, loaderConfig } from './Loader';
+export { loaderAppearance } from './Loader.appearance';

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

@@ -1 +1,2 @@
 export { MenuItem, menuItemConfig } from './MenuItem';
+export { menuItemAppearance } from './MenuItem.appearance';

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

@@ -1,3 +1,4 @@
 import { Modal, modalConfig } from './Modal';
+import { modalAppearance } from './Modal.appearance';
 import { ModalLoader } from './ModalLoader';
-export { Modal, modalConfig, ModalLoader };
+export { Modal, modalConfig, modalAppearance, ModalLoader };

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

@@ -1 +1,2 @@
 export { Pagination, paginationConfig } from './Pagination';
+export { paginationAppearance } from './Pagination.appearance';

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

@@ -1 +1,2 @@
 export { Radio, radioConfig } from './Radio';
+export { radioAppearance, radioState } from './Radio.appearance';

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

@@ -1,3 +1,4 @@
+import { searchAppearance } from './Search.appearance';
 import { SearchInput, searchInputConfig } from './SearchInput';
 import { SearchResult } from './SearchResult';
-export { SearchInput, searchInputConfig, SearchResult };
+export { SearchInput, searchInputConfig, searchAppearance, SearchResult };

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

@@ -1 +1,2 @@
 export { Segmented, segmentedConfig } from './Segmented';
+export { segmentedAppearance } from './Segmented.appearance';

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

@@ -1,3 +1,4 @@
+import { siteMenuAppearance } from './SiteMenu.appearance';
 import { SiteMenu, siteMenuConfig } from './SiteMenu.js';
 import { SiteMenuButton } from './SiteMenuButton.js';
-export { SiteMenu, siteMenuConfig, SiteMenuButton };
+export { SiteMenu, siteMenuConfig, siteMenuAppearance, SiteMenuButton };

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

@@ -1 +1,2 @@
 export { Switch, switchConfig } from './Switch';
+export { switchAppearance } from './Switch.appearance';

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

@@ -1 +1,2 @@
 export { Text, textConfig } from './Text';
+export { textAppearance } from './Text.appearance';

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

@@ -1 +1,2 @@
 export { Textarea, textareaConfig } from './Textarea';
+export { textareaAppearance, textareaState } from './Textarea.appearance';

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

@@ -1 +1,2 @@
 export { Tile, tileConfig } from './Tile';
+export { tileAppearance } from './Tile.appearance';

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

@@ -1 +1,2 @@
 export { Title, titleConfig } from './Title';
+export { titleAppearance } from './Title.appearance';

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

@@ -1 +1,2 @@
 export { Tooltip, tooltipConfig } from './Tooltip';
+export { tooltipAppearance } from './Tooltip.appearance';

package/dist/types/config/forms/index.d.ts

@@ -1,4 +1,3 @@
 import { defaultDatepickerProps } from './datepicker';
 import { defaultInputProps } from './input';
-import { defaultSelectProps } from './select';
-export { defaultDatepickerProps, defaultInputProps, defaultSelectProps };
+export { defaultDatepickerProps, defaultInputProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.2.34",
+  "version": "1.2.35",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -96,10 +96,10 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.2.16",
+    "@itcase/common": "^1.2.17",
+    "@itcase/icons": "^1.0.7",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "framer-motion": "^11.12.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "rc-slider": "^11.1.7",
@@ -189,7 +189,7 @@
     "postcss-preset-env": "^10.1.1",
     "postcss-pxtorem": "^6.1.0",
     "postcss-sort-media-queries": "^5.2.0",
-    "prettier": "^3.4.1",
+    "prettier": "^3.4.2",
     "rollup": "^4.28.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.1.1",

package/dist/types/config/forms/select.d.ts

@@ -1,50 +0,0 @@
-declare const defaultSelectProps: {
-    elevation: number;
-    isClearable: boolean;
-    isSearchable: boolean;
-    badgeAppearance: string;
-    badgeSize: string;
-    badgeTextSize: string;
-    clearIconFill: string;
-    closeMenuOnSelect: boolean;
-    dividerDirection: string;
-    dividerFill: string;
-    dividerSize: string;
-    dropdownIconFill: string;
-    errorInputBorderColor: string;
-    headingFill: string;
-    headingTextColor: string;
-    headingTextSize: string;
-    headingTextWeight: string;
-    inputBorderColor: string;
-    inputBorderColorHover: string;
-    inputCaretColor: string;
-    inputFill: string;
-    inputShape: string;
-    inputTextColor: string;
-    inputTextSize: string;
-    loadingMessage: import("react/jsx-runtime").JSX.Element;
-    multipleItemFill: string;
-    multipleItemFillHover: string;
-    multipleItemIconFill: string;
-    multipleItemTextColor: string;
-    multipleItemTextSize: string;
-    noOptionsSearchText: string;
-    noOptionsText: string;
-    noOptionsTextColor: string;
-    noOptionsTextSize: string;
-    optionBorder: string;
-    optionFill: string;
-    optionFillHover: string;
-    optionShape: string;
-    optionTextColor: string;
-    optionTextSize: string;
-    placeholder: string;
-    placeholderTextColor: string;
-    placeholderTextSize: string;
-    requiredInputBorderColor: string;
-    showBadge: boolean;
-    showDivider: boolean;
-    size: string;
-};
-export { defaultSelectProps };