@chayns-components/core 5.0.0-beta.36 → 5.0.0-beta.37

package/lib/components/accordion/accordion-intro/AccordionIntro.d.ts

@@ -1,3 +1,9 @@
-import { FC } from 'react';
-declare const AccordionIntro: FC;
+import { FC, ReactNode } from 'react';
+export declare type AccordionIntroProps = {
+    /**
+     * The content of the accordion content element
+     */
+    children: ReactNode;
+};
+declare const AccordionIntro: FC<AccordionIntroProps>;
 export default AccordionIntro;

package/lib/components/accordion/accordion-intro/AccordionIntro.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionIntro.js","names":["AccordionIntro","children","displayName"],"sources":["../../../../src/components/accordion/accordion-intro/AccordionIntro.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { StyledAccordionIntro } from './AccordionIntro.styles';\n\nconst AccordionIntro: FC = ({ children }) => (\n    <StyledAccordionIntro className=\"beta-chayns-accordion-intro\">{children}</StyledAccordionIntro>\n);\n\nAccordionIntro.displayName = 'AccordionIntro';\n\nexport default AccordionIntro;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEA,MAAMA,cAAkB,GAAG;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,oBACvB,6BAAC,oCAAD;IAAsB,SAAS,EAAC;EAAhC,GAA+DA,QAA/D,CADuB;AAAA,CAA3B;;AAIAD,cAAc,CAACE,WAAf,GAA6B,gBAA7B;eAEeF,c"}
+{"version":3,"file":"AccordionIntro.js","names":["AccordionIntro","children","displayName"],"sources":["../../../../src/components/accordion/accordion-intro/AccordionIntro.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { StyledAccordionIntro } from './AccordionIntro.styles';\n\nexport type AccordionIntroProps = {\n    /**\n     * The content of the accordion content element\n     */\n    children: ReactNode;\n};\n\nconst AccordionIntro: FC<AccordionIntroProps> = ({ children }) => (\n    <StyledAccordionIntro className=\"beta-chayns-accordion-intro\">{children}</StyledAccordionIntro>\n);\n\nAccordionIntro.displayName = 'AccordionIntro';\n\nexport default AccordionIntro;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;AASA,MAAMA,cAAuC,GAAG;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,oBAC5C,6BAAC,oCAAD;IAAsB,SAAS,EAAC;EAAhC,GAA+DA,QAA/D,CAD4C;AAAA,CAAhD;;AAIAD,cAAc,CAACE,WAAf,GAA6B,gBAA7B;eAEeF,c"}

package/lib/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,25 @@
+import { ChangeEventHandler, FC, ReactNode } from 'react';
+export declare type CheckboxProps = {
+    /**
+     * Text for checkbox or switch
+     */
+    children?: ReactNode;
+    /**
+     * Indicates whether the checkbox or switch is selected
+     */
+    isChecked?: boolean;
+    /**
+     * Disables the checkbox or switch so it cannot be toggled
+     */
+    isDisabled?: boolean;
+    /**
+     * Function to be executed if the checked value changes
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Changes the design to use switch instead of checkbox
+     */
+    shouldShowAsSwitch?: boolean;
+};
+declare const Checkbox: FC<CheckboxProps>;
+export default Checkbox;

package/lib/components/checkbox/Checkbox.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _uuid = require("../../hooks/uuid");
+
+var _Checkbox = require("./Checkbox.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 Checkbox = _ref => {
+  let {
+    children,
+    isChecked,
+    isDisabled,
+    onChange,
+    shouldShowAsSwitch
+  } = _ref;
+  const [isActive, setIsActive] = (0, _react.useState)(isChecked !== null && isChecked !== void 0 ? isChecked : false);
+  const handleChange = (0, _react.useCallback)(event => {
+    setIsActive(event.target.checked);
+
+    if (typeof onChange === 'function') {
+      onChange(event);
+    }
+  }, [onChange]);
+  const uuid = (0, _uuid.useUuid)();
+  return /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckbox, null, /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxInput, {
+    checked: isChecked,
+    disabled: isDisabled,
+    id: uuid,
+    onChange: handleChange,
+    type: "checkbox"
+  }), /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxLabel, {
+    htmlFor: uuid,
+    isChecked: isChecked !== null && isChecked !== void 0 ? isChecked : isActive,
+    isDisabled: isDisabled,
+    shouldShowAsSwitch: shouldShowAsSwitch
+  }, children));
+};
+
+Checkbox.displayName = 'Checkbox';
+var _default = Checkbox;
+exports.default = _default;
+//# sourceMappingURL=Checkbox.js.map

package/lib/components/checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":["Checkbox","children","isChecked","isDisabled","onChange","shouldShowAsSwitch","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","displayName"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    useCallback,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactNode;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    onChange,\n    shouldShowAsSwitch,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange]\n    );\n\n    const uuid = useUuid();\n\n    return (\n        <StyledCheckbox>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxLabel\n                htmlFor={uuid}\n                isChecked={isChecked ?? isActive}\n                isDisabled={isDisabled}\n                shouldShowAsSwitch={shouldShowAsSwitch}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":";;;;;;;AAAA;;AAQA;;AACA;;;;;;AAyBA,MAAMA,QAA2B,GAAG,QAM9B;EAAA,IAN+B;IACjCC,QADiC;IAEjCC,SAFiC;IAGjCC,UAHiC;IAIjCC,QAJiC;IAKjCC;EALiC,CAM/B;EACF,MAAM,CAACC,QAAD,EAAWC,WAAX,IAA0B,IAAAC,eAAA,EAASN,SAAT,aAASA,SAAT,cAASA,SAAT,GAAsB,KAAtB,CAAhC;EAEA,MAAMO,YAAY,GAAG,IAAAC,kBAAA,EAChBC,KAAD,IAA0C;IACtCJ,WAAW,CAACI,KAAK,CAACC,MAAN,CAAaC,OAAd,CAAX;;IAEA,IAAI,OAAOT,QAAP,KAAoB,UAAxB,EAAoC;MAChCA,QAAQ,CAACO,KAAD,CAAR;IACH;EACJ,CAPgB,EAQjB,CAACP,QAAD,CARiB,CAArB;EAWA,MAAMU,IAAI,GAAG,IAAAC,aAAA,GAAb;EAEA,oBACI,6BAAC,wBAAD,qBACI,6BAAC,6BAAD;IACI,OAAO,EAAEb,SADb;IAEI,QAAQ,EAAEC,UAFd;IAGI,EAAE,EAAEW,IAHR;IAII,QAAQ,EAAEL,YAJd;IAKI,IAAI,EAAC;EALT,EADJ,eAQI,6BAAC,6BAAD;IACI,OAAO,EAAEK,IADb;IAEI,SAAS,EAAEZ,SAAF,aAAEA,SAAF,cAAEA,SAAF,GAAeI,QAF5B;IAGI,UAAU,EAAEH,UAHhB;IAII,kBAAkB,EAAEE;EAJxB,GAMKJ,QANL,CARJ,CADJ;AAmBH,CAzCD;;AA2CAD,QAAQ,CAACgB,WAAT,GAAuB,UAAvB;eAEehB,Q"}

package/lib/components/checkbox/Checkbox.styles.d.ts

@@ -0,0 +1,6 @@
+import type { CheckboxProps } from './Checkbox';
+export declare const StyledCheckbox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCheckboxInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const StyledCheckboxLabel: import("styled-components").StyledComponent<"label", any, Omit<CheckboxProps, "children" | "onChange"> & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;

package/lib/components/checkbox/Checkbox.styles.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckbox = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+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; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const StyledCheckbox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    display: flex;\n    position: relative;\n"])));
+
+exports.StyledCheckbox = StyledCheckbox;
+
+const StyledCheckboxInput = _styledComponents.default.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: none;\n"])));
+
+exports.StyledCheckboxInput = StyledCheckboxInput;
+
+const StyledCheckboxLabel = _styledComponents.default.label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    cursor: ", ";\n    opacity: ", ";\n    padding-left: ", ";\n    transition: opacity 0.2s ease;\n    user-select: none;\n\n    &:after {\n        ", "\n\n        content: ' ';\n        position: absolute;\n        top: 50%;\n        transform-origin: 100% 100%;\n    }\n\n    &:before {\n        background-color: ", ";\n        border: 1px solid rgba(", ", 0.5);\n        border-radius: ", ";\n        content: ' ';\n        height: ", ";\n        left: ", ";\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        transition: background-color 0.2s ease;\n        width: ", ";\n    }\n"])), _ref => {
+  let {
+    isDisabled
+  } = _ref;
+  return isDisabled ? 'default' : 'pointer';
+}, _ref2 => {
+  let {
+    isDisabled
+  } = _ref2;
+  return isDisabled ? 0.5 : 1;
+}, _ref3 => {
+  let {
+    shouldShowAsSwitch
+  } = _ref3;
+  return shouldShowAsSwitch ? '48px' : '20px';
+}, _ref4 => {
+  let {
+    isChecked,
+    shouldShowAsSwitch
+  } = _ref4;
+  return shouldShowAsSwitch ? (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      transform: translateY(-50%) translateX(", ");\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  "])), isChecked ? '18px' : 0) : (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 1px;\n                      opacity: ", ";\n                      transform: translateY(-50%) rotateZ(37deg);\n                      transition: opacity 0.2s ease;\n                      width: 5.5px;\n                  "])), isChecked ? 1 : 0);
+}, _ref5 => {
+  let {
+    isChecked,
+    shouldShowAsSwitch,
+    theme
+  } = _ref5;
+
+  if (shouldShowAsSwitch) {
+    return isChecked ? theme.green : theme.red;
+  }
+
+  return isChecked ? theme['408'] : theme['403'];
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme['409-rgb'];
+}, _ref7 => {
+  let {
+    shouldShowAsSwitch
+  } = _ref7;
+  return shouldShowAsSwitch ? '100px' : 0;
+}, _ref8 => {
+  let {
+    shouldShowAsSwitch
+  } = _ref8;
+  return shouldShowAsSwitch ? '13px' : '15px';
+}, _ref9 => {
+  let {
+    shouldShowAsSwitch
+  } = _ref9;
+  return shouldShowAsSwitch ? '10px' : 0;
+}, _ref10 => {
+  let {
+    shouldShowAsSwitch
+  } = _ref10;
+  return shouldShowAsSwitch ? '28px' : '15px';
+});
+
+exports.StyledCheckboxLabel = StyledCheckboxLabel;
+//# sourceMappingURL=Checkbox.styles.js.map

package/lib/components/checkbox/Checkbox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.styles.js","names":["StyledCheckbox","styled","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","isDisabled","shouldShowAsSwitch","isChecked","css","theme","green","red"],"sources":["../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<Omit<CheckboxProps, 'children' | 'onChange'>>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    padding-left: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n\n    &:after {\n        ${({ isChecked, shouldShowAsSwitch }) =>\n            shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      transform: translateY(-50%) translateX(${isChecked ? '18px' : 0});\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 1px;\n                      opacity: ${isChecked ? 1 : 0};\n                      transform: translateY(-50%) rotateZ(37deg);\n                      transition: opacity 0.2s ease;\n                      width: 5.5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n        top: 50%;\n        transform-origin: 100% 100%;\n    }\n\n    &:before {\n        background-color: ${({\n            isChecked,\n            shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxLabelProps) => {\n            if (shouldShowAsSwitch) {\n                return isChecked ? theme.green : theme.red;\n            }\n\n            return isChecked ? theme['408'] : theme['403'];\n        }};\n        border: 1px solid rgba(${({ theme }: StyledCheckboxLabelProps) => theme['409-rgb']}, 0.5);\n        border-radius: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        transition: background-color 0.2s ease;\n        width: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '28px' : '15px')};\n    }\n`;\n"],"mappings":";;;;;;;AAAA;;;;;;;;;;AAIO,MAAMA,cAAc,GAAGC,yBAAA,CAAOC,GAAV,8IAApB;;;;AAMA,MAAMC,mBAAmB,GAAGF,yBAAA,CAAOG,KAAV,6FAAzB;;;;AAMA,MAAMC,mBAAmB,GAAGJ,yBAAA,CAAOK,KAAV,+rBAClB;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAAqBA,UAAU,GAAG,SAAH,GAAe,SAA9C;AAAA,CADkB,EAEjB;EAAA,IAAC;IAAEA;EAAF,CAAD;EAAA,OAAqBA,UAAU,GAAG,GAAH,GAAS,CAAxC;AAAA,CAFiB,EAGZ;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAA6BA,kBAAkB,GAAG,MAAH,GAAY,MAA3D;AAAA,CAHY,EAQtB;EAAA,IAAC;IAAEC,SAAF;IAAaD;EAAb,CAAD;EAAA,OACEA,kBAAkB,OACZE,qBADY,+dAOiCD,SAAS,GAAG,MAAH,GAAY,CAPtD,QAWZC,qBAXY,mdAgBGD,SAAS,GAAG,CAAH,GAAO,CAhBnB,CADpB;AAAA,CARsB,EAsCJ,SAIY;EAAA,IAJX;IACjBA,SADiB;IAEjBD,kBAFiB;IAGjBG;EAHiB,CAIW;;EAC5B,IAAIH,kBAAJ,EAAwB;IACpB,OAAOC,SAAS,GAAGE,KAAK,CAACC,KAAT,GAAiBD,KAAK,CAACE,GAAvC;EACH;;EAED,OAAOJ,SAAS,GAAGE,KAAK,CAAC,KAAD,CAAR,GAAkBA,KAAK,CAAC,KAAD,CAAvC;AACH,CAhDuB,EAiDC;EAAA,IAAC;IAAEA;EAAF,CAAD;EAAA,OAAyCA,KAAK,CAAC,SAAD,CAA9C;AAAA,CAjDD,EAkDP;EAAA,IAAC;IAAEH;EAAF,CAAD;EAAA,OAA6BA,kBAAkB,GAAG,OAAH,GAAa,CAA5D;AAAA,CAlDO,EAoDd;EAAA,IAAC;IAAEA;EAAF,CAAD;EAAA,OAA6BA,kBAAkB,GAAG,MAAH,GAAY,MAA3D;AAAA,CApDc,EAqDhB;EAAA,IAAC;IAAEA;EAAF,CAAD;EAAA,OAA6BA,kBAAkB,GAAG,MAAH,GAAY,CAA3D;AAAA,CArDgB,EA0Df;EAAA,IAAC;IAAEA;EAAF,CAAD;EAAA,OAA6BA,kBAAkB,GAAG,MAAH,GAAY,MAA3D;AAAA,CA1De,CAAzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.36",
+    "version": "5.0.0-beta.37",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -62,5 +62,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "9134108f3ef85f5628588b22942ada99fcb515c9"
+    "gitHead": "1a1a9eedf7067405d4138fbec50b7031045f94d2"
 }