@chayns-components/core 5.0.0-beta.13 → 5.0.0-beta.1301

package/lib/esm/components/amount-control/AmountControl.js

@@ -0,0 +1,234 @@
+import { AnimatePresence } from 'motion/react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { checkForValidAmount } from '../../utils/amountControl';
+import Icon from '../icon/Icon';
+import { StyledAmountControl, StyledAmountControlInput, StyledAmountControlPseudoInput, StyledInputWrapper, StyledMotionAmountControlButton } from './AmountControl.styles';
+const AmountControl = ({
+  amount,
+  icon,
+  iconColor,
+  isDisabled = false,
+  label,
+  maxAmount,
+  minAmount = 0,
+  onChange,
+  shouldForceLabel = false,
+  shouldShowAddIconOnMinAmount = false,
+  shouldShowIcon = true,
+  shouldShowWideInput = false,
+  step: stepProp = 1
+}) => {
+  const [amountValue, setAmountValue] = useState(minAmount);
+  const [inputValue, setInputValue] = useState(minAmount.toString());
+  const [displayState, setDisplayState] = useState('default');
+  const step = useMemo(() => Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1, [stepProp]);
+  const inputRef = useRef(null);
+
+  /**
+   * This function controls the displayState
+   */
+  useEffect(() => {
+    switch (true) {
+      case maxAmount && amountValue >= maxAmount:
+        setDisplayState('maxAmount');
+        return;
+      case amountValue > minAmount:
+        setDisplayState('normal');
+        return;
+      case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:
+        setDisplayState('minAmount');
+        return;
+      default:
+        setDisplayState('default');
+    }
+  }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);
+  const hasFocus = useMemo(() => displayState !== 'default', [displayState]);
+
+  /**
+   * Function that sets the amountValue to the amount
+   */
+  useEffect(() => {
+    if (typeof amount !== 'number') {
+      return;
+    }
+    setAmountValue(checkForValidAmount({
+      amount,
+      maxAmount,
+      minAmount
+    }));
+    setInputValue(checkForValidAmount({
+      amount,
+      maxAmount,
+      minAmount
+    }).toString());
+  }, [amount, maxAmount, minAmount]);
+  const handleAmountAdd = useCallback(() => {
+    setAmountValue(prevState => {
+      const newAmount = checkForValidAmount({
+        amount: prevState + step,
+        minAmount,
+        maxAmount
+      });
+      if (typeof onChange === 'function') {
+        onChange(newAmount);
+      }
+      return typeof amount === 'number' ? prevState : newAmount;
+    });
+    setInputValue(prevState => checkForValidAmount({
+      amount: Number(prevState) + step,
+      minAmount,
+      maxAmount
+    }).toString());
+  }, [amount, maxAmount, minAmount, onChange, step]);
+  const handleAmountRemove = useCallback(() => {
+    if (displayState === 'default') {
+      return;
+    }
+    setAmountValue(prevState => {
+      const newAmount = checkForValidAmount({
+        amount: prevState - step,
+        minAmount,
+        maxAmount
+      });
+      if (typeof onChange === 'function') {
+        onChange(newAmount);
+      }
+      return newAmount;
+    });
+    setInputValue(prevState => checkForValidAmount({
+      amount: Number(prevState) - step,
+      minAmount,
+      maxAmount
+    }).toString());
+  }, [displayState, maxAmount, minAmount, onChange, step]);
+  const handleFirstAmount = useCallback(() => {
+    if (amountValue !== minAmount) {
+      return;
+    }
+    if (typeof onChange === 'function') {
+      onChange(minAmount + step);
+    }
+    setAmountValue(minAmount + step);
+    setInputValue((minAmount + step).toString());
+  }, [amountValue, minAmount, onChange, step]);
+  const handleDeleteIconClick = useCallback(() => {
+    if (inputValue === '0') {
+      window.setTimeout(() => {
+        inputRef.current?.focus();
+      }, 500);
+    } else {
+      handleAmountRemove();
+    }
+  }, [handleAmountRemove, inputValue]);
+  const handleInputBlur = useCallback(() => {
+    const checkedValue = checkForValidAmount({
+      minAmount,
+      maxAmount,
+      amount: Math.round(Number(inputValue) / step) * step
+    });
+    setAmountValue(checkedValue);
+    setInputValue(checkedValue.toString());
+    if (typeof onChange === 'function') {
+      onChange(checkedValue);
+    }
+    if (inputValue === '') {
+      setInputValue(minAmount.toString());
+    }
+  }, [inputValue, maxAmount, minAmount, onChange, step]);
+  const handleInputChange = useCallback(event => {
+    const {
+      value
+    } = event.target;
+    const valueBefore = Number(value.replace(/\D/g, ''));
+    if (valueBefore < minAmount && minAmount === 0) {
+      setInputValue('0');
+      return;
+    }
+    setInputValue(valueBefore === 0 ? '' : valueBefore.toString());
+  }, [minAmount]);
+  let inputLabel = inputValue;
+  if (typeof label === 'string' && (displayState === 'default' || shouldForceLabel)) {
+    inputLabel = label;
+  }
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledAmountControl, {
+    onClick: handleFirstAmount,
+    $isDisabled: isDisabled
+  }, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, ['normal'].includes(displayState) && /*#__PURE__*/React.createElement(StyledMotionAmountControlButton, {
+    key: "left_button",
+    initial: {
+      width: 0,
+      opacity: 0,
+      padding: 0
+    },
+    animate: {
+      width: 40,
+      opacity: 1,
+      padding: 0
+    },
+    exit: {
+      width: 0,
+      opacity: 0,
+      padding: 0
+    },
+    transition: {
+      duration: 0.2,
+      type: 'tween'
+    },
+    onClick: handleAmountRemove,
+    disabled: amountValue !== 0 && amountValue <= minAmount,
+    $isDisabled: amountValue !== 0 && amountValue <= minAmount
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icons: ['fa fa-minus'],
+    size: 14,
+    color: "white"
+  }))), /*#__PURE__*/React.createElement(StyledInputWrapper, null, displayState === 'maxAmount' || inputValue === '0' || shouldForceLabel && typeof label === 'string' || inputLabel === label ? /*#__PURE__*/React.createElement(StyledAmountControlPseudoInput, {
+    onClick: handleDeleteIconClick,
+    $shouldShowWideInput: shouldShowWideInput,
+    $shouldShowRightIcon: !['maxAmount'].includes(displayState)
+  }, inputLabel) : /*#__PURE__*/React.createElement(StyledAmountControlInput, {
+    ref: inputRef,
+    $displayState: displayState,
+    $shouldShowIcon: shouldShowIcon,
+    $shouldShowWideInput: shouldShowWideInput,
+    $hasFocus: hasFocus,
+    onBlur: handleInputBlur,
+    onChange: handleInputChange,
+    value: inputLabel
+  })), /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, /*#__PURE__*/React.createElement(StyledMotionAmountControlButton, {
+    key: "right_button",
+    initial: {
+      width: 0,
+      opacity: 0,
+      padding: 0
+    },
+    animate: {
+      width: 40,
+      opacity: 1,
+      padding: 0
+    },
+    exit: {
+      width: 0,
+      opacity: 0,
+      padding: 0
+    },
+    transition: {
+      duration: 0.2,
+      type: 'tween'
+    },
+    $color: displayState === 'maxAmount' ? 'rgb(32, 198, 90)' : undefined,
+    onClick: displayState === 'maxAmount' ? handleAmountRemove : handleAmountAdd,
+    disabled: maxAmount ? amountValue >= maxAmount : false,
+    $isDisabled: maxAmount ? amountValue >= maxAmount : false
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icons: !['normal'].includes(displayState) && icon ? [displayState === 'maxAmount' ? 'fa fa-check' : icon] : [displayState === 'maxAmount' ? 'fa fa-check' : 'fa fa-plus'],
+    size: 14,
+    color: iconColor ?? 'white'
+  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, icon, iconColor, inputLabel, inputValue, isDisabled, label, maxAmount, minAmount, shouldForceLabel, shouldShowIcon, shouldShowWideInput]);
+};
+AmountControl.displayName = 'AmountControl';
+export default AmountControl;
+//# sourceMappingURL=AmountControl.js.map

package/lib/esm/components/amount-control/AmountControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledInputWrapper","StyledMotionAmountControlButton","AmountControl","amount","icon","iconColor","isDisabled","label","maxAmount","minAmount","onChange","shouldForceLabel","shouldShowAddIconOnMinAmount","shouldShowIcon","shouldShowWideInput","step","stepProp","amountValue","setAmountValue","inputValue","setInputValue","toString","displayState","setDisplayState","Number","isSafeInteger","inputRef","hasFocus","handleAmountAdd","prevState","newAmount","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","inputLabel","createElement","onClick","$isDisabled","initial","includes","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","icons","size","color","$shouldShowWideInput","$shouldShowRightIcon","ref","$displayState","$shouldShowIcon","$hasFocus","onBlur","$color","undefined","displayName"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEvent,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledAmountControlPseudoInput,\n    StyledInputWrapper,\n    StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'normal' | 'maxAmount' | 'minAmount';\n\nexport type AmountControlProps = {\n    /**\n     * The amount that should be displayed.\n     */\n    amount?: number;\n    /**\n     * The icon that should be displayed if no amount is selected.\n     */\n    icon?: string;\n    /**\n     * The color of the icon.\n     */\n    iconColor?: string;\n    /**\n     * Whether the control should be disabled\n     */\n    isDisabled?: boolean;\n    /**\n     * A Text that should be displayed if no amount is selected;\n     */\n    label?: string;\n    /**\n     * The maximum allowed amount. If the maxAmount is reached, a check icon is displayed on the left side.\n     */\n    maxAmount?: number;\n    /**\n     * The minimum allowed amount.\n     */\n    minAmount?: number;\n    /**\n     * A Function that is executed when the amount is changed\n     */\n    onChange?: (amount: number) => void;\n    /**\n     * Whether the label should be displayed even if an amount is selected.\n     */\n    shouldForceLabel?: boolean;\n    /**\n     * Whether the \"add\"-icon should be displayed if the minAmount is reached.\n     */\n    shouldShowAddIconOnMinAmount?: boolean;\n    /**\n     * Whether the icon should be displayed if no amount is selected\n     */\n    shouldShowIcon?: boolean;\n    /**\n     * Whether the input should be wider\n     */\n    shouldShowWideInput?: boolean;\n    /**\n     * Defines the amount that will change when adjusted\n     */\n    step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    iconColor,\n    isDisabled = false,\n    label,\n    maxAmount,\n    minAmount = 0,\n    onChange,\n    shouldForceLabel = false,\n    shouldShowAddIconOnMinAmount = false,\n    shouldShowIcon = true,\n    shouldShowWideInput = false,\n    step: stepProp = 1,\n}) => {\n    const [amountValue, setAmountValue] = useState(minAmount);\n    const [inputValue, setInputValue] = useState(minAmount.toString());\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n    const step = useMemo(\n        () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n        [stepProp],\n    );\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    /**\n     * This function controls the displayState\n     */\n    useEffect(() => {\n        switch (true) {\n            case maxAmount && amountValue >= maxAmount:\n                setDisplayState('maxAmount');\n                return;\n            case amountValue > minAmount:\n                setDisplayState('normal');\n                return;\n            case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:\n                setDisplayState('minAmount');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);\n\n    const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n    /**\n     * Function that sets the amountValue to the amount\n     */\n    useEffect(() => {\n        if (typeof amount !== 'number') {\n            return;\n        }\n\n        setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n        setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n    }, [amount, maxAmount, minAmount]);\n\n    const handleAmountAdd = useCallback(() => {\n        setAmountValue((prevState) => {\n            const newAmount = checkForValidAmount({\n                amount: prevState + step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return typeof amount === 'number' ? prevState : newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) + step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [amount, maxAmount, minAmount, onChange, step]);\n\n    const handleAmountRemove = useCallback(() => {\n        if (displayState === 'default') {\n            return;\n        }\n\n        setAmountValue((prevState) => {\n            const newAmount = checkForValidAmount({\n                amount: prevState - step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) - step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [displayState, maxAmount, minAmount, onChange, step]);\n\n    const handleFirstAmount = useCallback(() => {\n        if (amountValue !== minAmount) {\n            return;\n        }\n\n        if (typeof onChange === 'function') {\n            onChange(minAmount + step);\n        }\n\n        setAmountValue(minAmount + step);\n        setInputValue((minAmount + step).toString());\n    }, [amountValue, minAmount, onChange, step]);\n\n    const handleDeleteIconClick = useCallback(() => {\n        if (inputValue === '0') {\n            window.setTimeout(() => {\n                inputRef.current?.focus();\n            }, 500);\n        } else {\n            handleAmountRemove();\n        }\n    }, [handleAmountRemove, inputValue]);\n\n    const handleInputBlur = useCallback(() => {\n        const checkedValue = checkForValidAmount({\n            minAmount,\n            maxAmount,\n            amount: Math.round(Number(inputValue) / step) * step,\n        });\n\n        setAmountValue(checkedValue);\n        setInputValue(checkedValue.toString());\n\n        if (typeof onChange === 'function') {\n            onChange(checkedValue);\n        }\n\n        if (inputValue === '') {\n            setInputValue(minAmount.toString());\n        }\n    }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const { value } = event.target;\n\n            const valueBefore = Number(value.replace(/\\D/g, ''));\n\n            if (valueBefore < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n        },\n        [minAmount],\n    );\n\n    let inputLabel = inputValue;\n\n    if (typeof label === 'string' && (displayState === 'default' || shouldForceLabel)) {\n        inputLabel = label;\n    }\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount} $isDisabled={isDisabled}>\n                <AnimatePresence initial={false}>\n                    {['normal'].includes(displayState) && (\n                        <StyledMotionAmountControlButton\n                            key=\"left_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{\n                                width: 40,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountRemove}\n                            disabled={amountValue !== 0 && amountValue <= minAmount}\n                            $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n                        >\n                            <Icon icons={['fa fa-minus']} size={14} color=\"white\" />\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n                <StyledInputWrapper>\n                    {displayState === 'maxAmount' ||\n                    inputValue === '0' ||\n                    (shouldForceLabel && typeof label === 'string') ||\n                    inputLabel === label ? (\n                        <StyledAmountControlPseudoInput\n                            onClick={handleDeleteIconClick}\n                            $shouldShowWideInput={shouldShowWideInput}\n                            $shouldShowRightIcon={!['maxAmount'].includes(displayState)}\n                        >\n                            {inputLabel}\n                        </StyledAmountControlPseudoInput>\n                    ) : (\n                        <StyledAmountControlInput\n                            ref={inputRef}\n                            $displayState={displayState}\n                            $shouldShowIcon={shouldShowIcon}\n                            $shouldShowWideInput={shouldShowWideInput}\n                            $hasFocus={hasFocus}\n                            onBlur={handleInputBlur}\n                            onChange={handleInputChange}\n                            value={inputLabel}\n                        />\n                    )}\n                </StyledInputWrapper>\n                <AnimatePresence initial={false}>\n                    <StyledMotionAmountControlButton\n                        key=\"right_button\"\n                        initial={{ width: 0, opacity: 0, padding: 0 }}\n                        animate={{\n                            width: 40,\n                            opacity: 1,\n                            padding: 0,\n                        }}\n                        exit={{ width: 0, opacity: 0, padding: 0 }}\n                        transition={{ duration: 0.2, type: 'tween' }}\n                        $color={displayState === 'maxAmount' ? 'rgb(32, 198, 90)' : undefined}\n                        onClick={\n                            displayState === 'maxAmount' ? handleAmountRemove : handleAmountAdd\n                        }\n                        disabled={maxAmount ? amountValue >= maxAmount : false}\n                        $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n                    >\n                        <Icon\n                            icons={\n                                !['normal'].includes(displayState) && icon\n                                    ? [displayState === 'maxAmount' ? 'fa fa-check' : icon]\n                                    : [displayState === 'maxAmount' ? 'fa fa-check' : 'fa fa-plus']\n                            }\n                            size={14}\n                            color={iconColor ?? 'white'}\n                        />\n                    </StyledMotionAmountControlButton>\n                </AnimatePresence>\n            </StyledAmountControl>\n        ),\n        [\n            amountValue,\n            displayState,\n            handleAmountAdd,\n            handleAmountRemove,\n            handleDeleteIconClick,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            hasFocus,\n            icon,\n            iconColor,\n            inputLabel,\n            inputValue,\n            isDisabled,\n            label,\n            maxAmount,\n            minAmount,\n            shouldForceLabel,\n            shouldShowIcon,\n            shouldShowWideInput,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/amount-control/AmountControl.styles.js

@@ -0,0 +1,94 @@
+import { motion } from 'motion/react';
+import styled, { css } from 'styled-components';
+export const StyledAmountControl = styled.div`
+    background-color: ${({
+  theme
+}) => theme['202']};
+    display: flex;
+    width: fit-content;
+    border-radius: 3px;
+    overflow: hidden;
+    transition: opacity 0.2s ease;
+    height: 28px;
+
+    ${({
+  $isDisabled
+}) => $isDisabled && css`
+            opacity: 0.5;
+            pointer-events: none;
+        `}
+`;
+export const StyledInputWrapper = styled.div`
+    background-color: ${({
+  theme
+}) => theme['408']};
+`;
+export const StyledAmountControlInput = styled.input`
+    background-color: rgba(255, 255, 255, 0.2);
+    color: white;
+    border: none;
+    height: 28px;
+    width: ${({
+  $shouldShowWideInput
+}) => $shouldShowWideInput ? 90 : 55}px;
+    text-align: center;
+    cursor: ${({
+  $hasFocus
+}) => $hasFocus ? 'text' : 'pointer'};
+
+    ${({
+  $displayState
+}) => $displayState === 'maxAmount' && css`
+            border-bottom-right-radius: 3px;
+            border-top-right-radius: 3px;
+        `}
+    ${({
+  $displayState,
+  $shouldShowIcon
+}) => $displayState === 'default' && !$shouldShowIcon && css`
+            border-bottom-left-radius: 3px;
+            border-top-left-radius: 3px;
+        `};
+`;
+export const StyledAmountControlPseudoInput = styled.div`
+    background-color: rgba(255, 255, 255, 0.2);
+    color: white;
+    border: none;
+    height: 28px;
+    min-width: ${({
+  $shouldShowWideInput
+}) => $shouldShowWideInput ? 90 : 55}px;
+    padding: 1px 8px;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border-bottom-left-radius: ${({
+  $shouldShowRightIcon
+}) => $shouldShowRightIcon ? '3px' : 'unset'};
+    border-top-left-radius: ${({
+  $shouldShowRightIcon
+}) => $shouldShowRightIcon ? '3px' : 'unset'};
+`;
+export const StyledMotionAmountControlButton = styled(motion.button)`
+    align-items: center;
+    background-color: ${({
+  theme,
+  $color
+}) => $color ?? theme['408']};
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    transition: background-color 0.2s ease-in-out;
+
+    ${({
+  $isDisabled
+}) => $isDisabled && css`
+            opacity: 0.5;
+        `}
+`;
+//# sourceMappingURL=AmountControl.styles.js.map

package/lib/esm/components/amount-control/AmountControl.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","StyledAmountControl","div","theme","$isDisabled","StyledInputWrapper","StyledAmountControlInput","input","$shouldShowWideInput","$hasFocus","$displayState","$shouldShowIcon","StyledAmountControlPseudoInput","$shouldShowRightIcon","StyledMotionAmountControlButton","button","$color"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n    overflow: hidden;\n    transition: opacity 0.2s ease;\n    height: 28px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n            pointer-events: none;\n        `}\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n    $shouldShowIcon: boolean;\n    $hasFocus: boolean;\n    $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledInputWrapper = styled.div<WithTheme<unknown>>`\n    background-color: ${({ theme }) => theme['408']};\n`;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: rgba(255, 255, 255, 0.2);\n    color: white;\n    border: none;\n    height: 28px;\n    width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    text-align: center;\n    cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n    ${({ $displayState }) =>\n        $displayState === 'maxAmount' &&\n        css`\n            border-bottom-right-radius: 3px;\n            border-top-right-radius: 3px;\n        `}\n    ${({ $displayState, $shouldShowIcon }) =>\n        $displayState === 'default' &&\n        !$shouldShowIcon &&\n        css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n        `};\n`;\n\ntype StyledAmountControlPseudoInputProps = WithTheme<{\n    $shouldShowWideInput: boolean;\n    $shouldShowRightIcon: boolean;\n}>;\n\nexport const StyledAmountControlPseudoInput = styled.div<StyledAmountControlPseudoInputProps>`\n    background-color: rgba(255, 255, 255, 0.2);\n    color: white;\n    border: none;\n    height: 28px;\n    min-width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    padding: 1px 8px;\n    text-align: center;\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    border-bottom-left-radius: ${({ $shouldShowRightIcon }) =>\n        $shouldShowRightIcon ? '3px' : 'unset'};\n    border-top-left-radius: ${({ $shouldShowRightIcon }) =>\n        $shouldShowRightIcon ? '3px' : 'unset'};\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $color?: string;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    align-items: center;\n    background-color: ${({ theme, $color }: StyledAmountControlButtonProps) =>\n        $color ?? theme['408']};\n    display: flex;\n    justify-content: center;\n    overflow: hidden;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACXJ,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AASD,OAAO,MAAMK,kBAAkB,GAAGN,MAAM,CAACG,GAAuB;AAChE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AAED,OAAO,MAAMG,wBAAwB,GAAGP,MAAM,CAACQ,KAAoC;AACnF;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAG;AAC3E;AACA,cAAc,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,MAAM,GAAG,SAAU;AACjE;AACA,MAAM,CAAC;EAAEC;AAAc,CAAC,KAChBA,aAAa,KAAK,WAAW,IAC7BV,GAAG;AACX;AACA;AACA,SAAS;AACT,MAAM,CAAC;EAAEU,aAAa;EAAEC;AAAgB,CAAC,KACjCD,aAAa,KAAK,SAAS,IAC3B,CAACC,eAAe,IAChBX,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAOD,OAAO,MAAMY,8BAA8B,GAAGb,MAAM,CAACG,GAAwC;AAC7F;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEM;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAG;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;EAAEK;AAAqB,CAAC,KAClDA,oBAAoB,GAAG,KAAK,GAAG,OAAO;AAC9C,8BAA8B,CAAC;EAAEA;AAAqB,CAAC,KAC/CA,oBAAoB,GAAG,KAAK,GAAG,OAAO;AAC9C,CAAC;AAOD,OAAO,MAAMC,+BAA+B,GAAGf,MAAM,CACjDD,MAAM,CAACiB,MACX,CAAiC;AACjC;AACA,wBAAwB,CAAC;EAAEZ,KAAK;EAAEa;AAAuC,CAAC,KAClEA,MAAM,IAAIb,KAAK,CAAC,KAAK,CAAC;AAC9B;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACXJ,GAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/animated-number/AnimatedNumber.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { animate, useMotionValue } from 'motion/react';
+const DEFAULT_ROUND = Math.round;
+const DEFAULT_EASE = [0.16, 1, 0.3, 1];
+export const AnimatedNumber = ({
+  value,
+  duration = 2,
+  delay = 0,
+  locale = 'de',
+  format,
+  round = DEFAULT_ROUND,
+  startFrom = 0,
+  onComplete,
+  ease = DEFAULT_EASE
+}) => {
+  const motionValue = useMotionValue(startFrom);
+  const [display, setDisplay] = useState(startFrom);
+  const formatter = useMemo(() => {
+    if (format) return format;
+    return n => round(n).toLocaleString(locale);
+  }, [format, locale, round]);
+  useEffect(() => {
+    motionValue.set(startFrom);
+    const controls = animate(motionValue, value, {
+      duration,
+      delay,
+      ease: ease,
+      onComplete
+    });
+    return () => controls.stop();
+  }, [value, duration, delay, startFrom, onComplete, ease, motionValue]);
+  useEffect(() => {
+    const unsub = motionValue.on('change', v => setDisplay(v));
+    return () => unsub();
+  }, [motionValue]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, formatter(display));
+};
+AnimatedNumber.displayName = 'AnimatedNumber';
+export default AnimatedNumber;
+//# sourceMappingURL=AnimatedNumber.js.map

package/lib/esm/components/animated-number/AnimatedNumber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedNumber.js","names":["React","useEffect","useMemo","useState","animate","useMotionValue","DEFAULT_ROUND","Math","round","DEFAULT_EASE","AnimatedNumber","value","duration","delay","locale","format","startFrom","onComplete","ease","motionValue","display","setDisplay","formatter","n","toLocaleString","set","controls","stop","unsub","on","v","createElement","Fragment","displayName"],"sources":["../../../../src/components/animated-number/AnimatedNumber.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport { animate, useMotionValue } from 'motion/react';\nimport { Easing, MotionValue, ObjectTarget } from 'motion';\n\ntype Ease = [number, number, number, number] | ((t: number) => number) | string;\n\nexport interface AnimatedNumberProps {\n    /**\n     * Start delay of the animation in seconds.\n     */\n    delay?: number;\n    /**\n     * Total duration of the animation in seconds.\n     */\n    duration?: number;\n    /**\n     * Easing curve of the animation (e.g., cubic-bezier like [0.16, 1, 0.3, 1] or predefined easings).\n     * Controls how the animation accelerates/decelerates.\n     */\n    ease?: Ease;\n    /**\n     * Custom formatter for the displayed value.\n     * If provided, it overrides locale/toLocaleString and round.\n     * Example: (n) => `${Math.round(n)} points`\n     */\n    format?: (n: number) => string;\n    /**\n     * Locale used by toLocaleString when no custom formatter is provided.\n     */\n    locale?: string;\n    /**\n     * Callback invoked when the animation completes.\n     */\n    onComplete?: () => void;\n    /**\n     * Custom rounding function when no custom formatter is provided.\n     * Default: Math.round\n     */\n    round?: (n: number) => number;\n    /**\n     * Starting value for the animation.\n     * Default: 0\n     */\n    startFrom?: number;\n    /**\n     * Target value to animate to.\n     */\n    value: number;\n}\n\nconst DEFAULT_ROUND = Math.round;\nconst DEFAULT_EASE: Ease = [0.16, 1, 0.3, 1];\n\nexport const AnimatedNumber: FC<AnimatedNumberProps> = ({\n    value,\n    duration = 2,\n    delay = 0,\n    locale = 'de',\n    format,\n    round = DEFAULT_ROUND,\n    startFrom = 0,\n    onComplete,\n    ease = DEFAULT_EASE,\n}) => {\n    const motionValue = useMotionValue(startFrom);\n\n    const [display, setDisplay] = useState<number>(startFrom);\n\n    const formatter = useMemo(() => {\n        if (format) return format;\n\n        return (n: number) => round(n).toLocaleString(locale);\n    }, [format, locale, round]);\n\n    useEffect(() => {\n        motionValue.set(startFrom);\n\n        const controls = animate(motionValue, value as ObjectTarget<MotionValue<number>>, {\n            duration,\n            delay,\n            ease: ease as Easing,\n            onComplete,\n        });\n\n        return () => controls.stop();\n    }, [value, duration, delay, startFrom, onComplete, ease, motionValue]);\n\n    useEffect(() => {\n        const unsub = motionValue.on('change', (v) => setDisplay(v));\n\n        return () => unsub();\n    }, [motionValue]);\n\n    return <>{formatter(display)}</>;\n};\n\nAnimatedNumber.displayName = 'AnimatedNumber';\n\nexport default AnimatedNumber;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SAASC,OAAO,EAAEC,cAAc,QAAQ,cAAc;AAiDtD,MAAMC,aAAa,GAAGC,IAAI,CAACC,KAAK;AAChC,MAAMC,YAAkB,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;AAE5C,OAAO,MAAMC,cAAuC,GAAGA,CAAC;EACpDC,KAAK;EACLC,QAAQ,GAAG,CAAC;EACZC,KAAK,GAAG,CAAC;EACTC,MAAM,GAAG,IAAI;EACbC,MAAM;EACNP,KAAK,GAAGF,aAAa;EACrBU,SAAS,GAAG,CAAC;EACbC,UAAU;EACVC,IAAI,GAAGT;AACX,CAAC,KAAK;EACF,MAAMU,WAAW,GAAGd,cAAc,CAACW,SAAS,CAAC;EAE7C,MAAM,CAACI,OAAO,EAAEC,UAAU,CAAC,GAAGlB,QAAQ,CAASa,SAAS,CAAC;EAEzD,MAAMM,SAAS,GAAGpB,OAAO,CAAC,MAAM;IAC5B,IAAIa,MAAM,EAAE,OAAOA,MAAM;IAEzB,OAAQQ,CAAS,IAAKf,KAAK,CAACe,CAAC,CAAC,CAACC,cAAc,CAACV,MAAM,CAAC;EACzD,CAAC,EAAE,CAACC,MAAM,EAAED,MAAM,EAAEN,KAAK,CAAC,CAAC;EAE3BP,SAAS,CAAC,MAAM;IACZkB,WAAW,CAACM,GAAG,CAACT,SAAS,CAAC;IAE1B,MAAMU,QAAQ,GAAGtB,OAAO,CAACe,WAAW,EAAER,KAAK,EAAuC;MAC9EC,QAAQ;MACRC,KAAK;MACLK,IAAI,EAAEA,IAAc;MACpBD;IACJ,CAAC,CAAC;IAEF,OAAO,MAAMS,QAAQ,CAACC,IAAI,CAAC,CAAC;EAChC,CAAC,EAAE,CAAChB,KAAK,EAAEC,QAAQ,EAAEC,KAAK,EAAEG,SAAS,EAAEC,UAAU,EAAEC,IAAI,EAAEC,WAAW,CAAC,CAAC;EAEtElB,SAAS,CAAC,MAAM;IACZ,MAAM2B,KAAK,GAAGT,WAAW,CAACU,EAAE,CAAC,QAAQ,EAAGC,CAAC,IAAKT,UAAU,CAACS,CAAC,CAAC,CAAC;IAE5D,OAAO,MAAMF,KAAK,CAAC,CAAC;EACxB,CAAC,EAAE,CAACT,WAAW,CAAC,CAAC;EAEjB,oBAAOnB,KAAA,CAAA+B,aAAA,CAAA/B,KAAA,CAAAgC,QAAA,QAAGV,SAAS,CAACF,OAAO,CAAI,CAAC;AACpC,CAAC;AAEDV,cAAc,CAACuB,WAAW,GAAG,gBAAgB;AAE7C,eAAevB,cAAc","ignoreList":[]}

package/lib/esm/components/area-provider/AreaContextProvider.js

@@ -0,0 +1,25 @@
+import React, { useMemo } from 'react';
+export const AreaContext = /*#__PURE__*/React.createContext({
+  contentCardType: undefined,
+  shouldChangeColor: undefined,
+  shouldDisableListItemPadding: undefined
+});
+AreaContext.displayName = 'AreaContext';
+const AreaContextProvider = ({
+  children,
+  contentCardType,
+  shouldChangeColor = true,
+  shouldDisableListItemPadding = false
+}) => {
+  const providerValue = useMemo(() => ({
+    contentCardType,
+    shouldChangeColor,
+    shouldDisableListItemPadding
+  }), [contentCardType, shouldChangeColor, shouldDisableListItemPadding]);
+  return /*#__PURE__*/React.createElement(AreaContext.Provider, {
+    value: providerValue
+  }, children);
+};
+AreaContextProvider.displayName = 'AreaContextProvider';
+export default AreaContextProvider;
+//# sourceMappingURL=AreaContextProvider.js.map

package/lib/esm/components/area-provider/AreaContextProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaContextProvider.js","names":["React","useMemo","AreaContext","createContext","contentCardType","undefined","shouldChangeColor","shouldDisableListItemPadding","displayName","AreaContextProvider","children","providerValue","createElement","Provider","value"],"sources":["../../../../src/components/area-provider/AreaContextProvider.tsx"],"sourcesContent":["import React, { useMemo, type ReactNode } from 'react';\nimport type { ContentCardType } from '../../types/contentCard';\n\ninterface IAreaProviderContext {\n    contentCardType?: ContentCardType;\n    shouldChangeColor?: boolean;\n    shouldDisableListItemPadding?: boolean;\n}\n\nexport const AreaContext = React.createContext<IAreaProviderContext>({\n    contentCardType: undefined,\n    shouldChangeColor: undefined,\n    shouldDisableListItemPadding: undefined,\n});\n\nAreaContext.displayName = 'AreaContext';\n\ninterface AreaContextProviderProps {\n    children: ReactNode;\n    contentCardType?: ContentCardType;\n    shouldChangeColor?: boolean;\n    shouldDisableListItemPadding?: boolean;\n}\n\nconst AreaContextProvider = ({\n    children,\n    contentCardType,\n    shouldChangeColor = true,\n    shouldDisableListItemPadding = false,\n}: AreaContextProviderProps) => {\n    const providerValue = useMemo<IAreaProviderContext>(\n        () => ({\n            contentCardType,\n            shouldChangeColor,\n            shouldDisableListItemPadding,\n        }),\n        [contentCardType, shouldChangeColor, shouldDisableListItemPadding],\n    );\n\n    return <AreaContext.Provider value={providerValue}>{children}</AreaContext.Provider>;\n};\n\nAreaContextProvider.displayName = 'AreaContextProvider';\n\nexport default AreaContextProvider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAwB,OAAO;AAStD,OAAO,MAAMC,WAAW,gBAAGF,KAAK,CAACG,aAAa,CAAuB;EACjEC,eAAe,EAAEC,SAAS;EAC1BC,iBAAiB,EAAED,SAAS;EAC5BE,4BAA4B,EAAEF;AAClC,CAAC,CAAC;AAEFH,WAAW,CAACM,WAAW,GAAG,aAAa;AASvC,MAAMC,mBAAmB,GAAGA,CAAC;EACzBC,QAAQ;EACRN,eAAe;EACfE,iBAAiB,GAAG,IAAI;EACxBC,4BAA4B,GAAG;AACT,CAAC,KAAK;EAC5B,MAAMI,aAAa,GAAGV,OAAO,CACzB,OAAO;IACHG,eAAe;IACfE,iBAAiB;IACjBC;EACJ,CAAC,CAAC,EACF,CAACH,eAAe,EAAEE,iBAAiB,EAAEC,4BAA4B,CACrE,CAAC;EAED,oBAAOP,KAAA,CAAAY,aAAA,CAACV,WAAW,CAACW,QAAQ;IAACC,KAAK,EAAEH;EAAc,GAAED,QAA+B,CAAC;AACxF,CAAC;AAEDD,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEvD,eAAeC,mBAAmB","ignoreList":[]}

package/lib/esm/components/badge/Badge.js

@@ -0,0 +1,47 @@
+import clsx from 'clsx';
+import React, { useRef } from 'react';
+import { useElementSize } from '../../hooks/element';
+import { StyledBadge } from './Badge.styles';
+import { BadgeDesign, BadgeSize } from '../../types/badge';
+const BADGE_SIZES = {
+  0: {
+    font: '70%',
+    padding: '0 6px'
+  },
+  1: {
+    font: '80%',
+    padding: '2px 8px 0 8px'
+  }
+};
+const Badge = ({
+  backgroundColor,
+  children,
+  className,
+  fontColor,
+  onClick,
+  design = BadgeDesign.DEFAULT,
+  size: badgeSize = BadgeSize.DEFAULT
+}) => {
+  const badgeClasses = clsx('beta-chayns-badge ellipsis', className);
+  const badgeRef = useRef(null);
+  const size = useElementSize(badgeRef);
+
+  // Add 4px to the height to account for the padding
+  const borderRadius = size ? `${(size.height + 4) / 2}px` : '15px';
+  const minWidth = size ? `${size.height + 4}px` : '1.65rem';
+  return /*#__PURE__*/React.createElement(StyledBadge, {
+    className: badgeClasses,
+    onClick: onClick,
+    ref: badgeRef,
+    $backgroundColor: backgroundColor,
+    $borderRadius: borderRadius,
+    $cursor: typeof onClick === 'function' ? 'pointer' : 'default',
+    $fontColor: fontColor,
+    $design: design,
+    $size: BADGE_SIZES[badgeSize],
+    $minWidth: minWidth
+  }, children || '​');
+};
+Badge.displayName = 'Badge';
+export default Badge;
+//# sourceMappingURL=Badge.js.map

package/lib/esm/components/badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":["clsx","React","useRef","useElementSize","StyledBadge","BadgeDesign","BadgeSize","BADGE_SIZES","font","padding","Badge","backgroundColor","children","className","fontColor","onClick","design","DEFAULT","size","badgeSize","badgeClasses","badgeRef","borderRadius","height","minWidth","createElement","ref","$backgroundColor","$borderRadius","$cursor","$fontColor","$design","$size","$minWidth","displayName"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, ReactNode, useRef, type CSSProperties, type MouseEventHandler } from 'react';\nimport { useElementSize } from '../../hooks/element';\nimport { StyledBadge } from './Badge.styles';\nimport { BadgeDesign, BadgeSize } from '../../types/badge';\n\nconst BADGE_SIZES = {\n    0: { font: '70%', padding: '0 6px' },\n    1: { font: '80%', padding: '2px 8px 0 8px' },\n};\n\nexport type BadgeProps = {\n    /**\n     * The background color of the badge\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * The content of the badge\n     */\n    children?: ReactNode;\n    /**\n     * Additional class names for the badge element\n     */\n    className?: string;\n    /**\n     * The design of the Badge\n     */\n    design?: BadgeDesign;\n    /**\n     * The font color of the badge\n     */\n    fontColor?: CSSProperties['color'];\n    /**\n     * Function to be executed when the badge is clicked\n     */\n    onClick?: MouseEventHandler;\n    /**\n     * The size of the badge\n     */\n    size?: BadgeSize;\n};\n\nconst Badge: FC<BadgeProps> = ({\n    backgroundColor,\n    children,\n    className,\n    fontColor,\n    onClick,\n    design = BadgeDesign.DEFAULT,\n    size: badgeSize = BadgeSize.DEFAULT,\n}) => {\n    const badgeClasses = clsx('beta-chayns-badge ellipsis', className);\n\n    const badgeRef = useRef<HTMLDivElement>(null);\n\n    const size = useElementSize(badgeRef);\n\n    // Add 4px to the height to account for the padding\n    const borderRadius = size ? `${(size.height + 4) / 2}px` : '15px';\n    const minWidth = size ? `${size.height + 4}px` : '1.65rem';\n\n    return (\n        <StyledBadge\n            className={badgeClasses}\n            onClick={onClick}\n            ref={badgeRef}\n            $backgroundColor={backgroundColor}\n            $borderRadius={borderRadius}\n            $cursor={typeof onClick === 'function' ? 'pointer' : 'default'}\n            $fontColor={fontColor}\n            $design={design}\n            $size={BADGE_SIZES[badgeSize]}\n            $minWidth={minWidth}\n        >\n            {children || '​'}\n        </StyledBadge>\n    );\n};\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,OAAOC,KAAK,IAAmBC,MAAM,QAAoD,OAAO;AAChG,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,WAAW,EAAEC,SAAS,QAAQ,mBAAmB;AAE1D,MAAMC,WAAW,GAAG;EAChB,CAAC,EAAE;IAAEC,IAAI,EAAE,KAAK;IAAEC,OAAO,EAAE;EAAQ,CAAC;EACpC,CAAC,EAAE;IAAED,IAAI,EAAE,KAAK;IAAEC,OAAO,EAAE;EAAgB;AAC/C,CAAC;AAiCD,MAAMC,KAAqB,GAAGA,CAAC;EAC3BC,eAAe;EACfC,QAAQ;EACRC,SAAS;EACTC,SAAS;EACTC,OAAO;EACPC,MAAM,GAAGX,WAAW,CAACY,OAAO;EAC5BC,IAAI,EAAEC,SAAS,GAAGb,SAAS,CAACW;AAChC,CAAC,KAAK;EACF,MAAMG,YAAY,GAAGpB,IAAI,CAAC,4BAA4B,EAAEa,SAAS,CAAC;EAElE,MAAMQ,QAAQ,GAAGnB,MAAM,CAAiB,IAAI,CAAC;EAE7C,MAAMgB,IAAI,GAAGf,cAAc,CAACkB,QAAQ,CAAC;;EAErC;EACA,MAAMC,YAAY,GAAGJ,IAAI,GAAG,GAAG,CAACA,IAAI,CAACK,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM;EACjE,MAAMC,QAAQ,GAAGN,IAAI,GAAG,GAAGA,IAAI,CAACK,MAAM,GAAG,CAAC,IAAI,GAAG,SAAS;EAE1D,oBACItB,KAAA,CAAAwB,aAAA,CAACrB,WAAW;IACRS,SAAS,EAAEO,YAAa;IACxBL,OAAO,EAAEA,OAAQ;IACjBW,GAAG,EAAEL,QAAS;IACdM,gBAAgB,EAAEhB,eAAgB;IAClCiB,aAAa,EAAEN,YAAa;IAC5BO,OAAO,EAAE,OAAOd,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;IAC/De,UAAU,EAAEhB,SAAU;IACtBiB,OAAO,EAAEf,MAAO;IAChBgB,KAAK,EAAEzB,WAAW,CAACY,SAAS,CAAE;IAC9Bc,SAAS,EAAET;EAAS,GAEnBZ,QAAQ,IAAI,GACJ,CAAC;AAEtB,CAAC;AAEDF,KAAK,CAACwB,WAAW,GAAG,OAAO;AAE3B,eAAexB,KAAK","ignoreList":[]}

package/lib/esm/components/badge/Badge.styles.js

@@ -0,0 +1,42 @@
+import styled, { css } from 'styled-components';
+import { BadgeDesign } from '../../types/badge';
+export const StyledBadge = styled.div`
+    ${({
+  $backgroundColor,
+  theme,
+  $fontColor,
+  $design,
+  $cursor,
+  $borderRadius,
+  $size,
+  $minWidth
+}) => {
+  switch ($design) {
+    case BadgeDesign.BORDER:
+      return css`
+                    border-radius: 50px;
+                    border: 1px solid ${theme.primary};
+                    color: ${theme.primary};
+                    font-size: ${$size?.font};
+                    padding: ${$size?.padding};
+                    user-select: none;
+                    width: fit-content;
+                `;
+    case BadgeDesign.DEFAULT:
+    default:
+      return css`
+                    background-color: ${$backgroundColor ?? theme['secondary-202']};
+                    border-radius: ${$borderRadius};
+                    color: ${$fontColor ?? theme.text};
+                    display: inline-block;
+                    font-size: 0.8rem;
+                    min-width: ${$minWidth};
+                    padding: 2px 6px;
+                    line-height: 20px;
+                    text-align: center;
+                    cursor: ${$cursor};
+                `;
+  }
+}}
+`;
+//# sourceMappingURL=Badge.styles.js.map

package/lib/esm/components/badge/Badge.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.styles.js","names":["styled","css","BadgeDesign","StyledBadge","div","$backgroundColor","theme","$fontColor","$design","$cursor","$borderRadius","$size","$minWidth","BORDER","primary","font","padding","DEFAULT","text"],"sources":["../../../../src/components/badge/Badge.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { BadgeDesign } from '../../types/badge';\n\ntype StyledBadgeProps = WithTheme<{\n    $cursor: CSSProperties['cursor'];\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $borderRadius: CSSProperties['borderRadius'];\n    $fontColor?: CSSProperties['color'];\n    $minWidth: CSSProperties['minWidth'];\n    $size?: { font: CSSProperties['fontSize']; padding: CSSProperties['padding'] };\n    $design: BadgeDesign;\n}>;\n\nexport const StyledBadge = styled.div<StyledBadgeProps>`\n    ${({\n        $backgroundColor,\n        theme,\n        $fontColor,\n        $design,\n        $cursor,\n        $borderRadius,\n        $size,\n        $minWidth,\n    }: StyledBadgeProps) => {\n        switch ($design) {\n            case BadgeDesign.BORDER:\n                return css`\n                    border-radius: 50px;\n                    border: 1px solid ${theme.primary};\n                    color: ${theme.primary};\n                    font-size: ${$size?.font};\n                    padding: ${$size?.padding};\n                    user-select: none;\n                    width: fit-content;\n                `;\n            case BadgeDesign.DEFAULT:\n            default:\n                return css`\n                    background-color: ${$backgroundColor ?? theme['secondary-202']};\n                    border-radius: ${$borderRadius};\n                    color: ${$fontColor ?? theme.text};\n                    display: inline-block;\n                    font-size: 0.8rem;\n                    min-width: ${$minWidth};\n                    padding: 2px 6px;\n                    line-height: 20px;\n                    text-align: center;\n                    cursor: ${$cursor};\n                `;\n        }\n    }}\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,WAAW,QAAQ,mBAAmB;AAY/C,OAAO,MAAMC,WAAW,GAAGH,MAAM,CAACI,GAAqB;AACvD,MAAM,CAAC;EACCC,gBAAgB;EAChBC,KAAK;EACLC,UAAU;EACVC,OAAO;EACPC,OAAO;EACPC,aAAa;EACbC,KAAK;EACLC;AACc,CAAC,KAAK;EACpB,QAAQJ,OAAO;IACX,KAAKN,WAAW,CAACW,MAAM;MACnB,OAAOZ,GAAG;AAC1B;AACA,wCAAwCK,KAAK,CAACQ,OAAO;AACrD,6BAA6BR,KAAK,CAACQ,OAAO;AAC1C,iCAAiCH,KAAK,EAAEI,IAAI;AAC5C,+BAA+BJ,KAAK,EAAEK,OAAO;AAC7C;AACA;AACA,iBAAiB;IACL,KAAKd,WAAW,CAACe,OAAO;IACxB;MACI,OAAOhB,GAAG;AAC1B,wCAAwCI,gBAAgB,IAAIC,KAAK,CAAC,eAAe,CAAC;AAClF,qCAAqCI,aAAa;AAClD,6BAA6BH,UAAU,IAAID,KAAK,CAACY,IAAI;AACrD;AACA;AACA,iCAAiCN,SAAS;AAC1C;AACA;AACA;AACA,8BAA8BH,OAAO;AACrC,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC","ignoreList":[]}