@foxford/ui 2.0.0-beta-d2ba84e-20220706 → 2.0.0-beta-38ffcd6-20220707
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/Amount/Amount.js.map +1 -1
- package/components/Anchor/Anchor.js.map +1 -1
- package/components/Anchor/style.js +1 -1
- package/components/Anchor/style.js.map +1 -1
- package/components/Button/Button.js.map +1 -1
- package/components/Button/style.js +1 -1
- package/components/Button/style.js.map +1 -1
- package/components/Icon/Icon.js.map +1 -1
- package/components/Icon/style.js +1 -1
- package/components/Icon/style.js.map +1 -1
- package/components/Input/style.js +1 -1
- package/components/Input/style.js.map +1 -1
- package/components/Modal/Modal.js.map +1 -1
- package/components/Paper/Paper.js.map +1 -1
- package/components/Section/Section.js.map +1 -1
- package/components/Separator/Separator.js.map +1 -1
- package/components/Separator/style.js +1 -1
- package/components/Separator/style.js.map +1 -1
- package/components/Spacer/Spacer.js.map +1 -1
- package/components/Spacer/style.js +1 -1
- package/components/Spacer/style.js.map +1 -1
- package/components/Spinner/Spinner.js.map +1 -1
- package/components/Spinner/style.js +1 -1
- package/components/Spinner/style.js.map +1 -1
- package/components/Tabs/Tabs.js +1 -1
- package/components/Tabs/Tabs.js.map +1 -1
- package/components/Tabs/{Tab.js → TabsTab.js} +2 -2
- package/components/Tabs/TabsTab.js.map +1 -0
- package/components/Tabs/style.js +1 -1
- package/components/Tabs/style.js.map +1 -1
- package/components/Tag/Tag.js.map +1 -1
- package/components/Tag/style.js +1 -1
- package/components/Tag/style.js.map +1 -1
- package/components/Text/Text.js.map +1 -1
- package/components/Text/style.js +1 -1
- package/components/Text/style.js.map +1 -1
- package/components/Text.Ellipse/Text.Ellipse.js.map +1 -1
- package/dts/index.d.ts +205 -180
- package/hooks/useClassname.js +2 -0
- package/hooks/useClassname.js.map +1 -0
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/index.js +1 -1
- package/mixins/responsive-property.js +1 -1
- package/mixins/responsive-property.js.map +1 -1
- package/mixins/screen.js +1 -1
- package/mixins/screen.js.map +1 -1
- package/package.json +7 -4
- package/theme/breakpoints.js +1 -1
- package/theme/breakpoints.js.map +1 -1
- package/theme/index.js.map +1 -1
- package/components/Tabs/Tab.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t from'styled-components';import{display as i}from'../../mixins/display.js';import{property as g,
|
|
1
|
+
import t from'styled-components';import{display as i}from'../../mixins/display.js';import{property as g,responsiveNamedProperty as n}from'../../mixins/responsive-property.js';var r=t.div.withConfig({shouldForwardProp:t=>['children','className','style'].includes(t)}).withConfig({componentId:"fox-ui__sc-1r4rhyb-0"})([""," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ",""],(t=>t.display?i(t.display):null),(t=>t.padding?g(t.padding,'padding'):null),(t=>t.paddingTop?g(t.paddingTop,'padding-top'):null),(t=>t.paddingRight?g(t.paddingRight,'padding-right'):null),(t=>t.paddingBottom?g(t.paddingBottom,'padding-bottom'):null),(t=>t.paddingLeft?g(t.paddingLeft,'padding-left'):null),(t=>t.margin?g(t.margin,'margin'):null),(t=>t.marginTop?g(t.marginTop,'margin-top'):null),(t=>t.marginRight?g(t.marginRight,'margin-right'):null),(t=>t.marginBottom?g(t.marginBottom,'margin-bottom'):null),(t=>t.marginLeft?g(t.marginLeft,'margin-left'):null),(t=>{var{paddingXS:i,paddingS:g,paddingM:r,paddingL:a,paddingXL:d}=t;return n({sizes:{paddingXS:i,paddingS:g,paddingM:r,paddingL:a,paddingXL:d},cssProperty:'padding'})}),(t=>{var{paddingTopXS:i,paddingTopS:g,paddingTopM:r,paddingTopL:a,paddingTopXL:d}=t;return n({sizes:{paddingTopXS:i,paddingTopS:g,paddingTopM:r,paddingTopL:a,paddingTopXL:d},cssProperty:'padding-top'})}),(t=>{var{paddingRightXS:i,paddingRightS:g,paddingRightM:r,paddingRightL:a,paddingRightXL:d}=t;return n({sizes:{paddingRightXS:i,paddingRightS:g,paddingRightM:r,paddingRightL:a,paddingRightXL:d},cssProperty:'padding-right'})}),(t=>{var{paddingBottomXS:i,paddingBottomS:g,paddingBottomM:r,paddingBottomL:a,paddingBottomXL:d}=t;return n({sizes:{paddingBottomXS:i,paddingBottomS:g,paddingBottomM:r,paddingBottomL:a,paddingBottomXL:d},cssProperty:'padding-bottom'})}),(t=>{var{paddingLeftXS:i,paddingLeftS:g,paddingLeftM:r,paddingLeftL:a,paddingLeftXL:d}=t;return n({sizes:{paddingLeftXS:i,paddingLeftS:g,paddingLeftM:r,paddingLeftL:a,paddingLeftXL:d},cssProperty:'padding-left'})}),(t=>{var{marginXS:i,marginS:g,marginM:r,marginL:a,marginXL:d}=t;return n({sizes:{marginXS:i,marginS:g,marginM:r,marginL:a,marginXL:d},cssProperty:'margin'})}),(t=>{var{marginTopXS:i,marginTopS:g,marginTopM:r,marginTopL:a,marginTopXL:d}=t;return n({sizes:{marginTopXS:i,marginTopS:g,marginTopM:r,marginTopL:a,marginTopXL:d},cssProperty:'margin-top'})}),(t=>{var{marginRightXS:i,marginRightS:g,marginRightM:r,marginRightL:a,marginRightXL:d}=t;return n({sizes:{marginRightXS:i,marginRightS:g,marginRightM:r,marginRightL:a,marginRightXL:d},cssProperty:'margin-right'})}),(t=>{var{marginBottomXS:i,marginBottomS:g,marginBottomM:r,marginBottomL:a,marginBottomXL:d}=t;return n({sizes:{marginBottomXS:i,marginBottomS:g,marginBottomM:r,marginBottomL:a,marginBottomXL:d},cssProperty:'margin-bottom'})}),(t=>{var{marginLeftXS:i,marginLeftS:g,marginLeftM:r,marginLeftL:a,marginLeftXL:d}=t;return n({sizes:{marginLeftXS:i,marginLeftS:g,marginLeftM:r,marginLeftL:a,marginLeftXL:d},cssProperty:'margin-left'})}),(t=>t.top?g(t.top,'padding-top'):null),(t=>t.right?g(t.right,'padding-right'):null),(t=>t.bottom?g(t.bottom,'padding-bottom'):null),(t=>t.left?g(t.left,'padding-left'):null),(t=>{var{topXS:i,topS:g,topM:r,topL:a,topXL:d}=t;return n({sizes:{topXS:i,topS:g,topM:r,topL:a,topXL:d},cssProperty:'padding-top'})}),(t=>{var{rightXS:i,rightS:g,rightM:r,rightL:a,rightXL:d}=t;return n({sizes:{rightXS:i,rightS:g,rightM:r,rightL:a,rightXL:d},cssProperty:'padding-right'})}),(t=>{var{bottomXS:i,bottomS:g,bottomM:r,bottomL:a,bottomXL:d}=t;return n({sizes:{bottomXS:i,bottomS:g,bottomM:r,bottomL:a,bottomXL:d},cssProperty:'padding-bottom'})}),(t=>{var{leftXS:i,leftS:g,leftM:r,leftL:a,leftXL:d}=t;return n({sizes:{leftXS:i,leftS:g,leftM:r,leftL:a,leftXL:d},cssProperty:'padding-left'})}));export{r as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Spacer/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { display } from '../../mixins/display'\nimport { property, responsiveProperty } from '../../mixins/responsive-property'\nimport { SpacerProps } from './Spacer'\n\nexport const Root = styled.div.withConfig<SpacerProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'style'].includes(prop),\n})`\n ${(props) => (props.display ? display(props.display) : null)}\n\n /** BEGIN paddings */\n ${(props) => (props.padding ? property(props.padding, 'padding') : null)}\n ${(props) => (props.paddingTop ? property(props.paddingTop, 'padding-top') : null)}\n ${(props) => (props.paddingRight ? property(props.paddingRight, 'padding-right') : null)}\n ${(props) => (props.paddingBottom ? property(props.paddingBottom, 'padding-bottom') : null)}\n ${(props) => (props.paddingLeft ? property(props.paddingLeft, 'padding-left') : null)}\n /** END paddings */ \n\n /** BEGIN margins */\n ${(props) => (props.margin ? property(props.margin, 'margin') : null)}\n ${(props) => (props.marginTop ? property(props.marginTop, 'margin-top') : null)}\n ${(props) => (props.marginRight ? property(props.marginRight, 'margin-right') : null)}\n ${(props) => (props.marginBottom ? property(props.marginBottom, 'margin-bottom') : null)}\n ${(props) => (props.marginLeft ? property(props.marginLeft, 'margin-left') : null)}\n /** END margins */ \n\n /** BEGIN Responsive paddings */\n ${({ paddingXS, paddingS, paddingM, paddingL, paddingXL }) =>\n responsiveProperty({ sizes: { paddingXS, paddingS, paddingM, paddingL, paddingXL }, cssProperty: 'padding' })}\n ${({ paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL }) =>\n responsiveProperty({\n sizes: { paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL },\n cssProperty: 'padding-top',\n })}\n ${({ paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL }) =>\n responsiveProperty({\n sizes: { paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL },\n cssProperty: 'padding-right',\n })}\n ${({ paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL }) =>\n responsiveProperty({\n sizes: { paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL },\n cssProperty: 'padding-bottom',\n })}\n ${({ paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL }) =>\n responsiveProperty({\n sizes: { paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL },\n cssProperty: 'padding-left',\n })}\n /** END Responsive paddings */ \n\n /** BEGIN Responsive margins */\n ${({ marginXS, marginS, marginM, marginL, marginXL }) =>\n responsiveProperty({ sizes: { marginXS, marginS, marginM, marginL, marginXL }, cssProperty: 'margin' })}\n ${({ marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL }) =>\n responsiveProperty({\n sizes: { marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL },\n cssProperty: 'margin-top',\n })}\n ${({ marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL }) =>\n responsiveProperty({\n sizes: { marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL },\n cssProperty: 'margin-right',\n })}\n ${({ marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL }) =>\n responsiveProperty({\n sizes: { marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL },\n cssProperty: 'margin-bottom',\n })}\n ${({ marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL }) =>\n responsiveProperty({\n sizes: { marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL },\n cssProperty: 'margin-left',\n })}\n /** END Responsive margins */\n\n ${(props) => (props.top ? property(props.top, 'padding-top') : null)}\n ${(props) => (props.right ? property(props.right, 'padding-right') : null)}\n ${(props) => (props.bottom ? property(props.bottom, 'padding-bottom') : null)}\n ${(props) => (props.left ? property(props.left, 'padding-left') : null)}\n\n ${({ topXS, topS, topM, topL, topXL }) =>\n responsiveProperty({ sizes: { topXS, topS, topM, topL, topXL }, cssProperty: 'padding-top' })}\n ${({ rightXS, rightS, rightM, rightL, rightXL }) =>\n responsiveProperty({ sizes: { rightXS, rightS, rightM, rightL, rightXL }, cssProperty: 'padding-right' })}\n ${({ bottomXS, bottomS, bottomM, bottomL, bottomXL }) =>\n responsiveProperty({ sizes: { bottomXS, bottomS, bottomM, bottomL, bottomXL }, cssProperty: 'padding-bottom' })}\n ${({ leftXS, leftS, leftM, leftL, leftXL }) =>\n responsiveProperty({ sizes: { leftXS, leftS, leftM, leftL, leftXL }, cssProperty: 'padding-left' })}\n`\n"],"names":["Root","styled","div","withConfig","shouldForwardProp","prop","includes","componentId","props","display","padding","property","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginTop","marginRight","marginBottom","marginLeft","_ref","paddingXS","paddingS","paddingM","paddingL","paddingXL","responsiveProperty","sizes","cssProperty","_ref2","paddingTopXS","paddingTopS","paddingTopM","paddingTopL","paddingTopXL","_ref3","paddingRightXS","paddingRightS","paddingRightM","paddingRightL","paddingRightXL","_ref4","paddingBottomXS","paddingBottomS","paddingBottomM","paddingBottomL","paddingBottomXL","_ref5","paddingLeftXS","paddingLeftS","paddingLeftM","paddingLeftL","paddingLeftXL","_ref6","marginXS","marginS","marginM","marginL","marginXL","_ref7","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","_ref8","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","_ref9","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","_ref10","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","top","right","bottom","left","_ref11","topXS","topS","topM","topL","topXL","_ref12","rightXS","rightS","rightM","rightL","rightXL","_ref13","bottomXS","bottomS","bottomM","bottomL","bottomXL","_ref14","leftXS","leftS","leftM","leftL","leftXL"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Spacer/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { display } from '../../mixins/display'\nimport { property, responsiveNamedProperty } from '../../mixins/responsive-property'\nimport { SpacerProps } from './Spacer'\n\nexport const Root = styled.div.withConfig<SpacerProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'style'].includes(prop),\n})`\n ${(props) => (props.display ? display(props.display) : null)}\n\n /** BEGIN paddings */\n ${(props) => (props.padding ? property(props.padding, 'padding') : null)}\n ${(props) => (props.paddingTop ? property(props.paddingTop, 'padding-top') : null)}\n ${(props) => (props.paddingRight ? property(props.paddingRight, 'padding-right') : null)}\n ${(props) => (props.paddingBottom ? property(props.paddingBottom, 'padding-bottom') : null)}\n ${(props) => (props.paddingLeft ? property(props.paddingLeft, 'padding-left') : null)}\n /** END paddings */ \n\n /** BEGIN margins */\n ${(props) => (props.margin ? property(props.margin, 'margin') : null)}\n ${(props) => (props.marginTop ? property(props.marginTop, 'margin-top') : null)}\n ${(props) => (props.marginRight ? property(props.marginRight, 'margin-right') : null)}\n ${(props) => (props.marginBottom ? property(props.marginBottom, 'margin-bottom') : null)}\n ${(props) => (props.marginLeft ? property(props.marginLeft, 'margin-left') : null)}\n /** END margins */ \n\n /** BEGIN Responsive paddings */\n ${({ paddingXS, paddingS, paddingM, paddingL, paddingXL }) =>\n responsiveNamedProperty({ sizes: { paddingXS, paddingS, paddingM, paddingL, paddingXL }, cssProperty: 'padding' })}\n ${({ paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL }) =>\n responsiveNamedProperty({\n sizes: { paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL },\n cssProperty: 'padding-top',\n })}\n ${({ paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL }) =>\n responsiveNamedProperty({\n sizes: { paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL },\n cssProperty: 'padding-right',\n })}\n ${({ paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL }) =>\n responsiveNamedProperty({\n sizes: { paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL },\n cssProperty: 'padding-bottom',\n })}\n ${({ paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL }) =>\n responsiveNamedProperty({\n sizes: { paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL },\n cssProperty: 'padding-left',\n })}\n /** END Responsive paddings */ \n\n /** BEGIN Responsive margins */\n ${({ marginXS, marginS, marginM, marginL, marginXL }) =>\n responsiveNamedProperty({ sizes: { marginXS, marginS, marginM, marginL, marginXL }, cssProperty: 'margin' })}\n ${({ marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL }) =>\n responsiveNamedProperty({\n sizes: { marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL },\n cssProperty: 'margin-top',\n })}\n ${({ marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL }) =>\n responsiveNamedProperty({\n sizes: { marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL },\n cssProperty: 'margin-right',\n })}\n ${({ marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL }) =>\n responsiveNamedProperty({\n sizes: { marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL },\n cssProperty: 'margin-bottom',\n })}\n ${({ marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL }) =>\n responsiveNamedProperty({\n sizes: { marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL },\n cssProperty: 'margin-left',\n })}\n /** END Responsive margins */\n\n ${(props) => (props.top ? property(props.top, 'padding-top') : null)}\n ${(props) => (props.right ? property(props.right, 'padding-right') : null)}\n ${(props) => (props.bottom ? property(props.bottom, 'padding-bottom') : null)}\n ${(props) => (props.left ? property(props.left, 'padding-left') : null)}\n\n ${({ topXS, topS, topM, topL, topXL }) =>\n responsiveNamedProperty({ sizes: { topXS, topS, topM, topL, topXL }, cssProperty: 'padding-top' })}\n ${({ rightXS, rightS, rightM, rightL, rightXL }) =>\n responsiveNamedProperty({ sizes: { rightXS, rightS, rightM, rightL, rightXL }, cssProperty: 'padding-right' })}\n ${({ bottomXS, bottomS, bottomM, bottomL, bottomXL }) =>\n responsiveNamedProperty({\n sizes: { bottomXS, bottomS, bottomM, bottomL, bottomXL },\n cssProperty: 'padding-bottom',\n })}\n ${({ leftXS, leftS, leftM, leftL, leftXL }) =>\n responsiveNamedProperty({ sizes: { leftXS, leftS, leftM, leftL, leftXL }, cssProperty: 'padding-left' })}\n`\n"],"names":["Root","styled","div","withConfig","shouldForwardProp","prop","includes","componentId","props","display","padding","property","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginTop","marginRight","marginBottom","marginLeft","_ref","paddingXS","paddingS","paddingM","paddingL","paddingXL","responsiveNamedProperty","sizes","cssProperty","_ref2","paddingTopXS","paddingTopS","paddingTopM","paddingTopL","paddingTopXL","_ref3","paddingRightXS","paddingRightS","paddingRightM","paddingRightL","paddingRightXL","_ref4","paddingBottomXS","paddingBottomS","paddingBottomM","paddingBottomL","paddingBottomXL","_ref5","paddingLeftXS","paddingLeftS","paddingLeftM","paddingLeftL","paddingLeftXL","_ref6","marginXS","marginS","marginM","marginL","marginXL","_ref7","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","_ref8","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","_ref9","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","_ref10","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","top","right","bottom","left","_ref11","topXS","topS","topM","topL","topXL","_ref12","rightXS","rightS","rightM","rightL","rightXL","_ref13","bottomXS","bottomS","bottomM","bottomL","bottomXL","_ref14","leftXS","leftS","leftM","leftL","leftXL"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.js","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport {
|
|
1
|
+
{"version":3,"file":"Spinner.js","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { BaseProps } from '../../shared/interfaces'\nimport * as Styled from './style'\n\nexport interface SpinnerProps extends BaseProps, ResponsiveNamedProperty<'size'> {\n /**\n * Size of spinner\n */\n size?: 'l' | 's' | 'm' | number\n /**\n * Vertically center the spinner inside 100vh container\n */\n fullscreen?: boolean\n /**\n * Inline. Has no top/bottom margins\n */\n inline?: boolean\n}\n\nSpinner.defaultProps = {\n size: 'm',\n}\n\nSpinner.displayName = 'Spinner'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)\n */\nexport function Spinner({ className, ...props }: typeof Spinner.defaultProps & SpinnerProps) {\n const _className = useClassname(Spinner.displayName, className)\n\n return <Styled.Root className={_className} {...props} />\n}\n"],"names":["Spinner","_ref","className","props","_objectWithoutProperties","_excluded","_className","useClassname","displayName","_jsx","Styled.Root","_objectSpread","defaultProps","size"],"mappings":"2QA+BO,SAASA,EAA6EC,GAAA,IAArEC,UAAEA,GAAmED,EAArDE,EAAqDC,EAAAH,EAAAI,GAC3F,IAAMC,EAAaC,EAAaP,EAAQQ,YAAaN,GAErD,OAAOO,EAACC,EAADC,EAAA,CAAaT,UAAWI,GAAgBH,IAdjDH,EAAQY,aAAe,CACrBC,KAAM,KAGRb,EAAQQ,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e,{keyframes as i,css as o}from'styled-components';import{property as r,
|
|
1
|
+
import e,{keyframes as i,css as o}from'styled-components';import{property as r,responsiveNamedProperty as s}from'../../mixins/responsive-property.js';var t={l:60,m:40,s:20};var n=i(["to{transform:rotate(360deg);}"]);var a=o(["height:100vh;margin:0 auto;display:flex;align-items:center;justify-content:center;"]);var l=o(["display:inline-block;vertical-align:middle;margin:0;"]);var p=function(e,i){var r=arguments.length>1&&void 0!==i?i:'px';return o(["width:","",";height:","",";&:before{width:","",";height:","",";margin-top:-","",";margin-left:-","",";}"],e,r,e,r,e,r,e,r,e/2,r,e/2,r)};var d=e=>e&&'boolean'!=typeof e?'number'==typeof e?e:t[e]?t[e]:0:0;var m=e.div.withConfig({shouldForwardProp:e=>['className','style'].includes(e)}).withConfig({componentId:"fox-ui__sc-1ejsorp-0"})(["display:block;position:relative;display:block;margin:30px auto;&:before{content:'';box-sizing:border-box;position:absolute;top:50%;left:50%;border-radius:50%;border:2px solid #eee;border-top-color:#459ff3;animation:"," 0.6s linear infinite;}"," "," "," ",""],n,(e=>e.inline?l:null),(e=>e.size?r(t[e.size]||e.size,p):null),(e=>{var{sizeXS:i,sizeS:o,sizeM:r,sizeL:t,sizeXL:n}=e;return s({sizes:{sizeXS:d(i),sizeS:d(o),sizeM:d(r),sizeL:d(t),sizeXL:d(n)},cssProperty:p})}),(e=>e.fullscreen?a:null));export{m as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Spinner/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport {
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Spinner/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport {\n responsiveNamedProperty,\n property,\n ResponsiveNamedProperty,\n CalcProperty,\n} from '../../mixins/responsive-property'\nimport { SpinnerProps } from './Spinner'\n\nconst SIZES = {\n l: 60,\n m: 40,\n s: 20,\n}\n\nconst spinner = keyframes`\n to {\n transform: rotate(360deg);\n }\n`\n\nconst fullscreen = css`\n height: 100vh;\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n`\n\nconst inline = css`\n display: inline-block;\n vertical-align: middle;\n margin: 0;\n`\n\nconst sizeBuilder: CalcProperty = (size: number, sizing = 'px') => css`\n width: ${size}${sizing};\n height: ${size}${sizing};\n &:before {\n width: ${size}${sizing};\n height: ${size}${sizing};\n margin-top: -${size / 2}${sizing};\n margin-left: -${size / 2}${sizing};\n }\n`\n\nconst getSize = (size: ResponsiveNamedProperty<'size'>['size']): number => {\n if (!size || typeof size === 'boolean') return 0\n if (typeof size === 'number') return size\n if (SIZES[size]) return SIZES[size]\n return 0\n}\n\nexport const Root = styled.div.withConfig<SpinnerProps>({\n shouldForwardProp: (prop) => ['className', 'style'].includes(prop),\n})`\n display: block;\n position: relative;\n display: block;\n margin: 30px auto;\n &:before {\n content: '';\n box-sizing: border-box;\n position: absolute;\n top: 50%;\n left: 50%;\n border-radius: 50%;\n border: 2px solid #eee;\n border-top-color: #459ff3;\n animation: ${spinner} 0.6s linear infinite;\n }\n ${(props) => (props.inline ? inline : null)}\n\n ${(props) => (props.size ? property(SIZES[props.size] || props.size, sizeBuilder) : null)}\n ${({ sizeXS, sizeS, sizeM, sizeL, sizeXL }) => {\n return responsiveNamedProperty({\n sizes: {\n sizeXS: getSize(sizeXS),\n sizeS: getSize(sizeS),\n sizeM: getSize(sizeM),\n sizeL: getSize(sizeL),\n sizeXL: getSize(sizeXL),\n },\n cssProperty: sizeBuilder,\n })\n }}\n\n ${(props) => (props.fullscreen ? fullscreen : null)}\n`\n"],"names":["SIZES","l","m","s","spinner","keyframes","fullscreen","css","inline","sizeBuilder","size","i","sizing","getSize","Root","styled","div","withConfig","shouldForwardProp","prop","includes","componentId","props","property","_ref","sizeXS","sizeS","sizeM","sizeL","sizeXL","responsiveNamedProperty","sizes","cssProperty"],"mappings":"sJASA,IAAMA,EAAQ,CACZC,EAAG,GACHC,EAAG,GACHC,EAAG,IAGL,IAAMC,EAAUC,EAAhB,CAAA,kCAMA,IAAMC,EAAaC,EAAnB,CAAA,uFAQA,IAAMC,EAASD,EAAf,CAAA,yDAMA,IAAME,EAA4B,SAACC,EAADC,GAAA,IAAeC,+BAAfD,EAAAA,EAAwB,KAAxB,OAAiCJ,EAAjC,CAAA,SAAA,GAAA,WAAA,GAAA,mBAAA,GAAA,WAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,MACvBG,EAAOE,EACNF,EAAOE,EAENF,EAAOE,EACNF,EAAOE,EACFF,EAAO,EAAIE,EACVF,EAAO,EAAIE,IAI/B,IAAMC,EAAWH,GACVA,GAAwB,kBAATA,EACA,iBAATA,EAA0BA,EACjCV,EAAMU,GAAcV,EAAMU,GACvB,EAHwC,EAM1C,IAAMI,EAAOC,EAAOC,IAAIC,WAAyB,CACtDC,kBAAoBC,GAAS,CAAC,YAAa,SAASC,SAASD,KAD9CF,WAAA,CAAAI,YAAA,wBAAGN,CAAH,CAAA,0NAAA,0BAAA,IAAA,IAAA,IAAA,IAgBAX,GAEZkB,GAAWA,EAAMd,OAASA,EAAS,OAEnCc,GAAWA,EAAMZ,KAAOa,EAASvB,EAAMsB,EAAMZ,OAASY,EAAMZ,KAAMD,GAAe,OAClFe,IAA6C,IAA5CC,OAAEA,EAAFC,MAAUA,EAAVC,MAAiBA,EAAjBC,MAAwBA,EAAxBC,OAA+BA,GAAaL,EAC7C,OAAOM,EAAwB,CAC7BC,MAAO,CACLN,OAAQZ,EAAQY,GAChBC,MAAOb,EAAQa,GACfC,MAAOd,EAAQc,GACfC,MAAOf,EAAQe,GACfC,OAAQhB,EAAQgB,IAElBG,YAAavB,OAIda,GAAWA,EAAMhB,WAAaA,EAAa"}
|
package/components/Tabs/Tabs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{TabsTab as r}from'./TabsTab.js';import{Root as o,Inner as a,Content as s}from'./style.js';import{jsx as e}from'react/jsx-runtime';function l(r){var{children:l,className:t,classNameInner:n,classNameContent:c,borderColor:d,color:m,noBorder:i,style:b,width:h}=r;return e(o,{className:t,style:b,width:h,borderColor:d,color:m,noBorder:i,children:e(a,{className:n,children:e(s,{noBorder:i,className:c,children:l})})})}l.defaultProps={borderColor:'alto',color:'rgba(247, 247, 247, 1)'},l.Tab=r;export{l as Tabs};
|
|
2
2
|
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { Color } from '../../mixins/color'\nimport { BaseProps } from '../../shared/interfaces'\nimport {
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { ResponsiveProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport { BaseProps } from '../../shared/interfaces'\nimport { TabsTab } from './TabsTab'\nimport * as Styled from './style'\n\nexport interface TabsProps extends BaseProps, Color, Color<'borderColor'> {\n /**\n * Primary content.\n */\n /**\n * Children react node\n */\n children?: React.ReactNode\n className?: string\n classNameInner?: string\n classNameContent?: string\n noBorder?: boolean\n width?: ResponsiveProperty<number>\n}\n\nTabs.defaultProps = {\n borderColor: 'alto',\n color: 'rgba(247, 247, 247, 1)',\n}\n\nTabs.Tab = TabsTab\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'borderColor'>`](#/Миксины)\n */\nexport function Tabs(props: TabsProps) {\n const { children, className, classNameInner, classNameContent, borderColor, color, noBorder, style, width } = props\n\n return (\n <Styled.Root\n className={className}\n style={style}\n width={width}\n borderColor={borderColor}\n color={color}\n noBorder={noBorder}\n >\n <Styled.Inner className={classNameInner}>\n <Styled.Content noBorder={noBorder} className={classNameContent}>\n {children}\n </Styled.Content>\n </Styled.Inner>\n </Styled.Root>\n )\n}\n"],"names":["Tabs","props","children","className","classNameInner","classNameContent","borderColor","color","noBorder","style","width","_jsx","Styled.Root","Styled.Inner","Styled.Content","defaultProps","Tab","TabsTab"],"mappings":"yIAkCO,SAASA,EAAKC,GACnB,IAAMC,SAAEA,EAAFC,UAAYA,EAAZC,eAAuBA,EAAvBC,iBAAuCA,EAAvCC,YAAyDA,EAAzDC,MAAsEA,EAAtEC,SAA6EA,EAA7EC,MAAuFA,EAAvFC,MAA8FA,GAAUT,EAE9G,OACEU,EAACC,EAAD,CACET,UAAWA,EACXM,MAAOA,EACPC,MAAOA,EACPJ,YAAaA,EACbC,MAAOA,EACPC,SAAUA,EANZN,SAQES,EAACE,EAAD,CAAcV,UAAWC,EAAzBF,SACES,EAACG,EAAD,CAAgBN,SAAUA,EAAUL,UAAWE,EAA/CH,SACGA,QA3BXF,EAAKe,aAAe,CAClBT,YAAa,OACbC,MAAO,0BAGTP,EAAKgB,IAAMC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import a from'@babel/runtime/helpers/objectWithoutProperties';import{Tab as r}from'./style.js';import{jsx as t}from'react/jsx-runtime';var s=["as","className","children","theme"];function o(o){var{as:i,className:m,children:l,theme:c}=o,n=a(o,s);return t(r,e(e(e({as:i,className:m,themeKey:c},'string'!=typeof i?{activeClassName:'active'}:{}),n),{},{children:l}))}o.defaultProps={as:'div',activeClassName:'active',borderColor:'alto',color:'mineShaft'};export{o as
|
|
2
|
-
//# sourceMappingURL=
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import a from'@babel/runtime/helpers/objectWithoutProperties';import{Tab as r}from'./style.js';import{jsx as t}from'react/jsx-runtime';var s=["as","className","children","theme"];function o(o){var{as:i,className:m,children:l,theme:c}=o,n=a(o,s);return t(r,e(e(e({as:i,className:m,themeKey:c},'string'!=typeof i?{activeClassName:'active'}:{}),n),{},{children:l}))}o.defaultProps={as:'div',activeClassName:'active',borderColor:'alto',color:'mineShaft'};export{o as TabsTab};
|
|
2
|
+
//# sourceMappingURL=TabsTab.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TabsTab.js","sources":["../../../../src/components/Tabs/TabsTab.tsx"],"sourcesContent":["import { NavLink } from 'react-router-dom'\nimport { Color } from '../../mixins/color'\nimport * as Styled from './style'\n\nexport interface TabProps extends Color, Color<'borderColor'> {\n /**\n * An element type to render as (string or function).\n */\n as?: 'div' | 'a' | 'button' | 'span' | typeof NavLink\n /**\n * Primary content.\n */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Active tab.\n */\n active?: boolean\n /**\n * Active tab.\n */\n activeClassName?: string\n /**\n * Active tab.\n */\n theme?: 'compact' | 'crispy' | 'crispyCompact'\n className?: string\n}\n\nTabsTab.defaultProps = {\n as: 'div',\n activeClassName: 'active',\n borderColor: 'alto',\n color: 'mineShaft',\n}\n\nexport function TabsTab(props: TabProps) {\n const { as, className, children, theme, ...rest } = props\n\n const linkProps = typeof as !== 'string' ? { activeClassName: 'active' } : {}\n\n return (\n <Styled.Tab as={as} className={className} themeKey={theme} {...linkProps} {...rest}>\n {children}\n </Styled.Tab>\n )\n}\n"],"names":["TabsTab","props","as","className","children","theme","rest","_excluded","_jsx","Styled.Tab","_objectSpread","themeKey","activeClassName","defaultProps","borderColor","color"],"mappings":"uOAsCO,SAASA,EAAQC,GACtB,IAAMC,GAAEA,EAAFC,UAAMA,EAANC,SAAiBA,EAAjBC,MAA2BA,GAAmBJ,EAATK,IAASL,EAApDM,GAIA,OACEC,EAACC,EAADC,EAAAA,EAAAA,EAAA,CAAYR,GAAIA,EAAIC,UAAWA,EAAWQ,SAAUN,GAHtB,iBAAPH,EAAkB,CAAEU,gBAAiB,UAAa,IAGKN,GAA9E,GAAA,CAAAF,SACGA,KAdPJ,EAAQa,aAAe,CACrBX,GAAI,MACJU,gBAAiB,SACjBE,YAAa,OACbC,MAAO"}
|
package/components/Tabs/style.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o,{css as
|
|
1
|
+
import o,{css as r}from'styled-components';import{color as t}from'../../mixins/color.js';import{responsiveProperty as e}from'../../mixins/responsive-property.js';var i=o=>r(["border-bottom:1px solid ",";"],o);var n=r(["color:",";position:relative;&:after{width:initial;opacity:1;}"],(o=>o.theme.colors.primary));var l=o.div.withConfig({shouldForwardProp:o=>'children'===o}).withConfig({componentId:"fox-ui__sc-ggtlgu-0"})(["color:rgba(247,247,247,1);display:flex;align-items:flex-end;justify-content:center;flex-direction:row;"," "," ",""],(o=>o.borderColor&&!o.noBorder?t(o.borderColor,i):null),(o=>o.color?t(o.color):null),e('width'));var a=o.div.withConfig({componentId:"fox-ui__sc-ggtlgu-1"})(["position:relative;display:block;width:auto;height:auto;padding:0;margin:0 -20px;box-sizing:border-box;background:transparent;overflow:visible;max-width:100%;width:100%;&::before,&::after{position:absolute;z-index:1;top:0;bottom:0;display:block;content:'';width:","px;height:100%;}&::before{left:0;background:linear-gradient(-90deg,rgba(247,247,247,0) 0%,currentColor 100%);}&::after{right:0;background:linear-gradient(90deg,rgba(247,247,247,0) 0%,currentColor 100%);}"],20);var s=o.div.withConfig({componentId:"fox-ui__sc-ggtlgu-2"})(["display:block;padding:0;margin:0 auto;white-space:nowrap;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;color:",";scrollbar-width:none;&::-webkit-scrollbar{height:0;background:transparent;visibility:hidden;}&::-webkit-scrollbar-thumb{height:0px;background:transparent;visibility:hidden;}",""],(o=>o.theme.colors.mineShaft),(o=>o.noBorder?r(["display:flex;justify-content:space-between;width:100%;"]):null));var c=o.div.withConfig({shouldForwardProp:o=>!['themeKey','color','borderColor','active'].includes(o)}).withConfig({componentId:"fox-ui__sc-ggtlgu-3"})(["display:inline-block;margin-bottom:-1px;flex-shrink:0;font-size:16px;font-weight:bold;line-height:20px;padding-bottom:14px;text-decoration:none;cursor:pointer;z-index:2;transition:color 0.2s ease-out;"," "," &:after{opacity:0;width:0;content:'';height:3px;position:absolute;bottom:-1px;z-index:1;left:0;right:0;background-color:currentColor;transition:opacity 0.2s ease-out;}&:hover{color:",";}& + &{margin-left:60px;}"," "," &.active{","}"],(o=>o.color?t(o.color):null),(o=>o.borderColor?t(o.borderColor,i):null),(o=>o.theme.colors.primary),(o=>o.themeKey?(o=>{switch(o){case'compact':return r(["font-weight:normal;& + &{margin-left:20px;}"]);case'crispyCompact':return r(["text-transform:uppercase;font-size:12px;height:16px;line-height:16px;padding-bottom:8px;border-bottom:1px solid ",";& + &{margin-left:18px;}"],(o=>o.theme.colors.mercury));case'crispy':return r(["height:35px;text-transform:uppercase;font-size:12px;& + &{margin-left:32px;}"]);default:return null}})(o.themeKey):null),(o=>o.active?n:null),n);export{s as Content,a as Inner,l as Root,c as Tab};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Tabs/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { TabsProps } from './Tabs'\nimport { TabProps } from './
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Tabs/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { responsiveProperty } from 'mixins/responsive-property'\nimport { TabsProps } from './Tabs'\nimport { TabProps } from './TabsTab'\n\nconst BEFORE_AFTER_SHADOW_WIDTH = 20\n\nconst borderColor = (color: string) => css`\n border-bottom: 1px solid ${color};\n`\n\nconst getThemedCss = (theme: TabProps['theme']) => {\n switch (theme) {\n case 'compact':\n return css`\n font-weight: normal;\n & + & {\n margin-left: 20px;\n }\n `\n case 'crispyCompact':\n return css`\n text-transform: uppercase;\n font-size: 12px;\n height: 16px;\n line-height: 16px;\n padding-bottom: 8px;\n border-bottom: 1px solid ${(props) => props.theme.colors.mercury};\n & + & {\n margin-left: 18px;\n }\n `\n case 'crispy':\n return css`\n height: 35px;\n text-transform: uppercase;\n font-size: 12px;\n & + & {\n margin-left: 32px;\n }\n `\n default:\n return null\n }\n}\n\nconst activeTab = css`\n color: ${(props) => props.theme.colors.primary};\n position: relative;\n &:after {\n width: initial;\n opacity: 1;\n }\n`\n\nexport const Root = styled.div.withConfig({\n shouldForwardProp: (prop) => prop === 'children',\n})<Pick<TabsProps, 'noBorder' | 'borderColor' | 'color' | 'width'>>`\n color: rgba(247, 247, 247, 1);\n display: flex;\n align-items: flex-end;\n justify-content: center;\n flex-direction: row;\n ${(props) => (props.borderColor && !props.noBorder ? color(props.borderColor, borderColor) : null)}\n ${(props) => (props.color ? color(props.color) : null)}\n ${responsiveProperty('width')}\n`\n\nexport const Inner = styled.div`\n position: relative;\n display: block;\n width: auto;\n height: auto;\n padding: 0;\n margin: 0 -20px;\n box-sizing: border-box;\n background: transparent;\n overflow: visible;\n max-width: 100%;\n width: 100%;\n &::before,\n &::after {\n position: absolute;\n z-index: 1;\n top: 0;\n bottom: 0;\n display: block;\n content: '';\n width: ${BEFORE_AFTER_SHADOW_WIDTH}px;\n height: 100%;\n }\n\n &::before {\n left: 0;\n background: linear-gradient(-90deg, rgba(247, 247, 247, 0) 0%, currentColor 100%);\n }\n\n &::after {\n right: 0;\n background: linear-gradient(90deg, rgba(247, 247, 247, 0) 0%, currentColor 100%);\n }\n`\n\nexport const Content = styled.div<Pick<TabsProps, 'noBorder'>>`\n display: block;\n padding: 0;\n margin: 0 auto;\n white-space: nowrap;\n box-sizing: border-box;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n color: ${(props) => props.theme.colors.mineShaft};\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n height: 0;\n background: transparent;\n visibility: hidden;\n }\n\n &::-webkit-scrollbar-thumb {\n height: 0px;\n background: transparent;\n visibility: hidden;\n }\n\n ${(props) =>\n props.noBorder\n ? css`\n display: flex;\n justify-content: space-between;\n width: 100%;\n `\n : null}\n`\n\nexport const Tab = styled.div.withConfig<TabProps & { themeKey: TabProps['theme'] }>({\n shouldForwardProp: (prop) => !['themeKey', 'color', 'borderColor', 'active'].includes(prop),\n})`\n display: inline-block;\n margin-bottom: -1px;\n flex-shrink: 0;\n font-size: 16px;\n font-weight: bold;\n line-height: 20px;\n padding-bottom: 14px;\n text-decoration: none;\n cursor: pointer;\n z-index: 2;\n transition: color 0.2s ease-out;\n ${(props) => (props.color ? color(props.color) : null)}\n ${(props) => (props.borderColor ? color(props.borderColor, borderColor) : null)}\n &:after {\n opacity: 0;\n width: 0;\n content: '';\n height: 3px;\n position: absolute;\n bottom: -1px;\n z-index: 1;\n left: 0;\n right: 0;\n background-color: currentColor;\n transition: opacity 0.2s ease-out;\n }\n &:hover {\n color: ${(props) => props.theme.colors.primary};\n }\n & + & {\n margin-left: 60px;\n }\n ${(props) => (props.themeKey ? getThemedCss(props.themeKey) : null)}\n ${(props) => (props.active ? activeTab : null)}\n &.active {\n ${activeTab}\n }\n`\n"],"names":["borderColor","color","css","activeTab","props","theme","colors","primary","Root","styled","div","withConfig","shouldForwardProp","prop","componentId","noBorder","responsiveProperty","Inner","Content","mineShaft","Tab","includes","themeKey","mercury","active"],"mappings":"kKAQA,IAAMA,EAAeC,GAAkBC,EAAnB,CAAA,2BAAA,KACSD,GAsC7B,IAAME,EAAYD,EAAH,CAAA,SAAA,yDACHE,GAAUA,EAAMC,MAAMC,OAAOC,UAQlC,IAAMC,EAAOC,EAAOC,IAAIC,WAAW,CACxCC,kBAAoBC,GAAkB,aAATA,IADdF,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,yGAAA,IAAA,IAAA,KAQZL,GAAWA,EAAMJ,cAAgBI,EAAMW,SAAWd,EAAMG,EAAMJ,YAAaA,GAAe,OAC1FI,GAAWA,EAAMH,MAAQA,EAAMG,EAAMH,OAAS,MAC/Ce,EAAmB,UAGVC,IAAAA,EAAQR,EAAOC,IAAVC,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,wQAAA,+MA/DgB,IAkGrBS,IAAAA,EAAUT,EAAOC,IAAVC,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,2JAAA,iLAAA,KASRL,GAAUA,EAAMC,MAAMC,OAAOa,YAepCf,GACDA,EAAMW,SACFb,EADJ,CAAA,2DAMI,OAGD,IAAMkB,EAAMX,EAAOC,IAAIC,WAAuD,CACnFC,kBAAoBC,IAAU,CAAC,WAAY,QAAS,cAAe,UAAUQ,SAASR,KADxEF,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,2MAAA,IAAA,yLAAA,6BAAA,IAAA,aAAA,MAcXL,GAAWA,EAAMH,MAAQA,EAAMG,EAAMH,OAAS,OAC9CG,GAAWA,EAAMJ,YAAcC,EAAMG,EAAMJ,YAAaA,GAAe,OAe9DI,GAAUA,EAAMC,MAAMC,OAAOC,UAKtCH,GAAWA,EAAMkB,SAjKAjB,CAAAA,IACpB,OAAQA,GACN,IAAK,UACH,OAAOH,EAAP,CAAA,gDAMF,IAAK,gBACH,OAAOA,EAMuBE,CAAAA,mHAAAA,8BAAAA,GAAUA,EAAMC,MAAMC,OAAOiB,UAK7D,IAAK,SACH,OAAOrB,EAAP,CAAA,iFAQF,QACE,OAAO,OA/BSG,CAiKwBD,EAAMkB,UAAY,OAC3DlB,GAAWA,EAAMoB,OAASrB,EAAY,MAErCA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport { BaseProps } from '../../shared/interfaces'\nimport { TextProps } from '../Text/Text'\nimport * as Styled from './style'\n\nexport interface TagProps\n extends BaseProps,\n Display,\n Color,\n ResponsiveNamedProperty<'height'>,\n ResponsiveNamedProperty<'width'> {\n as?: 'button' | 'div' | 'input' | 'label'\n /**\n * Field id\n */\n id?: string\n /**\n * Field name\n */\n name?: string\n /**\n * Input type\n */\n inputType?: 'checkbox' | 'radio'\n /**\n * On change handler\n */\n onChange?(_e: React.ChangeEvent<HTMLInputElement>): void\n /**\n * On click handler\n */\n onClick?(_e: React.MouseEvent<HTMLInputElement>): void\n /**\n * Whether or not Radio is checked\n */\n defaultChecked?: boolean\n /**\n * Value\n */\n value?: string | number\n /** Children are placed before Text */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /** Inner Text content */\n content?: React.ReactNode\n /** Inner Text component props */\n textProps?: TextProps\n /** Checked state */\n checked?: boolean\n /** Disabled state */\n disabled?: boolean\n /** Error state */\n error?: boolean\n /** If as = 'label' could provide for */\n htmlFor?: string\n /**\n * inverse\n */\n inverse?: boolean\n /**\n * Size\n */\n size?: 'l' | 'm' | 's' | 'xs'\n}\n\nTag.defaultProps = {\n display: 'inline-block',\n as: 'button',\n height: 40,\n}\n\nTagInput.defaultProps = {\n display: 'inline-block',\n height: 40,\n}\n\n// Prevent brakechanges\nTag.Input = TagInput\n\nTag.displayName = 'Tag'\n\nfunction TagInput(props: typeof TagInput.defaultProps & TagProps) {\n return <Tag as='input' {...props} />\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`ResponsiveNamedProperty<'width'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'height'>`](#/Миксины)\n */\nexport function Tag(props: typeof Tag.defaultProps & TagProps) {\n const {\n as,\n textProps,\n content,\n children,\n htmlFor,\n id,\n name,\n inputType,\n value,\n disabled,\n onChange,\n onClick,\n inverse,\n checked,\n ...restProps\n } = props\n\n const buttonProps = as === 'button' ? { type: 'button' } : {}\n const labelProps = as === 'label' ? { htmlFor } : {}\n const inputProps = as === 'input' ? { htmlFor: id || name } : {}\n\n return (\n <Styled.Root\n as={as === 'input' ? 'label' : as}\n inverse={inverse}\n checked={checked}\n disabled={disabled}\n onClick={as !== 'input' ? onClick : undefined}\n {...labelProps}\n {...buttonProps}\n {...inputProps}\n {...restProps}\n >\n {as === 'input' ? (\n <input\n id={id || name}\n name={name}\n type={inputType || 'checkbox'}\n tabIndex={0}\n onChange={(e) => {\n e.persist()\n\n return onChange && onChange(e)\n }}\n onClick={(e) => {\n e.persist()\n\n return onClick && onClick(e)\n }}\n defaultChecked={props.defaultChecked}\n checked={checked}\n value={value}\n disabled={disabled}\n hidden\n />\n ) : null}\n {children}\n <Styled.Text size={14} forwardedAs='span' color={checked && !inverse ? 'white' : 'mineShaft'} {...textProps}>\n {content}\n </Styled.Text>\n </Styled.Root>\n )\n}\n"],"names":["TagInput","props","_jsx","Tag","_objectSpread","as","textProps","content","children","htmlFor","id","name","inputType","value","disabled","onChange","onClick","inverse","checked","restProps","_excluded","buttonProps","type","inputProps","_jsxs","Styled.Root","tabIndex","_onChange","_x","apply","this","arguments","toString","e","persist","_onClick","_x2","defaultChecked","hidden","Styled.Text","size","forwardedAs","color","defaultProps","display","height","Input","displayName"],"mappings":"4VAqFA,SAASA,EAASC,GAChB,OAAOC,EAACC,EAADC,EAAA,CAAKC,GAAG,SAAYJ,IAWtB,SAASE,EAAIF,GAClB,IAAMI,GACJA,EADIC,UAEJA,EAFIC,QAGJA,EAHIC,SAIJA,EAJIC,QAKJA,EALIC,GAMJA,EANIC,KAOJA,EAPIC,UAQJA,EARIC,MASJA,EATIC,SAUJA,EAVIC,SAWJA,EAXIC,QAYJA,EAZIC,QAaJA,EAbIC,QAcJA,GAEEjB,EADCkB,IACDlB,EAhBJmB,GAkBA,IAAMC,EAAqB,WAAPhB,EAAkB,CAAEiB,KAAM,UAAa,GAE3D,IAAMC,EAAoB,UAAPlB,EAAiB,CAAEI,QAASC,GAAMC,GAAS,GAE9D,OACEa,EAACC,EAADrB,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CACEC,GAAW,UAAPA,EAAiB,QAAUA,EAC/BY,QAASA,EACTC,QAASA,EACTJ,SAAUA,EACVE,QAAgB,UAAPX,EAAiBW,OAAAA,GATJ,UAAPX,EAAiB,CAAEI,QAAAA,GAAY,IAW1CY,GACAE,GACAJ,GATN,GAAA,CAAAX,SAWGH,CAAO,UAAPA,EACCH,EAAA,QAAA,CACEQ,GAAIA,GAAMC,EACVA,KAAMA,EACNW,KAAMV,GAAa,WACnBc,SAAU,EACVX,SAAQ,SAAAY,GAAA,SAAAZ,EAAAa,GAAA,OAAAD,EAAAE,MAAAC,KAAAC,WAAA,OAAAhB,EAAAiB,SAAA,IAAAL,EAAAK,WAAAjB,EAAA,EAAGkB,IACTA,EAAEC,UAEKnB,GAAYA,EAASkB,MAE9BjB,QAAO,SAAAmB,GAAA,SAAAnB,EAAAoB,GAAA,OAAAD,EAAAN,MAAAC,KAAAC,WAAA,OAAAf,EAAAgB,SAAA,IAAAG,EAAAH,WAAAhB,EAAA,EAAGiB,IACRA,EAAEC,UAEKlB,GAAWA,EAAQiB,MAE5BI,eAAgBpC,EAAMoC,eACtBnB,QAASA,EACTL,MAAOA,EACPC,SAAUA,EACVwB,QAAM,IAEN,KACH9B,EACDN,EAACqC,EAADnC,EAAAA,EAAA,CAAaoC,KAAM,GAAIC,YAAY,OAAOC,MAAOxB,IAAYD,EAAU,QAAU,aAAiBX,GAAlG,GAAA,CAAAE,SACGD,SAxFTJ,EAAIwC,aAAe,CACjBC,QAAS,eACTvC,GAAI,SACJwC,OAAQ,IAGV7C,EAAS2C,aAAe,CACtBC,QAAS,eACTC,OAAQ,IAIV1C,EAAI2C,MAAQ9C,EAEZG,EAAI4C,YAAc"}
|
package/components/Tag/style.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import i,{css as o}from'styled-components';import{display as e}from'../../mixins/display.js';import{color as t}from'../../mixins/color.js';import{property as r,
|
|
1
|
+
import i,{css as o}from'styled-components';import{display as e}from'../../mixins/display.js';import{color as t}from'../../mixins/color.js';import{property as r,responsiveNamedProperty as l}from'../../mixins/responsive-property.js';import{Text as s}from'../Text/Text.js';var h={l:220,m:182,s:100,xs:60};var d=o(["border-color:transparent;background-color:currentColor;"]);var a=i(s).withConfig({componentId:"fox-ui__sc-3oi44j-0"})(["display:inline-block;vertical-align:middle;white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden;vertical-align:middle;transition:color 0.25s ease;"]);var n=o(["cursor:not-allowed;background-color:rgba(0,0,0,0.04);","{color:rgba(0,0,0,0.16);}"],a);var c=i.button.withConfig({shouldForwardProp:i=>['children','htmlFor','className','style','onClick'].includes(i)}).withConfig({componentId:"fox-ui__sc-3oi44j-1"})(["padding:0px 16px;margin-bottom:10px;border-radius:3px;background-color:",";border:1px solid ",";box-sizing:border-box;vertical-align:middle;transition:color 0.25s ease,background 0.25s ease,border-color 0.25s ease;cursor:pointer;text-align:center;touch-action:manipulation;min-width:60px;"," "," "," "," "," "," "," "," &:not(:last-child){margin-right:20px;}"," "," &:disabled{","}",""],(i=>i.theme.colors.white),(i=>i.theme.colors.whiteGray),(i=>i.size?r((i=>'auto'===i.width?'auto':'number'==typeof i.width?i.width:i.size&&h[i.size]?h[i.size]:'auto')(i),'width'):null),(i=>i.height?r(i.height,'line-height'):null),(i=>i.height?r(i.height,'height'):null),(i=>{var{heightXS:o,heightS:e,heightM:t,heightL:r,heightXL:s}=i;return l({sizes:{heightXS:o,heightS:e,heightM:t,heightL:r,heightXL:s},cssProperty:'height'})}),(i=>i.width?r(i.width,'width'):null),(i=>{var{widthXS:o,widthS:e,widthM:t,widthL:r,widthXL:s}=i;return l({sizes:{widthXS:o,widthS:e,widthM:t,widthL:r,widthXL:s},cssProperty:'width'})}),(i=>i.display?e(i.display):null),(i=>i.color?t(i.color):null),(i=>i.disabled?null:o(["&:hover:not(:disabled){border-color:currentColor;}&:active:not(:disabled){"," ","{color:",";}}"],d,a,(i=>i.theme.colors.white))),(i=>i.inverse||i.checked?d:null),n,(i=>i.disabled?n:null));export{c as Root,a as Text};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Tag/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { display } from 'mixins/display'\nimport { color } from 'mixins/color'\nimport { property, PossibleValues,
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Tag/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { display } from 'mixins/display'\nimport { color } from 'mixins/color'\nimport { property, PossibleValues, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { Text as UiText, TextProps } from '../Text/Text'\nimport { TagProps } from './Tag'\n\nconst WIDTHS: Record<Partial<Exclude<TagProps['size'], 'auto' | undefined>>, number> = {\n l: 220,\n m: 182,\n s: 100,\n xs: 60,\n}\n\nconst chooseWidthValue = (props: TagProps): PossibleValues => {\n if (props.width === 'auto') return 'auto'\n if (typeof props.width === 'number') return props.width\n\n if (props.size && WIDTHS[props.size]) return WIDTHS[props.size]\n\n return 'auto'\n}\n\nconst active = css`\n border-color: transparent;\n background-color: currentColor;\n`\n\nexport const Text = styled(UiText)<TextProps>`\n display: inline-block;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n max-width: 100%;\n overflow: hidden;\n vertical-align: middle;\n transition: color 0.25s ease;\n`\n\nconst disabled = css`\n cursor: not-allowed;\n background-color: rgba(0, 0, 0, 0.04);\n ${Text} {\n color: rgba(0, 0, 0, 0.16);\n }\n`\n\nexport const Root = styled.button.withConfig<TagProps>({\n shouldForwardProp: (prop) => ['children', 'htmlFor', 'className', 'style', 'onClick'].includes(prop),\n})`\n padding: 0px 16px;\n margin-bottom: 10px;\n border-radius: 3px;\n background-color: ${(props) => props.theme.colors.white};\n border: 1px solid ${(props) => props.theme.colors.whiteGray};\n box-sizing: border-box;\n vertical-align: middle;\n transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;\n cursor: pointer;\n text-align: center;\n touch-action: manipulation;\n min-width: 60px;\n\n ${(props) => (props.size ? property(chooseWidthValue(props), 'width') : null)}\n ${(props) => (props.height ? property(props.height, 'line-height') : null)}\n ${(props) => (props.height ? property(props.height, 'height') : null)}\n ${({ heightXS, heightS, heightM, heightL, heightXL }) =>\n responsiveNamedProperty({ sizes: { heightXS, heightS, heightM, heightL, heightXL }, cssProperty: 'height' })}\n\n ${(props) => (props.width ? property(props.width, 'width') : null)}\n ${({ widthXS, widthS, widthM, widthL, widthXL }) =>\n responsiveNamedProperty({ sizes: { widthXS, widthS, widthM, widthL, widthXL }, cssProperty: 'width' })}\n\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.color ? color(props.color) : null)}\n\n &:not(:last-child) {\n margin-right: 20px;\n }\n\n ${(props) =>\n !props.disabled\n ? css`\n &:hover:not(:disabled) {\n border-color: currentColor;\n }\n &:active:not(:disabled) {\n ${active}\n ${Text} {\n color: ${(props) => props.theme.colors.white};\n }\n }\n `\n : null}\n\n ${(props) => (props.inverse || props.checked ? active : null)}\n\n &:disabled {\n ${disabled}\n }\n ${(props) => (props.disabled ? disabled : null)}\n`\n"],"names":["WIDTHS","l","m","s","xs","active","css","Text","styled","UiText","withConfig","componentId","disabled","Root","button","shouldForwardProp","prop","includes","props","theme","colors","white","whiteGray","size","property","width","height","_ref","heightXS","heightS","heightM","heightL","heightXL","responsiveNamedProperty","sizes","cssProperty","_ref2","widthXS","widthS","widthM","widthL","widthXL","display","color","inverse","checked"],"mappings":"8QAOA,IAAMA,EAAiF,CACrFC,EAAG,IACHC,EAAG,IACHC,EAAG,IACHC,GAAI,IAYN,IAAMC,EAASC,EAAf,CAAA,gEAKaC,EAAOC,EAAOC,GAAVC,WAAA,CAAAC,YAAA,uBAAGH,CAAb,CAAA,2KAWP,IAAMI,EAAWN,EAAH,CAAA,wDAAA,6BAGVC,GAKG,IAAMM,EAAOL,EAAOM,OAAOJ,WAAqB,CACrDK,kBAAoBC,GAAS,CAAC,WAAY,UAAW,YAAa,QAAS,WAAWC,SAASD,KADhFN,WAAA,CAAAC,YAAA,uBAAGH,CAAH,CAAA,0EAAA,qBAAA,oMAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,0CAAA,IAAA,eAAA,IAAA,KAMMU,GAAUA,EAAMC,MAAMC,OAAOC,QAC7BH,GAAUA,EAAMC,MAAMC,OAAOE,YAS/CJ,GAAWA,EAAMK,KAAOC,EAjDHN,CAAAA,GACJ,SAAhBA,EAAMO,MAAyB,OACR,iBAAhBP,EAAMO,MAA2BP,EAAMO,MAE9CP,EAAMK,MAAQvB,EAAOkB,EAAMK,MAAcvB,EAAOkB,EAAMK,MAEnD,OANiBL,CAiD6BA,GAAQ,SAAW,OACrEA,GAAWA,EAAMQ,OAASF,EAASN,EAAMQ,OAAQ,eAAiB,OAClER,GAAWA,EAAMQ,OAASF,EAASN,EAAMQ,OAAQ,UAAY,OAC9DC,IAAA,IAACC,SAAEA,EAAFC,QAAYA,EAAZC,QAAqBA,EAArBC,QAA8BA,EAA9BC,SAAuCA,GAAxCL,EAAA,OACAM,EAAwB,CAAEC,MAAO,CAAEN,SAAAA,EAAUC,QAAAA,EAASC,QAAAA,EAASC,QAAAA,EAASC,SAAAA,GAAYG,YAAa,cAEhGjB,GAAWA,EAAMO,MAAQD,EAASN,EAAMO,MAAO,SAAW,OACzDW,IAAA,IAACC,QAAEA,EAAFC,OAAWA,EAAXC,OAAmBA,EAAnBC,OAA2BA,EAA3BC,QAAmCA,GAApCL,EAAA,OACFH,EAAwB,CAAEC,MAAO,CAAEG,QAAAA,EAASC,OAAAA,EAAQC,OAAAA,EAAQC,OAAAA,EAAQC,QAAAA,GAAWN,YAAa,aAE3FjB,GAAWA,EAAMwB,QAAUA,EAAQxB,EAAMwB,SAAW,OACpDxB,GAAWA,EAAMyB,MAAQA,EAAMzB,EAAMyB,OAAS,OAM9CzB,GACAA,EAAMN,SAYH,KAXAN,EADJ,CAAA,6EAAA,IAAA,UAAA,OAMUD,EACAE,GACUW,GAAUA,EAAMC,MAAMC,OAAOC,UAMhDH,GAAWA,EAAM0B,SAAW1B,EAAM2B,QAAUxC,EAAS,MAGpDO,GAEDM,GAAWA,EAAMN,SAAWA,EAAW"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport { TextHeading } from '../../components/Text.Heading'\nimport { TextEllipse } from '../../components/Text.Ellipse'\nimport { Color } from '../../mixins/color'\nimport {
|
|
1
|
+
{"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport { TextHeading } from '../../components/Text.Heading'\nimport { TextEllipse } from '../../components/Text.Ellipse'\nimport { Color } from '../../mixins/color'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { Display } from '../../mixins/display'\nimport { BaseProps } from '../../shared/interfaces'\nimport * as Styled from './style'\n\nexport interface TextProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>, Display {\n /**\n * An element type to render as (string).\n */\n as?: 'div' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'p'\n /**\n * Primary content\n */\n content?: string\n /**\n * Primary content\n */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Text font weight\n */\n weight?: 'lighter' | 'normal' | 'bold' | 'bolder' | number\n /**\n * Text font style\n */\n fontStyle?: 'normal' | 'italic'\n /**\n * Add underline to inline links\n */\n underlineLinks?: boolean\n /**\n * Text align\n */\n textAlign?: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end'\n /**\n * Line height\n */\n lineHeight?: 'l' | 'm' | 's' | 'xs' | number\n /**\n * Element title\n */\n title?: string\n}\n\nText.Heading = TextHeading\nText.Ellipse = TextEllipse\nText.displayName = 'Text'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)\n */\nexport function Text(props: TextProps) {\n const {\n as = 'div',\n children,\n weight = 'normal',\n content,\n textAlign,\n underlineLinks,\n className: origClassName,\n style,\n lineHeight = 'm',\n fontStyle = 'normal',\n title,\n color,\n size = 'm',\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n display,\n } = props\n\n const className = useClassname(Text.displayName, origClassName)\n\n if (children) {\n return (\n <Styled.Root\n as={as}\n color={color}\n className={className}\n title={title}\n weight={weight}\n lineHeight={lineHeight}\n textAlign={textAlign}\n fontStyle={fontStyle}\n underlineLinks={underlineLinks}\n size={size}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n display={display}\n style={style}\n >\n {children}\n </Styled.Root>\n )\n }\n\n return (\n <Styled.Root\n as={as}\n color={color}\n className={className}\n title={title}\n weight={weight}\n lineHeight={lineHeight}\n textAlign={textAlign}\n fontStyle={fontStyle}\n underlineLinks={underlineLinks}\n size={size}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n display={display}\n style={style}\n dangerouslySetInnerHTML={{ __html: content || '' }}\n />\n )\n}\n"],"names":["Text","props","as","children","weight","content","textAlign","underlineLinks","className","origClassName","style","lineHeight","fontStyle","title","color","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","display","useClassname","displayName","_jsx","Styled.Root","dangerouslySetInnerHTML","__html","Heading","TextHeading","Ellipse","TextEllipse"],"mappings":"iQA8DO,SAASA,EAAKC,GACnB,IAAMC,GACJA,EAAK,MADDC,SAEJA,EAFIC,OAGJA,EAAS,SAHLC,QAIJA,EAJIC,UAKJA,EALIC,eAMJA,EACAC,UAAWC,EAPPC,MAQJA,EARIC,WASJA,EAAa,IATTC,UAUJA,EAAY,SAVRC,MAWJA,EAXIC,MAYJA,EAZIC,KAaJA,EAAO,IAbHC,OAcJA,EAdIC,MAeJA,EAfIC,MAgBJA,EAhBIC,MAiBJA,EAjBIC,OAkBJA,EAlBIC,QAmBJA,GACEpB,EAEJ,IAAMO,EAAYc,EAAatB,EAAKuB,YAAad,GAEjD,OAEIe,EAACC,EAFDtB,EAEA,CACED,GAAIA,EACJY,MAAOA,EACPN,UAAWA,EACXK,MAAOA,EACPT,OAAQA,EACRO,WAAYA,EACZL,UAAWA,EACXM,UAAWA,EACXL,eAAgBA,EAChBQ,KAAMA,EACNC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRC,QAASA,EACTX,MAAOA,EAjBTP,SAmBGA,GAML,CACED,GAAIA,EACJY,MAAOA,EACPN,UAAWA,EACXK,MAAOA,EACPT,OAAQA,EACRO,WAAYA,EACZL,UAAWA,EACXM,UAAWA,EACXL,eAAgBA,EAChBQ,KAAMA,EACNC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRC,QAASA,EACTX,MAAOA,EACPgB,wBAAyB,CAAEC,OAAQtB,GAAW,MAjFpDL,EAAK4B,QAAUC,EACf7B,EAAK8B,QAAUC,EACf/B,EAAKuB,YAAc"}
|
package/components/Text/style.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e,{css as i}from'styled-components';import{display as t}from'../../mixins/display.js';import{color as o}from'../../mixins/color.js';import{property as n,
|
|
1
|
+
import e,{css as i}from'styled-components';import{display as t}from'../../mixins/display.js';import{color as o}from'../../mixins/color.js';import{property as n,responsiveNamedProperty as s}from'../../mixins/responsive-property.js';var l={lighter:100,normal:400,bold:600,bolder:800};var r={l:1.5,m:1.3,s:1.15,xs:1};var a=i(["a{text-decoration:underline;&:hover{text-decoration:none;}}"]);var g=e.div.withConfig({shouldForwardProp:e=>['children','className','style','title','dangerouslySetInnerHTML'].includes(e)}).withConfig({componentId:"fox-ui__sc-s2fogy-0"})(["line-height:inherit;margin:initial;"," "," "," "," "," a{text-decoration:none;&:hover{text-decoration:none;}}"," "," "," ",""],(e=>e.display?t(e.display):null),(e=>o(e.color?e.color:e.theme.textColor)),(e=>e.lineHeight?i(["line-height:",";"],'string'==typeof e.lineHeight&&r[e.lineHeight]?r[e.lineHeight]:e.lineHeight):null),(e=>e.fontStyle?i(["font-style:",";"],e.fontStyle):null),(e=>e.weight?i(["font-weight:",";"],'string'==typeof e.lineHeight&&l[e.weight]?l[e.weight]:e.weight):null),(e=>e.underlineLinks?a:null),(e=>e.textAlign?i(["text-align:",";"],e.textAlign):null),(e=>e.size?n(e.size,'font-size'):null),(e=>{var{sizeXS:i,sizeS:t,sizeM:o,sizeL:n,sizeXL:l}=e;return s({sizes:{sizeXS:i,sizeS:t,sizeM:o,sizeL:n,sizeXL:l},cssProperty:'font-size'})}));export{g as Root};
|
|
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 { display } from '../../mixins/display'\nimport { color, ColorValue } from '../../mixins/color'\nimport {
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Text/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { display } from '../../mixins/display'\nimport { color, ColorValue } from '../../mixins/color'\nimport { responsiveNamedProperty, property } from '../../mixins/responsive-property'\nimport { TextProps } from './Text'\n\nconst WEIGHT_MAP = {\n lighter: 100,\n normal: 400,\n bold: 600,\n bolder: 800,\n}\n\nconst LINE_HEIGHT_MAP: Record<Exclude<TextProps['lineHeight'], undefined>, number> = {\n l: 1.5,\n m: 1.3,\n s: 1.15,\n xs: 1,\n}\n\nconst underlineLinksStyle = css`\n a {\n text-decoration: underline;\n &:hover {\n text-decoration: none;\n }\n }\n`\n\nexport const Root = styled.div.withConfig<TextProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'style', 'title', 'dangerouslySetInnerHTML'].includes(prop),\n})`\n line-height: inherit;\n margin: initial;\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.color ? color(props.color) : color(props.theme.textColor as ColorValue))}\n ${(props) =>\n props.lineHeight\n ? css`\n line-height: ${typeof props.lineHeight === 'string' && LINE_HEIGHT_MAP[props.lineHeight]\n ? LINE_HEIGHT_MAP[props.lineHeight]\n : props.lineHeight};\n `\n : null}\n ${(props) =>\n props.fontStyle\n ? css`\n font-style: ${props.fontStyle};\n `\n : null}\n ${(props) =>\n props.weight\n ? css`\n font-weight: ${typeof props.lineHeight === 'string' && WEIGHT_MAP[props.weight]\n ? WEIGHT_MAP[props.weight]\n : props.weight};\n `\n : null}\n\n a {\n text-decoration: none;\n &:hover {\n text-decoration: none;\n }\n }\n\n ${(props) => (props.underlineLinks ? underlineLinksStyle : null)}\n ${(props) =>\n props.textAlign\n ? css`\n text-align: ${props.textAlign};\n `\n : null}\n\n ${(props) => (props.size ? property(props.size, 'font-size') : null)}\n ${({ sizeXS, sizeS, sizeM, sizeL, sizeXL }) =>\n responsiveNamedProperty({ sizes: { sizeXS, sizeS, sizeM, sizeL, sizeXL }, cssProperty: 'font-size' })}\n`\n"],"names":["WEIGHT_MAP","lighter","normal","bold","bolder","LINE_HEIGHT_MAP","l","m","s","xs","underlineLinksStyle","css","Root","styled","div","withConfig","shouldForwardProp","prop","includes","componentId","props","display","color","theme","textColor","lineHeight","fontStyle","weight","underlineLinks","textAlign","size","property","_ref","sizeXS","sizeS","sizeM","sizeL","sizeXL","responsiveNamedProperty","sizes","cssProperty"],"mappings":"uOAMA,IAAMA,EAAa,CACjBC,QAAS,IACTC,OAAQ,IACRC,KAAM,IACNC,OAAQ,KAGV,IAAMC,EAA+E,CACnFC,EAAG,IACHC,EAAG,IACHC,EAAG,KACHC,GAAI,GAGN,IAAMC,EAAsBC,EAA5B,CAAA,gEASO,IAAMC,EAAOC,EAAOC,IAAIC,WAAsB,CACnDC,kBAAoBC,GAAS,CAAC,WAAY,YAAa,QAAS,QAAS,2BAA2BC,SAASD,KAD9FF,WAAA,CAAAI,YAAA,uBAAGN,CAAH,CAAA,sCAAA,IAAA,IAAA,IAAA,IAAA,0DAAA,IAAA,IAAA,IAAA,KAKZO,GAAWA,EAAMC,QAAUA,EAAQD,EAAMC,SAAW,OACpDD,GAAyBE,EAAdF,EAAME,MAAcF,EAAME,MAAeF,EAAMG,MAAMC,aAChEJ,GACDA,EAAMK,WACFd,EACiB,CAAA,eAAA,KAA4B,iBAArBS,EAAMK,YAA2BpB,EAAgBe,EAAMK,YACzEpB,EAAgBe,EAAMK,YACtBL,EAAMK,YAEZ,OACHL,GACDA,EAAMM,UACFf,EADJ,CAAA,cAAA,KAEoBS,EAAMM,WAEtB,OACHN,GACDA,EAAMO,OACFhB,EACiB,CAAA,eAAA,KAA4B,iBAArBS,EAAMK,YAA2BzB,EAAWoB,EAAMO,QACpE3B,EAAWoB,EAAMO,QACjBP,EAAMO,QAEZ,OASHP,GAAWA,EAAMQ,eAAiBlB,EAAsB,OACxDU,GACDA,EAAMS,UACFlB,EADJ,CAAA,cAAA,KAEoBS,EAAMS,WAEtB,OAEHT,GAAWA,EAAMU,KAAOC,EAASX,EAAMU,KAAM,aAAe,OAC7DE,IAAA,IAACC,OAAEA,EAAFC,MAAUA,EAAVC,MAAiBA,EAAjBC,MAAwBA,EAAxBC,OAA+BA,GAAhCL,EAAA,OACAM,EAAwB,CAAEC,MAAO,CAAEN,OAAAA,EAAQC,MAAAA,EAAOC,MAAAA,EAAOC,MAAAA,EAAOC,OAAAA,GAAUG,YAAa"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.Ellipse.js","sources":["../../../../src/components/Text.Ellipse/Text.Ellipse.tsx"],"sourcesContent":["import { Component } from 'react'\nimport { Spacer } from '../Spacer/Spacer'\nimport { Anchor } from '../Anchor/Anchor'\nimport { Text, TextProps } from '../Text'\nimport * as Styled from './style'\n\nexport interface TextEllipseProps extends Omit<TextProps, 'content'> {\n /** Toggle text for folded state */\n moreText?: string\n /** Toggle text for unfolded state */\n lessText?: string\n /** Classname */\n className?: string\n /** Html content */\n content: string | string[]\n /** Characters quantity for ellipsed text */\n chars?: number\n /** Wrap text in quotes */\n quoted?: boolean\n /** Flag to show toggler */\n showToggler?: boolean\n}\n\ninterface TextEllipseState {\n isUnFolded: boolean\n isEllipsed: boolean\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`
|
|
1
|
+
{"version":3,"file":"Text.Ellipse.js","sources":["../../../../src/components/Text.Ellipse/Text.Ellipse.tsx"],"sourcesContent":["import { Component } from 'react'\nimport { Spacer } from '../Spacer/Spacer'\nimport { Anchor } from '../Anchor/Anchor'\nimport { Text, TextProps } from '../Text'\nimport * as Styled from './style'\n\nexport interface TextEllipseProps extends Omit<TextProps, 'content'> {\n /** Toggle text for folded state */\n moreText?: string\n /** Toggle text for unfolded state */\n lessText?: string\n /** Classname */\n className?: string\n /** Html content */\n content: string | string[]\n /** Characters quantity for ellipsed text */\n chars?: number\n /** Wrap text in quotes */\n quoted?: boolean\n /** Flag to show toggler */\n showToggler?: boolean\n}\n\ninterface TextEllipseState {\n isUnFolded: boolean\n isEllipsed: boolean\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)\n */\nexport class TextEllipse extends Component<TextEllipseProps, TextEllipseState> {\n static displayName = 'Text.Ellipse'\n\n constructor(props: TextEllipseProps) {\n super(props)\n\n this.state = {\n isUnFolded: false,\n isEllipsed: false,\n }\n }\n\n // componentDidUpdate({ content }: Props) {\n // if (content !== this.props.content && this.state.isUnFolded) {\n // this.toggle()\n // }\n // }\n\n getContent = (props: Omit<TextEllipseProps, 'className' | 'moreText' | 'lessText' | 'showToggler'>) => {\n const { content, chars = 0 } = this.props\n\n if (!content) return ''\n\n let { isEllipsed } = this.state\n let text: string | string[] = typeof content === 'string' ? '' : []\n\n if (!this.state.isUnFolded) {\n if (typeof text === 'string') {\n isEllipsed = content.length > chars\n\n text = isEllipsed ? `${content.slice(0, chars)}...` : content\n } else {\n let leftChars = chars\n\n for (let index = 0; index < content.length; index++) {\n if (leftChars - content[index].length > 0) {\n leftChars -= content[index].length\n\n text[index] = content[index]\n } else {\n isEllipsed = true\n text[index] = `${content[index].slice(0, leftChars)}...`\n\n break\n }\n }\n }\n } else {\n text = content\n }\n\n if (this.state.isEllipsed !== isEllipsed) setTimeout(() => this.setState({ isEllipsed }))\n\n return typeof text === 'string' ? (\n <Text {...props} content={this.getQuted(text)} />\n ) : (\n <Styled.Ul>\n {text.map((item, index) => (\n <Styled.Li key={index}>\n <Text {...props} display='inline' content={item} />\n </Styled.Li>\n ))}\n </Styled.Ul>\n )\n }\n\n getQuted = (content: string) => (this.props.quoted ? `«${content}»` : content)\n\n toggle = () => {\n console.log(this.state)\n this.setState({ isUnFolded: !this.state.isUnFolded })\n }\n\n render() {\n const {\n className = '',\n style,\n moreText = 'Читать полностью',\n lessText = 'Свернуть',\n showToggler = true,\n ...restProps\n } = this.props\n const { isUnFolded, isEllipsed } = this.state\n\n return (\n <div className={className} style={style}>\n {this.getContent(restProps)}\n {showToggler && isEllipsed && (\n <Spacer marginTop={16} marginBottom={1}>\n <Anchor pseudo onClick={this.toggle}>\n {isUnFolded ? lessText : moreText}\n </Anchor>\n </Spacer>\n )}\n </div>\n )\n }\n}\n"],"names":["TextEllipse","Component","constructor","props","super","this","getContent","content","chars","isEllipsed","state","text","isUnFolded","length","slice","leftChars","index","concat","setTimeout","setState","_jsx","Text","getQuted","Styled.Ul","children","map","item","Styled.Li","_objectSpread","display","quoted","toggle","console","log","render","_this$props","className","style","moreText","lessText","showToggler","restProps","_objectWithoutProperties","_excluded","_jsxs","Spacer","marginTop","marginBottom","Anchor","pseudo","onClick","displayName"],"mappings":"+aAmCO,MAAMA,UAAoBC,EAG/BC,YAAYC,GACVC,MAAMD,GAD6BE,KAerCC,WAAcH,IACZ,IAAMI,QAAEA,EAAFC,MAAWA,EAAQ,GAAMH,KAAKF,MAEpC,IAAKI,EAAS,MAAO,GAErB,IAAIE,WAAEA,GAAeJ,KAAKK,MAC1B,IAAIC,EAA6C,iBAAZJ,EAAuB,GAAK,GAEjE,GAAKF,KAAKK,MAAME,WAsBdD,EAAOJ,OArBP,GAAoB,iBAATI,EAGTA,GAFAF,EAAaF,EAAQM,OAASL,GAEPD,GAAAA,OAAAA,EAAQO,MAAM,EAAGN,GAAvB,OAAqCD,MACjD,CACL,IAAIQ,EAAYP,EAEhB,IAAK,IAAIQ,EAAQ,EAAGA,EAAQT,EAAQM,OAAQG,IAAS,CACnD,KAAID,EAAYR,EAAQS,GAAOH,OAAS,GAIjC,CACLJ,GAAAA,EACAE,EAAKK,GAAL,GAAAC,OAAiBV,EAAQS,GAAOF,MAAM,EAAGC,GAAzC,OAEA,MAPAA,GAAaR,EAAQS,GAAOH,OAE5BF,EAAKK,GAAST,EAAQS,IAe9B,OAFIX,KAAKK,MAAMD,aAAeA,GAAYS,YAAAA,IAAiBb,KAAKc,SAAS,CAAEV,WAAAA,MAEpD,iBAATE,EACZS,EAACC,SAASlB,GAAV,GAAA,CAAiBI,QAASF,KAAKiB,SAASX,MAExCS,EAACG,EAAD,CAAAC,SACGb,EAAKc,KAAAA,CAAKC,EAAMV,IACfI,EAACO,EAAD,CAAAH,SACEJ,EAACC,EAADO,EAAAA,EAAA,GAAUzB,GAAV,GAAA,CAAiB0B,QAAQ,SAAStB,QAASmB,MAD7BV,QAvDaX,KA+DrCiB,SAAYf,GAAqBF,KAAKF,MAAM2B,OAAX,IAAAb,OAAwBV,EAAxB,KAAqCA,EA/DjCF,KAiErC0B,OAAS,KACPC,QAAQC,IAAI5B,KAAKK,OACjBL,KAAKc,SAAS,CAAEP,YAAaP,KAAKK,MAAME,cAhExCP,KAAKK,MAAQ,CACXE,YAAAA,EACAH,YAAY,GAiEhByB,SACE,IAAAC,EAOI9B,KAAKF,OAPHiC,UACJA,EAAY,GADRC,MAEJA,EAFIC,SAGJA,EAAW,mBAHPC,SAIJA,EAAW,WAJPC,YAKJA,GAAc,GALhBL,EAMKM,EANLC,EAAAP,EAAAQ,GAQA,IAAM/B,WAAEA,EAAFH,WAAcA,GAAeJ,KAAKK,MAExC,OACEkC,EAAA,MAAA,CAAKR,UAAWA,EAAWC,MAAOA,EAAlCb,SACG,CAAAnB,KAAKC,WAAWmC,GAChBD,GAAe/B,GACdW,EAACyB,EAAD,CAAQC,UAAW,GAAIC,aAAc,EAArCvB,SACEJ,EAAC4B,EAAD,CAAQC,QAAAA,EAAOC,QAAS7C,KAAK0B,OAA7BP,SACGZ,EAAa2B,EAAWD,UA1F1BtC,EACJmD,YAAc"}
|