@chayns-components/core 5.0.44 → 5.0.45

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

@@ -16,6 +16,8 @@ const Checkbox = ({
   labelClassName,
   onChange,
   shouldShowAsSwitch,
+  borderRadius,
+  colors,
   shouldShowCentered = false,
   shouldChangeOnLabelClick = true
 }) => {
@@ -59,7 +61,11 @@ const Checkbox = ({
     ref: checkboxBoxRef,
     $isChecked: isChecked ?? isActive,
     $isDisabled: isDisabled,
-    $shouldShowAsSwitch: shouldShowAsSwitch
+    $shouldShowAsSwitch: shouldShowAsSwitch,
+    $checkedBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.checkedBackgroundColor,
+    $uncheckedBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.uncheckedBackgroundColor,
+    $borderRadius: borderRadius,
+    $borderColor: colors === null || colors === void 0 ? void 0 : colors.borderColor
   })), /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxLabel, {
     className: labelClassName,
     $isDisabled: isDisabled,

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_calculate","_Checkbox","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","useState","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","useRef","checkboxRootRef","handleChange","useCallback","event","target","checked","uuid","useUuid","useEffect","current","_checkboxBoxRef$curre","singleLineHeight","getHeightOfSingleTextLine","container","boxHeight","getBoundingClientRect","height","createElement","StyledCheckbox","ref","StyledCheckboxInput","disabled","id","type","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","style","top","transform","StyledCheckboxBox","htmlFor","$isChecked","$isDisabled","StyledCheckboxLabel","className","$shouldChangeOnLabelClick","displayName","_default","exports"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxBoxWrapper,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\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     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = true,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n    const [checkboxTop, setCheckboxTop] = useState<number | undefined>(undefined);\n\n    const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n    const checkboxRootRef = useRef<HTMLDivElement>(null);\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    useEffect(() => {\n        if (checkboxRootRef.current && !shouldShowCentered) {\n            const singleLineHeight = getHeightOfSingleTextLine({\n                container: checkboxRootRef.current,\n            });\n\n            const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n            setCheckboxTop((singleLineHeight - boxHeight) / 2);\n        }\n    }, [shouldShowCentered]);\n\n    return (\n        <StyledCheckbox ref={checkboxRootRef}>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n\n            <StyledCheckboxBoxWrapper\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                style={{\n                    top: shouldShowCentered ? '50%' : checkboxTop,\n                    transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n                }}\n            >\n                <StyledCheckboxBox\n                    htmlFor={uuid}\n                    ref={checkboxBoxRef}\n                    $isChecked={isChecked ?? isActive}\n                    $isDisabled={isDisabled}\n                    $shouldShowAsSwitch={shouldShowAsSwitch}\n                />\n            </StyledCheckboxBoxWrapper>\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_calculate","_Checkbox","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","borderRadius","colors","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","useState","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","useRef","checkboxRootRef","handleChange","useCallback","event","target","checked","uuid","useUuid","useEffect","current","_checkboxBoxRef$curre","singleLineHeight","getHeightOfSingleTextLine","container","boxHeight","getBoundingClientRect","height","createElement","StyledCheckbox","ref","StyledCheckboxInput","disabled","id","type","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","style","top","transform","StyledCheckboxBox","htmlFor","$isChecked","$isDisabled","$checkedBackgroundColor","checkedBackgroundColor","$uncheckedBackgroundColor","uncheckedBackgroundColor","$borderRadius","$borderColor","borderColor","StyledCheckboxLabel","className","$shouldChangeOnLabelClick","displayName","_default","exports"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxBoxWrapper,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\ntype CheckboxColors = {\n    /**\n     * Background color for the checked state.\n     */\n    checkedBackgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * Background color for the unchecked state.\n     */\n    uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n\n    /**\n     * Border color for the checkbox or switch indicator.\n     */\n    borderColor?: CSSProperties['borderColor'];\n};\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\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     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Border radius for the checkbox or switch indicator.\n     */\n    borderRadius?: CSSProperties['borderRadius'];\n    colors?: CheckboxColors;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    borderRadius,\n    colors,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = true,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n    const [checkboxTop, setCheckboxTop] = useState<number | undefined>(undefined);\n\n    const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n    const checkboxRootRef = useRef<HTMLDivElement>(null);\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    useEffect(() => {\n        if (checkboxRootRef.current && !shouldShowCentered) {\n            const singleLineHeight = getHeightOfSingleTextLine({\n                container: checkboxRootRef.current,\n            });\n\n            const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n            setCheckboxTop((singleLineHeight - boxHeight) / 2);\n        }\n    }, [shouldShowCentered]);\n\n    return (\n        <StyledCheckbox ref={checkboxRootRef}>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n\n            <StyledCheckboxBoxWrapper\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                style={{\n                    top: shouldShowCentered ? '50%' : checkboxTop,\n                    transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n                }}\n            >\n                <StyledCheckboxBox\n                    htmlFor={uuid}\n                    ref={checkboxBoxRef}\n                    $isChecked={isChecked ?? isActive}\n                    $isDisabled={isDisabled}\n                    $shouldShowAsSwitch={shouldShowAsSwitch}\n                    $checkedBackgroundColor={colors?.checkedBackgroundColor}\n                    $uncheckedBackgroundColor={colors?.uncheckedBackgroundColor}\n                    $borderRadius={borderRadius}\n                    $borderColor={colors?.borderColor}\n                />\n            </StyledCheckboxBoxWrapper>\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}

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

@@ -77,24 +77,33 @@ const StyledCheckboxBox = exports.StyledCheckboxBox = _styledComponents.default.
         background-color: ${({
   $isChecked,
   $shouldShowAsSwitch,
+  $checkedBackgroundColor,
+  $uncheckedBackgroundColor,
   theme
 }) => {
+  const activeBackgroundColor = $checkedBackgroundColor ?? ($shouldShowAsSwitch ? theme.green : theme['408']);
+  const inactiveBackgroundColor = $uncheckedBackgroundColor ?? ($shouldShowAsSwitch ? theme.red : theme['403']);
   if ($shouldShowAsSwitch) {
-    return $isChecked ? theme.green : theme.red;
+    return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;
   }
-  return $isChecked ? theme['408'] : theme['403'];
+  return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;
 }};
 
-        ${({
+        border: ${({
+  $borderColor,
   $shouldShowAsSwitch,
   theme
-}) => !$shouldShowAsSwitch && (0, _styledComponents.css)`
-                border: 1px solid rgba(${theme['409-rgb']}, 0.5);
-            `}
+}) => {
+  if ($shouldShowAsSwitch) {
+    return 'none';
+  }
+  return `1px solid ${$borderColor ?? `rgba(${theme['409-rgb']}, 0.5)`}`;
+}};
 
         border-radius: ${({
-  $shouldShowAsSwitch
-}) => $shouldShowAsSwitch ? '100px' : 0};
+  $shouldShowAsSwitch,
+  $borderRadius
+}) => $borderRadius ?? ($shouldShowAsSwitch ? '100px' : 0)};
         content: ' ';
         height: ${({
   $shouldShowAsSwitch

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","css","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","green","red","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"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    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n    display: flex;\n    flex-shrink: 0;\n    height: 16px;\n    position: absolute;\n\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch &&\n        css`\n            right: 42px;\n        `}\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.2s ease;\n    user-select: none;\n    height: 16px;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\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                      top: 50%;\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\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: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: calc(50% - 2px);\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? theme.green : theme.red;\n            }\n\n            return $isChecked ? theme['408'] : theme['403'];\n        }};\n\n        ${({ $shouldShowAsSwitch, theme }) =>\n            !$shouldShowAsSwitch &&\n            css`\n                border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n            `}\n\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`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch\n            ? css`\n                  padding-right: 48px;\n              `\n            : css`\n                  padding-left: 20px;\n              `}\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","css","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","$checkedBackgroundColor","$uncheckedBackgroundColor","activeBackgroundColor","green","inactiveBackgroundColor","red","$borderColor","$borderRadius","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\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    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n    display: flex;\n    flex-shrink: 0;\n    height: 16px;\n    position: absolute;\n\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch &&\n        css`\n            right: 42px;\n        `}\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $checkedBackgroundColor?: CSSProperties['backgroundColor'];\n    $uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n    $borderRadius?: CSSProperties['borderRadius'];\n    $borderColor?: CSSProperties['borderColor'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.2s ease;\n    user-select: none;\n    height: 16px;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\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                      top: 50%;\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\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: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: calc(50% - 2px);\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            $checkedBackgroundColor,\n            $uncheckedBackgroundColor,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            const activeBackgroundColor =\n                $checkedBackgroundColor ?? ($shouldShowAsSwitch ? theme.green : theme['408']);\n            const inactiveBackgroundColor =\n                $uncheckedBackgroundColor ?? ($shouldShowAsSwitch ? theme.red : theme['403']);\n\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n            }\n\n            return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n        }};\n\n        border: ${({ $borderColor, $shouldShowAsSwitch, theme }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return 'none';\n            }\n\n            return `1px solid ${$borderColor ?? `rgba(${theme['409-rgb']}, 0.5)`}`;\n        }};\n\n        border-radius: ${({ $shouldShowAsSwitch, $borderRadius }) =>\n            $borderRadius ?? ($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`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch\n            ? css`\n                  padding-right: 48px;\n              `\n            : css`\n                  padding-left: 20px;\n              `}\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/text-area/TextArea.js

@@ -79,7 +79,7 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
     t6 = $[6];
   }
   (0, _react.useEffect)(t5, t6);
-  const hasValue = value && value.length > 0;
+  const hasValue = value !== undefined && value.length > 0;
   let t7;
   if ($[7] !== hasValue) {
     t7 = hasValue ? {
@@ -128,7 +128,8 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
       layout: true,
       style: labelPosition,
       transition: {
-        type: "tween"
+        type: "tween",
+        duration: 0.1
       }
     }, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, {
       $isInvalid: isInvalid

package/lib/cjs/components/text-area/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":["_react","_interopRequireWildcard","require","_AreaContextProvider","_Input","_TextArea","_resize","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TextArea","forwardRef","t0","ref","_rightElement$props","$","_reactCompilerRuntime","c","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","t1","minHeight","t2","colors","undefined","isOverflowing","setIsOverflowing","useState","areaProvider","useContext","AreaContext","textareaRef","useRef","useCursorRepaint","shouldShowBorder","props","style","backgroundColor","shouldChangeColor","t3","current","height","scrollHeight","parseInt","toString","adjustTextareaHeight","t4","Symbol","for","useImperativeHandle","t5","t6","length","useEffect","hasValue","t7","bottom","right","top","left","labelPosition","t8","borderColor","createElement","StyledTextArea","StyledTextAreaContentWrapper","$backgroundColor","$borderColor","StyledTextAreaContent","StyledTextAreaInput","className","rows","StyledTextAreaLabelWrapper","animate","fontSize","initial","layout","transition","type","StyledTextAreaLabel","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEventHandler,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n    StyledTextArea,\n    StyledTextAreaContent,\n    StyledTextAreaContentWrapper,\n    StyledTextAreaInput,\n    StyledTextAreaLabel,\n    StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\nimport { useCursorRepaint } from '../../hooks/resize';\n\ntype TextAreaColors = {\n    backgroundColor: CSSProperties['backgroundColor'];\n    borderColor: CSSProperties['borderColor'];\n};\n\nexport type TextAreaProps = {\n    /**\n     * Disables the text area so that it cannot be changed.\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the text area is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n    /**\n     * Provide custom colors to the TextArea Component\n     */\n    colors?: TextAreaColors;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    (\n        {\n            isDisabled,\n            isInvalid,\n            placeholder,\n            value,\n            onChange,\n            onFocus,\n            onKeyDown,\n            rightElement,\n            onBlur,\n            maxHeight = '120px',\n            minHeight = '41px',\n            colors,\n        },\n        ref,\n    ) => {\n        'use memo';\n\n        const [isOverflowing, setIsOverflowing] = useState(false);\n\n        const areaProvider = useContext(AreaContext);\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        useCursorRepaint(textareaRef);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const adjustTextareaHeight = useCallback(() => {\n            if (textareaRef.current) {\n                textareaRef.current.style.height = 'auto';\n                textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n                setIsOverflowing(\n                    textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n                );\n            }\n        }, [maxHeight]);\n\n        useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n        /**\n         * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n         * To maintain the functionality while clearing the input, the length need to be greater than -1.\n         */\n        useEffect(() => {\n            if (typeof value === 'string' && value.length > -1) {\n                adjustTextareaHeight();\n            }\n        }, [adjustTextareaHeight, value]);\n\n        const hasValue = value && value.length > 0;\n\n        const labelPosition = useMemo(\n            () =>\n                hasValue\n                    ? {\n                          bottom: '2px',\n                          right: '2px',\n                      }\n                    : {\n                          top: '12px',\n                          left: '10px',\n                      },\n            [hasValue],\n        );\n\n        return useMemo(\n            () => (\n                <StyledTextArea $isDisabled={isDisabled}>\n                    <StyledTextAreaContentWrapper\n                        $isInvalid={isInvalid}\n                        $shouldChangeColor={shouldChangeColor}\n                        $backgroundColor={colors?.backgroundColor}\n                        $borderColor={colors?.borderColor}\n                    >\n                        <StyledTextAreaContent>\n                            <StyledTextAreaInput\n                                className=\"chayns-scrollbar\"\n                                disabled={isDisabled}\n                                $isInvalid={isInvalid}\n                                ref={textareaRef}\n                                value={value}\n                                onBlur={onBlur}\n                                onChange={onChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                $maxHeight={maxHeight}\n                                $minHeight={minHeight}\n                                $isOverflowing={isOverflowing}\n                                rows={1}\n                            />\n                            <StyledTextAreaLabelWrapper\n                                animate={{ fontSize: hasValue ? '9px' : undefined }}\n                                initial={false}\n                                layout\n                                style={labelPosition}\n                                transition={{ type: 'tween' }}\n                            >\n                                <StyledTextAreaLabel $isInvalid={isInvalid}>\n                                    {placeholder}\n                                </StyledTextAreaLabel>\n                            </StyledTextAreaLabelWrapper>\n                        </StyledTextAreaContent>\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledTextAreaContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledTextArea>\n            ),\n            [\n                isDisabled,\n                isInvalid,\n                shouldChangeColor,\n                colors?.backgroundColor,\n                colors?.borderColor,\n                value,\n                onBlur,\n                onChange,\n                onFocus,\n                onKeyDown,\n                maxHeight,\n                minHeight,\n                isOverflowing,\n                hasValue,\n                labelPosition,\n                placeholder,\n                rightElement,\n                shouldShowBorder,\n            ],\n        );\n    },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TextArea.js","names":["_react","_interopRequireWildcard","require","_AreaContextProvider","_Input","_TextArea","_resize","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TextArea","forwardRef","t0","ref","_rightElement$props","$","_reactCompilerRuntime","c","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","t1","minHeight","t2","colors","undefined","isOverflowing","setIsOverflowing","useState","areaProvider","useContext","AreaContext","textareaRef","useRef","useCursorRepaint","shouldShowBorder","props","style","backgroundColor","shouldChangeColor","t3","current","height","scrollHeight","parseInt","toString","adjustTextareaHeight","t4","Symbol","for","useImperativeHandle","t5","t6","length","useEffect","hasValue","t7","bottom","right","top","left","labelPosition","t8","borderColor","createElement","StyledTextArea","StyledTextAreaContentWrapper","$backgroundColor","$borderColor","StyledTextAreaContent","StyledTextAreaInput","className","rows","StyledTextAreaLabelWrapper","animate","fontSize","initial","layout","transition","type","duration","StyledTextAreaLabel","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEventHandler,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n    StyledTextArea,\n    StyledTextAreaContent,\n    StyledTextAreaContentWrapper,\n    StyledTextAreaInput,\n    StyledTextAreaLabel,\n    StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\nimport { useCursorRepaint } from '../../hooks/resize';\n\ntype TextAreaColors = {\n    backgroundColor: CSSProperties['backgroundColor'];\n    borderColor: CSSProperties['borderColor'];\n};\n\nexport type TextAreaProps = {\n    /**\n     * Disables the text area so that it cannot be changed.\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the text area is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n    /**\n     * Provide custom colors to the TextArea Component\n     */\n    colors?: TextAreaColors;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    (\n        {\n            isDisabled,\n            isInvalid,\n            placeholder,\n            value,\n            onChange,\n            onFocus,\n            onKeyDown,\n            rightElement,\n            onBlur,\n            maxHeight = '120px',\n            minHeight = '41px',\n            colors,\n        },\n        ref,\n    ) => {\n        'use memo';\n\n        const [isOverflowing, setIsOverflowing] = useState(false);\n\n        const areaProvider = useContext(AreaContext);\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        useCursorRepaint(textareaRef);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const adjustTextareaHeight = useCallback(() => {\n            if (textareaRef.current) {\n                textareaRef.current.style.height = 'auto';\n                textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n                setIsOverflowing(\n                    textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n                );\n            }\n        }, [maxHeight]);\n\n        useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n        /**\n         * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n         * To maintain the functionality while clearing the input, the length need to be greater than -1.\n         */\n        useEffect(() => {\n            if (typeof value === 'string' && value.length > -1) {\n                adjustTextareaHeight();\n            }\n        }, [adjustTextareaHeight, value]);\n\n        const hasValue = value !== undefined && value.length > 0;\n\n        const labelPosition = useMemo(\n            () =>\n                hasValue\n                    ? {\n                          bottom: '2px',\n                          right: '2px',\n                      }\n                    : {\n                          top: '12px',\n                          left: '10px',\n                      },\n            [hasValue],\n        );\n\n        return useMemo(\n            () => (\n                <StyledTextArea $isDisabled={isDisabled}>\n                    <StyledTextAreaContentWrapper\n                        $isInvalid={isInvalid}\n                        $shouldChangeColor={shouldChangeColor}\n                        $backgroundColor={colors?.backgroundColor}\n                        $borderColor={colors?.borderColor}\n                    >\n                        <StyledTextAreaContent>\n                            <StyledTextAreaInput\n                                className=\"chayns-scrollbar\"\n                                disabled={isDisabled}\n                                $isInvalid={isInvalid}\n                                ref={textareaRef}\n                                value={value}\n                                onBlur={onBlur}\n                                onChange={onChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                $maxHeight={maxHeight}\n                                $minHeight={minHeight}\n                                $isOverflowing={isOverflowing}\n                                rows={1}\n                            />\n                            <StyledTextAreaLabelWrapper\n                                animate={{ fontSize: hasValue ? '9px' : undefined }}\n                                initial={false}\n                                layout\n                                style={labelPosition}\n                                transition={{ type: 'tween', duration: 0.1 }}\n                            >\n                                <StyledTextAreaLabel $isInvalid={isInvalid}>\n                                    {placeholder}\n                                </StyledTextAreaLabel>\n                            </StyledTextAreaLabelWrapper>\n                        </StyledTextAreaContent>\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledTextAreaContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledTextArea>\n            ),\n            [\n                isDisabled,\n                isInvalid,\n                shouldChangeColor,\n                colors?.backgroundColor,\n                colors?.borderColor,\n                value,\n                onBlur,\n                onChange,\n                onFocus,\n                onKeyDown,\n                maxHeight,\n                minHeight,\n                isOverflowing,\n                hasValue,\n                labelPosition,\n                placeholder,\n                rightElement,\n                shouldShowBorder,\n            ],\n        );\n    },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}

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

@@ -9,6 +9,8 @@ const Checkbox = ({
   labelClassName,
   onChange,
   shouldShowAsSwitch,
+  borderRadius,
+  colors,
   shouldShowCentered = false,
   shouldChangeOnLabelClick = true
 }) => {
@@ -51,7 +53,11 @@ const Checkbox = ({
     ref: checkboxBoxRef,
     $isChecked: isChecked ?? isActive,
     $isDisabled: isDisabled,
-    $shouldShowAsSwitch: shouldShowAsSwitch
+    $shouldShowAsSwitch: shouldShowAsSwitch,
+    $checkedBackgroundColor: colors?.checkedBackgroundColor,
+    $uncheckedBackgroundColor: colors?.uncheckedBackgroundColor,
+    $borderRadius: borderRadius,
+    $borderColor: colors?.borderColor
   })), /*#__PURE__*/React.createElement(StyledCheckboxLabel, {
     className: labelClassName,
     $isDisabled: isDisabled,

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","useCallback","useEffect","useRef","useState","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxBox","StyledCheckboxBoxWrapper","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","checkboxRootRef","handleChange","event","target","checked","uuid","current","singleLineHeight","container","boxHeight","getBoundingClientRect","height","createElement","ref","disabled","id","type","$shouldShowAsSwitch","style","top","transform","htmlFor","$isChecked","$isDisabled","className","$shouldChangeOnLabelClick","displayName"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxBoxWrapper,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\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     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = true,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n    const [checkboxTop, setCheckboxTop] = useState<number | undefined>(undefined);\n\n    const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n    const checkboxRootRef = useRef<HTMLDivElement>(null);\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    useEffect(() => {\n        if (checkboxRootRef.current && !shouldShowCentered) {\n            const singleLineHeight = getHeightOfSingleTextLine({\n                container: checkboxRootRef.current,\n            });\n\n            const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n            setCheckboxTop((singleLineHeight - boxHeight) / 2);\n        }\n    }, [shouldShowCentered]);\n\n    return (\n        <StyledCheckbox ref={checkboxRootRef}>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n\n            <StyledCheckboxBoxWrapper\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                style={{\n                    top: shouldShowCentered ? '50%' : checkboxTop,\n                    transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n                }}\n            >\n                <StyledCheckboxBox\n                    htmlFor={uuid}\n                    ref={checkboxBoxRef}\n                    $isChecked={isChecked ?? isActive}\n                    $isDisabled={isDisabled}\n                    $shouldShowAsSwitch={shouldShowAsSwitch}\n                />\n            </StyledCheckboxBoxWrapper>\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["React","useCallback","useEffect","useRef","useState","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxBox","StyledCheckboxBoxWrapper","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","borderRadius","colors","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","checkboxRootRef","handleChange","event","target","checked","uuid","current","singleLineHeight","container","boxHeight","getBoundingClientRect","height","createElement","ref","disabled","id","type","$shouldShowAsSwitch","style","top","transform","htmlFor","$isChecked","$isDisabled","$checkedBackgroundColor","checkedBackgroundColor","$uncheckedBackgroundColor","uncheckedBackgroundColor","$borderRadius","$borderColor","borderColor","className","$shouldChangeOnLabelClick","displayName"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxBoxWrapper,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\ntype CheckboxColors = {\n    /**\n     * Background color for the checked state.\n     */\n    checkedBackgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * Background color for the unchecked state.\n     */\n    uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n\n    /**\n     * Border color for the checkbox or switch indicator.\n     */\n    borderColor?: CSSProperties['borderColor'];\n};\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\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     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Border radius for the checkbox or switch indicator.\n     */\n    borderRadius?: CSSProperties['borderRadius'];\n    colors?: CheckboxColors;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    borderRadius,\n    colors,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = true,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n    const [checkboxTop, setCheckboxTop] = useState<number | undefined>(undefined);\n\n    const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n    const checkboxRootRef = useRef<HTMLDivElement>(null);\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    useEffect(() => {\n        if (checkboxRootRef.current && !shouldShowCentered) {\n            const singleLineHeight = getHeightOfSingleTextLine({\n                container: checkboxRootRef.current,\n            });\n\n            const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n            setCheckboxTop((singleLineHeight - boxHeight) / 2);\n        }\n    }, [shouldShowCentered]);\n\n    return (\n        <StyledCheckbox ref={checkboxRootRef}>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n\n            <StyledCheckboxBoxWrapper\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                style={{\n                    top: shouldShowCentered ? '50%' : checkboxTop,\n                    transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n                }}\n            >\n                <StyledCheckboxBox\n                    htmlFor={uuid}\n                    ref={checkboxBoxRef}\n                    $isChecked={isChecked ?? isActive}\n                    $isDisabled={isDisabled}\n                    $shouldShowAsSwitch={shouldShowAsSwitch}\n                    $checkedBackgroundColor={colors?.checkedBackgroundColor}\n                    $uncheckedBackgroundColor={colors?.uncheckedBackgroundColor}\n                    $borderRadius={borderRadius}\n                    $borderColor={colors?.borderColor}\n                />\n            </StyledCheckboxBoxWrapper>\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}

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

@@ -70,24 +70,33 @@ export const StyledCheckboxBox = styled.label`
         background-color: ${({
   $isChecked,
   $shouldShowAsSwitch,
+  $checkedBackgroundColor,
+  $uncheckedBackgroundColor,
   theme
 }) => {
+  const activeBackgroundColor = $checkedBackgroundColor ?? ($shouldShowAsSwitch ? theme.green : theme['408']);
+  const inactiveBackgroundColor = $uncheckedBackgroundColor ?? ($shouldShowAsSwitch ? theme.red : theme['403']);
   if ($shouldShowAsSwitch) {
-    return $isChecked ? theme.green : theme.red;
+    return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;
   }
-  return $isChecked ? theme['408'] : theme['403'];
+  return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;
 }};
 
-        ${({
+        border: ${({
+  $borderColor,
   $shouldShowAsSwitch,
   theme
-}) => !$shouldShowAsSwitch && css`
-                border: 1px solid rgba(${theme['409-rgb']}, 0.5);
-            `}
+}) => {
+  if ($shouldShowAsSwitch) {
+    return 'none';
+  }
+  return `1px solid ${$borderColor ?? `rgba(${theme['409-rgb']}, 0.5)`}`;
+}};
 
         border-radius: ${({
-  $shouldShowAsSwitch
-}) => $shouldShowAsSwitch ? '100px' : 0};
+  $shouldShowAsSwitch,
+  $borderRadius
+}) => $borderRadius ?? ($shouldShowAsSwitch ? '100px' : 0)};
         content: ' ';
         height: ${({
   $shouldShowAsSwitch

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","names":["styled","css","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","green","red","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"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    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n    display: flex;\n    flex-shrink: 0;\n    height: 16px;\n    position: absolute;\n\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch &&\n        css`\n            right: 42px;\n        `}\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.2s ease;\n    user-select: none;\n    height: 16px;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\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                      top: 50%;\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\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: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: calc(50% - 2px);\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? theme.green : theme.red;\n            }\n\n            return $isChecked ? theme['408'] : theme['403'];\n        }};\n\n        ${({ $shouldShowAsSwitch, theme }) =>\n            !$shouldShowAsSwitch &&\n            css`\n                border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n            `}\n\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`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch\n            ? css`\n                  padding-right: 48px;\n              `\n            : css`\n                  padding-left: 20px;\n              `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAI/C,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAG;AACxC;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,mBAAmB,GAAGJ,MAAM,CAACK,KAAK;AAC/C;AACA,CAAC;AAMD,OAAO,MAAMC,wBAAwB,GAAGN,MAAM,CAACG,GAAkC;AACjF;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEI;AAAoB,CAAC,KACtBA,mBAAmB,IACnBN,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAQD,OAAO,MAAMO,iBAAiB,GAAGR,MAAM,CAACS,KAA6B;AACrE,aAAa,CAAC;EAAEC;AAA8B,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC9D,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,UAAU;EAAEN;AAA4C,CAAC,KAC1DA,mBAAmB,GACbN,GAAG;AACrB;AACA;AACA;AACA;AACA;AACA;AACA,8CAA8CY,UAAU,GAAG,MAAM,GAAG,CAAC;AACrE;AACA;AACA,mBAAmB,GACDZ,GAAG;AACrB;AACA;AACA;AACA;AACA,iCAAiCY,UAAU,GAAG,CAAC,GAAG,CAAC;AACnD;AACA;AACA;AACA;AACA,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,CAAC;EACjBA,UAAU;EACVN,mBAAmB;EACnBG;AACoB,CAAC,KAAK;EAC1B,IAAIH,mBAAmB,EAAE;IACrB,OAAOM,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAGJ,KAAK,CAACK,GAAG;EAC/C;EAEA,OAAOF,UAAU,GAAGH,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AACT;AACA,UAAU,CAAC;EAAEH,mBAAmB;EAAEG;AAAM,CAAC,KAC7B,CAACH,mBAAmB,IACpBN,GAAG;AACf,yCAAyCS,KAAK,CAAC,SAAS,CAAC;AACzD,aAAa;AACb;AACA,yBAAyB,CAAC;EAAEH;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,OAAO,GAAG,CAAE;AACzF;AACA,kBAAkB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACtF,gBAAgB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,CAAE;AAC/E;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACrF;AACA;AACA,CAAC;AAQD,OAAO,MAAMS,mBAAmB,GAAGhB,MAAM,CAACS,KAA+B;AACzE,aAAa,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAACC,IAAI;AAChE,cAAc,CAAC;EAAEM;AAA0B,CAAC,KACpC,CAACA,yBAAyB,GAAG,SAAS,GAAG,SAAS;AAC1D,eAAe,CAAC;EAAEL;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,MAAM,CAAC;EAAEL;AAAoB,CAAC,KACtBA,mBAAmB,GACbN,GAAG;AACjB;AACA,eAAe,GACDA,GAAG;AACjB;AACA,eAAe;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"Checkbox.styles.js","names":["styled","css","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","$checkedBackgroundColor","$uncheckedBackgroundColor","activeBackgroundColor","green","inactiveBackgroundColor","red","$borderColor","$borderRadius","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\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    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n    display: flex;\n    flex-shrink: 0;\n    height: 16px;\n    position: absolute;\n\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch &&\n        css`\n            right: 42px;\n        `}\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $checkedBackgroundColor?: CSSProperties['backgroundColor'];\n    $uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n    $borderRadius?: CSSProperties['borderRadius'];\n    $borderColor?: CSSProperties['borderColor'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.2s ease;\n    user-select: none;\n    height: 16px;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\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                      top: 50%;\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\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: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: calc(50% - 2px);\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            $checkedBackgroundColor,\n            $uncheckedBackgroundColor,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            const activeBackgroundColor =\n                $checkedBackgroundColor ?? ($shouldShowAsSwitch ? theme.green : theme['408']);\n            const inactiveBackgroundColor =\n                $uncheckedBackgroundColor ?? ($shouldShowAsSwitch ? theme.red : theme['403']);\n\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n            }\n\n            return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n        }};\n\n        border: ${({ $borderColor, $shouldShowAsSwitch, theme }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return 'none';\n            }\n\n            return `1px solid ${$borderColor ?? `rgba(${theme['409-rgb']}, 0.5)`}`;\n        }};\n\n        border-radius: ${({ $shouldShowAsSwitch, $borderRadius }) =>\n            $borderRadius ?? ($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`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch\n            ? css`\n                  padding-right: 48px;\n              `\n            : css`\n                  padding-left: 20px;\n              `}\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/text-area/TextArea.js

@@ -71,7 +71,7 @@ const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
     t6 = $[6];
   }
   useEffect(t5, t6);
-  const hasValue = value && value.length > 0;
+  const hasValue = value !== undefined && value.length > 0;
   let t7;
   if ($[7] !== hasValue) {
     t7 = hasValue ? {
@@ -120,7 +120,8 @@ const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
       layout: true,
       style: labelPosition,
       transition: {
-        type: "tween"
+        type: "tween",
+        duration: 0.1
       }
     }, /*#__PURE__*/React.createElement(StyledTextAreaLabel, {
       $isInvalid: isInvalid

package/lib/esm/components/text-area/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","AreaContext","StyledInputRightElement","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","useCursorRepaint","TextArea","t0","ref","$","_c","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","t1","minHeight","t2","colors","undefined","isOverflowing","setIsOverflowing","areaProvider","textareaRef","shouldShowBorder","props","style","backgroundColor","shouldChangeColor","t3","current","height","scrollHeight","parseInt","toString","adjustTextareaHeight","t4","Symbol","for","t5","t6","length","hasValue","t7","bottom","right","top","left","labelPosition","t8","borderColor","createElement","$backgroundColor","$borderColor","className","rows","animate","fontSize","initial","layout","transition","type","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEventHandler,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n    StyledTextArea,\n    StyledTextAreaContent,\n    StyledTextAreaContentWrapper,\n    StyledTextAreaInput,\n    StyledTextAreaLabel,\n    StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\nimport { useCursorRepaint } from '../../hooks/resize';\n\ntype TextAreaColors = {\n    backgroundColor: CSSProperties['backgroundColor'];\n    borderColor: CSSProperties['borderColor'];\n};\n\nexport type TextAreaProps = {\n    /**\n     * Disables the text area so that it cannot be changed.\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the text area is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n    /**\n     * Provide custom colors to the TextArea Component\n     */\n    colors?: TextAreaColors;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    (\n        {\n            isDisabled,\n            isInvalid,\n            placeholder,\n            value,\n            onChange,\n            onFocus,\n            onKeyDown,\n            rightElement,\n            onBlur,\n            maxHeight = '120px',\n            minHeight = '41px',\n            colors,\n        },\n        ref,\n    ) => {\n        'use memo';\n\n        const [isOverflowing, setIsOverflowing] = useState(false);\n\n        const areaProvider = useContext(AreaContext);\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        useCursorRepaint(textareaRef);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const adjustTextareaHeight = useCallback(() => {\n            if (textareaRef.current) {\n                textareaRef.current.style.height = 'auto';\n                textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n                setIsOverflowing(\n                    textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n                );\n            }\n        }, [maxHeight]);\n\n        useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n        /**\n         * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n         * To maintain the functionality while clearing the input, the length need to be greater than -1.\n         */\n        useEffect(() => {\n            if (typeof value === 'string' && value.length > -1) {\n                adjustTextareaHeight();\n            }\n        }, [adjustTextareaHeight, value]);\n\n        const hasValue = value && value.length > 0;\n\n        const labelPosition = useMemo(\n            () =>\n                hasValue\n                    ? {\n                          bottom: '2px',\n                          right: '2px',\n                      }\n                    : {\n                          top: '12px',\n                          left: '10px',\n                      },\n            [hasValue],\n        );\n\n        return useMemo(\n            () => (\n                <StyledTextArea $isDisabled={isDisabled}>\n                    <StyledTextAreaContentWrapper\n                        $isInvalid={isInvalid}\n                        $shouldChangeColor={shouldChangeColor}\n                        $backgroundColor={colors?.backgroundColor}\n                        $borderColor={colors?.borderColor}\n                    >\n                        <StyledTextAreaContent>\n                            <StyledTextAreaInput\n                                className=\"chayns-scrollbar\"\n                                disabled={isDisabled}\n                                $isInvalid={isInvalid}\n                                ref={textareaRef}\n                                value={value}\n                                onBlur={onBlur}\n                                onChange={onChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                $maxHeight={maxHeight}\n                                $minHeight={minHeight}\n                                $isOverflowing={isOverflowing}\n                                rows={1}\n                            />\n                            <StyledTextAreaLabelWrapper\n                                animate={{ fontSize: hasValue ? '9px' : undefined }}\n                                initial={false}\n                                layout\n                                style={labelPosition}\n                                transition={{ type: 'tween' }}\n                            >\n                                <StyledTextAreaLabel $isInvalid={isInvalid}>\n                                    {placeholder}\n                                </StyledTextAreaLabel>\n                            </StyledTextAreaLabelWrapper>\n                        </StyledTextAreaContent>\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledTextAreaContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledTextArea>\n            ),\n            [\n                isDisabled,\n                isInvalid,\n                shouldChangeColor,\n                colors?.backgroundColor,\n                colors?.borderColor,\n                value,\n                onBlur,\n                onChange,\n                onFocus,\n                onKeyDown,\n                maxHeight,\n                minHeight,\n                isOverflowing,\n                hasValue,\n                labelPosition,\n                placeholder,\n                rightElement,\n                shouldShowBorder,\n            ],\n        );\n    },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TextArea.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","AreaContext","StyledInputRightElement","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","useCursorRepaint","TextArea","t0","ref","$","_c","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","t1","minHeight","t2","colors","undefined","isOverflowing","setIsOverflowing","areaProvider","textareaRef","shouldShowBorder","props","style","backgroundColor","shouldChangeColor","t3","current","height","scrollHeight","parseInt","toString","adjustTextareaHeight","t4","Symbol","for","t5","t6","length","hasValue","t7","bottom","right","top","left","labelPosition","t8","borderColor","createElement","$backgroundColor","$borderColor","className","rows","animate","fontSize","initial","layout","transition","type","duration","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEventHandler,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n    StyledTextArea,\n    StyledTextAreaContent,\n    StyledTextAreaContentWrapper,\n    StyledTextAreaInput,\n    StyledTextAreaLabel,\n    StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\nimport { useCursorRepaint } from '../../hooks/resize';\n\ntype TextAreaColors = {\n    backgroundColor: CSSProperties['backgroundColor'];\n    borderColor: CSSProperties['borderColor'];\n};\n\nexport type TextAreaProps = {\n    /**\n     * Disables the text area so that it cannot be changed.\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the text area is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n    /**\n     * Provide custom colors to the TextArea Component\n     */\n    colors?: TextAreaColors;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    (\n        {\n            isDisabled,\n            isInvalid,\n            placeholder,\n            value,\n            onChange,\n            onFocus,\n            onKeyDown,\n            rightElement,\n            onBlur,\n            maxHeight = '120px',\n            minHeight = '41px',\n            colors,\n        },\n        ref,\n    ) => {\n        'use memo';\n\n        const [isOverflowing, setIsOverflowing] = useState(false);\n\n        const areaProvider = useContext(AreaContext);\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        useCursorRepaint(textareaRef);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const adjustTextareaHeight = useCallback(() => {\n            if (textareaRef.current) {\n                textareaRef.current.style.height = 'auto';\n                textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n                setIsOverflowing(\n                    textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n                );\n            }\n        }, [maxHeight]);\n\n        useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n        /**\n         * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n         * To maintain the functionality while clearing the input, the length need to be greater than -1.\n         */\n        useEffect(() => {\n            if (typeof value === 'string' && value.length > -1) {\n                adjustTextareaHeight();\n            }\n        }, [adjustTextareaHeight, value]);\n\n        const hasValue = value !== undefined && value.length > 0;\n\n        const labelPosition = useMemo(\n            () =>\n                hasValue\n                    ? {\n                          bottom: '2px',\n                          right: '2px',\n                      }\n                    : {\n                          top: '12px',\n                          left: '10px',\n                      },\n            [hasValue],\n        );\n\n        return useMemo(\n            () => (\n                <StyledTextArea $isDisabled={isDisabled}>\n                    <StyledTextAreaContentWrapper\n                        $isInvalid={isInvalid}\n                        $shouldChangeColor={shouldChangeColor}\n                        $backgroundColor={colors?.backgroundColor}\n                        $borderColor={colors?.borderColor}\n                    >\n                        <StyledTextAreaContent>\n                            <StyledTextAreaInput\n                                className=\"chayns-scrollbar\"\n                                disabled={isDisabled}\n                                $isInvalid={isInvalid}\n                                ref={textareaRef}\n                                value={value}\n                                onBlur={onBlur}\n                                onChange={onChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                $maxHeight={maxHeight}\n                                $minHeight={minHeight}\n                                $isOverflowing={isOverflowing}\n                                rows={1}\n                            />\n                            <StyledTextAreaLabelWrapper\n                                animate={{ fontSize: hasValue ? '9px' : undefined }}\n                                initial={false}\n                                layout\n                                style={labelPosition}\n                                transition={{ type: 'tween', duration: 0.1 }}\n                            >\n                                <StyledTextAreaLabel $isInvalid={isInvalid}>\n                                    {placeholder}\n                                </StyledTextAreaLabel>\n                            </StyledTextAreaLabelWrapper>\n                        </StyledTextAreaContent>\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledTextAreaContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledTextArea>\n            ),\n            [\n                isDisabled,\n                isInvalid,\n                shouldChangeColor,\n                colors?.backgroundColor,\n                colors?.borderColor,\n                value,\n                onBlur,\n                onChange,\n                onFocus,\n                onKeyDown,\n                maxHeight,\n                minHeight,\n                isOverflowing,\n                hasValue,\n                labelPosition,\n                placeholder,\n                rightElement,\n                shouldShowBorder,\n            ],\n        );\n    },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,18 @@
-import { ChangeEventHandler, FC, ReactElement } from 'react';
+import { ChangeEventHandler, CSSProperties, FC, ReactElement } from 'react';
+type CheckboxColors = {
+    /**
+     * Background color for the checked state.
+     */
+    checkedBackgroundColor?: CSSProperties['backgroundColor'];
+    /**
+     * Background color for the unchecked state.
+     */
+    uncheckedBackgroundColor?: CSSProperties['backgroundColor'];
+    /**
+     * Border color for the checkbox or switch indicator.
+     */
+    borderColor?: CSSProperties['borderColor'];
+};
 export type CheckboxProps = {
     /**
      * Text for checkbox or switch
@@ -28,6 +42,11 @@ export type CheckboxProps = {
      * Changes the design to use switch instead of checkbox
      */
     shouldShowAsSwitch?: boolean;
+    /**
+     * Border radius for the checkbox or switch indicator.
+     */
+    borderRadius?: CSSProperties['borderRadius'];
+    colors?: CheckboxColors;
     /**
      * Whether the Checkbox should be displayed centered to the label or at the top
      */

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

@@ -1,3 +1,4 @@
+import type { CSSProperties } from 'react';
 import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 import type { CheckboxProps } from './Checkbox';
 export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -10,6 +11,10 @@ type StyledCheckboxBoxProps = WithTheme<{
     $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];
     $isDisabled?: CheckboxProps['isDisabled'];
     $isChecked?: CheckboxProps['isChecked'];
+    $checkedBackgroundColor?: CSSProperties['backgroundColor'];
+    $uncheckedBackgroundColor?: CSSProperties['backgroundColor'];
+    $borderRadius?: CSSProperties['borderRadius'];
+    $borderColor?: CSSProperties['borderColor'];
 }>;
 export declare const StyledCheckboxBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, StyledCheckboxBoxProps>> & string;
 type StyledCheckboxLabelProps = WithTheme<{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.44",
+    "version": "5.0.45",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -88,5 +88,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "9355b0582ecc6200f82b4c52f9636d95609a40b0"
+    "gitHead": "e9f351199b26ce80ba123c66b9f3de760b9ab58c"
 }