@chayns-components/core 5.0.0-beta.472 → 5.0.0-beta.474

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 (12) hide show
  1. package/lib/api/theme/get.js +1 -1
  2. package/lib/api/theme/get.js.map +1 -1
  3. package/lib/components/color-scheme-provider/ColorSchemeProvider.js +12 -1
  4. package/lib/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
  5. package/lib/components/input/Input.js +2 -2
  6. package/lib/components/input/Input.js.map +1 -1
  7. package/lib/components/input/Input.styles.d.ts +1 -1
  8. package/lib/components/input/Input.styles.js +1 -1
  9. package/lib/components/input/Input.styles.js.map +1 -1
  10. package/lib/components/truncation/Truncation.styles.js +1 -0
  11. package/lib/components/truncation/Truncation.styles.js.map +1 -1
  12. package/package.json +2 -2
package/lib/api/theme/get.js CHANGED
@@ -3,7 +3,7 @@ export const getDesignSettings = async () => {
3
3
  const {
4
4
  id
5
5
  } = getSite();
6
- const response = await fetch(`https://api-qa.chayns.net/css/${id}/style/v2`, {
6
+ const response = await fetch(`https://api.chayns.net/css/${id}/style/v2`, {
7
7
  method: 'GET'
8
8
  });
9
9
  if (response.status === 200) {
package/lib/api/theme/get.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"get.js","names":["getSite","getDesignSettings","id","response","fetch","method","status","json","undefined"],"sources":["../../../src/api/theme/get.ts"],"sourcesContent":["import { getSite } from 'chayns-api';\nimport type { DesignSettings } from '../../types/colorSchemeProvider';\n\nexport const getDesignSettings = async (): Promise<DesignSettings | undefined> => {\n const { id } = getSite();\n\n const response = await fetch(`https://api-qa.chayns.net/css/${id}/style/v2`, {\n method: 'GET',\n });\n\n if (response.status === 200) {\n return (await response.json()) as DesignSettings;\n }\n\n return undefined;\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAGpC,OAAO,MAAMC,iBAAiB,GAAG,MAAAA,CAAA,KAAiD;EAC9E,MAAM;IAAEC;EAAG,CAAC,GAAGF,OAAO,CAAC,CAAC;EAExB,MAAMG,QAAQ,GAAG,MAAMC,KAAK,CAAE,iCAAgCF,EAAG,WAAU,EAAE;IACzEG,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAIF,QAAQ,CAACG,MAAM,KAAK,GAAG,EAAE;IACzB,OAAQ,MAAMH,QAAQ,CAACI,IAAI,CAAC,CAAC;EACjC;EAEA,OAAOC,SAAS;AACpB,CAAC"}
1
+ {"version":3,"file":"get.js","names":["getSite","getDesignSettings","id","response","fetch","method","status","json","undefined"],"sources":["../../../src/api/theme/get.ts"],"sourcesContent":["import { getSite } from 'chayns-api';\nimport type { DesignSettings } from '../../types/colorSchemeProvider';\n\nexport const getDesignSettings = async (): Promise<DesignSettings | undefined> => {\n const { id } = getSite();\n\n const response = await fetch(`https://api.chayns.net/css/${id}/style/v2`, {\n method: 'GET',\n });\n\n if (response.status === 200) {\n return (await response.json()) as DesignSettings;\n }\n\n return undefined;\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAGpC,OAAO,MAAMC,iBAAiB,GAAG,MAAAA,CAAA,KAAiD;EAC9E,MAAM;IAAEC;EAAG,CAAC,GAAGF,OAAO,CAAC,CAAC;EAExB,MAAMG,QAAQ,GAAG,MAAMC,KAAK,CAAE,8BAA6BF,EAAG,WAAU,EAAE;IACtEG,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAIF,QAAQ,CAACG,MAAM,KAAK,GAAG,EAAE;IACzB,OAAQ,MAAMH,QAAQ,CAACI,IAAI,CAAC,CAAC;EACjC;EAEA,OAAOC,SAAS;AACpB,CAAC"}
package/lib/components/color-scheme-provider/ColorSchemeProvider.js CHANGED
@@ -80,6 +80,17 @@ const ColorSchemeProvider = _ref => {
80
80
  }
81
81
  }
82
82
  });
83
+ switch (colorMode) {
84
+ case ColorMode.Light:
85
+ newTheme.colorMode = 'light';
86
+ break;
87
+ case ColorMode.Dark:
88
+ newTheme.colorMode = 'dark';
89
+ break;
90
+ default:
91
+ newTheme.colorMode = 'classic';
92
+ break;
93
+ }
83
94
  if (internalDesignSettings) {
84
95
  Object.keys(internalDesignSettings).forEach(key => {
85
96
  if (key === 'iconStyle') {
@@ -96,7 +107,7 @@ const ColorSchemeProvider = _ref => {
96
107
  }
97
108
  setTheme(newTheme);
98
109
  setColors(newColors);
99
- }, [internalColor, internalColorMode, internalDesignSettings, secondaryColor]);
110
+ }, [colorMode, internalColor, internalColorMode, internalDesignSettings, secondaryColor]);
100
111
  return /*#__PURE__*/React.createElement(ThemeProvider, {
101
112
  theme: theme
102
113
  }, /*#__PURE__*/React.createElement("div", {
package/lib/components/color-scheme-provider/ColorSchemeProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColorSchemeProvider.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","getSite","React","useEffect","useMemo","useState","createGlobalStyle","ThemeProvider","getDesignSettings","convertIconStyle","generateFontFaces","ColorMode","GlobalStyle","ColorSchemeProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","style","designSettings","colors","setColors","theme","setTheme","internalDesignSettings","setInternalDesignSettings","then","result","site","internalColorMode","Classic","internalColor","availableColors","newColors","newTheme","forEach","colorName","hexColor","rgbColor","r","g","b","Object","keys","key","iconStyle","createElement","displayName"],"sources":["../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { getSite } from 'chayns-api';\nimport React, { FC, ReactNode, useEffect, useMemo, useState } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { getDesignSettings } from '../../api/theme/get';\nimport type { DesignSettings } from '../../types/colorSchemeProvider';\nimport { convertIconStyle, generateFontFaces } from '../../utils/font';\n\nenum ColorMode {\n Classic,\n Dark,\n Light,\n}\n\ntype ColorSchemeProviderProps = {\n /**\n * The content of the application or the components for which the styles should be set\n */\n children: ReactNode;\n /**\n * The hex color to be used for the children\n */\n color?: string;\n /**\n * The color mode to be used for the children\n */\n colorMode?: ColorMode;\n /**\n * Css variables to be added in addition to the chayns variables\n */\n cssVariables?: { [key: string]: string | number };\n /**\n * The design settings of a page.\n */\n designSettings?: DesignSettings;\n /**\n * The secondary hex color to be used for the children\n */\n secondaryColor?: string;\n /**\n * Additional styles set on the root element\n */\n style?: { [key: string]: string | number };\n};\n\nexport interface Theme {\n [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n ${generateFontFaces}\n\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n`;\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n children,\n color,\n colorMode,\n cssVariables = {},\n secondaryColor,\n style = {},\n designSettings,\n}) => {\n const [colors, setColors] = useState<Theme>({});\n const [theme, setTheme] = useState<Theme>({});\n const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n\n useEffect(() => {\n if (designSettings) {\n setInternalDesignSettings(designSettings);\n\n return;\n }\n\n void getDesignSettings().then((result) => {\n setInternalDesignSettings(result);\n });\n }, [designSettings]);\n\n const site = getSite();\n\n const internalColorMode = useMemo(() => {\n if (colorMode) {\n return colorMode;\n }\n\n if (!site || !site.colorMode) {\n return ColorMode.Classic;\n }\n\n return site.colorMode;\n }, [colorMode, site]);\n\n const internalColor = useMemo(() => {\n if (color) {\n return color;\n }\n\n if (!site || !site.color) {\n return '#005EB8';\n }\n\n return site.color;\n }, [color, site]);\n\n useEffect(() => {\n const availableColors = getAvailableColorList();\n\n const newColors: Theme = {};\n const newTheme: Theme = {};\n\n availableColors.forEach((colorName: string) => {\n const hexColor = getColorFromPalette(colorName, {\n color: internalColor,\n colorMode: internalColorMode,\n secondaryColor,\n });\n\n if (hexColor) {\n const rgbColor = hexToRgb255(hexColor);\n\n newColors[`--chayns-color--${colorName}`] = hexColor;\n newTheme[colorName] = hexColor;\n\n if (rgbColor) {\n newColors[`--chayns-color-rgb--${colorName}`] =\n `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n });\n\n if (internalDesignSettings) {\n Object.keys(internalDesignSettings).forEach((key) => {\n if (key === 'iconStyle') {\n newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);\n\n return;\n }\n\n // ToDo: Find better solution\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n newTheme[key] = internalDesignSettings[key];\n });\n }\n\n setTheme(newTheme);\n setColors(newColors);\n }, [internalColor, internalColorMode, internalDesignSettings, secondaryColor]);\n\n return (\n <ThemeProvider theme={theme}>\n <div style={{ ...colors, ...cssVariables, ...style }}>{children}</div>\n <GlobalStyle />\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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"}
1
+ {"version":3,"file":"ColorSchemeProvider.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","getSite","React","useEffect","useMemo","useState","createGlobalStyle","ThemeProvider","getDesignSettings","convertIconStyle","generateFontFaces","ColorMode","GlobalStyle","ColorSchemeProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","style","designSettings","colors","setColors","theme","setTheme","internalDesignSettings","setInternalDesignSettings","then","result","site","internalColorMode","Classic","internalColor","availableColors","newColors","newTheme","forEach","colorName","hexColor","rgbColor","r","g","b","Light","Dark","Object","keys","key","iconStyle","createElement","displayName"],"sources":["../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { getSite } from 'chayns-api';\nimport React, { FC, ReactNode, useEffect, useMemo, useState } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { getDesignSettings } from '../../api/theme/get';\nimport type { DesignSettings } from '../../types/colorSchemeProvider';\nimport { convertIconStyle, generateFontFaces } from '../../utils/font';\n\nenum ColorMode {\n Classic,\n Dark,\n Light,\n}\n\ntype ColorSchemeProviderProps = {\n /**\n * The content of the application or the components for which the styles should be set\n */\n children: ReactNode;\n /**\n * The hex color to be used for the children\n */\n color?: string;\n /**\n * The color mode to be used for the children\n */\n colorMode?: ColorMode;\n /**\n * Css variables to be added in addition to the chayns variables\n */\n cssVariables?: { [key: string]: string | number };\n /**\n * The design settings of a page.\n */\n designSettings?: DesignSettings;\n /**\n * The secondary hex color to be used for the children\n */\n secondaryColor?: string;\n /**\n * Additional styles set on the root element\n */\n style?: { [key: string]: string | number };\n};\n\nexport interface Theme {\n [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n ${generateFontFaces}\n\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n`;\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n children,\n color,\n colorMode,\n cssVariables = {},\n secondaryColor,\n style = {},\n designSettings,\n}) => {\n const [colors, setColors] = useState<Theme>({});\n const [theme, setTheme] = useState<Theme>({});\n const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n\n useEffect(() => {\n if (designSettings) {\n setInternalDesignSettings(designSettings);\n\n return;\n }\n\n void getDesignSettings().then((result) => {\n setInternalDesignSettings(result);\n });\n }, [designSettings]);\n\n const site = getSite();\n\n const internalColorMode = useMemo(() => {\n if (colorMode) {\n return colorMode;\n }\n\n if (!site || !site.colorMode) {\n return ColorMode.Classic;\n }\n\n return site.colorMode;\n }, [colorMode, site]);\n\n const internalColor = useMemo(() => {\n if (color) {\n return color;\n }\n\n if (!site || !site.color) {\n return '#005EB8';\n }\n\n return site.color;\n }, [color, site]);\n\n useEffect(() => {\n const availableColors = getAvailableColorList();\n\n const newColors: Theme = {};\n const newTheme: Theme = {};\n\n availableColors.forEach((colorName: string) => {\n const hexColor = getColorFromPalette(colorName, {\n color: internalColor,\n colorMode: internalColorMode,\n secondaryColor,\n });\n\n if (hexColor) {\n const rgbColor = hexToRgb255(hexColor);\n\n newColors[`--chayns-color--${colorName}`] = hexColor;\n newTheme[colorName] = hexColor;\n\n if (rgbColor) {\n newColors[`--chayns-color-rgb--${colorName}`] =\n `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n });\n\n switch (colorMode) {\n case ColorMode.Light:\n newTheme.colorMode = 'light';\n break;\n case ColorMode.Dark:\n newTheme.colorMode = 'dark';\n break;\n default:\n newTheme.colorMode = 'classic';\n break;\n }\n\n if (internalDesignSettings) {\n Object.keys(internalDesignSettings).forEach((key) => {\n if (key === 'iconStyle') {\n newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);\n\n return;\n }\n\n // ToDo: Find better solution\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n newTheme[key] = internalDesignSettings[key];\n });\n }\n\n setTheme(newTheme);\n setColors(newColors);\n }, [colorMode, internalColor, internalColorMode, internalDesignSettings, secondaryColor]);\n\n return (\n <ThemeProvider theme={theme}>\n <div style={{ ...colors, ...cssVariables, ...style }}>{children}</div>\n <GlobalStyle />\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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"}
package/lib/components/input/Input.js CHANGED
@@ -88,9 +88,9 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
88
88
  }, [hasValue]);
89
89
  return /*#__PURE__*/React.createElement(StyledInput, {
90
90
  className: "beta-chayns-input",
91
- $isDisabled: isDisabled,
92
- $isInvalid: isInvalid
91
+ $isDisabled: isDisabled
93
92
  }, /*#__PURE__*/React.createElement(StyledInputContentWrapper, {
93
+ $isInvalid: isInvalid,
94
94
  $shouldRoundRightCorners: shouldShowBorder,
95
95
  $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
96
96
  }, iconElement && /*#__PURE__*/React.createElement(StyledInputIconWrapper, null, iconElement), /*#__PURE__*/React.createElement(StyledInputContent, null, /*#__PURE__*/React.createElement(StyledInputField, {
package/lib/components/input/Input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","Input","_ref","ref","iconElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowOnlyBottomBorder","shouldShowClearIcon","type","value","shouldUseAutoFocus","isInvalid","id","hasValue","setHasValue","width","setWidth","theme","inputRef","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","resizeObserver","ResizeObserver","entries","observedWidth","contentRect","observe","disconnect","handleInputFieldChange","event","focus","labelPosition","bottom","right","left","top","createElement","className","$isDisabled","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","disabled","autoFocus","animate","fontSize","initial","layout","transition","duration","$width","opacity","onClick","icons","color","wrong","displayName"],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n focus: VoidFunction;\n};\n\ntype InputMode =\n | 'email'\n | 'search'\n | 'tel'\n | 'text'\n | 'url'\n | 'none'\n | 'numeric'\n | 'decimal'\n | undefined;\n\nexport type InputProps = {\n /**\n * Icon element to be displayed on the left side of the input field\n */\n iconElement?: ReactNode;\n /**\n * The id of the input\n */\n id?: string;\n /**\n * Defines the input mode of the input\n */\n inputMode?: InputMode;\n /**\n * Disables the input so that it cannot be changed anymore\n */\n isDisabled?: boolean;\n /**\n * Function that is executed when the input field loses focus\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\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 the input field is focused\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /**\n * Placeholder for the input field\n */\n placeholder?: string;\n /**\n * Element to be displayed next to or instead of the \"placeholder\"\n */\n placeholderElement?: ReactNode;\n /**\n * An element that should be displayed on the right side of the Input.\n */\n rightElement?: ReactElement;\n /**\n * If true, a clear icon is displayed at the end of the input field\n */\n shouldShowClearIcon?: boolean;\n /**\n * Input type set for input element (e.g. 'text', 'number' or 'password')\n */\n type?: HTMLInputTypeAttribute;\n /**\n * Value if the input field should be controlled\n */\n value?: string;\n /**\n * Whether only the bottom border should be displayed\n */\n shouldShowOnlyBottomBorder?: boolean;\n /**\n * If true, the input field is focused when the component is mounted\n */\n shouldUseAutoFocus?: boolean;\n /**\n * If true, the input field is marked as invalid\n */\n isInvalid?: boolean;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n iconElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n placeholder,\n placeholderElement,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldShowClearIcon = false,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = false,\n id,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [width, setWidth] = useState(0);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n const shouldShowBorder = useMemo(() => {\n if (rightElement) {\n // Ignore because rightElement can be any type of element.\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n return rightElement.props.style.backgroundColor === undefined;\n }\n\n return true;\n }, [rightElement]);\n\n useEffect(() => {\n if (inputRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries && entries[0]) {\n const observedWidth = entries[0].contentRect.width;\n setWidth(observedWidth);\n }\n });\n\n resizeObserver.observe(inputRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n return () => {};\n }, []);\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n const labelPosition = useMemo(() => {\n if (hasValue) {\n return { bottom: -8, right: -6 };\n }\n\n return { left: 0, top: 0 };\n }, [hasValue]);\n\n return (\n <StyledInput\n className=\"beta-chayns-input\"\n $isDisabled={isDisabled}\n $isInvalid={isInvalid}\n >\n <StyledInputContentWrapper\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n {iconElement && <StyledInputIconWrapper>{iconElement}</StyledInputIconWrapper>}\n <StyledInputContent>\n <StyledInputField\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n $isInvalid={isInvalid}\n />\n <StyledMotionInputLabelWrapper\n animate={{\n fontSize: hasValue ? '10px' : '16px',\n }}\n initial={false}\n layout\n style={{ ...labelPosition }}\n transition={{ type: 'tween', duration: 0.3 }}\n $width={width}\n >\n {placeholderElement}\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"AAAA,OAAOA,KAAK,IAIRC,UAAU,EAIVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAEL,OAAO;AACd,SAASC,QAAQ,QAAQ,mBAAmB;AAE5C,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,WAAW,EACXC,kBAAkB,EAClBC,yBAAyB,EACzBC,gBAAgB,EAChBC,sBAAsB,EACtBC,gBAAgB,EAChBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,6BAA6B,QAC1B,gBAAgB;AAwFvB,MAAMC,KAAK,gBAAGlB,UAAU,CACpB,CAAAmB,IAAA,EAoBIC,GAAG,KACF;EAAA,IApBD;IACIC,WAAW;IACXC,SAAS;IACTC,UAAU;IACVC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,SAAS;IACTC,WAAW;IACXC,kBAAkB;IAClBC,YAAY;IACZC,0BAA0B;IAC1BC,mBAAmB,GAAG,KAAK;IAC3BC,IAAI,GAAG,MAAM;IACbC,KAAK;IACLC,kBAAkB,GAAG,KAAK;IAC1BC,SAAS,GAAG,KAAK;IACjBC;EACJ,CAAC,GAAAlB,IAAA;EAGD,MAAM,CAACmB,QAAQ,EAAEC,WAAW,CAAC,GAAGjC,QAAQ,CAAC,OAAO4B,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,EAAE,CAAC;EACnF,MAAM,CAACM,KAAK,EAAEC,QAAQ,CAAC,GAAGnC,QAAQ,CAAC,CAAC,CAAC;EAErC,MAAMoC,KAAK,GAAGnC,QAAQ,CAAC,CAAU;EAEjC,MAAMoC,QAAQ,GAAGtC,MAAM,CAAmB,IAAI,CAAC;EAE/C,MAAMuC,oBAAoB,GAAG3C,WAAW,CAAC,MAAM;IAC3C,IAAI0C,QAAQ,CAACE,OAAO,EAAE;MAClBF,QAAQ,CAACE,OAAO,CAACX,KAAK,GAAG,EAAE;MAE3BK,WAAW,CAAC,KAAK,CAAC;MAElB,IAAI,OAAOd,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAAC;UAAEqB,MAAM,EAAEH,QAAQ,CAACE;QAAQ,CAAkC,CAAC;MAC3E;IACJ;EACJ,CAAC,EAAE,CAACpB,QAAQ,CAAC,CAAC;EAEd,MAAMsB,gBAAgB,GAAG3C,OAAO,CAAC,MAAM;IACnC,IAAI0B,YAAY,EAAE;MACd;MACA;MACA,OAAOA,YAAY,CAACkB,KAAK,CAACC,KAAK,CAACC,eAAe,KAAKC,SAAS;IACjE;IAEA,OAAO,IAAI;EACf,CAAC,EAAE,CAACrB,YAAY,CAAC,CAAC;EAElB5B,SAAS,CAAC,MAAM;IACZ,IAAIyC,QAAQ,CAACE,OAAO,EAAE;MAClB,MAAMO,cAAc,GAAG,IAAIC,cAAc,CAAEC,OAAO,IAAK;QACnD,IAAIA,OAAO,IAAIA,OAAO,CAAC,CAAC,CAAC,EAAE;UACvB,MAAMC,aAAa,GAAGD,OAAO,CAAC,CAAC,CAAC,CAACE,WAAW,CAAChB,KAAK;UAClDC,QAAQ,CAACc,aAAa,CAAC;QAC3B;MACJ,CAAC,CAAC;MAEFH,cAAc,CAACK,OAAO,CAACd,QAAQ,CAACE,OAAO,CAAC;MAExC,OAAO,MAAM;QACTO,cAAc,CAACM,UAAU,CAAC,CAAC;MAC/B,CAAC;IACL;IAEA,OAAO,MAAM,CAAC,CAAC;EACnB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,sBAAsB,GAAG1D,WAAW,CACrC2D,KAAoC,IAAK;IACtCrB,WAAW,CAACqB,KAAK,CAACd,MAAM,CAACZ,KAAK,KAAK,EAAE,CAAC;IAEtC,IAAI,OAAOT,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACmC,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACnC,QAAQ,CACb,CAAC;EAEDtB,mBAAmB,CACfiB,GAAG,EACH,OAAO;IACHyC,KAAK,EAAEA,CAAA,KAAMlB,QAAQ,CAACE,OAAO,EAAEgB,KAAK,CAAC;EACzC,CAAC,CAAC,EACF,EACJ,CAAC;EAED3D,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOgC,KAAK,KAAK,QAAQ,EAAE;MAC3BK,WAAW,CAACL,KAAK,KAAK,EAAE,CAAC;IAC7B;EACJ,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,MAAM4B,aAAa,GAAG1D,OAAO,CAAC,MAAM;IAChC,IAAIkC,QAAQ,EAAE;MACV,OAAO;QAAEyB,MAAM,EAAE,CAAC,CAAC;QAAEC,KAAK,EAAE,CAAC;MAAE,CAAC;IACpC;IAEA,OAAO;MAAEC,IAAI,EAAE,CAAC;MAAEC,GAAG,EAAE;IAAE,CAAC;EAC9B,CAAC,EAAE,CAAC5B,QAAQ,CAAC,CAAC;EAEd,oBACIvC,KAAA,CAAAoE,aAAA,CAAC1D,WAAW;IACR2D,SAAS,EAAC,mBAAmB;IAC7BC,WAAW,EAAE9C,UAAW;IACxB+C,UAAU,EAAElC;EAAU,gBAEtBrC,KAAA,CAAAoE,aAAA,CAACxD,yBAAyB;IACtB4D,wBAAwB,EAAExB,gBAAiB;IAC3CyB,2BAA2B,EAAEzC;EAA2B,GAEvDV,WAAW,iBAAItB,KAAA,CAAAoE,aAAA,CAACtD,sBAAsB,QAAEQ,WAAoC,CAAC,eAC9EtB,KAAA,CAAAoE,aAAA,CAACzD,kBAAkB,qBACfX,KAAA,CAAAoE,aAAA,CAACvD,gBAAgB;IACbyB,EAAE,EAAEA,EAAG;IACPoC,QAAQ,EAAElD,UAAW;IACrBC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEkC,sBAAuB;IACjCjC,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrBP,GAAG,EAAEuB,QAAS;IACdV,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbwC,SAAS,EAAEvC,kBAAmB;IAC9Bb,SAAS,EAAEA,SAAU;IACrBgD,UAAU,EAAElC;EAAU,CACzB,CAAC,eACFrC,KAAA,CAAAoE,aAAA,CAAClD,6BAA6B;IAC1B0D,OAAO,EAAE;MACLC,QAAQ,EAAEtC,QAAQ,GAAG,MAAM,GAAG;IAClC,CAAE;IACFuC,OAAO,EAAE,KAAM;IACfC,MAAM;IACN7B,KAAK,EAAE;MAAE,GAAGa;IAAc,CAAE;IAC5BiB,UAAU,EAAE;MAAE9C,IAAI,EAAE,OAAO;MAAE+C,QAAQ,EAAE;IAAI,CAAE;IAC7CC,MAAM,EAAEzC;EAAM,GAEbX,kBAAkB,eACnB9B,KAAA,CAAAoE,aAAA,CAACrD,gBAAgB;IAACwD,UAAU,EAAElC;EAAU,GACnCR,WACa,CACS,CACf,CAAC,EACpBI,mBAAmB,iBAChBjC,KAAA,CAAAoE,aAAA,CAACnD,0BAA0B;IACvBwD,2BAA2B,EAAEzC,0BAA2B;IACxD4C,OAAO,EAAE;MAAEO,OAAO,EAAE5C,QAAQ,GAAG,CAAC,GAAG;IAAE,CAAE;IACvCuC,OAAO,EAAE,KAAM;IACfM,OAAO,EAAEvC,oBAAqB;IAC9BmC,UAAU,EAAE;MAAE9C,IAAI,EAAE;IAAQ;EAAE,gBAE9BlC,KAAA,CAAAoE,aAAA,CAAC3D,IAAI;IACD4E,KAAK,EAAE,CAAC,aAAa,CAAE;IACvBC,KAAK,EAAEjD,SAAS,GAAGM,KAAK,CAAC4C,KAAK,GAAGnC;EAAU,CAC9C,CACuB,CAC/B,EACArB,YAAY,IAAIiB,gBAAgB,IAAIjB,YACd,CAAC,EAC3BA,YAAY,IAAI,CAACiB,gBAAgB,iBAC9BhD,KAAA,CAAAoE,aAAA,CAACpD,uBAAuB,QAAEe,YAAsC,CAE3D,CAAC;AAEtB,CACJ,CAAC;AAEDZ,KAAK,CAACqE,WAAW,GAAG,OAAO;AAE3B,eAAerE,KAAK"}
1
+ {"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","Input","_ref","ref","iconElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowOnlyBottomBorder","shouldShowClearIcon","type","value","shouldUseAutoFocus","isInvalid","id","hasValue","setHasValue","width","setWidth","theme","inputRef","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","resizeObserver","ResizeObserver","entries","observedWidth","contentRect","observe","disconnect","handleInputFieldChange","event","focus","labelPosition","bottom","right","left","top","createElement","className","$isDisabled","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","disabled","autoFocus","animate","fontSize","initial","layout","transition","duration","$width","opacity","onClick","icons","color","wrong","displayName"],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n focus: VoidFunction;\n};\n\ntype InputMode =\n | 'email'\n | 'search'\n | 'tel'\n | 'text'\n | 'url'\n | 'none'\n | 'numeric'\n | 'decimal'\n | undefined;\n\nexport type InputProps = {\n /**\n * Icon element to be displayed on the left side of the input field\n */\n iconElement?: ReactNode;\n /**\n * The id of the input\n */\n id?: string;\n /**\n * Defines the input mode of the input\n */\n inputMode?: InputMode;\n /**\n * Disables the input so that it cannot be changed anymore\n */\n isDisabled?: boolean;\n /**\n * Function that is executed when the input field loses focus\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\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 the input field is focused\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /**\n * Placeholder for the input field\n */\n placeholder?: string;\n /**\n * Element to be displayed next to or instead of the \"placeholder\"\n */\n placeholderElement?: ReactNode;\n /**\n * An element that should be displayed on the right side of the Input.\n */\n rightElement?: ReactElement;\n /**\n * If true, a clear icon is displayed at the end of the input field\n */\n shouldShowClearIcon?: boolean;\n /**\n * Input type set for input element (e.g. 'text', 'number' or 'password')\n */\n type?: HTMLInputTypeAttribute;\n /**\n * Value if the input field should be controlled\n */\n value?: string;\n /**\n * Whether only the bottom border should be displayed\n */\n shouldShowOnlyBottomBorder?: boolean;\n /**\n * If true, the input field is focused when the component is mounted\n */\n shouldUseAutoFocus?: boolean;\n /**\n * If true, the input field is marked as invalid\n */\n isInvalid?: boolean;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n iconElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n placeholder,\n placeholderElement,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldShowClearIcon = false,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = false,\n id,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [width, setWidth] = useState(0);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n const shouldShowBorder = useMemo(() => {\n if (rightElement) {\n // Ignore because rightElement can be any type of element.\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n return rightElement.props.style.backgroundColor === undefined;\n }\n\n return true;\n }, [rightElement]);\n\n useEffect(() => {\n if (inputRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries && entries[0]) {\n const observedWidth = entries[0].contentRect.width;\n setWidth(observedWidth);\n }\n });\n\n resizeObserver.observe(inputRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n return () => {};\n }, []);\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n const labelPosition = useMemo(() => {\n if (hasValue) {\n return { bottom: -8, right: -6 };\n }\n\n return { left: 0, top: 0 };\n }, [hasValue]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n {iconElement && <StyledInputIconWrapper>{iconElement}</StyledInputIconWrapper>}\n <StyledInputContent>\n <StyledInputField\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n $isInvalid={isInvalid}\n />\n <StyledMotionInputLabelWrapper\n animate={{\n fontSize: hasValue ? '10px' : '16px',\n }}\n initial={false}\n layout\n style={{ ...labelPosition }}\n transition={{ type: 'tween', duration: 0.3 }}\n $width={width}\n >\n {placeholderElement}\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}
package/lib/components/input/Input.styles.d.ts CHANGED
@@ -3,12 +3,12 @@
3
3
  import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
4
4
  type StyledInputProps = WithTheme<{
5
5
  $isDisabled?: boolean;
6
- $isInvalid?: boolean;
7
6
  }>;
8
7
  export declare const StyledInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledInputProps>>;
9
8
  type StyledInputContentWrapperProps = WithTheme<{
10
9
  $shouldRoundRightCorners: boolean;
11
10
  $shouldShowOnlyBottomBorder?: boolean;
11
+ $isInvalid?: boolean;
12
12
  }>;
13
13
  export declare const StyledInputContentWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledInputContentWrapperProps>>;
14
14
  export declare const StyledInputContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
package/lib/components/input/Input.styles.js CHANGED
@@ -16,7 +16,7 @@ export const StyledInputContentWrapper = styled.div`
16
16
  let {
17
17
  theme
18
18
  } = _ref2;
19
- return theme['100'];
19
+ return theme.colorMode === 'classic' ? theme['000'] : theme['100'];
20
20
  }};
21
21
  border: 1px solid
22
22
  ${_ref3 => {
package/lib/components/input/Input.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","_ref","$isDisabled","StyledInputContentWrapper","_ref2","theme","_ref3","$isInvalid","wrong","_ref4","_ref5","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","StyledInputContent","StyledInputField","input","_ref6","text","StyledMotionInputLabelWrapper","label","_ref7","$width","StyledInputLabel","_ref8","undefined","StyledMotionInputClearIcon","_ref9","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean; $isInvalid?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme }: StyledInputProps) => theme['100']};\n border: 1px solid\n ${({ theme, $isInvalid }: StyledInputProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n color: ${({ theme }: StyledInputProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n min-height: 42px;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n`;\n\nexport const StyledInputContent = styled.div`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: 8px 10px;\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $isInvalid }: StyledInputFieldProps) =>\n $isInvalid ? theme.wrong : theme.text};\n padding: 0;\n width: 100%;\n`;\n\ntype StyledMotionInputLabelWrapperProps = WithTheme<{ $width: number }>;\n\nexport const StyledMotionInputLabelWrapper = styled(\n motion.label,\n)<StyledMotionInputLabelWrapperProps>`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: ${({ $width }) => $width}px;\n`;\n\ntype StyledInputLabelProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n line-height: 1.3;\n pointer-events: none;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, $isInvalid }: StyledInputLabelProps) =>\n $isInvalid ? theme.wrong : undefined};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n align-items: center;\n border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: 40px;\n justify-content: center;\n width: 40px;\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n overflow: hidden;\n flex: 0 0 auto;\n`;\n"],"mappings":"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"}
1
+ {"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","_ref","$isDisabled","StyledInputContentWrapper","_ref2","theme","colorMode","_ref3","$isInvalid","wrong","_ref4","_ref5","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","StyledInputContent","StyledInputField","input","_ref6","text","StyledMotionInputLabelWrapper","label","_ref7","$width","StyledInputLabel","_ref8","undefined","StyledMotionInputClearIcon","_ref9","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme }: StyledInputContentWrapperProps) =>\n theme.colorMode === 'classic' ? theme['000'] : theme['100']};\n border: 1px solid\n ${({ theme, $isInvalid }: StyledInputContentWrapperProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n min-height: 42px;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n`;\n\nexport const StyledInputContent = styled.div`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: 8px 10px;\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $isInvalid }: StyledInputFieldProps) =>\n $isInvalid ? theme.wrong : theme.text};\n padding: 0;\n width: 100%;\n`;\n\ntype StyledMotionInputLabelWrapperProps = WithTheme<{ $width: number }>;\n\nexport const StyledMotionInputLabelWrapper = styled(\n motion.label,\n)<StyledMotionInputLabelWrapperProps>`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: ${({ $width }) => $width}px;\n`;\n\ntype StyledInputLabelProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n line-height: 1.3;\n pointer-events: none;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, $isInvalid }: StyledInputLabelProps) =>\n $isInvalid ? theme.wrong : undefined};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n align-items: center;\n border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: 40px;\n justify-content: center;\n width: 40px;\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n overflow: hidden;\n flex: 0 0 auto;\n`;\n"],"mappings":"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"}
package/lib/components/truncation/Truncation.styles.js CHANGED
@@ -39,5 +39,6 @@ export const StyledTruncationClampWrapper = styled.div`
39
39
  `;
40
40
  export const StyledTruncationClamp = styled.a`
41
41
  cursor: pointer;
42
+ z-index: 2;
42
43
  `;
43
44
  //# sourceMappingURL=Truncation.styles.js.map
package/lib/components/truncation/Truncation.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Truncation.styles.js","names":["motion","styled","css","ClampPosition","StyledTruncation","div","StyledMotionTruncationContent","StyledTruncationPseudoContent","StyledTruncationClampWrapper","_ref","$position","Left","Middle","StyledTruncationClamp","a"],"sources":["../../../src/components/truncation/Truncation.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { ClampPosition } from '../../types/truncation';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTruncation = styled.div`\n position: relative;\n`;\n\n// Fix framer-motion bug\nexport const StyledMotionTruncationContent = styled(motion.div)<FramerMotionBugFix>`\n overflow: hidden;\n`;\n\nexport const StyledTruncationPseudoContent = styled.div`\n visibility: hidden;\n position: absolute;\n width: fit-content;\n`;\n\ntype StyledTruncationClampWrapperProps = WithTheme<{ $position: ClampPosition }>;\n\nexport const StyledTruncationClampWrapper = styled.div<StyledTruncationClampWrapperProps>`\n display: flex;\n\n ${({ $position }) => {\n switch ($position) {\n case ClampPosition.Left:\n return css`\n justify-content: left;\n `;\n case ClampPosition.Middle:\n return css`\n justify-content: center;\n `;\n default:\n return css`\n justify-content: right;\n `;\n }\n }}\n`;\n\nexport const StyledTruncationClamp = styled.a`\n cursor: pointer;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,aAAa,QAAQ,wBAAwB;AAGtD,OAAO,MAAMC,gBAAgB,GAAGH,MAAM,CAACI,GAAI;AAC3C;AACA,CAAC;;AAED;AACA,OAAO,MAAMC,6BAA6B,GAAGL,MAAM,CAACD,MAAM,CAACK,GAAG,CAAsB;AACpF;AACA,CAAC;AAED,OAAO,MAAME,6BAA6B,GAAGN,MAAM,CAACI,GAAI;AACxD;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMG,4BAA4B,GAAGP,MAAM,CAACI,GAAuC;AAC1F;AACA;AACA,MAAMI,IAAA,IAAmB;EAAA,IAAlB;IAAEC;EAAU,CAAC,GAAAD,IAAA;EACZ,QAAQC,SAAS;IACb,KAAKP,aAAa,CAACQ,IAAI;MACnB,OAAOT,GAAI;AAC3B;AACA,iBAAiB;IACL,KAAKC,aAAa,CAACS,MAAM;MACrB,OAAOV,GAAI;AAC3B;AACA,iBAAiB;IACL;MACI,OAAOA,GAAI;AAC3B;AACA,iBAAiB;EACT;AACJ,CAAE;AACN,CAAC;AAED,OAAO,MAAMW,qBAAqB,GAAGZ,MAAM,CAACa,CAAE;AAC9C;AACA,CAAC"}
1
+ {"version":3,"file":"Truncation.styles.js","names":["motion","styled","css","ClampPosition","StyledTruncation","div","StyledMotionTruncationContent","StyledTruncationPseudoContent","StyledTruncationClampWrapper","_ref","$position","Left","Middle","StyledTruncationClamp","a"],"sources":["../../../src/components/truncation/Truncation.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { ClampPosition } from '../../types/truncation';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTruncation = styled.div`\n position: relative;\n`;\n\n// Fix framer-motion bug\nexport const StyledMotionTruncationContent = styled(motion.div)<FramerMotionBugFix>`\n overflow: hidden;\n`;\n\nexport const StyledTruncationPseudoContent = styled.div`\n visibility: hidden;\n position: absolute;\n width: fit-content;\n`;\n\ntype StyledTruncationClampWrapperProps = WithTheme<{ $position: ClampPosition }>;\n\nexport const StyledTruncationClampWrapper = styled.div<StyledTruncationClampWrapperProps>`\n display: flex;\n\n ${({ $position }) => {\n switch ($position) {\n case ClampPosition.Left:\n return css`\n justify-content: left;\n `;\n case ClampPosition.Middle:\n return css`\n justify-content: center;\n `;\n default:\n return css`\n justify-content: right;\n `;\n }\n }}\n`;\n\nexport const StyledTruncationClamp = styled.a`\n cursor: pointer;\n z-index: 2;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,aAAa,QAAQ,wBAAwB;AAGtD,OAAO,MAAMC,gBAAgB,GAAGH,MAAM,CAACI,GAAI;AAC3C;AACA,CAAC;;AAED;AACA,OAAO,MAAMC,6BAA6B,GAAGL,MAAM,CAACD,MAAM,CAACK,GAAG,CAAsB;AACpF;AACA,CAAC;AAED,OAAO,MAAME,6BAA6B,GAAGN,MAAM,CAACI,GAAI;AACxD;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMG,4BAA4B,GAAGP,MAAM,CAACI,GAAuC;AAC1F;AACA;AACA,MAAMI,IAAA,IAAmB;EAAA,IAAlB;IAAEC;EAAU,CAAC,GAAAD,IAAA;EACZ,QAAQC,SAAS;IACb,KAAKP,aAAa,CAACQ,IAAI;MACnB,OAAOT,GAAI;AAC3B;AACA,iBAAiB;IACL,KAAKC,aAAa,CAACS,MAAM;MACrB,OAAOV,GAAI;AAC3B;AACA,iBAAiB;IACL;MACI,OAAOA,GAAI;AAC3B;AACA,iBAAiB;EACT;AACJ,CAAE;AACN,CAAC;AAED,OAAO,MAAMW,qBAAqB,GAAGZ,MAAM,CAACa,CAAE;AAC9C;AACA;AACA,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.472",
3
+ "version": "5.0.0-beta.474",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -73,5 +73,5 @@
73
73
  "publishConfig": {
74
74
  "access": "public"
75
75
  },
76
- "gitHead": "0ba9b365ccc93a77365aa4e69b45610dda00e140"
76
+ "gitHead": "b8c5e95f8481b60e57a52351def0ab8d877dfd7d"
77
77
  }