@chayns-components/core 5.0.0-beta.1346 → 5.0.0-beta.1350
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.
- package/lib/cjs/components/checkbox/Checkbox.styles.js +0 -2
- package/lib/cjs/components/checkbox/Checkbox.styles.js.map +1 -1
- package/lib/cjs/components/icon/Icon.js.map +1 -1
- package/lib/cjs/components/icon/Icon.styles.js +1 -1
- package/lib/cjs/components/icon/Icon.styles.js.map +1 -1
- package/lib/esm/components/checkbox/Checkbox.styles.js +0 -2
- package/lib/esm/components/checkbox/Checkbox.styles.js.map +1 -1
- package/lib/esm/components/icon/Icon.js.map +1 -1
- package/lib/esm/components/icon/Icon.styles.js +1 -1
- package/lib/esm/components/icon/Icon.styles.js.map +1 -1
- package/lib/types/components/icon/Icon.d.ts +63 -9
- package/package.json +2 -2
|
@@ -12,8 +12,6 @@ const StyledCheckbox = exports.StyledCheckbox = _styledComponents.default.div`
|
|
|
12
12
|
position: relative;
|
|
13
13
|
width: 100%;
|
|
14
14
|
min-height: 20px;
|
|
15
|
-
|
|
16
|
-
border: 1px solid red;
|
|
17
15
|
`;
|
|
18
16
|
const StyledCheckboxInput = exports.StyledCheckboxInput = _styledComponents.default.input`
|
|
19
17
|
display: none;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","css","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","green","red","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n align-items: center;\n display: flex;\n position: relative;\n width: 100%;\n min-height: 20px;\n
|
|
1
|
+
{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","css","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","green","red","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n align-items: center;\n display: flex;\n position: relative;\n width: 100%;\n min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n display: none;\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n display: flex;\n flex-shrink: 0;\n height: 16px;\n position: absolute;\n\n ${({ $shouldShowAsSwitch }) =>\n $shouldShowAsSwitch &&\n css`\n right: 42px;\n `}\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n $isDisabled?: CheckboxProps['isDisabled'];\n $isChecked?: CheckboxProps['isChecked'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n transition: opacity 0.2s ease;\n user-select: none;\n height: 16px;\n\n &:after {\n ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n $shouldShowAsSwitch\n ? css`\n background-color: white;\n border-radius: 50%;\n box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n height: 16px;\n left: 7px;\n top: 50%;\n transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n transition: transform 0.2s ease;\n width: 16px;\n `\n : css`\n border-right: 2px solid #fff;\n border-bottom: 2px solid #fff;\n height: 10px;\n left: 2px;\n opacity: ${$isChecked ? 1 : 0};\n top: calc(50% - 2px);\n transform: rotateZ(37deg) translateY(-50%);\n transition: opacity 0.2s ease;\n width: 5px;\n `}\n\n content: ' ';\n position: absolute;\n }\n\n &:before {\n background-color: ${({\n $isChecked,\n $shouldShowAsSwitch,\n theme,\n }: StyledCheckboxBoxProps) => {\n if ($shouldShowAsSwitch) {\n return $isChecked ? theme.green : theme.red;\n }\n\n return $isChecked ? theme['408'] : theme['403'];\n }};\n\n ${({ $shouldShowAsSwitch, theme }) =>\n !$shouldShowAsSwitch &&\n css`\n border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n `}\n\n border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n content: ' ';\n height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n transition: background-color 0.2s ease;\n width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n $isDisabled?: CheckboxProps['isDisabled'];\n $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n cursor: ${({ $shouldChangeOnLabelClick }) =>\n !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: opacity 0.2s ease;\n user-select: none;\n ${({ $shouldShowAsSwitch }) =>\n $shouldShowAsSwitch\n ? css`\n padding-right: 48px;\n `\n : css`\n padding-left: 20px;\n `}\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_icon","_Icon","e","__esModule","default","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","$isDisabled","undefined","$isOnClick","$size","map","iconClasses","StyledIcon","$color","includes","$fontSize","$isStacked","key","displayName","_default","exports"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\n\nexport type IconProps = {\n /**\n * Additional class
|
|
1
|
+
{"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_icon","_Icon","e","__esModule","default","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","$isDisabled","undefined","$isOnClick","$size","map","iconClasses","StyledIcon","$color","includes","$fontSize","$isStacked","key","displayName","_default","exports"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\n\nexport type IconProps = {\n /**\n * Additional class name for the icon wrapper element.\n * @description\n * This class name is applied to the wrapper element that contains the icon. It can be used to\n * style the icon wrapper element.\n * @example\n * <Icon className=\"my-custom-class\" icons={['fa-user']} />\n * optional\n */\n className?: string;\n /**\n * The color of the icon.\n * @description\n * This property can be used to set the color of the icon. The color is only used for icons that\n * don't have a predefined color (e.g., 'fa-inverse' icons will always be white). If no color is\n * specified, the icon color of the theme or the text color will be used.\n * @example\n * <Icon color=\"red\" icons={['fa-user']} />\n * @optional\n */\n color?: string;\n /**\n * The icon(s) to be displayed.\n * @description\n * This property can be used to set the icon(s) to be displayed. The icon(s) must be specified as\n * an array of strings. Each string must be a valid icon name.\n * @example\n * <Icon icons={['fa-user']} />\n * <Icon icons={['fa fa-circle fa-stack-2x', 'fa fa-french-fries fa-inverse']} />\n */\n icons: string[];\n /**\n * Whether the icon should be disabled.\n * @description\n * This property can be used to disable the icon. When the icon is disabled, it will not be\n * clickable, and it will not emit any events.\n * @example\n * <Icon icons={['fa-user']} isDisabled />\n * @optional\n */\n isDisabled?: boolean;\n /**\n * Function to be executed when the icon is clicked.\n * @description\n * This function is executed when the icon is clicked. It can be used to handle the click event.\n * @example\n * <Icon icons={['fa-user']} onClick={() => console.log('Icon clicked')} />\n * @optional\n */\n onClick?: MouseEventHandler<HTMLSpanElement>;\n /**\n * Function to be executed when the icon is double-clicked.\n * @description\n * This function is executed when the icon is double-clicked. It can be used to handle the\n * double-click event.\n * @example\n * <Icon icons={['fa-user']} onDoubleClick={() => console.log('Icon double-clicked')} />\n * @optional\n */\n onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n /**\n * Function to be executed when the icon is pressed.\n * @description\n * This function is executed when the icon is pressed. It can be used to handle the mouse down event.\n * @example\n * <Icon icons={['fa-user']} onMouseDown={() => console.log('Icon pressed')} />\n * @optional\n */\n onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n /**\n * The size of the icon.\n * @description\n * This property can be used to set the size of the icon. The size must be specified as a number\n * in pixels.\n * @default 15\n * @example\n * <Icon icons={['fa-user']} size={20} />\n * @optional\n */\n size?: number;\n /**\n * Stops event propagation on click.\n * @description\n * This property can be used to prevent the icon from propagating the click event to its parent\n * elements.\n * @example\n * <Icon icons={['fa-user']} shouldStopPropagation />\n * @optional\n */\n shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n className,\n color,\n icons,\n isDisabled,\n onClick,\n onDoubleClick,\n onMouseDown,\n size = 15,\n shouldStopPropagation,\n}) => {\n const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n };\n\n const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onDoubleClick === 'function') {\n onDoubleClick(event);\n }\n };\n\n let maxStackSizeFactor = 1;\n\n icons.forEach((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n maxStackSizeFactor = stackSizeFactor;\n }\n });\n\n const shouldUseStackedIcon = icons.length > 1;\n\n const wrapperClasses = clsx(\n 'beta-chayns-icon',\n shouldUseStackedIcon ? 'fa-stack' : '',\n className,\n );\n\n return (\n <StyledIconWrapper\n className={wrapperClasses}\n $isDisabled={isDisabled}\n onClick={typeof onClick === 'function' && !isDisabled ? handleClick : undefined}\n $isOnClick={typeof onClick === 'function' && !isDisabled}\n onDoubleClick={\n typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined\n }\n onMouseDown={typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined}\n $size={size}\n >\n {icons.map((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n // const isIconStyleGiven =\n // /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);\n //\n // const iconStyle = isIconStyleGiven\n // ? undefined\n // : (theme?.iconStyle as string) ?? 'fa-regular';\n\n const iconClasses = clsx(icon, {\n 'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n });\n\n return (\n <StyledIcon\n className={iconClasses}\n $color={icon.includes('fa-inverse') ? 'white' : color}\n $fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n $isStacked={shouldUseStackedIcon}\n key={icon}\n $size={size}\n />\n );\n })}\n </StyledIconWrapper>\n );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -39,7 +39,7 @@ const StyledIcon = exports.StyledIcon = _styledComponents.default.i`
|
|
|
39
39
|
color: ${({
|
|
40
40
|
$color,
|
|
41
41
|
theme
|
|
42
|
-
}) => $color || theme.iconColor || theme.
|
|
42
|
+
}) => $color || theme.iconColor || theme.text};
|
|
43
43
|
display: ${({
|
|
44
44
|
$isStacked
|
|
45
45
|
}) => $isStacked ? undefined : 'inline-flex'};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledIconWrapper","exports","styled","span","$isDisabled","$isOnClick","$size","StyledIcon","$color","theme","iconColor","
|
|
1
|
+
{"version":3,"file":"Icon.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledIconWrapper","exports","styled","span","$isDisabled","$isOnClick","$size","StyledIcon","$color","theme","iconColor","text","$isStacked","undefined","$fontSize","css"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n $isDisabled?: boolean;\n $isOnClick: boolean;\n $size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n align-items: center;\n cursor: ${({ $isDisabled, $isOnClick }) =>\n $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n display: inline-flex;\n min-height: ${({ $size }) => `${$size}px`};\n justify-content: center;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n transition: opacity 0.3s ease;\n min-width: ${({ $size }) => `${$size}px`};\n\n // To insure that stacked icons have the same size as normal icons.\n &&.fa-stack {\n height: fit-content;\n width: fit-content;\n line-height: ${({ $size }) => $size}px;\n }\n`;\n\ntype StyledIconProps = WithTheme<{\n $fontSize: number;\n $isStacked?: boolean;\n $color?: string;\n $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n color: ${({ $color, theme }: StyledIconProps) => $color || theme.iconColor || theme.text};\n display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n ${({ $fontSize, $size }) =>\n $fontSize !== $size &&\n css`\n top: 50%;\n transform: translateY(-50%);\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AASzC,MAAMkB,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,IAA4B;AACpE;AACA,cAAc,CAAC;EAAEC,WAAW;EAAEC;AAAW,CAAC,KAClCA,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1D;AACA,kBAAkB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC7C;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,iBAAiB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AAC3C;AACA,CAAC;AASM,MAAMC,UAAU,GAAAN,OAAA,CAAAM,UAAA,GAAGL,yBAAM,CAACd,CAAkB;AACnD,aAAa,CAAC;EAAEoB,MAAM;EAAEC;AAAuB,CAAC,KAAKD,MAAM,IAAIC,KAAK,CAACC,SAAS,IAAID,KAAK,CAACE,IAAI;AAC5F,eAAe,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,GAAGC,SAAS,GAAG,aAAc;AAC3E,iBAAiB,CAAC;EAAEC;AAAU,CAAC,KAAK,GAAGA,SAAS,IAAI;AACpD;AACA,MAAM,CAAC;EAAEA,SAAS;EAAER;AAAM,CAAC,KACnBQ,SAAS,KAAKR,KAAK,IACnB,IAAAS,qBAAG;AACX;AACA;AACA,SAAS;AACT,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.styles.js","names":["styled","css","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","green","red","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n align-items: center;\n display: flex;\n position: relative;\n width: 100%;\n min-height: 20px;\n
|
|
1
|
+
{"version":3,"file":"Checkbox.styles.js","names":["styled","css","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","green","red","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n align-items: center;\n display: flex;\n position: relative;\n width: 100%;\n min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n display: none;\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n display: flex;\n flex-shrink: 0;\n height: 16px;\n position: absolute;\n\n ${({ $shouldShowAsSwitch }) =>\n $shouldShowAsSwitch &&\n css`\n right: 42px;\n `}\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n $isDisabled?: CheckboxProps['isDisabled'];\n $isChecked?: CheckboxProps['isChecked'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n transition: opacity 0.2s ease;\n user-select: none;\n height: 16px;\n\n &:after {\n ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n $shouldShowAsSwitch\n ? css`\n background-color: white;\n border-radius: 50%;\n box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n height: 16px;\n left: 7px;\n top: 50%;\n transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n transition: transform 0.2s ease;\n width: 16px;\n `\n : css`\n border-right: 2px solid #fff;\n border-bottom: 2px solid #fff;\n height: 10px;\n left: 2px;\n opacity: ${$isChecked ? 1 : 0};\n top: calc(50% - 2px);\n transform: rotateZ(37deg) translateY(-50%);\n transition: opacity 0.2s ease;\n width: 5px;\n `}\n\n content: ' ';\n position: absolute;\n }\n\n &:before {\n background-color: ${({\n $isChecked,\n $shouldShowAsSwitch,\n theme,\n }: StyledCheckboxBoxProps) => {\n if ($shouldShowAsSwitch) {\n return $isChecked ? theme.green : theme.red;\n }\n\n return $isChecked ? theme['408'] : theme['403'];\n }};\n\n ${({ $shouldShowAsSwitch, theme }) =>\n !$shouldShowAsSwitch &&\n css`\n border: 1px solid rgba(${theme['409-rgb']}, 0.5);\n `}\n\n border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n content: ' ';\n height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n transition: background-color 0.2s ease;\n width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n $isDisabled?: CheckboxProps['isDisabled'];\n $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n cursor: ${({ $shouldChangeOnLabelClick }) =>\n !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: opacity 0.2s ease;\n user-select: none;\n ${({ $shouldShowAsSwitch }) =>\n $shouldShowAsSwitch\n ? css`\n padding-right: 48px;\n `\n : css`\n padding-left: 20px;\n `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAI/C,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAG;AACxC;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,mBAAmB,GAAGJ,MAAM,CAACK,KAAK;AAC/C;AACA,CAAC;AAMD,OAAO,MAAMC,wBAAwB,GAAGN,MAAM,CAACG,GAAkC;AACjF;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEI;AAAoB,CAAC,KACtBA,mBAAmB,IACnBN,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAQD,OAAO,MAAMO,iBAAiB,GAAGR,MAAM,CAACS,KAA6B;AACrE,aAAa,CAAC;EAAEC;AAA8B,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC9D,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,UAAU;EAAEN;AAA4C,CAAC,KAC1DA,mBAAmB,GACbN,GAAG;AACrB;AACA;AACA;AACA;AACA;AACA;AACA,8CAA8CY,UAAU,GAAG,MAAM,GAAG,CAAC;AACrE;AACA;AACA,mBAAmB,GACDZ,GAAG;AACrB;AACA;AACA;AACA;AACA,iCAAiCY,UAAU,GAAG,CAAC,GAAG,CAAC;AACnD;AACA;AACA;AACA;AACA,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,CAAC;EACjBA,UAAU;EACVN,mBAAmB;EACnBG;AACoB,CAAC,KAAK;EAC1B,IAAIH,mBAAmB,EAAE;IACrB,OAAOM,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAGJ,KAAK,CAACK,GAAG;EAC/C;EAEA,OAAOF,UAAU,GAAGH,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AACT;AACA,UAAU,CAAC;EAAEH,mBAAmB;EAAEG;AAAM,CAAC,KAC7B,CAACH,mBAAmB,IACpBN,GAAG;AACf,yCAAyCS,KAAK,CAAC,SAAS,CAAC;AACzD,aAAa;AACb;AACA,yBAAyB,CAAC;EAAEH;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,OAAO,GAAG,CAAE;AACzF;AACA,kBAAkB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACtF,gBAAgB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,CAAE;AAC/E;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACrF;AACA;AACA,CAAC;AAQD,OAAO,MAAMS,mBAAmB,GAAGhB,MAAM,CAACS,KAA+B;AACzE,aAAa,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAACC,IAAI;AAChE,cAAc,CAAC;EAAEM;AAA0B,CAAC,KACpC,CAACA,yBAAyB,GAAG,SAAS,GAAG,SAAS;AAC1D,eAAe,CAAC;EAAEL;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,MAAM,CAAC;EAAEL;AAAoB,CAAC,KACtBA,mBAAmB,GACbN,GAAG;AACjB;AACA,eAAe,GACDA,GAAG;AACjB;AACA,eAAe;AACf,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","names":["clsx","React","getStackSizeFactor","StyledIcon","StyledIconWrapper","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","createElement","$isDisabled","undefined","$isOnClick","$size","map","iconClasses","$color","includes","$fontSize","$isStacked","key","displayName"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\n\nexport type IconProps = {\n /**\n * Additional class
|
|
1
|
+
{"version":3,"file":"Icon.js","names":["clsx","React","getStackSizeFactor","StyledIcon","StyledIconWrapper","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","createElement","$isDisabled","undefined","$isOnClick","$size","map","iconClasses","$color","includes","$fontSize","$isStacked","key","displayName"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\n\nexport type IconProps = {\n /**\n * Additional class name for the icon wrapper element.\n * @description\n * This class name is applied to the wrapper element that contains the icon. It can be used to\n * style the icon wrapper element.\n * @example\n * <Icon className=\"my-custom-class\" icons={['fa-user']} />\n * optional\n */\n className?: string;\n /**\n * The color of the icon.\n * @description\n * This property can be used to set the color of the icon. The color is only used for icons that\n * don't have a predefined color (e.g., 'fa-inverse' icons will always be white). If no color is\n * specified, the icon color of the theme or the text color will be used.\n * @example\n * <Icon color=\"red\" icons={['fa-user']} />\n * @optional\n */\n color?: string;\n /**\n * The icon(s) to be displayed.\n * @description\n * This property can be used to set the icon(s) to be displayed. The icon(s) must be specified as\n * an array of strings. Each string must be a valid icon name.\n * @example\n * <Icon icons={['fa-user']} />\n * <Icon icons={['fa fa-circle fa-stack-2x', 'fa fa-french-fries fa-inverse']} />\n */\n icons: string[];\n /**\n * Whether the icon should be disabled.\n * @description\n * This property can be used to disable the icon. When the icon is disabled, it will not be\n * clickable, and it will not emit any events.\n * @example\n * <Icon icons={['fa-user']} isDisabled />\n * @optional\n */\n isDisabled?: boolean;\n /**\n * Function to be executed when the icon is clicked.\n * @description\n * This function is executed when the icon is clicked. It can be used to handle the click event.\n * @example\n * <Icon icons={['fa-user']} onClick={() => console.log('Icon clicked')} />\n * @optional\n */\n onClick?: MouseEventHandler<HTMLSpanElement>;\n /**\n * Function to be executed when the icon is double-clicked.\n * @description\n * This function is executed when the icon is double-clicked. It can be used to handle the\n * double-click event.\n * @example\n * <Icon icons={['fa-user']} onDoubleClick={() => console.log('Icon double-clicked')} />\n * @optional\n */\n onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n /**\n * Function to be executed when the icon is pressed.\n * @description\n * This function is executed when the icon is pressed. It can be used to handle the mouse down event.\n * @example\n * <Icon icons={['fa-user']} onMouseDown={() => console.log('Icon pressed')} />\n * @optional\n */\n onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n /**\n * The size of the icon.\n * @description\n * This property can be used to set the size of the icon. The size must be specified as a number\n * in pixels.\n * @default 15\n * @example\n * <Icon icons={['fa-user']} size={20} />\n * @optional\n */\n size?: number;\n /**\n * Stops event propagation on click.\n * @description\n * This property can be used to prevent the icon from propagating the click event to its parent\n * elements.\n * @example\n * <Icon icons={['fa-user']} shouldStopPropagation />\n * @optional\n */\n shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n className,\n color,\n icons,\n isDisabled,\n onClick,\n onDoubleClick,\n onMouseDown,\n size = 15,\n shouldStopPropagation,\n}) => {\n const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n };\n\n const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onDoubleClick === 'function') {\n onDoubleClick(event);\n }\n };\n\n let maxStackSizeFactor = 1;\n\n icons.forEach((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n maxStackSizeFactor = stackSizeFactor;\n }\n });\n\n const shouldUseStackedIcon = icons.length > 1;\n\n const wrapperClasses = clsx(\n 'beta-chayns-icon',\n shouldUseStackedIcon ? 'fa-stack' : '',\n className,\n );\n\n return (\n <StyledIconWrapper\n className={wrapperClasses}\n $isDisabled={isDisabled}\n onClick={typeof onClick === 'function' && !isDisabled ? handleClick : undefined}\n $isOnClick={typeof onClick === 'function' && !isDisabled}\n onDoubleClick={\n typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined\n }\n onMouseDown={typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined}\n $size={size}\n >\n {icons.map((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n // const isIconStyleGiven =\n // /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);\n //\n // const iconStyle = isIconStyleGiven\n // ? undefined\n // : (theme?.iconStyle as string) ?? 'fa-regular';\n\n const iconClasses = clsx(icon, {\n 'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n });\n\n return (\n <StyledIcon\n className={iconClasses}\n $color={icon.includes('fa-inverse') ? 'white' : color}\n $fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n $isStacked={shouldUseStackedIcon}\n key={icon}\n $size={size}\n />\n );\n })}\n </StyledIconWrapper>\n );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,OAAOC,KAAK,MAAiC,OAAO;AACpD,SAASC,kBAAkB,QAAQ,kBAAkB;AACrD,SAASC,UAAU,EAAEC,iBAAiB,QAAQ,eAAe;AA+F7D,MAAMC,IAAmB,GAAGA,CAAC;EACzBC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,UAAU;EACVC,OAAO;EACPC,aAAa;EACbC,WAAW;EACXC,IAAI,GAAG,EAAE;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,WAA+C,GAAIC,KAAK,IAAK;IAC/D,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAOP,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACM,KAAK,CAAC;IAClB;EACJ,CAAC;EAED,MAAME,iBAAqD,GAAIF,KAAK,IAAK;IACrE,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAON,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACK,KAAK,CAAC;IACxB;EACJ,CAAC;EAED,IAAIG,kBAAkB,GAAG,CAAC;EAE1BX,KAAK,CAACY,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,eAAe,GAAGpB,kBAAkB,CAACmB,IAAI,CAAC;IAEhD,IAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAkB,EAAE;MACzDA,kBAAkB,GAAGG,eAAe;IACxC;EACJ,CAAC,CAAC;EAEF,MAAMC,oBAAoB,GAAGf,KAAK,CAACgB,MAAM,GAAG,CAAC;EAE7C,MAAMC,cAAc,GAAGzB,IAAI,CACvB,kBAAkB,EAClBuB,oBAAoB,GAAG,UAAU,GAAG,EAAE,EACtCjB,SACJ,CAAC;EAED,oBACIL,KAAA,CAAAyB,aAAA,CAACtB,iBAAiB;IACdE,SAAS,EAAEmB,cAAe;IAC1BE,WAAW,EAAElB,UAAW;IACxBC,OAAO,EAAE,OAAOA,OAAO,KAAK,UAAU,IAAI,CAACD,UAAU,GAAGM,WAAW,GAAGa,SAAU;IAChFC,UAAU,EAAE,OAAOnB,OAAO,KAAK,UAAU,IAAI,CAACD,UAAW;IACzDE,aAAa,EACT,OAAOA,aAAa,KAAK,UAAU,IAAI,CAACF,UAAU,GAAGS,iBAAiB,GAAGU,SAC5E;IACDhB,WAAW,EAAE,OAAOA,WAAW,KAAK,UAAU,IAAI,CAACH,UAAU,GAAGG,WAAW,GAAGgB,SAAU;IACxFE,KAAK,EAAEjB;EAAK,GAEXL,KAAK,CAACuB,GAAG,CAAEV,IAAI,IAAK;IACjB,MAAMC,eAAe,GAAGpB,kBAAkB,CAACmB,IAAI,CAAC;;IAEhD;IACA;IACA;IACA;IACA;IACA;;IAEA,MAAMW,WAAW,GAAGhC,IAAI,CAACqB,IAAI,EAAE;MAC3B,aAAa,EAAEE,oBAAoB,IAAID,eAAe,KAAKM;IAC/D,CAAC,CAAC;IAEF,oBACI3B,KAAA,CAAAyB,aAAA,CAACvB,UAAU;MACPG,SAAS,EAAE0B,WAAY;MACvBC,MAAM,EAAEZ,IAAI,CAACa,QAAQ,CAAC,YAAY,CAAC,GAAG,OAAO,GAAG3B,KAAM;MACtD4B,SAAS,EAAG,CAACb,eAAe,IAAI,CAAC,IAAIH,kBAAkB,GAAIN,IAAK;MAChEuB,UAAU,EAAEb,oBAAqB;MACjCc,GAAG,EAAEhB,IAAK;MACVS,KAAK,EAAEjB;IAAK,CACf,CAAC;EAEV,CAAC,CACc,CAAC;AAE5B,CAAC;AAEDR,IAAI,CAACiC,WAAW,GAAG,MAAM;AAEzB,eAAejC,IAAI","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.styles.js","names":["styled","css","StyledIconWrapper","span","$isDisabled","$isOnClick","$size","StyledIcon","i","$color","theme","iconColor","
|
|
1
|
+
{"version":3,"file":"Icon.styles.js","names":["styled","css","StyledIconWrapper","span","$isDisabled","$isOnClick","$size","StyledIcon","i","$color","theme","iconColor","text","$isStacked","undefined","$fontSize"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n $isDisabled?: boolean;\n $isOnClick: boolean;\n $size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n align-items: center;\n cursor: ${({ $isDisabled, $isOnClick }) =>\n $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n display: inline-flex;\n min-height: ${({ $size }) => `${$size}px`};\n justify-content: center;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n transition: opacity 0.3s ease;\n min-width: ${({ $size }) => `${$size}px`};\n\n // To insure that stacked icons have the same size as normal icons.\n &&.fa-stack {\n height: fit-content;\n width: fit-content;\n line-height: ${({ $size }) => $size}px;\n }\n`;\n\ntype StyledIconProps = WithTheme<{\n $fontSize: number;\n $isStacked?: boolean;\n $color?: string;\n $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n color: ${({ $color, theme }: StyledIconProps) => $color || theme.iconColor || theme.text};\n display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n ${({ $fontSize, $size }) =>\n $fontSize !== $size &&\n css`\n top: 50%;\n transform: translateY(-50%);\n `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,IAA4B;AACpE;AACA,cAAc,CAAC;EAAEC,WAAW;EAAEC;AAAW,CAAC,KAClCA,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1D;AACA,kBAAkB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC7C;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,iBAAiB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AAC3C;AACA,CAAC;AASD,OAAO,MAAMC,UAAU,GAAGP,MAAM,CAACQ,CAAkB;AACnD,aAAa,CAAC;EAAEC,MAAM;EAAEC;AAAuB,CAAC,KAAKD,MAAM,IAAIC,KAAK,CAACC,SAAS,IAAID,KAAK,CAACE,IAAI;AAC5F,eAAe,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,GAAGC,SAAS,GAAG,aAAc;AAC3E,iBAAiB,CAAC;EAAEC;AAAU,CAAC,KAAK,GAAGA,SAAS,IAAI;AACpD;AACA,MAAM,CAAC;EAAEA,SAAS;EAAET;AAAM,CAAC,KACnBS,SAAS,KAAKT,KAAK,IACnBL,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC","ignoreList":[]}
|
|
@@ -1,39 +1,93 @@
|
|
|
1
1
|
import { FC, MouseEventHandler } from 'react';
|
|
2
2
|
export type IconProps = {
|
|
3
3
|
/**
|
|
4
|
-
* Additional class
|
|
4
|
+
* Additional class name for the icon wrapper element.
|
|
5
|
+
* @description
|
|
6
|
+
* This class name is applied to the wrapper element that contains the icon. It can be used to
|
|
7
|
+
* style the icon wrapper element.
|
|
8
|
+
* @example
|
|
9
|
+
* <Icon className="my-custom-class" icons={['fa-user']} />
|
|
10
|
+
* optional
|
|
5
11
|
*/
|
|
6
12
|
className?: string;
|
|
7
13
|
/**
|
|
8
|
-
* The color of the icon
|
|
14
|
+
* The color of the icon.
|
|
15
|
+
* @description
|
|
16
|
+
* This property can be used to set the color of the icon. The color is only used for icons that
|
|
17
|
+
* don't have a predefined color (e.g., 'fa-inverse' icons will always be white). If no color is
|
|
18
|
+
* specified, the icon color of the theme or the text color will be used.
|
|
19
|
+
* @example
|
|
20
|
+
* <Icon color="red" icons={['fa-user']} />
|
|
21
|
+
* @optional
|
|
9
22
|
*/
|
|
10
23
|
color?: string;
|
|
11
24
|
/**
|
|
12
|
-
* The
|
|
25
|
+
* The icon(s) to be displayed.
|
|
26
|
+
* @description
|
|
27
|
+
* This property can be used to set the icon(s) to be displayed. The icon(s) must be specified as
|
|
28
|
+
* an array of strings. Each string must be a valid icon name.
|
|
29
|
+
* @example
|
|
30
|
+
* <Icon icons={['fa-user']} />
|
|
31
|
+
* <Icon icons={['fa fa-circle fa-stack-2x', 'fa fa-french-fries fa-inverse']} />
|
|
13
32
|
*/
|
|
14
33
|
icons: string[];
|
|
15
34
|
/**
|
|
16
|
-
*
|
|
35
|
+
* Whether the icon should be disabled.
|
|
36
|
+
* @description
|
|
37
|
+
* This property can be used to disable the icon. When the icon is disabled, it will not be
|
|
38
|
+
* clickable, and it will not emit any events.
|
|
39
|
+
* @example
|
|
40
|
+
* <Icon icons={['fa-user']} isDisabled />
|
|
41
|
+
* @optional
|
|
17
42
|
*/
|
|
18
43
|
isDisabled?: boolean;
|
|
19
44
|
/**
|
|
20
|
-
* Function to be executed when the icon
|
|
45
|
+
* Function to be executed when the icon is clicked.
|
|
46
|
+
* @description
|
|
47
|
+
* This function is executed when the icon is clicked. It can be used to handle the click event.
|
|
48
|
+
* @example
|
|
49
|
+
* <Icon icons={['fa-user']} onClick={() => console.log('Icon clicked')} />
|
|
50
|
+
* @optional
|
|
21
51
|
*/
|
|
22
52
|
onClick?: MouseEventHandler<HTMLSpanElement>;
|
|
23
53
|
/**
|
|
24
|
-
* Function to be executed when the icon
|
|
54
|
+
* Function to be executed when the icon is double-clicked.
|
|
55
|
+
* @description
|
|
56
|
+
* This function is executed when the icon is double-clicked. It can be used to handle the
|
|
57
|
+
* double-click event.
|
|
58
|
+
* @example
|
|
59
|
+
* <Icon icons={['fa-user']} onDoubleClick={() => console.log('Icon double-clicked')} />
|
|
60
|
+
* @optional
|
|
25
61
|
*/
|
|
26
62
|
onDoubleClick?: MouseEventHandler<HTMLSpanElement>;
|
|
27
63
|
/**
|
|
28
|
-
* Function to be executed when
|
|
64
|
+
* Function to be executed when the icon is pressed.
|
|
65
|
+
* @description
|
|
66
|
+
* This function is executed when the icon is pressed. It can be used to handle the mouse down event.
|
|
67
|
+
* @example
|
|
68
|
+
* <Icon icons={['fa-user']} onMouseDown={() => console.log('Icon pressed')} />
|
|
69
|
+
* @optional
|
|
29
70
|
*/
|
|
30
71
|
onMouseDown?: MouseEventHandler<HTMLSpanElement>;
|
|
31
72
|
/**
|
|
32
|
-
*
|
|
73
|
+
* The size of the icon.
|
|
74
|
+
* @description
|
|
75
|
+
* This property can be used to set the size of the icon. The size must be specified as a number
|
|
76
|
+
* in pixels.
|
|
77
|
+
* @default 15
|
|
78
|
+
* @example
|
|
79
|
+
* <Icon icons={['fa-user']} size={20} />
|
|
80
|
+
* @optional
|
|
33
81
|
*/
|
|
34
82
|
size?: number;
|
|
35
83
|
/**
|
|
36
|
-
* Stops event propagation on click
|
|
84
|
+
* Stops event propagation on click.
|
|
85
|
+
* @description
|
|
86
|
+
* This property can be used to prevent the icon from propagating the click event to its parent
|
|
87
|
+
* elements.
|
|
88
|
+
* @example
|
|
89
|
+
* <Icon icons={['fa-user']} shouldStopPropagation />
|
|
90
|
+
* @optional
|
|
37
91
|
*/
|
|
38
92
|
shouldStopPropagation?: boolean;
|
|
39
93
|
};
|
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.1350",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "4c7934bea3ce5572df7733665bec5cae90566e16"
|
|
90
90
|
}
|