@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.
- package/components/Button/Button.js +1 -1
- package/components/Button/Button.js.map +1 -1
- package/components/Button/Button.mjs +1 -1
- package/components/Button/Button.mjs.map +1 -1
- package/dts/index.d.ts +59 -2
- package/package.json +2 -2
- package/theme/theme-colors.js +1 -1
- package/theme/theme-colors.js.map +1 -1
- package/theme/theme-colors.mjs +1 -1
- package/theme/theme-colors.mjs.map +1 -1
|
@@ -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:
|
|
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":"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"}
|
|
@@ -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
|
|
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.
|
|
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": "
|
|
63
|
+
"sha": "70b30a1",
|
|
64
64
|
"scripts": {}
|
|
65
65
|
}
|