@chayns-components/core 5.0.0-beta.49 → 5.0.0-beta.492

package/lib/components/signature/Signature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Signature.js","names":["createDialog","DialogType","React","forwardRef","useCallback","useEffect","useImperativeHandle","useState","deleteUserSignature","getUserSignature","putUserSignature","Button","Icon","StyledSignature","StyledSignatureDeleteIconWrapper","StyledSignatureImage","StyledSignatureImageWrapper","Signature","_ref","ref","onEdit","onRemove","onUnsubscribe","onSubscribe","buttonText","isDisabled","signatureUrl","setSignatureUrl","undefined","hasSubscribed","setHasSubscribed","loadUserSignature","then","signature","handleCallDialog","shouldSubscribe","dialog","type","SIGNATURE","open","buttonType","result","success","handleEdit","handleDelete","handleClick","handleUnSubscribe","edit","delete","createElement","onClick","src","icons","size","displayName"],"sources":["../../../src/components/signature/Signature.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';\nimport { deleteUserSignature } from '../../api/signature/delete';\nimport { getUserSignature } from '../../api/signature/get';\nimport { putUserSignature } from '../../api/signature/put';\nimport type { SignatureDialogResult } from '../../types/signature';\nimport Button from '../button/Button';\nimport Icon from '../icon/Icon';\nimport {\n    StyledSignature,\n    StyledSignatureDeleteIconWrapper,\n    StyledSignatureImage,\n    StyledSignatureImageWrapper,\n} from './Signature.styles';\n\nexport interface SignatureRef {\n    edit: VoidFunction;\n    delete: VoidFunction;\n}\n\nexport type SignatureProps = {\n    /**\n     * The text that should be displayed inside the button.\n     */\n    buttonText: string;\n    /**\n     * Whether the button is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the signature is edited.\n     */\n    onEdit?: (signature: string) => void;\n    /**\n     * Function to be executed when the user deletes the signature.\n     */\n    onRemove?: () => void;\n    /**\n     * Function to be executed when the user subscribes.\n     */\n    onSubscribe?: () => void;\n    /**\n     * Function to be executed when the user unsubscribes.\n     */\n    onUnsubscribe?: () => void;\n};\n\nconst Signature = forwardRef<SignatureRef, SignatureProps>(\n    ({ onEdit, onRemove, onUnsubscribe, onSubscribe, buttonText, isDisabled }, ref) => {\n        const [signatureUrl, setSignatureUrl] = useState<string | undefined>(undefined);\n        const [hasSubscribed, setHasSubscribed] = useState(false);\n\n        useEffect(() => {\n            const loadUserSignature = async () => {\n                await getUserSignature().then((signature) => {\n                    setSignatureUrl(signature);\n                });\n            };\n\n            void loadUserSignature();\n        }, []);\n\n        const handleCallDialog = useCallback(\n            async (shouldSubscribe: boolean) => {\n                const dialog = (await createDialog({\n                    type: DialogType.SIGNATURE,\n                }).open()) as SignatureDialogResult;\n\n                if (dialog.buttonType === 1 && dialog.result) {\n                    await putUserSignature(dialog.result).then((success) => {\n                        if (success) {\n                            setSignatureUrl(dialog.result);\n\n                            if (shouldSubscribe) {\n                                setHasSubscribed(true);\n\n                                if (typeof onSubscribe === 'function') {\n                                    onSubscribe();\n                                }\n                            } else if (typeof onEdit === 'function') {\n                                onEdit(dialog.result);\n                            }\n                        }\n                    });\n                }\n            },\n            [onEdit, onSubscribe],\n        );\n\n        const handleEdit = useCallback(() => {\n            void handleCallDialog(false);\n        }, [handleCallDialog]);\n\n        const handleDelete = useCallback(async () => {\n            await deleteUserSignature().then((success) => {\n                if (success) {\n                    setSignatureUrl(undefined);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove();\n                    }\n                }\n            });\n        }, [onRemove]);\n\n        const handleClick = useCallback(() => {\n            if (signatureUrl) {\n                setHasSubscribed(true);\n\n                if (typeof onSubscribe === 'function') {\n                    onSubscribe();\n                }\n            } else {\n                void handleCallDialog(true);\n            }\n        }, [handleCallDialog, onSubscribe, signatureUrl]);\n\n        const handleUnSubscribe = () => {\n            setHasSubscribed(false);\n            setSignatureUrl(undefined);\n\n            if (typeof onUnsubscribe === 'function') {\n                onUnsubscribe();\n            }\n        };\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                edit: handleEdit,\n                delete: handleDelete,\n            }),\n            [handleDelete, handleEdit],\n        );\n\n        return (\n            <StyledSignature>\n                {!hasSubscribed ? (\n                    <Button isDisabled={isDisabled} onClick={handleClick}>\n                        {buttonText}\n                    </Button>\n                ) : (\n                    <StyledSignatureImageWrapper>\n                        <StyledSignatureImage src={signatureUrl} />\n                        <StyledSignatureDeleteIconWrapper>\n                            <Icon icons={['ts-wrong']} size={20} onClick={handleUnSubscribe} />\n                        </StyledSignatureDeleteIconWrapper>\n                    </StyledSignatureImageWrapper>\n                )}\n            </StyledSignature>\n        );\n    },\n);\n\nSignature.displayName = 'Signature';\n\nexport default Signature;\n"],"mappings":"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"}

package/lib/components/signature/Signature.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const StyledSignature: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledSignatureImageWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledSignatureImage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>>;
+export declare const StyledSignatureDeleteIconWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/lib/components/signature/Signature.styles.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+export const StyledSignature = styled.div``;
+export const StyledSignatureImageWrapper = styled.div`
+    position: relative;
+    aspect-ratio: 3.8;
+    width: 100%;
+`;
+export const StyledSignatureImage = styled.img``;
+export const StyledSignatureDeleteIconWrapper = styled.div`
+    position: absolute;
+    top: 0;
+    right: 0;
+`;
+//# sourceMappingURL=Signature.styles.js.map

package/lib/components/signature/Signature.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Signature.styles.js","names":["styled","StyledSignature","div","StyledSignatureImageWrapper","StyledSignatureImage","img","StyledSignatureDeleteIconWrapper"],"sources":["../../../src/components/signature/Signature.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledSignature = styled.div``;\nexport const StyledSignatureImageWrapper = styled.div`\n    position: relative;\n    aspect-ratio: 3.8;\n    width: 100%;\n`;\nexport const StyledSignatureImage = styled.img``;\nexport const StyledSignatureDeleteIconWrapper = styled.div`\n    position: absolute;\n    top: 0;\n    right: 0;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAI,EAAC;AAC3C,OAAO,MAAMC,2BAA2B,GAAGH,MAAM,CAACE,GAAI;AACtD;AACA;AACA;AACA,CAAC;AACD,OAAO,MAAME,oBAAoB,GAAGJ,MAAM,CAACK,GAAI,EAAC;AAChD,OAAO,MAAMC,gCAAgC,GAAGN,MAAM,CAACE,GAAI;AAC3D;AACA;AACA;AACA,CAAC"}

package/lib/components/slider/Slider.d.ts

@@ -0,0 +1,45 @@
+import { FC } from 'react';
+export interface SliderInterval {
+    maxValue: number;
+    minValue: number;
+}
+export type SliderProps = {
+    /**
+     * The range that can be selected with two thumbs..
+     */
+    interval?: SliderInterval;
+    /**
+     * The maximum value of the slider.
+     */
+    maxValue: number;
+    /**
+     * The minimum value of the slider.
+     */
+    minValue: number;
+    /**
+     *
+     */
+    onSelect?: (value?: number, interval?: SliderInterval) => void;
+    /**
+     * Function that will be executed when the value is changed.
+     */
+    onChange?: (value?: number, interval?: SliderInterval) => void;
+    /**
+     * Whether the current value should be displayed inside the slider thumb.
+     */
+    shouldShowThumbLable?: boolean;
+    /**
+     * The steps of the slider.
+     */
+    steps?: number;
+    /**
+     * A function to format the thumb label.
+     */
+    thumbLabelFormatter?: (value: number) => string;
+    /**
+     * the Value that the slider should have.
+     */
+    value?: number;
+};
+declare const Slider: FC<SliderProps>;
+export default Slider;

package/lib/components/slider/Slider.js

@@ -0,0 +1,181 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTheme } from 'styled-components';
+import { fillSlider } from '../../utils/slider';
+import { StyledSlider, StyledSliderInput, StyledSliderThumb, StyledSliderThumbLable } from './Slider.styles';
+const Slider = _ref => {
+  let {
+    maxValue,
+    minValue,
+    value,
+    onSelect,
+    onChange,
+    interval,
+    thumbLabelFormatter,
+    shouldShowThumbLable = false,
+    steps = 1
+  } = _ref;
+  const [fromValue, setFromValue] = useState(0);
+  const [toValue, setToValue] = useState(maxValue);
+  const fromSliderRef = useRef(null);
+  const toSliderRef = useRef(null);
+  const fromSliderThumbRef = useRef(null);
+  const toSliderThumbRef = useRef(null);
+  const theme = useTheme();
+
+  /**
+   * This function sets the value
+   */
+  useEffect(() => {
+    if (typeof value !== 'number') {
+      return;
+    }
+    if (value >= minValue && value <= maxValue) {
+      setFromValue(value);
+    }
+  }, [maxValue, minValue, value]);
+  useEffect(() => {
+    if (fromValue > toValue) {
+      setFromValue(toValue);
+    }
+    if (toValue < fromValue) {
+      setToValue(fromValue);
+    }
+  }, [fromValue, toValue]);
+  const handleMouseUp = useCallback(() => {
+    const from = Number(fromSliderRef.current?.value);
+    const to = Number(toSliderRef.current?.value);
+    if (typeof onSelect === 'function') {
+      onSelect(interval ? undefined : from, interval ? {
+        maxValue: to,
+        minValue: from
+      } : undefined);
+    }
+  }, [interval, onSelect]);
+  const handleControlFromSlider = useCallback(event => {
+    if (!fromSliderRef.current || !toSliderRef.current) {
+      return;
+    }
+    setFromValue(Number(event.target.value));
+    const from = Number(fromSliderRef.current.value);
+    const to = Number(toSliderRef.current.value);
+    if (typeof onChange === 'function') {
+      onChange(undefined, {
+        maxValue: to,
+        minValue: from
+      });
+    }
+    fillSlider({
+      toSlider: toSliderRef.current,
+      fromSlider: fromSliderRef.current,
+      theme
+    });
+    if (from > to) {
+      fromSliderRef.current.value = String(to);
+    } else {
+      fromSliderRef.current.value = String(from);
+    }
+  }, [onChange, theme]);
+  const handleControlToSlider = useCallback(event => {
+    if (!fromSliderRef.current || !toSliderRef.current) {
+      return;
+    }
+    setToValue(Number(event.target.value));
+    const from = Number(fromSliderRef.current.value);
+    const to = Number(toSliderRef.current.value);
+    if (typeof onChange === 'function') {
+      onChange(undefined, {
+        maxValue: to,
+        minValue: from
+      });
+    }
+    fillSlider({
+      toSlider: toSliderRef.current,
+      fromSlider: fromSliderRef.current,
+      theme
+    });
+    if (from <= to) {
+      toSliderRef.current.value = String(to);
+    } else {
+      toSliderRef.current.value = String(from);
+    }
+  }, [onChange, theme]);
+  useEffect(() => {
+    if (!fromSliderRef.current || !toSliderRef.current || !interval) {
+      return;
+    }
+    setFromValue(interval.minValue);
+    setToValue(interval.maxValue);
+    fromSliderRef.current.value = String(interval.minValue);
+    toSliderRef.current.value = String(interval.maxValue);
+    fillSlider({
+      fromSlider: fromSliderRef.current,
+      toSlider: toSliderRef.current,
+      theme
+    });
+    // Note: interval can´t be in the deps because of rerender
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [theme]);
+
+  /**
+   * This function updates the value
+   */
+  const handleInputChange = useCallback(event => {
+    const newValue = Number(event.target.value);
+    if (interval) {
+      handleControlFromSlider(event);
+      return;
+    }
+    setFromValue(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  }, [handleControlFromSlider, interval, onChange]);
+  const fromSliderThumbPosition = useMemo(() => {
+    if (fromSliderRef.current && fromSliderThumbRef.current) {
+      return (fromValue - minValue) / (maxValue - minValue) * (fromSliderRef.current.offsetWidth - fromSliderThumbRef.current.offsetWidth / 2);
+    }
+    return 0;
+  }, [fromValue, maxValue, minValue]);
+  const toSliderThumbPosition = useMemo(() => {
+    if (toSliderRef.current && toSliderThumbRef.current) {
+      return (toValue - minValue) / (maxValue - minValue) * (toSliderRef.current.offsetWidth - toSliderThumbRef.current.offsetWidth / 2);
+    }
+    return 0;
+  }, [toValue, maxValue, minValue]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledSlider, null, /*#__PURE__*/React.createElement(StyledSliderInput, {
+    ref: fromSliderRef,
+    $isInterval: !!interval,
+    type: "range",
+    value: fromValue,
+    step: steps,
+    max: maxValue,
+    min: minValue,
+    onChange: handleInputChange,
+    onMouseUp: handleMouseUp,
+    $max: maxValue,
+    $min: minValue,
+    $value: fromValue
+  }), /*#__PURE__*/React.createElement(StyledSliderThumb, {
+    ref: fromSliderThumbRef,
+    $position: fromSliderThumbPosition
+  }, shouldShowThumbLable && /*#__PURE__*/React.createElement(StyledSliderThumbLable, null, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(fromValue) : fromValue)), interval && /*#__PURE__*/React.createElement(StyledSliderThumb, {
+    ref: toSliderThumbRef,
+    $position: toSliderThumbPosition
+  }, shouldShowThumbLable && /*#__PURE__*/React.createElement(StyledSliderThumbLable, null, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(toValue) : toValue)), interval && /*#__PURE__*/React.createElement(StyledSliderInput, {
+    $max: maxValue,
+    $min: minValue,
+    $value: toValue,
+    ref: toSliderRef,
+    $isInterval: !!interval,
+    type: "range",
+    value: toValue,
+    step: steps,
+    max: maxValue,
+    min: minValue,
+    onChange: handleControlToSlider,
+    onMouseUp: handleMouseUp
+  })), [interval, fromValue, steps, maxValue, minValue, handleInputChange, handleMouseUp, fromSliderThumbPosition, shouldShowThumbLable, thumbLabelFormatter, toSliderThumbPosition, toValue, handleControlToSlider]);
+};
+Slider.displayName = 'Slider';
+export default Slider;
+//# sourceMappingURL=Slider.js.map

package/lib/components/slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useTheme","fillSlider","StyledSlider","StyledSliderInput","StyledSliderThumb","StyledSliderThumbLable","Slider","_ref","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLable","steps","fromValue","setFromValue","toValue","setToValue","fromSliderRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","theme","handleMouseUp","from","Number","current","to","undefined","handleControlFromSlider","event","target","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","offsetWidth","toSliderThumbPosition","createElement","ref","$isInterval","type","step","max","min","onMouseUp","$max","$min","$value","$position","displayName"],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { fillSlider } from '../../utils/slider';\nimport {\n    StyledSlider,\n    StyledSliderInput,\n    StyledSliderThumb,\n    StyledSliderThumbLable,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n    maxValue: number;\n    minValue: number;\n}\n\nexport type SliderProps = {\n    /**\n     * The range that can be selected with two thumbs..\n     */\n    interval?: SliderInterval;\n    /**\n     * The maximum value of the slider.\n     */\n    maxValue: number;\n    /**\n     * The minimum value of the slider.\n     */\n    minValue: number;\n    /**\n     *\n     */\n    onSelect?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Function that will be executed when the value is changed.\n     */\n    onChange?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Whether the current value should be displayed inside the slider thumb.\n     */\n    shouldShowThumbLable?: boolean;\n    /**\n     * The steps of the slider.\n     */\n    steps?: number;\n    /**\n     * A function to format the thumb label.\n     */\n    thumbLabelFormatter?: (value: number) => string;\n    /**\n     * the Value that the slider should have.\n     */\n    value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n    maxValue,\n    minValue,\n    value,\n    onSelect,\n    onChange,\n    interval,\n    thumbLabelFormatter,\n    shouldShowThumbLable = false,\n    steps = 1,\n}) => {\n    const [fromValue, setFromValue] = useState(0);\n    const [toValue, setToValue] = useState(maxValue);\n\n    const fromSliderRef = useRef<HTMLInputElement>(null);\n    const toSliderRef = useRef<HTMLInputElement>(null);\n    const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbRef = useRef<HTMLDivElement>(null);\n\n    const theme = useTheme();\n\n    /**\n     * This function sets the value\n     */\n    useEffect(() => {\n        if (typeof value !== 'number') {\n            return;\n        }\n\n        if (value >= minValue && value <= maxValue) {\n            setFromValue(value);\n        }\n    }, [maxValue, minValue, value]);\n\n    useEffect(() => {\n        if (fromValue > toValue) {\n            setFromValue(toValue);\n        }\n\n        if (toValue < fromValue) {\n            setToValue(fromValue);\n        }\n    }, [fromValue, toValue]);\n\n    const handleMouseUp = useCallback(() => {\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n    }, [interval, onSelect]);\n\n    const handleControlFromSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setFromValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from > to) {\n                fromSliderRef.current.value = String(to);\n            } else {\n                fromSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    const handleControlToSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setToValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from <= to) {\n                toSliderRef.current.value = String(to);\n            } else {\n                toSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    useEffect(() => {\n        if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n            return;\n        }\n\n        setFromValue(interval.minValue);\n        setToValue(interval.maxValue);\n\n        fromSliderRef.current.value = String(interval.minValue);\n        toSliderRef.current.value = String(interval.maxValue);\n\n        fillSlider({\n            fromSlider: fromSliderRef.current,\n            toSlider: toSliderRef.current,\n            theme,\n        });\n        // Note: interval can´t be in the deps because of rerender\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [theme]);\n\n    /**\n     * This function updates the value\n     */\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const newValue = Number(event.target.value);\n\n            if (interval) {\n                handleControlFromSlider(event);\n\n                return;\n            }\n\n            setFromValue(newValue);\n\n            if (onChange) {\n                onChange(newValue);\n            }\n        },\n        [handleControlFromSlider, interval, onChange],\n    );\n\n    const fromSliderThumbPosition = useMemo(() => {\n        if (fromSliderRef.current && fromSliderThumbRef.current) {\n            return (\n                ((fromValue - minValue) / (maxValue - minValue)) *\n                (fromSliderRef.current.offsetWidth - fromSliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [fromValue, maxValue, minValue]);\n\n    const toSliderThumbPosition = useMemo(() => {\n        if (toSliderRef.current && toSliderThumbRef.current) {\n            return (\n                ((toValue - minValue) / (maxValue - minValue)) *\n                (toSliderRef.current.offsetWidth - toSliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [toValue, maxValue, minValue]);\n\n    return useMemo(\n        () => (\n            <StyledSlider>\n                <StyledSliderInput\n                    ref={fromSliderRef}\n                    $isInterval={!!interval}\n                    type=\"range\"\n                    value={fromValue}\n                    step={steps}\n                    max={maxValue}\n                    min={minValue}\n                    onChange={handleInputChange}\n                    onMouseUp={handleMouseUp}\n                    $max={maxValue}\n                    $min={minValue}\n                    $value={fromValue}\n                />\n                <StyledSliderThumb ref={fromSliderThumbRef} $position={fromSliderThumbPosition}>\n                    {shouldShowThumbLable && (\n                        <StyledSliderThumbLable>\n                            {typeof thumbLabelFormatter === 'function'\n                                ? thumbLabelFormatter(fromValue)\n                                : fromValue}\n                        </StyledSliderThumbLable>\n                    )}\n                </StyledSliderThumb>\n                {interval && (\n                    <StyledSliderThumb ref={toSliderThumbRef} $position={toSliderThumbPosition}>\n                        {shouldShowThumbLable && (\n                            <StyledSliderThumbLable>\n                                {typeof thumbLabelFormatter === 'function'\n                                    ? thumbLabelFormatter(toValue)\n                                    : toValue}\n                            </StyledSliderThumbLable>\n                        )}\n                    </StyledSliderThumb>\n                )}\n                {interval && (\n                    <StyledSliderInput\n                        $max={maxValue}\n                        $min={minValue}\n                        $value={toValue}\n                        ref={toSliderRef}\n                        $isInterval={!!interval}\n                        type=\"range\"\n                        value={toValue}\n                        step={steps}\n                        max={maxValue}\n                        min={minValue}\n                        onChange={handleControlToSlider}\n                        onMouseUp={handleMouseUp}\n                    />\n                )}\n            </StyledSlider>\n        ),\n        [\n            interval,\n            fromValue,\n            steps,\n            maxValue,\n            minValue,\n            handleInputChange,\n            handleMouseUp,\n            fromSliderThumbPosition,\n            shouldShowThumbLable,\n            thumbLabelFormatter,\n            toSliderThumbPosition,\n            toValue,\n            handleControlToSlider,\n        ],\n    );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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"}

package/lib/components/slider/Slider.styles.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+export declare const StyledSlider: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+type StyledSliderInputProps = WithTheme<{
+    $min: number;
+    $max: number;
+    $value: number;
+    $isInterval: boolean;
+}>;
+export declare const StyledSliderInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledSliderInputProps>>;
+type StyledSliderThumbProps = WithTheme<{
+    $position: number;
+}>;
+export declare const StyledSliderThumb: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSliderThumbProps>>;
+export declare const StyledSliderThumbLable: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
+export {};

package/lib/components/slider/Slider.styles.js

@@ -0,0 +1,98 @@
+import styled, { css } from 'styled-components';
+export const StyledSlider = styled.div`
+    width: 100%;
+    height: 30px;
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    align-items: center;
+`;
+export const StyledSliderInput = styled.input`
+    position: absolute;
+    width: 100%;
+    border-radius: 100px;
+    -webkit-appearance: none;
+    height: 10px;
+    outline: none;
+    cursor: pointer !important;
+    z-index: 2;
+    appearance: none;
+    pointer-events: ${_ref => {
+  let {
+    $isInterval
+  } = _ref;
+  return $isInterval ? 'none' : 'all';
+}};
+
+    ${_ref2 => {
+  let {
+    $isInterval,
+    theme,
+    $min,
+    $max,
+    $value
+  } = _ref2;
+  return !$isInterval && css`
+            background: ${`linear-gradient(
+            to right,
+            ${theme['409'] ?? ''} 0%,
+            ${theme['409'] ?? ''}
+            ${($value - $min) / ($max - $min) * 100}%,
+            ${theme['403'] ?? ''}
+            ${($value - $min) / ($max - $min) * 100}%,
+            ${theme['403'] ?? ''}
+        )`};
+        `;
+}}
+
+    // Slider thumb for chrome
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 20px;
+        height: 20px;
+        cursor: pointer;
+        pointer-events: all;
+        position: relative;
+    }
+
+    // slider thumb for firefox
+    &::-moz-range-thumb {
+        width: 20px;
+        height: 20px;
+        cursor: pointer;
+        pointer-events: all;
+        position: relative;
+    }
+`;
+export const StyledSliderThumb = styled.div`
+    min-width: 20px;
+    height: 20px;
+    background-color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme['100'];
+}};
+    cursor: pointer;
+    border-radius: 100px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    pointer-events: none;
+    z-index: 3;
+    left: ${_ref4 => {
+  let {
+    $position
+  } = _ref4;
+  return $position;
+}}px;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    white-space: nowrap;
+`;
+export const StyledSliderThumbLable = styled.span`
+    pointer-events: none;
+`;
+//# sourceMappingURL=Slider.styles.js.map

package/lib/components/slider/Slider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.styles.js","names":["styled","css","StyledSlider","div","StyledSliderInput","input","_ref","$isInterval","_ref2","theme","$min","$max","$value","StyledSliderThumb","_ref3","_ref4","$position","StyledSliderThumbLable","span"],"sources":["../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $min: number;\n    $max: number;\n    $value: number;\n    $isInterval: boolean;\n}>;\n\nexport const StyledSliderInput = styled.input<StyledSliderInputProps>`\n    position: absolute;\n    width: 100%;\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n    pointer-events: ${({ $isInterval }) => ($isInterval ? 'none' : 'all')};\n\n    ${({ $isInterval, theme, $min, $max, $value }: StyledSliderInputProps) =>\n        !$isInterval &&\n        css`\n            background: ${`linear-gradient(\n            to right,\n            ${theme['409'] ?? ''} 0%,\n            ${theme['409'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${theme['403'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${theme['403'] ?? ''}\n        )`};\n        `}\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{ $position: number }>;\n\nexport const StyledSliderThumb = styled.div<StyledSliderThumbProps>`\n    min-width: 20px;\n    height: 20px;\n    background-color: ${({ theme }: StyledSliderThumbProps) => theme['100']};\n    cursor: pointer;\n    border-radius: 100px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    left: ${({ $position }) => $position}px;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n\nexport const StyledSliderThumbLable = styled.span`\n    pointer-events: none;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,YAAY,GAAGF,MAAM,CAACG,GAAI;AACvC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AASD,OAAO,MAAMC,iBAAiB,GAAGJ,MAAM,CAACK,KAA8B;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,MAAM,GAAG,KAAK;AAAA,CAAE;AAC1E;AACA,MAAMC,KAAA;EAAA,IAAC;IAAED,WAAW;IAAEE,KAAK;IAAEC,IAAI;IAAEC,IAAI;IAAEC;EAA+B,CAAC,GAAAJ,KAAA;EAAA,OACjE,CAACD,WAAW,IACZN,GAAI;AACZ,0BAA2B;AAC3B;AACA,cAAcQ,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,cAAcA,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,cAAe,CAACG,MAAM,GAAGF,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAI;AACtD,cAAcD,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,cAAe,CAACG,MAAM,GAAGF,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAI;AACtD,cAAcD,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,UAAW;AACX,SAAS;AAAA,CAAC;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMI,iBAAiB,GAAGb,MAAM,CAACG,GAA4B;AACpE;AACA;AACA,wBAAwBW,KAAA;EAAA,IAAC;IAAEL;EAA8B,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA,YAAYM,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAKC,SAAS;AAAA,CAAC;AACzC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,sBAAsB,GAAGjB,MAAM,CAACkB,IAAK;AAClD;AACA,CAAC"}

package/lib/components/slider-button/SliderButton.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import type { SliderButtonItem } from '../../types/slider-button';
+export type SliderButtonProps = {
+    /**
+     * Whether the button is disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Function to be executed when a button is selected.
+     * @param id
+     */
+    onChange?: (id: string) => void;
+    /**
+     * The buttons that are slidable.
+     */
+    items: SliderButtonItem[];
+    /**
+     * The id of a button that should be selected.
+     */
+    selectedButtonId?: string;
+};
+declare const SliderButton: FC<SliderButtonProps>;
+export default SliderButton;

package/lib/components/slider-button/SliderButton.js

@@ -0,0 +1,148 @@
+import { AnimatePresence, useAnimate } from 'framer-motion';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { calculateBiggestWidth } from '../../utils/calculate';
+import { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';
+import { StyledMotionSliderButtonThumb, StyledSliderButton, StyledSliderButtonItem } from './SliderButton.styles';
+const SliderButton = _ref => {
+  let {
+    selectedButtonId,
+    isDisabled,
+    items,
+    onChange
+  } = _ref;
+  const [selectedButton, setSelectedButton] = useState(undefined);
+  const [dragRange, setDragRange] = useState({
+    left: 0,
+    right: 0
+  });
+  const sliderButtonRef = useRef(null);
+  const [scope, animate] = useAnimate();
+  useEffect(() => {
+    if (selectedButtonId) {
+      setSelectedButton(selectedButtonId);
+    } else {
+      setSelectedButton(items[0]?.id);
+    }
+  }, [items, selectedButtonId]);
+  const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);
+  useEffect(() => {
+    if (sliderButtonRef.current) {
+      setDragRange({
+        left: 0,
+        right: sliderButtonRef.current.offsetWidth - itemWidth
+      });
+    }
+  }, [itemWidth]);
+  const animation = useCallback(async x => {
+    await animate(scope.current, {
+      x
+    }, {
+      type: 'tween',
+      duration: 0.2
+    });
+  }, [animate, scope]);
+  const handleClick = useCallback((id, index) => {
+    if (isDisabled) {
+      return;
+    }
+    setSelectedButton(id);
+    if (typeof onChange === 'function') {
+      onChange(id);
+    }
+    void animation(itemWidth * index);
+  }, [animation, isDisabled, itemWidth, onChange]);
+  const buttons = useMemo(() => {
+    const list = [];
+    items.forEach((_ref2, index) => {
+      let {
+        id,
+        text
+      } = _ref2;
+      list.push( /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
+        $width: itemWidth,
+        key: `slider-button-${id}`,
+        onClick: () => handleClick(id, index),
+        $isSelected: id === selectedButton
+      }, text));
+    });
+    return list;
+  }, [handleClick, itemWidth, items, selectedButton]);
+  const thumbText = useMemo(() => {
+    const selectedItem = items.find(_ref3 => {
+      let {
+        id
+      } = _ref3;
+      return id === selectedButton;
+    });
+    return selectedItem ? selectedItem.text : '';
+  }, [items, selectedButton]);
+
+  /**
+   * Creates an array with the snap points relative to the width of the items
+   */
+  const snapPoints = useMemo(() => {
+    const points = [0];
+    for (let i = 1; i < items.length; i++) {
+      points.push(itemWidth * i);
+    }
+    return points;
+  }, [itemWidth, items.length]);
+  const handleDragEnd = useCallback(() => {
+    const position = getThumbPosition({
+      scope,
+      itemWidth
+    });
+    if (!position) {
+      return;
+    }
+    const {
+      nearestPoint,
+      nearestIndex
+    } = getNearestPoint({
+      snapPoints,
+      position
+    });
+    if (nearestPoint >= 0 && nearestIndex >= 0) {
+      void animation(nearestPoint);
+      const id = items[nearestIndex]?.id;
+      if (typeof onChange === 'function' && id) {
+        onChange(id);
+      }
+    }
+  }, [animation, itemWidth, items, onChange, scope, snapPoints]);
+  const handleWhileDrag = useCallback(() => {
+    const position = getThumbPosition({
+      scope,
+      itemWidth
+    });
+    if (!position) {
+      return;
+    }
+    const {
+      nearestIndex
+    } = getNearestPoint({
+      snapPoints,
+      position
+    });
+    if (nearestIndex >= 0) {
+      setSelectedButton(items[nearestIndex]?.id);
+    }
+  }, [itemWidth, items, scope, snapPoints]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledSliderButton, {
+    $isDisabled: isDisabled,
+    ref: sliderButtonRef
+  }, /*#__PURE__*/React.createElement(AnimatePresence, null, buttons, /*#__PURE__*/React.createElement(StyledMotionSliderButtonThumb, {
+    ref: scope,
+    drag: isDisabled ? false : 'x',
+    dragElastic: 0,
+    dragConstraints: {
+      ...dragRange
+    },
+    $width: itemWidth,
+    onDrag: handleWhileDrag,
+    onDragEnd: handleDragEnd
+  }, thumbText))), [buttons, dragRange, handleDragEnd, handleWhileDrag, isDisabled, itemWidth, scope, thumbText]);
+};
+SliderButton.displayName = 'SliderButton';
+export default SliderButton;
+//# sourceMappingURL=SliderButton.js.map

package/lib/components/slider-button/SliderButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderButton.js","names":["AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","calculateBiggestWidth","getNearestPoint","getThumbPosition","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonItem","SliderButton","_ref","selectedButtonId","isDisabled","items","onChange","selectedButton","setSelectedButton","undefined","dragRange","setDragRange","left","right","sliderButtonRef","scope","animate","id","itemWidth","current","offsetWidth","animation","x","type","duration","handleClick","index","buttons","list","forEach","_ref2","text","push","createElement","$width","key","onClick","$isSelected","thumbText","selectedItem","find","_ref3","snapPoints","points","i","length","handleDragEnd","position","nearestPoint","nearestIndex","handleWhileDrag","$isDisabled","ref","drag","dragElastic","dragConstraints","onDrag","onDragEnd","displayName"],"sources":["../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { AnimatePresence, useAnimate } from 'framer-motion';\nimport React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport {\n    StyledMotionSliderButtonThumb,\n    StyledSliderButton,\n    StyledSliderButtonItem,\n} from './SliderButton.styles';\n\nexport type SliderButtonProps = {\n    /**\n     * Whether the button is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when a button is selected.\n     * @param id\n     */\n    onChange?: (id: string) => void;\n    /**\n     * The buttons that are slidable.\n     */\n    items: SliderButtonItem[];\n    /**\n     * The id of a button that should be selected.\n     */\n    selectedButtonId?: string;\n};\n\nconst SliderButton: FC<SliderButtonProps> = ({ selectedButtonId, isDisabled, items, onChange }) => {\n    const [selectedButton, setSelectedButton] = useState<string | undefined>(undefined);\n    const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n\n    const sliderButtonRef = useRef<HTMLDivElement>(null);\n\n    const [scope, animate] = useAnimate();\n\n    useEffect(() => {\n        if (selectedButtonId) {\n            setSelectedButton(selectedButtonId);\n        } else {\n            setSelectedButton(items[0]?.id);\n        }\n    }, [items, selectedButtonId]);\n\n    const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n\n    useEffect(() => {\n        if (sliderButtonRef.current) {\n            setDragRange({ left: 0, right: sliderButtonRef.current.offsetWidth - itemWidth });\n        }\n    }, [itemWidth]);\n\n    const animation = useCallback(\n        async (x: number) => {\n            await animate(\n                scope.current,\n                { x },\n                {\n                    type: 'tween',\n                    duration: 0.2,\n                },\n            );\n        },\n        [animate, scope],\n    );\n\n    const handleClick = useCallback(\n        (id: string, index: number) => {\n            if (isDisabled) {\n                return;\n            }\n\n            setSelectedButton(id);\n\n            if (typeof onChange === 'function') {\n                onChange(id);\n            }\n\n            void animation(itemWidth * index);\n        },\n        [animation, isDisabled, itemWidth, onChange],\n    );\n\n    const buttons = useMemo(() => {\n        const list: ReactElement[] = [];\n\n        items.forEach(({ id, text }, index) => {\n            list.push(\n                <StyledSliderButtonItem\n                    $width={itemWidth}\n                    key={`slider-button-${id}`}\n                    onClick={() => handleClick(id, index)}\n                    $isSelected={id === selectedButton}\n                >\n                    {text}\n                </StyledSliderButtonItem>,\n            );\n        });\n\n        return list;\n    }, [handleClick, itemWidth, items, selectedButton]);\n\n    const thumbText = useMemo(() => {\n        const selectedItem = items.find(({ id }) => id === selectedButton);\n\n        return selectedItem ? selectedItem.text : '';\n    }, [items, selectedButton]);\n\n    /**\n     * Creates an array with the snap points relative to the width of the items\n     */\n    const snapPoints = useMemo(() => {\n        const points = [0];\n\n        for (let i = 1; i < items.length; i++) {\n            points.push(itemWidth * i);\n        }\n\n        return points;\n    }, [itemWidth, items.length]);\n\n    const handleDragEnd = useCallback(() => {\n        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { nearestPoint, nearestIndex } = getNearestPoint({ snapPoints, position });\n\n        if (nearestPoint >= 0 && nearestIndex >= 0) {\n            void animation(nearestPoint);\n\n            const id = items[nearestIndex]?.id;\n\n            if (typeof onChange === 'function' && id) {\n                onChange(id);\n            }\n        }\n    }, [animation, itemWidth, items, onChange, scope, snapPoints]);\n\n    const handleWhileDrag = useCallback(() => {\n        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { nearestIndex } = getNearestPoint({ snapPoints, position });\n\n        if (nearestIndex >= 0) {\n            setSelectedButton(items[nearestIndex]?.id);\n        }\n    }, [itemWidth, items, scope, snapPoints]);\n\n    return useMemo(\n        () => (\n            <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\n                <AnimatePresence>\n                    {buttons}\n                    <StyledMotionSliderButtonThumb\n                        ref={scope}\n                        drag={isDisabled ? false : 'x'}\n                        dragElastic={0}\n                        dragConstraints={{ ...dragRange }}\n                        $width={itemWidth}\n                        onDrag={handleWhileDrag}\n                        onDragEnd={handleDragEnd}\n                    >\n                        {thumbText}\n                    </StyledMotionSliderButtonThumb>\n                </AnimatePresence>\n            </StyledSliderButton>\n        ),\n        [\n            buttons,\n            dragRange,\n            handleDragEnd,\n            handleWhileDrag,\n            isDisabled,\n            itemWidth,\n            scope,\n            thumbText,\n        ],\n    );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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"}