@chayns-components/core 5.0.0-beta.903 → 5.0.0-beta.907
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.
|
@@ -87,6 +87,7 @@ const StyledComboBoxPlaceholder = exports.StyledComboBoxPlaceholder = _styledCom
|
|
|
87
87
|
}) => $shouldReduceOpacity ? 0.5 : 1};
|
|
88
88
|
`;
|
|
89
89
|
const StyledComboBoxPrefixAndPlaceholderWrapper = exports.StyledComboBoxPrefixAndPlaceholderWrapper = _styledComponents.default.div`
|
|
90
|
+
align-items: center;
|
|
90
91
|
display: flex;
|
|
91
92
|
`;
|
|
92
93
|
const StyledComboBoxPrefix = exports.StyledComboBoxPrefix = _styledComponents.default.div`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_comboBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","$shouldUseFullWidth","$minWidth","css","StyledComboBoxHeader","$isDisabled","theme","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","ComboBoxDirection","BOTTOM","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","$maxHeight","$overflowY","$browser","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\n\ntype StyledComboBoxProps = WithTheme<{\n $minWidth: number;\n $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n user-select: none;\n position: relative;\n\n ${({ $shouldUseFullWidth, $minWidth }) =>\n $shouldUseFullWidth\n ? css`\n min-width: ${$minWidth}px;\n width: 100%;\n `\n : css`\n min-width: ${$minWidth}px;\n max-width: ${$minWidth}px;\n `}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n $isTouch: boolean;\n $isOpen: boolean;\n $direction: ComboBoxDirection;\n $isDisabled?: boolean;\n $shouldChangeColor: boolean;\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n justify-content: space-between;\n border: 1px solid rgba(160, 160, 160, 0.3);\n padding: 4px 10px;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n background-color: ${({ theme, $shouldChangeColor }: StyledComboBoxHeaderProps) =>\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: background-color 0.2s ease-in-out;\n\n ${({ $shouldShowBigImage }) =>\n $shouldShowBigImage &&\n css`\n height: 42px;\n `}\n\n ${({ $isOpen, $direction }) => {\n if ($isOpen) {\n return $direction === ComboBoxDirection.BOTTOM\n ? css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n `\n : css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n `;\n }\n\n return css`\n border-radius: 3px;\n `;\n }}\n\n ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n !$isTouch &&\n !$isDisabled &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n align-items: center;\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n display: flex;\n gap: 10px;\n opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n display: flex;\n`;\n\nexport const StyledComboBoxPrefix = styled.div`\n flex: 0 0 auto;\n min-width: 32px;\n padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n border: none;\n background-color: transparent;\n width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n align-items: center;\n display: flex;\n margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n $overflowY: CSSProperties['overflowY'];\n $maxHeight: CSSProperties['maxHeight'];\n $direction: ComboBoxDirection;\n $browser: Browser | 'bot' | null | undefined;\n $minWidth: number;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n background: ${({ theme }: StyledComboBoxBodyProps) => theme['101']};\n display: flex;\n position: absolute;\n z-index: 4;\n flex-direction: column;\n border: 1px solid rgba(160, 160, 160, 0.3);\n cursor: pointer;\n max-height: ${({ $maxHeight }) => $maxHeight};\n overflow-y: ${({ $overflowY }) => $overflowY};\n\n min-width: ${({ $minWidth }) => $minWidth - 2}px;\n max-width: ${({ $minWidth }) => $minWidth - 2}px;\n\n ${({ $direction }) => {\n if ($direction === ComboBoxDirection.BOTTOM) {\n return css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }\n\n return css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n position: sticky;\n top: 0;\n border: black 5px;\n cursor: default;\n font-weight: bold;\n display: flex;\n gap: 10px;\n z-index: 10;\n padding: 4px 10px;\n background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_comboBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","$shouldUseFullWidth","$minWidth","css","StyledComboBoxHeader","$isDisabled","theme","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","ComboBoxDirection","BOTTOM","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","$maxHeight","$overflowY","$browser","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\n\ntype StyledComboBoxProps = WithTheme<{\n $minWidth: number;\n $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n user-select: none;\n position: relative;\n\n ${({ $shouldUseFullWidth, $minWidth }) =>\n $shouldUseFullWidth\n ? css`\n min-width: ${$minWidth}px;\n width: 100%;\n `\n : css`\n min-width: ${$minWidth}px;\n max-width: ${$minWidth}px;\n `}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n $isTouch: boolean;\n $isOpen: boolean;\n $direction: ComboBoxDirection;\n $isDisabled?: boolean;\n $shouldChangeColor: boolean;\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n justify-content: space-between;\n border: 1px solid rgba(160, 160, 160, 0.3);\n padding: 4px 10px;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n background-color: ${({ theme, $shouldChangeColor }: StyledComboBoxHeaderProps) =>\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: background-color 0.2s ease-in-out;\n\n ${({ $shouldShowBigImage }) =>\n $shouldShowBigImage &&\n css`\n height: 42px;\n `}\n\n ${({ $isOpen, $direction }) => {\n if ($isOpen) {\n return $direction === ComboBoxDirection.BOTTOM\n ? css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n `\n : css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n `;\n }\n\n return css`\n border-radius: 3px;\n `;\n }}\n\n ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n !$isTouch &&\n !$isDisabled &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n align-items: center;\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n display: flex;\n gap: 10px;\n opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n align-items: center;\n display: flex;\n`;\n\nexport const StyledComboBoxPrefix = styled.div`\n flex: 0 0 auto;\n min-width: 32px;\n padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n border: none;\n background-color: transparent;\n width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n align-items: center;\n display: flex;\n margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n $overflowY: CSSProperties['overflowY'];\n $maxHeight: CSSProperties['maxHeight'];\n $direction: ComboBoxDirection;\n $browser: Browser | 'bot' | null | undefined;\n $minWidth: number;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n background: ${({ theme }: StyledComboBoxBodyProps) => theme['101']};\n display: flex;\n position: absolute;\n z-index: 4;\n flex-direction: column;\n border: 1px solid rgba(160, 160, 160, 0.3);\n cursor: pointer;\n max-height: ${({ $maxHeight }) => $maxHeight};\n overflow-y: ${({ $overflowY }) => $overflowY};\n\n min-width: ${({ $minWidth }) => $minWidth - 2}px;\n max-width: ${({ $minWidth }) => $minWidth - 2}px;\n\n ${({ $direction }) => {\n if ($direction === ComboBoxDirection.BOTTOM) {\n return css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }\n\n return css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n position: sticky;\n top: 0;\n border: black 5px;\n cursor: default;\n font-weight: bold;\n display: flex;\n gap: 10px;\n z-index: 10;\n padding: 4px 10px;\n background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.styles.js","names":["motion","styled","css","ComboBoxDirection","StyledComboBox","div","_ref","$shouldUseFullWidth","$minWidth","StyledComboBoxHeader","_ref2","$isDisabled","_ref3","theme","$shouldChangeColor","colorMode","_ref4","_ref5","$shouldShowBigImage","_ref6","$isOpen","$direction","BOTTOM","_ref7","$isTouch","StyledComboBoxPlaceholder","_ref8","text","_ref9","$shouldReduceOpacity","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","_ref10","_ref11","_ref12","_ref13","$shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","_ref14","_ref15","$maxHeight","_ref16","$overflowY","_ref17","_ref18","_ref19","_ref20","$browser","StyledComboBoxTopic","_ref21","_ref22"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\n\ntype StyledComboBoxProps = WithTheme<{\n $minWidth: number;\n $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n user-select: none;\n position: relative;\n\n ${({ $shouldUseFullWidth, $minWidth }) =>\n $shouldUseFullWidth\n ? css`\n min-width: ${$minWidth}px;\n width: 100%;\n `\n : css`\n min-width: ${$minWidth}px;\n max-width: ${$minWidth}px;\n `}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n $isTouch: boolean;\n $isOpen: boolean;\n $direction: ComboBoxDirection;\n $isDisabled?: boolean;\n $shouldChangeColor: boolean;\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n justify-content: space-between;\n border: 1px solid rgba(160, 160, 160, 0.3);\n padding: 4px 10px;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n background-color: ${({ theme, $shouldChangeColor }: StyledComboBoxHeaderProps) =>\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: background-color 0.2s ease-in-out;\n\n ${({ $shouldShowBigImage }) =>\n $shouldShowBigImage &&\n css`\n height: 42px;\n `}\n\n ${({ $isOpen, $direction }) => {\n if ($isOpen) {\n return $direction === ComboBoxDirection.BOTTOM\n ? css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n `\n : css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n `;\n }\n\n return css`\n border-radius: 3px;\n `;\n }}\n\n ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n !$isTouch &&\n !$isDisabled &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n align-items: center;\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n display: flex;\n gap: 10px;\n opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n display: flex;\n`;\n\nexport const StyledComboBoxPrefix = styled.div`\n flex: 0 0 auto;\n min-width: 32px;\n padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n border: none;\n background-color: transparent;\n width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n align-items: center;\n display: flex;\n margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n $overflowY: CSSProperties['overflowY'];\n $maxHeight: CSSProperties['maxHeight'];\n $direction: ComboBoxDirection;\n $browser: Browser | 'bot' | null | undefined;\n $minWidth: number;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n background: ${({ theme }: StyledComboBoxBodyProps) => theme['101']};\n display: flex;\n position: absolute;\n z-index: 4;\n flex-direction: column;\n border: 1px solid rgba(160, 160, 160, 0.3);\n cursor: pointer;\n max-height: ${({ $maxHeight }) => $maxHeight};\n overflow-y: ${({ $overflowY }) => $overflowY};\n\n min-width: ${({ $minWidth }) => $minWidth - 2}px;\n max-width: ${({ $minWidth }) => $minWidth - 2}px;\n\n ${({ $direction }) => {\n if ($direction === ComboBoxDirection.BOTTOM) {\n return css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }\n\n return css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n position: sticky;\n top: 0;\n border: black 5px;\n cursor: default;\n font-weight: bold;\n display: flex;\n gap: 10px;\n z-index: 10;\n padding: 4px 10px;\n background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AAEtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,iBAAiB,QAAQ,sBAAsB;AASxD,OAAO,MAAMC,cAAc,GAAGH,MAAM,CAACI,GAAwB;AAC7D;AACA;AACA;AACA,MAAMC,IAAA;EAAA,IAAC;IAAEC,mBAAmB;IAAEC;EAAU,CAAC,GAAAF,IAAA;EAAA,OACjCC,mBAAmB,GACbL,GAAG;AACjB,+BAA+BM,SAAS;AACxC;AACA,eAAe,GACDN,GAAG;AACjB,+BAA+BM,SAAS;AACxC,+BAA+BA,SAAS;AACxC,eAAe;AAAA;AACf,CAAC;AAWD,OAAO,MAAMC,oBAAoB,GAAGR,MAAM,CAACI,GAA8B;AACzE;AACA;AACA;AACA;AACA,cAAcK,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OAAM,CAACC,WAAW,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AACzE,wBAAwBC,KAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAA8C,CAAC,GAAAF,KAAA;EAAA,OACzEC,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA;AACzF,eAAeG,KAAA;EAAA,IAAC;IAAEL;EAAY,CAAC,GAAAK,KAAA;EAAA,OAAML,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA;AACA,MAAMM,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OACtBC,mBAAmB,IACnBhB,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,MAAMiB,KAAA,IAA6B;EAAA,IAA5B;IAAEC,OAAO;IAAEC;EAAW,CAAC,GAAAF,KAAA;EACtB,IAAIC,OAAO,EAAE;IACT,OAAOC,UAAU,KAAKlB,iBAAiB,CAACmB,MAAM,GACxCpB,GAAG;AACrB;AACA;AACA,mBAAmB,GACDA,GAAG;AACrB;AACA;AACA,mBAAmB;EACX;EAEA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL;AACA,MAAMqB,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEb,WAAW;IAAEE;EAAiC,CAAC,GAAAU,KAAA;EAAA,OAC1D,CAACC,QAAQ,IACT,CAACb,WAAW,IACZT,GAAG;AACX;AACA,oCAAoCW,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AAAA;AACT,CAAC;AAID,OAAO,MAAMY,yBAAyB,GAAGxB,MAAM,CAACI,GAAmC;AACnF;AACA,aAAaqB,KAAA;EAAA,IAAC;IAAEb;EAAsC,CAAC,GAAAa,KAAA;EAAA,OAAKb,KAAK,CAACc,IAAI;AAAA;AACtE;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OAAMC,oBAAoB,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC7E,CAAC;AAED,OAAO,MAAMC,yCAAyC,GAAG7B,MAAM,CAACI,GAAG;AACnE;AACA,CAAC;AAED,OAAO,MAAM0B,oBAAoB,GAAG9B,MAAM,CAACI,GAAG;AAC9C;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAM2B,mBAAmB,GAAG/B,MAAM,CAACgC,KAAK;AAC/C;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,8BAA8B,GAAGjC,MAAM,CAACkC,GAAwC;AAC7F;AACA,eAAeC,MAAA;EAAA,IAAC;IAAEvB;EAA2C,CAAC,GAAAuB,MAAA;EAAA,OAAKvB,KAAK,CAAC,SAAS,CAAC;AAAA;AACnF,cAAcwB,MAAA;EAAA,IAAC;IAAEnB;EAAoB,CAAC,GAAAmB,MAAA;EAAA,OAAMnB,mBAAmB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAClF,aAAaoB,MAAA;EAAA,IAAC;IAAEpB;EAAoB,CAAC,GAAAoB,MAAA;EAAA,OAAMpB,mBAAmB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AACjF;AACA,MAAMqB,MAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,MAAA;EAAA,OACxBC,qBAAqB,IACrBtC,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC;AAED,OAAO,MAAMuC,yBAAyB,GAAGxC,MAAM,CAACI,GAAG;AACnD;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMqC,wBAAwB,GAAGzC,MAAM,CAACD,MAAM,CAACK,GAAG,CAA0B;AACnF,kBAAkBsC,MAAA;EAAA,IAAC;IAAE9B;EAA+B,CAAC,GAAA8B,MAAA;EAAA,OAAK9B,KAAK,CAAC,KAAK,CAAC;AAAA;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB+B,MAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,MAAA;EAAA,OAAKC,UAAU;AAAA;AAChD,kBAAkBC,MAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,MAAA;EAAA,OAAKC,UAAU;AAAA;AAChD;AACA,iBAAiBC,MAAA;EAAA,IAAC;IAAExC;EAAU,CAAC,GAAAwC,MAAA;EAAA,OAAKxC,SAAS,GAAG,CAAC;AAAA;AACjD,iBAAiByC,MAAA;EAAA,IAAC;IAAEzC;EAAU,CAAC,GAAAyC,MAAA;EAAA,OAAKzC,SAAS,GAAG,CAAC;AAAA;AACjD;AACA,MAAM0C,MAAA,IAAoB;EAAA,IAAnB;IAAE7B;EAAW,CAAC,GAAA6B,MAAA;EACb,IAAI7B,UAAU,KAAKlB,iBAAiB,CAACmB,MAAM,EAAE;IACzC,OAAOpB,GAAG;AACtB;AACA;AACA;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA;AACA;AACA,SAAS;AACL,CAAC;AACL;AACA;AACA,MAAMiD,MAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEvC;EAA+B,CAAC,GAAAsC,MAAA;EAAA,OAC3CC,QAAQ,KAAK,SAAS,GAChBlD,GAAG;AACjB,0CAA0CW,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDX,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CW,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AAAA;AACf,CAAC;AAID,OAAO,MAAMwC,mBAAmB,GAAGpD,MAAM,CAACI,GAAG;AAC7C;AACA,kBAAkBiD,MAAA;EAAA,IAAC;IAAEzC;EAAgC,CAAC,GAAAyC,MAAA;EAAA,OAAKzC,KAAK,CAAC,UAAU,CAAC;AAAA;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB0C,MAAA;EAAA,IAAC;IAAE1C;EAAgC,CAAC,GAAA0C,MAAA;EAAA,OAAK1C,KAAK,CAAC,eAAe,CAAC;AAAA;AACvF,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ComboBox.styles.js","names":["motion","styled","css","ComboBoxDirection","StyledComboBox","div","_ref","$shouldUseFullWidth","$minWidth","StyledComboBoxHeader","_ref2","$isDisabled","_ref3","theme","$shouldChangeColor","colorMode","_ref4","_ref5","$shouldShowBigImage","_ref6","$isOpen","$direction","BOTTOM","_ref7","$isTouch","StyledComboBoxPlaceholder","_ref8","text","_ref9","$shouldReduceOpacity","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","_ref10","_ref11","_ref12","_ref13","$shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","_ref14","_ref15","$maxHeight","_ref16","$overflowY","_ref17","_ref18","_ref19","_ref20","$browser","StyledComboBoxTopic","_ref21","_ref22"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\n\ntype StyledComboBoxProps = WithTheme<{\n $minWidth: number;\n $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n user-select: none;\n position: relative;\n\n ${({ $shouldUseFullWidth, $minWidth }) =>\n $shouldUseFullWidth\n ? css`\n min-width: ${$minWidth}px;\n width: 100%;\n `\n : css`\n min-width: ${$minWidth}px;\n max-width: ${$minWidth}px;\n `}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n $isTouch: boolean;\n $isOpen: boolean;\n $direction: ComboBoxDirection;\n $isDisabled?: boolean;\n $shouldChangeColor: boolean;\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n justify-content: space-between;\n border: 1px solid rgba(160, 160, 160, 0.3);\n padding: 4px 10px;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n background-color: ${({ theme, $shouldChangeColor }: StyledComboBoxHeaderProps) =>\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: background-color 0.2s ease-in-out;\n\n ${({ $shouldShowBigImage }) =>\n $shouldShowBigImage &&\n css`\n height: 42px;\n `}\n\n ${({ $isOpen, $direction }) => {\n if ($isOpen) {\n return $direction === ComboBoxDirection.BOTTOM\n ? css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n `\n : css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n `;\n }\n\n return css`\n border-radius: 3px;\n `;\n }}\n\n ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n !$isTouch &&\n !$isDisabled &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n align-items: center;\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n display: flex;\n gap: 10px;\n opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n align-items: center;\n display: flex;\n`;\n\nexport const StyledComboBoxPrefix = styled.div`\n flex: 0 0 auto;\n min-width: 32px;\n padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n border: none;\n background-color: transparent;\n width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n align-items: center;\n display: flex;\n margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n $overflowY: CSSProperties['overflowY'];\n $maxHeight: CSSProperties['maxHeight'];\n $direction: ComboBoxDirection;\n $browser: Browser | 'bot' | null | undefined;\n $minWidth: number;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n background: ${({ theme }: StyledComboBoxBodyProps) => theme['101']};\n display: flex;\n position: absolute;\n z-index: 4;\n flex-direction: column;\n border: 1px solid rgba(160, 160, 160, 0.3);\n cursor: pointer;\n max-height: ${({ $maxHeight }) => $maxHeight};\n overflow-y: ${({ $overflowY }) => $overflowY};\n\n min-width: ${({ $minWidth }) => $minWidth - 2}px;\n max-width: ${({ $minWidth }) => $minWidth - 2}px;\n\n ${({ $direction }) => {\n if ($direction === ComboBoxDirection.BOTTOM) {\n return css`\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }\n\n return css`\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n `;\n }}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n position: sticky;\n top: 0;\n border: black 5px;\n cursor: default;\n font-weight: bold;\n display: flex;\n gap: 10px;\n z-index: 10;\n padding: 4px 10px;\n background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.907",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"publishConfig": {
|
|
88
88
|
"access": "public"
|
|
89
89
|
},
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "7e775213ae48a9a8644c9f3d28c17cd60b2faae9"
|
|
91
91
|
}
|