@foxford/ui 2.56.1 → 2.57.0-beta-c82521f-20241219
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/Anchor/Anchor.js +1 -1
- package/components/Anchor/Anchor.js.map +1 -1
- package/components/Anchor/Anchor.mjs +1 -1
- package/components/Anchor/Anchor.mjs.map +1 -1
- package/components/Anchor/style.js +1 -1
- package/components/Anchor/style.js.map +1 -1
- package/components/Anchor/style.mjs +1 -1
- package/components/Anchor/style.mjs.map +1 -1
- package/components/Avatar/Avatar.js +1 -1
- package/components/Avatar/Avatar.js.map +1 -1
- package/components/Avatar/Avatar.mjs +1 -1
- package/components/Avatar/Avatar.mjs.map +1 -1
- package/components/Avatar/constants.js +1 -1
- package/components/Avatar/constants.js.map +1 -1
- package/components/Avatar/constants.mjs +1 -1
- package/components/Avatar/constants.mjs.map +1 -1
- package/components/Chip/Chip.js +1 -1
- package/components/Chip/Chip.js.map +1 -1
- package/components/Chip/Chip.mjs +1 -1
- package/components/Chip/Chip.mjs.map +1 -1
- package/components/Chip/constants.js +1 -1
- package/components/Chip/constants.js.map +1 -1
- package/components/Chip/constants.mjs +1 -1
- package/components/Chip/constants.mjs.map +1 -1
- package/components/Chip/style.js +1 -1
- package/components/Chip/style.js.map +1 -1
- package/components/Chip/style.mjs +1 -1
- package/components/Chip/style.mjs.map +1 -1
- package/components/Dropdown/Dropdown.js +1 -1
- package/components/Dropdown/Dropdown.js.map +1 -1
- package/components/Dropdown/Dropdown.mjs +1 -1
- package/components/Dropdown/Dropdown.mjs.map +1 -1
- package/components/Indicator/Indicator.js +1 -1
- package/components/Indicator/Indicator.js.map +1 -1
- package/components/Indicator/Indicator.mjs +1 -1
- package/components/Indicator/Indicator.mjs.map +1 -1
- package/components/Indicator/style.js +1 -1
- package/components/Indicator/style.js.map +1 -1
- package/components/Indicator/style.mjs +1 -1
- package/components/Indicator/style.mjs.map +1 -1
- package/components/Text/style.js +1 -1
- package/components/Text/style.js.map +1 -1
- package/components/Text/style.mjs +1 -1
- package/components/Text/style.mjs.map +1 -1
- package/dts/index.d.ts +73 -29
- package/package.json +2 -1
|
@@ -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 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","undefined","text","Indicator","withMergedProps","forwardRef","ref","size","textProps","restProps","hasContent","_jsx","Styled","square","jsx","Text","as","appearance","color","whiteSpace","weight","lineHeight","marginTop","marginRight","marginLeft","displayName","sizes","SIZES_SQUARE","SIZES"],"mappings":"6PASA,MAAMA,0BAA6BC,GAChCA,EAAMC,gBAAaC,GAAaF,EAAMC,WAAa,MAAUD,EAAMG,YAASD,GAAaF,EAAMG,OAAS,KAYrGC,MAAAA,UAA6DC,gBAAAA,gBACjEC,MAAAA,YAAW,CAACN,EAAOO,KACjB,MAAMC,KAAEA,EAAO,IAAGC,UAAEA,EAAY,CAAE,EAAAR,SAAEA,EAAQE,KAAEA,KAASO,GAAcV,EAErE,MAAMW,EAAaZ,0BAA0BC,GAE7C,OACEY,WAAAA,IAACC,MAAAA,KAAW,IAAKH,EAAWF,KAAMA,EAAMM,OAAQH,EAAYJ,IAAKA,EAAIN,SACnEW,WAAAG,IAACF,iBAAiB,CAAAZ,SACfU,GACCC,WAAAG,IAACC,UAAI,CACHC,GAAG,OACHC,WAAW,OACXV,KAAK,UACLW,MAAM,UACNC,WAAW,SACXC,OAAQ,IACRC,WAAY,EACZC,UAAW,EACXC,YAAY,QACZC,WAAW,WACPhB,EAASR,SAEZA,GAAYE,OAIP,IAGlB,CACEuB,YA9CmB,YA+CnBC,MAAQ3B,GAAWD,0BAA0BC,GAAS4B,UAAYA,aAAGC,UAAAA"}
|
|
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\nexport { SIZES, SIZES_SQUARE }\n"],"names":["indicatorPropsWithContent","props","children","undefined","text","Indicator","withMergedProps","forwardRef","ref","size","textProps","restProps","hasContent","_jsx","Styled","square","jsx","Text","as","appearance","color","whiteSpace","weight","lineHeight","marginTop","marginRight","marginLeft","displayName","sizes","SIZES_SQUARE","SIZES"],"mappings":"6PASA,MAAMA,0BAA6BC,GAChCA,EAAMC,gBAAaC,GAAaF,EAAMC,WAAa,MAAUD,EAAMG,YAASD,GAAaF,EAAMG,OAAS,KAYrGC,MAAAA,UAA6DC,gBAAAA,gBACjEC,MAAAA,YAAW,CAACN,EAAOO,KACjB,MAAMC,KAAEA,EAAO,IAAGC,UAAEA,EAAY,CAAE,EAAAR,SAAEA,EAAQE,KAAEA,KAASO,GAAcV,EAErE,MAAMW,EAAaZ,0BAA0BC,GAE7C,OACEY,WAAAA,IAACC,MAAAA,KAAW,IAAKH,EAAWF,KAAMA,EAAMM,OAAQH,EAAYJ,IAAKA,EAAIN,SACnEW,WAAAG,IAACF,iBAAiB,CAAAZ,SACfU,GACCC,WAAAG,IAACC,UAAI,CACHC,GAAG,OACHC,WAAW,OACXV,KAAK,UACLW,MAAM,UACNC,WAAW,SACXC,OAAQ,IACRC,WAAY,EACZC,UAAW,EACXC,YAAY,QACZC,WAAW,WACPhB,EAASR,SAEZA,GAAYE,OAIP,IAGlB,CACEuB,YA9CmB,YA+CnBC,MAAQ3B,GAAWD,0BAA0BC,GAAS4B,UAAYA,aAAGC,UAAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES_SQUARE,SIZES}from'./constants.mjs';import{Root,Foreground}from'./style.mjs';import{jsx}from'react/jsx-runtime';import{Text}from'../Text/Text.mjs';const indicatorPropsWithContent=r=>r.children!==void 0&&r.children!==null||r.text!==void 0&&r.text!==null;const Indicator=withMergedProps(forwardRef(((r,t)=>{const{size:e="m",textProps:o={},children:i,text:n,...s}=r;const a=indicatorPropsWithContent(r);return jsx(Root,{...s,size:e,square:a,ref:t,children:jsx(Foreground,{children:a&&jsx(Text,{as:"span",appearance:"body",size:"inherit",color:"inherit",whiteSpace:"nowrap",weight:700,lineHeight:1,marginTop:1,marginRight:"0.3em",marginLeft:"0.3em",...o,children:i??n})})})})),{displayName:'Indicator',sizes:r=>indicatorPropsWithContent(r)?SIZES_SQUARE:SIZES});export{Indicator};
|
|
1
|
+
import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES_SQUARE,SIZES}from'./constants.mjs';import{Root,Foreground}from'./style.mjs';import{jsx}from'react/jsx-runtime';import{Text}from'../Text/Text.mjs';const indicatorPropsWithContent=r=>r.children!==void 0&&r.children!==null||r.text!==void 0&&r.text!==null;const Indicator=withMergedProps(forwardRef(((r,t)=>{const{size:e="m",textProps:o={},children:i,text:n,...s}=r;const a=indicatorPropsWithContent(r);return jsx(Root,{...s,size:e,square:a,ref:t,children:jsx(Foreground,{children:a&&jsx(Text,{as:"span",appearance:"body",size:"inherit",color:"inherit",whiteSpace:"nowrap",weight:700,lineHeight:1,marginTop:1,marginRight:"0.3em",marginLeft:"0.3em",...o,children:i??n})})})})),{displayName:'Indicator',sizes:r=>indicatorPropsWithContent(r)?SIZES_SQUARE:SIZES});export{Indicator,SIZES,SIZES_SQUARE};
|
|
2
2
|
//# sourceMappingURL=Indicator.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Indicator.mjs","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","undefined","text","Indicator","withMergedProps","forwardRef","ref","size","textProps","restProps","hasContent","_jsx","Styled","square","Text","as","appearance","color","whiteSpace","weight","lineHeight","marginTop","marginRight","marginLeft","displayName","sizes","SIZES_SQUARE","SIZES"],"mappings":"yPASA,MAAMA,0BAA6BC,GAChCA,EAAMC,gBAAaC,GAAaF,EAAMC,WAAa,MAAUD,EAAMG,YAASD,GAAaF,EAAMG,OAAS,KAYrGC,MAAAA,UAA6DC,gBACjEC,YAAW,CAACN,EAAOO,KACjB,MAAMC,KAAEA,EAAO,IAAGC,UAAEA,EAAY,CAAE,EAAAR,SAAEA,EAAQE,KAAEA,KAASO,GAAcV,EAErE,MAAMW,EAAaZ,0BAA0BC,GAE7C,OACEY,IAACC,KAAW,IAAKH,EAAWF,KAAMA,EAAMM,OAAQH,EAAYJ,IAAKA,EAAIN,SACnEW,IAACC,WAAiB,CAAAZ,SACfU,GACCC,IAACG,KAAI,CACHC,GAAG,OACHC,WAAW,OACXT,KAAK,UACLU,MAAM,UACNC,WAAW,SACXC,OAAQ,IACRC,WAAY,EACZC,UAAW,EACXC,YAAY,QACZC,WAAW,WACPf,EAASR,SAEZA,GAAYE,OAIP,IAGlB,CACEsB,YA9CmB,YA+CnBC,MAAQ1B,GAAWD,0BAA0BC,GAAS2B,aAAeC"}
|
|
1
|
+
{"version":3,"file":"Indicator.mjs","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\nexport { SIZES, SIZES_SQUARE }\n"],"names":["indicatorPropsWithContent","props","children","undefined","text","Indicator","withMergedProps","forwardRef","ref","size","textProps","restProps","hasContent","_jsx","Styled","square","Text","as","appearance","color","whiteSpace","weight","lineHeight","marginTop","marginRight","marginLeft","displayName","sizes","SIZES_SQUARE","SIZES"],"mappings":"yPASA,MAAMA,0BAA6BC,GAChCA,EAAMC,gBAAaC,GAAaF,EAAMC,WAAa,MAAUD,EAAMG,YAASD,GAAaF,EAAMG,OAAS,KAYrGC,MAAAA,UAA6DC,gBACjEC,YAAW,CAACN,EAAOO,KACjB,MAAMC,KAAEA,EAAO,IAAGC,UAAEA,EAAY,CAAE,EAAAR,SAAEA,EAAQE,KAAEA,KAASO,GAAcV,EAErE,MAAMW,EAAaZ,0BAA0BC,GAE7C,OACEY,IAACC,KAAW,IAAKH,EAAWF,KAAMA,EAAMM,OAAQH,EAAYJ,IAAKA,EAAIN,SACnEW,IAACC,WAAiB,CAAAZ,SACfU,GACCC,IAACG,KAAI,CACHC,GAAG,OACHC,WAAW,OACXT,KAAK,UACLU,MAAM,UACNC,WAAW,SACXC,OAAQ,IACRC,WAAY,EACZC,UAAW,EACXC,YAAY,QACZC,WAAW,WACPf,EAASR,SAEZA,GAAYE,OAIP,IAGlB,CACEsB,YA9CmB,YA+CnBC,MAAQ1B,GAAWD,0BAA0BC,GAAS2B,aAAeC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var styled=require('styled-components');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardIndicatorProp=style.createShouldForwardProp((o=>!['square','black','grey','onColored','pulse','pulseIterationCount','frame'].includes(o)));const pulseAnimation=styled.keyframes(["0%{opacity:1;transform:scale(1);}75%{opacity:0;}100%{transform:scale(4);}"]);const Foreground=styled__default.default.span.withConfig({displayName:"Indicator__Foreground",componentId:"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;"]);const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n\n & > ${Foreground} {\n box-shadow: 0 0 0 1px ${o.shadowColor};\n }\n`;const COLOR_SCHEMA={onColored:{primary:styled.css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-oncolor-primary'],shadowColor:o.theme.colors['bg-oncolor-primary'],...o.palette}))),secondary:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-brand-secondary-500'],shadowColor:o.theme.colors['bg-oncolor-primary'],...o.palette}))),black:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-contrast'],shadowColor:o.theme.colors['bg-oncolor-primary'],...o.palette}))),grey:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-oncolor-secondary'],shadowColor:o.theme.colors['bg-oncolor-primary'],...o.palette})))},default:{primary:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-brand-primary-500'],shadowColor:o.theme.colors['bg-onmain-primary'],...o.palette}))),secondary:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-brand-secondary-500'],shadowColor:o.theme.colors['bg-onmain-primary'],...o.palette}))),black:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-contrast'],shadowColor:o.theme.colors['bg-onmain-primary'],...o.palette}))),grey:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-divider'],shadowColor:o.theme.colors['bg-onmain-primary'],...o.palette})))}};const Root=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardIndicatorProp}).attrs((o=>({dynamicSizeDeclaration:(e,r)=>({fontSize:typeof e=='string'?e:`${e}${r}`,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({displayName:"Indicator__Root",componentId:"ui__sc-1dc67xh-1"})(["box-sizing:border-box;position:relative;isolation:isolate;cursor:default;display:inline-block;flex-shrink:0;"," "," "," ",""],(o=>{const e=o.onColored?COLOR_SCHEMA.onColored:COLOR_SCHEMA.default;return o.grey?e.grey:o.black?e.black:o.secondary?e.secondary:e.primary}),(o=>!o.frame&&`\n & > ${Foreground} {\n box-shadow: none;\n }\n `),(o=>o.pulse&&styled.css(["&::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;}"],pulseAnimation,typeof o.pulseIterationCount=='number'?o.pulseIterationCount:'infinite')),responsiveSize.responsiveSize);exports.Foreground=Foreground,exports.Root=Root;
|
|
1
|
+
'use strict';var styled=require('styled-components');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);const shouldForwardIndicatorProp=style.createShouldForwardProp((o=>!['square','black','grey','onColored','pulse','pulseIterationCount','frame'].includes(o)));const pulseAnimation=styled.keyframes(["0%{opacity:1;transform:scale(1);}75%{opacity:0;}100%{transform:scale(4);}"]);const Foreground=styled__default.default.span.withConfig({displayName:"Indicator__Foreground",componentId:"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;"]);const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n\n & > ${Foreground} {\n box-shadow: 0 0 0 1px ${o.shadowColor};\n }\n`;const COLOR_SCHEMA={onColored:{primary:styled.css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-oncolor-primary'],shadowColor:o.theme.colors['bg-oncolor-primary'],...o.palette}))),secondary:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-brand-secondary-500'],shadowColor:o.theme.colors['bg-oncolor-primary'],...o.palette}))),black:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-contrast'],shadowColor:o.theme.colors['bg-oncolor-primary'],...o.palette}))),grey:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-oncolor-secondary'],shadowColor:o.theme.colors['bg-oncolor-primary'],...o.palette})))},default:{primary:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-brand-primary-500'],shadowColor:o.theme.colors['bg-onmain-primary'],...o.palette}))),secondary:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-brand-secondary-500'],shadowColor:o.theme.colors['bg-onmain-primary'],...o.palette}))),black:styled.css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-contrast'],shadowColor:o.theme.colors['bg-onmain-primary'],...o.palette}))),grey:styled.css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-divider'],shadowColor:o.theme.colors['bg-onmain-primary'],...o.palette})))}};const Root=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardIndicatorProp}).attrs((o=>({dynamicSizeDeclaration:(e,r)=>({fontSize:typeof e=='string'?e:`${e}${r}`,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({displayName:"Indicator__Root",componentId:"ui__sc-1dc67xh-1"})(["box-sizing:border-box;position:relative;isolation:isolate;cursor:default;display:inline-block;flex-shrink:0;"," "," "," "," ",""],(o=>{const e=o.onColored?COLOR_SCHEMA.onColored:COLOR_SCHEMA.default;return o.grey?e.grey:o.black?e.black:o.secondary?e.secondary:e.primary}),(o=>!o.frame&&`\n & > ${Foreground} {\n box-shadow: none;\n }\n `),(o=>o.pulse&&styled.css(["&::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;}"],pulseAnimation,typeof o.pulseIterationCount=='number'?o.pulseIterationCount:'infinite')),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin);exports.Foreground=Foreground,exports.Root=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 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","displayName","componentId","template","palette","color","backgroundColor","shadowColor","COLOR_SCHEMA","onColored","primary","css","props","theme","colors","secondary","black","grey","default","Root","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","width","square","minWidth","undefined","height","borderRadius","schema","frame","pulse","pulseIterationCount","responsiveSize"],"mappings":"
|
|
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 { responsiveMargin } from 'mixins/responsive-margin'\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 ${responsiveMargin}\n`\n"],"names":["shouldForwardIndicatorProp","createShouldForwardProp","propKey","includes","pulseAnimation","keyframes","Foreground","styled","span","withConfig","displayName","componentId","template","palette","color","backgroundColor","shadowColor","COLOR_SCHEMA","onColored","primary","css","props","theme","colors","secondary","black","grey","default","Root","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","width","square","minWidth","undefined","height","borderRadius","schema","frame","pulse","pulseIterationCount","responsiveSize","responsiveMargin"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import styled,{keyframes,css}from'styled-components';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';const shouldForwardIndicatorProp=createShouldForwardProp((o=>!['square','black','grey','onColored','pulse','pulseIterationCount','frame'].includes(o)));const pulseAnimation=keyframes(["0%{opacity:1;transform:scale(1);}75%{opacity:0;}100%{transform:scale(4);}"]);const Foreground=styled.span.withConfig({displayName:"Indicator__Foreground",componentId:"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;"]);const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n\n & > ${Foreground} {\n box-shadow: 0 0 0 1px ${o.shadowColor};\n }\n`;const COLOR_SCHEMA={onColored:{primary:css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-oncolor-primary'],shadowColor:o.theme.colors['bg-oncolor-primary'],...o.palette}))),secondary:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-brand-secondary-500'],shadowColor:o.theme.colors['bg-oncolor-primary'],...o.palette}))),black:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-contrast'],shadowColor:o.theme.colors['bg-oncolor-primary'],...o.palette}))),grey:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-oncolor-secondary'],shadowColor:o.theme.colors['bg-oncolor-primary'],...o.palette})))},default:{primary:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-brand-primary-500'],shadowColor:o.theme.colors['bg-onmain-primary'],...o.palette}))),secondary:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-brand-secondary-500'],shadowColor:o.theme.colors['bg-onmain-primary'],...o.palette}))),black:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-contrast'],shadowColor:o.theme.colors['bg-onmain-primary'],...o.palette}))),grey:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-divider'],shadowColor:o.theme.colors['bg-onmain-primary'],...o.palette})))}};const Root=styled.span.withConfig({shouldForwardProp:shouldForwardIndicatorProp}).attrs((o=>({dynamicSizeDeclaration:(r,e)=>({fontSize:typeof r=='string'?r:`${r}${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({displayName:"Indicator__Root",componentId:"ui__sc-1dc67xh-1"})(["box-sizing:border-box;position:relative;isolation:isolate;cursor:default;display:inline-block;flex-shrink:0;"," "," "," ",""],(o=>{const r=o.onColored?COLOR_SCHEMA.onColored:COLOR_SCHEMA.default;return o.grey?r.grey:o.black?r.black:o.secondary?r.secondary:r.primary}),(o=>!o.frame&&`\n & > ${Foreground} {\n box-shadow: none;\n }\n `),(o=>o.pulse&&css(["&::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;}"],pulseAnimation,typeof o.pulseIterationCount=='number'?o.pulseIterationCount:'infinite')),responsiveSize);export{Foreground,Root};
|
|
1
|
+
import styled,{keyframes,css}from'styled-components';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';const shouldForwardIndicatorProp=createShouldForwardProp((o=>!['square','black','grey','onColored','pulse','pulseIterationCount','frame'].includes(o)));const pulseAnimation=keyframes(["0%{opacity:1;transform:scale(1);}75%{opacity:0;}100%{transform:scale(4);}"]);const Foreground=styled.span.withConfig({displayName:"Indicator__Foreground",componentId:"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;"]);const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n\n & > ${Foreground} {\n box-shadow: 0 0 0 1px ${o.shadowColor};\n }\n`;const COLOR_SCHEMA={onColored:{primary:css(["",""],(o=>template({color:o.theme.colors['content-brand-primary'],backgroundColor:o.theme.colors['bg-oncolor-primary'],shadowColor:o.theme.colors['bg-oncolor-primary'],...o.palette}))),secondary:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-brand-secondary-500'],shadowColor:o.theme.colors['bg-oncolor-primary'],...o.palette}))),black:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-contrast'],shadowColor:o.theme.colors['bg-oncolor-primary'],...o.palette}))),grey:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-oncolor-secondary'],shadowColor:o.theme.colors['bg-oncolor-primary'],...o.palette})))},default:{primary:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-brand-primary-500'],shadowColor:o.theme.colors['bg-onmain-primary'],...o.palette}))),secondary:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-brand-secondary-500'],shadowColor:o.theme.colors['bg-onmain-primary'],...o.palette}))),black:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],backgroundColor:o.theme.colors['bg-onmain-contrast'],shadowColor:o.theme.colors['bg-onmain-primary'],...o.palette}))),grey:css(["",""],(o=>template({color:o.theme.colors['content-onmain-primary'],backgroundColor:o.theme.colors['bg-onmain-divider'],shadowColor:o.theme.colors['bg-onmain-primary'],...o.palette})))}};const Root=styled.span.withConfig({shouldForwardProp:shouldForwardIndicatorProp}).attrs((o=>({dynamicSizeDeclaration:(r,e)=>({fontSize:typeof r=='string'?r:`${r}${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({displayName:"Indicator__Root",componentId:"ui__sc-1dc67xh-1"})(["box-sizing:border-box;position:relative;isolation:isolate;cursor:default;display:inline-block;flex-shrink:0;"," "," "," "," ",""],(o=>{const r=o.onColored?COLOR_SCHEMA.onColored:COLOR_SCHEMA.default;return o.grey?r.grey:o.black?r.black:o.secondary?r.secondary:r.primary}),(o=>!o.frame&&`\n & > ${Foreground} {\n box-shadow: none;\n }\n `),(o=>o.pulse&&css(["&::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;}"],pulseAnimation,typeof o.pulseIterationCount=='number'?o.pulseIterationCount:'infinite')),responsiveSize,responsiveMargin);export{Foreground,Root};
|
|
2
2
|
//# sourceMappingURL=style.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","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","displayName","componentId","template","palette","color","backgroundColor","shadowColor","COLOR_SCHEMA","onColored","primary","css","props","theme","colors","secondary","black","grey","default","Root","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","width","square","minWidth","undefined","height","borderRadius","schema","frame","pulse","pulseIterationCount","responsiveSize"],"mappings":"
|
|
1
|
+
{"version":3,"file":"style.mjs","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 { responsiveMargin } from 'mixins/responsive-margin'\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 ${responsiveMargin}\n`\n"],"names":["shouldForwardIndicatorProp","createShouldForwardProp","propKey","includes","pulseAnimation","keyframes","Foreground","styled","span","withConfig","displayName","componentId","template","palette","color","backgroundColor","shadowColor","COLOR_SCHEMA","onColored","primary","css","props","theme","colors","secondary","black","grey","default","Root","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","width","square","minWidth","undefined","height","borderRadius","schema","frame","pulse","pulseIterationCount","responsiveSize","responsiveMargin"],"mappings":"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"}
|
package/components/Text/style.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var styled=require('styled-components');var tinycolor=require('../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.js');var display=require('../../mixins/display.js');var color=require('../../mixins/color.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const WEIGHT_MAP={lighter:100,normal:400,bold:600,bolder:800};const LINE_HEIGHT_MAP={l:1.5,m:1.3,s:1.15,xs:1};const shouldForwardTextProp=style.createShouldForwardProp((e=>!['appearance','fontFamily','weight','fontStyle','transform','underlineLinks','textAlign','lineHeight','content','display','chars','quoted','showZeroMinorPart','separator','
|
|
1
|
+
'use strict';var styled=require('styled-components');var tinycolor=require('../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.js');var display=require('../../mixins/display.js');var color=require('../../mixins/color.js');var responsiveSize=require('../../mixins/responsive-size.js');var responsiveMargin=require('../../mixins/responsive-margin.js');var focus=require('../../mixins/focus.js');var style=require('../../shared/utils/style.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const WEIGHT_MAP={lighter:100,normal:400,bold:600,bolder:800};const LINE_HEIGHT_MAP={l:1.5,m:1.3,s:1.15,xs:1};const shouldForwardTextProp=style.createShouldForwardProp((e=>!['appearance','fontFamily','weight','fontStyle','transform','underlineLinks','textAlign','lineHeight','content','display','chars','quoted','showZeroMinorPart','separator','whiteSpace','wordBreak'].includes(e)));const template=e=>`\n color: ${e.color};\n background-color: ${e.backgroundColor};\n &:hover {\n color: ${e.colorHover};\n }\n &:active {\n color: ${e.color};\n }\n &:disabled {\n color: ${e.colorDisabled};\n }\n`;const COLOR_SCHEMA={primary:styled.css(["",""],(e=>template({color:e.theme.colors['content-link'],colorHover:tinycolor.default(e.theme.colors['content-link']).lighten(10).toString(),colorDisabled:e.theme.colors['content-disabled'],backgroundColor:e.theme.colors.transparent,...e.palette}))),contrast:styled.css(["",""],(e=>template({color:e.theme.colors['content-oncolor-primary'],colorHover:tinycolor.default(e.theme.colors['content-oncolor-primary']).darken(10).toString(),colorDisabled:e.theme.colors['content-oncolor-disabled'],backgroundColor:e.theme.colors.transparent,...e.palette})))};const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardTextProp}).withConfig({displayName:"Text__Root",componentId:"ui__sc-s2fogy-0"})([""," "," "," "," ",""],(e=>`\n margin: 0;\n padding: 0;\n ${e.fontFamily?`font-family: ${e.fontFamily};`:''}\n ${e.transform?`text-transform: ${e.transform};`:''}\n ${e.weight?`font-weight: ${WEIGHT_MAP[e.weight]??e.weight};`:''}\n ${e.fontStyle?`font-style: ${e.fontStyle};`:''}\n ${e.textAlign?`text-align: ${e.textAlign};`:''}\n ${e.lineHeight?`line-height: ${LINE_HEIGHT_MAP[e.lineHeight]??e.lineHeight};`:''}\n ${e.whiteSpace?`white-space: ${e.whiteSpace};`:''}\n ${e.wordBreak?`word-break: ${e.wordBreak};`:''}\n a {\n text-decoration: ${e.underlineLinks?'underline':'none'};\n &:hover {\n text-decoration: none;\n }\n }\n `),responsiveSize.responsiveSize,responsiveMargin.responsiveMargin,(e=>e.display?display.display(e.display):null),(e=>color.color(e.color?e.color:e.theme.textColor)));const TextEllipsis=styled__default.default.span.withConfig({shouldForwardProp:e=>!['lines','expanded'].includes(e)}).withConfig({displayName:"Text__TextEllipsis",componentId:"ui__sc-s2fogy-1"})(["box-sizing:border-box;display:block;position:relative;",""],(e=>!e.expanded&&`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${e.lines};\n overflow: hidden;\n text-overflow: ellipsis;\n `));const LineHeight=styled__default.default.span.withConfig({displayName:"Text__LineHeight",componentId:"ui__sc-s2fogy-2"})(["box-sizing:border-box;position:absolute;visibility:hidden;"]);const ExpandButton=styled__default.default.button.withConfig({shouldForwardProp:e=>!['contrast','palette'].includes(e)}).withConfig({displayName:"Text__ExpandButton",componentId:"ui__sc-s2fogy-3"})(["box-sizing:border-box;appearance:none;padding:0;border:0;font-size:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;margin-top:0.2em;text-decoration-line:underline;text-decoration-style:dashed;text-underline-offset:0.3em;cursor:pointer;&:disabled{cursor:not-allowed;}"," ",""],(e=>e.contrast?COLOR_SCHEMA.contrast:COLOR_SCHEMA.primary),focus.focus);exports.ExpandButton=ExpandButton,exports.LineHeight=LineHeight,exports.Root=Root,exports.TextEllipsis=TextEllipsis;
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Text/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { display } from 'mixins/display'\nimport { color } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { Color, CSSColor } from 'shared/types'\nimport type { StyledTextProps, ExpandButtonPalette, StyledTextEllipsisProps, StyledExpandButtonProps } from './types'\n\nconst WEIGHT_MAP = {\n lighter: 100,\n normal: 400,\n bold: 600,\n bolder: 800,\n}\n\nconst LINE_HEIGHT_MAP = {\n l: 1.5,\n m: 1.3,\n s: 1.15,\n xs: 1,\n}\n\nconst shouldForwardTextProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'appearance',\n 'fontFamily',\n 'weight',\n 'fontStyle',\n 'transform',\n 'underlineLinks',\n 'textAlign',\n 'lineHeight',\n 'content',\n 'display',\n 'chars',\n 'quoted',\n 'showZeroMinorPart',\n 'separator',\n '
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Text/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { display } from 'mixins/display'\nimport { color } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { Color, CSSColor } from 'shared/types'\nimport type { StyledTextProps, ExpandButtonPalette, StyledTextEllipsisProps, StyledExpandButtonProps } from './types'\n\nconst WEIGHT_MAP = {\n lighter: 100,\n normal: 400,\n bold: 600,\n bolder: 800,\n}\n\nconst LINE_HEIGHT_MAP = {\n l: 1.5,\n m: 1.3,\n s: 1.15,\n xs: 1,\n}\n\nconst shouldForwardTextProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'appearance',\n 'fontFamily',\n 'weight',\n 'fontStyle',\n 'transform',\n 'underlineLinks',\n 'textAlign',\n 'lineHeight',\n 'content',\n 'display',\n 'chars',\n 'quoted',\n 'showZeroMinorPart',\n 'separator',\n 'whiteSpace',\n 'wordBreak',\n ].includes(propKey)\n)\n\nconst template = (palette: ExpandButtonPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n &:hover {\n color: ${palette.colorHover};\n }\n &:active {\n color: ${palette.color};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n primary: css<StyledExpandButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-link'],\n colorHover: tinycolor(props.theme.colors['content-link']).lighten(10).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n contrast: css<StyledExpandButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n colorHover: tinycolor(props.theme.colors['content-oncolor-primary']).darken(10).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledTextProps>({\n shouldForwardProp: shouldForwardTextProp,\n})`\n ${(props) => `\n margin: 0;\n padding: 0;\n ${props.fontFamily ? `font-family: ${props.fontFamily};` : ''}\n ${props.transform ? `text-transform: ${props.transform};` : ''}\n ${props.weight ? `font-weight: ${WEIGHT_MAP[props.weight] ?? props.weight};` : ''}\n ${props.fontStyle ? `font-style: ${props.fontStyle};` : ''}\n ${props.textAlign ? `text-align: ${props.textAlign};` : ''}\n ${props.lineHeight ? `line-height: ${LINE_HEIGHT_MAP[props.lineHeight] ?? props.lineHeight};` : ''}\n ${props.whiteSpace ? `white-space: ${props.whiteSpace};` : ''}\n ${props.wordBreak ? `word-break: ${props.wordBreak};` : ''}\n a {\n text-decoration: ${props.underlineLinks ? 'underline' : 'none'};\n &:hover {\n text-decoration: none;\n }\n }\n `}\n\n ${responsiveSize}\n ${responsiveMargin}\n\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.color ? color(props.color) : color(props.theme.textColor as Color))}\n`\n\nexport const TextEllipsis = styled.span.withConfig<StyledTextEllipsisProps>({\n shouldForwardProp: (propKey) => !['lines', 'expanded'].includes(propKey),\n})`\n box-sizing: border-box;\n display: block;\n position: relative;\n\n ${(props) =>\n !props.expanded &&\n `\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${props.lines};\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n`\n\nexport const LineHeight = styled.span`\n box-sizing: border-box;\n position: absolute;\n visibility: hidden;\n`\n\nexport const ExpandButton = styled.button.withConfig<StyledExpandButtonProps>({\n shouldForwardProp: (propKey) => !['contrast', 'palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: none;\n padding: 0;\n border: 0;\n font-size: inherit;\n font-family: inherit;\n font-weight: inherit;\n font-style: inherit;\n margin-top: 0.2em;\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 0.3em;\n cursor: pointer;\n &:disabled {\n cursor: not-allowed;\n }\n\n ${(props) => (props.contrast ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.primary)}\n\n ${focus}\n`\n"],"names":["WEIGHT_MAP","lighter","normal","bold","bolder","LINE_HEIGHT_MAP","l","m","s","xs","shouldForwardTextProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","colorHover","colorDisabled","COLOR_SCHEMA","primary","css","props","theme","colors","tinycolor","default","lighten","toString","transparent","contrast","darken","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","fontFamily","transform","weight","fontStyle","textAlign","lineHeight","whiteSpace","wordBreak","underlineLinks","responsiveSize","responsiveMargin","display","textColor","TextEllipsis","span","expanded","lines","LineHeight","ExpandButton","button","focus"],"mappings":"4jBAWA,MAAMA,WAAa,CACjBC,QAAS,IACTC,OAAQ,IACRC,KAAM,IACNC,OAAQ,KAGV,MAAMC,gBAAkB,CACtBC,EAAG,IACHC,EAAG,IACHC,EAAG,KACHC,GAAI,GAGN,MAAMC,sBAAwBC,MAAuBA,yBAClDC,IACE,CACC,aACA,aACA,SACA,YACA,YACA,iBACA,YACA,aACA,UACA,UACA,QACA,SACA,oBACA,YACA,aACA,aACAC,SAASD,KAGf,MAAME,SAAYC,GAAiC,cACxCA,EAAQC,+BACGD,EAAQE,6CAEjBF,EAAQG,8CAGRH,EAAQC,2CAGRD,EAAQI,wBAIrB,MAAMC,aAAe,CACnBC,QAASC,OAAGA,IAAA,CAAA,GAAA,KACPC,GACDT,SAAS,CACPE,MAAOO,EAAMC,MAAMC,OAAO,gBAC1BP,WAAYQ,UAASC,QAACJ,EAAMC,MAAMC,OAAO,iBAAiBG,QAAQ,IAAIC,WACtEV,cAAeI,EAAMC,MAAMC,OAAO,oBAClCR,gBAAiBM,EAAMC,MAAMC,OAAOK,eACjCP,EAAMR,YAGfgB,SAAUT,OAAGA,IAAA,CAAA,GAAA,KACRC,GACDT,SAAS,CACPE,MAAOO,EAAMC,MAAMC,OAAO,2BAC1BP,WAAYQ,UAASC,QAACJ,EAAMC,MAAMC,OAAO,4BAA4BO,OAAO,IAAIH,WAChFV,cAAeI,EAAMC,MAAMC,OAAO,4BAClCR,gBAAiBM,EAAMC,MAAMC,OAAOK,eACjCP,EAAMR,aAKV,MAAMkB,KAAOC,gBAAAA,QAAOC,IAAIC,WAA4B,CACzDC,kBAAmB3B,wBACnB0B,WAAA,CAAAE,YAAA,aAAAC,YAAA,mBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,KACGX,GAAU,0CAGTA,EAAMiB,WAAa,gBAAgBjB,EAAMiB,cAAgB,WACzDjB,EAAMkB,UAAY,mBAAmBlB,EAAMkB,aAAe,WAC1DlB,EAAMmB,OAAS,gBAAgB1C,WAAWuB,EAAMmB,SAAWnB,EAAMmB,UAAY,WAC7EnB,EAAMoB,UAAY,eAAepB,EAAMoB,aAAe,WACtDpB,EAAMqB,UAAY,eAAerB,EAAMqB,aAAe,WACtDrB,EAAMsB,WAAa,gBAAgBxC,gBAAgBkB,EAAMsB,aAAetB,EAAMsB,cAAgB,WAC9FtB,EAAMuB,WAAa,gBAAgBvB,EAAMuB,cAAgB,WACzDvB,EAAMwB,UAAY,eAAexB,EAAMwB,aAAe,uCAEnCxB,EAAMyB,eAAiB,YAAc,gFAO1DC,eAAAA,eACAC,iBAAgBA,kBAEf3B,GAAWA,EAAM4B,QAAUA,gBAAQ5B,EAAM4B,SAAW,OACpD5B,GAAyBP,MAAKA,MAAnBO,EAAMP,MAAcO,EAAMP,MAAeO,EAAMC,MAAM4B,aAG9D,MAAMC,aAAenB,gBAAAA,QAAOoB,KAAKlB,WAAoC,CAC1EC,kBAAoBzB,IAAa,CAAC,QAAS,YAAYC,SAASD,KAChEwB,WAAA,CAAAE,YAAA,qBAAAC,YAAA,mBAF0BL,CAE1B,CAAA,yDAAA,KAKGX,IACAA,EAAMgC,UACP,iGAGwBhC,EAAMiC,gFAMrBC,WAAavB,gBAAAA,QAAOoB,KAAIlB,WAAA,CAAAE,YAAA,mBAAAC,YAAA,mBAAXL,CAIzB,CAAA,+DAEM,MAAMwB,aAAexB,gBAAAA,QAAOyB,OAAOvB,WAAoC,CAC5EC,kBAAoBzB,IAAa,CAAC,WAAY,WAAWC,SAASD,KAClEwB,WAAA,CAAAE,YAAA,qBAAAC,YAAA,mBAF0BL,CAE1B,CAAA,gSAAA,IAAA,KAkBGX,GAAWA,EAAMQ,SAAWX,aAAaW,SAAWX,aAAaC,SAElEuC,MAAKA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import styled,{css}from'styled-components';import tinycolor from'../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.mjs';import{display}from'../../mixins/display.mjs';import{color}from'../../mixins/color.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';const WEIGHT_MAP={lighter:100,normal:400,bold:600,bolder:800};const LINE_HEIGHT_MAP={l:1.5,m:1.3,s:1.15,xs:1};const shouldForwardTextProp=createShouldForwardProp((o=>!['appearance','fontFamily','weight','fontStyle','transform','underlineLinks','textAlign','lineHeight','content','display','chars','quoted','showZeroMinorPart','separator','
|
|
1
|
+
import styled,{css}from'styled-components';import tinycolor from'../../external/.pnpm/tinycolor2@1.4.2/node_modules/tinycolor2/tinycolor.mjs';import{display}from'../../mixins/display.mjs';import{color}from'../../mixins/color.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';import{focus}from'../../mixins/focus.mjs';import{createShouldForwardProp}from'../../shared/utils/style.mjs';const WEIGHT_MAP={lighter:100,normal:400,bold:600,bolder:800};const LINE_HEIGHT_MAP={l:1.5,m:1.3,s:1.15,xs:1};const shouldForwardTextProp=createShouldForwardProp((o=>!['appearance','fontFamily','weight','fontStyle','transform','underlineLinks','textAlign','lineHeight','content','display','chars','quoted','showZeroMinorPart','separator','whiteSpace','wordBreak'].includes(o)));const template=o=>`\n color: ${o.color};\n background-color: ${o.backgroundColor};\n &:hover {\n color: ${o.colorHover};\n }\n &:active {\n color: ${o.color};\n }\n &:disabled {\n color: ${o.colorDisabled};\n }\n`;const COLOR_SCHEMA={primary:css(["",""],(o=>template({color:o.theme.colors['content-link'],colorHover:tinycolor(o.theme.colors['content-link']).lighten(10).toString(),colorDisabled:o.theme.colors['content-disabled'],backgroundColor:o.theme.colors.transparent,...o.palette}))),contrast:css(["",""],(o=>template({color:o.theme.colors['content-oncolor-primary'],colorHover:tinycolor(o.theme.colors['content-oncolor-primary']).darken(10).toString(),colorDisabled:o.theme.colors['content-oncolor-disabled'],backgroundColor:o.theme.colors.transparent,...o.palette})))};const Root=styled.div.withConfig({shouldForwardProp:shouldForwardTextProp}).withConfig({displayName:"Text__Root",componentId:"ui__sc-s2fogy-0"})([""," "," "," "," ",""],(o=>`\n margin: 0;\n padding: 0;\n ${o.fontFamily?`font-family: ${o.fontFamily};`:''}\n ${o.transform?`text-transform: ${o.transform};`:''}\n ${o.weight?`font-weight: ${WEIGHT_MAP[o.weight]??o.weight};`:''}\n ${o.fontStyle?`font-style: ${o.fontStyle};`:''}\n ${o.textAlign?`text-align: ${o.textAlign};`:''}\n ${o.lineHeight?`line-height: ${LINE_HEIGHT_MAP[o.lineHeight]??o.lineHeight};`:''}\n ${o.whiteSpace?`white-space: ${o.whiteSpace};`:''}\n ${o.wordBreak?`word-break: ${o.wordBreak};`:''}\n a {\n text-decoration: ${o.underlineLinks?'underline':'none'};\n &:hover {\n text-decoration: none;\n }\n }\n `),responsiveSize,responsiveMargin,(o=>o.display?display(o.display):null),(o=>color(o.color?o.color:o.theme.textColor)));const TextEllipsis=styled.span.withConfig({shouldForwardProp:o=>!['lines','expanded'].includes(o)}).withConfig({displayName:"Text__TextEllipsis",componentId:"ui__sc-s2fogy-1"})(["box-sizing:border-box;display:block;position:relative;",""],(o=>!o.expanded&&`\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${o.lines};\n overflow: hidden;\n text-overflow: ellipsis;\n `));const LineHeight=styled.span.withConfig({displayName:"Text__LineHeight",componentId:"ui__sc-s2fogy-2"})(["box-sizing:border-box;position:absolute;visibility:hidden;"]);const ExpandButton=styled.button.withConfig({shouldForwardProp:o=>!['contrast','palette'].includes(o)}).withConfig({displayName:"Text__ExpandButton",componentId:"ui__sc-s2fogy-3"})(["box-sizing:border-box;appearance:none;padding:0;border:0;font-size:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;margin-top:0.2em;text-decoration-line:underline;text-decoration-style:dashed;text-underline-offset:0.3em;cursor:pointer;&:disabled{cursor:not-allowed;}"," ",""],(o=>o.contrast?COLOR_SCHEMA.contrast:COLOR_SCHEMA.primary),focus);export{ExpandButton,LineHeight,Root,TextEllipsis};
|
|
2
2
|
//# sourceMappingURL=style.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Text/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { display } from 'mixins/display'\nimport { color } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { Color, CSSColor } from 'shared/types'\nimport type { StyledTextProps, ExpandButtonPalette, StyledTextEllipsisProps, StyledExpandButtonProps } from './types'\n\nconst WEIGHT_MAP = {\n lighter: 100,\n normal: 400,\n bold: 600,\n bolder: 800,\n}\n\nconst LINE_HEIGHT_MAP = {\n l: 1.5,\n m: 1.3,\n s: 1.15,\n xs: 1,\n}\n\nconst shouldForwardTextProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'appearance',\n 'fontFamily',\n 'weight',\n 'fontStyle',\n 'transform',\n 'underlineLinks',\n 'textAlign',\n 'lineHeight',\n 'content',\n 'display',\n 'chars',\n 'quoted',\n 'showZeroMinorPart',\n 'separator',\n '
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Text/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { display } from 'mixins/display'\nimport { color } from 'mixins/color'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { Color, CSSColor } from 'shared/types'\nimport type { StyledTextProps, ExpandButtonPalette, StyledTextEllipsisProps, StyledExpandButtonProps } from './types'\n\nconst WEIGHT_MAP = {\n lighter: 100,\n normal: 400,\n bold: 600,\n bolder: 800,\n}\n\nconst LINE_HEIGHT_MAP = {\n l: 1.5,\n m: 1.3,\n s: 1.15,\n xs: 1,\n}\n\nconst shouldForwardTextProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'appearance',\n 'fontFamily',\n 'weight',\n 'fontStyle',\n 'transform',\n 'underlineLinks',\n 'textAlign',\n 'lineHeight',\n 'content',\n 'display',\n 'chars',\n 'quoted',\n 'showZeroMinorPart',\n 'separator',\n 'whiteSpace',\n 'wordBreak',\n ].includes(propKey)\n)\n\nconst template = (palette: ExpandButtonPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n &:hover {\n color: ${palette.colorHover};\n }\n &:active {\n color: ${palette.color};\n }\n &:disabled {\n color: ${palette.colorDisabled};\n }\n`\n\nconst COLOR_SCHEMA = {\n primary: css<StyledExpandButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-link'],\n colorHover: tinycolor(props.theme.colors['content-link']).lighten(10).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n contrast: css<StyledExpandButtonProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n colorHover: tinycolor(props.theme.colors['content-oncolor-primary']).darken(10).toString() as CSSColor,\n colorDisabled: props.theme.colors['content-oncolor-disabled'],\n backgroundColor: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledTextProps>({\n shouldForwardProp: shouldForwardTextProp,\n})`\n ${(props) => `\n margin: 0;\n padding: 0;\n ${props.fontFamily ? `font-family: ${props.fontFamily};` : ''}\n ${props.transform ? `text-transform: ${props.transform};` : ''}\n ${props.weight ? `font-weight: ${WEIGHT_MAP[props.weight] ?? props.weight};` : ''}\n ${props.fontStyle ? `font-style: ${props.fontStyle};` : ''}\n ${props.textAlign ? `text-align: ${props.textAlign};` : ''}\n ${props.lineHeight ? `line-height: ${LINE_HEIGHT_MAP[props.lineHeight] ?? props.lineHeight};` : ''}\n ${props.whiteSpace ? `white-space: ${props.whiteSpace};` : ''}\n ${props.wordBreak ? `word-break: ${props.wordBreak};` : ''}\n a {\n text-decoration: ${props.underlineLinks ? 'underline' : 'none'};\n &:hover {\n text-decoration: none;\n }\n }\n `}\n\n ${responsiveSize}\n ${responsiveMargin}\n\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.color ? color(props.color) : color(props.theme.textColor as Color))}\n`\n\nexport const TextEllipsis = styled.span.withConfig<StyledTextEllipsisProps>({\n shouldForwardProp: (propKey) => !['lines', 'expanded'].includes(propKey),\n})`\n box-sizing: border-box;\n display: block;\n position: relative;\n\n ${(props) =>\n !props.expanded &&\n `\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: ${props.lines};\n overflow: hidden;\n text-overflow: ellipsis;\n `}\n`\n\nexport const LineHeight = styled.span`\n box-sizing: border-box;\n position: absolute;\n visibility: hidden;\n`\n\nexport const ExpandButton = styled.button.withConfig<StyledExpandButtonProps>({\n shouldForwardProp: (propKey) => !['contrast', 'palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: none;\n padding: 0;\n border: 0;\n font-size: inherit;\n font-family: inherit;\n font-weight: inherit;\n font-style: inherit;\n margin-top: 0.2em;\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 0.3em;\n cursor: pointer;\n &:disabled {\n cursor: not-allowed;\n }\n\n ${(props) => (props.contrast ? COLOR_SCHEMA.contrast : COLOR_SCHEMA.primary)}\n\n ${focus}\n`\n"],"names":["WEIGHT_MAP","lighter","normal","bold","bolder","LINE_HEIGHT_MAP","l","m","s","xs","shouldForwardTextProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","colorHover","colorDisabled","COLOR_SCHEMA","primary","css","props","theme","colors","tinycolor","lighten","toString","transparent","contrast","darken","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","fontFamily","transform","weight","fontStyle","textAlign","lineHeight","whiteSpace","wordBreak","underlineLinks","responsiveSize","responsiveMargin","display","textColor","TextEllipsis","span","expanded","lines","LineHeight","ExpandButton","button","focus"],"mappings":"gdAWA,MAAMA,WAAa,CACjBC,QAAS,IACTC,OAAQ,IACRC,KAAM,IACNC,OAAQ,KAGV,MAAMC,gBAAkB,CACtBC,EAAG,IACHC,EAAG,IACHC,EAAG,KACHC,GAAI,GAGN,MAAMC,sBAAwBC,yBAC3BC,IACE,CACC,aACA,aACA,SACA,YACA,YACA,iBACA,YACA,aACA,UACA,UACA,QACA,SACA,oBACA,YACA,aACA,aACAC,SAASD,KAGf,MAAME,SAAYC,GAAiC,cACxCA,EAAQC,+BACGD,EAAQE,6CAEjBF,EAAQG,8CAGRH,EAAQC,2CAGRD,EAAQI,wBAIrB,MAAMC,aAAe,CACnBC,QAASC,IAAG,CAAA,GAAA,KACPC,GACDT,SAAS,CACPE,MAAOO,EAAMC,MAAMC,OAAO,gBAC1BP,WAAYQ,UAAUH,EAAMC,MAAMC,OAAO,iBAAiBE,QAAQ,IAAIC,WACtET,cAAeI,EAAMC,MAAMC,OAAO,oBAClCR,gBAAiBM,EAAMC,MAAMC,OAAOI,eACjCN,EAAMR,YAGfe,SAAUR,IAAG,CAAA,GAAA,KACRC,GACDT,SAAS,CACPE,MAAOO,EAAMC,MAAMC,OAAO,2BAC1BP,WAAYQ,UAAUH,EAAMC,MAAMC,OAAO,4BAA4BM,OAAO,IAAIH,WAChFT,cAAeI,EAAMC,MAAMC,OAAO,4BAClCR,gBAAiBM,EAAMC,MAAMC,OAAOI,eACjCN,EAAMR,aAKV,MAAMiB,KAAOC,OAAOC,IAAIC,WAA4B,CACzDC,kBAAmB1B,wBACnByB,WAAA,CAAAE,YAAA,aAAAC,YAAA,mBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,KACGV,GAAU,0CAGTA,EAAMgB,WAAa,gBAAgBhB,EAAMgB,cAAgB,WACzDhB,EAAMiB,UAAY,mBAAmBjB,EAAMiB,aAAe,WAC1DjB,EAAMkB,OAAS,gBAAgBzC,WAAWuB,EAAMkB,SAAWlB,EAAMkB,UAAY,WAC7ElB,EAAMmB,UAAY,eAAenB,EAAMmB,aAAe,WACtDnB,EAAMoB,UAAY,eAAepB,EAAMoB,aAAe,WACtDpB,EAAMqB,WAAa,gBAAgBvC,gBAAgBkB,EAAMqB,aAAerB,EAAMqB,cAAgB,WAC9FrB,EAAMsB,WAAa,gBAAgBtB,EAAMsB,cAAgB,WACzDtB,EAAMuB,UAAY,eAAevB,EAAMuB,aAAe,uCAEnCvB,EAAMwB,eAAiB,YAAc,gFAO1DC,eACAC,kBAEC1B,GAAWA,EAAM2B,QAAUA,QAAQ3B,EAAM2B,SAAW,OACpD3B,GAAyBP,MAAdO,EAAMP,MAAcO,EAAMP,MAAeO,EAAMC,MAAM2B,aAG9D,MAAMC,aAAenB,OAAOoB,KAAKlB,WAAoC,CAC1EC,kBAAoBxB,IAAa,CAAC,QAAS,YAAYC,SAASD,KAChEuB,WAAA,CAAAE,YAAA,qBAAAC,YAAA,mBAF0BL,CAE1B,CAAA,yDAAA,KAKGV,IACAA,EAAM+B,UACP,iGAGwB/B,EAAMgC,gFAMrBC,WAAavB,OAAOoB,KAAIlB,WAAA,CAAAE,YAAA,mBAAAC,YAAA,mBAAXL,CAIzB,CAAA,+DAEM,MAAMwB,aAAexB,OAAOyB,OAAOvB,WAAoC,CAC5EC,kBAAoBxB,IAAa,CAAC,WAAY,WAAWC,SAASD,KAClEuB,WAAA,CAAAE,YAAA,qBAAAC,YAAA,mBAF0BL,CAE1B,CAAA,gSAAA,IAAA,KAkBGV,GAAWA,EAAMO,SAAWV,aAAaU,SAAWV,aAAaC,SAElEsC"}
|
package/dts/index.d.ts
CHANGED
|
@@ -908,6 +908,15 @@ declare type ResponsiveSizeInterpolationProps<S extends string, V, P extends Res
|
|
|
908
908
|
sizes: Record<KeysOfUnion<P['sizes']>, CSSProperties>;
|
|
909
909
|
dynamicSizeDeclaration?: (size: CSSGlobalValue | number, sizeUnits: CSSUnit) => CSSObject;
|
|
910
910
|
};
|
|
911
|
+
interface PlaygroundPropControl<T = Record<string, unknown>> {
|
|
912
|
+
type: 'radio' | 'checkbox';
|
|
913
|
+
label: string;
|
|
914
|
+
checked: boolean;
|
|
915
|
+
props: T;
|
|
916
|
+
}
|
|
917
|
+
interface PlaygroundToolbar<T = Record<string, unknown>> {
|
|
918
|
+
[variant: string]: PlaygroundPropControl<T>[] | PlaygroundPropControl<T>[][];
|
|
919
|
+
}
|
|
911
920
|
|
|
912
921
|
/**
|
|
913
922
|
* Converts HEX color code to RGB(A) string
|
|
@@ -1123,8 +1132,6 @@ DisplayProperty, ColorProperty, Omit<React.HTMLAttributes<HTMLElement>, 'color'>
|
|
|
1123
1132
|
wordBreak?: string;
|
|
1124
1133
|
/** @ignore */
|
|
1125
1134
|
ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
|
|
1126
|
-
/** @ignore */
|
|
1127
|
-
underline?: CSSBorderStyle | boolean;
|
|
1128
1135
|
/** @ignore @deprecated Use Anchor interface */
|
|
1129
1136
|
underlineLinks?: boolean;
|
|
1130
1137
|
/** @ignore @deprecated Use children */
|
|
@@ -4789,7 +4796,7 @@ DisplayProperty {
|
|
|
4789
4796
|
/** Props for text component */
|
|
4790
4797
|
textProps?: TextProps;
|
|
4791
4798
|
/** Underline text content */
|
|
4792
|
-
underline?:
|
|
4799
|
+
underline?: boolean | 'solid' | 'dashed';
|
|
4793
4800
|
/** Icons before and after content */
|
|
4794
4801
|
icon?: JSX.Element | IconName | [Nullable<JSX.Element | IconName>, Nullable<JSX.Element | IconName>];
|
|
4795
4802
|
/** Props for icon components */
|
|
@@ -5971,7 +5978,7 @@ declare type IndicatorPalette = {
|
|
|
5971
5978
|
backgroundColor: CSSColor;
|
|
5972
5979
|
shadowColor: CSSColor;
|
|
5973
5980
|
};
|
|
5974
|
-
interface IndicatorProps extends ResponsiveSizeProps<Size, SizeValue>, React.ComponentPropsWithRef<'span'> {
|
|
5981
|
+
interface IndicatorProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, React.ComponentPropsWithRef<'span'> {
|
|
5975
5982
|
/** Custom colors */
|
|
5976
5983
|
palette?: Partial<Record<keyof IndicatorPalette, Color>>;
|
|
5977
5984
|
/** Text content */
|
|
@@ -6101,7 +6108,7 @@ interface IconButtonProps extends ResponsiveSizeProps<IconButtonSize, IconButton
|
|
|
6101
6108
|
*/
|
|
6102
6109
|
declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps>;
|
|
6103
6110
|
|
|
6104
|
-
declare type ChipSize = 'l' | 'm' | 's' | 'xs';
|
|
6111
|
+
declare type ChipSize = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
|
|
6105
6112
|
declare type ChipPalette = {
|
|
6106
6113
|
color: CSSColor;
|
|
6107
6114
|
backgroundColor: CSSColor;
|
|
@@ -6113,58 +6120,95 @@ declare type ChipPalette = {
|
|
|
6113
6120
|
backgroundColorDisabled: CSSColor;
|
|
6114
6121
|
borderColorDisabled: CSSColor;
|
|
6115
6122
|
};
|
|
6116
|
-
interface ChipProps extends ResponsiveSizeProps<ChipSize
|
|
6117
|
-
/**
|
|
6123
|
+
interface ChipProps extends ResponsiveSizeProps<ChipSize>, ResponsiveMarginProps, React.RefAttributes<HTMLElement>, Omit<React.ButtonHTMLAttributes<HTMLElement>, 'children'> {
|
|
6124
|
+
/**
|
|
6125
|
+
* Кастомные цвета
|
|
6126
|
+
* @default undefined */
|
|
6118
6127
|
palette?: Partial<Record<keyof ChipPalette, Color>>;
|
|
6119
|
-
/**
|
|
6128
|
+
/**
|
|
6129
|
+
* Основной контент
|
|
6130
|
+
* @default undefined */
|
|
6120
6131
|
children?: React.ReactNode | ((props: {
|
|
6121
6132
|
textProps: TextProps;
|
|
6122
6133
|
captionProps: TextProps;
|
|
6123
6134
|
discardButtonProps: IconButtonProps;
|
|
6124
6135
|
}) => React.ReactNode);
|
|
6125
|
-
/**
|
|
6136
|
+
/**
|
|
6137
|
+
* Основной текстовый контент (альтернатива `children`)
|
|
6138
|
+
* @default undefined */
|
|
6126
6139
|
text?: React.ReactNode;
|
|
6127
|
-
/**
|
|
6140
|
+
/**
|
|
6141
|
+
* Пропсы типографики для основного текста
|
|
6142
|
+
* @default {} */
|
|
6128
6143
|
textProps?: TextProps;
|
|
6129
|
-
/**
|
|
6144
|
+
/**
|
|
6145
|
+
* Дополнительный текстовый контент
|
|
6146
|
+
* @default undefined */
|
|
6130
6147
|
caption?: React.ReactNode;
|
|
6131
|
-
/**
|
|
6148
|
+
/**
|
|
6149
|
+
* Пропсы типографики для дополнительного текста
|
|
6150
|
+
* @default {} */
|
|
6132
6151
|
captionProps?: TextProps;
|
|
6133
|
-
/**
|
|
6152
|
+
/**
|
|
6153
|
+
* Иконки слева и справа от контента
|
|
6154
|
+
* @default undefined */
|
|
6134
6155
|
icon?: JSX.Element | IconName | [Nullable<JSX.Element | IconName>, Nullable<JSX.Element | IconName>];
|
|
6135
|
-
/**
|
|
6156
|
+
/**
|
|
6157
|
+
* Пропсы для иконок
|
|
6158
|
+
* @default {} */
|
|
6136
6159
|
iconProps?: IconProps;
|
|
6137
|
-
/**
|
|
6160
|
+
/**
|
|
6161
|
+
* Пропсы для аватара.
|
|
6162
|
+
* Для рендера нужно передать `avatarProps.src` или `avatarProps.text`
|
|
6163
|
+
* @default {} */
|
|
6138
6164
|
avatarProps?: AvatarProps;
|
|
6139
|
-
/**
|
|
6165
|
+
/**
|
|
6166
|
+
* Пропсы для индикатора.
|
|
6167
|
+
* Для рендера нужно передать `indicatorProps.children` или `indicatorProps.text`
|
|
6168
|
+
* @default {} */
|
|
6140
6169
|
indicatorProps?: IndicatorProps;
|
|
6141
|
-
/**
|
|
6170
|
+
/**
|
|
6171
|
+
* Пропсы для контрола и иконкой `close` (иконку можно поменять).
|
|
6172
|
+
* Для рендера нужно передать `discardButtonProps.onClick`
|
|
6173
|
+
* @default {} */
|
|
6142
6174
|
discardButtonProps?: Partial<IconButtonProps>;
|
|
6143
|
-
/**
|
|
6175
|
+
/**
|
|
6176
|
+
* Вариант цветовой схемы
|
|
6177
|
+
* @default true */
|
|
6144
6178
|
primary?: boolean;
|
|
6145
|
-
/**
|
|
6179
|
+
/**
|
|
6180
|
+
* Вариант цветовой схемы
|
|
6181
|
+
* @default false */
|
|
6146
6182
|
secondary?: boolean;
|
|
6147
|
-
/**
|
|
6183
|
+
/**
|
|
6184
|
+
* Вариант цветовой схемы
|
|
6185
|
+
* @default false */
|
|
6148
6186
|
outline?: boolean;
|
|
6149
|
-
/**
|
|
6187
|
+
/**
|
|
6188
|
+
* Вариант цветовой схемы
|
|
6189
|
+
* @default false */
|
|
6150
6190
|
black?: boolean;
|
|
6151
|
-
/**
|
|
6191
|
+
/**
|
|
6192
|
+
* Адаптировать цветовую схему для контрастного фона
|
|
6193
|
+
* @default false */
|
|
6152
6194
|
contrast?: boolean;
|
|
6153
|
-
/**
|
|
6195
|
+
/**
|
|
6196
|
+
* Активное визуальное состояние
|
|
6197
|
+
* @default false */
|
|
6154
6198
|
active?: boolean;
|
|
6155
|
-
/** @ignore
|
|
6199
|
+
/** @ignore */
|
|
6156
6200
|
cursor?: string;
|
|
6157
6201
|
}
|
|
6158
6202
|
|
|
6159
6203
|
/**
|
|
6160
6204
|
*
|
|
6161
|
-
*
|
|
6205
|
+
* Компонент поддерживает все нативные атрибуты рутового элемента.
|
|
6162
6206
|
*
|
|
6163
|
-
*
|
|
6207
|
+
* Можно передать "ref", который будет ассоциирован с рутовым элементом.
|
|
6164
6208
|
*
|
|
6165
|
-
*
|
|
6209
|
+
* Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.
|
|
6166
6210
|
*
|
|
6167
|
-
*
|
|
6211
|
+
* Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Chip/types.ts).
|
|
6168
6212
|
*/
|
|
6169
6213
|
declare const Chip: React.ForwardRefExoticComponent<ChipProps>;
|
|
6170
6214
|
|
|
@@ -8667,4 +8711,4 @@ interface DropdownProps extends ResponsiveSizeProps<DropdownSize>, ResponsiveMar
|
|
|
8667
8711
|
*/
|
|
8668
8712
|
declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps>;
|
|
8669
8713
|
|
|
8670
|
-
export { Accordion, ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, type BaseProps, type Breakpoint, Button, COUNTRY_DATA, type CSSBorderStyle, type CSSColor, type CSSFontWeight, type CSSGlobalValue, type CSSUnit, type CSSVerticalAlign, CURRENCY_MAP, Checkbox, Chip, type Color, ColorNames, type ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, Dialog, Dropdown, FormLabel, type HEX, INITIAL_MASK, Icon, IconButton, Indicator, Input, type KeysOfUnion, ListItem, Menu, Modal, Notification, type Nullable, Paper, Popover, Progress, type RGB, type RGBA, Radio, type ResponsivePositionProps, type ResponsivePropKey, type ResponsiveProps, type ResponsiveSizeInterpolationProps, type ResponsiveSizeProps, withThemeScrollable as Scrollable, Section, Select, Separator, type Size, type SizeValue, Skeleton, Spacer, Spinner, Switch, Switcher, Tab, Tabs, Tag, Text$1 as Text, Textarea, type Theme, type ThemeMode, type ThemeName, type ThemePreset, ThemeProvider, Tooltip, type WithThemePreset, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, useClickOutside, useScrollMonitor, vAlign };
|
|
8714
|
+
export { Accordion, ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, type BaseProps, type Breakpoint, Button, COUNTRY_DATA, type CSSBorderStyle, type CSSColor, type CSSFontWeight, type CSSGlobalValue, type CSSUnit, type CSSVerticalAlign, CURRENCY_MAP, Checkbox, Chip, type Color, ColorNames, type ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, Dialog, Dropdown, FormLabel, type HEX, INITIAL_MASK, Icon, IconButton, Indicator, Input, type KeysOfUnion, ListItem, Menu, Modal, Notification, type Nullable, Paper, type PlaygroundPropControl, type PlaygroundToolbar, Popover, Progress, type RGB, type RGBA, Radio, type ResponsivePositionProps, type ResponsivePropKey, type ResponsiveProps, type ResponsiveSizeInterpolationProps, type ResponsiveSizeProps, withThemeScrollable as Scrollable, Section, Select, Separator, type Size, type SizeValue, Skeleton, Spacer, Spinner, Switch, Switcher, Tab, Tabs, Tag, Text$1 as Text, Textarea, type Theme, type ThemeMode, type ThemeName, type ThemePreset, ThemeProvider, Tooltip, type WithThemePreset, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, useClickOutside, useScrollMonitor, vAlign };
|
package/package.json
CHANGED