@foxford/ui 2.129.0 → 2.131.0

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.
@@ -1,2 +1,2 @@
1
- 'use strict';var React=require('react');var styled=require('styled-components');var useClassname=require('../../hooks/useClassname.js');var misc=require('../../shared/utils/misc.js');var withMergedProps=require('../../hocs/withMergedProps.js');var hooks=require('./hooks.js');var sizes=require('./sizes.js');var sizesDefault=require('./sizes-default.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');var Icon=require('../Icon/Icon.js');var index=require('../../icon-pack/src/icons/CheckFill/index.js');var index$1=require('../../icon-pack/src/icons/LoaderFill/index.js');const Button=withMergedProps.withMergedProps(React.forwardRef((e,s)=>{let{size:t="m",inline:n=!0,rounded:i=!0,color:r="accent",fontColor:o="white",showContentOnStatus:a,textProps:c={},iconProps:l={},leftIconProps:u={},rightIconProps:d={},textSizes:x={},iconSizes:m={},as:p,sizeXXS:j,sizeXS:S,sizeS:z,sizeM:h,sizeL:I,sizeXL:f,className:R,children:y,content:E,fontWeight:v,icon:g,innerRef:C,..._}=e;const q=styled.useTheme();_.preset!=='default'||typeof t!='string'||_.round||(_={...sizesDefault.PROPS_BY_SIZE[t]??{},..._}),_.href&&(p='a'),_.to&&(p=q.link),_.disabled&&(p='button'),_.primary&&(r='primary'),_.secondary&&(r='atlantis');const N=useClassname.useClassname("Button",R);const P=useClassname.useClassname("Button");const T=hooks.useComputedRel(q,_);const D=hooks.useComputedLinkProps(p,_);let[Z,k]=Array.isArray(g)?g:[g];const L={size:t,sizeXXS:j,sizeXS:S,sizeS:z,sizeM:h,sizeL:I,sizeXL:f};const X={...L,as:'span',color:'inherit',weight:v??(_.preset==='brand'?800:600),lineHeight:_.preset==='brand'?1.2:1,sizes:misc.deepmerge(_.preset==='brand'?sizes.SIZES_TEXT:sizesDefault.SIZES_TEXT_DEFAULT,x)};const b={...L,color:'inherit',preset:_.preset,sizes:misc.deepmerge(sizes.SIZES_ICON,m)};const O=_.preset==='brand'&&_.success;const w=_.preset==='brand'&&_.loading;const B=typeof y!='function'&&(y||E)?jsxRuntime.jsx(Text.Text,{className:`${P}__content`,...X,...c,children:y||E}):null;return jsxRuntime.jsx(style.Root,{..._,...D,...L,inline:n,color:r,fontColor:o,rounded:i,rel:T,as:p,className:N,ref:s??C,children:typeof y=='function'?y({textProps:X,iconProps:b}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[O||w?jsxRuntime.jsxs(style.ContentWithStatus,{children:[O?jsxRuntime.jsx(Icon.Icon,{...b,...l,icon:jsxRuntime.jsx(index.CheckFill,{})}):jsxRuntime.jsx(style.IconAnimation,{children:jsxRuntime.jsx(Icon.Icon,{...b,...l,icon:jsxRuntime.jsx(index$1.LoaderFill,{})})}),a?B:null]}):null,jsxRuntime.jsxs(style.Content,{"aria-hidden":O||w,children:[Z?jsxRuntime.jsx(Icon.Icon,{className:"icon",name:typeof Z=='string'?Z:void 0,icon:typeof Z!='string'?Z:void 0,...b,...l,...u}):null,B,k?jsxRuntime.jsx(Icon.Icon,{className:"icon",name:typeof k=='string'?k:void 0,icon:typeof k!='string'?k:void 0,...b,...l,...d}):null]})]})})}),{displayName:"Button",sizes:e=>{let s=e.preset==='brand'?sizes.SIZES:sizesDefault.SIZES_DEFAULT;return e.round&&(s=e.preset==='brand'?sizes.SIZES_ROUND:sizesDefault.SIZES_ROUND_DEFAULT),s}});exports.SIZES=sizes.SIZES,exports.SIZES_ROUND=sizes.SIZES_ROUND,exports.Button=Button,exports.COMPONENT_NAME="Button";
1
+ 'use strict';var React=require('react');var styled=require('styled-components');var useClassname=require('../../hooks/useClassname.js');var misc=require('../../shared/utils/misc.js');var withMergedProps=require('../../hocs/withMergedProps.js');var hooks=require('./hooks.js');var sizes=require('./sizes.js');var sizesDefault=require('./sizes-default.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Slot=require('../Slot/Slot.js');var Text=require('../Text/Text.js');var Icon=require('../Icon/Icon.js');var index=require('../../icon-pack/src/icons/CheckFill/index.js');var index$1=require('../../icon-pack/src/icons/LoaderFill/index.js');const Button=withMergedProps.withMergedProps(React.forwardRef((e,s)=>{let{size:t="m",inline:n=!0,rounded:o=!0,color:i="accent",fontColor:r="white",showContentOnStatus:c,textProps:l={},iconProps:a={},leftIconProps:u={},rightIconProps:d={},textSizes:x={},iconSizes:p={},as:j,root:m,text:S,addonLeft:h,addonRight:R,successIcon:z,loadingIcon:f,sizeXXS:I,sizeXS:y,sizeS:g,sizeM:P,sizeL:v,sizeXL:E,className:k,children:C,content:b,fontWeight:q,icon:_,innerRef:N,...T}=e;const D=styled.useTheme();T.preset!=='default'||typeof t!='string'||T.round||(T={...sizesDefault.PROPS_BY_SIZE[t]??{},...T}),T.href&&(j='a'),T.to&&(j=D.link),T.disabled&&(j='button'),T.primary&&(i='primary'),T.secondary&&(i='atlantis');const L=useClassname.useClassname("Button",k);const Z=useClassname.useClassname("Button");const F=hooks.useComputedRel(D,T);const X=hooks.useComputedLinkProps(j,T);let[O,w]=Array.isArray(_)?_:[_];const B={size:t,sizeXXS:I,sizeXS:y,sizeS:g,sizeM:P,sizeL:v,sizeXL:E};const M={...B,as:'span',color:'inherit',weight:q??(T.preset==='brand'?800:600),lineHeight:T.preset==='brand'?1.2:1,sizes:misc.deepmerge(T.preset==='brand'?sizes.SIZES_TEXT:sizesDefault.SIZES_TEXT_DEFAULT,x)};const A={...B,color:'inherit',preset:T.preset,sizes:misc.deepmerge(sizes.SIZES_ICON,p)};const U={...A,icon:jsxRuntime.jsx(index.CheckFill,{})};const $={...A,icon:jsxRuntime.jsx(index$1.LoaderFill,{})};const W=T.preset==='brand'&&T.success;const H=T.preset==='brand'&&T.loading;const Y=jsxRuntime.jsx(Slot.Slot,{render:S,props:M,fallback:typeof C!='function'&&(C||b)?jsxRuntime.jsx(Text.Text,{className:`${Z}__content`,...M,...l,children:C||b}):null});return jsxRuntime.jsx(style.Root,{...T,...X,...B,inline:n,color:i,fontColor:r,rounded:o,rel:F,as:j,className:L,ref:s??N,children:jsxRuntime.jsx(Slot.Slot,{render:m,props:{textProps:M,iconProps:A,successIconProps:U,loadingIconProps:$},fallback:typeof C=='function'?jsxRuntime.jsx(jsxRuntime.Fragment,{children:C({textProps:M,iconProps:A})}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[W||H?jsxRuntime.jsxs(style.ContentWithStatus,{children:[jsxRuntime.jsx(Slot.Slot,W?{render:z,props:U,fallback:jsxRuntime.jsx(Icon.Icon,{...A,...a,icon:jsxRuntime.jsx(index.CheckFill,{})})}:{render:f,props:$,fallback:jsxRuntime.jsx(style.IconAnimation,{children:jsxRuntime.jsx(Icon.Icon,{...A,...a,icon:jsxRuntime.jsx(index$1.LoaderFill,{})})})}),c?Y:null]}):null,jsxRuntime.jsxs(style.Content,{"aria-hidden":W||H,children:[jsxRuntime.jsx(Slot.Slot,{render:h,props:{iconProps:A},fallback:O?jsxRuntime.jsx(Icon.Icon,{className:"icon",name:typeof O=='string'?O:void 0,icon:typeof O!='string'?O:void 0,...A,...a,...u}):null}),Y,jsxRuntime.jsx(Slot.Slot,{render:R,props:{iconProps:A},fallback:w?jsxRuntime.jsx(Icon.Icon,{className:"icon",name:typeof w=='string'?w:void 0,icon:typeof w!='string'?w:void 0,...A,...a,...d}):null})]})]})})})}),{displayName:"Button",sizes:e=>{let s=e.preset==='brand'?sizes.SIZES:sizesDefault.SIZES_DEFAULT;return e.round&&(s=e.preset==='brand'?sizes.SIZES_ROUND:sizesDefault.SIZES_ROUND_DEFAULT),s}});exports.SIZES=sizes.SIZES,exports.SIZES_ROUND=sizes.SIZES_ROUND,exports.Button=Button,exports.COMPONENT_NAME="Button";
2
2
  //# sourceMappingURL=Button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["/* eslint-disable prefer-const */\nimport { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { CheckFill, LoaderFill } from '@foxford/icon-pack'\nimport { useClassname } from 'hooks/useClassname'\nimport { deepmerge } from 'shared/utils/misc'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { Text } from 'components/Text'\nimport type { IconProps } from 'components/Icon'\nimport type { TextProps } from 'components/Text'\nimport { useComputedRel, useComputedLinkProps } from './hooks'\nimport { SIZES, SIZES_ROUND, SIZES_ICON, SIZES_TEXT } from './sizes'\nimport { SIZES_DEFAULT, SIZES_ROUND_DEFAULT, PROPS_BY_SIZE, SIZES_TEXT_DEFAULT } from './sizes-default'\nimport type { ButtonProps, Size } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Button'\n\n/**\n *\n * Контрол многоцелевого назначения.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<button\\> элемента.\n */\nconst Button: React.ForwardRefExoticComponent<ButtonProps> = withMergedProps<ButtonProps, HTMLButtonElement>(\n forwardRef<HTMLButtonElement, MergedProps<ButtonProps>>((props, ref) => {\n let {\n size = 'm',\n inline = true,\n rounded = true,\n color = 'accent',\n fontColor = 'white',\n showContentOnStatus,\n textProps: textPropsProp = {},\n iconProps: iconPropsProp = {},\n leftIconProps = {},\n rightIconProps = {},\n textSizes = {},\n iconSizes = {},\n as: _as,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n className,\n children,\n content,\n fontWeight,\n icon,\n innerRef,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n if (restProps.preset === 'default' && typeof size === 'string' && !restProps.round) {\n const propsBySize = PROPS_BY_SIZE[size as Size] ?? {}\n restProps = { ...propsBySize, ...restProps }\n }\n\n if (restProps.href) _as = 'a'\n if (restProps.to) _as = theme.link\n if (restProps.disabled) _as = 'button'\n\n if (restProps.primary) color = 'primary'\n if (restProps.secondary) color = 'atlantis'\n\n const rootClassName = useClassname(COMPONENT_NAME, className)\n const textClassName = useClassname(COMPONENT_NAME)\n const rel = useComputedRel(theme, restProps)\n const linkProps = useComputedLinkProps(_as, restProps)\n\n let [before, after] = Array.isArray(icon) ? icon : [icon]\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const textProps: TextProps = {\n ...sizeProps,\n as: 'span',\n color: 'inherit',\n weight: fontWeight ?? (restProps.preset === 'brand' ? 800 : 600),\n lineHeight: restProps.preset === 'brand' ? 1.2 : 1,\n sizes: deepmerge(restProps.preset === 'brand' ? SIZES_TEXT : SIZES_TEXT_DEFAULT, textSizes),\n }\n\n const iconProps: IconProps = {\n ...sizeProps,\n color: 'inherit',\n preset: restProps.preset,\n sizes: deepmerge(SIZES_ICON, iconSizes),\n }\n\n const success = restProps.preset === 'brand' && restProps.success\n const loading = restProps.preset === 'brand' && restProps.loading\n\n const mainContent =\n typeof children !== 'function' && (children || content) ? (\n <Text className={`${textClassName}__content`} {...textProps} {...textPropsProp}>\n {children || content}\n </Text>\n ) : null\n\n return (\n <Styled.Root\n {...restProps}\n {...linkProps}\n {...sizeProps}\n inline={inline}\n color={color}\n fontColor={fontColor}\n rounded={rounded}\n rel={rel}\n as={_as}\n className={rootClassName}\n ref={ref ?? innerRef}\n >\n {typeof children === 'function' ? (\n children({ textProps, iconProps })\n ) : (\n <>\n {success || loading ? (\n <Styled.ContentWithStatus>\n {success ? (\n <Icon {...iconProps} {...iconPropsProp} icon={<CheckFill />} />\n ) : (\n <Styled.IconAnimation>\n <Icon {...iconProps} {...iconPropsProp} icon={<LoaderFill />} />\n </Styled.IconAnimation>\n )}\n {showContentOnStatus ? mainContent : null}\n </Styled.ContentWithStatus>\n ) : null}\n <Styled.Content aria-hidden={success || loading}>\n {before ? (\n <Icon\n className='icon'\n name={typeof before === 'string' ? before : undefined}\n icon={typeof before !== 'string' ? before : undefined}\n {...iconProps}\n {...iconPropsProp}\n {...leftIconProps}\n />\n ) : null}\n {mainContent}\n {after ? (\n <Icon\n className='icon'\n name={typeof after === 'string' ? after : undefined}\n icon={typeof after !== 'string' ? after : undefined}\n {...iconProps}\n {...iconPropsProp}\n {...rightIconProps}\n />\n ) : null}\n </Styled.Content>\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => {\n let sizes = props.preset === 'brand' ? SIZES : SIZES_DEFAULT\n if (props.round) sizes = props.preset === 'brand' ? SIZES_ROUND : SIZES_ROUND_DEFAULT\n\n return sizes\n },\n }\n)\n\nexport { Button, COMPONENT_NAME, SIZES, SIZES_ROUND }\n\nexport type { ButtonProps }\n"],"names":["Button","withMergedProps","forwardRef","props","ref","size","inline","rounded","color","fontColor","showContentOnStatus","textProps","textPropsProp","iconProps","iconPropsProp","leftIconProps","rightIconProps","textSizes","iconSizes","as","_as","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","className","children","content","fontWeight","icon","innerRef","restProps","theme","useTheme","preset","round","PROPS_BY_SIZE","href","to","link","disabled","primary","secondary","rootClassName","useClassname","textClassName","rel","useComputedRel","linkProps","useComputedLinkProps","before","after","Array","isArray","sizeProps","weight","lineHeight","sizes","deepmerge","SIZES_TEXT","SIZES_TEXT_DEFAULT","SIZES_ICON","success","loading","mainContent","_jsx","Text","Styled","_jsxs","_Fragment","Icon","CheckFill","LoaderFill","name","undefined","displayName","SIZES","SIZES_DEFAULT","SIZES_ROUND","SIZES_ROUND_DEFAULT"],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["/* eslint-disable prefer-const */\nimport { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { CheckFill, LoaderFill } from '@foxford/icon-pack'\nimport { useClassname } from 'hooks/useClassname'\nimport { deepmerge } from 'shared/utils/misc'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { Text } from 'components/Text'\nimport { Slot } from 'components/Slot'\nimport type { IconProps } from 'components/Icon'\nimport type { TextProps } from 'components/Text'\nimport { useComputedRel, useComputedLinkProps } from './hooks'\nimport { SIZES, SIZES_ROUND, SIZES_ICON, SIZES_TEXT } from './sizes'\nimport { SIZES_DEFAULT, SIZES_ROUND_DEFAULT, PROPS_BY_SIZE, SIZES_TEXT_DEFAULT } from './sizes-default'\nimport type { ButtonProps, Size } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Button'\n\n/**\n *\n * Контрол многоцелевого назначения.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<button\\> элемента.\n */\nconst Button: React.ForwardRefExoticComponent<ButtonProps> = withMergedProps<ButtonProps, HTMLButtonElement>(\n forwardRef<HTMLButtonElement, MergedProps<ButtonProps>>((props, ref) => {\n let {\n size = 'm',\n inline = true,\n rounded = true,\n color = 'accent',\n fontColor = 'white',\n showContentOnStatus,\n textProps: textPropsProp = {},\n iconProps: iconPropsProp = {},\n leftIconProps = {},\n rightIconProps = {},\n textSizes = {},\n iconSizes = {},\n as: _as,\n root,\n text,\n addonLeft,\n addonRight,\n successIcon,\n loadingIcon,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n className,\n children,\n content,\n fontWeight,\n icon,\n innerRef,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n if (restProps.preset === 'default' && typeof size === 'string' && !restProps.round) {\n const propsBySize = PROPS_BY_SIZE[size as Size] ?? {}\n restProps = { ...propsBySize, ...restProps }\n }\n\n if (restProps.href) _as = 'a'\n if (restProps.to) _as = theme.link\n if (restProps.disabled) _as = 'button'\n\n if (restProps.primary) color = 'primary'\n if (restProps.secondary) color = 'atlantis'\n\n const rootClassName = useClassname(COMPONENT_NAME, className)\n const textClassName = useClassname(COMPONENT_NAME)\n const rel = useComputedRel(theme, restProps)\n const linkProps = useComputedLinkProps(_as, restProps)\n\n let [before, after] = Array.isArray(icon) ? icon : [icon]\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const textProps: TextProps = {\n ...sizeProps,\n as: 'span',\n color: 'inherit',\n weight: fontWeight ?? (restProps.preset === 'brand' ? 800 : 600),\n lineHeight: restProps.preset === 'brand' ? 1.2 : 1,\n sizes: deepmerge(restProps.preset === 'brand' ? SIZES_TEXT : SIZES_TEXT_DEFAULT, textSizes),\n }\n\n const iconProps: IconProps = {\n ...sizeProps,\n color: 'inherit',\n preset: restProps.preset,\n sizes: deepmerge(SIZES_ICON, iconSizes),\n }\n\n const successIconProps: IconProps = {\n ...iconProps,\n icon: <CheckFill />,\n }\n\n const loadingIconProps: IconProps = {\n ...iconProps,\n icon: <LoaderFill />,\n }\n\n const success = restProps.preset === 'brand' && restProps.success\n const loading = restProps.preset === 'brand' && restProps.loading\n\n const mainContent = (\n <Slot\n render={text}\n props={textProps}\n fallback={\n typeof children !== 'function' && (children || content) ? (\n <Text className={`${textClassName}__content`} {...textProps} {...textPropsProp}>\n {children || content}\n </Text>\n ) : null\n }\n />\n )\n\n return (\n <Styled.Root\n {...restProps}\n {...linkProps}\n {...sizeProps}\n inline={inline}\n color={color}\n fontColor={fontColor}\n rounded={rounded}\n rel={rel}\n as={_as}\n className={rootClassName}\n ref={ref ?? innerRef}\n >\n <Slot\n render={root}\n props={{\n textProps,\n iconProps,\n successIconProps,\n loadingIconProps,\n }}\n fallback={\n typeof children === 'function' ? (\n <>{children({ textProps, iconProps })}</>\n ) : (\n <>\n {success || loading ? (\n <Styled.ContentWithStatus>\n {success ? (\n <Slot\n render={successIcon}\n props={successIconProps}\n fallback={<Icon {...iconProps} {...iconPropsProp} icon={<CheckFill />} />}\n />\n ) : (\n <Slot\n render={loadingIcon}\n props={loadingIconProps}\n fallback={\n <Styled.IconAnimation>\n <Icon {...iconProps} {...iconPropsProp} icon={<LoaderFill />} />\n </Styled.IconAnimation>\n }\n />\n )}\n {showContentOnStatus ? mainContent : null}\n </Styled.ContentWithStatus>\n ) : null}\n <Styled.Content aria-hidden={success || loading}>\n <Slot\n render={addonLeft}\n props={{\n iconProps,\n }}\n fallback={\n before ? (\n <Icon\n className='icon'\n name={typeof before === 'string' ? before : undefined}\n icon={typeof before !== 'string' ? before : undefined}\n {...iconProps}\n {...iconPropsProp}\n {...leftIconProps}\n />\n ) : null\n }\n />\n {mainContent}\n <Slot\n render={addonRight}\n props={{\n iconProps,\n }}\n fallback={\n after ? (\n <Icon\n className='icon'\n name={typeof after === 'string' ? after : undefined}\n icon={typeof after !== 'string' ? after : undefined}\n {...iconProps}\n {...iconPropsProp}\n {...rightIconProps}\n />\n ) : null\n }\n />\n </Styled.Content>\n </>\n )\n }\n />\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => {\n let sizes = props.preset === 'brand' ? SIZES : SIZES_DEFAULT\n if (props.round) sizes = props.preset === 'brand' ? SIZES_ROUND : SIZES_ROUND_DEFAULT\n\n return sizes\n },\n }\n)\n\nexport { Button, COMPONENT_NAME, SIZES, SIZES_ROUND }\n\nexport type { ButtonProps }\n"],"names":["Button","withMergedProps","forwardRef","props","ref","size","inline","rounded","color","fontColor","showContentOnStatus","textProps","textPropsProp","iconProps","iconPropsProp","leftIconProps","rightIconProps","textSizes","iconSizes","as","_as","root","text","addonLeft","addonRight","successIcon","loadingIcon","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","className","children","content","fontWeight","icon","innerRef","restProps","theme","useTheme","preset","round","PROPS_BY_SIZE","href","to","link","disabled","primary","secondary","rootClassName","useClassname","textClassName","rel","useComputedRel","linkProps","useComputedLinkProps","before","after","Array","isArray","sizeProps","weight","lineHeight","sizes","deepmerge","SIZES_TEXT","SIZES_TEXT_DEFAULT","SIZES_ICON","successIconProps","_jsx","CheckFill","loadingIconProps","LoaderFill","success","loading","mainContent","Slot","render","fallback","Text","Styled","_Fragment","_jsxs","Icon","name","undefined","displayName","SIZES","SIZES_DEFAULT","SIZES_ROUND","SIZES_ROUND_DEFAULT"],"mappings":"kqBA2BA,MAAMA,OAAuDC,gBAAAA,gBAC3DC,MAAAA,WAAwD,CAACC,EAAOC,KAC9D,IAAIC,KACFA,EAAO,IAAGC,OACVA,GAAS,EAAIC,QACbA,GAAU,EAAIC,MACdA,EAAQ,SAAQC,UAChBA,EAAY,QAAOC,oBACnBA,EACAC,UAAWC,EAAgB,CAAA,EAC3BC,UAAWC,EAAgB,CAAA,EAAEC,cAC7BA,EAAgB,CAAA,EAAEC,eAClBA,EAAiB,CAAA,EAAEC,UACnBA,EAAY,CAAA,EAAEC,UACdA,EAAY,CAAA,EACZC,GAAIC,EAAGC,KACPA,EAAIC,KACJA,EAAIC,UACJA,EAASC,WACTA,EAAUC,YACVA,EAAWC,YACXA,EAAWC,QACXA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,UACNA,EAASC,SACTA,EAAQC,QACRA,EAAOC,WACPA,EAAUC,KACVA,EAAIC,SACJA,KACGC,GACDpC,EAEJ,MAAMqC,EAAQC,OAAAA,WAEVF,EAAUG,SAAW,kBAAoBrC,GAAS,UAAakC,EAAUI,QAE3EJ,EAAY,IADQK,aAAAA,cAAcvC,IAAiB,CAAA,KAClBkC,IAG/BA,EAAUM,OAAMzB,EAAM,KACtBmB,EAAUO,KAAI1B,EAAMoB,EAAMO,MAC1BR,EAAUS,WAAU5B,EAAM,UAE1BmB,EAAUU,UAASzC,EAAQ,WAC3B+B,EAAUW,YAAW1C,EAAQ,YAEjC,MAAM2C,EAAgBC,aAAAA,aA3DH,SA2DgCnB,GACnD,MAAMoB,EAAgBD,aAAAA,aA5DH,UA6DnB,MAAME,EAAMC,MAAAA,eAAef,EAAOD,GAClC,MAAMiB,EAAYC,MAAAA,qBAAqBrC,EAAKmB,GAE5C,IAAKmB,EAAQC,GAASC,MAAMC,QAAQxB,GAAQA,EAAO,CAACA,GAEpD,MAAMyB,EAAY,CAChBzD,OACAsB,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMrB,EAAuB,IACxBmD,EACH3C,GAAI,OACJX,MAAO,UACPuD,OAAQ3B,IAAeG,EAAUG,SAAW,QAAU,IAAM,KAC5DsB,WAAYzB,EAAUG,SAAW,QAAU,IAAM,EACjDuB,MAAOC,KAAAA,UAAU3B,EAAUG,SAAW,QAAUyB,MAAAA,WAAaC,aAAAA,mBAAoBnD,IAGnF,MAAMJ,EAAuB,IACxBiD,EACHtD,MAAO,UACPkC,OAAQH,EAAUG,OAClBuB,MAAOC,KAAAA,UAAUG,MAAAA,WAAYnD,IAG/B,MAAMoD,EAA8B,IAC/BzD,EACHwB,KAAMkC,WAAAA,IAACC,MAAAA,UAAS,CAAA,IAGlB,MAAMC,EAA8B,IAC/B5D,EACHwB,KAAMkC,WAAAA,IAACG,QAAAA,WAAU,CAAA,IAGnB,MAAMC,EAAUpC,EAAUG,SAAW,SAAWH,EAAUoC,QAC1D,MAAMC,EAAUrC,EAAUG,SAAW,SAAWH,EAAUqC,QAE1D,MAAMC,EACJN,WAAAA,IAACO,UAAI,CACHC,OAAQzD,EACRnB,MAAOQ,EACPqE,gBACS9C,GAAa,aAAeA,GAAYC,GAC7CoC,WAAAA,IAACU,UAAI,CAAChD,UAAW,GAAGoB,gBAA8B1C,KAAeC,EAAasB,SAC3EA,GAAYC,IAEb,OAKV,OACEoC,WAAAA,IAACW,MAAAA,KAAW,IACN3C,KACAiB,KACAM,EACJxD,OAAQA,EACRE,MAAOA,EACPC,UAAWA,EACXF,QAASA,EACT+C,IAAKA,EACLnC,GAAIC,EACJa,UAAWkB,EACX/C,IAAKA,GAAOkC,EAASJ,SAErBqC,WAAAA,IAACO,UAAI,CACHC,OAAQ1D,EACRlB,MAAO,CACLQ,YACAE,YACAyD,mBACAG,oBAEFO,gBACS9C,GAAa,WAClBqC,WAAAA,IAAAY,WAAAA,SAAA,CAAAjD,SAAGA,EAAS,CAAEvB,YAAWE,gBAEzBuE,WAAAA,KAAAD,oBAAA,CAAAjD,SAAA,CACGyC,GAAWC,EACVQ,WAAAA,KAACF,MAAAA,kBAAwB,CAAAhD,SAAA,CAErBqC,WAAAA,IAACO,UADFH,EACM,CACHI,OAAQtD,EACRtB,MAAOmE,EACPU,SAAUT,WAAAA,IAACc,UAAI,IAAKxE,KAAeC,EAAeuB,KAAMkC,WAAAA,IAACC,MAAAA,UAAS,CAAA,MAG/D,CACHO,OAAQrD,EACRvB,MAAOsE,EACPO,SACET,WAAAA,IAACW,oBAAoB,CAAAhD,SACnBqC,WAAAA,IAACc,UAAI,IAAKxE,KAAeC,EAAeuB,KAAMkC,WAAAA,IAACG,QAAAA,WAAU,CAAA,SAKhEhE,EAAsBmE,EAAc,QAErC,KACJO,WAAAA,KAACF,cAAc,CAAC,cAAaP,GAAWC,EAAQ1C,SAAA,CAC9CqC,WAAAA,IAACO,UAAI,CACHC,OAAQxD,EACRpB,MAAO,CACLU,aAEFmE,SACEtB,EACEa,WAAAA,IAACc,UAAI,CACHpD,UAAU,OACVqD,YAAa5B,GAAW,SAAWA,OAAS6B,EAC5ClD,YAAaqB,GAAW,SAAWA,OAAS6B,KACxC1E,KACAC,KACAC,IAEJ,OAGP8D,EACDN,WAAAA,IAACO,UAAI,CACHC,OAAQvD,EACRrB,MAAO,CACLU,aAEFmE,SACErB,EACEY,WAAAA,IAACc,UAAI,CACHpD,UAAU,OACVqD,YAAa3B,GAAU,SAAWA,OAAQ4B,EAC1ClD,YAAasB,GAAU,SAAWA,OAAQ4B,KACtC1E,KACAC,KACAE,IAEJ,mBAWxB,CACEwE,YAvNmB,SAwNnBvB,MAAQ9D,IACN,IAAI8D,EAAQ9D,EAAMuC,SAAW,QAAU+C,MAAAA,MAAQC,aAAAA,cAG/C,OAFIvF,EAAMwC,QAAOsB,EAAQ9D,EAAMuC,SAAW,QAAUiD,MAAAA,YAAcC,aAAAA,qBAE3D3B,kHA5NU"}
@@ -1,2 +1,2 @@
1
- import{forwardRef}from'react';import{useTheme}from'styled-components';import{useClassname}from'../../hooks/useClassname.mjs';import{deepmerge}from'../../shared/utils/misc.mjs';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useComputedRel,useComputedLinkProps}from'./hooks.mjs';import{SIZES,SIZES_ROUND,SIZES_TEXT,SIZES_ICON}from'./sizes.mjs';import{SIZES_DEFAULT,SIZES_ROUND_DEFAULT,PROPS_BY_SIZE,SIZES_TEXT_DEFAULT}from'./sizes-default.mjs';import{Root,ContentWithStatus,IconAnimation,Content}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{Text}from'../Text/Text.mjs';import{Icon}from'../Icon/Icon.mjs';import{CheckFill}from'../../icon-pack/src/icons/CheckFill/index.mjs';import{LoaderFill}from'../../icon-pack/src/icons/LoaderFill/index.mjs';const COMPONENT_NAME='Button';const Button=withMergedProps(forwardRef((e,s)=>{let{size:o="m",inline:t=!0,rounded:n=!0,color:r="accent",fontColor:i="white",showContentOnStatus:c,textProps:m={},iconProps:a={},leftIconProps:l={},rightIconProps:p={},textSizes:d={},iconSizes:S={},as:u,sizeXXS:f,sizeXS:E,sizeS:h,sizeM:I,sizeL:j,sizeXL:x,className:_,children:C,content:T,fontWeight:z,icon:N,innerRef:g,...Z}=e;const P=useTheme();Z.preset!=='default'||typeof o!='string'||Z.round||(Z={...PROPS_BY_SIZE[o]??{},...Z}),Z.href&&(u='a'),Z.to&&(u=P.link),Z.disabled&&(u='button'),Z.primary&&(r='primary'),Z.secondary&&(r='atlantis');const y=useClassname("Button",_);const L=useClassname("Button");const F=useComputedRel(P,Z);const O=useComputedLinkProps(u,Z);let[R,A]=Array.isArray(N)?N:[N];const X={size:o,sizeXXS:f,sizeXS:E,sizeS:h,sizeM:I,sizeL:j,sizeXL:x};const D={...X,as:'span',color:'inherit',weight:z??(Z.preset==='brand'?800:600),lineHeight:Z.preset==='brand'?1.2:1,sizes:deepmerge(Z.preset==='brand'?SIZES_TEXT:SIZES_TEXT_DEFAULT,d)};const U={...X,color:'inherit',preset:Z.preset,sizes:deepmerge(SIZES_ICON,S)};const k=Z.preset==='brand'&&Z.success;const b=Z.preset==='brand'&&Z.loading;const M=typeof C!='function'&&(C||T)?jsx(Text,{className:`${L}__content`,...D,...m,children:C||T}):null;return jsx(Root,{...Z,...O,...X,inline:t,color:r,fontColor:i,rounded:n,rel:F,as:u,className:y,ref:s??g,children:typeof C=='function'?C({textProps:D,iconProps:U}):jsxs(Fragment,{children:[k||b?jsxs(ContentWithStatus,{children:[k?jsx(Icon,{...U,...a,icon:jsx(CheckFill,{})}):jsx(IconAnimation,{children:jsx(Icon,{...U,...a,icon:jsx(LoaderFill,{})})}),c?M:null]}):null,jsxs(Content,{"aria-hidden":k||b,children:[R?jsx(Icon,{className:"icon",name:typeof R=='string'?R:void 0,icon:typeof R!='string'?R:void 0,...U,...a,...l}):null,M,A?jsx(Icon,{className:"icon",name:typeof A=='string'?A:void 0,icon:typeof A!='string'?A:void 0,...U,...a,...p}):null]})]})})}),{displayName:"Button",sizes:e=>{let s=e.preset==='brand'?SIZES:SIZES_DEFAULT;return e.round&&(s=e.preset==='brand'?SIZES_ROUND:SIZES_ROUND_DEFAULT),s}});export{Button,COMPONENT_NAME,SIZES,SIZES_ROUND};
1
+ import{forwardRef}from'react';import{useTheme}from'styled-components';import{useClassname}from'../../hooks/useClassname.mjs';import{deepmerge}from'../../shared/utils/misc.mjs';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useComputedRel,useComputedLinkProps}from'./hooks.mjs';import{SIZES,SIZES_ROUND,SIZES_TEXT,SIZES_ICON}from'./sizes.mjs';import{SIZES_DEFAULT,SIZES_ROUND_DEFAULT,PROPS_BY_SIZE,SIZES_TEXT_DEFAULT}from'./sizes-default.mjs';import{Root,ContentWithStatus,IconAnimation,Content}from'./style.mjs';import{jsx,Fragment,jsxs}from'react/jsx-runtime';import{Slot}from'../Slot/Slot.mjs';import{Text}from'../Text/Text.mjs';import{Icon}from'../Icon/Icon.mjs';import{CheckFill}from'../../icon-pack/src/icons/CheckFill/index.mjs';import{LoaderFill}from'../../icon-pack/src/icons/LoaderFill/index.mjs';const COMPONENT_NAME='Button';const Button=withMergedProps(forwardRef((o,e)=>{let{size:s="m",inline:t=!0,rounded:n=!0,color:r="accent",fontColor:i="white",showContentOnStatus:c,textProps:l={},iconProps:a={},leftIconProps:p={},rightIconProps:m={},textSizes:d={},iconSizes:S={},as:f,root:u,text:j,addonLeft:x,addonRight:I,successIcon:h,loadingIcon:E,sizeXXS:_,sizeXS:C,sizeS:P,sizeM:g,sizeL:T,sizeXL:z,className:N,children:Z,content:k,fontWeight:F,icon:L,innerRef:b,...y}=o;const R=useTheme();y.preset!=='default'||typeof s!='string'||y.round||(y={...PROPS_BY_SIZE[s]??{},...y}),y.href&&(f='a'),y.to&&(f=R.link),y.disabled&&(f='button'),y.primary&&(r='primary'),y.secondary&&(r='atlantis');const O=useClassname("Button",N);const A=useClassname("Button");const X=useComputedRel(R,y);const D=useComputedLinkProps(f,y);let[U,M]=Array.isArray(L)?L:[L];const w={size:s,sizeXXS:_,sizeXS:C,sizeS:P,sizeM:g,sizeL:T,sizeXL:z};const B={...w,as:'span',color:'inherit',weight:F??(y.preset==='brand'?800:600),lineHeight:y.preset==='brand'?1.2:1,sizes:deepmerge(y.preset==='brand'?SIZES_TEXT:SIZES_TEXT_DEFAULT,d)};const v={...w,color:'inherit',preset:y.preset,sizes:deepmerge(SIZES_ICON,S)};const W={...v,icon:jsx(CheckFill,{})};const Y={...v,icon:jsx(LoaderFill,{})};const H=y.preset==='brand'&&y.success;const $=y.preset==='brand'&&y.loading;const q=jsx(Slot,{render:j,props:B,fallback:typeof Z!='function'&&(Z||k)?jsx(Text,{className:`${A}__content`,...B,...l,children:Z||k}):null});return jsx(Root,{...y,...D,...w,inline:t,color:r,fontColor:i,rounded:n,rel:X,as:f,className:O,ref:e??b,children:jsx(Slot,{render:u,props:{textProps:B,iconProps:v,successIconProps:W,loadingIconProps:Y},fallback:typeof Z=='function'?jsx(Fragment,{children:Z({textProps:B,iconProps:v})}):jsxs(Fragment,{children:[H||$?jsxs(ContentWithStatus,{children:[jsx(Slot,H?{render:h,props:W,fallback:jsx(Icon,{...v,...a,icon:jsx(CheckFill,{})})}:{render:E,props:Y,fallback:jsx(IconAnimation,{children:jsx(Icon,{...v,...a,icon:jsx(LoaderFill,{})})})}),c?q:null]}):null,jsxs(Content,{"aria-hidden":H||$,children:[jsx(Slot,{render:x,props:{iconProps:v},fallback:U?jsx(Icon,{className:"icon",name:typeof U=='string'?U:void 0,icon:typeof U!='string'?U:void 0,...v,...a,...p}):null}),q,jsx(Slot,{render:I,props:{iconProps:v},fallback:M?jsx(Icon,{className:"icon",name:typeof M=='string'?M:void 0,icon:typeof M!='string'?M:void 0,...v,...a,...m}):null})]})]})})})}),{displayName:"Button",sizes:o=>{let e=o.preset==='brand'?SIZES:SIZES_DEFAULT;return o.round&&(e=o.preset==='brand'?SIZES_ROUND:SIZES_ROUND_DEFAULT),e}});export{Button,COMPONENT_NAME,SIZES,SIZES_ROUND};
2
2
  //# sourceMappingURL=Button.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.mjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["/* eslint-disable prefer-const */\nimport { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { CheckFill, LoaderFill } from '@foxford/icon-pack'\nimport { useClassname } from 'hooks/useClassname'\nimport { deepmerge } from 'shared/utils/misc'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { Text } from 'components/Text'\nimport type { IconProps } from 'components/Icon'\nimport type { TextProps } from 'components/Text'\nimport { useComputedRel, useComputedLinkProps } from './hooks'\nimport { SIZES, SIZES_ROUND, SIZES_ICON, SIZES_TEXT } from './sizes'\nimport { SIZES_DEFAULT, SIZES_ROUND_DEFAULT, PROPS_BY_SIZE, SIZES_TEXT_DEFAULT } from './sizes-default'\nimport type { ButtonProps, Size } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Button'\n\n/**\n *\n * Контрол многоцелевого назначения.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<button\\> элемента.\n */\nconst Button: React.ForwardRefExoticComponent<ButtonProps> = withMergedProps<ButtonProps, HTMLButtonElement>(\n forwardRef<HTMLButtonElement, MergedProps<ButtonProps>>((props, ref) => {\n let {\n size = 'm',\n inline = true,\n rounded = true,\n color = 'accent',\n fontColor = 'white',\n showContentOnStatus,\n textProps: textPropsProp = {},\n iconProps: iconPropsProp = {},\n leftIconProps = {},\n rightIconProps = {},\n textSizes = {},\n iconSizes = {},\n as: _as,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n className,\n children,\n content,\n fontWeight,\n icon,\n innerRef,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n if (restProps.preset === 'default' && typeof size === 'string' && !restProps.round) {\n const propsBySize = PROPS_BY_SIZE[size as Size] ?? {}\n restProps = { ...propsBySize, ...restProps }\n }\n\n if (restProps.href) _as = 'a'\n if (restProps.to) _as = theme.link\n if (restProps.disabled) _as = 'button'\n\n if (restProps.primary) color = 'primary'\n if (restProps.secondary) color = 'atlantis'\n\n const rootClassName = useClassname(COMPONENT_NAME, className)\n const textClassName = useClassname(COMPONENT_NAME)\n const rel = useComputedRel(theme, restProps)\n const linkProps = useComputedLinkProps(_as, restProps)\n\n let [before, after] = Array.isArray(icon) ? icon : [icon]\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const textProps: TextProps = {\n ...sizeProps,\n as: 'span',\n color: 'inherit',\n weight: fontWeight ?? (restProps.preset === 'brand' ? 800 : 600),\n lineHeight: restProps.preset === 'brand' ? 1.2 : 1,\n sizes: deepmerge(restProps.preset === 'brand' ? SIZES_TEXT : SIZES_TEXT_DEFAULT, textSizes),\n }\n\n const iconProps: IconProps = {\n ...sizeProps,\n color: 'inherit',\n preset: restProps.preset,\n sizes: deepmerge(SIZES_ICON, iconSizes),\n }\n\n const success = restProps.preset === 'brand' && restProps.success\n const loading = restProps.preset === 'brand' && restProps.loading\n\n const mainContent =\n typeof children !== 'function' && (children || content) ? (\n <Text className={`${textClassName}__content`} {...textProps} {...textPropsProp}>\n {children || content}\n </Text>\n ) : null\n\n return (\n <Styled.Root\n {...restProps}\n {...linkProps}\n {...sizeProps}\n inline={inline}\n color={color}\n fontColor={fontColor}\n rounded={rounded}\n rel={rel}\n as={_as}\n className={rootClassName}\n ref={ref ?? innerRef}\n >\n {typeof children === 'function' ? (\n children({ textProps, iconProps })\n ) : (\n <>\n {success || loading ? (\n <Styled.ContentWithStatus>\n {success ? (\n <Icon {...iconProps} {...iconPropsProp} icon={<CheckFill />} />\n ) : (\n <Styled.IconAnimation>\n <Icon {...iconProps} {...iconPropsProp} icon={<LoaderFill />} />\n </Styled.IconAnimation>\n )}\n {showContentOnStatus ? mainContent : null}\n </Styled.ContentWithStatus>\n ) : null}\n <Styled.Content aria-hidden={success || loading}>\n {before ? (\n <Icon\n className='icon'\n name={typeof before === 'string' ? before : undefined}\n icon={typeof before !== 'string' ? before : undefined}\n {...iconProps}\n {...iconPropsProp}\n {...leftIconProps}\n />\n ) : null}\n {mainContent}\n {after ? (\n <Icon\n className='icon'\n name={typeof after === 'string' ? after : undefined}\n icon={typeof after !== 'string' ? after : undefined}\n {...iconProps}\n {...iconPropsProp}\n {...rightIconProps}\n />\n ) : null}\n </Styled.Content>\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => {\n let sizes = props.preset === 'brand' ? SIZES : SIZES_DEFAULT\n if (props.round) sizes = props.preset === 'brand' ? SIZES_ROUND : SIZES_ROUND_DEFAULT\n\n return sizes\n },\n }\n)\n\nexport { Button, COMPONENT_NAME, SIZES, SIZES_ROUND }\n\nexport type { ButtonProps }\n"],"names":["COMPONENT_NAME","Button","withMergedProps","forwardRef","props","ref","size","inline","rounded","color","fontColor","showContentOnStatus","textProps","textPropsProp","iconProps","iconPropsProp","leftIconProps","rightIconProps","textSizes","iconSizes","as","_as","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","className","children","content","fontWeight","icon","innerRef","restProps","theme","useTheme","preset","round","PROPS_BY_SIZE","href","to","link","disabled","primary","secondary","rootClassName","useClassname","textClassName","rel","useComputedRel","linkProps","useComputedLinkProps","before","after","Array","isArray","sizeProps","weight","lineHeight","sizes","deepmerge","SIZES_TEXT","SIZES_TEXT_DEFAULT","SIZES_ICON","success","loading","mainContent","_jsx","Text","Styled","_jsxs","_Fragment","Icon","CheckFill","LoaderFill","name","undefined","displayName","SIZES","SIZES_DEFAULT","SIZES_ROUND","SIZES_ROUND_DEFAULT"],"mappings":"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"}
1
+ {"version":3,"file":"Button.mjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["/* eslint-disable prefer-const */\nimport { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { CheckFill, LoaderFill } from '@foxford/icon-pack'\nimport { useClassname } from 'hooks/useClassname'\nimport { deepmerge } from 'shared/utils/misc'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { Text } from 'components/Text'\nimport { Slot } from 'components/Slot'\nimport type { IconProps } from 'components/Icon'\nimport type { TextProps } from 'components/Text'\nimport { useComputedRel, useComputedLinkProps } from './hooks'\nimport { SIZES, SIZES_ROUND, SIZES_ICON, SIZES_TEXT } from './sizes'\nimport { SIZES_DEFAULT, SIZES_ROUND_DEFAULT, PROPS_BY_SIZE, SIZES_TEXT_DEFAULT } from './sizes-default'\nimport type { ButtonProps, Size } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Button'\n\n/**\n *\n * Контрол многоцелевого назначения.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<button\\> элемента.\n */\nconst Button: React.ForwardRefExoticComponent<ButtonProps> = withMergedProps<ButtonProps, HTMLButtonElement>(\n forwardRef<HTMLButtonElement, MergedProps<ButtonProps>>((props, ref) => {\n let {\n size = 'm',\n inline = true,\n rounded = true,\n color = 'accent',\n fontColor = 'white',\n showContentOnStatus,\n textProps: textPropsProp = {},\n iconProps: iconPropsProp = {},\n leftIconProps = {},\n rightIconProps = {},\n textSizes = {},\n iconSizes = {},\n as: _as,\n root,\n text,\n addonLeft,\n addonRight,\n successIcon,\n loadingIcon,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n className,\n children,\n content,\n fontWeight,\n icon,\n innerRef,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n if (restProps.preset === 'default' && typeof size === 'string' && !restProps.round) {\n const propsBySize = PROPS_BY_SIZE[size as Size] ?? {}\n restProps = { ...propsBySize, ...restProps }\n }\n\n if (restProps.href) _as = 'a'\n if (restProps.to) _as = theme.link\n if (restProps.disabled) _as = 'button'\n\n if (restProps.primary) color = 'primary'\n if (restProps.secondary) color = 'atlantis'\n\n const rootClassName = useClassname(COMPONENT_NAME, className)\n const textClassName = useClassname(COMPONENT_NAME)\n const rel = useComputedRel(theme, restProps)\n const linkProps = useComputedLinkProps(_as, restProps)\n\n let [before, after] = Array.isArray(icon) ? icon : [icon]\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const textProps: TextProps = {\n ...sizeProps,\n as: 'span',\n color: 'inherit',\n weight: fontWeight ?? (restProps.preset === 'brand' ? 800 : 600),\n lineHeight: restProps.preset === 'brand' ? 1.2 : 1,\n sizes: deepmerge(restProps.preset === 'brand' ? SIZES_TEXT : SIZES_TEXT_DEFAULT, textSizes),\n }\n\n const iconProps: IconProps = {\n ...sizeProps,\n color: 'inherit',\n preset: restProps.preset,\n sizes: deepmerge(SIZES_ICON, iconSizes),\n }\n\n const successIconProps: IconProps = {\n ...iconProps,\n icon: <CheckFill />,\n }\n\n const loadingIconProps: IconProps = {\n ...iconProps,\n icon: <LoaderFill />,\n }\n\n const success = restProps.preset === 'brand' && restProps.success\n const loading = restProps.preset === 'brand' && restProps.loading\n\n const mainContent = (\n <Slot\n render={text}\n props={textProps}\n fallback={\n typeof children !== 'function' && (children || content) ? (\n <Text className={`${textClassName}__content`} {...textProps} {...textPropsProp}>\n {children || content}\n </Text>\n ) : null\n }\n />\n )\n\n return (\n <Styled.Root\n {...restProps}\n {...linkProps}\n {...sizeProps}\n inline={inline}\n color={color}\n fontColor={fontColor}\n rounded={rounded}\n rel={rel}\n as={_as}\n className={rootClassName}\n ref={ref ?? innerRef}\n >\n <Slot\n render={root}\n props={{\n textProps,\n iconProps,\n successIconProps,\n loadingIconProps,\n }}\n fallback={\n typeof children === 'function' ? (\n <>{children({ textProps, iconProps })}</>\n ) : (\n <>\n {success || loading ? (\n <Styled.ContentWithStatus>\n {success ? (\n <Slot\n render={successIcon}\n props={successIconProps}\n fallback={<Icon {...iconProps} {...iconPropsProp} icon={<CheckFill />} />}\n />\n ) : (\n <Slot\n render={loadingIcon}\n props={loadingIconProps}\n fallback={\n <Styled.IconAnimation>\n <Icon {...iconProps} {...iconPropsProp} icon={<LoaderFill />} />\n </Styled.IconAnimation>\n }\n />\n )}\n {showContentOnStatus ? mainContent : null}\n </Styled.ContentWithStatus>\n ) : null}\n <Styled.Content aria-hidden={success || loading}>\n <Slot\n render={addonLeft}\n props={{\n iconProps,\n }}\n fallback={\n before ? (\n <Icon\n className='icon'\n name={typeof before === 'string' ? before : undefined}\n icon={typeof before !== 'string' ? before : undefined}\n {...iconProps}\n {...iconPropsProp}\n {...leftIconProps}\n />\n ) : null\n }\n />\n {mainContent}\n <Slot\n render={addonRight}\n props={{\n iconProps,\n }}\n fallback={\n after ? (\n <Icon\n className='icon'\n name={typeof after === 'string' ? after : undefined}\n icon={typeof after !== 'string' ? after : undefined}\n {...iconProps}\n {...iconPropsProp}\n {...rightIconProps}\n />\n ) : null\n }\n />\n </Styled.Content>\n </>\n )\n }\n />\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => {\n let sizes = props.preset === 'brand' ? SIZES : SIZES_DEFAULT\n if (props.round) sizes = props.preset === 'brand' ? SIZES_ROUND : SIZES_ROUND_DEFAULT\n\n return sizes\n },\n }\n)\n\nexport { Button, COMPONENT_NAME, SIZES, SIZES_ROUND }\n\nexport type { ButtonProps }\n"],"names":["COMPONENT_NAME","Button","withMergedProps","forwardRef","props","ref","size","inline","rounded","color","fontColor","showContentOnStatus","textProps","textPropsProp","iconProps","iconPropsProp","leftIconProps","rightIconProps","textSizes","iconSizes","as","_as","root","text","addonLeft","addonRight","successIcon","loadingIcon","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","className","children","content","fontWeight","icon","innerRef","restProps","theme","useTheme","preset","round","PROPS_BY_SIZE","href","to","link","disabled","primary","secondary","rootClassName","useClassname","textClassName","rel","useComputedRel","linkProps","useComputedLinkProps","before","after","Array","isArray","sizeProps","weight","lineHeight","sizes","deepmerge","SIZES_TEXT","SIZES_TEXT_DEFAULT","SIZES_ICON","successIconProps","_jsx","CheckFill","loadingIconProps","LoaderFill","success","loading","mainContent","Slot","render","fallback","Text","Styled","_Fragment","_jsxs","Icon","name","undefined","displayName","SIZES","SIZES_DEFAULT","SIZES_ROUND","SIZES_ROUND_DEFAULT"],"mappings":"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"}
package/dts/index.d.ts CHANGED
@@ -8,7 +8,7 @@ import * as rc_scrollbars from 'rc-scrollbars';
8
8
  import { ScrollbarsProps } from 'rc-scrollbars';
9
9
  import { DropEvent, FileRejection, FileError } from 'react-dropzone';
10
10
 
11
- type SemanticColorName = 'alert-bg-error-100' | 'alert-bg-error-200' | 'alert-bg-error-400' | 'alert-bg-error-500' | 'alert-bg-info-100' | 'alert-bg-info-200' | 'alert-bg-info-400' | 'alert-bg-info-500' | 'alert-bg-success-100' | 'alert-bg-success-200' | 'alert-bg-success-400' | 'alert-bg-success-500' | 'alert-bg-warning-100' | 'alert-bg-warning-200' | 'alert-bg-warning-400' | 'alert-bg-warning-500' | 'alert-error' | 'alert-info' | 'alert-success' | 'alert-warning' | 'bg-brand-additional-1-100' | 'bg-brand-additional-1-200' | 'bg-brand-additional-1-400' | 'bg-brand-additional-1-50' | 'bg-brand-additional-1-500' | 'bg-brand-additional-2-100' | 'bg-brand-additional-2-200' | 'bg-brand-additional-2-400' | 'bg-brand-additional-2-50' | 'bg-brand-additional-2-500' | 'bg-brand-additional-3-100' | 'bg-brand-additional-3-200' | 'bg-brand-additional-3-400' | 'bg-brand-additional-3-50' | 'bg-brand-additional-3-500' | 'bg-brand-additional-4-100' | 'bg-brand-additional-4-200' | 'bg-brand-additional-4-400' | 'bg-brand-additional-4-50' | 'bg-brand-additional-4-500' | 'bg-brand-primary-100' | 'bg-brand-primary-100-active' | 'bg-brand-primary-100-hover' | 'bg-brand-primary-200' | 'bg-brand-primary-400' | 'bg-brand-primary-50' | 'bg-brand-primary-500' | 'bg-brand-primary-basic' | 'bg-brand-primary-basic-active' | 'bg-brand-quaternary-100' | 'bg-brand-quaternary-200' | 'bg-brand-quaternary-400' | 'bg-brand-quaternary-50' | 'bg-brand-quaternary-500' | 'bg-brand-quaternary-basic' | 'bg-brand-secondary-100' | 'bg-brand-secondary-200' | 'bg-brand-secondary-400' | 'bg-brand-secondary-50' | 'bg-brand-secondary-500' | 'bg-brand-secondary-basic' | 'bg-brand-tertiary-100' | 'bg-brand-tertiary-200' | 'bg-brand-tertiary-400' | 'bg-brand-tertiary-50' | 'bg-brand-tertiary-500' | 'bg-brand-tertiary-basic' | 'bg-contrast-active' | 'bg-disabled-active' | 'bg-disabled-large' | 'bg-disabled-small' | 'bg-oncolor-disabled' | 'bg-oncolor-hover' | 'bg-oncolor-primary' | 'bg-oncolor-secondary' | 'bg-oncolor-tertiary' | 'bg-oncontrast-hover' | 'bg-onmain-contrast' | 'bg-onmain-divider' | 'bg-onmain-inverse' | 'bg-onmain-main' | 'bg-onmain-primary' | 'bg-onmain-secondary' | 'bg-onmain-tertiary' | 'bg-other-badge' | 'bg-other-black' | 'bg-other-overlay' | 'bg-other-shade-oncolor' | 'bg-other-shade-onmain' | 'bg-other-surface' | 'border-brand-primary' | 'border-brand-primary-active' | 'border-brand-primary-hover' | 'border-brand-secondary' | 'border-disabled' | 'border-focus' | 'border-focus-inner' | 'border-oncolor-default' | 'border-oncolor-default-large' | 'border-oncolor-disabled' | 'border-oncolor-soft-large' | 'border-oncolor-soft-small' | 'border-onmain-contrast' | 'border-onmain-default-large' | 'border-onmain-default-small' | 'border-onmain-soft-large' | 'border-onmain-soft-small' | 'content-absolute' | 'content-brand-primary' | 'content-brand-secondary' | 'content-disabled' | 'content-discount' | 'content-link' | 'content-oncolor-constant' | 'content-oncolor-disabled' | 'content-oncolor-hover' | 'content-oncolor-inverse' | 'content-oncolor-primary' | 'content-oncolor-quaternary' | 'content-oncolor-secondary' | 'content-oncolor-tertiary' | 'content-onmain-hover' | 'content-onmain-inverse' | 'content-onmain-primary' | 'content-onmain-secondary' | 'content-onmain-tertiary' | 'effect-shadow-large' | 'effect-shadow-medium' | 'effect-shadow-press' | 'effect-shadow-small' | 'external-mail' | 'external-sber' | 'external-tbank' | 'external-telegram' | 'external-twenty-thirty-five' | 'external-vk' | 'external-yandex' | 'material-black-regular' | 'material-black-thick' | 'material-black-thin' | 'material-black-ultra-thin' | 'material-transfer-regular' | 'material-transfer-thick' | 'material-transfer-thin' | 'material-transfer-ultra-thin' | 'material-white-regular' | 'material-white-thick' | 'material-white-thin' | 'material-white-ultra-thin' | 'product-base-college' | 'product-base-complect' | 'product-base-course' | 'product-base-group' | 'product-base-outclass' | 'product-base-school' | 'product-base-subscription' | 'product-base-tutor' | 'product-bg-complect' | 'product-bg-course' | 'product-bg-group' | 'product-bg-tutor' | 'product-content-college' | 'product-content-complect' | 'product-content-course' | 'product-content-group' | 'product-content-outclass' | 'product-content-school' | 'product-content-subscription' | 'product-content-tutor' | 'product-high-college' | 'product-high-complect' | 'product-high-course' | 'product-high-group' | 'product-high-outclass' | 'product-high-school' | 'product-high-subscription' | 'product-high-tutor' | 'product-low-college' | 'product-low-college-50' | 'product-low-complect' | 'product-low-complect-50' | 'product-low-course' | 'product-low-course-50' | 'product-low-group' | 'product-low-group-50' | 'product-low-outclass' | 'product-low-outclass-50' | 'product-low-school' | 'product-low-school-50' | 'product-low-subscription' | 'product-low-subscription-50' | 'product-low-tutor' | 'product-low-tutor-50' | 'skeleton-gradient-from-color-oncolor' | 'skeleton-gradient-from-color-onmain' | 'skeleton-gradient-to-color-oncolor' | 'skeleton-gradient-to-color-onmain' | 'skeleton-oncolor-primary' | 'skeleton-oncolor-secondary' | 'skeleton-onmain-primary' | 'skeleton-onmain-secondary' | 'state-dark' | 'state-dark-strong' | 'state-light' | 'state-light-strong' | 'transparent';
11
+ type SemanticColorName = 'alert-bg-error-100' | 'alert-bg-error-200' | 'alert-bg-error-400' | 'alert-bg-error-500' | 'alert-bg-info-100' | 'alert-bg-info-200' | 'alert-bg-info-400' | 'alert-bg-info-500' | 'alert-bg-success-100' | 'alert-bg-success-200' | 'alert-bg-success-400' | 'alert-bg-success-500' | 'alert-bg-warning-100' | 'alert-bg-warning-200' | 'alert-bg-warning-400' | 'alert-bg-warning-500' | 'alert-error' | 'alert-info' | 'alert-success' | 'alert-warning' | 'bg-brand-additional-1-100' | 'bg-brand-additional-1-200' | 'bg-brand-additional-1-400' | 'bg-brand-additional-1-50' | 'bg-brand-additional-1-500' | 'bg-brand-additional-2-100' | 'bg-brand-additional-2-200' | 'bg-brand-additional-2-400' | 'bg-brand-additional-2-50' | 'bg-brand-additional-2-500' | 'bg-brand-additional-3-100' | 'bg-brand-additional-3-200' | 'bg-brand-additional-3-400' | 'bg-brand-additional-3-50' | 'bg-brand-additional-3-500' | 'bg-brand-additional-4-100' | 'bg-brand-additional-4-200' | 'bg-brand-additional-4-400' | 'bg-brand-additional-4-50' | 'bg-brand-additional-4-500' | 'bg-brand-primary-100' | 'bg-brand-primary-100-active' | 'bg-brand-primary-100-hover' | 'bg-brand-primary-200' | 'bg-brand-primary-400' | 'bg-brand-primary-50' | 'bg-brand-primary-500' | 'bg-brand-primary-basic' | 'bg-brand-primary-basic-active' | 'bg-brand-quaternary-100' | 'bg-brand-quaternary-200' | 'bg-brand-quaternary-400' | 'bg-brand-quaternary-50' | 'bg-brand-quaternary-500' | 'bg-brand-quaternary-basic' | 'bg-brand-secondary-100' | 'bg-brand-secondary-200' | 'bg-brand-secondary-400' | 'bg-brand-secondary-50' | 'bg-brand-secondary-500' | 'bg-brand-secondary-basic' | 'bg-brand-tertiary-100' | 'bg-brand-tertiary-200' | 'bg-brand-tertiary-400' | 'bg-brand-tertiary-50' | 'bg-brand-tertiary-500' | 'bg-brand-tertiary-basic' | 'bg-contrast-active' | 'bg-disabled-active' | 'bg-disabled-glossy' | 'bg-disabled-large' | 'bg-disabled-small' | 'bg-oncolor-disabled' | 'bg-oncolor-hover' | 'bg-oncolor-primary' | 'bg-oncolor-secondary' | 'bg-oncolor-tertiary' | 'bg-oncontrast-hover' | 'bg-onmain-contrast' | 'bg-onmain-divider' | 'bg-onmain-inverse' | 'bg-onmain-main' | 'bg-onmain-primary' | 'bg-onmain-secondary' | 'bg-onmain-tertiary' | 'bg-other-badge' | 'bg-other-black' | 'bg-other-overlay' | 'bg-other-shade-oncolor' | 'bg-other-shade-onmain' | 'bg-other-surface' | 'border-brand-primary' | 'border-brand-primary-active' | 'border-brand-primary-hover' | 'border-brand-secondary' | 'border-disabled' | 'border-focus' | 'border-focus-inner' | 'border-oncolor-default' | 'border-oncolor-default-large' | 'border-oncolor-disabled' | 'border-oncolor-soft-large' | 'border-oncolor-soft-small' | 'border-onmain-contrast' | 'border-onmain-default-large' | 'border-onmain-default-small' | 'border-onmain-soft-large' | 'border-onmain-soft-small' | 'content-absolute' | 'content-brand-primary' | 'content-brand-secondary' | 'content-disabled' | 'content-discount' | 'content-link' | 'content-oncolor-constant' | 'content-oncolor-disabled' | 'content-oncolor-hover' | 'content-oncolor-inverse' | 'content-oncolor-primary' | 'content-oncolor-quaternary' | 'content-oncolor-secondary' | 'content-oncolor-tertiary' | 'content-onmain-hover' | 'content-onmain-inverse' | 'content-onmain-primary' | 'content-onmain-secondary' | 'content-onmain-tertiary' | 'content-opposite' | 'effect-shadow-black-default' | 'effect-shadow-black-glossy' | 'effect-shadow-black-hover' | 'effect-shadow-black-light' | 'effect-shadow-disable-glossy' | 'effect-shadow-disable-light' | 'effect-shadow-large' | 'effect-shadow-medium' | 'effect-shadow-press' | 'effect-shadow-primary-default' | 'effect-shadow-primary-glossy' | 'effect-shadow-primary-hover' | 'effect-shadow-primary-light' | 'effect-shadow-secondary-default' | 'effect-shadow-secondary-glossy' | 'effect-shadow-secondary-hover' | 'effect-shadow-secondary-light' | 'effect-shadow-small' | 'external-mail' | 'external-sber' | 'external-tbank' | 'external-telegram' | 'external-twenty-thirty-five' | 'external-vk' | 'external-yandex' | 'material-black-regular' | 'material-black-thick' | 'material-black-thin' | 'material-black-ultra-thin' | 'material-transfer-regular' | 'material-transfer-thick' | 'material-transfer-thin' | 'material-transfer-ultra-thin' | 'material-white-regular' | 'material-white-thick' | 'material-white-thin' | 'material-white-ultra-thin' | 'product-base-college' | 'product-base-complect' | 'product-base-course' | 'product-base-group' | 'product-base-outclass' | 'product-base-school' | 'product-base-subscription' | 'product-base-tutor' | 'product-bg-complect' | 'product-bg-course' | 'product-bg-group' | 'product-bg-tutor' | 'product-content-college' | 'product-content-complect' | 'product-content-course' | 'product-content-group' | 'product-content-outclass' | 'product-content-school' | 'product-content-subscription' | 'product-content-tutor' | 'product-high-college' | 'product-high-complect' | 'product-high-course' | 'product-high-group' | 'product-high-outclass' | 'product-high-school' | 'product-high-subscription' | 'product-high-tutor' | 'product-low-college' | 'product-low-college-50' | 'product-low-complect' | 'product-low-complect-50' | 'product-low-course' | 'product-low-course-50' | 'product-low-group' | 'product-low-group-50' | 'product-low-outclass' | 'product-low-outclass-50' | 'product-low-school' | 'product-low-school-50' | 'product-low-subscription' | 'product-low-subscription-50' | 'product-low-tutor' | 'product-low-tutor-50' | 'skeleton-gradient-from-color-oncolor' | 'skeleton-gradient-from-color-onmain' | 'skeleton-gradient-to-color-oncolor' | 'skeleton-gradient-to-color-onmain' | 'skeleton-oncolor-primary' | 'skeleton-oncolor-secondary' | 'skeleton-onmain-primary' | 'skeleton-onmain-secondary' | 'state-dark' | 'state-dark-strong' | 'state-light' | 'state-light-strong' | 'transparent';
12
12
 
13
13
  type DefaultColorName = 'white' | 'black' | 'tundora' | 'paleSky' | 'bostonBlue' | 'atlantisBrightly' | 'cinnabar' | 'sail' | 'bittersweet' | 'turquoise' | 'dodgerBlue' | 'mantis' | 'azure' | 'bahamaBlue' | 'shamrock' | 'olive' | 'copperRose' | 'cyan' | 'plum' | 'hokeyPokey' | 'monaLisa' | 'mariner' | 'heliotrope' | 'dandelion' | 'fruitSalad' | 'fuchsiaBlue' | 'persianGreen' | 'watermelon' | 'tropaz' | 'lima' | 'mintTulip' | 'carnationPink' | 'paleRose' | 'deYork' | 'peppermint' | 'cornflowerBlue' | 'colonialWhite' | 'cherokee' | 'supernova' | 'picasso' | 'bilobaFlower' | 'linkWater' | 'mineShaft' | 'silver' | 'alto' | 'mercury' | 'wildSand' | 'whiteGray' | 'alabaster' | 'whiteLilac' | 'atlantis' | 'yellowOrange' | 'mystic' | 'pomegranate' | 'oliveDrab' | 'curious' | 'orangePeel' | 'nebula' | 'seaNymph' | 'chromeWhite' | 'onahau' | 'citrineWhite' | 'coralReef' | 'creemBrulee' | 'frangipani' | 'yourPink' | 'periwinkleGray' | 'baliHai' | 'primary' | 'accent' | 'transparent' | 'catalinaBlue' | 'danube' | 'midnightDeep' | 'anakiva' | 'azureRadiance' | 'blueMarguerite' | 'blueViolet' | 'bossanova' | 'capeCod' | 'cerulean' | 'congressBlue' | 'congressBlueLight' | 'creamBrulee' | 'denim' | 'earlyDawn' | 'eminence' | 'endeavour' | 'fern' | 'ghost' | 'grape' | 'gunsmoke' | 'highland' | 'honeyFlower' | 'honeyFlower2' | 'honeyFlower3' | 'jagger' | 'jordyBlue' | 'jumbo' | 'mediumPurple' | 'midnightBlue' | 'moodyBlue' | 'nandor' | 'nevada' | 'olivine' | 'parsley' | 'pattensBlue' | 'pattensBlueLight' | 'scarletGum' | 'scienceBlue' | 'scienceBlue03' | 'seance' | 'smalt' | 'smaltLight' | 'tarawera' | 'toryBlue' | 'toryBlueDark' | 'dodgerBlueDark' | 'chambray' | 'chambrayDark' | 'pomegranateDark' | 'azureRadiance2' | 'curiousBlue' | 'jungleGreen' | 'violetDeep' | 'stormGray' | 'zeus' | 'athensGray' | 'marinerLight' | 'royalBlue' | 'melrose' | 'zircon' | 'veniceBlue' | 'solitude' | 'selago' | 'coconutCream' | 'cinderella' | 'royalBlueDark' | 'persianBlue' | 'ultramarine' | 'cornflowerBlueDark' | 'jungleGreenDark' | 'mountainMeadow' | 'dodgerBlueDim' | 'zirconDark' | 'pizazz' | 'madison' | 'ebony' | 'mediumRedViolet' | 'fruitSaladLight' | 'shark' | 'azureRadianceLight' | 'carnation' | 'limaGreen' | 'mysin' | 'studio' | 'athsSpecial' | 'thunderbird' | 'denimDark' | 'puertoRico' | 'lochmara' | 'aliceBlue' | 'perano' | 'portage' | 'royalBlueDim' | 'sailDim' | 'solitaire' | 'capeHoney' | 'fairPink' | 'romantic' | 'polar' | 'cruise' | 'selagoLight' | 'moonRaker' | 'pippin' | 'yourPinkDark' | 'peppermintLight' | 'fringyFlower' | 'heliotropeDark' | 'pictonBlue' | 'mediumPurpleRed' | 'scooter' | 'chambrayDim' | 'dodgerBlueLight' | 'selectiveYellow' | 'scienceBlueDark' | 'dodgerBlueDeep' | 'kashmirBlue' | 'turbo' | 'denimDim' | 'orangeRoughy' | 'selagoDim' | 'congressBlueNight' | 'azureRadianceMedium' | 'honeyFlowerDim' | 'jaguar' | 'kournikova' | 'drover' | 'flamingo' | 'mineShaftDim' | 'periwinkle' | 'colonialWhiteDim' | 'pattensBlueDeep' | 'solitudeDim' | 'periwinkleDim' | 'rioGrande' | 'kournikovaDim';
14
14
  type BaseColorName = 'content-onmain-primary' | 'content-onmain-secondary' | 'content-onmain-tertiary' | 'content-onmain-inverse' | 'content-oncolor-primary' | 'content-oncolor-secondary' | 'content-oncolor-tertiary' | 'content-oncolor-inverse' | 'content-oncolor-constant' | 'content-disabled' | 'content-oncolor-disabled' | 'content-oncolor-hover' | 'content-onmain-hover' | 'content-discount' | 'content-link' | 'border-onmain-default-large' | 'border-onmain-default-small' | 'border-onmain-contrast' | 'border-disabled' | 'border-focus' | 'border-oncolor-disabled' | 'border-oncolor-default' | 'border-oncolor-default-large' | 'bg-onmain-main' | 'bg-onmain-primary' | 'bg-onmain-secondary' | 'bg-onmain-tertiary' | 'bg-onmain-divider' | 'bg-onmain-contrast' | 'bg-onmain-inverse' | 'bg-oncolor-primary' | 'bg-oncolor-secondary' | 'bg-oncolor-tertiary' | 'bg-oncolor-hover' | 'bg-disabled-large' | 'bg-disabled-small' | 'bg-disabled-active' | 'bg-oncolor-disabled' | 'bg-contrast-active' | 'bg-oncontrast-hover' | 'alert-bg-success-100' | 'alert-bg-success-200' | 'alert-bg-success-500' | 'alert-bg-warning-100' | 'alert-bg-warning-200' | 'alert-bg-warning-500' | 'alert-bg-error-100' | 'alert-bg-error-200' | 'alert-bg-error-500' | 'alert-success' | 'alert-warning' | 'alert-error' | 'product-bg-course' | 'product-bg-tutor' | 'product-bg-group' | 'product-bg-complect' | 'skeleton-onmain-primary' | 'skeleton-onmain-secondary' | 'skeleton-gradient-from-color-onmain' | 'skeleton-gradient-to-color-onmain' | 'skeleton-oncolor-primary' | 'skeleton-oncolor-secondary' | 'skeleton-gradient-from-color-oncolor' | 'skeleton-gradient-to-color-oncolor' | 'bg-other-badge' | 'bg-other-black' | 'alert-bg-info-100' | 'alert-bg-info-200' | 'alert-bg-info-500' | 'alert-info' | 'product-content-school' | 'product-content-group' | 'product-content-outclass' | 'product-content-course' | 'product-content-tutor' | 'product-high-school' | 'product-high-group' | 'product-high-outclass' | 'product-high-course' | 'product-high-tutor' | 'product-low-school' | 'product-low-group' | 'product-low-outclass' | 'product-low-course' | 'product-low-tutor' | 'bg-other-overlay' | 'product-low-school-50' | 'product-low-group-50' | 'product-low-outclass-50' | 'product-low-course-50' | 'product-low-tutor-50';
@@ -1845,9 +1845,64 @@ ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {
1845
1845
  borderColorDisabled?: Color;
1846
1846
  shadowColor?: Color;
1847
1847
  };
1848
+ /**
1849
+ * Кастомный рутовый блок.
1850
+ *
1851
+ * Использование компонента только как контейнера.
1852
+ *
1853
+ * @slot
1854
+ * @default undefined */
1855
+ root?: React.ReactElement | ((props: {
1856
+ textProps: TextProps;
1857
+ iconProps: IconProps;
1858
+ successIconProps: IconProps;
1859
+ loadingIconProps: IconProps;
1860
+ }) => React.ReactNode);
1861
+ /**
1862
+ * Основной текстовый контент.
1863
+ *
1864
+ * Если передана строка или число используется встроенная типографика.
1865
+ *
1866
+ * @slot
1867
+ * @default undefined */
1868
+ text?: React.ReactNode | ((textProps: TextProps) => React.ReactNode);
1869
+ /**
1870
+ * Дополнительные элементы слева.
1871
+ *
1872
+ * @slot
1873
+ * @default undefined */
1874
+ addonLeft?: React.ReactElement | ((addonLeftProps: {
1875
+ iconProps: IconProps;
1876
+ }) => React.ReactNode);
1877
+ /**
1878
+ * Дополнительные элементы справа.
1879
+ *
1880
+ * @slot
1881
+ * @default undefined */
1882
+ addonRight?: React.ReactElement | ((addonRightProps: {
1883
+ iconProps: IconProps;
1884
+ }) => React.ReactNode);
1885
+ /**
1886
+ * Иконка для успешного состояния.
1887
+ *
1888
+ * По умолчанию используется checkFill.
1889
+ *
1890
+ * @slot
1891
+ * @default undefined */
1892
+ successIcon?: React.ReactElement | ((iconProps: IconProps) => React.ReactNode);
1893
+ /**
1894
+ * Иконка для состояния загрузки.
1895
+ *
1896
+ * По умолчанию используется loaderFill.
1897
+ *
1898
+ * @slot
1899
+ * @default undefined */
1900
+ loadingIcon?: React.ReactElement | ((iconProps: IconProps) => React.ReactNode);
1848
1901
  /**
1849
1902
  * Основной контент.
1850
1903
  *
1904
+ * Вместо этого пропа можно использовать проп text.
1905
+ *
1851
1906
  * @general
1852
1907
  * @default undefined */
1853
1908
  children?: React.ReactNode | ((rootProps: {
@@ -1861,13 +1916,15 @@ ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {
1861
1916
  * @default {} */
1862
1917
  textProps?: TextProps;
1863
1918
  /**
1864
- * Отображение на одно линии с другими элементами.
1919
+ * Отображение на одной линии с другими элементами.
1865
1920
  *
1866
1921
  * @default true */
1867
1922
  inline?: boolean;
1868
1923
  /**
1869
1924
  * Иконки до и после основного контента.
1870
1925
  *
1926
+ * Вместо этого пропа можно использовать пропы addonLeft, addonRight.
1927
+ *
1871
1928
  * @general
1872
1929
  * @default undefined */
1873
1930
  icon?: JSX.Element | IconName | [Nullable<JSX.Element | IconName>, Nullable<JSX.Element | IconName>];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@foxford/ui",
3
- "version": "2.129.0",
3
+ "version": "2.131.0",
4
4
  "description": "UI components and utilities",
5
5
  "bugs": {
6
6
  "url": "https://github.com/foxford/ui/issues"
@@ -60,6 +60,6 @@
60
60
  "shared",
61
61
  "theme"
62
62
  ],
63
- "sha": "27bf182",
63
+ "sha": "70b30a1",
64
64
  "scripts": {}
65
65
  }