@itcase/ui 1.1.6 → 1.1.8

package/dist/Accordion-CqPVnTKh.js

@@ -0,0 +1,173 @@
+import { b as __spreadArray } from './Link-ByBzBRDH.js';
+import { j as jsxRuntimeExports } from './jsx-runtime-ClDdVO4Q.js';
+import React__default, { useCallback, useState, useMemo } from 'react';
+import clsx from 'clsx';
+import castArray from 'lodash/castArray';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { useStyles } from './hooks/useStyles.js';
+import { I as Icon } from './Icon-Dn2eEZvb.js';
+import { T as Text } from './Text-BcGbRc14.js';
+
+var ChevronDown16 = function ChevronDown16(props) {
+  return /*#__PURE__*/React__default.createElement("svg", props, /*#__PURE__*/React__default.createElement("path", {
+    d: "M8 11C8.23051 11 8.42712 10.9233 8.60339 10.764L13.7763 6.16224C13.9254 6.03835 14 5.87316 14 5.68437C14 5.30088 13.661 5 13.2136 5C12.9966 5 12.8 5.0767 12.6508 5.20649L8 9.35398L3.34915 5.20649C3.19322 5.0767 2.99661 5 2.77966 5C2.33898 5 2 5.30089 2 5.68437C2 5.87316 2.07458 6.03835 2.22373 6.16224L7.39661 10.764C7.57288 10.9233 7.76949 10.9941 8 11Z"
+  }));
+};
+ChevronDown16.defaultProps = {
+  width: "16",
+  height: "16",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "none"
+};
+var ChevronTop16 = function ChevronTop16(props) {
+  return /*#__PURE__*/React__default.createElement("svg", props, /*#__PURE__*/React__default.createElement("path", {
+    d: "M8 5C7.76949 5 7.57288 5.0767 7.39661 5.23599L2.22373 9.83776C2.07458 9.96165 2 10.1268 2 10.3156C2 10.6991 2.33898 11 2.78644 11C3.00339 11 3.2 10.9233 3.34915 10.7935L8 6.64602L12.6508 10.7935C12.8068 10.9233 13.0034 11 13.2203 11C13.661 11 14 10.6991 14 10.3156C14 10.1268 13.9254 9.96165 13.7763 9.83776L8.60339 5.23599C8.42712 5.0767 8.23051 5.0059 8 5Z"
+  }));
+};
+ChevronTop16.defaultProps = {
+  width: "16",
+  height: "16",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "none"
+};
+const icon16 = {
+  ChevronDown: ChevronDown16,
+  ChevronTop: ChevronTop16
+};
+
+function AccordionItem(props) {
+    var children = props.children, id = props.id, title = props.title, icon = props.icon, _a = props.iconFill, iconFill = _a === void 0 ? 'surfaceItemAccent' : _a, content = props.content, beforeContent = props.beforeContent, afterContent = props.afterContent, className = props.className, titleTextSize = props.titleTextSize, titleTextColor = props.titleTextColor, titleTextWeight = props.titleTextWeight, contentTextSize = props.contentTextSize, contentTextColor = props.contentTextColor, contentTextWeight = props.contentTextWeight, size = props.size, isExpanded = props.isExpanded, onClick = props.onClick;
+    var onClickTitle = useCallback(function () {
+        // !isExpanded - is next state of expanded
+        var thisItemData = { id: id, title: title, content: content, isExpanded: !isExpanded };
+        onClick && onClick(thisItemData);
+    }, [onClick, id, title, content, isExpanded]);
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var contentBorderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'contentBorderColor',
+    });
+    var titleBorderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'titleBorderColor',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var contentFillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'contentFill',
+    });
+    var titleFillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'titleFill',
+    });
+    var titleFillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'titleFillHover',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'accordion-item_shape_',
+        propsKey: 'shape',
+    });
+    // @ts-expect-error
+    var styles = useStyles(props).styles;
+    return (jsxRuntimeExports.jsxs("div", { className: clsx('accordion-item', className, borderColorClass, fillClass, fillHoverClass, shapeClass, size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxRuntimeExports.jsx(Text, { className: clsx('accordion-item__title', titleBorderColorClass, titleFillClass, titleFillHoverClass, 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxRuntimeExports.jsx("div", { className: clsx('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || (
+                // @ts-expect-error
+                jsxRuntimeExports.jsx(Icon, { iconFill: iconFill, size: "16", SvgImage: icon16.ChevronDown })) }), beforeContent && beforeContent, isExpanded && (jsxRuntimeExports.jsx("div", { className: clsx('accordion-item__content', contentBorderColorClass, contentFillClass, fillHoverClass), children: children ||
+                    (content && (jsxRuntimeExports.jsx(Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }))) })), afterContent && afterContent] }));
+}
+AccordionItem.defaultProps = {
+    iconFill: 'surfaceItemAccent',
+};
+
+function Accordion(props) {
+    var children = props.children, items = props.items, className = props.className, _a = props.initial, initial = _a === void 0 ? [] : _a, isMultiple = props.isMultiple, onClickItem = props.onClickItem;
+    var _b = useState(castArray(initial)), expandedItems = _b[0], setExpandedItems = _b[1];
+    var onClickAccordionItem = useCallback(function (targetItem) {
+        setExpandedItems(function (prevState) {
+            var isExpanded = prevState.find(function (id) { return id === targetItem.id; });
+            if (isMultiple) {
+                if (isExpanded) {
+                    // ... without target id
+                    return prevState.filter(function (id) { return id !== targetItem.id; });
+                }
+                else {
+                    // ... with target id
+                    return __spreadArray(__spreadArray([], prevState, true), [targetItem.id], false);
+                }
+            }
+            else {
+                if (isExpanded) {
+                    return [];
+                }
+                else {
+                    return [targetItem.id];
+                }
+            }
+        });
+        onClickItem && onClickItem(targetItem);
+    }, [onClickItem]);
+    var accordionItemsList = useMemo(function () {
+        if (items) {
+            return items.map(function (item, i) { return (jsxRuntimeExports.jsx(AccordionItem, { content: item.content, id: item.id, isExpanded: expandedItems.includes(item.id), title: item.title, onClick: onClickAccordionItem }, "accordionItem_".concat(item.id || i + 1))); });
+        }
+        if (children) {
+            return React__default.Children.toArray(children).map(function (child) {
+                if (React__default.isValidElement(child)) {
+                    var childID = child.props.id || child.key;
+                    return React__default.cloneElement(child, {
+                        id: childID,
+                        isExpanded: expandedItems.includes(childID),
+                        onClick: onClickAccordionItem,
+                    });
+                }
+                return child;
+            });
+        }
+        return [];
+    }, [children, items, expandedItems, onClickAccordionItem]);
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'accordion_direction_',
+        propsKey: 'direction',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'accordion_shape_',
+        propsKey: 'shape',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    /*
+     * paddingHorizontalWrapper="16px"
+     * paddingHorizontal - styles  (horizontal will be parsed to left/right)
+     * wrapper - target
+     */
+    // @ts-expect-error
+    var _c = useStyles(props), accordionStyles = _c.styles, accordionWrapperStyles = _c.wrapper;
+    return (jsxRuntimeExports.jsx("div", { className: clsx(className, 'accordion', borderColorClass, directionClass, fillClass, shapeClass, widthClass), style: accordionStyles, children: jsxRuntimeExports.jsx("div", { className: "accordion__wrapper", style: accordionWrapperStyles, children: accordionItemsList }) }));
+}
+Accordion.defaultProps = {
+    initial: [],
+};
+
+export { Accordion as A, AccordionItem as a };

package/dist/Avatar-diLCwtnd.js

@@ -0,0 +1,49 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-ClDdVO4Q.js';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { I as Icon } from './Icon-Dn2eEZvb.js';
+import { Image } from './components/Image.js';
+import { T as Text } from './Text-BcGbRc14.js';
+
+function Avatar(props) {
+    var className = props.className, Dot = props.Dot, icon = props.icon, 
+    // Размер аватара
+    _a = props.size, 
+    // Размер аватара
+    size = _a === void 0 ? '96' : _a, after = props.after, before = props.before, src = props.src, 
+    // Тип аватара
+    type = props.type, mode = props.mode, onClick = props.onClick, _b = props.textSize, textSize = _b === void 0 ? 'l' : _b, 
+    // Цвет текста
+    _c = props.textColor, 
+    // Цвет текста
+    textColor = _c === void 0 ? 'surfaceTextTertiary' : _c, _d = props.textWeight, textWeight = _d === void 0 ? '600' : _d, iconSrc = props.iconSrc, iconItemFill = props.iconItemFill, iconShape = props.iconShape, iconSize = props.iconSize, iconStroke = props.iconStroke, iconFill = props.iconFill, iconFillHover = props.iconFillHover, iconFillSize = props.iconFillSize, _e = props.firstName, firstName = _e === void 0 ? '' : _e, _f = props.secondName, secondName = _f === void 0 ? '' : _f;
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'avatar_shape_',
+        propsKey: 'shape',
+    });
+    var avatarChars = useMemo(function () {
+        var firstChar = ((firstName === null || firstName === void 0 ? void 0 : firstName[0]) || '').toUpperCase();
+        var secondChar = ((secondName === null || secondName === void 0 ? void 0 : secondName[0]) || '').toUpperCase();
+        return "".concat(firstChar).concat(secondChar);
+    }, [firstName, secondName]);
+    return (jsxRuntimeExports.jsx("div", { className: clsx(className, 'avatar', shapeClass, mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxRuntimeExports.jsxs("div", { className: clsx('avatar__wrapper', fillClass, fillHoverClass), children: [before, src ? (jsxRuntimeExports.jsx(Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsxRuntimeExports.jsx(Text, { className: "avatar__name", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars })), (icon || iconSrc) && (jsxRuntimeExports.jsx(Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, stroke: iconStroke, SvgImage: icon })), Dot, after] }) }));
+}
+Avatar.defaultProps = {
+    size: '96',
+    textSize: 'l',
+    textColor: 'surfaceTextTertiary',
+    textWeight: 600,
+    firstName: '',
+    secondName: '',
+};
+
+export { Avatar as A };