@chayns-components/core 5.0.0-beta.22 → 5.0.0-beta.220

package/lib/components/radio-button/RadioButton.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _RadioButtonGroup = require("./radio-button-group/RadioButtonGroup");
+var _RadioButton = require("./RadioButton.styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const RadioButton = _ref => {
+  let {
+    isChecked,
+    label,
+    onChange,
+    id,
+    isDisabled = false
+  } = _ref;
+  const {
+    selectedRadioButtonId,
+    updateSelectedRadioButtonId
+  } = (0, _react.useContext)(_RadioButtonGroup.RadioButtonGroupContext);
+  const [internalIsChecked, setInternalIsChecked] = (0, _react.useState)(false);
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  const isInGroup = typeof updateSelectedRadioButtonId === 'function';
+  const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;
+  const isInitialRenderRef = (0, _react.useRef)(true);
+  (0, _react.useEffect)(() => {
+    if (isChecked) {
+      setInternalIsChecked(isChecked);
+    }
+  }, [isChecked]);
+  (0, _react.useEffect)(() => {
+    if (isInitialRenderRef.current) {
+      isInitialRenderRef.current = false;
+    } else if (typeof onChange === 'function') {
+      onChange({
+        isChecked: isMarked,
+        id
+      });
+    }
+  }, [id, isMarked, onChange]);
+  const handleClick = (0, _react.useCallback)(() => {
+    if (isDisabled) {
+      return;
+    }
+    if (typeof updateSelectedRadioButtonId === 'function') {
+      updateSelectedRadioButtonId(id);
+    }
+    setInternalIsChecked(prevState => !prevState);
+  }, [id, isDisabled, updateSelectedRadioButtonId]);
+  const handleMouseEnter = (0, _react.useCallback)(() => {
+    if (!isDisabled) {
+      setIsHovered(true);
+    }
+  }, [isDisabled]);
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButton, {
+    isDisabled: isDisabled,
+    onClick: handleClick,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButtonPseudoCheckBox, {
+    isChecked: isMarked
+  }, /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButtonCheckBoxMark, {
+    isHovered: isHovered,
+    isSelected: isMarked
+  })), /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButtonCheckBox, {
+    disabled: isDisabled,
+    type: "radio",
+    checked: isMarked,
+    onChange: () => {}
+  }), label && /*#__PURE__*/_react.default.createElement(_RadioButton.StyledRadioButtonLabel, null, label)), [handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label]);
+};
+RadioButton.displayName = 'RadioButton';
+var _default = RadioButton;
+exports.default = _default;
+//# sourceMappingURL=RadioButton.js.map

package/lib/components/radio-button/RadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.js","names":["_react","_interopRequireWildcard","require","_RadioButtonGroup","_RadioButton","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","RadioButton","_ref","isChecked","label","onChange","id","isDisabled","selectedRadioButtonId","updateSelectedRadioButtonId","useContext","RadioButtonGroupContext","internalIsChecked","setInternalIsChecked","useState","isHovered","setIsHovered","isInGroup","isMarked","isInitialRenderRef","useRef","useEffect","current","handleClick","useCallback","prevState","handleMouseEnter","handleMouseLeave","useMemo","createElement","StyledRadioButton","onClick","onMouseEnter","onMouseLeave","StyledRadioButtonPseudoCheckBox","StyledRadioButtonCheckBoxMark","isSelected","StyledRadioButtonCheckBox","disabled","type","checked","StyledRadioButtonLabel","displayName","_default","exports"],"sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import React, { FC, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n    StyledRadioButton,\n    StyledRadioButtonCheckBox,\n    StyledRadioButtonCheckBoxMark,\n    StyledRadioButtonLabel,\n    StyledRadioButtonPseudoCheckBox,\n} from './RadioButton.styles';\nimport type { RadioButtonItem } from './types';\n\nexport type RadioButtonProps = {\n    /**\n     * Whether the radio button should be checked.\n     */\n    isChecked?: boolean;\n    /**\n     * whether the RadioButton should be shown.\n     */\n    isDisabled?: boolean;\n    /**\n     * The id of the radio button.\n     */\n    id: string;\n    /**\n     * The label that should be displayed next to the radio button.\n     */\n    label?: string;\n    /**\n     * Function to be executed when a button is checked.\n     */\n    onChange?: (item: RadioButtonItem) => void;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({\n    isChecked,\n    label,\n    onChange,\n    id,\n    isDisabled = false,\n}) => {\n    const { selectedRadioButtonId, updateSelectedRadioButtonId } =\n        useContext(RadioButtonGroupContext);\n\n    const [internalIsChecked, setInternalIsChecked] = useState(false);\n    const [isHovered, setIsHovered] = useState(false);\n\n    const isInGroup = typeof updateSelectedRadioButtonId === 'function';\n\n    const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;\n\n    const isInitialRenderRef = useRef(true);\n\n    useEffect(() => {\n        if (isChecked) {\n            setInternalIsChecked(isChecked);\n        }\n    }, [isChecked]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (typeof onChange === 'function') {\n            onChange({ isChecked: isMarked, id });\n        }\n    }, [id, isMarked, onChange]);\n\n    const handleClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (typeof updateSelectedRadioButtonId === 'function') {\n            updateSelectedRadioButtonId(id);\n        }\n\n        setInternalIsChecked((prevState) => !prevState);\n    }, [id, isDisabled, updateSelectedRadioButtonId]);\n\n    const handleMouseEnter = useCallback(() => {\n        if (!isDisabled) {\n            setIsHovered(true);\n        }\n    }, [isDisabled]);\n\n    const handleMouseLeave = () => {\n        setIsHovered(false);\n    };\n\n    return useMemo(\n        () => (\n            <StyledRadioButton\n                isDisabled={isDisabled}\n                onClick={handleClick}\n                onMouseEnter={handleMouseEnter}\n                onMouseLeave={handleMouseLeave}\n            >\n                <StyledRadioButtonPseudoCheckBox isChecked={isMarked}>\n                    <StyledRadioButtonCheckBoxMark isHovered={isHovered} isSelected={isMarked} />\n                </StyledRadioButtonPseudoCheckBox>\n                <StyledRadioButtonCheckBox\n                    disabled={isDisabled}\n                    type=\"radio\"\n                    checked={isMarked}\n                    onChange={() => {}}\n                />\n                {label && <StyledRadioButtonLabel>{label}</StyledRadioButtonLabel>}\n            </StyledRadioButton>\n        ),\n        [handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label]\n    );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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"}

package/lib/components/radio-button/RadioButton.styles.d.ts

@@ -0,0 +1,22 @@
+export declare const StyledRadioButton: import("styled-components").StyledComponent<"span", any, {
+    isDisabled: boolean;
+} & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledRadioButtonCheckBox: import("styled-components").StyledComponent<"input", any, {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledRadioButtonPseudoCheckBox: import("styled-components").StyledComponent<"div", any, {
+    isChecked: boolean;
+} & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledRadioButtonCheckBoxMark: import("styled-components").StyledComponent<"span", any, {
+    isHovered: boolean;
+    isSelected: boolean;
+} & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledRadioButtonLabel: import("styled-components").StyledComponent<"p", any, {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;

package/lib/components/radio-button/RadioButton.styles.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledRadioButtonPseudoCheckBox = exports.StyledRadioButtonLabel = exports.StyledRadioButtonCheckBoxMark = exports.StyledRadioButtonCheckBox = exports.StyledRadioButton = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const StyledRadioButton = _styledComponents.default.span`
+    display: flex;
+    gap: 5px;
+    user-select: none;
+    width: fit-content;
+    align-items: center;
+    position: relative;
+    cursor: ${_ref => {
+  let {
+    isDisabled
+  } = _ref;
+  return isDisabled ? 'default !important' : 'pointer';
+}};
+    opacity: ${_ref2 => {
+  let {
+    isDisabled
+  } = _ref2;
+  return isDisabled ? 0.5 : 1;
+}};
+`;
+exports.StyledRadioButton = StyledRadioButton;
+const StyledRadioButtonCheckBox = _styledComponents.default.input`
+    opacity: 0;
+`;
+exports.StyledRadioButtonCheckBox = StyledRadioButtonCheckBox;
+const StyledRadioButtonPseudoCheckBox = _styledComponents.default.div`
+    background-color: ${_ref3 => {
+  let {
+    theme,
+    isChecked
+  } = _ref3;
+  return isChecked ? theme.secondary : theme['secondary-103'];
+}};
+    opacity: 0.5;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    width: 13px;
+    height: 13px;
+    position: absolute;
+    border-radius: 100%;
+    top: 22%;
+    left: -1%;
+    cursor: pointer !important;
+`;
+exports.StyledRadioButtonPseudoCheckBox = StyledRadioButtonPseudoCheckBox;
+const StyledRadioButtonCheckBoxMark = _styledComponents.default.span`
+    cursor: pointer;
+    background-color: transparent;
+    position: absolute;
+    top: 0;
+    left: 2.925px;
+    display: inline-block;
+    transform: rotate(35deg);
+    height: 9px;
+    width: 5px;
+    border-bottom: 2px solid white;
+    border-right: 2px solid white;
+    border-top: transparent;
+    border-left: transparent;
+    z-index: 2;
+
+    ${_ref4 => {
+  let {
+    isHovered,
+    isSelected
+  } = _ref4;
+  if (isSelected) {
+    return (0, _styledComponents.css)`
+                opacity: 1;
+            `;
+  }
+  if (isHovered) {
+    return (0, _styledComponents.css)`
+                opacity: 0.5;
+            `;
+  }
+  return (0, _styledComponents.css)`
+            opacity: 0;
+        `;
+}}
+`;
+exports.StyledRadioButtonCheckBoxMark = StyledRadioButtonCheckBoxMark;
+const StyledRadioButtonLabel = _styledComponents.default.p`
+    color: ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.text;
+}};
+`;
+exports.StyledRadioButtonLabel = StyledRadioButtonLabel;
+//# sourceMappingURL=RadioButton.styles.js.map

package/lib/components/radio-button/RadioButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledRadioButton","styled","span","_ref","isDisabled","_ref2","exports","StyledRadioButtonCheckBox","input","StyledRadioButtonPseudoCheckBox","div","_ref3","theme","isChecked","secondary","StyledRadioButtonCheckBoxMark","_ref4","isHovered","isSelected","css","StyledRadioButtonLabel","p","_ref5","text"],"sources":["../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledRadioButtonProps = WithTheme<{ isDisabled: boolean }>;\n\nexport const StyledRadioButton = styled.span<StyledRadioButtonProps>`\n    display: flex;\n    gap: 5px;\n    user-select: none;\n    width: fit-content;\n    align-items: center;\n    position: relative;\n    cursor: ${({ isDisabled }: StyledRadioButtonProps) =>\n        isDisabled ? 'default !important' : 'pointer'};\n    opacity: ${({ isDisabled }: StyledRadioButtonProps) => (isDisabled ? 0.5 : 1)};\n`;\n\ntype StyledRadioButtonCheckBoxProps = WithTheme<unknown>;\n\nexport const StyledRadioButtonCheckBox = styled.input<StyledRadioButtonCheckBoxProps>`\n    opacity: 0;\n`;\n\ntype StyledRadioButtonPseudoCheckBoxProps = WithTheme<{ isChecked: boolean }>;\n\nexport const StyledRadioButtonPseudoCheckBox = styled.div<StyledRadioButtonPseudoCheckBoxProps>`\n    background-color: ${({ theme, isChecked }: StyledRadioButtonPseudoCheckBoxProps) =>\n        isChecked ? theme.secondary : theme['secondary-103']};\n    opacity: 0.5;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    width: 13px;\n    height: 13px;\n    position: absolute;\n    border-radius: 100%;\n    top: 22%;\n    left: -1%;\n    cursor: pointer !important;\n`;\n\ntype StyledRadioButtonCheckBoxMarkProps = WithTheme<{\n    isHovered: boolean;\n    isSelected: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBoxMark = styled.span<StyledRadioButtonCheckBoxMarkProps>`\n    cursor: pointer;\n    background-color: transparent;\n    position: absolute;\n    top: 0;\n    left: 2.925px;\n    display: inline-block;\n    transform: rotate(35deg);\n    height: 9px;\n    width: 5px;\n    border-bottom: 2px solid white;\n    border-right: 2px solid white;\n    border-top: transparent;\n    border-left: transparent;\n    z-index: 2;\n\n    ${({ isHovered, isSelected }) => {\n        if (isSelected) {\n            return css`\n                opacity: 1;\n            `;\n        }\n\n        if (isHovered) {\n            return css`\n                opacity: 0.5;\n            `;\n        }\n\n        return css`\n            opacity: 0;\n        `;\n    }}\n`;\n\ntype StyledRadioButtonLabelProps = WithTheme<unknown>;\n\nexport const StyledRadioButtonLabel = styled.p<StyledRadioButtonLabelProps>`\n    color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n`;\n"],"mappings":"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"}

package/lib/components/radio-button/radio-button-group/RadioButtonGroup.d.ts

@@ -0,0 +1,21 @@
+import React, { FC, ReactNode } from 'react';
+import type { RadioButtonItem } from '../types';
+type IUpdateSelectedRadioButtonId = (id: string) => void;
+interface IRadioButtonGroupContext {
+    selectedRadioButtonId: string | undefined;
+    updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;
+}
+export declare const RadioButtonGroupContext: React.Context<IRadioButtonGroupContext>;
+export type RadioButtonGroupProps = {
+    /**
+     * The RadioButtons that should be grouped. Radio buttons with the same group are
+     * automatically unchecked when an `RadioButton` of the group is checked.
+     */
+    children: ReactNode;
+    /**
+     * Function to be executed when a button is checked.
+     */
+    onChange?: (item: RadioButtonItem) => void;
+};
+declare const RadioButtonGroup: FC<RadioButtonGroupProps>;
+export default RadioButtonGroup;

package/lib/components/radio-button/radio-button-group/RadioButtonGroup.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RadioButtonGroupContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const RadioButtonGroupContext = /*#__PURE__*/_react.default.createContext({
+  selectedRadioButtonId: undefined,
+  updateSelectedRadioButtonId: undefined
+});
+exports.RadioButtonGroupContext = RadioButtonGroupContext;
+RadioButtonGroupContext.displayName = 'RadioButtonGroupContext';
+const RadioButtonGroup = _ref => {
+  let {
+    children,
+    onChange
+  } = _ref;
+  const [selectedRadioButtonId, setSelectedRadioButtonId] = (0, _react.useState)(undefined);
+  const isInitialRenderRef = (0, _react.useRef)(true);
+  const updateSelectedRadioButtonId = (0, _react.useCallback)(id => {
+    setSelectedRadioButtonId(currentSelectedRadioButtonId => {
+      if (currentSelectedRadioButtonId === id) {
+        return undefined;
+      }
+      return id;
+    });
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (isInitialRenderRef.current) {
+      isInitialRenderRef.current = false;
+    } else if (typeof selectedRadioButtonId === 'string') {
+      if (typeof onChange === 'function') {
+        onChange({
+          id: selectedRadioButtonId !== null && selectedRadioButtonId !== void 0 ? selectedRadioButtonId : '',
+          isChecked: true
+        });
+      }
+    }
+  }, [onChange, selectedRadioButtonId]);
+  const providerValue = (0, _react.useMemo)(() => ({
+    selectedRadioButtonId,
+    updateSelectedRadioButtonId
+  }), [selectedRadioButtonId, updateSelectedRadioButtonId]);
+  return /*#__PURE__*/_react.default.createElement(RadioButtonGroupContext.Provider, {
+    value: providerValue
+  }, children);
+};
+RadioButtonGroup.displayName = 'RadioButtonGroup';
+var _default = RadioButtonGroup;
+exports.default = _default;
+//# sourceMappingURL=RadioButtonGroup.js.map

package/lib/components/radio-button/radio-button-group/RadioButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.js","names":["_react","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","RadioButtonGroupContext","React","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","exports","displayName","RadioButtonGroup","_ref","children","onChange","setSelectedRadioButtonId","useState","isInitialRenderRef","useRef","useCallback","id","currentSelectedRadioButtonId","useEffect","current","isChecked","providerValue","useMemo","createElement","Provider","value","_default"],"sources":["../../../../src/components/radio-button/radio-button-group/RadioButtonGroup.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { RadioButtonItem } from '../types';\n\ntype IUpdateSelectedRadioButtonId = (id: string) => void;\n\ninterface IRadioButtonGroupContext {\n    selectedRadioButtonId: string | undefined;\n    updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n    selectedRadioButtonId: undefined,\n    updateSelectedRadioButtonId: undefined,\n});\n\nRadioButtonGroupContext.displayName = 'RadioButtonGroupContext';\n\nexport type RadioButtonGroupProps = {\n    /**\n     * The RadioButtons that should be grouped. Radio buttons with the same group are\n     * automatically unchecked when an `RadioButton` of the group is checked.\n     */\n    children: ReactNode;\n    /**\n     * Function to be executed when a button is checked.\n     */\n    onChange?: (item: RadioButtonItem) => void;\n};\n\nconst RadioButtonGroup: FC<RadioButtonGroupProps> = ({ children, onChange }) => {\n    const [selectedRadioButtonId, setSelectedRadioButtonId] =\n        useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n\n    const isInitialRenderRef = useRef(true);\n\n    const updateSelectedRadioButtonId = useCallback<IUpdateSelectedRadioButtonId>((id) => {\n        setSelectedRadioButtonId((currentSelectedRadioButtonId) => {\n            if (currentSelectedRadioButtonId === id) {\n                return undefined;\n            }\n\n            return id;\n        });\n    }, []);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (typeof selectedRadioButtonId === 'string') {\n            if (typeof onChange === 'function') {\n                onChange({ id: selectedRadioButtonId ?? '', isChecked: true });\n            }\n        }\n    }, [onChange, selectedRadioButtonId]);\n\n    const providerValue = useMemo<IRadioButtonGroupContext>(\n        () => ({\n            selectedRadioButtonId,\n            updateSelectedRadioButtonId,\n        }),\n        [selectedRadioButtonId, updateSelectedRadioButtonId]\n    );\n\n    return (\n        <RadioButtonGroupContext.Provider value={providerValue}>\n            {children}\n        </RadioButtonGroupContext.Provider>\n    );\n};\n\nRadioButtonGroup.displayName = 'RadioButtonGroup';\n\nexport default RadioButtonGroup;\n"],"mappings":"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"}

package/lib/components/radio-button/types.d.ts

@@ -0,0 +1,4 @@
+export interface RadioButtonItem {
+    id: string;
+    isChecked: boolean;
+}

package/lib/components/radio-button/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/lib/components/radio-button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/components/radio-button/types.ts"],"sourcesContent":["export interface RadioButtonItem {\n    id: string;\n    isChecked: boolean;\n}\n"],"mappings":""}

package/lib/components/scroll-view/ScrollView.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, FC } from 'react';
+export type ScrollViewProps = {
+    /**
+     * The maximum height of the scroll view.
+     */
+    maxHeight: CSSProperties['height'];
+};
+declare const ScrollView: FC<ScrollViewProps>;
+export default ScrollView;

package/lib/components/scroll-view/ScrollView.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ScrollView = require("./ScrollView.styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const ScrollView = _ref => {
+  let {
+    maxHeight = '300px',
+    children
+  } = _ref;
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ScrollView.StyledScrollView, {
+    maxHeight: maxHeight
+  }, children), [children, maxHeight]);
+};
+ScrollView.displayName = 'ScrollView';
+var _default = ScrollView;
+exports.default = _default;
+//# sourceMappingURL=ScrollView.js.map

package/lib/components/scroll-view/ScrollView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.js","names":["_react","_interopRequireWildcard","require","_ScrollView","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ScrollView","_ref","maxHeight","children","useMemo","createElement","StyledScrollView","displayName","_default","exports"],"sources":["../../../src/components/scroll-view/ScrollView.tsx"],"sourcesContent":["import React, { CSSProperties, FC, useMemo } from 'react';\nimport { StyledScrollView } from './ScrollView.styles';\n\nexport type ScrollViewProps = {\n    /**\n     * The maximum height of the scroll view.\n     */\n    maxHeight: CSSProperties['height'];\n};\n\nconst ScrollView: FC<ScrollViewProps> = ({ maxHeight = '300px', children }) =>\n    useMemo(\n        () => <StyledScrollView maxHeight={maxHeight}>{children}</StyledScrollView>,\n        [children, maxHeight]\n    );\n\nScrollView.displayName = 'ScrollView';\n\nexport default ScrollView;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAAuD,SAAAE,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAJ,wBAAAQ,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AASvD,MAAMW,UAA+B,GAAGC,IAAA;EAAA,IAAC;IAAEC,SAAS,GAAG,OAAO;IAAEC;EAAS,CAAC,GAAAF,IAAA;EAAA,OACtE,IAAAG,cAAO,EACH,mBAAM9B,MAAA,CAAAW,OAAA,CAAAoB,aAAA,CAAC5B,WAAA,CAAA6B,gBAAgB;IAACJ,SAAS,EAAEA;EAAU,GAAEC,QAA2B,CAAC,EAC3E,CAACA,QAAQ,EAAED,SAAS,CACxB,CAAC;AAAA;AAELF,UAAU,CAACO,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAEvBR,UAAU;AAAAS,OAAA,CAAAxB,OAAA,GAAAuB,QAAA"}

package/lib/components/scroll-view/ScrollView.styles.d.ts

@@ -0,0 +1,6 @@
+import type { CSSProperties } from 'react';
+export declare const StyledScrollView: import("styled-components").StyledComponent<"div", any, {
+    maxHeight: CSSProperties['height'];
+} & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;

package/lib/components/scroll-view/ScrollView.styles.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledScrollView = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledScrollView = _styledComponents.default.div`
+    max-height: ${_ref => {
+  let {
+    maxHeight
+  } = _ref;
+  return maxHeight;
+}};
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+        width: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: rgba(160, 160, 160, 1);
+    }
+`;
+exports.StyledScrollView = StyledScrollView;
+//# sourceMappingURL=ScrollView.styles.js.map

package/lib/components/scroll-view/ScrollView.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledScrollView","styled","div","_ref","maxHeight","exports"],"sources":["../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledScrollViewProps = WithTheme<{ maxHeight: CSSProperties['height'] }>;\n\nexport const StyledScrollView = styled.div<StyledScrollViewProps>`\n    max-height: ${({ maxHeight }) => maxHeight};\n    overflow-y: scroll;\n\n    &::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: rgba(160, 160, 160, 1);\n    }\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAKhC,MAAMG,gBAAgB,GAAGC,yBAAM,CAACC,GAA2B;AAClE,kBAAkBC,IAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,IAAA;EAAA,OAAKC,SAAS;AAAA,CAAC;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAL,gBAAA,GAAAA,gBAAA"}

package/lib/components/search-box/SearchBox.d.ts

@@ -0,0 +1,26 @@
+import { ChangeEventHandler, FC, FocusEventHandler } from 'react';
+import type { ISearchBoxItem } from './types';
+export type SearchBoxProps = {
+    /**
+     * A list of items that can be searched.
+     */
+    list: ISearchBoxItem[];
+    /**
+     * The placeholder that should be displayed.
+     */
+    placeholder?: string;
+    /**
+     * Function to be executed when the input lost focus.
+     */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Function to be executed when the input is changed.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Function to be executed when an item is selected.
+     */
+    onSelect?: (item: ISearchBoxItem) => void;
+};
+declare const SearchBox: FC<SearchBoxProps>;
+export default SearchBox;

package/lib/components/search-box/SearchBox.js

@@ -0,0 +1,166 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _calculate = require("../../utils/calculate");
+var _Input = _interopRequireDefault(require("../input/Input"));
+var _SearchBoxItem = _interopRequireDefault(require("./search-box-item/SearchBoxItem"));
+var _SearchBox = require("./SearchBox.styles");
+var _utils = require("./utils");
+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 (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; }
+const SearchBox = _ref => {
+  let {
+    placeholder,
+    list,
+    onChange,
+    onBlur,
+    onSelect
+  } = _ref;
+  const [matchingItems, setMatchingItems] = (0, _react.useState)([]);
+  const [value, setValue] = (0, _react.useState)('');
+  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
+  const [height, setHeight] = (0, _react.useState)(0);
+  const [width, setWidth] = (0, _react.useState)(0);
+  const boxRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
+  const inputRef = (0, _react.useRef)(null);
+
+  /**
+   * This function closes the list of items
+   */
+  const handleOutsideClick = (0, _react.useCallback)(event => {
+    if (boxRef.current && !boxRef.current.contains(event.target)) {
+      setIsAnimating(false);
+    }
+  }, [boxRef]);
+
+  /**
+   * This hook listens for clicks
+   */
+  (0, _react.useEffect)(() => {
+    document.addEventListener('click', handleOutsideClick);
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+    };
+  }, [handleOutsideClick, boxRef]);
+
+  /**
+   * This hook calculates the height
+   */
+  (0, _react.useEffect)(() => {
+    const textArray = list.map(_ref2 => {
+      let {
+        text
+      } = _ref2;
+      return text;
+    });
+    setHeight((0, _calculate.calculateContentHeight)(textArray));
+  }, [list, placeholder]);
+
+  /**
+   * This hook calculates the width
+   */
+  (0, _react.useEffect)(() => {
+    const input = document.getElementById('search_box_input');
+    if (input) {
+      setWidth(input.offsetWidth);
+    }
+  }, []);
+
+  /**
+   * This function handles changes of the input
+   */
+  const handleChange = (0, _react.useCallback)(event => {
+    const searchedItems = (0, _utils.searchList)({
+      items: list,
+      searchString: event.target.value
+    });
+    setMatchingItems(searchedItems);
+    setIsAnimating(searchedItems.length !== 0);
+    setValue(event.target.value);
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+  }, [list, onChange]);
+
+  /**
+   * This function handles the blur event of the input
+   */
+  const handleBlur = (0, _react.useCallback)(event => {
+    if (typeof onBlur === 'function') {
+      onBlur(event);
+    }
+  }, [onBlur]);
+
+  /**
+   * This function handles the item selection
+   */
+  const handleSelect = (0, _react.useCallback)(item => {
+    setValue(item.text);
+    setIsAnimating(false);
+    if (typeof onSelect === 'function') {
+      onSelect(item);
+    }
+  }, [onSelect]);
+  const content = (0, _react.useMemo)(() => {
+    const items = [];
+    matchingItems.sort((a, b) => a.text.localeCompare(b.text));
+    matchingItems.forEach(_ref3 => {
+      let {
+        id,
+        text
+      } = _ref3;
+      items.push( /*#__PURE__*/_react.default.createElement(_SearchBoxItem.default, {
+        key: id,
+        text: text,
+        id: id,
+        onSelect: handleSelect
+      }));
+    });
+    return items;
+  }, [handleSelect, matchingItems]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SearchBox.StyledSearchBox, {
+    ref: boxRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "search_box_input"
+  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    ref: inputRef,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    placeholder: placeholder,
+    value: value
+  })), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    initial: false
+  }, /*#__PURE__*/_react.default.createElement(_SearchBox.StyledMotionSearchBoxBody, {
+    key: "content",
+    height: height,
+    width: width,
+    initial: {
+      height: 0,
+      opacity: 0
+    },
+    animate: isAnimating ? {
+      height: 'fit-content',
+      opacity: 1
+    } : {
+      height: 0,
+      opacity: 0
+    },
+    transition: {
+      duration: 0.2,
+      type: 'tween'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: contentRef
+  }, content)))), [content, handleBlur, handleChange, height, isAnimating, placeholder, value, width]);
+};
+SearchBox.displayName = 'SearchBox';
+var _default = SearchBox;
+exports.default = _default;
+//# sourceMappingURL=SearchBox.js.map