@chayns-components/core 5.1.0 → 5.2.0

package/AGENTS.md

@@ -1,8 +1,8 @@
 # @chayns-components/core
 
-React component package providing 44 documented components for chayns applications.
+React component package providing 45 documented components for chayns applications.
 
-Documented components: `Accordion`, `AmountControl`, `AnimatedNumber`, `Badge`, `Button`, `Checkbox`, `ComboBox`, `ContentCard`, `ContextMenu`, `ExpandableContent`, `FileInput`, `FileList`, `FileSelect`, `Filter`, `FilterButtons`, `GridImage`, `GroupedImage`, `HighlightSlider`, `Icon`, `Input`, `List`, `MentionFinder`, `MultiActionButton`, `NumberInput`, `Popup`, `ProgressBar`, `RadioButton`, `ScrollView`, `SearchBox`, `SearchInput`, `SelectButton`, `SetupWizard`, `SetupWizardItem`, `SharingBar`, `SharingButton`, `Signature`, `Slider`, `SliderButton`, `SmallWaitCursor`, `TagInput`, `TextArea`, `Tooltip`, `Truncation`, `VerificationBadge`.
+Documented components: `Accordion`, `AmountControl`, `AnimatedNumber`, `Badge`, `Button`, `Checkbox`, `ComboBox`, `ContentCard`, `ContextMenu`, `ExpandableContent`, `FileInput`, `FileList`, `FileSelect`, `Filter`, `FilterButtons`, `GridImage`, `GroupedImage`, `HighlightSlider`, `Icon`, `Input`, `List`, `MentionFinder`, `MultiActionButton`, `NumberInput`, `Popup`, `ProgressBar`, `RadioButton`, `ScrollView`, `SearchBox`, `SearchInput`, `SelectButton`, `SetupWizard`, `SetupWizardItem`, `SharingBar`, `SharingButton`, `Signature`, `Skeleton`, `Slider`, `SliderButton`, `SmallWaitCursor`, `TagInput`, `TextArea`, `Tooltip`, `Truncation`, `VerificationBadge`.
 
 ## Import
 
@@ -54,6 +54,7 @@ import { Accordion, AmountControl, AnimatedNumber } from '@chayns-components/cor
 - `SharingBar`
 - `SharingButton`
 - `Signature`
+- `Skeleton`
 - `Slider`
 - `SliderButton`
 - `SmallWaitCursor`
@@ -4271,6 +4272,120 @@ No additional exported types documented.
 
 ### Anti Patterns
 
+- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
+## Skeleton
+
+`Skeleton` is exported by `@chayns-components/core` and should be imported from the public package entry point.
+
+### Import
+
+```ts
+import { Skeleton } from '@chayns-components/core';
+```
+
+### Examples
+
+#### General
+
+```tsx
+<Skeleton
+    width={100}
+    height={100}
+/>
+```
+
+#### Circle
+
+```tsx
+<Skeleton
+    size={100}
+/>
+```
+
+#### H1
+
+```tsx
+<Skeleton />
+```
+
+#### H2
+
+```tsx
+<Skeleton />
+```
+
+#### H3
+
+```tsx
+<Skeleton />
+```
+
+#### H4
+
+```tsx
+<Skeleton />
+```
+
+#### H5
+
+```tsx
+<Skeleton />
+```
+
+#### H6
+
+```tsx
+<Skeleton />
+```
+
+#### Text
+
+```tsx
+<Skeleton
+    lines={3}
+    randomWithBounds={[50, 90]}
+/>
+```
+
+#### Button
+
+```tsx
+<Skeleton />
+```
+
+#### Badge
+
+```tsx
+<Skeleton />
+```
+
+#### Accordion
+
+```tsx
+<Skeleton />
+```
+
+#### List Item
+
+```tsx
+<Skeleton />
+```
+
+### Props
+
+No prop documentation available.
+
+### Types
+
+No additional exported types documented.
+
+### Usage Notes
+
+- Import `Skeleton` directly from `@chayns-components/core` instead of internal source paths.
+- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
+
+### Anti Patterns
+
 - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
 ## Slider
 

package/lib/cjs/components/search-input/SearchInput.js

@@ -36,11 +36,13 @@ const SearchInput = /*#__PURE__*/(0, _react2.forwardRef)(({
     if (typeof onActiveChange === 'function') {
       onActiveChange(isSearchInputActive);
     }
+  }, [isSearchInputActive, onActiveChange]);
+  (0, _react2.useEffect)(() => {
     if (isSearchInputActive) {
       var _inputRef$current;
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
     }
-  }, [isSearchInputActive, onActiveChange]);
+  }, [isSearchInputActive]);
   (0, _react2.useEffect)(() => {
     if (typeof isActive === 'boolean') {
       setIsSearchInputActive(isActive);

package/lib/cjs/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":["_react","require","_react2","_interopRequireWildcard","_Icon","_interopRequireDefault","_Input","_SearchInput","_styledComponents","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SearchInput","forwardRef","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","InputSize","Medium","value","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","pseudoRef","parentWidth","useElementSize","theme","useTheme","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","useImperativeHandle","_inputRef$current2","blur","_inputRef$current3","useMemo","createElement","Fragment","StyledSearchInput","className","$size","$shouldUseAbsolutePositioning","onClick","AnimatePresence","initial","StyledMotionSearchInputContentWrapper","animate","opacity","exit","key","transition","duration","type","shouldShowClearIcon","StyledMotionSearchInputIconWrapperContent","position","id","tabIndex","preventDefault","color","icons","StyledMotionSearchInputIconWrapper","leftElement","text","StyledSearchInputPseudoElement","displayName","_default","exports"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n    StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether the SearchInput should be positioned absolute.\n     */\n    shouldUseAbsolutePositioning?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * The width of the parent.\n     */\n    width?: number;\n};\n\nconst SearchInput = forwardRef<InputRef, SearchInputProps>(\n    (\n        {\n            iconColor,\n            isActive,\n            onActiveChange,\n            onChange,\n            onKeyDown,\n            placeholder,\n            shouldUseAbsolutePositioning = false,\n            size = InputSize.Medium,\n            value,\n            width: widthValue,\n        },\n        ref,\n    ) => {\n        const [isSearchInputActive, setIsSearchInputActive] = useState(\n            isActive ?? (typeof value === 'string' && value.trim() !== ''),\n        );\n\n        const inputRef = useRef<InputRef>(null);\n        const pseudoRef = useRef<HTMLDivElement>(null);\n\n        const parentWidth = useElementSize(pseudoRef);\n\n        const theme = useTheme() as Theme;\n\n        const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n        const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n        useEffect(() => {\n            if (typeof onActiveChange === 'function') {\n                onActiveChange(isSearchInputActive);\n            }\n\n            if (isSearchInputActive) {\n                inputRef.current?.focus();\n            }\n        }, [isSearchInputActive, onActiveChange]);\n\n        useEffect(() => {\n            if (typeof isActive === 'boolean') {\n                setIsSearchInputActive(isActive);\n            }\n        }, [isActive]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n                blur: () => inputRef.current?.blur(),\n            }),\n            [],\n        );\n\n        const width = useMemo(\n            () => widthValue ?? parentWidth?.width,\n            [parentWidth?.width, widthValue],\n        );\n\n        return (\n            <>\n                <StyledSearchInput\n                    className=\"beta-chayns-search-input\"\n                    $size={size}\n                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                    onClick={() => {\n                        if (shouldUseAbsolutePositioning) {\n                            if (isSearchInputActive) {\n                                handleBackIconClick();\n                            } else {\n                                handleSearchIconClick();\n                            }\n                        }\n                    }}\n                >\n                    {shouldUseAbsolutePositioning ? (\n                        <AnimatePresence initial={false}>\n                            {isSearchInputActive && (\n                                <StyledMotionSearchInputContentWrapper\n                                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                    animate={{ opacity: 1, width }}\n                                    exit={{ opacity: 0, width: 0 }}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"searchInputContentWrapper\"\n                                    transition={{ duration: 0.25, type: 'tween' }}\n                                >\n                                    <Input\n                                        onChange={onChange}\n                                        onKeyDown={onKeyDown}\n                                        placeholder={placeholder}\n                                        ref={inputRef}\n                                        shouldShowClearIcon\n                                        size={size}\n                                        value={value}\n                                    />\n                                </StyledMotionSearchInputContentWrapper>\n                            )}\n                            <StyledMotionSearchInputIconWrapperContent\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0, position: 'absolute' }}\n                                initial={{ opacity: 0 }}\n                                key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                transition={{ duration: 0.3 }}\n                                id={\n                                    isSearchInputActive\n                                        ? 'search-input-backIcon'\n                                        : 'search-input-searchIcon'\n                                }\n                                tabIndex={0}\n                                onKeyDown={(e) => {\n                                    if (e.key === 'Enter') {\n                                        e.preventDefault();\n                                        if (isSearchInputActive) {\n                                            handleBackIconClick();\n                                        } else {\n                                            handleSearchIconClick();\n                                        }\n                                    }\n                                }}\n                            >\n                                <Icon\n                                    key=\"icon\"\n                                    color={iconColor}\n                                    tabIndex={-1}\n                                    icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n                                    onClick={\n                                        isSearchInputActive\n                                            ? handleBackIconClick\n                                            : handleSearchIconClick\n                                    }\n                                />\n                            </StyledMotionSearchInputIconWrapperContent>\n                        </AnimatePresence>\n                    ) : (\n                        <>\n                            <StyledMotionSearchInputIconWrapper>\n                                <AnimatePresence initial={false}>\n                                    <StyledMotionSearchInputIconWrapperContent\n                                        animate={{ opacity: 1 }}\n                                        exit={{ opacity: 0, position: 'absolute' }}\n                                        initial={{ opacity: 0 }}\n                                        key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                        transition={{ duration: 0.3 }}\n                                        id={\n                                            isSearchInputActive\n                                                ? 'search-input-backIcon'\n                                                : 'search-input-searchIcon'\n                                        }\n                                        tabIndex={0}\n                                        onKeyDown={(e) => {\n                                            if (e.key === 'Enter') {\n                                                e.preventDefault();\n                                                if (isSearchInputActive) {\n                                                    handleBackIconClick();\n                                                } else {\n                                                    handleSearchIconClick();\n                                                }\n                                            }\n                                        }}\n                                    >\n                                        <Icon\n                                            key=\"icon\"\n                                            color={iconColor}\n                                            tabIndex={-1}\n                                            icons={\n                                                isSearchInputActive\n                                                    ? ['fa fa-arrow-left']\n                                                    : ['fa fa-search']\n                                            }\n                                            onClick={\n                                                isSearchInputActive\n                                                    ? handleBackIconClick\n                                                    : handleSearchIconClick\n                                            }\n                                        />\n                                    </StyledMotionSearchInputIconWrapperContent>\n                                </AnimatePresence>\n                            </StyledMotionSearchInputIconWrapper>\n                            <AnimatePresence initial={false}>\n                                {isSearchInputActive && (\n                                    <StyledMotionSearchInputContentWrapper\n                                        $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                        animate={{ opacity: 1, width: '100%' }}\n                                        exit={{ opacity: 0, width: 0 }}\n                                        initial={{ opacity: 0, width: 0 }}\n                                        key=\"searchInputContentWrapper\"\n                                        transition={{ duration: 0.3 }}\n                                    >\n                                        <Input\n                                            key=\"input\"\n                                            leftElement={\n                                                <Icon\n                                                    color={theme.text}\n                                                    icons={['far fa-search']}\n                                                />\n                                            }\n                                            onChange={onChange}\n                                            onKeyDown={onKeyDown}\n                                            placeholder={placeholder}\n                                            ref={inputRef}\n                                            shouldShowClearIcon\n                                            size={size}\n                                            value={value}\n                                        />\n                                    </StyledMotionSearchInputContentWrapper>\n                                )}\n                            </AnimatePresence>\n                        </>\n                    )}\n                </StyledSearchInput>\n                <StyledSearchInputPseudoElement ref={pseudoRef} />\n            </>\n        );\n    },\n);\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchInput.js","names":["_react","require","_react2","_interopRequireWildcard","_Icon","_interopRequireDefault","_Input","_SearchInput","_styledComponents","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SearchInput","forwardRef","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","InputSize","Medium","value","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","pseudoRef","parentWidth","useElementSize","theme","useTheme","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","useImperativeHandle","_inputRef$current2","blur","_inputRef$current3","useMemo","createElement","Fragment","StyledSearchInput","className","$size","$shouldUseAbsolutePositioning","onClick","AnimatePresence","initial","StyledMotionSearchInputContentWrapper","animate","opacity","exit","key","transition","duration","type","shouldShowClearIcon","StyledMotionSearchInputIconWrapperContent","position","id","tabIndex","preventDefault","color","icons","StyledMotionSearchInputIconWrapper","leftElement","text","StyledSearchInputPseudoElement","displayName","_default","exports"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n    StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether the SearchInput should be positioned absolute.\n     */\n    shouldUseAbsolutePositioning?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * The width of the parent.\n     */\n    width?: number;\n};\n\nconst SearchInput = forwardRef<InputRef, SearchInputProps>(\n    (\n        {\n            iconColor,\n            isActive,\n            onActiveChange,\n            onChange,\n            onKeyDown,\n            placeholder,\n            shouldUseAbsolutePositioning = false,\n            size = InputSize.Medium,\n            value,\n            width: widthValue,\n        },\n        ref,\n    ) => {\n        const [isSearchInputActive, setIsSearchInputActive] = useState(\n            isActive ?? (typeof value === 'string' && value.trim() !== ''),\n        );\n\n        const inputRef = useRef<InputRef>(null);\n        const pseudoRef = useRef<HTMLDivElement>(null);\n\n        const parentWidth = useElementSize(pseudoRef);\n\n        const theme = useTheme() as Theme;\n\n        const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n        const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n        useEffect(() => {\n            if (typeof onActiveChange === 'function') {\n                onActiveChange(isSearchInputActive);\n            }\n        }, [isSearchInputActive, onActiveChange]);\n\n        useEffect(() => {\n            if (isSearchInputActive) {\n                inputRef.current?.focus();\n            }\n        }, [isSearchInputActive]);\n\n        useEffect(() => {\n            if (typeof isActive === 'boolean') {\n                setIsSearchInputActive(isActive);\n            }\n        }, [isActive]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n                blur: () => inputRef.current?.blur(),\n            }),\n            [],\n        );\n\n        const width = useMemo(\n            () => widthValue ?? parentWidth?.width,\n            [parentWidth?.width, widthValue],\n        );\n\n        return (\n            <>\n                <StyledSearchInput\n                    className=\"beta-chayns-search-input\"\n                    $size={size}\n                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                    onClick={() => {\n                        if (shouldUseAbsolutePositioning) {\n                            if (isSearchInputActive) {\n                                handleBackIconClick();\n                            } else {\n                                handleSearchIconClick();\n                            }\n                        }\n                    }}\n                >\n                    {shouldUseAbsolutePositioning ? (\n                        <AnimatePresence initial={false}>\n                            {isSearchInputActive && (\n                                <StyledMotionSearchInputContentWrapper\n                                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                    animate={{ opacity: 1, width }}\n                                    exit={{ opacity: 0, width: 0 }}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"searchInputContentWrapper\"\n                                    transition={{ duration: 0.25, type: 'tween' }}\n                                >\n                                    <Input\n                                        onChange={onChange}\n                                        onKeyDown={onKeyDown}\n                                        placeholder={placeholder}\n                                        ref={inputRef}\n                                        shouldShowClearIcon\n                                        size={size}\n                                        value={value}\n                                    />\n                                </StyledMotionSearchInputContentWrapper>\n                            )}\n                            <StyledMotionSearchInputIconWrapperContent\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0, position: 'absolute' }}\n                                initial={{ opacity: 0 }}\n                                key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                transition={{ duration: 0.3 }}\n                                id={\n                                    isSearchInputActive\n                                        ? 'search-input-backIcon'\n                                        : 'search-input-searchIcon'\n                                }\n                                tabIndex={0}\n                                onKeyDown={(e) => {\n                                    if (e.key === 'Enter') {\n                                        e.preventDefault();\n                                        if (isSearchInputActive) {\n                                            handleBackIconClick();\n                                        } else {\n                                            handleSearchIconClick();\n                                        }\n                                    }\n                                }}\n                            >\n                                <Icon\n                                    key=\"icon\"\n                                    color={iconColor}\n                                    tabIndex={-1}\n                                    icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n                                    onClick={\n                                        isSearchInputActive\n                                            ? handleBackIconClick\n                                            : handleSearchIconClick\n                                    }\n                                />\n                            </StyledMotionSearchInputIconWrapperContent>\n                        </AnimatePresence>\n                    ) : (\n                        <>\n                            <StyledMotionSearchInputIconWrapper>\n                                <AnimatePresence initial={false}>\n                                    <StyledMotionSearchInputIconWrapperContent\n                                        animate={{ opacity: 1 }}\n                                        exit={{ opacity: 0, position: 'absolute' }}\n                                        initial={{ opacity: 0 }}\n                                        key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                        transition={{ duration: 0.3 }}\n                                        id={\n                                            isSearchInputActive\n                                                ? 'search-input-backIcon'\n                                                : 'search-input-searchIcon'\n                                        }\n                                        tabIndex={0}\n                                        onKeyDown={(e) => {\n                                            if (e.key === 'Enter') {\n                                                e.preventDefault();\n                                                if (isSearchInputActive) {\n                                                    handleBackIconClick();\n                                                } else {\n                                                    handleSearchIconClick();\n                                                }\n                                            }\n                                        }}\n                                    >\n                                        <Icon\n                                            key=\"icon\"\n                                            color={iconColor}\n                                            tabIndex={-1}\n                                            icons={\n                                                isSearchInputActive\n                                                    ? ['fa fa-arrow-left']\n                                                    : ['fa fa-search']\n                                            }\n                                            onClick={\n                                                isSearchInputActive\n                                                    ? handleBackIconClick\n                                                    : handleSearchIconClick\n                                            }\n                                        />\n                                    </StyledMotionSearchInputIconWrapperContent>\n                                </AnimatePresence>\n                            </StyledMotionSearchInputIconWrapper>\n                            <AnimatePresence initial={false}>\n                                {isSearchInputActive && (\n                                    <StyledMotionSearchInputContentWrapper\n                                        $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                        animate={{ opacity: 1, width: '100%' }}\n                                        exit={{ opacity: 0, width: 0 }}\n                                        initial={{ opacity: 0, width: 0 }}\n                                        key=\"searchInputContentWrapper\"\n                                        transition={{ duration: 0.3 }}\n                                    >\n                                        <Input\n                                            key=\"input\"\n                                            leftElement={\n                                                <Icon\n                                                    color={theme.text}\n                                                    icons={['far fa-search']}\n                                                />\n                                            }\n                                            onChange={onChange}\n                                            onKeyDown={onKeyDown}\n                                            placeholder={placeholder}\n                                            ref={inputRef}\n                                            shouldShowClearIcon\n                                            size={size}\n                                            value={value}\n                                        />\n                                    </StyledMotionSearchInputContentWrapper>\n                                )}\n                            </AnimatePresence>\n                        </>\n                    )}\n                </StyledSearchInput>\n                <StyledSearchInputPseudoElement ref={pseudoRef} />\n            </>\n        );\n    },\n);\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/skeleton/base-skeleton/BaseSkeleton.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BaseSkeleton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _BaseSkeleton = require("./BaseSkeleton.styles");
+var _types = require("../types");
+var _SkeletonProvider = require("../skeleton-provider/SkeletonProvider");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const BaseSkeleton = exports.BaseSkeleton = /*#__PURE__*/(0, _react.forwardRef)(({
+  baseColor,
+  highlightColor,
+  animationType,
+  height,
+  style,
+  width,
+  className,
+  borderRadius,
+  as,
+  children
+}, ref) => {
+  const values = (0, _SkeletonProvider.useSkeletonContext)();
+  const animationStyle = (0, _SkeletonProvider.useSkeletonAnimation)();
+  const resolvedAnimationType = animationType ?? values.animationType;
+  return /*#__PURE__*/_react.default.createElement(_BaseSkeleton.StyledBaseSkeleton, {
+    as: as,
+    ref: ref,
+    className: className,
+    style: style,
+    $backgroundColor: baseColor ?? values.baseColor,
+    $borderRadius: borderRadius ?? values.borderRadius,
+    $height: height,
+    $width: width,
+    $shouldUseNativeTag: !!as
+  }, resolvedAnimationType === _types.SkeletonAnimationType.SHIMMER && /*#__PURE__*/_react.default.createElement(_BaseSkeleton.StyledMotionBaseSkeletonShimmer, {
+    $color: highlightColor ?? values.highlightColor,
+    style: animationStyle
+  }), resolvedAnimationType === _types.SkeletonAnimationType.PULSE && /*#__PURE__*/_react.default.createElement(_BaseSkeleton.StyledMotionBaseSkeletonPulse, {
+    $color: highlightColor ?? values.highlightColor,
+    style: animationStyle
+  }), children);
+});
+BaseSkeleton.displayName = 'BaseSkeleton';
+var _default = exports.default = BaseSkeleton;
+//# sourceMappingURL=BaseSkeleton.js.map

package/lib/cjs/components/skeleton/base-skeleton/BaseSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSkeleton.js","names":["_react","_interopRequireWildcard","require","_BaseSkeleton","_types","_SkeletonProvider","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BaseSkeleton","exports","forwardRef","baseColor","highlightColor","animationType","height","style","width","className","borderRadius","as","children","ref","values","useSkeletonContext","animationStyle","useSkeletonAnimation","resolvedAnimationType","createElement","StyledBaseSkeleton","$backgroundColor","$borderRadius","$height","$width","$shouldUseNativeTag","SkeletonAnimationType","SHIMMER","StyledMotionBaseSkeletonShimmer","$color","PULSE","StyledMotionBaseSkeletonPulse","displayName","_default"],"sources":["../../../../../src/components/skeleton/base-skeleton/BaseSkeleton.tsx"],"sourcesContent":["import React, { forwardRef, ReactHTML, ReactNode } from 'react';\nimport {\n    StyledBaseSkeleton,\n    StyledMotionBaseSkeletonPulse,\n    StyledMotionBaseSkeletonShimmer,\n} from './BaseSkeleton.styles';\nimport { BaseSkeletonConfig, SkeletonAnimationType } from '../types';\nimport { useSkeletonAnimation, useSkeletonContext } from '../skeleton-provider/SkeletonProvider';\n\nexport interface BaseSkeletonProps extends BaseSkeletonConfig {\n    width: number | string;\n    height: number | string;\n    as?: keyof ReactHTML;\n    children?: ReactNode;\n}\n\nexport const BaseSkeleton = forwardRef<HTMLDivElement, BaseSkeletonProps>(\n    (\n        {\n            baseColor,\n            highlightColor,\n            animationType,\n            height,\n            style,\n            width,\n            className,\n            borderRadius,\n            as,\n            children,\n        },\n        ref,\n    ) => {\n        const values = useSkeletonContext();\n        const animationStyle = useSkeletonAnimation();\n\n        const resolvedAnimationType = animationType ?? values.animationType;\n\n        return (\n            <StyledBaseSkeleton\n                as={as}\n                ref={ref}\n                className={className}\n                style={style}\n                $backgroundColor={baseColor ?? values.baseColor}\n                $borderRadius={borderRadius ?? values.borderRadius}\n                $height={height}\n                $width={width}\n                $shouldUseNativeTag={!!as}\n            >\n                {resolvedAnimationType === SkeletonAnimationType.SHIMMER && (\n                    <StyledMotionBaseSkeletonShimmer\n                        $color={highlightColor ?? values.highlightColor}\n                        style={animationStyle}\n                    />\n                )}\n                {resolvedAnimationType === SkeletonAnimationType.PULSE && (\n                    <StyledMotionBaseSkeletonPulse\n                        $color={highlightColor ?? values.highlightColor}\n                        style={animationStyle}\n                    />\n                )}\n                {children}\n            </StyledBaseSkeleton>\n        );\n    },\n);\n\nBaseSkeleton.displayName = 'BaseSkeleton';\n\nexport default BaseSkeleton;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/skeleton/base-skeleton/BaseSkeleton.styles.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionBaseSkeletonShimmer = exports.StyledMotionBaseSkeletonPulse = exports.StyledBaseSkeleton = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _react = require("motion/react");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const StyledBaseSkeleton = exports.StyledBaseSkeleton = _styledComponents.default.div`
+    position: relative;
+    overflow: hidden;
+    border-radius: ${({
+  $borderRadius
+}) => `${$borderRadius}${typeof $borderRadius === 'number' ? 'px' : ''}`};
+
+    background-color: ${({
+  $backgroundColor
+}) => $backgroundColor};
+
+    width: ${({
+  $width
+}) => `${$width}${typeof $width === 'number' ? 'px' : ''}`};
+
+    user-select: none;
+
+    ${({
+  $shouldUseNativeTag,
+  $height
+}) => $shouldUseNativeTag ? (0, _styledComponents.css)`
+                  color: transparent;
+              ` : (0, _styledComponents.css)`
+                  height: ${$height}${typeof $height === 'number' ? 'px' : ''};
+              `}
+`;
+const StyledMotionBaseSkeletonShimmer = exports.StyledMotionBaseSkeletonShimmer = (0, _styledComponents.default)(_react.motion.div)`
+    background: ${({
+  $color
+}) => `linear-gradient(
+            90deg,
+            transparent 0%,
+            ${$color} 50%,
+            transparent 100%
+        )`};
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    pointer-events: none;
+    border-radius: 0;
+
+    will-change: transform;
+
+    opacity: 0.06;
+`;
+const StyledMotionBaseSkeletonPulse = exports.StyledMotionBaseSkeletonPulse = (0, _styledComponents.default)(_react.motion.div)`
+    width: 100%;
+    height: 100%;
+
+    position: absolute;
+
+    opacity: 0.06;
+
+    background-color: ${({
+  $color
+}) => $color};
+`;
+//# sourceMappingURL=BaseSkeleton.styles.js.map

package/lib/cjs/components/skeleton/base-skeleton/BaseSkeleton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSkeleton.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_react","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledBaseSkeleton","exports","styled","div","$borderRadius","$backgroundColor","$width","$shouldUseNativeTag","$height","css","StyledMotionBaseSkeletonShimmer","motion","$color","StyledMotionBaseSkeletonPulse"],"sources":["../../../../../src/components/skeleton/base-skeleton/BaseSkeleton.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { motion } from 'motion/react';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledBaseSkeletonProps = WithTheme<{\n    $borderRadius: number | string;\n    $backgroundColor: string;\n    $width: number | string;\n    $height: number | string;\n    $shouldUseNativeTag: boolean;\n}>;\n\nexport const StyledBaseSkeleton = styled.div<StyledBaseSkeletonProps>`\n    position: relative;\n    overflow: hidden;\n    border-radius: ${({ $borderRadius }) =>\n        `${$borderRadius}${typeof $borderRadius === 'number' ? 'px' : ''}`};\n\n    background-color: ${({ $backgroundColor }) => $backgroundColor};\n\n    width: ${({ $width }) => `${$width}${typeof $width === 'number' ? 'px' : ''}`};\n\n    user-select: none;\n\n    ${({ $shouldUseNativeTag, $height }) =>\n        $shouldUseNativeTag\n            ? css`\n                  color: transparent;\n              `\n            : css`\n                  height: ${$height}${typeof $height === 'number' ? 'px' : ''};\n              `}\n`;\n\ntype StyledMotionBaseSkeletonShimmerProps = WithTheme<{\n    $color: string;\n}>;\n\nexport const StyledMotionBaseSkeletonShimmer = styled(\n    motion.div,\n)<StyledMotionBaseSkeletonShimmerProps>`\n    background: ${({ $color }) =>\n        `linear-gradient(\n            90deg,\n            transparent 0%,\n            ${$color} 50%,\n            transparent 100%\n        )`};\n\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n\n    width: 100%;\n    height: 100%;\n\n    pointer-events: none;\n    border-radius: 0;\n\n    will-change: transform;\n\n    opacity: 0.06;\n`;\n\ntype StyledMotionBaseSkeletonPulseProps = WithTheme<{\n    $color: string;\n}>;\n\nexport const StyledMotionBaseSkeletonPulse = styled(motion.div)<StyledMotionBaseSkeletonPulseProps>`\n    width: 100%;\n    height: 100%;\n\n    position: absolute;\n\n    opacity: 0.06;\n\n    background-color: ${({ $color }) => $color};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAAsC,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAW/B,MAAMkB,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE;AACA;AACA,qBAAqB,CAAC;EAAEC;AAAc,CAAC,KAC/B,GAAGA,aAAa,GAAG,OAAOA,aAAa,KAAK,QAAQ,GAAG,IAAI,GAAG,EAAE,EAAE;AAC1E;AACA,wBAAwB,CAAC;EAAEC;AAAiB,CAAC,KAAKA,gBAAgB;AAClE;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAK,GAAGA,MAAM,GAAG,OAAOA,MAAM,KAAK,QAAQ,GAAG,IAAI,GAAG,EAAE,EAAE;AACjF;AACA;AACA;AACA,MAAM,CAAC;EAAEC,mBAAmB;EAAEC;AAAQ,CAAC,KAC/BD,mBAAmB,GACb,IAAAE,qBAAG;AACjB;AACA,eAAe,GACD,IAAAA,qBAAG;AACjB,4BAA4BD,OAAO,GAAG,OAAOA,OAAO,KAAK,QAAQ,GAAG,IAAI,GAAG,EAAE;AAC7E,eAAe;AACf,CAAC;AAMM,MAAME,+BAA+B,GAAAT,OAAA,CAAAS,+BAAA,GAAG,IAAAR,yBAAM,EACjDS,aAAM,CAACR,GACX,CAAuC;AACvC,kBAAkB,CAAC;EAAES;AAAO,CAAC,KACrB;AACR;AACA;AACA,cAAcA,MAAM;AACpB;AACA,UAAU;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,6BAA6B,GAAAZ,OAAA,CAAAY,6BAAA,GAAG,IAAAX,yBAAM,EAACS,aAAM,CAACR,GAAG,CAAqC;AACnG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAES;AAAO,CAAC,KAAKA,MAAM;AAC9C,CAAC","ignoreList":[]}

package/lib/cjs/components/skeleton/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _SkeletonProvider = _interopRequireDefault(require("./skeleton-provider/SkeletonProvider"));
+var _BoxSkeleton = _interopRequireDefault(require("./variants/box-skeleton/BoxSkeleton"));
+var _CircleSkeleton = _interopRequireDefault(require("./variants/circle-skeleton/CircleSkeleton"));
+var _HeadlineSkeleton = require("./variants/headline-skeleton/HeadlineSkeleton");
+var _TextSkeleton = _interopRequireDefault(require("./variants/text-skeleton/TextSkeleton"));
+var _ButtonSkeleton = _interopRequireDefault(require("./variants/button-skeleton/ButtonSkeleton"));
+var _BadgeSkeleton = _interopRequireDefault(require("./variants/badge-skeleton/BadgeSkeleton"));
+var _ListItemSkeleton = _interopRequireDefault(require("./variants/list-item-skeleton/ListItemSkeleton"));
+var _AccordionSkeleton = _interopRequireDefault(require("./variants/accordion-skeleton/AccordionSkeleton"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Skeleton = {
+  Config: _SkeletonProvider.default,
+  Box: _BoxSkeleton.default,
+  Circle: _CircleSkeleton.default,
+  H1: _HeadlineSkeleton.H1Skeleton,
+  H2: _HeadlineSkeleton.H2Skeleton,
+  H3: _HeadlineSkeleton.H3Skeleton,
+  H4: _HeadlineSkeleton.H4Skeleton,
+  H5: _HeadlineSkeleton.H5Skeleton,
+  H6: _HeadlineSkeleton.H6Skeleton,
+  Text: _TextSkeleton.default,
+  Button: _ButtonSkeleton.default,
+  Badge: _BadgeSkeleton.default,
+  ListItem: _ListItemSkeleton.default,
+  Accordion: _AccordionSkeleton.default
+};
+var _default = exports.default = Skeleton;
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_SkeletonProvider","_interopRequireDefault","require","_BoxSkeleton","_CircleSkeleton","_HeadlineSkeleton","_TextSkeleton","_ButtonSkeleton","_BadgeSkeleton","_ListItemSkeleton","_AccordionSkeleton","e","__esModule","default","Skeleton","Config","SkeletonProvider","Box","BoxSkeleton","Circle","CircleSkeleton","H1","H1Skeleton","H2","H2Skeleton","H3","H3Skeleton","H4","H4Skeleton","H5","H5Skeleton","H6","H6Skeleton","Text","TextSkeleton","Button","ButtonSkeleton","Badge","BadgeSkeleton","ListItem","ListItemSkeleton","Accordion","AccordionSkeleton","_default","exports"],"sources":["../../../../src/components/skeleton/index.ts"],"sourcesContent":["import SkeletonProvider from './skeleton-provider/SkeletonProvider';\nimport BoxSkeleton from './variants/box-skeleton/BoxSkeleton';\nimport CircleSkeleton from './variants/circle-skeleton/CircleSkeleton';\nimport {\n    H1Skeleton,\n    H2Skeleton,\n    H3Skeleton,\n    H4Skeleton,\n    H5Skeleton,\n    H6Skeleton,\n} from './variants/headline-skeleton/HeadlineSkeleton';\nimport TextSkeleton from './variants/text-skeleton/TextSkeleton';\nimport ButtonSkeleton from './variants/button-skeleton/ButtonSkeleton';\nimport BadgeSkeleton from './variants/badge-skeleton/BadgeSkeleton';\nimport ListItemSkeleton from './variants/list-item-skeleton/ListItemSkeleton';\nimport AccordionSkeleton from './variants/accordion-skeleton/AccordionSkeleton';\n\ninterface SkeletonNamespace {\n    Config: typeof SkeletonProvider;\n    Box: typeof BoxSkeleton;\n    Circle: typeof CircleSkeleton;\n    H1: typeof H1Skeleton;\n    H2: typeof H2Skeleton;\n    H3: typeof H3Skeleton;\n    H4: typeof H4Skeleton;\n    H5: typeof H5Skeleton;\n    H6: typeof H6Skeleton;\n    Text: typeof TextSkeleton;\n    Button: typeof ButtonSkeleton;\n    Badge: typeof BadgeSkeleton;\n    ListItem: typeof ListItemSkeleton;\n    Accordion: typeof AccordionSkeleton;\n}\n\nconst Skeleton: SkeletonNamespace = {\n    Config: SkeletonProvider,\n    Box: BoxSkeleton,\n    Circle: CircleSkeleton,\n    H1: H1Skeleton,\n    H2: H2Skeleton,\n    H3: H3Skeleton,\n    H4: H4Skeleton,\n    H5: H5Skeleton,\n    H6: H6Skeleton,\n    Text: TextSkeleton,\n    Button: ButtonSkeleton,\n    Badge: BadgeSkeleton,\n    ListItem: ListItemSkeleton,\n    Accordion: AccordionSkeleton,\n};\n\nexport default Skeleton;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,eAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAQA,IAAAI,aAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,eAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,cAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,iBAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,kBAAA,GAAAT,sBAAA,CAAAC,OAAA;AAAgF,SAAAD,uBAAAU,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAmBhF,MAAMG,QAA2B,GAAG;EAChCC,MAAM,EAAEC,yBAAgB;EACxBC,GAAG,EAAEC,oBAAW;EAChBC,MAAM,EAAEC,uBAAc;EACtBC,EAAE,EAAEC,4BAAU;EACdC,EAAE,EAAEC,4BAAU;EACdC,EAAE,EAAEC,4BAAU;EACdC,EAAE,EAAEC,4BAAU;EACdC,EAAE,EAAEC,4BAAU;EACdC,EAAE,EAAEC,4BAAU;EACdC,IAAI,EAAEC,qBAAY;EAClBC,MAAM,EAAEC,uBAAc;EACtBC,KAAK,EAAEC,sBAAa;EACpBC,QAAQ,EAAEC,yBAAgB;EAC1BC,SAAS,EAAEC;AACf,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA/B,OAAA,GAEaC,QAAQ","ignoreList":[]}

package/lib/cjs/components/skeleton/skeleton-provider/SkeletonProvider.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSkeletonContext = exports.useSkeletonConfig = exports.useSkeletonAnimation = exports.default = exports.SkeletonContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _chaynsApi = require("chayns-api");
+var _types = require("../types");
+var _react2 = require("motion/react");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const SkeletonContext = exports.SkeletonContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+SkeletonContext.displayName = 'SkeletonContext';
+const useSkeletonConfig = ({
+  highlightColor,
+  baseColor,
+  animationType = _types.SkeletonAnimationType.PULSE,
+  borderRadius = 4
+}) => {
+  const {
+    colorMode
+  } = (0, _chaynsApi.useSite)();
+  const progress = (0, _react2.useMotionValue)(0);
+  (0, _react.useEffect)(() => {
+    const controls = (0, _react2.animate)(progress, 1, {
+      duration: 2.4,
+      repeat: Infinity,
+      repeatType: 'loop',
+      ease: 'linear'
+    });
+    return controls.stop;
+  }, [progress]);
+  const defaultHighlightColor = colorMode === _chaynsApi.ColorMode.Dark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)';
+  const defaultBaseColor = colorMode === _chaynsApi.ColorMode.Dark ? '#262626' : '#e5e5e5';
+  return {
+    animationType,
+    borderRadius,
+    baseColor: baseColor ?? defaultBaseColor,
+    highlightColor: highlightColor ?? defaultHighlightColor,
+    progress
+  };
+};
+exports.useSkeletonConfig = useSkeletonConfig;
+const useSkeletonAnimation = () => {
+  const {
+    animationType,
+    progress
+  } = useSkeletonContext();
+  const opacity = (0, _react2.useTransform)(progress, [0, 0.5, 1], [0.06, 0.18, 0.06]);
+  const x = (0, _react2.useTransform)(progress, [0, 1], ['-100%', '100%']);
+  if (animationType === _types.SkeletonAnimationType.PULSE) {
+    return {
+      opacity
+    };
+  }
+  return {
+    x
+  };
+};
+exports.useSkeletonAnimation = useSkeletonAnimation;
+const useSkeletonContext = () => {
+  const defaultValues = useSkeletonConfig({});
+  const context = (0, _react.useContext)(SkeletonContext);
+  if (!context) {
+    return defaultValues;
+  }
+  return context;
+};
+exports.useSkeletonContext = useSkeletonContext;
+const SkeletonProvider = ({
+  animationType = _types.SkeletonAnimationType.PULSE,
+  baseColor,
+  highlightColor,
+  borderRadius = 4,
+  children
+}) => {
+  const value = useSkeletonConfig({
+    baseColor,
+    borderRadius,
+    highlightColor,
+    animationType
+  });
+  return /*#__PURE__*/_react.default.createElement(SkeletonContext.Provider, {
+    value: value
+  }, children);
+};
+SkeletonProvider.displayName = 'Skeleton.Config';
+var _default = exports.default = SkeletonProvider;
+//# sourceMappingURL=SkeletonProvider.js.map

package/lib/cjs/components/skeleton/skeleton-provider/SkeletonProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonProvider.js","names":["_react","_interopRequireWildcard","require","_chaynsApi","_types","_react2","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SkeletonContext","exports","createContext","undefined","displayName","useSkeletonConfig","highlightColor","baseColor","animationType","SkeletonAnimationType","PULSE","borderRadius","colorMode","useSite","progress","useMotionValue","useEffect","controls","animate","duration","repeat","Infinity","repeatType","ease","stop","defaultHighlightColor","ColorMode","Dark","defaultBaseColor","useSkeletonAnimation","useSkeletonContext","opacity","useTransform","x","defaultValues","context","useContext","SkeletonProvider","children","value","createElement","Provider","_default"],"sources":["../../../../../src/components/skeleton/skeleton-provider/SkeletonProvider.tsx"],"sourcesContent":["import React, { createContext, FC, ReactNode, useContext, useEffect } from 'react';\nimport { ColorMode, useSite } from 'chayns-api';\nimport { SkeletonAnimationType } from '../types';\nimport { animate, useMotionValue, MotionValue, useTransform } from 'motion/react';\n\nexport interface ISkeletonContext {\n    animationType?: SkeletonAnimationType;\n    borderRadius?: number | string;\n    baseColor?: string;\n    highlightColor?: string;\n    progress?: MotionValue<number>;\n}\n\nexport const SkeletonContext = createContext<ISkeletonContext | undefined>(undefined);\n\nSkeletonContext.displayName = 'SkeletonContext';\n\nexport const useSkeletonConfig = ({\n    highlightColor,\n    baseColor,\n    animationType = SkeletonAnimationType.PULSE,\n    borderRadius = 4,\n}: ISkeletonContext) => {\n    const { colorMode } = useSite();\n\n    const progress = useMotionValue(0);\n\n    useEffect(() => {\n        const controls = animate(progress, 1, {\n            duration: 2.4,\n            repeat: Infinity,\n            repeatType: 'loop',\n            ease: 'linear',\n        });\n\n        return controls.stop;\n    }, [progress]);\n\n    const defaultHighlightColor =\n        colorMode === ColorMode.Dark ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 1)';\n\n    const defaultBaseColor = colorMode === ColorMode.Dark ? '#262626' : '#e5e5e5';\n\n    return {\n        animationType,\n        borderRadius,\n        baseColor: baseColor ?? defaultBaseColor,\n        highlightColor: highlightColor ?? defaultHighlightColor,\n        progress,\n    };\n};\n\nexport const useSkeletonAnimation = () => {\n    const { animationType, progress } = useSkeletonContext();\n\n    const opacity = useTransform(progress, [0, 0.5, 1], [0.06, 0.18, 0.06]);\n\n    const x = useTransform(progress, [0, 1], ['-100%', '100%']);\n\n    if (animationType === SkeletonAnimationType.PULSE) {\n        return { opacity };\n    }\n\n    return { x };\n};\n\nexport const useSkeletonContext = () => {\n    const defaultValues = useSkeletonConfig({});\n\n    const context = useContext(SkeletonContext);\n\n    if (!context) {\n        return defaultValues;\n    }\n\n    return context as Required<ISkeletonContext>;\n};\n\nexport interface SkeletonProviderProps extends ISkeletonContext {\n    children: ReactNode;\n}\n\nconst SkeletonProvider: FC<SkeletonProviderProps> = ({\n    animationType = SkeletonAnimationType.PULSE,\n    baseColor,\n    highlightColor,\n    borderRadius = 4,\n    children,\n}) => {\n    const value = useSkeletonConfig({ baseColor, borderRadius, highlightColor, animationType });\n\n    return <SkeletonContext.Provider value={value}>{children}</SkeletonContext.Provider>;\n};\n\nSkeletonProvider.displayName = 'Skeleton.Config';\n\nexport default SkeletonProvider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/skeleton/types.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkeletonAnimationType = void 0;
+let SkeletonAnimationType = exports.SkeletonAnimationType = /*#__PURE__*/function (SkeletonAnimationType) {
+  SkeletonAnimationType["SHIMMER"] = "SHIMMER";
+  SkeletonAnimationType["PULSE"] = "PULSE";
+  SkeletonAnimationType["NONE"] = "NONE";
+  return SkeletonAnimationType;
+}({});
+//# sourceMappingURL=types.js.map

package/lib/cjs/components/skeleton/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["SkeletonAnimationType","exports"],"sources":["../../../../src/components/skeleton/types.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nexport enum SkeletonAnimationType {\n    SHIMMER = 'SHIMMER',\n    PULSE = 'PULSE',\n    NONE = 'NONE',\n}\n\nexport interface BaseSkeletonConfig {\n    animationType?: SkeletonAnimationType;\n    borderRadius?: number | string;\n    baseColor?: string;\n    highlightColor?: string;\n    className?: string;\n    style?: CSSProperties;\n}\n"],"mappings":";;;;;;IAEYA,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,0BAArBA,qBAAqB;EAArBA,qBAAqB;EAArBA,qBAAqB;EAArBA,qBAAqB;EAAA,OAArBA,qBAAqB;AAAA","ignoreList":[]}

package/lib/cjs/components/skeleton/variants/accordion-skeleton/AccordionSkeleton.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _AccordionSkeleton = require("./AccordionSkeleton.styles");
+var _BoxSkeleton = _interopRequireDefault(require("../box-skeleton/BoxSkeleton"));
+var _SkeletonProvider = _interopRequireWildcard(require("../../skeleton-provider/SkeletonProvider"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const AccordionSkeleton = /*#__PURE__*/(0, _react.forwardRef)(({
+  className,
+  baseColor,
+  highlightColor,
+  style,
+  animationType,
+  borderRadius
+}, ref) => {
+  const context = (0, _SkeletonProvider.useSkeletonContext)();
+  return /*#__PURE__*/_react.default.createElement(_AccordionSkeleton.StyledAccordionSkeleton, {
+    className: className,
+    style: style,
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement(_SkeletonProvider.default, {
+    highlightColor: highlightColor ?? context.highlightColor,
+    baseColor: baseColor ?? context.baseColor,
+    animationType: animationType ?? context.animationType,
+    borderRadius: borderRadius ?? context.borderRadius
+  }, /*#__PURE__*/_react.default.createElement(_BoxSkeleton.default, {
+    height: 16,
+    width: 16
+  }), /*#__PURE__*/_react.default.createElement(_BoxSkeleton.default, {
+    height: 22,
+    width: "60%"
+  })));
+});
+AccordionSkeleton.displayName = 'Skeleton.Accordion';
+var _default = exports.default = AccordionSkeleton;
+//# sourceMappingURL=AccordionSkeleton.js.map

package/lib/cjs/components/skeleton/variants/accordion-skeleton/AccordionSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionSkeleton.js","names":["_react","_interopRequireWildcard","require","_AccordionSkeleton","_BoxSkeleton","_interopRequireDefault","_SkeletonProvider","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AccordionSkeleton","forwardRef","className","baseColor","highlightColor","style","animationType","borderRadius","ref","context","useSkeletonContext","createElement","StyledAccordionSkeleton","height","width","displayName","_default","exports"],"sources":["../../../../../../src/components/skeleton/variants/accordion-skeleton/AccordionSkeleton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { BaseSkeletonConfig } from '../../types';\nimport { StyledAccordionSkeleton } from './AccordionSkeleton.styles';\nimport BoxSkeleton from '../box-skeleton/BoxSkeleton';\nimport SkeletonProvider, { useSkeletonContext } from '../../skeleton-provider/SkeletonProvider';\n\nconst AccordionSkeleton = forwardRef<HTMLDivElement, BaseSkeletonConfig>(\n    ({ className, baseColor, highlightColor, style, animationType, borderRadius }, ref) => {\n        const context = useSkeletonContext();\n\n        return (\n            <StyledAccordionSkeleton className={className} style={style} ref={ref}>\n                <SkeletonProvider\n                    highlightColor={highlightColor ?? context.highlightColor}\n                    baseColor={baseColor ?? context.baseColor}\n                    animationType={animationType ?? context.animationType}\n                    borderRadius={borderRadius ?? context.borderRadius}\n                >\n                    <BoxSkeleton height={16} width={16} />\n                    <BoxSkeleton height={22} width=\"60%\" />\n                </SkeletonProvider>\n            </StyledAccordionSkeleton>\n        );\n    },\n);\n\nAccordionSkeleton.displayName = 'Skeleton.Accordion';\n\nexport default AccordionSkeleton;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,kBAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAL,uBAAA,CAAAC,OAAA;AAAgG,SAAAG,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAEhG,MAAMgB,iBAAiB,gBAAG,IAAAC,iBAAU,EAChC,CAAC;EAAEC,SAAS;EAAEC,SAAS;EAAEC,cAAc;EAAEC,KAAK;EAAEC,aAAa;EAAEC;AAAa,CAAC,EAAEC,GAAG,KAAK;EACnF,MAAMC,OAAO,GAAG,IAAAC,oCAAkB,EAAC,CAAC;EAEpC,oBACIpC,MAAA,CAAAS,OAAA,CAAA4B,aAAA,CAAClC,kBAAA,CAAAmC,uBAAuB;IAACV,SAAS,EAAEA,SAAU;IAACG,KAAK,EAAEA,KAAM;IAACG,GAAG,EAAEA;EAAI,gBAClElC,MAAA,CAAAS,OAAA,CAAA4B,aAAA,CAAC/B,iBAAA,CAAAG,OAAgB;IACbqB,cAAc,EAAEA,cAAc,IAAIK,OAAO,CAACL,cAAe;IACzDD,SAAS,EAAEA,SAAS,IAAIM,OAAO,CAACN,SAAU;IAC1CG,aAAa,EAAEA,aAAa,IAAIG,OAAO,CAACH,aAAc;IACtDC,YAAY,EAAEA,YAAY,IAAIE,OAAO,CAACF;EAAa,gBAEnDjC,MAAA,CAAAS,OAAA,CAAA4B,aAAA,CAACjC,YAAA,CAAAK,OAAW;IAAC8B,MAAM,EAAE,EAAG;IAACC,KAAK,EAAE;EAAG,CAAE,CAAC,eACtCxC,MAAA,CAAAS,OAAA,CAAA4B,aAAA,CAACjC,YAAA,CAAAK,OAAW;IAAC8B,MAAM,EAAE,EAAG;IAACC,KAAK,EAAC;EAAK,CAAE,CACxB,CACG,CAAC;AAElC,CACJ,CAAC;AAEDd,iBAAiB,CAACe,WAAW,GAAG,oBAAoB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAlC,OAAA,GAEtCiB,iBAAiB","ignoreList":[]}