@chayns-components/core 5.0.0-beta.2 → 5.0.0-beta.23

package/lib/components/list/list-item/list-item-head/ListItemHead.js

@@ -0,0 +1,151 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _GridImage = _interopRequireDefault(require("../../../grid-image/GridImage"));
+
+var _Icon = _interopRequireDefault(require("../../../icon/Icon"));
+
+var _ListItemHead = require("./ListItemHead.styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var ListItemHead = function ListItemHead(_ref) {
+  var hoverItem = _ref.hoverItem,
+      icons = _ref.icons,
+      images = _ref.images,
+      isAnyItemExpandable = _ref.isAnyItemExpandable,
+      isExpandable = _ref.isExpandable,
+      isOpen = _ref.isOpen,
+      onClick = _ref.onClick,
+      onLongPress = _ref.onLongPress,
+      rightElements = _ref.rightElements,
+      subtitle = _ref.subtitle,
+      shouldShowRoundImage = _ref.shouldShowRoundImage,
+      title = _ref.title;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasLoadedImage = _useState2[0],
+      setHasLoadedImage = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      shouldShowHoverItem = _useState4[0],
+      setShouldShowHoverItem = _useState4[1];
+
+  var longPressTimeoutRef = (0, _react.useRef)();
+  var handleImageLoaded = (0, _react.useCallback)(function () {
+    setHasLoadedImage(true);
+  }, []);
+  var handleMouseEnter = (0, _react.useCallback)(function () {
+    return setShouldShowHoverItem(true);
+  }, []);
+  var handleMouseLeave = (0, _react.useCallback)(function () {
+    return setShouldShowHoverItem(false);
+  }, []);
+  var handleTouchStart = (0, _react.useCallback)(function (event) {
+    longPressTimeoutRef.current = window.setTimeout(function () {
+      if (typeof onLongPress === 'function') {
+        onLongPress(event);
+      }
+    }, 400);
+  }, [onLongPress]);
+  var handleTouchEnd = (0, _react.useCallback)(function () {
+    clearTimeout(longPressTimeoutRef.current);
+  }, []);
+  var iconOrImageElement = (0, _react.useMemo)(function () {
+    if (icons) {
+      return /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        icons: icons,
+        size: 22
+      }));
+    }
+
+    if (images && images[0] && images[1] && images[2]) {
+      var gridImages = [images[0], images[1], images[2]];
+      return /*#__PURE__*/_react.default.createElement(_GridImage.default, {
+        images: gridImages,
+        shouldShowRoundImage: shouldShowRoundImage,
+        size: 40
+      });
+    }
+
+    if (images && images[0]) {
+      return /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadImageWrapper, {
+        shouldShowRoundImage: shouldShowRoundImage
+      }, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadImage, {
+        isHidden: !hasLoadedImage,
+        onLoad: handleImageLoaded,
+        src: images[0]
+      }));
+    }
+
+    return undefined;
+  }, [handleImageLoaded, hasLoadedImage, icons, images, shouldShowRoundImage]);
+  return /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHead, {
+    className: "beta-chayns-list-item-head",
+    isClickable: typeof onClick === 'function' || isExpandable,
+    onClick: onClick,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onTouchStart: typeof onLongPress === 'function' ? handleTouchStart : undefined,
+    onTouchEnd: typeof onLongPress === 'function' ? handleTouchEnd : undefined
+  }, isAnyItemExpandable && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledMotionListItemHeadIndicator, {
+    animate: {
+      rotate: isOpen ? 90 : 0
+    },
+    initial: false,
+    transition: {
+      type: 'tween'
+    }
+  }, isExpandable && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: ['fa fa-chevron-right']
+  })), iconOrImageElement, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadContent, {
+    isIconOrImageGiven: iconOrImageElement !== undefined,
+    isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitle, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleText, {
+    className: "ellipsis"
+  }, title), rightElements && rightElements.length > 1 && rightElements[0] && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTopRightElement, null, rightElements[0])), subtitle && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitle, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitleText, {
+    className: "ellipsis"
+  }, subtitle), rightElements && rightElements.length > 1 && rightElements[1] && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadBottomRightElement, null, rightElements[1]))), (rightElements === null || rightElements === void 0 ? void 0 : rightElements.length) === 1 && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadRightElement, null, rightElements[0]), hoverItem && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledMotionListItemHeadHoverItem, {
+    animate: {
+      marginLeft: shouldShowHoverItem ? 8 : 0,
+      opacity: shouldShowHoverItem ? 1 : 0,
+      width: shouldShowHoverItem ? 'auto' : 0
+    },
+    initial: false,
+    transition: {
+      duration: 0.15,
+      type: 'tween'
+    }
+  }, hoverItem));
+};
+
+ListItemHead.displayName = 'ListItemHead';
+var _default = ListItemHead;
+exports.default = _default;
+//# sourceMappingURL=ListItemHead.js.map

package/lib/components/list/list-item/list-item-head/ListItemHead.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"names":["ListItemHead","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","title","hasLoadedImage","setHasLoadedImage","shouldShowHoverItem","setShouldShowHoverItem","longPressTimeoutRef","handleImageLoaded","handleMouseEnter","handleMouseLeave","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","gridImages","undefined","rotate","type","length","marginLeft","opacity","width","duration","displayName"],"mappings":"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","sourcesContent":["import React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport GridImage from '../../../grid-image/GridImage';\nimport Icon from '../../../icon/Icon';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadBottomRightElement,\n    StyledListItemHeadContent,\n    StyledListItemHeadIcon,\n    StyledListItemHeadImage,\n    StyledListItemHeadImageWrapper,\n    StyledListItemHeadRightElement,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTopRightElement,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ntype ListItemHeadProps = {\n    hoverItem?: ReactNode;\n    icons?: string[];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: [ReactNode, ...ReactNode[]];\n    subtitle?: ReactNode;\n    shouldShowRoundImage?: boolean;\n    title: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    hoverItem,\n    icons,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    onClick,\n    onLongPress,\n    rightElements,\n    subtitle,\n    shouldShowRoundImage,\n    title,\n}) => {\n    const [hasLoadedImage, setHasLoadedImage] = useState(false);\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\n\n    const handleImageLoaded = useCallback(() => {\n        setHasLoadedImage(true);\n    }, []);\n\n    const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n    const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n    const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n        (event) => {\n            longPressTimeoutRef.current = window.setTimeout(() => {\n                if (typeof onLongPress === 'function') {\n                    onLongPress(event);\n                }\n            }, 400);\n        },\n        [onLongPress]\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(longPressTimeoutRef.current);\n    }, []);\n\n    const iconOrImageElement = useMemo(() => {\n        if (icons) {\n            return (\n                <StyledListItemHeadIcon>\n                    <Icon icons={icons} size={22} />\n                </StyledListItemHeadIcon>\n            );\n        }\n\n        if (images && images[0] && images[1] && images[2]) {\n            const gridImages = [images[0], images[1], images[2]];\n\n            return (\n                <GridImage\n                    images={gridImages}\n                    shouldShowRoundImage={shouldShowRoundImage}\n                    size={40}\n                />\n            );\n        }\n\n        if (images && images[0]) {\n            return (\n                <StyledListItemHeadImageWrapper shouldShowRoundImage={shouldShowRoundImage}>\n                    <StyledListItemHeadImage\n                        isHidden={!hasLoadedImage}\n                        onLoad={handleImageLoaded}\n                        src={images[0]}\n                    />\n                </StyledListItemHeadImageWrapper>\n            );\n        }\n\n        return undefined;\n    }, [handleImageLoaded, hasLoadedImage, icons, images, shouldShowRoundImage]);\n\n    return (\n        <StyledListItemHead\n            className=\"beta-chayns-list-item-head\"\n            isClickable={typeof onClick === 'function' || isExpandable}\n            onClick={onClick}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n            onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n        >\n            {isAnyItemExpandable && (\n                <StyledMotionListItemHeadIndicator\n                    animate={{ rotate: isOpen ? 90 : 0 }}\n                    initial={false}\n                    transition={{ type: 'tween' }}\n                >\n                    {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n                </StyledMotionListItemHeadIndicator>\n            )}\n            {iconOrImageElement}\n            <StyledListItemHeadContent\n                isIconOrImageGiven={iconOrImageElement !== undefined}\n                isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleText className=\"ellipsis\">\n                        {title}\n                    </StyledListItemHeadTitleText>\n                    {rightElements && rightElements.length > 1 && rightElements[0] && (\n                        <StyledListItemHeadTopRightElement>\n                            {rightElements[0]}\n                        </StyledListItemHeadTopRightElement>\n                    )}\n                </StyledListItemHeadTitle>\n                {subtitle && (\n                    <StyledListItemHeadSubtitle>\n                        <StyledListItemHeadSubtitleText className=\"ellipsis\">\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                        {rightElements && rightElements.length > 1 && rightElements[1] && (\n                            <StyledListItemHeadBottomRightElement>\n                                {rightElements[1]}\n                            </StyledListItemHeadBottomRightElement>\n                        )}\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements?.length === 1 && (\n                <StyledListItemHeadRightElement>{rightElements[0]}</StyledListItemHeadRightElement>\n            )}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItem\n                    animate={{\n                        marginLeft: shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldShowHoverItem ? 1 : 0,\n                        width: shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    {hoverItem}\n                </StyledMotionListItemHeadHoverItem>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"file":"ListItemHead.js"}

package/lib/components/list/list-item/list-item-head/ListItemHead.styles.d.ts

@@ -0,0 +1,30 @@
+export declare const StyledListItemHead: import("styled-components").StyledComponent<"div", any, {
+    isClickable: boolean;
+} & {
+    theme: import("../../../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledMotionListItemHeadIndicator: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export declare const StyledListItemHeadIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledListItemHeadImageWrapper: import("styled-components").StyledComponent<"div", any, {
+    shouldShowRoundImage?: boolean | undefined;
+} & {
+    theme: import("../../../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+declare type StyledListItemHeadImageProps = {
+    isHidden: boolean;
+};
+export declare const StyledListItemHeadImage: import("styled-components").StyledComponent<"img", any, StyledListItemHeadImageProps, never>;
+declare type StyledListItemHeadContentProps = {
+    isIconOrImageGiven: boolean;
+    isOpen: boolean;
+};
+export declare const StyledListItemHeadContent: import("styled-components").StyledComponent<"div", any, StyledListItemHeadContentProps, never>;
+export declare const StyledListItemHeadTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledListItemHeadTitleText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledListItemHeadSubtitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledListItemHeadSubtitleText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledListItemHeadTopRightElement: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledListItemHeadBottomRightElement: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledListItemHeadRightElement: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledMotionListItemHeadHoverItem: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export {};

package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js

@@ -0,0 +1,103 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionListItemHeadIndicator = exports.StyledMotionListItemHeadHoverItem = exports.StyledListItemHeadTopRightElement = exports.StyledListItemHeadTitleText = exports.StyledListItemHeadTitle = exports.StyledListItemHeadSubtitleText = exports.StyledListItemHeadSubtitle = exports.StyledListItemHeadRightElement = exports.StyledListItemHeadImageWrapper = exports.StyledListItemHeadImage = exports.StyledListItemHeadIcon = exports.StyledListItemHeadContent = exports.StyledListItemHeadBottomRightElement = exports.StyledListItemHead = void 0;
+
+var _framerMotion = require("framer-motion");
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledListItemHead = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    color: ", ";\n    display: flex;\n    height: 64px;\n    padding: 12px 9px;\n\n    ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.text;
+}, function (_ref2) {
+  var isClickable = _ref2.isClickable;
+  return isClickable && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            cursor: pointer;\n        "])));
+});
+
+exports.StyledListItemHead = StyledListItemHead;
+var StyledMotionListItemHeadIndicator = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    height: 26px;\n    justify-content: center;\n    width: 26px;\n"])));
+exports.StyledMotionListItemHeadIndicator = StyledMotionListItemHeadIndicator;
+
+var StyledListItemHeadIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    align-items: center;\n    background-color: rgba(", ", 0.1);\n    box-shadow: 0 0 0 1px\n        rgba(", ", 0.08) inset;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    margin-right: 10px;\n    width: 40px;\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme['text-rgb'];
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme['009-rgb'];
+});
+
+exports.StyledListItemHeadIcon = StyledListItemHeadIcon;
+
+var StyledListItemHeadImageWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    background-color: rgba(\n        ", ",\n        0.1\n    );\n    border-radius: ", ";\n    box-shadow: 0 0 0 1px\n        rgba(", ", 0.08) inset;\n    flex: 0 0 auto;\n    height: 40px;\n    overflow: hidden;\n    transition: border-radius 0.3s ease;\n    width: 40px;\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme['text-rgb'];
+}, function (_ref6) {
+  var shouldShowRoundImage = _ref6.shouldShowRoundImage;
+  return shouldShowRoundImage ? '50%' : undefined;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme['009-rgb'];
+});
+
+exports.StyledListItemHeadImageWrapper = StyledListItemHeadImageWrapper;
+
+var StyledListItemHeadImage = _styledComponents.default.img(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    height: 100%;\n    object-fit: cover;\n    opacity: ", ";\n    transition: opacity 0.4s ease;\n    width: 100%;\n"])), function (_ref8) {
+  var isHidden = _ref8.isHidden;
+  return isHidden ? 0 : 1;
+});
+
+exports.StyledListItemHeadImage = StyledListItemHeadImage;
+
+var StyledListItemHeadContent = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    font-weight: ", ";\n    justify-content: center;\n    line-height: normal;\n    margin-left: ", ";\n    min-width: 0;\n"])), function (_ref9) {
+  var isOpen = _ref9.isOpen;
+  return isOpen ? 'bold' : 'normal';
+}, function (_ref10) {
+  var isIconOrImageGiven = _ref10.isIconOrImageGiven;
+  return isIconOrImageGiven ? '10px' : undefined;
+});
+
+exports.StyledListItemHeadContent = StyledListItemHeadContent;
+
+var StyledListItemHeadTitle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n"])));
+
+exports.StyledListItemHeadTitle = StyledListItemHeadTitle;
+
+var StyledListItemHeadTitleText = _styledComponents.default.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    min-width: 0;\n"])));
+
+exports.StyledListItemHeadTitleText = StyledListItemHeadTitleText;
+
+var StyledListItemHeadSubtitle = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 2px;\n    opacity: 0.75;\n"])));
+
+exports.StyledListItemHeadSubtitle = StyledListItemHeadSubtitle;
+
+var StyledListItemHeadSubtitleText = _styledComponents.default.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    font-size: 85%;\n    min-width: 0;\n"])));
+
+exports.StyledListItemHeadSubtitleText = StyledListItemHeadSubtitleText;
+
+var StyledListItemHeadTopRightElement = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    flex: 0 0 auto;\n    font-size: 85%;\n    margin-left: 8px;\n    opacity: 0.75;\n"])));
+
+exports.StyledListItemHeadTopRightElement = StyledListItemHeadTopRightElement;
+
+var StyledListItemHeadBottomRightElement = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    flex: 0 0 auto;\n    margin-left: 8px;\n    font-size: 85%;\n"])));
+
+exports.StyledListItemHeadBottomRightElement = StyledListItemHeadBottomRightElement;
+
+var StyledListItemHeadRightElement = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    flex: 0 0 auto;\n    margin-left: 8px;\n"])));
+
+exports.StyledListItemHeadRightElement = StyledListItemHeadRightElement;
+var StyledMotionListItemHeadHoverItem = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    overflow: hidden;\n"])));
+exports.StyledMotionListItemHeadHoverItem = StyledMotionListItemHeadHoverItem;
+//# sourceMappingURL=ListItemHead.styles.js.map

package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"names":["StyledListItemHead","styled","div","theme","text","isClickable","css","StyledMotionListItemHeadIndicator","motion","StyledListItemHeadIcon","StyledListItemHeadImageWrapper","shouldShowRoundImage","undefined","StyledListItemHeadImage","img","isHidden","StyledListItemHeadContent","isOpen","isIconOrImageGiven","StyledListItemHeadTitle","StyledListItemHeadTitleText","span","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadTopRightElement","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;AAOO,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV,+LAElB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAAwCA,KAAK,CAACC,IAA9C;AAAA,CAFkB,EAOzB;AAAA,MAAGC,WAAH,SAAGA,WAAH;AAAA,SACEA,WAAW,QACXC,qBADW,gHADb;AAAA,CAPyB,CAAxB;;;AAcA,IAAMC,iCAAiC,GAAG,+BAAOC,qBAAON,GAAd,CAAH,+MAAvC;;;AAWA,IAAMO,sBAAsB,GAAGR,0BAAOC,GAAV,6UAEN;AAAA,MAAGC,KAAH,SAAGA,KAAH;AAAA,SAA4CA,KAAK,CAAC,UAAD,CAAjD;AAAA,CAFM,EAIpB;AAAA,MAAGA,KAAH,SAAGA,KAAH;AAAA,SAA4CA,KAAK,CAAC,SAAD,CAAjD;AAAA,CAJoB,CAA5B;;;;AAiBA,IAAMO,8BAA8B,GAAGT,0BAAOC,GAAV,4VAEjC;AAAA,MAAGC,KAAH,SAAGA,KAAH;AAAA,SAAoDA,KAAK,CAAC,UAAD,CAAzD;AAAA,CAFiC,EAKtB;AAAA,MAAGQ,oBAAH,SAAGA,oBAAH;AAAA,SAA+BA,oBAAoB,GAAG,KAAH,GAAWC,SAA9D;AAAA,CALsB,EAO5B;AAAA,MAAGT,KAAH,SAAGA,KAAH;AAAA,SAAoDA,KAAK,CAAC,SAAD,CAAzD;AAAA,CAP4B,CAApC;;;;AAmBA,IAAMU,uBAAuB,GAAGZ,0BAAOa,GAAV,+LAGrB;AAAA,MAAGC,QAAH,SAAGA,QAAH;AAAA,SAAmBA,QAAQ,GAAG,CAAH,GAAO,CAAlC;AAAA,CAHqB,CAA7B;;;;AAaA,IAAMC,yBAAyB,GAAGf,0BAAOC,GAAV,2QAInB;AAAA,MAAGe,MAAH,SAAGA,MAAH;AAAA,SAAiBA,MAAM,GAAG,MAAH,GAAY,QAAnC;AAAA,CAJmB,EAOnB;AAAA,MAAGC,kBAAH,UAAGA,kBAAH;AAAA,SAA6BA,kBAAkB,GAAG,MAAH,GAAYN,SAA3D;AAAA,CAPmB,CAA/B;;;;AAWA,IAAMO,uBAAuB,GAAGlB,0BAAOC,GAAV,4JAA7B;;;;AAMA,IAAMkB,2BAA2B,GAAGnB,0BAAOoB,IAAV,iHAAjC;;;;AAKA,IAAMC,0BAA0B,GAAGrB,0BAAOC,GAAV,wMAAhC;;;;AAQA,IAAMqB,8BAA8B,GAAGtB,0BAAOoB,IAAV,wIAApC;;;;AAMA,IAAMG,iCAAiC,GAAGvB,0BAAOC,GAAV,gKAAvC;;;;AAOA,IAAMuB,oCAAoC,GAAGxB,0BAAOC,GAAV,4IAA1C;;;;AAMA,IAAMwB,8BAA8B,GAAGzB,0BAAOC,GAAV,uHAApC;;;AAKA,IAAMyB,iCAAiC,GAAG,+BAAOnB,qBAAON,GAAd,CAAH,kGAAvC","sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = WithTheme<{\n    isClickable: boolean;\n}>;\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledListItemHeadProps) => theme.text};\n    display: flex;\n    height: 64px;\n    padding: 12px 9px;\n\n    ${({ isClickable }) =>\n        isClickable &&\n        css`\n            cursor: pointer;\n        `}\n`;\n\nexport const StyledMotionListItemHeadIndicator = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    height: 26px;\n    justify-content: center;\n    width: 26px;\n`;\n\ntype StyledListItemHeadIconProps = WithTheme<unknown>;\n\nexport const StyledListItemHeadIcon = styled.div`\n    align-items: center;\n    background-color: rgba(${({ theme }: StyledListItemHeadIconProps) => theme['text-rgb']}, 0.1);\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledListItemHeadIconProps) => theme['009-rgb']}, 0.08) inset;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    margin-right: 10px;\n    width: 40px;\n`;\n\ntype StyledListItemHeadImageWrapperProps = WithTheme<{\n    shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledListItemHeadImageWrapper = styled.div<StyledListItemHeadImageWrapperProps>`\n    background-color: rgba(\n        ${({ theme }: StyledListItemHeadImageWrapperProps) => theme['text-rgb']},\n        0.1\n    );\n    border-radius: ${({ shouldShowRoundImage }) => (shouldShowRoundImage ? '50%' : undefined)};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledListItemHeadImageWrapperProps) => theme['009-rgb']}, 0.08) inset;\n    flex: 0 0 auto;\n    height: 40px;\n    overflow: hidden;\n    transition: border-radius 0.3s ease;\n    width: 40px;\n`;\n\ntype StyledListItemHeadImageProps = {\n    isHidden: boolean;\n};\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n    height: 100%;\n    object-fit: cover;\n    opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n    transition: opacity 0.4s ease;\n    width: 100%;\n`;\n\ntype StyledListItemHeadContentProps = {\n    isIconOrImageGiven: boolean;\n    isOpen: boolean;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    font-weight: ${({ isOpen }) => (isOpen ? 'bold' : 'normal')};\n    justify-content: center;\n    line-height: normal;\n    margin-left: ${({ isIconOrImageGiven }) => (isIconOrImageGiven ? '10px' : undefined)};\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadTitle = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleText = styled.span`\n    flex: 1 1 auto;\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 2px;\n    opacity: 0.75;\n`;\n\nexport const StyledListItemHeadSubtitleText = styled.span`\n    flex: 1 1 auto;\n    font-size: 85%;\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadTopRightElement = styled.div`\n    flex: 0 0 auto;\n    font-size: 85%;\n    margin-left: 8px;\n    opacity: 0.75;\n`;\n\nexport const StyledListItemHeadBottomRightElement = styled.div`\n    flex: 0 0 auto;\n    margin-left: 8px;\n    font-size: 85%;\n`;\n\nexport const StyledListItemHeadRightElement = styled.div`\n    flex: 0 0 auto;\n    margin-left: 8px;\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled(motion.div)`\n    overflow: hidden;\n`;\n"],"file":"ListItemHead.styles.js"}

package/lib/hooks/uuid.d.ts

@@ -0,0 +1 @@
+export declare const useUuid: () => string;

package/lib/hooks/uuid.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUuid = void 0;
+
+var _react = require("react");
+
+var _uuid = require("uuid");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var useUuid = function useUuid() {
+  var _useState = (0, _react.useState)((0, _uuid.v4)()),
+      _useState2 = _slicedToArray(_useState, 1),
+      uuid = _useState2[0];
+
+  return uuid;
+};
+
+exports.useUuid = useUuid;
+//# sourceMappingURL=uuid.js.map

package/lib/hooks/uuid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/uuid.ts"],"names":["useUuid","uuid"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,OAAO,GAAG,SAAVA,OAAU,GAAM;AACzB,kBAAe,qBAAS,eAAT,CAAf;AAAA;AAAA,MAAOC,IAAP;;AAEA,SAAOA,IAAP;AACH,CAJM","sourcesContent":["import { useState } from 'react';\nimport { v4 as uuidV4 } from 'uuid';\n\nexport const useUuid = () => {\n    const [uuid] = useState(uuidV4());\n\n    return uuid;\n};\n"],"file":"uuid.js"}

package/lib/index.d.ts

@@ -0,0 +1,13 @@
+export { default as Accordion } from './components/accordion/Accordion';
+export { default as AccordionContent } from './components/accordion/accordion-content/AccordionContent';
+export { default as AccordionGroup } from './components/accordion/accordion-group/AccordionGroup';
+export { default as AccordionIntro } from './components/accordion/accordion-intro/AccordionIntro';
+export { default as Badge } from './components/badge/Badge';
+export { default as Button } from './components/button/Button';
+export { default as ColorSchemeProvider } from './components/color-scheme-provider/ColorSchemeProvider';
+export { default as ContextMenu } from './components/context-menu/ContextMenu';
+export { default as GridImage } from './components/grid-image/GridImage';
+export { default as Icon } from './components/icon/Icon';
+export { default as List } from './components/list/List';
+export { default as ListItemContent } from './components/list/list-item/list-item-content/ListItemContent';
+export { default as ListItem } from './components/list/list-item/ListItem';

package/lib/index.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Accordion", {
+  enumerable: true,
+  get: function get() {
+    return _Accordion.default;
+  }
+});
+Object.defineProperty(exports, "AccordionContent", {
+  enumerable: true,
+  get: function get() {
+    return _AccordionContent.default;
+  }
+});
+Object.defineProperty(exports, "AccordionGroup", {
+  enumerable: true,
+  get: function get() {
+    return _AccordionGroup.default;
+  }
+});
+Object.defineProperty(exports, "AccordionIntro", {
+  enumerable: true,
+  get: function get() {
+    return _AccordionIntro.default;
+  }
+});
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function get() {
+    return _Badge.default;
+  }
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button.default;
+  }
+});
+Object.defineProperty(exports, "ColorSchemeProvider", {
+  enumerable: true,
+  get: function get() {
+    return _ColorSchemeProvider.default;
+  }
+});
+Object.defineProperty(exports, "ContextMenu", {
+  enumerable: true,
+  get: function get() {
+    return _ContextMenu.default;
+  }
+});
+Object.defineProperty(exports, "GridImage", {
+  enumerable: true,
+  get: function get() {
+    return _GridImage.default;
+  }
+});
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function get() {
+    return _Icon.default;
+  }
+});
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: function get() {
+    return _List.default;
+  }
+});
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function get() {
+    return _ListItem.default;
+  }
+});
+Object.defineProperty(exports, "ListItemContent", {
+  enumerable: true,
+  get: function get() {
+    return _ListItemContent.default;
+  }
+});
+
+var _Accordion = _interopRequireDefault(require("./components/accordion/Accordion"));
+
+var _AccordionContent = _interopRequireDefault(require("./components/accordion/accordion-content/AccordionContent"));
+
+var _AccordionGroup = _interopRequireDefault(require("./components/accordion/accordion-group/AccordionGroup"));
+
+var _AccordionIntro = _interopRequireDefault(require("./components/accordion/accordion-intro/AccordionIntro"));
+
+var _Badge = _interopRequireDefault(require("./components/badge/Badge"));
+
+var _Button = _interopRequireDefault(require("./components/button/Button"));
+
+var _ColorSchemeProvider = _interopRequireDefault(require("./components/color-scheme-provider/ColorSchemeProvider"));
+
+var _ContextMenu = _interopRequireDefault(require("./components/context-menu/ContextMenu"));
+
+var _GridImage = _interopRequireDefault(require("./components/grid-image/GridImage"));
+
+var _Icon = _interopRequireDefault(require("./components/icon/Icon"));
+
+var _List = _interopRequireDefault(require("./components/list/List"));
+
+var _ListItemContent = _interopRequireDefault(require("./components/list/list-item/list-item-content/ListItemContent"));
+
+var _ListItem = _interopRequireDefault(require("./components/list/list-item/ListItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { default as Accordion } from './components/accordion/Accordion';\nexport { default as AccordionContent } from './components/accordion/accordion-content/AccordionContent';\nexport { default as AccordionGroup } from './components/accordion/accordion-group/AccordionGroup';\nexport { default as AccordionIntro } from './components/accordion/accordion-intro/AccordionIntro';\nexport { default as Badge } from './components/badge/Badge';\nexport { default as Button } from './components/button/Button';\nexport { default as ColorSchemeProvider } from './components/color-scheme-provider/ColorSchemeProvider';\nexport { default as ContextMenu } from './components/context-menu/ContextMenu';\nexport { default as GridImage } from './components/grid-image/GridImage';\nexport { default as Icon } from './components/icon/Icon';\nexport { default as List } from './components/list/List';\nexport { default as ListItemContent } from './components/list/list-item/list-item-content/ListItemContent';\nexport { default as ListItem } from './components/list/list-item/ListItem';\n"],"file":"index.js"}