@foxford/ui 2.29.1 → 2.30.0-beta-2347bc5-20240605
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/Avatar/Avatar.js +1 -1
- package/components/Avatar/Avatar.js.map +1 -1
- package/components/Avatar/constants.js +2 -0
- package/components/Avatar/constants.js.map +1 -0
- package/components/Avatar/default-constants.js +2 -0
- package/components/Avatar/default-constants.js.map +1 -0
- package/components/Avatar/style.js +1 -1
- package/components/Avatar/style.js.map +1 -1
- package/components/Avatar/utils.js +2 -0
- package/components/Avatar/utils.js.map +1 -0
- package/components/Indicator/Indicator.js +1 -1
- package/components/Indicator/Indicator.js.map +1 -1
- package/components/Indicator/style.js +1 -1
- package/components/Indicator/style.js.map +1 -1
- package/components/Skeleton/style.js +1 -1
- package/components/Skeleton/style.js.map +1 -1
- package/dts/index.d.ts +46 -38
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/package.json +2 -1
- package/components/Avatar/utils/index.js +0 -2
- package/components/Avatar/utils/index.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import r from'@babel/runtime/helpers/objectSpread2';import e from'@babel/runtime/helpers/objectWithoutProperties';import{
|
|
1
|
+
import r from'@babel/runtime/helpers/objectSpread2';import e from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as t}from'react';import{withMergedProps as s}from'../../hocs/withMergedProps.js';import{Skeleton as a}from'../Skeleton/Skeleton.js';import{Text as o}from'../Text/Text.js';import{abbreviateCaption as i}from'./utils.js';import{SIZES as n}from'./constants.js';import{SIZES_DEFAULT as p,SIZES_MAPPING_RULES as m}from'./default-constants.js';import{Root as l}from'./style.js';import{jsx as d,Fragment as f}from'react/jsx-runtime';var h=["size","textProps","borderRadius","children","text"];var c=s(t(((t,s)=>{var n;var{size:p="m",textProps:c={},borderRadius:u="50%",children:b,text:j}=t,S=e(t,h);var x='string'!=typeof p||'default'!==S.preset&&'sm'!==p?p:null!==(n=m[p])&&void 0!==n?n:p;return d(l,r(r({},S),{},{size:x,borderRadius:u,ref:s,children:S.loading?d(a,{as:"span",width:"100%",height:"100%",borderRadius:"inherit"}):d(f,{children:null!=b?b:!S.src&&d(o,r(r({as:"span",appearance:"caption",size:"inherit",color:"inherit",lineHeight:1,marginTop:1,transform:"uppercase"},c),{},{children:i(j||S.title||'')}))})}))})),{displayName:'Avatar',sizes:r=>'brand'===r.preset?n:p});export{c as Avatar};
|
|
2
2
|
//# sourceMappingURL=Avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Skeleton } from 'components/Skeleton'\nimport { Text } from 'components/Text'\nimport { abbreviateCaption } from './utils'\nimport { SIZES } from './constants'\nimport { SIZES_MAPPING_RULES, SIZES_DEFAULT } from './default-constants'\nimport type { AvatarProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Avatar'\n\n/**\n *\n * Component accepts all \\<span\\> attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [AvatarProps](https://github.com/foxford/ui/blob/master/src/components/AvatarProps/types.ts)\n */\nconst Avatar: React.ForwardRefExoticComponent<AvatarProps> = withMergedProps<AvatarProps, HTMLSpanElement>(\n forwardRef((props, ref) => {\n const { size = 'm', textProps = {}, borderRadius = '50%', children, text, ...restProps } = props\n\n const sizeMapped =\n typeof size === 'string' && (restProps.preset === 'default' || size === 'sm')\n ? SIZES_MAPPING_RULES[size] ?? size\n : size\n\n return (\n <Styled.Root {...restProps} size={sizeMapped} borderRadius={borderRadius} ref={ref}>\n {restProps.loading ? (\n <Skeleton as='span' width='100%' height='100%' borderRadius='inherit' />\n ) : (\n <>\n {children ??\n (!restProps.src && (\n <Text\n as='span'\n appearance='caption'\n size='inherit'\n color='inherit'\n lineHeight={1}\n marginTop={1}\n transform='uppercase'\n {...textProps}\n >\n {abbreviateCaption(text || restProps.title || '')}\n </Text>\n ))}\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => (props.preset === 'brand' ? SIZES : SIZES_DEFAULT),\n }\n)\n\nexport { Avatar }\n"],"names":["Avatar","withMergedProps","forwardRef","props","ref","_SIZES_MAPPING_RULES$","size","textProps","borderRadius","children","text","restProps","_excluded","sizeMapped","preset","SIZES_MAPPING_RULES","_jsx","Styled.Root","loading","Skeleton","as","width","height","_Fragment","src","Text","_objectSpread","appearance","color","lineHeight","marginTop","transform","abbreviateCaption","title","displayName","sizes","SIZES","SIZES_DEFAULT"],"mappings":"ymBAsBMA,IAAAA,EAAuDC,EAC3DC,IAAYC,EAAOC,KAAQ,IAAAC,EACzB,IAAMC,KAAEA,EAAO,IAATC,UAAcA,EAAY,GAA1BC,aAA8BA,EAAe,MAA7CC,SAAoDA,EAApDC,KAA8DA,GAAuBP,EAAdQ,IAAcR,EAA3FS,GAEA,IAAMC,EACY,iBAATP,GAA2C,YAArBK,EAAUG,QAAiC,OAATR,EAE3DA,EAFJ,QAAAD,EACIU,EAAoBT,UAAAA,IADxBD,EAAAA,EACiCC,EAGnC,OACEU,EAACC,SAAgBN,GAAjB,GAAA,CAA4BL,KAAMO,EAAYL,aAAcA,EAAcJ,IAAKA,EAA/EK,SACGE,EAAUO,QACTF,EAACG,EAAD,CAAUC,GAAG,OAAOC,MAAM,OAAOC,OAAO,OAAOd,aAAa,YAE5DQ,EAAAO,EAAA,CAAAd,SACGA,MAAAA,EAAAA,GACGE,EAAUa,KACVR,EAACS,EAADC,EAAAA,EAAA,CACEN,GAAG,OACHO,WAAW,UACXrB,KAAK,UACLsB,MAAM,UACNC,WAAY,EACZC,UAAW,EACXC,UAAU,aACNxB,GARN,GAAA,CAAAE,SAUGuB,EAAkBtB,GAAQC,EAAUsB,OAAS,eAQ9D,CACEC,YAhDmB,SAiDnBC,MAAQhC,GAA4B,UAAjBA,EAAMW,OAAqBsB,EAAQC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var t={xxxl:{width:120,height:120,fontSize:36},xxl:{width:68,height:68,fontSize:24},xl:{width:52,height:52,fontSize:18},l:{width:48,height:48,fontSize:16},m:{width:40,height:40,fontSize:14},s:{width:32,height:32,fontSize:12},xs:{width:24,height:24,fontSize:10},xxs:{width:20,height:20,fontSize:8},xxxs:{width:16,height:16,fontSize:6}};export{t as SIZES};
|
|
2
|
+
//# sourceMappingURL=constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../src/components/Avatar/constants.ts"],"sourcesContent":["import type { Sizes } from 'shared/types'\n\nexport const SIZES: Sizes = {\n xxxl: {\n width: 120,\n height: 120,\n fontSize: 36,\n },\n xxl: {\n width: 68,\n height: 68,\n fontSize: 24,\n },\n xl: {\n width: 52,\n height: 52,\n fontSize: 18,\n },\n l: {\n width: 48,\n height: 48,\n fontSize: 16,\n },\n m: {\n width: 40,\n height: 40,\n fontSize: 14,\n },\n s: {\n width: 32,\n height: 32,\n fontSize: 12,\n },\n xs: {\n width: 24,\n height: 24,\n fontSize: 10,\n },\n xxs: {\n width: 20,\n height: 20,\n fontSize: 8,\n },\n xxxs: {\n width: 16,\n height: 16,\n fontSize: 6,\n },\n}\n"],"names":["SIZES","xxxl","width","height","fontSize","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"AAEO,IAAMA,EAAe,CAC1BC,KAAM,CACJC,MAAO,IACPC,OAAQ,IACRC,SAAU,IAEZC,IAAK,CACHH,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZE,GAAI,CACFJ,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZG,EAAG,CACDL,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZI,EAAG,CACDN,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZK,EAAG,CACDP,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZM,GAAI,CACFR,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZO,IAAK,CACHT,MAAO,GACPC,OAAQ,GACRC,SAAU,GAEZQ,KAAM,CACJV,MAAO,GACPC,OAAQ,GACRC,SAAU"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var t={l:'xl',m:'l',sm:'m'};var h={xxxl:{width:120,height:120,fontSize:36},xxl:{width:120,height:120,fontSize:36},xl:{width:120,height:120,fontSize:36},l:{width:68,height:68,fontSize:24},m:{width:52,height:52,fontSize:12},s:{width:40,height:40,fontSize:12},xs:{width:32,height:32,fontSize:12},xxs:{width:32,height:32,fontSize:12},xxxs:{width:32,height:32,fontSize:12}};export{h as SIZES_DEFAULT,t as SIZES_MAPPING_RULES};
|
|
2
|
+
//# sourceMappingURL=default-constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"default-constants.js","sources":["../../../../src/components/Avatar/default-constants.ts"],"sourcesContent":["import type { Size, Sizes } from 'shared/types'\n\nexport const SIZES_MAPPING_RULES: Record<string, Size> = { l: 'xl', m: 'l', sm: 'm' }\n\nexport const SIZES_DEFAULT: Sizes = {\n xxxl: {\n width: 120,\n height: 120,\n fontSize: 36,\n },\n xxl: {\n width: 120,\n height: 120,\n fontSize: 36,\n },\n xl: {\n width: 120,\n height: 120,\n fontSize: 36,\n },\n l: {\n width: 68,\n height: 68,\n fontSize: 24,\n },\n m: {\n width: 52,\n height: 52,\n fontSize: 12,\n },\n s: {\n width: 40,\n height: 40,\n fontSize: 12,\n },\n xs: {\n width: 32,\n height: 32,\n fontSize: 12,\n },\n xxs: {\n width: 32,\n height: 32,\n fontSize: 12,\n },\n xxxs: {\n width: 32,\n height: 32,\n fontSize: 12,\n },\n}\n"],"names":["SIZES_MAPPING_RULES","l","m","sm","SIZES_DEFAULT","xxxl","width","height","fontSize","xxl","xl","s","xs","xxs","xxxs"],"mappings":"AAEO,IAAMA,EAA4C,CAAEC,EAAG,KAAMC,EAAG,IAAKC,GAAI,KAEzE,IAAMC,EAAuB,CAClCC,KAAM,CACJC,MAAO,IACPC,OAAQ,IACRC,SAAU,IAEZC,IAAK,CACHH,MAAO,IACPC,OAAQ,IACRC,SAAU,IAEZE,GAAI,CACFJ,MAAO,IACPC,OAAQ,IACRC,SAAU,IAEZP,EAAG,CACDK,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZN,EAAG,CACDI,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZG,EAAG,CACDL,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZI,GAAI,CACFN,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZK,IAAK,CACHP,MAAO,GACPC,OAAQ,GACRC,SAAU,IAEZM,KAAM,CACJR,MAAO,GACPC,OAAQ,GACRC,SAAU"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import{createShouldForwardProp as n}from'../../shared/utils/style.js';import{responsiveSize as a}from'../../mixins/responsive-size.js';import{responsiveMargin as t}from'../../mixins/responsive-margin.js';import{getColor as s}from'../../mixins/color.js';var c=n((o=>!['src','shadow','borderRadius','square','loading'].includes(o)));var i=o=>"\n color: ".concat(o.color,";\n background-color: ").concat(o.backgroundColor,";\n filter: drop-shadow(0 6px 10px ").concat(o.shadowColor,");\n");var l={default:e(["",""],(r=>i(o({color:r.theme.colors.white,backgroundColor:r.loading?r.theme.colors.transparent:r.theme.colors.mercury,shadowColor:r.shadow?r.theme.colors['bg-oncolor-hover']:r.theme.colors.transparent},r.palette)))),primary:e(["",""],(r=>i(o({color:r.theme.colors['content-brand-primary'],backgroundColor:r.loading?r.theme.colors.transparent:r.theme.colors['bg-brand-primary-100'],shadowColor:r.shadow?r.theme.colors['bg-oncolor-hover']:r.theme.colors.transparent},r.palette))))};var d=r.span.withConfig({shouldForwardProp:c}).attrs({dynamicSizeDeclaration:(o,r)=>({fontSize:'string'==typeof o?o:"".concat(o).concat(r),width:'1em',height:'1em'})}).withConfig({componentId:"fox-ui__sc-1dzfgqr-0"})([""," "," "," "," ",""],(o=>"\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n vertical-align: middle;\n flex-shrink: 0;\n cursor: default;\n border-radius: ".concat(o.square?'6px':o.borderRadius,";\n ").concat(o.src&&!o.loading?"\n background-image: url(".concat(o.src,");\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover; \n "):'',"\n ")),(o=>'brand'===o.preset?l.primary:l.default),(o=>o.color&&!o.loading&&"background-color: ".concat(s(o.color,o),";")),a,t);export{d as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Avatar/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Avatar/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { getColor } from 'mixins/color'\nimport type { StyledAvatarProps, AvatarPalette } from './types'\n\nconst shouldForwardAvatarProp = createShouldForwardProp(\n (propKey) => !['src', 'shadow', 'borderRadius', 'square', 'loading'].includes(propKey)\n)\n\nconst template = (palette: AvatarPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n filter: drop-shadow(0 6px 10px ${palette.shadowColor});\n`\n\nconst COLOR_SCHEMA = {\n default: css<StyledAvatarProps>`\n ${(props) =>\n template({\n color: props.theme.colors.white,\n backgroundColor: props.loading ? props.theme.colors.transparent : props.theme.colors.mercury,\n shadowColor: props.shadow ? props.theme.colors['bg-oncolor-hover'] : props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n primary: css<StyledAvatarProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.loading ? props.theme.colors.transparent : props.theme.colors['bg-brand-primary-100'],\n shadowColor: props.shadow ? props.theme.colors['bg-oncolor-hover'] : props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n}\n\nexport const Root = styled.span\n .withConfig<StyledAvatarProps>({\n shouldForwardProp: shouldForwardAvatarProp,\n })\n .attrs<StyledAvatarProps>(<Required<Pick<StyledAvatarProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n width: '1em',\n height: '1em',\n }),\n })`\n ${(props) => `\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n vertical-align: middle;\n flex-shrink: 0;\n cursor: default;\n border-radius: ${props.square ? '6px' : props.borderRadius};\n ${\n props.src && !props.loading\n ? `\n background-image: url(${props.src});\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover; \n `\n : ''\n }\n `}\n\n ${(props) => (props.preset === 'brand' ? COLOR_SCHEMA.primary : COLOR_SCHEMA.default)}\n\n ${(props) => props.color && !props.loading && `background-color: ${getColor(props.color, props)};`}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardAvatarProp","createShouldForwardProp","propKey","includes","template","palette","concat","color","backgroundColor","shadowColor","COLOR_SCHEMA","default","css","props","_objectSpread","theme","colors","white","loading","transparent","mercury","shadow","primary","Root","styled","span","withConfig","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","width","height","componentId","square","borderRadius","src","preset","getColor","responsiveSize","responsiveMargin"],"mappings":"4VAOA,IAAMA,EAA0BC,GAC7BC,IAAa,CAAC,MAAO,SAAU,eAAgB,SAAU,WAAWC,SAASD,KAGhF,IAAME,EAAYC,GAAD,cAAAC,OACND,EAAQE,MACGF,2BAAAA,OAAAA,EAAQG,gBAFb,wCAAAF,OAGkBD,EAAQI,YAH3C,QAMA,IAAMC,EAAe,CACnBC,QAASC,EACJC,CAAAA,GAAAA,KAAAA,GACDT,EAAQU,EAAA,CACNP,MAAOM,EAAME,MAAMC,OAAOC,MAC1BT,gBAAiBK,EAAMK,QAAUL,EAAME,MAAMC,OAAOG,YAAcN,EAAME,MAAMC,OAAOI,QACrFX,YAAaI,EAAMQ,OAASR,EAAME,MAAMC,OAAO,oBAAsBH,EAAME,MAAMC,OAAOG,aACrFN,EAAMR,YAGfiB,QAASV,EACJC,CAAAA,GAAAA,KAAAA,GACDT,EAAQU,EAAA,CACNP,MAAOM,EAAME,MAAMC,OAAO,yBAC1BR,gBAAiBK,EAAMK,QAAUL,EAAME,MAAMC,OAAOG,YAAcN,EAAME,MAAMC,OAAO,wBACrFP,YAAaI,EAAMQ,OAASR,EAAME,MAAMC,OAAO,oBAAsBH,EAAME,MAAMC,OAAOG,aACrFN,EAAMR,aAKV,IAAMkB,EAAOC,EAAOC,KACxBC,WAA8B,CAC7BC,kBAAmB3B,IAEpB4B,MAAsF,CACrFC,uBAAwB,CAACC,EAAMC,KAAe,CAC5CC,SAA0B,iBAATF,EAAoBA,EAAUA,GAAAA,OAAAA,GAAOC,OAAAA,GACtDE,MAAO,MACPC,OAAQ,UARGR,WAAA,CAAAS,YAAA,wBAAGX,CAAH,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,KAWZX,GAAD,gNAAAP,OAQiBO,EAAMuB,OAAS,MAAQvB,EAAMwB,aAE5CxB,WAAAA,OAAAA,EAAMyB,MAAQzB,EAAMK,QAEQL,qCAAAA,OAAAA,EAAMyB,IAFlC,uIAOI,GAjBN,UAqBCzB,GAA4B,UAAjBA,EAAM0B,OAAqB7B,EAAaY,QAAUZ,EAAaC,UAE1EE,GAAUA,EAAMN,QAAUM,EAAMK,SAAgCsB,qBAAAA,OAAAA,EAAS3B,EAAMN,MAAOM,GAlC1E,MAoCb4B,EACAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../src/components/Avatar/utils.ts"],"sourcesContent":["export const abbreviateCaption = (caption: string): string =>\n caption\n .split(' ')\n .map((seq) => seq.trim())\n .filter((seq) => seq.length !== 0)\n .slice(0, 2)\n .reduce((abbreviation, seq) => {\n if (typeof seq === 'string') {\n const symbolCodePoint = seq.codePointAt(0)\n\n if (typeof symbolCodePoint === 'number') {\n abbreviation += String.fromCodePoint(symbolCodePoint)\n }\n }\n\n return abbreviation\n }, '') || '#'\n"],"names":["abbreviateCaption","caption","split","map","seq","trim","filter","length","slice","reduce","abbreviation","symbolCodePoint","codePointAt","String","fromCodePoint"],"mappings":"IAAaA,EAAqBC,GAChCA,EACGC,MAAM,KACNC,KAAKC,GAAQA,EAAIC,SACjBC,QAAQF,GAAuB,IAAfA,EAAIG,SACpBC,MAAM,EAAG,GACTC,QAAO,CAACC,EAAcN,KACrB,GAAmB,iBAARA,EAAkB,CAC3B,IAAMO,EAAkBP,EAAIQ,YAAY,GAET,iBAApBD,IACTD,GAAgBG,OAAOC,cAAcH,IAIzC,OAAOD,IACN,KAAO"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import r from'@babel/runtime/helpers/objectSpread2';import e from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as t}from'react';import{withMergedProps as i}from'../../hocs/withMergedProps.js';import{Text as o}from'../Text/Text.js';import{SIZES_SQUARE as
|
|
1
|
+
import r from'@babel/runtime/helpers/objectSpread2';import e from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as t}from'react';import{withMergedProps as i}from'../../hocs/withMergedProps.js';import{Text as o}from'../Text/Text.js';import{SIZES_SQUARE as a,SIZES as s}from'./constants.js';import{Root as n,Foreground as m}from'./style.js';import{jsx as p}from'react/jsx-runtime';var l=["size","textProps","children","text"];var h=r=>null!=r.children||null!=r.text;var c=i(t(((t,i)=>{var{size:a="m",textProps:s={},children:c,text:d}=t,f=e(t,l);var x=h(t);return p(n,r(r({},f),{},{size:a,square:x,ref:i,children:p(m,{children:x&&p(o,r(r({as:"span",appearance:"body",size:"inherit",color:"inherit",whiteSpace:"nowrap",weight:700,lineHeight:1,marginTop:1,marginRight:"0.3em",marginLeft:"0.3em"},s),{},{children:null!=c?c:d}))})}))})),{displayName:'Indicator',sizes:r=>h(r)?a:s});export{c as Indicator};
|
|
2
2
|
//# sourceMappingURL=Indicator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Indicator.js","sources":["../../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { SIZES, SIZES_SQUARE } from './constants'\nimport * as Styled from './style'\nimport type { IndicatorProps } from './types'\n\nconst COMPONENT_NAME = 'Indicator'\n\nconst indicatorPropsWithContent = (props: IndicatorProps): boolean =>\n (props.children !== undefined && props.children !== null) || (props.text !== undefined && props.text !== null)\n\n/**\n *\n * Component accepts all \\<span\\> attributes.\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [IndicatorProps](https://github.com/foxford/ui/blob/master/src/components/Indicator/types.ts)\n */\nconst Indicator: React.ForwardRefExoticComponent<IndicatorProps> = withMergedProps<IndicatorProps, HTMLSpanElement>(\n forwardRef((props, ref) => {\n const { size = 'm', textProps = {}, children, text, ...restProps } = props\n\n const hasContent = indicatorPropsWithContent(props)\n\n return (\n <Styled.Root {...restProps} size={size} square={hasContent} ref={ref}>\n <Styled.Foreground>\n {hasContent && (\n <Text\n as='span'\n appearance='body'\n size='inherit'\n color='inherit'\n weight={700}\n lineHeight={1}\n
|
|
1
|
+
{"version":3,"file":"Indicator.js","sources":["../../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { SIZES, SIZES_SQUARE } from './constants'\nimport * as Styled from './style'\nimport type { IndicatorProps } from './types'\n\nconst COMPONENT_NAME = 'Indicator'\n\nconst indicatorPropsWithContent = (props: IndicatorProps): boolean =>\n (props.children !== undefined && props.children !== null) || (props.text !== undefined && props.text !== null)\n\n/**\n *\n * Component accepts all \\<span\\> attributes.\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [IndicatorProps](https://github.com/foxford/ui/blob/master/src/components/Indicator/types.ts)\n */\nconst Indicator: React.ForwardRefExoticComponent<IndicatorProps> = withMergedProps<IndicatorProps, HTMLSpanElement>(\n forwardRef((props, ref) => {\n const { size = 'm', textProps = {}, children, text, ...restProps } = props\n\n const hasContent = indicatorPropsWithContent(props)\n\n return (\n <Styled.Root {...restProps} size={size} square={hasContent} ref={ref}>\n <Styled.Foreground>\n {hasContent && (\n <Text\n as='span'\n appearance='body'\n size='inherit'\n color='inherit'\n whiteSpace='nowrap'\n weight={700}\n lineHeight={1}\n marginTop={1}\n marginRight='0.3em'\n marginLeft='0.3em'\n {...textProps}\n >\n {children ?? text}\n </Text>\n )}\n </Styled.Foreground>\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => (indicatorPropsWithContent(props) ? SIZES_SQUARE : SIZES),\n }\n)\n\nexport { Indicator }\n"],"names":["indicatorPropsWithContent","props","children","text","Indicator","withMergedProps","forwardRef","ref","size","textProps","restProps","_excluded","hasContent","_jsx","Styled.Root","square","Styled.Foreground","Text","_objectSpread","as","appearance","color","whiteSpace","weight","lineHeight","marginTop","marginRight","marginLeft","displayName","sizes","SIZES_SQUARE","SIZES"],"mappings":"4bASA,IAAMA,EAA6BC,GAChCA,MAAAA,EAAMC,UAAuDD,MAAAA,EAAME,KAYhEC,IAAAA,EAA6DC,EACjEC,GAAAA,CAAYL,EAAOM,KACjB,IAAMC,KAAEA,EAAO,IAATC,UAAcA,EAAY,GAA1BP,SAA8BA,EAA9BC,KAAwCA,GAAuBF,EAAdS,IAAcT,EAArEU,GAEA,IAAMC,EAAaZ,EAA0BC,GAE7C,OACEY,EAACC,SAAgBJ,GAAjB,GAAA,CAA4BF,KAAMA,EAAMO,OAAQH,EAAYL,IAAKA,EAAjEL,SACEW,EAACG,EAAD,CAAAd,SACGU,GACCC,EAACI,EAADC,EAAAA,EAAA,CACEC,GAAG,OACHC,WAAW,OACXZ,KAAK,UACLa,MAAM,UACNC,WAAW,SACXC,OAAQ,IACRC,WAAY,EACZC,UAAW,EACXC,YAAY,QACZC,WAAW,SACPlB,GAXN,GAAA,CAAAP,SAaGA,MAAAA,EAAAA,EAAYC,aAOzB,CACEyB,YA9CmB,YA+CnBC,MAAQ5B,GAAWD,EAA0BC,GAAS6B,EAAeC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from'@babel/runtime/helpers/objectSpread2';import r,{keyframes as e,css as n}from'styled-components';import{createShouldForwardProp as a}from'../../shared/utils/style.js';import{responsiveSize as t}from'../../mixins/responsive-size.js';var c=a((o=>!['square','black','grey','onColored','pulse','pulseIterationCount','frame'].includes(o)));var i=e(["0%{opacity:1;transform:scale(1);}75%{opacity:0;}100%{transform:scale(4);}"]);var l=r.span.withConfig({componentId:"fox-ui__sc-1dc67xh-0"})(["box-sizing:border-box;width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;border-radius:inherit;background-color:inherit;"]);var s=o=>"\n color: ".concat(o.color,";\n background-color: ").concat(o.backgroundColor,";\n\n & > ").concat(l," {\n box-shadow: 0 0 0 1px ").concat(o.shadowColor,";\n }\n");var m={onColored:{primary:n(["",""],(r=>s(o({color:r.theme.colors['content-brand-primary'],backgroundColor:r.theme.colors['bg-oncolor-primary'],shadowColor:r.theme.colors['bg-oncolor-primary']},r.palette)))),secondary:n(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-brand-secondary-500'],shadowColor:r.theme.colors['bg-oncolor-primary']},r.palette)))),black:n(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-onmain-contrast'],shadowColor:r.theme.colors['bg-oncolor-primary']},r.palette)))),grey:n(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-oncolor-secondary'],shadowColor:r.theme.colors['bg-oncolor-primary']},r.palette))))},default:{primary:n(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-brand-primary-500'],shadowColor:r.theme.colors['bg-onmain-primary']},r.palette)))),secondary:n(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-brand-secondary-500'],shadowColor:r.theme.colors['bg-onmain-primary']},r.palette)))),black:n(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-onmain-contrast'],shadowColor:r.theme.colors['bg-onmain-primary']},r.palette)))),grey:n(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-onmain-divider'],shadowColor:r.theme.colors['bg-onmain-primary']},r.palette))))}};var d=r.span.withConfig({shouldForwardProp:c}).attrs((o=>({dynamicSizeDeclaration:(r,e)=>({fontSize:'string'==typeof r?r:"".concat(r).concat(e),width:o.square?'min-content':'1em',minWidth:o.square?'1.6em':void 0,height:o.square?'1.6em':'1em',borderRadius:o.square?'0.2em':'50%'})}))).withConfig({componentId:"fox-ui__sc-1dc67xh-1"})(["box-sizing:border-box;position:relative;isolation:isolate;cursor:default;display:inline-block;
|
|
1
|
+
import o from'@babel/runtime/helpers/objectSpread2';import r,{keyframes as e,css as n}from'styled-components';import{createShouldForwardProp as a}from'../../shared/utils/style.js';import{responsiveSize as t}from'../../mixins/responsive-size.js';var c=a((o=>!['square','black','grey','onColored','pulse','pulseIterationCount','frame'].includes(o)));var i=e(["0%{opacity:1;transform:scale(1);}75%{opacity:0;}100%{transform:scale(4);}"]);var l=r.span.withConfig({componentId:"fox-ui__sc-1dc67xh-0"})(["box-sizing:border-box;width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;border-radius:inherit;background-color:inherit;"]);var s=o=>"\n color: ".concat(o.color,";\n background-color: ").concat(o.backgroundColor,";\n\n & > ").concat(l," {\n box-shadow: 0 0 0 1px ").concat(o.shadowColor,";\n }\n");var m={onColored:{primary:n(["",""],(r=>s(o({color:r.theme.colors['content-brand-primary'],backgroundColor:r.theme.colors['bg-oncolor-primary'],shadowColor:r.theme.colors['bg-oncolor-primary']},r.palette)))),secondary:n(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-brand-secondary-500'],shadowColor:r.theme.colors['bg-oncolor-primary']},r.palette)))),black:n(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-onmain-contrast'],shadowColor:r.theme.colors['bg-oncolor-primary']},r.palette)))),grey:n(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-oncolor-secondary'],shadowColor:r.theme.colors['bg-oncolor-primary']},r.palette))))},default:{primary:n(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-brand-primary-500'],shadowColor:r.theme.colors['bg-onmain-primary']},r.palette)))),secondary:n(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-brand-secondary-500'],shadowColor:r.theme.colors['bg-onmain-primary']},r.palette)))),black:n(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-onmain-contrast'],shadowColor:r.theme.colors['bg-onmain-primary']},r.palette)))),grey:n(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-onmain-divider'],shadowColor:r.theme.colors['bg-onmain-primary']},r.palette))))}};var d=r.span.withConfig({shouldForwardProp:c}).attrs((o=>({dynamicSizeDeclaration:(r,e)=>({fontSize:'string'==typeof r?r:"".concat(r).concat(e),width:o.square?'min-content':'1em',minWidth:o.square?'1.6em':void 0,height:o.square?'1.6em':'1em',borderRadius:o.square?'0.2em':'50%'})}))).withConfig({componentId:"fox-ui__sc-1dc67xh-1"})(["box-sizing:border-box;position:relative;isolation:isolate;cursor:default;display:inline-block;flex-shrink:0;"," "," "," ",""],(o=>{var r=o.onColored?m.onColored:m.default;return o.grey?r.grey:o.black?r.black:o.secondary?r.secondary:r.primary}),(o=>!o.frame&&"\n & > ".concat(l," {\n box-shadow: none;\n }\n ")),(o=>o.pulse&&n(["&::before,&::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;background-color:inherit;border-radius:inherit;animation-name:",";animation-duration:3200ms;animation-iteration-count:",";}&::after{animation-delay:800ms;}"],i,'number'==typeof o.pulseIterationCount?o.pulseIterationCount:'infinite')),t);export{l as Foreground,d as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Indicator/style.ts"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { StyledIndicatorProps, IndicatorPalette } from './types'\n\nconst shouldForwardIndicatorProp = createShouldForwardProp((propKey) => {\n return !['square', 'black', 'grey', 'onColored', 'pulse', 'pulseIterationCount', 'frame'].includes(propKey)\n})\n\nconst pulseAnimation = keyframes`\n 0% {\n opacity: 1;\n transform: scale(1);\n }\n 75% {\n opacity: 0;\n }\n 100% {\n transform: scale(4);\n }\n`\n\nexport const Foreground = styled.span`\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 1;\n border-radius: inherit;\n background-color: inherit;\n`\n\nconst template = (palette: IndicatorPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n\n & > ${Foreground} {\n box-shadow: 0 0 0 1px ${palette.shadowColor};\n }\n`\n\nconst COLOR_SCHEMA = {\n onColored: {\n primary: css<StyledIndicatorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors['bg-oncolor-primary'],\n shadowColor: props.theme.colors['bg-oncolor-primary'],\n ...props.palette,\n })}\n `,\n secondary: css<StyledIndicatorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-brand-secondary-500'],\n shadowColor: props.theme.colors['bg-oncolor-primary'],\n ...props.palette,\n })}\n `,\n black: css<StyledIndicatorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-contrast'],\n shadowColor: props.theme.colors['bg-oncolor-primary'],\n ...props.palette,\n })}\n `,\n grey: css<StyledIndicatorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-oncolor-secondary'],\n shadowColor: props.theme.colors['bg-oncolor-primary'],\n ...props.palette,\n })}\n `,\n },\n default: {\n primary: css<StyledIndicatorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-500'],\n shadowColor: props.theme.colors['bg-onmain-primary'],\n ...props.palette,\n })}\n `,\n secondary: css<StyledIndicatorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-brand-secondary-500'],\n shadowColor: props.theme.colors['bg-onmain-primary'],\n ...props.palette,\n })}\n `,\n black: css<StyledIndicatorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-contrast'],\n shadowColor: props.theme.colors['bg-onmain-primary'],\n ...props.palette,\n })}\n `,\n grey: css<StyledIndicatorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-divider'],\n shadowColor: props.theme.colors['bg-onmain-primary'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.span\n .withConfig<StyledIndicatorProps>({\n shouldForwardProp: shouldForwardIndicatorProp,\n })\n .attrs<StyledIndicatorProps>(\n (props): Required<Pick<StyledIndicatorProps, 'dynamicSizeDeclaration'>> => ({\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n width: props.square ? 'min-content' : '1em',\n minWidth: props.square ? '1.6em' : undefined,\n height: props.square ? '1.6em' : '1em',\n borderRadius: props.square ? '0.2em' : '50%',\n }),\n })\n )`\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n cursor: default;\n display: inline-block;\n
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Indicator/style.ts"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { StyledIndicatorProps, IndicatorPalette } from './types'\n\nconst shouldForwardIndicatorProp = createShouldForwardProp((propKey) => {\n return !['square', 'black', 'grey', 'onColored', 'pulse', 'pulseIterationCount', 'frame'].includes(propKey)\n})\n\nconst pulseAnimation = keyframes`\n 0% {\n opacity: 1;\n transform: scale(1);\n }\n 75% {\n opacity: 0;\n }\n 100% {\n transform: scale(4);\n }\n`\n\nexport const Foreground = styled.span`\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 1;\n border-radius: inherit;\n background-color: inherit;\n`\n\nconst template = (palette: IndicatorPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n\n & > ${Foreground} {\n box-shadow: 0 0 0 1px ${palette.shadowColor};\n }\n`\n\nconst COLOR_SCHEMA = {\n onColored: {\n primary: css<StyledIndicatorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-brand-primary'],\n backgroundColor: props.theme.colors['bg-oncolor-primary'],\n shadowColor: props.theme.colors['bg-oncolor-primary'],\n ...props.palette,\n })}\n `,\n secondary: css<StyledIndicatorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-brand-secondary-500'],\n shadowColor: props.theme.colors['bg-oncolor-primary'],\n ...props.palette,\n })}\n `,\n black: css<StyledIndicatorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-contrast'],\n shadowColor: props.theme.colors['bg-oncolor-primary'],\n ...props.palette,\n })}\n `,\n grey: css<StyledIndicatorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-oncolor-secondary'],\n shadowColor: props.theme.colors['bg-oncolor-primary'],\n ...props.palette,\n })}\n `,\n },\n default: {\n primary: css<StyledIndicatorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-500'],\n shadowColor: props.theme.colors['bg-onmain-primary'],\n ...props.palette,\n })}\n `,\n secondary: css<StyledIndicatorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-brand-secondary-500'],\n shadowColor: props.theme.colors['bg-onmain-primary'],\n ...props.palette,\n })}\n `,\n black: css<StyledIndicatorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-contrast'],\n shadowColor: props.theme.colors['bg-onmain-primary'],\n ...props.palette,\n })}\n `,\n grey: css<StyledIndicatorProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-divider'],\n shadowColor: props.theme.colors['bg-onmain-primary'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.span\n .withConfig<StyledIndicatorProps>({\n shouldForwardProp: shouldForwardIndicatorProp,\n })\n .attrs<StyledIndicatorProps>(\n (props): Required<Pick<StyledIndicatorProps, 'dynamicSizeDeclaration'>> => ({\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n width: props.square ? 'min-content' : '1em',\n minWidth: props.square ? '1.6em' : undefined,\n height: props.square ? '1.6em' : '1em',\n borderRadius: props.square ? '0.2em' : '50%',\n }),\n })\n )`\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n cursor: default;\n display: inline-block;\n flex-shrink: 0;\n\n ${(props) => {\n const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n\n if (props.grey) return schema.grey\n if (props.black) return schema.black\n if (props.secondary) return schema.secondary\n\n return schema.primary\n }}\n\n ${(props) =>\n !props.frame &&\n `\n & > ${Foreground} {\n box-shadow: none;\n }\n `}\n\n ${(props) =>\n props.pulse &&\n css`\n &::before,\n &::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n background-color: inherit;\n border-radius: inherit;\n animation-name: ${pulseAnimation};\n animation-duration: 3200ms;\n animation-iteration-count: ${typeof props.pulseIterationCount === 'number'\n ? props.pulseIterationCount\n : 'infinite'};\n }\n\n &::after {\n animation-delay: 800ms;\n }\n `}\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardIndicatorProp","createShouldForwardProp","propKey","includes","pulseAnimation","keyframes","Foreground","styled","span","withConfig","componentId","template","palette","color","concat","backgroundColor","shadowColor","COLOR_SCHEMA","onColored","primary","css","props","_objectSpread","theme","colors","secondary","black","grey","default","Root","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","width","square","minWidth","height","borderRadius","schema","frame","pulse","pulseIterationCount","responsiveSize"],"mappings":"qPAKA,IAAMA,EAA6BC,GAAyBC,IAClD,CAAC,SAAU,QAAS,OAAQ,YAAa,QAAS,sBAAuB,SAASC,SAASD,KAGrG,IAAME,EAAiBC,EAAvB,CAAA,8EAaaC,IAAAA,EAAaC,EAAOC,KAAVC,WAAA,CAAAC,YAAA,wBAAGH,CAAnB,CAAA,oLAaP,IAAMI,EAAYC,GACPA,cAAAA,OAAAA,EAAQC,MADF,2BAAAC,OAEKF,EAAQG,gBAEtBT,eAAAA,OAAAA,2CACoBM,EAAQI,YALpC,YASA,IAAMC,EAAe,CACnBC,UAAW,CACTC,QAASC,EACJC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,yBAC1BT,gBAAiBM,EAAME,MAAMC,OAAO,sBACpCR,YAAaK,EAAME,MAAMC,OAAO,uBAC7BH,EAAMT,YAGfa,UAAWL,EACNC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,2BAC1BT,gBAAiBM,EAAME,MAAMC,OAAO,0BACpCR,YAAaK,EAAME,MAAMC,OAAO,uBAC7BH,EAAMT,YAGfc,MAAON,EACFC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,2BAC1BT,gBAAiBM,EAAME,MAAMC,OAAO,sBACpCR,YAAaK,EAAME,MAAMC,OAAO,uBAC7BH,EAAMT,YAGfe,KAAMP,EACDC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,2BAC1BT,gBAAiBM,EAAME,MAAMC,OAAO,wBACpCR,YAAaK,EAAME,MAAMC,OAAO,uBAC7BH,EAAMT,aAIjBgB,QAAS,CACPT,QAASC,EACJC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,2BAC1BT,gBAAiBM,EAAME,MAAMC,OAAO,wBACpCR,YAAaK,EAAME,MAAMC,OAAO,sBAC7BH,EAAMT,YAGfa,UAAWL,EACNC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,2BAC1BT,gBAAiBM,EAAME,MAAMC,OAAO,0BACpCR,YAAaK,EAAME,MAAMC,OAAO,sBAC7BH,EAAMT,YAGfc,MAAON,EACFC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,2BAC1BT,gBAAiBM,EAAME,MAAMC,OAAO,sBACpCR,YAAaK,EAAME,MAAMC,OAAO,sBAC7BH,EAAMT,YAGfe,KAAMP,EACDC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,0BAC1BT,gBAAiBM,EAAME,MAAMC,OAAO,qBACpCR,YAAaK,EAAME,MAAMC,OAAO,sBAC7BH,EAAMT,cAMZ,IAAMiB,EAAOtB,EAAOC,KACxBC,WAAiC,CAChCqB,kBAAmB9B,IAEpB+B,OACEV,IAAAA,CACCW,uBAAwB,CAACC,EAAMC,KAAAA,CAC7BC,SAA0B,iBAATF,EAAoBA,EAAUA,GAAAA,OAAAA,GAAOC,OAAAA,GACtDE,MAAOf,EAAMgB,OAAS,cAAgB,MACtCC,SAAUjB,EAAMgB,OAAS,eACzBE,OAAQlB,EAAMgB,OAAS,QAAU,MACjCG,aAAcnB,EAAMgB,OAAS,QAAU,YAX9B5B,WAAA,CAAAC,YAAA,wBAAGH,CAAH,CAAA,+GAAA,IAAA,IAAA,IAAA,KAsBZc,IACD,IAAMoB,EAASpB,EAAMH,UAAYD,EAAaC,UAAYD,EAAaW,QAEvE,OAAIP,EAAMM,KAAac,EAAOd,KAC1BN,EAAMK,MAAce,EAAOf,MAC3BL,EAAMI,UAAkBgB,EAAOhB,UAE5BgB,EAAOtB,WAGbE,IACAA,EAAMqB,OAAP,eAAA5B,OAEQR,EAFR,kDAOCe,GACDA,EAAMsB,OACNvB,EAYsBhB,CAAAA,+JAAAA,wDAAAA,sCAAAA,EAEgD,iBAA9BiB,EAAMuB,oBACtCvB,EAAMuB,oBACN,aAQRC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from'@babel/runtime/helpers/objectSpread2';import r,{keyframes as e,css as n}from'styled-components';import{createShouldForwardProp as
|
|
1
|
+
import o from'@babel/runtime/helpers/objectSpread2';import r,{keyframes as e,css as n}from'styled-components';import{createShouldForwardProp as i}from'../../shared/utils/style.js';import{responsiveMargin as t}from'../../mixins/responsive-margin.js';var a=i((o=>!['inline','round','borderRadius','width','height','animationDuration','animationDelay','onColored'].includes(o)));var l=e(["0%{background-position:100% 50%;}100%{background-position:0% 50%;}"]);var d=o=>"\n background-color: ".concat(o.color,";\n background-image: linear-gradient(90deg, ").concat(o.gradientColor," 25%, ").concat(o.gradientHighlightColor," 45%, ").concat(o.gradientColor," 65%);\n");var s={onColored:{secondary:n(["",""],(r=>d(o({color:r.theme.colors['skeleton-oncolor-secondary'],gradientColor:r.theme.colors['skeleton-gradient-from-color-oncolor'],gradientHighlightColor:r.theme.colors['skeleton-gradient-to-color-oncolor']},r.palette)))),primary:n(["",""],(r=>d(o({color:r.theme.colors['skeleton-oncolor-primary'],gradientColor:r.theme.colors['skeleton-gradient-from-color-oncolor'],gradientHighlightColor:r.theme.colors['skeleton-gradient-to-color-oncolor']},r.palette))))},default:{secondary:n(["",""],(r=>d(o({color:r.theme.colors['skeleton-onmain-secondary'],gradientColor:r.theme.colors['skeleton-gradient-from-color-onmain'],gradientHighlightColor:r.theme.colors['skeleton-gradient-to-color-onmain']},r.palette)))),primary:n(["",""],(r=>d(o({color:r.theme.colors['skeleton-onmain-primary'],gradientColor:r.theme.colors['skeleton-gradient-from-color-onmain'],gradientHighlightColor:r.theme.colors['skeleton-gradient-to-color-onmain']},r.palette))))}};var c=r.div.withConfig({shouldForwardProp:a}).withConfig({componentId:"fox-ui__sc-4t2o9u-0"})([""," "," ",""],(o=>{var r,e;var i=o.round?'50%':8;'string'!=typeof o.borderRadius&&'number'!=typeof o.borderRadius||(i=o.borderRadius);var t=o.width?o.width:'auto';var a=o.height?o.height:'auto';return n(["box-sizing:border-box;display:",";width:",";height:",";border-radius:",";flex-shrink:0;margin:0;background-origin:border-box;background-size:400% 100%;background-repeat:no-repeat;animation-name:",";animation-duration:","ms;animation-delay:","ms;animation-iteration-count:infinite;& > *{visibility:hidden;}"],o.inline?'inline-block':'block','string'==typeof t?t:"".concat(t,"px"),'string'==typeof a?a:"".concat(a,"px"),'string'==typeof i?i:"".concat(i,"px"),l,null!==(r=o.animationDuration)&&void 0!==r?r:2e3,null!==(e=o.animationDelay)&&void 0!==e?e:500)}),(o=>{var r=o.onColored?s.onColored:s.default;return o.secondary?r.secondary:r.primary}),t);export{c as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Skeleton/style.ts"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { StyledSkeletonProps, SkeletonPalette } from './types'\n\nconst shouldForwardSkeletonProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'inline',\n 'round',\n 'borderRadius',\n 'width',\n 'height',\n 'animationDuration',\n 'animationDelay',\n 'onColored',\n ].includes(propKey)\n)\n\nconst shiftAnimation = keyframes`\n 0% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n`\n\nconst template = (palette: SkeletonPalette) => `\n background-color: ${palette.color};\n background-image: linear-gradient(90deg, ${palette.gradientColor} 25%, ${palette.gradientHighlightColor} 45%, ${palette.gradientColor} 65%);\n`\n\nconst COLOR_SCHEMA = {\n onColored: {\n secondary: css<StyledSkeletonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['skeleton-oncolor-secondary'],\n gradientColor: props.theme.colors['skeleton-gradient-from-color-oncolor'],\n gradientHighlightColor: props.theme.colors['skeleton-gradient-to-color-oncolor'],\n ...props.palette,\n })}\n `,\n primary: css<StyledSkeletonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['skeleton-oncolor-primary'],\n gradientColor: props.theme.colors['skeleton-gradient-from-color-oncolor'],\n gradientHighlightColor: props.theme.colors['skeleton-gradient-to-color-oncolor'],\n ...props.palette,\n })}\n `,\n },\n default: {\n secondary: css<StyledSkeletonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['skeleton-onmain-secondary'],\n gradientColor: props.theme.colors['skeleton-gradient-from-color-onmain'],\n gradientHighlightColor: props.theme.colors['skeleton-gradient-to-color-onmain'],\n ...props.palette,\n })}\n `,\n primary: css<StyledSkeletonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['skeleton-onmain-primary'],\n gradientColor: props.theme.colors['skeleton-gradient-from-color-onmain'],\n gradientHighlightColor: props.theme.colors['skeleton-gradient-to-color-onmain'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.div.withConfig<StyledSkeletonProps>({\n shouldForwardProp: shouldForwardSkeletonProp,\n})`\n ${(props) => {\n let borderRadius = props.round ? '50%' : 8\n if (typeof props.borderRadius === 'string' || typeof props.borderRadius === 'number') {\n borderRadius = props.borderRadius\n }\n\n const width = props.width ? props.width : 'auto'\n const height = props.height ? props.height : 'auto'\n\n return css`\n box-sizing: border-box;\n display: ${props.inline ? 'inline-block' : 'block'};\n width: ${typeof width === 'string' ? width : `${width}px`};\n height: ${typeof height === 'string' ? height : `${height}px`};\n border-radius: ${typeof borderRadius === 'string' ? borderRadius : `${borderRadius}px`};\n flex-shrink: 0;\n background-origin: border-box;\n background-size: 400% 100%;\n background-repeat: no-repeat;\n animation-name: ${shiftAnimation};\n animation-duration: ${props.animationDuration ?? 2000}ms;\n animation-delay: ${props.animationDelay ?? 500}ms;\n animation-iteration-count: infinite;\n\n & > * {\n visibility: hidden;\n }\n `\n }}\n\n ${(props) => {\n const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n\n return props.secondary ? schema.secondary : schema.primary\n }}\n\n ${responsiveMargin}\n`\n"],"names":["shouldForwardSkeletonProp","createShouldForwardProp","propKey","includes","shiftAnimation","keyframes","template","palette","color","gradientColor","concat","gradientHighlightColor","COLOR_SCHEMA","onColored","secondary","css","props","_objectSpread","theme","colors","primary","default","Root","styled","div","withConfig","shouldForwardProp","componentId","_props$animationDurat","_props$animationDelay","borderRadius","round","width","height","inline","animationDuration","animationDelay","schema","responsiveMargin"],"mappings":"yPAKA,IAAMA,EAA4BC,GAC/BC,IACE,CACC,SACA,QACA,eACA,QACA,SACA,oBACA,iBACA,aACAC,SAASD,KAGf,IAAME,EAAiBC,EAAvB,CAAA,uEASA,IAAMC,EAAYC,mCACIA,EAAQC,MACeD,kDAAAA,OAAAA,EAAQE,cAFpC,UAAAC,OAE0DH,EAAQI,wCAA+BJ,EAAQE,cAF1H,YAKA,IAAMG,EAAe,CACnBC,UAAW,CACTC,UAAWC,EACNC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,8BAC1BV,cAAeO,EAAME,MAAMC,OAAO,wCAClCR,uBAAwBK,EAAME,MAAMC,OAAO,uCACxCH,EAAMT,YAGfa,QAASL,EACJC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,4BAC1BV,cAAeO,EAAME,MAAMC,OAAO,wCAClCR,uBAAwBK,EAAME,MAAMC,OAAO,uCACxCH,EAAMT,aAIjBc,QAAS,CACPP,UAAWC,EACNC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,6BAC1BV,cAAeO,EAAME,MAAMC,OAAO,uCAClCR,uBAAwBK,EAAME,MAAMC,OAAO,sCACxCH,EAAMT,YAGfa,QAASL,EACJC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,2BAC1BV,cAAeO,EAAME,MAAMC,OAAO,uCAClCR,uBAAwBK,EAAME,MAAMC,OAAO,sCACxCH,EAAMT,cAMZ,IAAMe,EAAOC,EAAOC,IAAIC,WAAgC,CAC7DC,kBAAmB1B,IADJyB,WAAA,CAAAE,YAAA,uBAAGJ,CAAH,CAAA,GAAA,IAAA,IAAA,KAGZP,IAAU,IAAAY,EAAAC,EACX,IAAIC,EAAed,EAAMe,MAAQ,MAAQ,EACP,iBAAvBf,EAAMc,cAA2D,iBAAvBd,EAAMc,eACzDA,EAAed,EAAMc,cAGvB,IAAME,EAAQhB,EAAMgB,MAAQhB,EAAMgB,MAAQ,OAC1C,IAAMC,EAASjB,EAAMiB,OAASjB,EAAMiB,OAAS,OAE7C,OAAOlB,EAEMC,CAAAA,iCAAAA,UAAAA,WAAAA,kBAAAA,
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Skeleton/style.ts"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { StyledSkeletonProps, SkeletonPalette } from './types'\n\nconst shouldForwardSkeletonProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'inline',\n 'round',\n 'borderRadius',\n 'width',\n 'height',\n 'animationDuration',\n 'animationDelay',\n 'onColored',\n ].includes(propKey)\n)\n\nconst shiftAnimation = keyframes`\n 0% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n`\n\nconst template = (palette: SkeletonPalette) => `\n background-color: ${palette.color};\n background-image: linear-gradient(90deg, ${palette.gradientColor} 25%, ${palette.gradientHighlightColor} 45%, ${palette.gradientColor} 65%);\n`\n\nconst COLOR_SCHEMA = {\n onColored: {\n secondary: css<StyledSkeletonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['skeleton-oncolor-secondary'],\n gradientColor: props.theme.colors['skeleton-gradient-from-color-oncolor'],\n gradientHighlightColor: props.theme.colors['skeleton-gradient-to-color-oncolor'],\n ...props.palette,\n })}\n `,\n primary: css<StyledSkeletonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['skeleton-oncolor-primary'],\n gradientColor: props.theme.colors['skeleton-gradient-from-color-oncolor'],\n gradientHighlightColor: props.theme.colors['skeleton-gradient-to-color-oncolor'],\n ...props.palette,\n })}\n `,\n },\n default: {\n secondary: css<StyledSkeletonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['skeleton-onmain-secondary'],\n gradientColor: props.theme.colors['skeleton-gradient-from-color-onmain'],\n gradientHighlightColor: props.theme.colors['skeleton-gradient-to-color-onmain'],\n ...props.palette,\n })}\n `,\n primary: css<StyledSkeletonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['skeleton-onmain-primary'],\n gradientColor: props.theme.colors['skeleton-gradient-from-color-onmain'],\n gradientHighlightColor: props.theme.colors['skeleton-gradient-to-color-onmain'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.div.withConfig<StyledSkeletonProps>({\n shouldForwardProp: shouldForwardSkeletonProp,\n})`\n ${(props) => {\n let borderRadius = props.round ? '50%' : 8\n if (typeof props.borderRadius === 'string' || typeof props.borderRadius === 'number') {\n borderRadius = props.borderRadius\n }\n\n const width = props.width ? props.width : 'auto'\n const height = props.height ? props.height : 'auto'\n\n return css`\n box-sizing: border-box;\n display: ${props.inline ? 'inline-block' : 'block'};\n width: ${typeof width === 'string' ? width : `${width}px`};\n height: ${typeof height === 'string' ? height : `${height}px`};\n border-radius: ${typeof borderRadius === 'string' ? borderRadius : `${borderRadius}px`};\n flex-shrink: 0;\n margin: 0;\n background-origin: border-box;\n background-size: 400% 100%;\n background-repeat: no-repeat;\n animation-name: ${shiftAnimation};\n animation-duration: ${props.animationDuration ?? 2000}ms;\n animation-delay: ${props.animationDelay ?? 500}ms;\n animation-iteration-count: infinite;\n\n & > * {\n visibility: hidden;\n }\n `\n }}\n\n ${(props) => {\n const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n\n return props.secondary ? schema.secondary : schema.primary\n }}\n\n ${responsiveMargin}\n`\n"],"names":["shouldForwardSkeletonProp","createShouldForwardProp","propKey","includes","shiftAnimation","keyframes","template","palette","color","gradientColor","concat","gradientHighlightColor","COLOR_SCHEMA","onColored","secondary","css","props","_objectSpread","theme","colors","primary","default","Root","styled","div","withConfig","shouldForwardProp","componentId","_props$animationDurat","_props$animationDelay","borderRadius","round","width","height","inline","animationDuration","animationDelay","schema","responsiveMargin"],"mappings":"yPAKA,IAAMA,EAA4BC,GAC/BC,IACE,CACC,SACA,QACA,eACA,QACA,SACA,oBACA,iBACA,aACAC,SAASD,KAGf,IAAME,EAAiBC,EAAvB,CAAA,uEASA,IAAMC,EAAYC,mCACIA,EAAQC,MACeD,kDAAAA,OAAAA,EAAQE,cAFpC,UAAAC,OAE0DH,EAAQI,wCAA+BJ,EAAQE,cAF1H,YAKA,IAAMG,EAAe,CACnBC,UAAW,CACTC,UAAWC,EACNC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,8BAC1BV,cAAeO,EAAME,MAAMC,OAAO,wCAClCR,uBAAwBK,EAAME,MAAMC,OAAO,uCACxCH,EAAMT,YAGfa,QAASL,EACJC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,4BAC1BV,cAAeO,EAAME,MAAMC,OAAO,wCAClCR,uBAAwBK,EAAME,MAAMC,OAAO,uCACxCH,EAAMT,aAIjBc,QAAS,CACPP,UAAWC,EACNC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,6BAC1BV,cAAeO,EAAME,MAAMC,OAAO,uCAClCR,uBAAwBK,EAAME,MAAMC,OAAO,sCACxCH,EAAMT,YAGfa,QAASL,EACJC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,2BAC1BV,cAAeO,EAAME,MAAMC,OAAO,uCAClCR,uBAAwBK,EAAME,MAAMC,OAAO,sCACxCH,EAAMT,cAMZ,IAAMe,EAAOC,EAAOC,IAAIC,WAAgC,CAC7DC,kBAAmB1B,IADJyB,WAAA,CAAAE,YAAA,uBAAGJ,CAAH,CAAA,GAAA,IAAA,IAAA,KAGZP,IAAU,IAAAY,EAAAC,EACX,IAAIC,EAAed,EAAMe,MAAQ,MAAQ,EACP,iBAAvBf,EAAMc,cAA2D,iBAAvBd,EAAMc,eACzDA,EAAed,EAAMc,cAGvB,IAAME,EAAQhB,EAAMgB,MAAQhB,EAAMgB,MAAQ,OAC1C,IAAMC,EAASjB,EAAMiB,OAASjB,EAAMiB,OAAS,OAE7C,OAAOlB,EAEMC,CAAAA,iCAAAA,UAAAA,WAAAA,kBAAAA,6HAAAA,uBAAAA,sBAAAA,mEAAAA,EAAMkB,OAAS,eAAiB,QACjB,iBAAVF,EAAqBA,EAA5B,GAAAtB,OAAuCsB,EAAvC,MACmB,iBAAXC,EAAsBA,YAAYA,EAAzC,MAC+B,iBAAjBH,EAA4BA,EAAkBA,GAAAA,OAAAA,EALxE,MAWoB1B,EAC+B,QAA3BY,EAAAA,EAAMmB,yBAAAA,IAAqBP,EAAAA,EAAA,IAZnD,UAaqBZ,EAAMoB,sBAb3B,IAAAP,EAAAA,EAa6C,QAS5Cb,IACD,IAAMqB,EAASrB,EAAMH,UAAYD,EAAaC,UAAYD,EAAaS,QAEvE,OAAOL,EAAMF,UAAYuB,EAAOvB,UAAYuB,EAAOjB,UAGnDkB"}
|
package/dts/index.d.ts
CHANGED
|
@@ -1020,7 +1020,7 @@ interface TextProps extends ResponsiveSizeProps, ResponsiveMarginProps, DisplayP
|
|
|
1020
1020
|
/** Font style */
|
|
1021
1021
|
fontStyle?: 'normal' | 'italic';
|
|
1022
1022
|
/** Text transform */
|
|
1023
|
-
transform?: 'capitalize' | 'uppercase' | 'lowercase';
|
|
1023
|
+
transform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
|
|
1024
1024
|
/** Underline content */
|
|
1025
1025
|
underline?: CSSBorderStyle | boolean;
|
|
1026
1026
|
/** Text align */
|
|
@@ -1758,6 +1758,8 @@ interface SkeletonProps extends ResponsiveMarginProps, React.ComponentPropsWithR
|
|
|
1758
1758
|
secondary?: boolean;
|
|
1759
1759
|
/** Appearance variant */
|
|
1760
1760
|
onColored?: boolean;
|
|
1761
|
+
/** Root node type */
|
|
1762
|
+
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
|
|
1761
1763
|
}
|
|
1762
1764
|
|
|
1763
1765
|
/**
|
|
@@ -2218,6 +2220,48 @@ interface IndicatorProps extends ResponsiveSizeProps, React.ComponentPropsWithRe
|
|
|
2218
2220
|
*/
|
|
2219
2221
|
declare const Indicator: React.ForwardRefExoticComponent<IndicatorProps>;
|
|
2220
2222
|
|
|
2223
|
+
declare type AvatarPalette = {
|
|
2224
|
+
color: CSSColor;
|
|
2225
|
+
backgroundColor: CSSColor;
|
|
2226
|
+
shadowColor: CSSColor;
|
|
2227
|
+
};
|
|
2228
|
+
interface AvatarProps extends Omit<ResponsiveSizeProps, 'size'>, ResponsiveMarginProps,
|
|
2229
|
+
/** @deprecated Use palette */
|
|
2230
|
+
ColorProperty<'color'>, Omit<React.ComponentPropsWithRef<'span'>, 'color'> {
|
|
2231
|
+
/** UI: brand (v3), or default (v2) */
|
|
2232
|
+
preset?: ThemePreset;
|
|
2233
|
+
/** @ignore Component size */
|
|
2234
|
+
size?: ResponsiveSizeProps['size'] | 'sm';
|
|
2235
|
+
/** Custom colors */
|
|
2236
|
+
palette?: Partial<Record<keyof AvatarPalette, Color>>;
|
|
2237
|
+
/** Text content (alternative to image) */
|
|
2238
|
+
text?: string;
|
|
2239
|
+
/** Props for text component */
|
|
2240
|
+
textProps?: TextProps;
|
|
2241
|
+
/** Avatar img url */
|
|
2242
|
+
src?: string;
|
|
2243
|
+
/** Apply shadow styles */
|
|
2244
|
+
shadow?: boolean;
|
|
2245
|
+
/** Root border-radius */
|
|
2246
|
+
borderRadius?: string | number;
|
|
2247
|
+
/** Shape variant */
|
|
2248
|
+
square?: boolean;
|
|
2249
|
+
/** Loading appearance */
|
|
2250
|
+
loading?: boolean;
|
|
2251
|
+
}
|
|
2252
|
+
|
|
2253
|
+
/**
|
|
2254
|
+
*
|
|
2255
|
+
* Component accepts all \<span\> attributes.
|
|
2256
|
+
*
|
|
2257
|
+
* Responsive "size", "margin" props are supported.
|
|
2258
|
+
*
|
|
2259
|
+
* Exposed "ref" attached to root node.
|
|
2260
|
+
*
|
|
2261
|
+
* See full [AvatarProps](https://github.com/foxford/ui/blob/master/src/components/AvatarProps/types.ts)
|
|
2262
|
+
*/
|
|
2263
|
+
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps>;
|
|
2264
|
+
|
|
2221
2265
|
interface Theme {
|
|
2222
2266
|
breakpoints: Readonly<Record<Lowercase<Breakpoint>, number>>;
|
|
2223
2267
|
colors: Record<keyof typeof ColorNames, CSSColor>;
|
|
@@ -2258,6 +2302,7 @@ interface Theme {
|
|
|
2258
2302
|
PopoverComponent?: PopoverComponentProps;
|
|
2259
2303
|
ListItem?: ListItemProps;
|
|
2260
2304
|
Indicator?: IndicatorProps;
|
|
2305
|
+
Avatar?: AvatarProps;
|
|
2261
2306
|
};
|
|
2262
2307
|
}
|
|
2263
2308
|
|
|
@@ -2536,43 +2581,6 @@ declare class Amount extends PureComponent<AmountProps> {
|
|
|
2536
2581
|
render(): JSX.Element;
|
|
2537
2582
|
}
|
|
2538
2583
|
|
|
2539
|
-
interface AvatarProps extends BaseProps, ColorProperty {
|
|
2540
|
-
/**
|
|
2541
|
-
* Children react node
|
|
2542
|
-
*/
|
|
2543
|
-
children?: React.ReactNode;
|
|
2544
|
-
/** Title for avatar. Example user name. */
|
|
2545
|
-
title?: string;
|
|
2546
|
-
/** Image source */
|
|
2547
|
-
src?: string;
|
|
2548
|
-
/** Size of avatar */
|
|
2549
|
-
size?: 'l' | 'm' | 'sm' | 's' | 'xs' | number;
|
|
2550
|
-
/** Shadow of avatar */
|
|
2551
|
-
shadow?: boolean;
|
|
2552
|
-
/** Make ref func */
|
|
2553
|
-
ref?: React.LegacyRef<HTMLDivElement>;
|
|
2554
|
-
/**
|
|
2555
|
-
* Generate color by title automatically
|
|
2556
|
-
*
|
|
2557
|
-
* `Performance Info`: Each render of component call getAvatarColor function on received title
|
|
2558
|
-
*/
|
|
2559
|
-
autoColor?: boolean;
|
|
2560
|
-
}
|
|
2561
|
-
/**
|
|
2562
|
-
* Расширен:
|
|
2563
|
-
* - [`BaseProps`](#/Миксины)
|
|
2564
|
-
* - [`Color`](#/Миксины)
|
|
2565
|
-
*/
|
|
2566
|
-
declare class Avatar extends PureComponent<AvatarProps> {
|
|
2567
|
-
static defaultProps: {
|
|
2568
|
-
size: string;
|
|
2569
|
-
autoColor: boolean;
|
|
2570
|
-
};
|
|
2571
|
-
static displayName: string;
|
|
2572
|
-
getAvatarText(): string;
|
|
2573
|
-
render(): JSX.Element;
|
|
2574
|
-
}
|
|
2575
|
-
|
|
2576
2584
|
interface ContainerProps extends BaseProps, DisplayProperty, ColorProperty {
|
|
2577
2585
|
/**
|
|
2578
2586
|
* Primary content
|