@chayns-components/core 5.0.0-beta.1001 → 5.0.0-beta.1003

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/lib/cjs/components/search-input/SearchInput.js +30 -22
  2. package/lib/cjs/components/search-input/SearchInput.js.map +1 -1
  3. package/lib/cjs/components/search-input/SearchInput.styles.js +8 -15
  4. package/lib/cjs/components/search-input/SearchInput.styles.js.map +1 -1
  5. package/lib/esm/components/search-input/SearchInput.js +31 -23
  6. package/lib/esm/components/search-input/SearchInput.js.map +1 -1
  7. package/lib/esm/components/search-input/SearchInput.styles.js +7 -17
  8. package/lib/esm/components/search-input/SearchInput.styles.js.map +1 -1
  9. package/lib/types/components/search-input/SearchInput.styles.d.ts +3 -3
  10. package/package.json +2 -2
package/lib/cjs/components/search-input/SearchInput.js CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _framerMotion = require("framer-motion");
8
8
  var _react = _interopRequireWildcard(require("react"));
9
+ var _styledComponents = require("styled-components");
9
10
  var _Icon = _interopRequireDefault(require("../icon/Icon"));
10
11
  var _Input = _interopRequireWildcard(require("../input/Input"));
11
12
  var _SearchInput = require("./SearchInput.styles");
@@ -24,6 +25,7 @@ const SearchInput = ({
24
25
  }) => {
25
26
  const [isSearchInputActive, setIsSearchInputActive] = (0, _react.useState)(isActive ?? (typeof value === 'string' && value.trim() !== ''));
26
27
  const inputRef = (0, _react.useRef)(null);
28
+ const theme = (0, _styledComponents.useTheme)();
27
29
  const handleBackIconClick = (0, _react.useCallback)(() => setIsSearchInputActive(false), []);
28
30
  const handleSearchIconClick = (0, _react.useCallback)(() => setIsSearchInputActive(true), []);
29
31
  (0, _react.useEffect)(() => {
@@ -43,7 +45,30 @@ const SearchInput = ({
43
45
  return /*#__PURE__*/_react.default.createElement(_SearchInput.StyledSearchInput, {
44
46
  className: "beta-chayns-search-input",
45
47
  $size: size
46
- }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
48
+ }, /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
49
+ initial: false
50
+ }, /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
51
+ animate: {
52
+ opacity: 1
53
+ },
54
+ exit: {
55
+ opacity: 0,
56
+ position: 'absolute'
57
+ },
58
+ initial: {
59
+ opacity: 0
60
+ },
61
+ key: isSearchInputActive ? 'backIcon' : 'searchIcon',
62
+ transition: {
63
+ duration: 0.3
64
+ },
65
+ id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
66
+ }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
67
+ color: iconColor,
68
+ icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
69
+ onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
70
+ size: 18
71
+ })))), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
47
72
  initial: false
48
73
  }, isSearchInputActive && /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputContentWrapper, {
49
74
  animate: {
@@ -63,6 +88,10 @@ const SearchInput = ({
63
88
  duration: 0.3
64
89
  }
65
90
  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
91
+ leftElement: /*#__PURE__*/_react.default.createElement(_Icon.default, {
92
+ color: theme.text,
93
+ icons: ['far fa-search']
94
+ }),
66
95
  onChange: onChange,
67
96
  onKeyDown: onKeyDown,
68
97
  placeholder: placeholder,
@@ -70,27 +99,6 @@ const SearchInput = ({
70
99
  shouldShowClearIcon: true,
71
100
  size: size,
72
101
  value: value
73
- })), /*#__PURE__*/_react.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
74
- animate: {
75
- opacity: 1
76
- },
77
- exit: {
78
- opacity: 0,
79
- position: 'absolute'
80
- },
81
- initial: {
82
- opacity: 0
83
- },
84
- key: isSearchInputActive ? 'backIcon' : 'searchIcon',
85
- transition: {
86
- duration: 0.3
87
- },
88
- id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
89
- }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
90
- color: iconColor,
91
- icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search'],
92
- onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
93
- size: 18
94
102
  }))));
95
103
  };
96
104
  SearchInput.displayName = 'SearchInput';
package/lib/cjs/components/search-input/SearchInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_Icon","_interopRequireDefault","_Input","_SearchInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","InputSize","Medium","value","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","createElement","StyledSearchInput","className","$size","AnimatePresence","initial","StyledMotionSearchInputContentWrapper","animate","opacity","width","exit","key","transition","duration","ref","shouldShowClearIcon","StyledMotionSearchInputIconWrapperContent","position","id","color","icons","onClick","displayName","_default","exports"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n FC,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\n StyledMotionSearchInputIconWrapperContent,\n StyledSearchInput,\n} from './SearchInput.styles';\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 * 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\nconst SearchInput: FC<SearchInputProps> = ({\n iconColor,\n isActive,\n onActiveChange,\n onChange,\n onKeyDown,\n placeholder,\n size = InputSize.Medium,\n value,\n}) => {\n const [isSearchInputActive, setIsSearchInputActive] = useState(\n isActive ?? (typeof value === 'string' && value.trim() !== ''),\n );\n\n const inputRef = useRef<InputRef>(null);\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 return (\n <StyledSearchInput className=\"beta-chayns-search-input\" $size={size}>\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\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 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={isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'}\n >\n <Icon\n color={iconColor}\n icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n onClick={isSearchInputActive ? handleBackIconClick : handleSearchIconClick}\n size={18}\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n </StyledSearchInput>\n );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AASA,IAAAG,KAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAH,uBAAA,CAAAF,OAAA;AACA,IAAAM,YAAA,GAAAN,OAAA;AAI8B,SAAAI,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAqC9B,MAAMW,WAAiC,GAAGA,CAAC;EACvCC,SAAS;EACTC,QAAQ;EACRC,cAAc;EACdC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXC,IAAI,GAAGC,gBAAS,CAACC,MAAM;EACvBC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG,IAAAC,eAAQ,EAC1DX,QAAQ,KAAK,OAAOQ,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACI,IAAI,CAAC,CAAC,KAAK,EAAE,CACjE,CAAC;EAED,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAW,IAAI,CAAC;EAEvC,MAAMC,mBAAmB,GAAG,IAAAC,kBAAW,EAAC,MAAMN,sBAAsB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;EAEhF,MAAMO,qBAAqB,GAAG,IAAAD,kBAAW,EAAC,MAAMN,sBAAsB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAEjF,IAAAQ,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAOjB,cAAc,KAAK,UAAU,EAAE;MACtCA,cAAc,CAACQ,mBAAmB,CAAC;IACvC;IAEA,IAAIA,mBAAmB,EAAE;MAAA,IAAAU,iBAAA;MACrB,CAAAA,iBAAA,GAAAN,QAAQ,CAACO,OAAO,cAAAD,iBAAA,eAAhBA,iBAAA,CAAkBE,KAAK,CAAC,CAAC;IAC7B;EACJ,CAAC,EAAE,CAACZ,mBAAmB,EAAER,cAAc,CAAC,CAAC;EAEzC,IAAAiB,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAOlB,QAAQ,KAAK,SAAS,EAAE;MAC/BU,sBAAsB,CAACV,QAAQ,CAAC;IACpC;EACJ,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,oBACI5B,MAAA,CAAAQ,OAAA,CAAA0C,aAAA,CAAC7C,YAAA,CAAA8C,iBAAiB;IAACC,SAAS,EAAC,0BAA0B;IAACC,KAAK,EAAEpB;EAAK,gBAChEjC,MAAA,CAAAQ,OAAA,CAAA0C,aAAA,CAACpD,aAAA,CAAAwD,eAAe;IAACC,OAAO,EAAE;EAAM,GAC3BlB,mBAAmB,iBAChBrC,MAAA,CAAAQ,OAAA,CAAA0C,aAAA,CAAC7C,YAAA,CAAAmD,qCAAqC;IAClCC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAO,CAAE;IACvCC,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAE;IAC/BJ,OAAO,EAAE;MAAEG,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAE;IAClCE,GAAG,EAAC,2BAA2B;IAC/BC,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,gBAE9B/D,MAAA,CAAAQ,OAAA,CAAA0C,aAAA,CAAC9C,MAAA,CAAAI,OAAK;IACFsB,QAAQ,EAAEA,QAAS;IACnBC,SAAS,EAAEA,SAAU;IACrBC,WAAW,EAAEA,WAAY;IACzBgC,GAAG,EAAEvB,QAAS;IACdwB,mBAAmB;IACnBhC,IAAI,EAAEA,IAAK;IACXG,KAAK,EAAEA;EAAM,CAChB,CACkC,CAC1C,eACDpC,MAAA,CAAAQ,OAAA,CAAA0C,aAAA,CAAC7C,YAAA,CAAA6D,yCAAyC;IACtCT,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxBE,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAES,QAAQ,EAAE;IAAW,CAAE;IAC3CZ,OAAO,EAAE;MAAEG,OAAO,EAAE;IAAE,CAAE;IACxBG,GAAG,EAAExB,mBAAmB,GAAG,UAAU,GAAG,YAAa;IACrDyB,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI,CAAE;IAC9BK,EAAE,EAAE/B,mBAAmB,GAAG,uBAAuB,GAAG;EAA0B,gBAE9ErC,MAAA,CAAAQ,OAAA,CAAA0C,aAAA,CAAChD,KAAA,CAAAM,OAAI;IACD6D,KAAK,EAAE1C,SAAU;IACjB2C,KAAK,EAAEjC,mBAAmB,GAAG,CAAC,aAAa,CAAC,GAAG,CAAC,cAAc,CAAE;IAChEkC,OAAO,EAAElC,mBAAmB,GAAGM,mBAAmB,GAAGE,qBAAsB;IAC3EZ,IAAI,EAAE;EAAG,CACZ,CACsC,CAC9B,CACF,CAAC;AAE5B,CAAC;AAEDP,WAAW,CAAC8C,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAlE,OAAA,GAEzBkB,WAAW","ignoreList":[]}
1
+ {"version":3,"file":"SearchInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_styledComponents","_Icon","_interopRequireDefault","_Input","_SearchInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","InputSize","Medium","value","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","theme","useTheme","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","createElement","StyledSearchInput","className","$size","StyledMotionSearchInputIconWrapper","AnimatePresence","initial","StyledMotionSearchInputIconWrapperContent","animate","opacity","exit","position","key","transition","duration","id","color","icons","onClick","StyledMotionSearchInputContentWrapper","width","leftElement","text","ref","shouldShowClearIcon","displayName","_default","exports"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n FC,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\n StyledMotionSearchInputIconWrapper,\n StyledMotionSearchInputIconWrapperContent,\n StyledSearchInput,\n} from './SearchInput.styles';\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 * 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\nconst SearchInput: FC<SearchInputProps> = ({\n iconColor,\n isActive,\n onActiveChange,\n onChange,\n onKeyDown,\n placeholder,\n size = InputSize.Medium,\n value,\n}) => {\n const [isSearchInputActive, setIsSearchInputActive] = useState(\n isActive ?? (typeof value === 'string' && value.trim() !== ''),\n );\n\n const inputRef = useRef<InputRef>(null);\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 return (\n <StyledSearchInput className=\"beta-chayns-search-input\" $size={size}>\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 >\n <Icon\n color={iconColor}\n icons={isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search']}\n onClick={\n isSearchInputActive ? handleBackIconClick : handleSearchIconClick\n }\n size={18}\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n </StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\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 leftElement={<Icon color={theme.text} icons={['far fa-search']} />}\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 </StyledSearchInput>\n );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
package/lib/cjs/components/search-input/SearchInput.styles.js CHANGED
@@ -3,33 +3,26 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.StyledSearchInput = exports.StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputContentWrapper = void 0;
6
+ exports.StyledSearchInput = exports.StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapper = exports.StyledMotionSearchInputContentWrapper = void 0;
7
7
  var _framerMotion = require("framer-motion");
8
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
9
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
10
  const StyledSearchInput = exports.StyledSearchInput = _styledComponents.default.div`
11
- display: flex;
12
11
  align-items: center;
13
- justify-content: center;
14
- aspect-ratio: 1;
15
- border-radius: 3px;
16
-
12
+ display: flex;
13
+ gap: 8px;
17
14
  height: ${({
18
15
  $size
19
16
  }) => $size === 'medium' ? '42px' : '32px'};
20
-
21
- &:hover {
22
- background-color: ${({
23
- theme
24
- }) => theme[103]};
25
- }
17
+ justify-content: flex-end;
18
+ width: 100%;
26
19
  `;
27
20
  const StyledMotionSearchInputContentWrapper = exports.StyledMotionSearchInputContentWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
28
- position: absolute;
29
- top: 0;
30
- right: 0;
31
21
  overflow: hidden;
32
22
  `;
23
+ const StyledMotionSearchInputIconWrapper = exports.StyledMotionSearchInputIconWrapper = _styledComponents.default.div`
24
+ width: 18px;
25
+ `;
33
26
  const StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapperContent = (0, _styledComponents.default)(_framerMotion.motion.div)`
34
27
  display: flex;
35
28
  `;
package/lib/cjs/components/search-input/SearchInput.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchInput.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSearchInput","exports","styled","div","$size","theme","StyledMotionSearchInputContentWrapper","motion","StyledMotionSearchInputIconWrapperContent"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = WithTheme<{\n $size: InputSize;\n}>;\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n border-radius: 3px;\n\n height: ${({ $size }: StyledSearchInputProps) => ($size === 'medium' ? '42px' : '32px')};\n\n &:hover {\n background-color: ${({ theme }: StyledSearchInputProps) => theme[103]};\n }\n`;\n\nexport const StyledMotionSearchInputContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n position: absolute;\n top: 0;\n right: 0;\n overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAA2B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAA8B,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AAC3F;AACA;AACA,4BAA4B,CAAC;EAAEC;AAA8B,CAAC,KAAKA,KAAK,CAAC,GAAG,CAAC;AAC7E;AACA,CAAC;AAEM,MAAMC,qCAAqC,GAAAL,OAAA,CAAAK,qCAAA,GAAG,IAAAJ,yBAAM,EAACK,oBAAM,CAACJ,GAAG,CAAqB;AAC3F;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMK,yCAAyC,GAAAP,OAAA,CAAAO,yCAAA,GAAG,IAAAN,yBAAM,EAACK,oBAAM,CAACJ,GAAG,CAAqB;AAC/F;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"SearchInput.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSearchInput","exports","styled","div","$size","StyledMotionSearchInputContentWrapper","motion","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = {\n $size: InputSize;\n};\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n align-items: center;\n display: flex;\n gap: 8px;\n height: ${({ $size }) => ($size === 'medium' ? '42px' : '32px')};\n justify-content: flex-end;\n width: 100%;\n`;\n\nexport const StyledMotionSearchInputContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapper = styled.div`\n width: 18px;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAA2B;AACnE;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACnE;AACA;AACA,CAAC;AAEM,MAAMC,qCAAqC,GAAAJ,OAAA,CAAAI,qCAAA,GAAG,IAAAH,yBAAM,EAACI,oBAAM,CAACH,GAAG,CAAqB;AAC3F;AACA,CAAC;AAEM,MAAMI,kCAAkC,GAAAN,OAAA,CAAAM,kCAAA,GAAGL,yBAAM,CAACC,GAAG;AAC5D;AACA,CAAC;AAEM,MAAMK,yCAAyC,GAAAP,OAAA,CAAAO,yCAAA,GAAG,IAAAN,yBAAM,EAACI,oBAAM,CAACH,GAAG,CAAqB;AAC/F;AACA,CAAC","ignoreList":[]}
package/lib/esm/components/search-input/SearchInput.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import { AnimatePresence } from 'framer-motion';
2
2
  import React, { useCallback, useEffect, useRef, useState } from 'react';
3
+ import { useTheme } from 'styled-components';
3
4
  import Icon from '../icon/Icon';
4
5
  import Input, { InputSize } from '../input/Input';
5
- import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput } from './SearchInput.styles';
6
+ import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput } from './SearchInput.styles';
6
7
  const SearchInput = _ref => {
7
8
  let {
8
9
  iconColor,
@@ -16,6 +17,7 @@ const SearchInput = _ref => {
16
17
  } = _ref;
17
18
  const [isSearchInputActive, setIsSearchInputActive] = useState(isActive ?? (typeof value === 'string' && value.trim() !== ''));
18
19
  const inputRef = useRef(null);
20
+ const theme = useTheme();
19
21
  const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);
20
22
  const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);
21
23
  useEffect(() => {
@@ -34,7 +36,30 @@ const SearchInput = _ref => {
34
36
  return /*#__PURE__*/React.createElement(StyledSearchInput, {
35
37
  className: "beta-chayns-search-input",
36
38
  $size: size
37
- }, /*#__PURE__*/React.createElement(AnimatePresence, {
39
+ }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/React.createElement(AnimatePresence, {
40
+ initial: false
41
+ }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
42
+ animate: {
43
+ opacity: 1
44
+ },
45
+ exit: {
46
+ opacity: 0,
47
+ position: 'absolute'
48
+ },
49
+ initial: {
50
+ opacity: 0
51
+ },
52
+ key: isSearchInputActive ? 'backIcon' : 'searchIcon',
53
+ transition: {
54
+ duration: 0.3
55
+ },
56
+ id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
57
+ }, /*#__PURE__*/React.createElement(Icon, {
58
+ color: iconColor,
59
+ icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
60
+ onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
61
+ size: 18
62
+ })))), /*#__PURE__*/React.createElement(AnimatePresence, {
38
63
  initial: false
39
64
  }, isSearchInputActive && /*#__PURE__*/React.createElement(StyledMotionSearchInputContentWrapper, {
40
65
  animate: {
@@ -54,6 +79,10 @@ const SearchInput = _ref => {
54
79
  duration: 0.3
55
80
  }
56
81
  }, /*#__PURE__*/React.createElement(Input, {
82
+ leftElement: /*#__PURE__*/React.createElement(Icon, {
83
+ color: theme.text,
84
+ icons: ['far fa-search']
85
+ }),
57
86
  onChange: onChange,
58
87
  onKeyDown: onKeyDown,
59
88
  placeholder: placeholder,
@@ -61,27 +90,6 @@ const SearchInput = _ref => {
61
90
  shouldShowClearIcon: true,
62
91
  size: size,
63
92
  value: value
64
- })), /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
65
- animate: {
66
- opacity: 1
67
- },
68
- exit: {
69
- opacity: 0,
70
- position: 'absolute'
71
- },
72
- initial: {
73
- opacity: 0
74
- },
75
- key: isSearchInputActive ? 'backIcon' : 'searchIcon',
76
- transition: {
77
- duration: 0.3
78
- },
79
- id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
80
- }, /*#__PURE__*/React.createElement(Icon, {
81
- color: iconColor,
82
- icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search'],
83
- onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
84
- size: 18
85
93
  }))));
86
94
  };
87
95
  SearchInput.displayName = 'SearchInput';
package/lib/esm/components/search-input/SearchInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","useCallback","useEffect","useRef","useState","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","SearchInput","_ref","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","Medium","value","isSearchInputActive","setIsSearchInputActive","trim","inputRef","handleBackIconClick","handleSearchIconClick","current","focus","createElement","className","$size","initial","animate","opacity","width","exit","key","transition","duration","ref","shouldShowClearIcon","position","id","color","icons","onClick","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n FC,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\n StyledMotionSearchInputIconWrapperContent,\n StyledSearchInput,\n} from './SearchInput.styles';\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 * 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\nconst SearchInput: FC<SearchInputProps> = ({\n iconColor,\n isActive,\n onActiveChange,\n onChange,\n onKeyDown,\n placeholder,\n size = InputSize.Medium,\n value,\n}) => {\n const [isSearchInputActive, setIsSearchInputActive] = useState(\n isActive ?? (typeof value === 'string' && value.trim() !== ''),\n );\n\n const inputRef = useRef<InputRef>(null);\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 return (\n <StyledSearchInput className=\"beta-chayns-search-input\" $size={size}>\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\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 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={isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'}\n >\n <Icon\n color={iconColor}\n icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n onClick={isSearchInputActive ? handleBackIconClick : handleSearchIconClick}\n size={18}\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n </StyledSearchInput>\n );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","useCallback","useEffect","useRef","useState","useTheme","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","SearchInput","_ref","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","Medium","value","isSearchInputActive","setIsSearchInputActive","trim","inputRef","theme","handleBackIconClick","handleSearchIconClick","current","focus","createElement","className","$size","initial","animate","opacity","exit","position","key","transition","duration","id","color","icons","onClick","width","leftElement","text","ref","shouldShowClearIcon","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n FC,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\n StyledMotionSearchInputIconWrapper,\n StyledMotionSearchInputIconWrapperContent,\n StyledSearchInput,\n} from './SearchInput.styles';\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 * 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\nconst SearchInput: FC<SearchInputProps> = ({\n iconColor,\n isActive,\n onActiveChange,\n onChange,\n onKeyDown,\n placeholder,\n size = InputSize.Medium,\n value,\n}) => {\n const [isSearchInputActive, setIsSearchInputActive] = useState(\n isActive ?? (typeof value === 'string' && value.trim() !== ''),\n );\n\n const inputRef = useRef<InputRef>(null);\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 return (\n <StyledSearchInput className=\"beta-chayns-search-input\" $size={size}>\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 >\n <Icon\n color={iconColor}\n icons={isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search']}\n onClick={\n isSearchInputActive ? handleBackIconClick : handleSearchIconClick\n }\n size={18}\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n </StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\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 leftElement={<Icon color={theme.text} icons={['far fa-search']} />}\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 </StyledSearchInput>\n );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
package/lib/esm/components/search-input/SearchInput.styles.js CHANGED
@@ -1,34 +1,24 @@
1
1
  import { motion } from 'framer-motion';
2
2
  import styled from 'styled-components';
3
3
  export const StyledSearchInput = styled.div`
4
- display: flex;
5
4
  align-items: center;
6
- justify-content: center;
7
- aspect-ratio: 1;
8
- border-radius: 3px;
9
-
5
+ display: flex;
6
+ gap: 8px;
10
7
  height: ${_ref => {
11
8
  let {
12
9
  $size
13
10
  } = _ref;
14
11
  return $size === 'medium' ? '42px' : '32px';
15
12
  }};
16
-
17
- &:hover {
18
- background-color: ${_ref2 => {
19
- let {
20
- theme
21
- } = _ref2;
22
- return theme[103];
23
- }};
24
- }
13
+ justify-content: flex-end;
14
+ width: 100%;
25
15
  `;
26
16
  export const StyledMotionSearchInputContentWrapper = styled(motion.div)`
27
- position: absolute;
28
- top: 0;
29
- right: 0;
30
17
  overflow: hidden;
31
18
  `;
19
+ export const StyledMotionSearchInputIconWrapper = styled.div`
20
+ width: 18px;
21
+ `;
32
22
  export const StyledMotionSearchInputIconWrapperContent = styled(motion.div)`
33
23
  display: flex;
34
24
  `;
package/lib/esm/components/search-input/SearchInput.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchInput.styles.js","names":["motion","styled","StyledSearchInput","div","_ref","$size","_ref2","theme","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapperContent"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = WithTheme<{\n $size: InputSize;\n}>;\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n border-radius: 3px;\n\n height: ${({ $size }: StyledSearchInputProps) => ($size === 'medium' ? '42px' : '32px')};\n\n &:hover {\n background-color: ${({ theme }: StyledSearchInputProps) => theme[103]};\n }\n`;\n\nexport const StyledMotionSearchInputContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n position: absolute;\n top: 0;\n right: 0;\n overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAQtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAA2B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAA8B,CAAC,GAAAD,IAAA;EAAA,OAAMC,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAC3F;AACA;AACA,4BAA4BC,KAAA;EAAA,IAAC;IAAEC;EAA8B,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,GAAG,CAAC;AAAA;AAC7E;AACA,CAAC;AAED,OAAO,MAAMC,qCAAqC,GAAGP,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC3F;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMM,yCAAyC,GAAGR,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC/F;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"SearchInput.styles.js","names":["motion","styled","StyledSearchInput","div","_ref","$size","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = {\n $size: InputSize;\n};\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n align-items: center;\n display: flex;\n gap: 8px;\n height: ${({ $size }) => ($size === 'medium' ? '42px' : '32px')};\n justify-content: flex-end;\n width: 100%;\n`;\n\nexport const StyledMotionSearchInputContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapper = styled.div`\n width: 18px;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAQtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAA2B;AACnE;AACA;AACA;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OAAMC,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AACnE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,qCAAqC,GAAGL,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC3F;AACA,CAAC;AAED,OAAO,MAAMI,kCAAkC,GAAGN,MAAM,CAACE,GAAG;AAC5D;AACA,CAAC;AAED,OAAO,MAAMK,yCAAyC,GAAGP,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC/F;AACA,CAAC","ignoreList":[]}
package/lib/types/components/search-input/SearchInput.styles.d.ts CHANGED
@@ -1,8 +1,7 @@
1
- import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
2
1
  import type { InputSize } from '../input/Input';
3
- type StyledSearchInputProps = WithTheme<{
2
+ type StyledSearchInputProps = {
4
3
  $size: InputSize;
5
- }>;
4
+ };
6
5
  export declare const StyledSearchInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSearchInputProps>> & string;
7
6
  export declare const StyledMotionSearchInputContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
8
7
  slot?: string | undefined;
@@ -270,6 +269,7 @@ export declare const StyledMotionSearchInputContentWrapper: import("styled-compo
270
269
  }, {
271
270
  theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
272
271
  }>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
272
+ export declare const StyledMotionSearchInputIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
273
273
  export declare const StyledMotionSearchInputIconWrapperContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
274
274
  slot?: string | undefined;
275
275
  title?: string | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.1001",
3
+ "version": "5.0.0-beta.1003",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -88,5 +88,5 @@
88
88
  "publishConfig": {
89
89
  "access": "public"
90
90
  },
91
- "gitHead": "f468aac7b0520920e4f35c9255279ffe48471ea5"
91
+ "gitHead": "afec8c706e8484aea963cb6da1759f7fb3b5539a"
92
92
  }