@foxford/ui 2.0.0-beta-2e17b82-20220704 → 2.0.0-beta-e46656e-20220706
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/ActionBtn/ActionBtn.js +1 -1
- package/components/ActionBtn/ActionBtn.js.map +1 -1
- package/components/Anchor/Anchor.js +1 -1
- package/components/Anchor/Anchor.js.map +1 -1
- package/components/Badge/Badge.js +1 -1
- package/components/Badge/Badge.js.map +1 -1
- package/components/Button/Button.js +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 +1 -1
- package/components/Icon/Icon.js.map +1 -1
- package/components/Paper/Paper.js +1 -1
- package/components/Paper/Paper.js.map +1 -1
- package/components/Radio/Radio.js +1 -1
- package/components/Radio/Radio.js.map +1 -1
- package/components/Select/Select.js +1 -1
- package/components/Select/Select.js.map +1 -1
- package/components/Spinner/Spinner.js +1 -1
- package/components/Spinner/Spinner.js.map +1 -1
- package/components/Text/Text.js +1 -1
- package/components/Text/Text.js.map +1 -1
- package/dts/index.d.ts +4 -3
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/package.json +1 -1
- package/theme/index.js +1 -1
- package/theme/index.js.map +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{useClassname as s}from'../../hooks/useClassname.js';import{Icon as a}from'../Icon/Icon.js';import'../Icon/icons.js';import{Root as o}from'./style.js';import{jsxs as e,jsx as i}from'react/jsx-runtime';function n(t){var{icon:c,disabled:r=!1,onClick:m,children:l,className:d,active:p,style:j}=t;var f=s(n.displayName,d);return e(o,{className:f,style:j,disabled:r,active:p,onClick:m,children:[c&&i(a,{size:16,name:c}),l]})}n.displayName='ActionBtn';export{n as ActionBtn};
|
|
2
2
|
//# sourceMappingURL=ActionBtn.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionBtn.js","sources":["../../../../src/components/ActionBtn/ActionBtn.tsx"],"sourcesContent":["import { Display } from '../../mixins/display'\nimport { BaseProps } from '../../shared/interfaces'\nimport { Icon, IconNames } from './../Icon'\nimport * as Styled from './style'\n\nexport interface ActionBtnProps extends BaseProps, Display {\n /** Icon name (for inner Icon component) */\n icon?: keyof typeof IconNames\n disabled?: boolean\n active?: boolean\n onClick?(): void\n /**\n * Children react node\n */\n children?: React.ReactNode\n}\n\nActionBtn.displayName = 'ActionBtn'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Display`](#/Миксины)\n */\nexport function ActionBtn({ icon, disabled = false, onClick, children, className, active, style }: ActionBtnProps) {\n return (\n <Styled.Root className={
|
|
1
|
+
{"version":3,"file":"ActionBtn.js","sources":["../../../../src/components/ActionBtn/ActionBtn.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport { Display } from '../../mixins/display'\nimport { BaseProps } from '../../shared/interfaces'\nimport { Icon, IconNames } from './../Icon'\nimport * as Styled from './style'\n\nexport interface ActionBtnProps extends BaseProps, Display {\n /** Icon name (for inner Icon component) */\n icon?: keyof typeof IconNames\n disabled?: boolean\n active?: boolean\n onClick?(): void\n /**\n * Children react node\n */\n children?: React.ReactNode\n}\n\nActionBtn.displayName = 'ActionBtn'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Display`](#/Миксины)\n */\nexport function ActionBtn({ icon, disabled = false, onClick, children, className, active, style }: ActionBtnProps) {\n const _className = useClassname(ActionBtn.displayName, className)\n\n return (\n <Styled.Root className={_className} style={style} disabled={disabled} active={active} onClick={onClick}>\n {icon && <Icon size={16} name={icon} />}\n {children}\n </Styled.Root>\n )\n}\n"],"names":["ActionBtn","_ref","icon","disabled","onClick","children","className","active","style","_className","useClassname","displayName","_jsxs","Styled.Root","_jsx","Icon","size","name"],"mappings":"+MAyBO,SAASA,EAAmGC,GAAA,IAAzFC,KAAEA,EAAFC,SAAQA,GAAW,EAAnBC,QAA0BA,EAA1BC,SAAmCA,EAAnCC,UAA6CA,EAA7CC,OAAwDA,EAAxDC,MAAgEA,GAAyBP,EACjH,IAAMQ,EAAaC,EAAaV,EAAUW,YAAaL,GAEvD,OACEM,EAACC,EAAD,CAAaP,UAAWG,EAAYD,MAAOA,EAAOL,SAAUA,EAAUI,OAAQA,EAAQH,QAASA,EAA/FC,SACGH,CAAAA,GAAQY,EAACC,EAAD,CAAMC,KAAM,GAAIC,KAAMf,IAC9BG,KAbPL,EAAUW,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/esm/objectSpread2';import s from'@babel/runtime/helpers/esm/objectWithoutProperties';import{Link as i}from'react-router-dom';import{
|
|
1
|
+
import e from'@babel/runtime/helpers/esm/objectSpread2';import s from'@babel/runtime/helpers/esm/objectWithoutProperties';import{Link as i}from'react-router-dom';import{useClassname as r}from'../../hooks/useClassname.js';import{Root as a}from'./style.js';import{jsx as o}from'react/jsx-runtime';var l=["as","to","href","wrapper","className","style","children","content","pseudo","underline","color","display","size","sizeXS","sizeS","sizeM","sizeL","sizeXL"];function p(z){var{as:n,to:t,href:d,wrapper:m,className:c,style:u,children:h,content:y,pseudo:L,underline:S,color:f,display:X,size:b,sizeXS:N,sizeS:v,sizeM:M,sizeL:j,sizeXL:w}=z,k=s(z,l);var x=r(p.displayName,c);var A;A='div'!==n||X?X:'block';var C={};return y&&(C=e(e({},C),{},{dangerouslySetInnerHTML:{__html:y}})),o(a,e(n?e(e({as:n,pseudo:L,wrapper:m,underline:S,href:d,className:x,style:u,color:f,size:b,display:A,sizeXS:N,sizeS:v,sizeM:M,sizeL:j,sizeXL:w},k),C):L?e(e({as:"div",pseudo:L,wrapper:m,underline:S,href:d,className:x,color:f,size:b,display:A,sizeXS:N,sizeS:v,sizeM:M,sizeL:j,sizeXL:w},k),C):t?e(e({as:i,to:t,pseudo:L,wrapper:m,underline:S,className:x,color:f,size:b,display:A,sizeXS:N,sizeS:v,sizeM:M,sizeL:j,sizeXL:w},k),C):e(e({as:"a",href:d,pseudo:L,wrapper:m,underline:S,className:x,color:f,size:b,display:A,sizeXS:N,sizeS:v,sizeM:M,sizeL:j,sizeXL:w},C),k),{},{children:h}))}p.displayName='Anchor',p.defaultProps={display:'inline-block'};export{p as Anchor};
|
|
2
2
|
//# sourceMappingURL=Anchor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Anchor.js","sources":["../../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import { Link } from 'react-router-dom'\nimport { BaseProps } from '../../shared/interfaces'\nimport { ResponsiveProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport * as Styled from './style'\n\nexport interface AnchorProps extends BaseProps, Color, ResponsiveProperty<'size'>, Display {\n /**\n * Custom CSS class name\n */\n as?: 'div' | 'span' | 'a' | typeof Link\n /**\n * React router link to\n */\n to?: string\n /**\n * Link href\n */\n href?: string\n /**\n * Is display inline\n * */\n wrapper?: boolean\n /**\n * Pseudo link has dashed bottom border\n * */\n pseudo?: boolean\n /**\n * If link should be underlined\n * */\n underline?: boolean\n /**\n * Primary content\n */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Primary content\n */\n content?: string\n /**\n * Onclick handler\n */\n onClick?: () => void\n target?: string\n rel?: string\n}\n\nAnchor.displayName = 'Anchor'\nAnchor.defaultProps = {\n display: 'inline-block',\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`ResponsiveProperty<'size'>`](#/Миксины)\n * - [`Display`](#/Миксины)\n */\nexport function Anchor(props: typeof Anchor.defaultProps & AnchorProps) {\n const {\n as,\n to,\n href,\n wrapper,\n className,\n style,\n children,\n content,\n pseudo,\n underline,\n color,\n display,\n size,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n ...rest\n } = props\n\n let _display: Display['display']\n\n if (as === 'div' && !display) _display = 'block'\n else _display = display\n\n let contentProps = {}\n\n if (content) {\n contentProps = {\n ...contentProps,\n dangerouslySetInnerHTML: { __html: content },\n }\n }\n\n if (as)\n return (\n <Styled.Root\n as={as}\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n href={href}\n className={
|
|
1
|
+
{"version":3,"file":"Anchor.js","sources":["../../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import { Link } from 'react-router-dom'\nimport { useClassname } from 'hooks/useClassname'\nimport { BaseProps } from '../../shared/interfaces'\nimport { ResponsiveProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport * as Styled from './style'\n\nexport interface AnchorProps extends BaseProps, Color, ResponsiveProperty<'size'>, Display {\n /**\n * Custom CSS class name\n */\n as?: 'div' | 'span' | 'a' | typeof Link\n /**\n * React router link to\n */\n to?: string\n /**\n * Link href\n */\n href?: string\n /**\n * Is display inline\n * */\n wrapper?: boolean\n /**\n * Pseudo link has dashed bottom border\n * */\n pseudo?: boolean\n /**\n * If link should be underlined\n * */\n underline?: boolean\n /**\n * Primary content\n */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Primary content\n */\n content?: string\n /**\n * Onclick handler\n */\n onClick?: () => void\n target?: string\n rel?: string\n}\n\nAnchor.displayName = 'Anchor'\nAnchor.defaultProps = {\n display: 'inline-block',\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`ResponsiveProperty<'size'>`](#/Миксины)\n * - [`Display`](#/Миксины)\n */\nexport function Anchor(props: typeof Anchor.defaultProps & AnchorProps) {\n const {\n as,\n to,\n href,\n wrapper,\n className,\n style,\n children,\n content,\n pseudo,\n underline,\n color,\n display,\n size,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n ...rest\n } = props\n\n const _className = useClassname(Anchor.displayName, className)\n\n let _display: Display['display']\n\n if (as === 'div' && !display) _display = 'block'\n else _display = display\n\n let contentProps = {}\n\n if (content) {\n contentProps = {\n ...contentProps,\n dangerouslySetInnerHTML: { __html: content },\n }\n }\n\n if (as)\n return (\n <Styled.Root\n as={as}\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n href={href}\n className={_className}\n style={style}\n color={color}\n size={size}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n {...rest}\n {...contentProps}\n >\n {children}\n </Styled.Root>\n )\n\n if (pseudo)\n return (\n <Styled.Root\n as='div'\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n href={href}\n className={_className}\n color={color}\n size={size}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n {...rest}\n {...contentProps}\n >\n {children}\n </Styled.Root>\n )\n else if (to)\n return (\n <Styled.Root\n as={Link}\n to={to}\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n className={_className}\n color={color}\n size={size}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n {...rest}\n {...contentProps}\n >\n {children}\n </Styled.Root>\n )\n else\n return (\n <Styled.Root\n as='a'\n href={href}\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n className={_className}\n color={color}\n size={size}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n {...contentProps}\n {...rest}\n >\n {children}\n </Styled.Root>\n )\n}\n"],"names":["Anchor","props","as","to","href","wrapper","className","style","children","content","pseudo","underline","color","display","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","rest","_excluded","_className","useClassname","displayName","_display","contentProps","dangerouslySetInnerHTML","__html","_jsx","Styled.Root","_objectSpread","Link","defaultProps"],"mappings":"2cAgEO,SAASA,EAAOC,GACrB,IAAMC,GACJA,EADIC,GAEJA,EAFIC,KAGJA,EAHIC,QAIJA,EAJIC,UAKJA,EALIC,MAMJA,EANIC,SAOJA,EAPIC,QAQJA,EARIC,OASJA,EATIC,UAUJA,EAVIC,MAWJA,EAXIC,QAYJA,EAZIC,KAaJA,EAbIC,OAcJA,EAdIC,MAeJA,EAfIC,MAgBJA,EAhBIC,MAiBJA,EAjBIC,OAkBJA,GAEElB,EADCmB,IACDnB,EApBJoB,GAsBA,IAAMC,EAAaC,EAAavB,EAAOwB,YAAalB,GAEpD,IAAImB,EAGCA,EADM,QAAPvB,GAAiBW,EACLA,EADyB,QAGzC,IAAIa,EAAe,GASnB,OAPIjB,IACFiB,SACKA,GADO,GAAA,CAEVC,wBAAyB,CAAEC,OAAQnB,MAMnCoB,EAACC,EAADC,EAFA7B,EAEA6B,EAAAA,EAAA,CACE7B,GAAIA,EACJQ,OAAQA,EACRL,QAASA,EACTM,UAAWA,EACXP,KAAMA,EACNE,UAAWgB,EACXf,MAAOA,EACPK,MAAOA,EACPE,KAAMA,EACND,QAASY,EACTV,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,GACJC,GACAM,GAMNhB,EAEAqB,EAAAA,EAAA,CACE7B,GAAG,MACHQ,OAAQA,EACRL,QAASA,EACTM,UAAWA,EACXP,KAAMA,EACNE,UAAWgB,EACXV,MAAOA,EACPE,KAAMA,EACND,QAASY,EACTV,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,GACJC,GACAM,GAKDvB,EAEL4B,EAAAA,EAAA,CACE7B,GAAI8B,EACJ7B,GAAIA,EACJO,OAAQA,EACRL,QAASA,EACTM,UAAWA,EACXL,UAAWgB,EACXV,MAAOA,EACPE,KAAMA,EACND,QAASY,EACTV,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,GACJC,GACAM,GAONK,EAAAA,EAAA,CACE7B,GAAG,IACHE,KAAMA,EACNM,OAAQA,EACRL,QAASA,EACTM,UAAWA,EACXL,UAAWgB,EACXV,MAAOA,EACPE,KAAMA,EACND,QAASY,EACTV,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,GACJO,GACAN,GAvFN,GAAA,CAAAZ,SAmBGA,KAxETR,EAAOwB,YAAc,SACrBxB,EAAOiC,aAAe,CACpBpB,QAAS"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/esm/objectSpread2';import
|
|
1
|
+
import e from'@babel/runtime/helpers/esm/objectSpread2';import s from'@babel/runtime/helpers/esm/objectWithoutProperties';import{useClassname as r}from'../../hooks/useClassname.js';import{Text as t}from'../Text/Text.js';import{Root as o}from'./style.js';import{jsx as a}from'react/jsx-runtime';var i=["children","content","className","textProps","round","display"];function m(n){var{children:l,content:p,className:d,textProps:c,round:u,display:h="inline-block"}=n,x=s(n,i);var b=r(m.displayName,d);return a(o,e(e({round:u,display:h,className:b},x),{},{children:a(t,e(e({className:"text",size:u?10:12,weight:u?'bolder':'normal',lineHeight:"s",content:'string'==typeof p?p:void 0},c),{},{children:l||p}))}))}m.displayName='Badge';export{m as Badge};
|
|
2
2
|
//# sourceMappingURL=Badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport { BaseProps } from '../../shared/interfaces'\nimport { Text, TextProps } from './../Text/Text'\nimport * as Styled from './style'\n\nexport interface BadgeProps extends BaseProps, Color, Display {\n /**\n * Children react node\n */\n children?: React.ReactNode\n content?: string | React.ReactNode\n textProps?: TextProps\n /** Make badge round */\n round?: string\n}\n\nBadge.displayName = 'Badge'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Display`](#/Миксины)\n */\nexport function Badge({
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport { BaseProps } from '../../shared/interfaces'\nimport { Text, TextProps } from './../Text/Text'\nimport * as Styled from './style'\n\nexport interface BadgeProps extends BaseProps, Color, Display {\n /**\n * Children react node\n */\n children?: React.ReactNode\n content?: string | React.ReactNode\n textProps?: TextProps\n /** Make badge round */\n round?: string\n}\n\nBadge.displayName = 'Badge'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Display`](#/Миксины)\n */\nexport function Badge({\n children,\n content,\n className,\n textProps,\n round,\n display = 'inline-block',\n ...restProps\n}: BadgeProps) {\n const _className = useClassname(Badge.displayName, className)\n return (\n <Styled.Root round={round} display={display} className={_className} {...restProps}>\n <Text\n className='text'\n size={round ? 10 : 12}\n weight={round ? 'bolder' : 'normal'}\n lineHeight='s'\n content={typeof content === 'string' ? content : undefined}\n {...textProps}\n >\n {children || content}\n </Text>\n </Styled.Root>\n )\n}\n"],"names":["Badge","_ref","children","content","className","textProps","round","display","restProps","_objectWithoutProperties","_excluded","_className","useClassname","displayName","_jsx","Styled.Root","_objectSpread","Text","size","weight","lineHeight","undefined"],"mappings":"6WA0BO,SAASA,EAQDC,GAAA,IAROC,SACpBA,EADoBC,QAEpBA,EAFoBC,UAGpBA,EAHoBC,UAIpBA,EAJoBC,MAKpBA,EALoBC,QAMpBA,EAAU,gBAEGN,EADVO,EACUC,EAAAR,EAAAS,GACb,IAAMC,EAAaC,EAAaZ,EAAMa,YAAaT,GACnD,OACEU,EAACC,EAADC,EAAAA,EAAA,CAAaV,MAAOA,EAAOC,QAASA,EAASH,UAAWO,GAAgBH,GAAxE,GAAA,CAAAN,SACEY,EAACG,EAADD,EAAAA,EAAA,CACEZ,UAAU,OACVc,KAAMZ,EAAQ,GAAK,GACnBa,OAAQb,EAAQ,SAAW,SAC3Bc,WAAW,IACXjB,QAA4B,iBAAZA,EAAuBA,OAAUkB,GAC7ChB,GANN,GAAA,CAAAH,SAQGA,GAAYC,QA5BrBH,EAAMa,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/esm/objectSpread2';import r from'@babel/runtime/helpers/esm/objectWithoutProperties';import{Link as
|
|
1
|
+
import e from'@babel/runtime/helpers/esm/objectSpread2';import r from'@babel/runtime/helpers/esm/objectWithoutProperties';import{Link as a}from'react-router-dom';import{useClassname as t}from'../../hooks/useClassname.js';import{Root as s,Content as o}from'./style.js';import{PROPS_BY_SIZE as i,PRESETS as n}from'./default.js';import{jsxs as l,jsx as m}from'react/jsx-runtime';var d=["children","className","disabled","href","to","as","target","onClick","ref","icon","type","innerRef"];function c(p){var{children:f,className:u,disabled:b,href:y,to:h,as:v,target:j,onClick:N,ref:C,icon:g,type:k,innerRef:x}=p,P=r(p,d);var R=v||(b?'button':y?'a':h?a:'button');var S='a'!==R||b?{}:{href:y||h,target:j};var _='string'==typeof R||b?{}:{to:h||y};var z=P.size&&!P.round&&i[P.size]||{};var B=(e=>e.primary?n.primary:e.secondary?n.secondary:n.default)(p);var E=t(c.displayName,u);return l(s,e(e(e(e(e(e({as:R,className:E,type:'button'===R?k:void 0,onClick:b||P.loading?void 0:N},z),S),_),B),P),{},{disabled:b,ref:C||x,children:[g&&m("span",{className:"icon",children:g}),f&&m(o,{className:"".concat(E,"__content"),children:f})]}))}c.defaultProps={size:'m',rounded:!0,display:'inline-flex',type:'button'},c.displayName='Button';export{c as Button};
|
|
2
2
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Link } from 'react-router-dom'\nimport { Display } from '../../mixins/display'\nimport { ResponsiveProperty } from '../../mixins/responsive-property'\nimport { BaseProps, Tooltiped } from '../../shared/interfaces'\nimport { Color } from '../../mixins/color'\nimport { Anchor } from '../../components/Anchor'\nimport * as Styled from './style'\nimport { PRESETS, PROPS_BY_SIZE } from './default'\n\nexport interface ButtonProps\n extends BaseProps,\n Tooltiped,\n Display,\n Color,\n Color<'fontColor'>,\n ResponsiveProperty<'padding'>,\n ResponsiveProperty<'paddingTop'>,\n ResponsiveProperty<'paddingRight'>,\n ResponsiveProperty<'paddingBottom'>,\n ResponsiveProperty<'paddingLeft'>,\n ResponsiveProperty<'margin'>,\n ResponsiveProperty<'marginTop'>,\n ResponsiveProperty<'marginRight'>,\n ResponsiveProperty<'marginBottom'>,\n ResponsiveProperty<'marginLeft'>,\n ResponsiveProperty<'fontSize'>,\n ResponsiveProperty<'fluid', boolean>,\n ResponsiveProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>,\n ResponsiveProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {\n /**\n * Node type\n */\n as?: 'div' | 'span' | 'a' | 'button' | typeof Link | typeof Anchor\n target?: string\n rel?: string\n /**\n * Link href\n */\n href?: string\n /**\n * React router link to\n */\n to?: string\n /**\n * Type for button element\n */\n type?: 'button' | 'submit' | 'reset'\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Basic button\n */\n basic?: boolean\n /**\n * Disabled\n */\n disabled?: boolean\n /**\n * Is primary\n */\n primary?: boolean\n /**\n * Is secondary\n */\n secondary?: boolean\n /**\n * Is inverted\n */\n inverted?: boolean\n /**\n * Is rounded\n */\n rounded?: boolean\n /**\n * Is round (in a shape of circle)\n */\n round?: boolean\n /**\n * Indicates if there should not be any margin\n * between this button and the previous one\n */\n noSpacing?: boolean\n /**\n * Is in loading state\n */\n loading?: boolean\n /**\n * Button icon\n */\n icon?: React.ReactNode\n /** On click callback */\n onClick?: () => void\n /** Function to make ref */\n ref?: React.LegacyRef<HTMLDivElement>\n /**\n * Size\n */\n size?: 'l' | 'm' | 's' | 'xs'\n}\n\nButton.defaultProps = {\n size: 'm',\n rounded: true,\n display: 'inline-flex',\n type: 'button',\n}\n\nButton.displayName = 'Button'\n\nconst extractPresetByProps = (props: ButtonProps): Partial<ButtonProps> => {\n if (props.primary) return PRESETS.primary\n if (props.secondary) return PRESETS.secondary\n return PRESETS.default\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`Tooltiped`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'fontColor'>`](#/Миксины)\n * - [`ResponsiveProperty<'padding'>`](#/Миксины)\n * - [`ResponsiveProperty<'paddingTop'>`](#/Миксины)\n * - [`ResponsiveProperty<'paddingRight'>`](#/Миксины)\n * - [`ResponsiveProperty<'paddingBottom'>`](#/Миксины)\n * - [`ResponsiveProperty<'paddingLeft'>`](#/Миксины)\n * - [`ResponsiveProperty<'margin'>`](#/Миксины)\n * - [`ResponsiveProperty<'marginTop'>`](#/Миксины)\n * - [`ResponsiveProperty<'marginRight'>`](#/Миксины)\n * - [`ResponsiveProperty<'marginBottom'>`](#/Миксины)\n * - [`ResponsiveProperty<'marginLeft'>`](#/Миксины)\n * - [`ResponsiveProperty<'fontSize'>`](#/Миксины)\n * - [`ResponsiveProperty<'fluid', boolean>`](#/Миксины)\n * - [`ResponsiveProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>`](#/Миксины)\n * - [`ResponsiveProperty<'height', 'l' | 'm' | 's' | 'xs' | number>`](#/Миксины)\n */\nexport function Button(props: ButtonProps) {\n const { children, disabled, href, to, as, target, onClick, ref, icon, type, innerRef, ...restProps }
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Link } from 'react-router-dom'\nimport { useClassname } from 'hooks/useClassname'\nimport { Display } from '../../mixins/display'\nimport { ResponsiveProperty } from '../../mixins/responsive-property'\nimport { BaseProps, Tooltiped } from '../../shared/interfaces'\nimport { Color } from '../../mixins/color'\nimport { Anchor } from '../../components/Anchor'\nimport * as Styled from './style'\nimport { PRESETS, PROPS_BY_SIZE } from './default'\n\nexport interface ButtonProps\n extends BaseProps,\n Tooltiped,\n Display,\n Color,\n Color<'fontColor'>,\n ResponsiveProperty<'padding'>,\n ResponsiveProperty<'paddingTop'>,\n ResponsiveProperty<'paddingRight'>,\n ResponsiveProperty<'paddingBottom'>,\n ResponsiveProperty<'paddingLeft'>,\n ResponsiveProperty<'margin'>,\n ResponsiveProperty<'marginTop'>,\n ResponsiveProperty<'marginRight'>,\n ResponsiveProperty<'marginBottom'>,\n ResponsiveProperty<'marginLeft'>,\n ResponsiveProperty<'fontSize'>,\n ResponsiveProperty<'fluid', boolean>,\n ResponsiveProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>,\n ResponsiveProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {\n /**\n * Node type\n */\n as?: 'div' | 'span' | 'a' | 'button' | typeof Link | typeof Anchor\n target?: string\n rel?: string\n /**\n * Link href\n */\n href?: string\n /**\n * React router link to\n */\n to?: string\n /**\n * Type for button element\n */\n type?: 'button' | 'submit' | 'reset'\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Basic button\n */\n basic?: boolean\n /**\n * Disabled\n */\n disabled?: boolean\n /**\n * Is primary\n */\n primary?: boolean\n /**\n * Is secondary\n */\n secondary?: boolean\n /**\n * Is inverted\n */\n inverted?: boolean\n /**\n * Is rounded\n */\n rounded?: boolean\n /**\n * Is round (in a shape of circle)\n */\n round?: boolean\n /**\n * Indicates if there should not be any margin\n * between this button and the previous one\n */\n noSpacing?: boolean\n /**\n * Is in loading state\n */\n loading?: boolean\n /**\n * Button icon\n */\n icon?: React.ReactNode\n /** On click callback */\n onClick?: () => void\n /** Function to make ref */\n ref?: React.LegacyRef<HTMLDivElement>\n /**\n * Size\n */\n size?: 'l' | 'm' | 's' | 'xs'\n}\n\nButton.defaultProps = {\n size: 'm',\n rounded: true,\n display: 'inline-flex',\n type: 'button',\n}\n\nButton.displayName = 'Button'\n\nconst extractPresetByProps = (props: ButtonProps): Partial<ButtonProps> => {\n if (props.primary) return PRESETS.primary\n if (props.secondary) return PRESETS.secondary\n return PRESETS.default\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`Tooltiped`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'fontColor'>`](#/Миксины)\n * - [`ResponsiveProperty<'padding'>`](#/Миксины)\n * - [`ResponsiveProperty<'paddingTop'>`](#/Миксины)\n * - [`ResponsiveProperty<'paddingRight'>`](#/Миксины)\n * - [`ResponsiveProperty<'paddingBottom'>`](#/Миксины)\n * - [`ResponsiveProperty<'paddingLeft'>`](#/Миксины)\n * - [`ResponsiveProperty<'margin'>`](#/Миксины)\n * - [`ResponsiveProperty<'marginTop'>`](#/Миксины)\n * - [`ResponsiveProperty<'marginRight'>`](#/Миксины)\n * - [`ResponsiveProperty<'marginBottom'>`](#/Миксины)\n * - [`ResponsiveProperty<'marginLeft'>`](#/Миксины)\n * - [`ResponsiveProperty<'fontSize'>`](#/Миксины)\n * - [`ResponsiveProperty<'fluid', boolean>`](#/Миксины)\n * - [`ResponsiveProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>`](#/Миксины)\n * - [`ResponsiveProperty<'height', 'l' | 'm' | 's' | 'xs' | number>`](#/Миксины)\n */\nexport function Button(props: ButtonProps) {\n const { children, className, disabled, href, to, as, target, onClick, ref, icon, type, innerRef, ...restProps } =\n props\n\n const _as = as || (disabled ? 'button' : href ? 'a' : to ? Link : 'button')\n const aProps = _as === 'a' && !disabled ? { href: href || to, target } : {}\n const linkProps = typeof _as !== 'string' && !disabled ? { to: to || href } : {}\n const propsBySize: Partial<ButtonProps> =\n restProps.size && !restProps.round ? PROPS_BY_SIZE[restProps.size] || {} : {}\n const presetProps: Partial<ButtonProps> = extractPresetByProps(props)\n const _className = useClassname(Button.displayName, className)\n\n return (\n <Styled.Root\n as={_as}\n className={_className}\n type={_as === 'button' ? type : undefined}\n onClick={disabled || restProps.loading ? undefined : onClick}\n {...propsBySize}\n {...aProps}\n {...linkProps}\n {...presetProps}\n {...restProps}\n disabled={disabled}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref={(ref || innerRef) as any}\n >\n {icon && <span className='icon'>{icon}</span>}\n {children && <Styled.Content className={`${_className}__content`}>{children}</Styled.Content>}\n </Styled.Root>\n )\n}\n"],"names":["Button","props","children","className","disabled","href","to","as","target","onClick","ref","icon","type","innerRef","restProps","_excluded","_as","Link","aProps","linkProps","propsBySize","size","round","PROPS_BY_SIZE","presetProps","primary","PRESETS","secondary","default","_className","useClassname","displayName","_jsxs","Styled.Root","_objectSpread","loading","_jsx","Styled.Content","concat","defaultProps","rounded","display"],"mappings":"qeA4IO,SAASA,EAAOC,GACrB,IAAMC,SAAEA,EAAFC,UAAYA,EAAZC,SAAuBA,EAAvBC,KAAiCA,EAAjCC,GAAuCA,EAAvCC,GAA2CA,EAA3CC,OAA+CA,EAA/CC,QAAuDA,EAAvDC,IAAgEA,EAAhEC,KAAqEA,EAArEC,KAA2EA,EAA3EC,SAAiFA,GACrFZ,EADkGa,IAClGb,EADFc,GAGA,IAAMC,EAAMT,IAAOH,EAAW,SAAWC,EAAO,IAAMC,EAAKW,EAAO,UAClE,IAAMC,EAAiB,MAARF,GAAgBZ,EAA0C,GAA/B,CAAEC,KAAMA,GAAQC,EAAIE,OAAAA,GAC9D,IAAMW,EAA2B,iBAARH,GAAqBZ,EAAgC,GAArB,CAAEE,GAAIA,GAAMD,GACrE,IAAMe,EACJN,EAAUO,OAASP,EAAUQ,OAAQC,EAAcT,EAAUO,OAAc,GAC7E,IAAMG,EArCsBvB,CAAAA,GACxBA,EAAMwB,QAAgBC,EAAQD,QAC9BxB,EAAM0B,UAAkBD,EAAQC,UAC7BD,EAAQE,QAHa3B,CAqCmCA,GAC/D,IAAM4B,EAAaC,EAAa9B,EAAO+B,YAAa5B,GAEpD,OACE6B,EAACC,EAADC,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CACE3B,GAAIS,EACJb,UAAW0B,EACXjB,KAAc,WAARI,EAAmBJ,OAAAA,EACzBH,QAASL,GAAYU,EAAUqB,eAAsB1B,GACjDW,GACAF,GACAC,GACAK,GACAV,GATN,GAAA,CAUEV,SAAUA,EAEVM,IAAMA,GAAOG,EAZfX,SAAA,CAcGS,GAAQyB,EAAA,OAAA,CAAMjC,UAAU,OAAhBD,SAAwBS,IAChCT,GAAYkC,EAACC,EAAD,CAAgBlC,UAAS,GAAAmC,OAAKT,EAA9B,aAAA3B,SAAsDA,QAjEzEF,EAAOuC,aAAe,CACpBlB,KAAM,IACNmB,WACAC,QAAS,cACT7B,KAAM,UAGRZ,EAAO+B,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import i,{keyframes as n,css as t}from'styled-components';import r from'tinycolor2';import{property as o,responsiveProperty as a}from'../../mixins/responsive-property.js';import{color as e}from'../../mixins/color.js';import{display as d}from'../../mixins/display.js';import{chooseWidthValue as g}from'./helpers.js';var p={l:52,m:48,s:40,xs:32};var l=n(["0%{background-position:0 0;}100%{background-position:50px 50px;}"]);var s=t(["background-image:linear-gradient( -45deg,rgba(255,255,255,0.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.2) 75%,transparent 75%,transparent );background-size:25px 25px;animation:"," 2s linear infinite;cursor:progress;"],l);var m=t(["border-radius:",";"],(i=>i.theme.borderRadius));var h=t(["cursor:not-allowed;background-color:",";color:",";"],(i=>i.theme.colors.mercury),(i=>i.theme.colors.silver));var c=t(["&:active{box-shadow:inset 0 4px 0px 0px rgba(0,0,0,0.14);}&:hover{","}",""],(i=>i.color&&i.fontColor?t(["color:",";background-color:",";"],i.fontColor,r(i.theme.colors[i.color]).saturate(-5).lighten(-8).toString()):null),(i=>i.inverted&&i.fontColor&&i.color?t(["&:not(:hover){border:1px solid ",";}&:hover{border:1px solid ",";}"],i.theme.colors[i.color],i.theme.colors[i.color]):null));var u=function(i,n){var r=arguments.length>1&&void 0!==n?n:'px';return t(["width:","",";height:","",";font-size:","",";line-height:","",";padding:","",";"],i,r,i,r,.44*i,r,.44*i,r,.28*i,r)};var f=()=>t(["min-width:initial;width:100%;"]);var L=i.span.withConfig({componentId:"fox-ui__sc-16o31r2-0"})(["display:inline-block;line-height:1;vertical-align:middle;"]);var S=i.div.withConfig({shouldForwardProp:i=>['children','className','style','target','to','href','ref','onClick','type','onMouseEnter','onMouseLeave'].includes(i)}).withConfig({componentId:"fox-ui__sc-16o31r2-1"})(["-webkit-box-sizing:border-box !important;-moz-box-sizing:border-box !important;-ms-box-sizing:border-box !important;box-sizing:border-box !important;position:relative;overflow:hidden;border:none;cursor:pointer;user-select:none;font-weight:600;padding-top:0;padding-bottom:0;text-decoration:none;justify-content:center;align-items:center;text-align:center;transition:0.2s all;white-space:nowrap;appearance:none;vertical-align:top;& + &{margin-left:1em;","}"," "," "," "," "," "," &:focus{outline:0;}"," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ",""],(i=>i.noSpacing?t(["margin-left:auto;"]):null),(i=>i.display?d(i.display):null),(i=>i.loading?s:null),(i=>i.rounded?m:null),(i=>i.color?e(i.color,i.inverted?'color':'background-color'):null),(i=>i.fontColor?e(i.fontColor,i.inverted?'background-color':'color'):null),(i=>i.round?t(["border-radius:100%;letter-spacing:0.5px;& > *{display:inline-block !important;vertical-align:middle !important;}.icon{vertical-align:middle;& > *{vertical-align:middle !important;}svg{vertical-align:middle;}}"]):t([".icon{display:inline-block;font-size:inherit;line-height:0;vertical-align:middle;& > *{vertical-align:baseline !important;}& + ","{margin-left:10px;}}"],L)),(i=>i.padding?o(i.padding,'padding'):null),(i=>i.paddingTop?o(i.paddingTop,'padding-top'):null),(i=>i.paddingRight?o(i.paddingRight,'padding-right'):null),(i=>i.paddingBottom?o(i.paddingBottom,'padding-bottom'):null),(i=>i.paddingLeft?o(i.paddingLeft,'padding-left'):null),(i=>i.margin?o(i.margin,'margin'):null),(i=>i.marginTop?o(i.marginTop,'margin-top'):null),(i=>i.marginRight?o(i.marginRight,'margin-right'):null),(i=>i.marginBottom?o(i.marginBottom,'margin-bottom'):null),(i=>i.marginLeft?o(i.marginLeft,'margin-left'):null),(i=>{var{paddingXS:n,paddingS:t,paddingM:r,paddingL:o,paddingXL:e}=i;return a({sizes:{paddingXS:n,paddingS:t,paddingM:r,paddingL:o,paddingXL:e},cssProperty:'padding'})}),(i=>{var{paddingTopXS:n,paddingTopS:t,paddingTopM:r,paddingTopL:o,paddingTopXL:e}=i;return a({sizes:{paddingTopXS:n,paddingTopS:t,paddingTopM:r,paddingTopL:o,paddingTopXL:e},cssProperty:'padding-top'})}),(i=>{var{paddingRightXS:n,paddingRightS:t,paddingRightM:r,paddingRightL:o,paddingRightXL:e}=i;return a({sizes:{paddingRightXS:n,paddingRightS:t,paddingRightM:r,paddingRightL:o,paddingRightXL:e},cssProperty:'padding-right'})}),(i=>{var{paddingBottomXS:n,paddingBottomS:t,paddingBottomM:r,paddingBottomL:o,paddingBottomXL:e}=i;return a({sizes:{paddingBottomXS:n,paddingBottomS:t,paddingBottomM:r,paddingBottomL:o,paddingBottomXL:e},cssProperty:'padding-bottom'})}),(i=>{var{paddingLeftXS:n,paddingLeftS:t,paddingLeftM:r,paddingLeftL:o,paddingLeftXL:e}=i;return a({sizes:{paddingLeftXS:n,paddingLeftS:t,paddingLeftM:r,paddingLeftL:o,paddingLeftXL:e},cssProperty:'padding-left'})}),(i=>{var{marginXS:n,marginS:t,marginM:r,marginL:o,marginXL:e}=i;return a({sizes:{marginXS:n,marginS:t,marginM:r,marginL:o,marginXL:e},cssProperty:'margin'})}),(i=>{var{marginTopXS:n,marginTopS:t,marginTopM:r,marginTopL:o,marginTopXL:e}=i;return a({sizes:{marginTopXS:n,marginTopS:t,marginTopM:r,marginTopL:o,marginTopXL:e},cssProperty:'margin-top'})}),(i=>{var{marginRightXS:n,marginRightS:t,marginRightM:r,marginRightL:o,marginRightXL:e}=i;return a({sizes:{marginRightXS:n,marginRightS:t,marginRightM:r,marginRightL:o,marginRightXL:e},cssProperty:'margin-right'})}),(i=>{var{marginBottomXS:n,marginBottomS:t,marginBottomM:r,marginBottomL:o,marginBottomXL:e}=i;return a({sizes:{marginBottomXS:n,marginBottomS:t,marginBottomM:r,marginBottomL:o,marginBottomXL:e},cssProperty:'margin-bottom'})}),(i=>{var{marginLeftXS:n,marginLeftS:t,marginLeftM:r,marginLeftL:o,marginLeftXL:e}=i;return a({sizes:{marginLeftXS:n,marginLeftS:t,marginLeftM:r,marginLeftL:o,marginLeftXL:e},cssProperty:'margin-left'})}),(i=>i.fontSize?o(i.fontSize,'font-size'):null),(i=>{var{fontSizeXS:n,fontSizeS:t,fontSizeM:r,fontSizeL:o,fontSizeXL:e}=i;return a({sizes:{fontSizeXS:n,fontSizeS:t,fontSizeM:r,fontSizeL:o,fontSizeXL:e},cssProperty:'font-size'})}),(i=>i.size?o(g(i.size),'width'):null),(i=>i.height?o(i.height,'height'):null),(i=>{var{heightXS:n,heightS:t,heightM:r,heightL:o,heightXL:e}=i;return a({sizes:{heightXS:n,heightS:t,heightM:r,heightL:o,heightXL:e},cssProperty:'height'})}),(i=>i.width?o(g(i.width),'width'):null),(i=>{var{widthXS:n,widthS:t,widthM:r,widthL:o,widthXL:e}=i;return a({sizes:{widthXS:n,widthS:t,widthM:r,widthL:o,widthXL:e},cssProperty:'width',customSizeHandler:g})}),(i=>i.round&&i.size?o('string'==typeof i.size&&p[i.size]?p[i.size]:i.size,u):null),(i=>i.fluid?o(i.fluid,f):null),(i=>{var{fluidXS:n,fluidS:t,fluidM:r,fluidL:o,fluidXL:e}=i;return a({sizes:{fluidXS:n,fluidS:t,fluidM:r,fluidL:o,fluidXL:e},cssProperty:f})}),(i=>i.disabled?h:null),(i=>i.disabled||i.loading?null:c));export{L as Content,S as Root};
|
|
1
|
+
import i,{keyframes as n,css as t}from'styled-components';import r from'tinycolor2';import{property as o,responsiveProperty as a}from'../../mixins/responsive-property.js';import{color as e}from'../../mixins/color.js';import{display as d}from'../../mixins/display.js';import{chooseWidthValue as g}from'./helpers.js';var p={l:52,m:48,s:40,xs:32};var l=n(["0%{background-position:0 0;}100%{background-position:50px 50px;}"]);var s=t(["background-image:linear-gradient( -45deg,rgba(255,255,255,0.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.2) 75%,transparent 75%,transparent );background-size:25px 25px;animation:"," 2s linear infinite;cursor:progress;"],l);var m=t(["border-radius:",";"],(i=>i.theme.borderRadius));var h=t(["cursor:not-allowed;background-color:",";color:",";"],(i=>i.theme.colors.mercury),(i=>i.theme.colors.silver));var c=t(["&:active{box-shadow:inset 0 4px 0px 0px rgba(0,0,0,0.14);}&:hover{","}",""],(i=>i.color&&i.fontColor?t(["color:",";background-color:",";"],i.fontColor,r(i.theme.colors[i.color]).saturate(-5).lighten(-8).toString()):null),(i=>(i.inverted||i.basic)&&i.fontColor&&i.color?t(["&:not(:hover){border:1px solid ",";}&:hover{border:1px solid ",";}"],i.theme.colors[i.color],i.theme.colors[i.color]):null));var u=function(i,n){var r=arguments.length>1&&void 0!==n?n:'px';return t(["width:","",";height:","",";font-size:","",";line-height:","",";padding:","",";"],i,r,i,r,.44*i,r,.44*i,r,.28*i,r)};var f=()=>t(["min-width:initial;width:100%;"]);var L=i.span.withConfig({componentId:"fox-ui__sc-16o31r2-0"})(["display:inline-block;line-height:1;vertical-align:middle;"]);var S=i.div.withConfig({shouldForwardProp:i=>['children','className','style','target','to','href','ref','onClick','type','onMouseEnter','onMouseLeave'].includes(i)}).withConfig({componentId:"fox-ui__sc-16o31r2-1"})(["-webkit-box-sizing:border-box !important;-moz-box-sizing:border-box !important;-ms-box-sizing:border-box !important;box-sizing:border-box !important;position:relative;overflow:hidden;border:none;cursor:pointer;user-select:none;font-weight:600;padding-top:0;padding-bottom:0;text-decoration:none;justify-content:center;align-items:center;text-align:center;transition:0.2s all;white-space:nowrap;appearance:none;vertical-align:top;& + &{margin-left:1em;","}"," "," "," "," "," "," "," &:focus{outline:0;}"," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ",""],(i=>i.noSpacing?t(["margin-left:auto;"]):null),(i=>i.display?d(i.display):null),(i=>i.loading?s:null),(i=>i.rounded?m:null),(i=>i.color?e(i.color,i.inverted||i.basic?'color':'background-color'):null),(i=>i.fontColor?e(i.fontColor,i.inverted||i.basic?'background-color':'color'):null),(i=>i.basic?t(["background-color:transparent;"]):null),(i=>i.round?t(["border-radius:100%;letter-spacing:0.5px;& > *{display:inline-block !important;vertical-align:middle !important;}.icon{vertical-align:middle;& > *{vertical-align:middle !important;}svg{vertical-align:middle;}}"]):t([".icon{display:inline-block;font-size:inherit;line-height:0;vertical-align:middle;& > *{vertical-align:baseline !important;}& + ","{margin-left:10px;}}"],L)),(i=>i.padding?o(i.padding,'padding'):null),(i=>i.paddingTop?o(i.paddingTop,'padding-top'):null),(i=>i.paddingRight?o(i.paddingRight,'padding-right'):null),(i=>i.paddingBottom?o(i.paddingBottom,'padding-bottom'):null),(i=>i.paddingLeft?o(i.paddingLeft,'padding-left'):null),(i=>i.margin?o(i.margin,'margin'):null),(i=>i.marginTop?o(i.marginTop,'margin-top'):null),(i=>i.marginRight?o(i.marginRight,'margin-right'):null),(i=>i.marginBottom?o(i.marginBottom,'margin-bottom'):null),(i=>i.marginLeft?o(i.marginLeft,'margin-left'):null),(i=>{var{paddingXS:n,paddingS:t,paddingM:r,paddingL:o,paddingXL:e}=i;return a({sizes:{paddingXS:n,paddingS:t,paddingM:r,paddingL:o,paddingXL:e},cssProperty:'padding'})}),(i=>{var{paddingTopXS:n,paddingTopS:t,paddingTopM:r,paddingTopL:o,paddingTopXL:e}=i;return a({sizes:{paddingTopXS:n,paddingTopS:t,paddingTopM:r,paddingTopL:o,paddingTopXL:e},cssProperty:'padding-top'})}),(i=>{var{paddingRightXS:n,paddingRightS:t,paddingRightM:r,paddingRightL:o,paddingRightXL:e}=i;return a({sizes:{paddingRightXS:n,paddingRightS:t,paddingRightM:r,paddingRightL:o,paddingRightXL:e},cssProperty:'padding-right'})}),(i=>{var{paddingBottomXS:n,paddingBottomS:t,paddingBottomM:r,paddingBottomL:o,paddingBottomXL:e}=i;return a({sizes:{paddingBottomXS:n,paddingBottomS:t,paddingBottomM:r,paddingBottomL:o,paddingBottomXL:e},cssProperty:'padding-bottom'})}),(i=>{var{paddingLeftXS:n,paddingLeftS:t,paddingLeftM:r,paddingLeftL:o,paddingLeftXL:e}=i;return a({sizes:{paddingLeftXS:n,paddingLeftS:t,paddingLeftM:r,paddingLeftL:o,paddingLeftXL:e},cssProperty:'padding-left'})}),(i=>{var{marginXS:n,marginS:t,marginM:r,marginL:o,marginXL:e}=i;return a({sizes:{marginXS:n,marginS:t,marginM:r,marginL:o,marginXL:e},cssProperty:'margin'})}),(i=>{var{marginTopXS:n,marginTopS:t,marginTopM:r,marginTopL:o,marginTopXL:e}=i;return a({sizes:{marginTopXS:n,marginTopS:t,marginTopM:r,marginTopL:o,marginTopXL:e},cssProperty:'margin-top'})}),(i=>{var{marginRightXS:n,marginRightS:t,marginRightM:r,marginRightL:o,marginRightXL:e}=i;return a({sizes:{marginRightXS:n,marginRightS:t,marginRightM:r,marginRightL:o,marginRightXL:e},cssProperty:'margin-right'})}),(i=>{var{marginBottomXS:n,marginBottomS:t,marginBottomM:r,marginBottomL:o,marginBottomXL:e}=i;return a({sizes:{marginBottomXS:n,marginBottomS:t,marginBottomM:r,marginBottomL:o,marginBottomXL:e},cssProperty:'margin-bottom'})}),(i=>{var{marginLeftXS:n,marginLeftS:t,marginLeftM:r,marginLeftL:o,marginLeftXL:e}=i;return a({sizes:{marginLeftXS:n,marginLeftS:t,marginLeftM:r,marginLeftL:o,marginLeftXL:e},cssProperty:'margin-left'})}),(i=>i.fontSize?o(i.fontSize,'font-size'):null),(i=>{var{fontSizeXS:n,fontSizeS:t,fontSizeM:r,fontSizeL:o,fontSizeXL:e}=i;return a({sizes:{fontSizeXS:n,fontSizeS:t,fontSizeM:r,fontSizeL:o,fontSizeXL:e},cssProperty:'font-size'})}),(i=>i.size?o(g(i.size),'width'):null),(i=>i.height?o(i.height,'height'):null),(i=>{var{heightXS:n,heightS:t,heightM:r,heightL:o,heightXL:e}=i;return a({sizes:{heightXS:n,heightS:t,heightM:r,heightL:o,heightXL:e},cssProperty:'height'})}),(i=>i.width?o(g(i.width),'width'):null),(i=>{var{widthXS:n,widthS:t,widthM:r,widthL:o,widthXL:e}=i;return a({sizes:{widthXS:n,widthS:t,widthM:r,widthL:o,widthXL:e},cssProperty:'width',customSizeHandler:g})}),(i=>i.round&&i.size?o('string'==typeof i.size&&p[i.size]?p[i.size]:i.size,u):null),(i=>i.fluid?o(i.fluid,f):null),(i=>{var{fluidXS:n,fluidS:t,fluidM:r,fluidL:o,fluidXL:e}=i;return a({sizes:{fluidXS:n,fluidS:t,fluidM:r,fluidL:o,fluidXL:e},cssProperty:f})}),(i=>i.disabled?h:null),(i=>i.disabled||i.loading?null:c));export{L as Content,S as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Button/style.ts"],"sourcesContent":["import styled, { css, DefaultTheme, keyframes } from 'styled-components'\nimport tiny from 'tinycolor2'\nimport { CalcProperty, property, responsiveProperty } from '../../mixins/responsive-property'\nimport { color } from '../../mixins/color'\nimport { display } from '../../mixins/display'\nimport { ButtonProps } from './Button'\nimport { chooseWidthValue } from './helpers'\n\nconst ROUND_SIZE: Record<Exclude<ButtonProps['size'], undefined>, number> = {\n l: 52,\n m: 48,\n s: 40,\n xs: 32,\n}\n\nconst loadingAnimation = keyframes`\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 50px 50px;\n }\n`\n\nconst loading = css`\n background-image: linear-gradient(\n -45deg,\n rgba(255, 255, 255, 0.2) 25%,\n transparent 25%,\n transparent 50%,\n rgba(255, 255, 255, 0.2) 50%,\n rgba(255, 255, 255, 0.2) 75%,\n transparent 75%,\n transparent\n );\n background-size: 25px 25px;\n animation: ${loadingAnimation} 2s linear infinite;\n /* pointer-events: none; */\n cursor: progress;\n`\n\nconst rounded = css`\n border-radius: ${(props) => props.theme.borderRadius};\n`\n\nconst disabled = css`\n cursor: not-allowed;\n background-color: ${(props) => props.theme.colors.mercury};\n color: ${(props) => props.theme.colors.silver};\n`\n\nconst active = css`\n &:active {\n box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n }\n &:hover {\n ${(props: ButtonProps & { theme: DefaultTheme }) => {\n if (!props.color || !props.fontColor) return null\n\n return css`\n color: ${props.fontColor};\n background-color: ${tiny(props.theme.colors[props.color]).saturate(-5).lighten(-8).toString()};\n `\n }}\n }\n ${(props) =>\n props.inverted && props.fontColor && props.color\n ? css`\n &:not(:hover) {\n border: 1px solid ${props.theme.colors[props.color]};\n }\n &:hover {\n border: 1px solid ${props.theme.colors[props.color]};\n }\n `\n : null}\n`\n\nconst roundSize: CalcProperty = (size, sizing = 'px') => {\n return css`\n width: ${size}${sizing};\n height: ${size}${sizing};\n font-size: ${0.44 * size}${sizing};\n line-height: ${0.44 * size}${sizing};\n padding: ${0.28 * size}${sizing};\n `\n}\n\nconst fluid: CalcProperty = () => {\n return css`\n min-width: initial;\n width: 100%;\n `\n}\n\nexport const Content = styled.span`\n display: inline-block;\n line-height: 1;\n vertical-align: middle;\n`\n\nexport const Root = styled.div.withConfig<ButtonProps>({\n shouldForwardProp: (prop) =>\n [\n 'children',\n 'className',\n 'style',\n 'target',\n 'to',\n 'href',\n 'ref',\n 'onClick',\n 'type',\n 'onMouseEnter',\n 'onMouseLeave',\n ].includes(prop),\n})`\n -webkit-box-sizing: border-box !important;\n -moz-box-sizing: border-box !important;\n -ms-box-sizing: border-box !important;\n box-sizing: border-box !important;\n position: relative;\n overflow: hidden;\n border: none;\n cursor: pointer;\n user-select: none;\n font-weight: 600;\n padding-top: 0;\n padding-bottom: 0;\n text-decoration: none;\n justify-content: center;\n align-items: center;\n text-align: center;\n transition: 0.2s all;\n white-space: nowrap;\n appearance: none;\n vertical-align: top;\n & + & {\n margin-left: 1em;\n ${(props) =>\n props.noSpacing\n ? css`\n margin-left: auto;\n `\n : null}\n }\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.loading ? loading : null)}\n ${(props) => (props.rounded ? rounded : null)}\n ${(props) => (props.color ? color(props.color, props.inverted ? 'color' : 'background-color') : null)}\n ${(props) => (props.fontColor ? color(props.fontColor, props.inverted ? 'background-color' : 'color') : null)}\n\n ${(props) =>\n props.round\n ? css`\n border-radius: 100%;\n letter-spacing: 0.5px;\n & > * {\n display: inline-block !important;\n vertical-align: middle !important;\n }\n .icon {\n vertical-align: middle;\n\n & > * {\n vertical-align: middle !important;\n }\n svg {\n vertical-align: middle;\n }\n }\n `\n : css`\n .icon {\n display: inline-block;\n font-size: inherit;\n line-height: 0;\n vertical-align: middle;\n & > * {\n vertical-align: baseline !important;\n }\n & + ${Content} {\n margin-left: 10px;\n }\n }\n `}\n\n &:focus {\n outline: 0;\n }\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 /** BEGIN Responsive font-size */\n ${(props) => (props.fontSize ? property(props.fontSize, 'font-size') : null)}\n ${({ fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL }) => {\n return responsiveProperty({\n sizes: { fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL },\n cssProperty: 'font-size',\n })\n }}\n /** END Responsive font-size */\n\n ${(props) => (props.size ? property(chooseWidthValue(props.size), 'width') : null)}\n\n ${(props) => (props.height ? property(props.height, 'height') : null)}\n ${({ heightXS, heightS, heightM, heightL, heightXL }) =>\n responsiveProperty({ sizes: { heightXS, heightS, heightM, heightL, heightXL }, cssProperty: 'height' })}\n\n ${(props) => (props.width ? property(chooseWidthValue(props.width), 'width') : null)}\n ${({ widthXS, widthS, widthM, widthL, widthXL }) =>\n responsiveProperty({\n sizes: { widthXS, widthS, widthM, widthL, widthXL },\n cssProperty: 'width',\n customSizeHandler: chooseWidthValue,\n })}\n \n\n ${(props) =>\n props.round && props.size\n ? property(\n typeof props.size === 'string' && ROUND_SIZE[props.size] ? ROUND_SIZE[props.size] : props.size,\n roundSize\n )\n : null}\n \n\n ${(props) => (props.fluid ? property(props.fluid, fluid) : null)}\n ${({ fluidXS, fluidS, fluidM, fluidL, fluidXL }) =>\n responsiveProperty({ sizes: { fluidXS, fluidS, fluidM, fluidL, fluidXL }, cssProperty: fluid })}\n\n ${(props) => (props.disabled ? disabled : null)}\n ${(props) => (!props.disabled && !props.loading ? active : null)}\n`\n"],"names":["ROUND_SIZE","l","m","s","xs","loadingAnimation","keyframes","loading","css","rounded","props","theme","borderRadius","disabled","colors","mercury","silver","active","color","fontColor","tiny","saturate","lighten","toString","inverted","roundSize","size","n","sizing","fluid","Content","styled","span","withConfig","componentId","Root","div","shouldForwardProp","prop","includes","noSpacing","display","round","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","fontSize","_ref11","fontSizeXS","fontSizeS","fontSizeM","fontSizeL","fontSizeXL","chooseWidthValue","height","_ref12","heightXS","heightS","heightM","heightL","heightXL","width","_ref13","widthXS","widthS","widthM","widthL","widthXL","customSizeHandler","_ref14","fluidXS","fluidS","fluidM","fluidL","fluidXL"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Button/style.ts"],"sourcesContent":["import styled, { css, DefaultTheme, keyframes } from 'styled-components'\nimport tiny from 'tinycolor2'\nimport { CalcProperty, property, responsiveProperty } from '../../mixins/responsive-property'\nimport { color } from '../../mixins/color'\nimport { display } from '../../mixins/display'\nimport { ButtonProps } from './Button'\nimport { chooseWidthValue } from './helpers'\n\nconst ROUND_SIZE: Record<Exclude<ButtonProps['size'], undefined>, number> = {\n l: 52,\n m: 48,\n s: 40,\n xs: 32,\n}\n\nconst loadingAnimation = keyframes`\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 50px 50px;\n }\n`\n\nconst loading = css`\n background-image: linear-gradient(\n -45deg,\n rgba(255, 255, 255, 0.2) 25%,\n transparent 25%,\n transparent 50%,\n rgba(255, 255, 255, 0.2) 50%,\n rgba(255, 255, 255, 0.2) 75%,\n transparent 75%,\n transparent\n );\n background-size: 25px 25px;\n animation: ${loadingAnimation} 2s linear infinite;\n /* pointer-events: none; */\n cursor: progress;\n`\n\nconst rounded = css`\n border-radius: ${(props) => props.theme.borderRadius};\n`\n\nconst disabled = css`\n cursor: not-allowed;\n background-color: ${(props) => props.theme.colors.mercury};\n color: ${(props) => props.theme.colors.silver};\n`\n\nconst active = css`\n &:active {\n box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n }\n &:hover {\n ${(props: ButtonProps & { theme: DefaultTheme }) => {\n if (!props.color || !props.fontColor) return null\n\n return css`\n color: ${props.fontColor};\n background-color: ${tiny(props.theme.colors[props.color]).saturate(-5).lighten(-8).toString()};\n `\n }}\n }\n ${(props) =>\n (props.inverted || props.basic) && props.fontColor && props.color\n ? css`\n &:not(:hover) {\n border: 1px solid ${props.theme.colors[props.color]};\n }\n &:hover {\n border: 1px solid ${props.theme.colors[props.color]};\n }\n `\n : null}\n`\n\nconst roundSize: CalcProperty = (size, sizing = 'px') => {\n return css`\n width: ${size}${sizing};\n height: ${size}${sizing};\n font-size: ${0.44 * size}${sizing};\n line-height: ${0.44 * size}${sizing};\n padding: ${0.28 * size}${sizing};\n `\n}\n\nconst fluid: CalcProperty = () => {\n return css`\n min-width: initial;\n width: 100%;\n `\n}\n\nexport const Content = styled.span`\n display: inline-block;\n line-height: 1;\n vertical-align: middle;\n`\n\nexport const Root = styled.div.withConfig<ButtonProps>({\n shouldForwardProp: (prop) =>\n [\n 'children',\n 'className',\n 'style',\n 'target',\n 'to',\n 'href',\n 'ref',\n 'onClick',\n 'type',\n 'onMouseEnter',\n 'onMouseLeave',\n ].includes(prop),\n})`\n -webkit-box-sizing: border-box !important;\n -moz-box-sizing: border-box !important;\n -ms-box-sizing: border-box !important;\n box-sizing: border-box !important;\n position: relative;\n overflow: hidden;\n border: none;\n cursor: pointer;\n user-select: none;\n font-weight: 600;\n padding-top: 0;\n padding-bottom: 0;\n text-decoration: none;\n justify-content: center;\n align-items: center;\n text-align: center;\n transition: 0.2s all;\n white-space: nowrap;\n appearance: none;\n vertical-align: top;\n & + & {\n margin-left: 1em;\n ${(props) =>\n props.noSpacing\n ? css`\n margin-left: auto;\n `\n : null}\n }\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.loading ? loading : null)}\n ${(props) => (props.rounded ? rounded : null)}\n ${(props) => (props.color ? color(props.color, props.inverted || props.basic ? 'color' : 'background-color') : null)}\n ${(props) =>\n props.fontColor ? color(props.fontColor, props.inverted || props.basic ? 'background-color' : 'color') : null}\n ${(props) =>\n props.basic\n ? css`\n background-color: transparent;\n `\n : null}\n\n ${(props) =>\n props.round\n ? css`\n border-radius: 100%;\n letter-spacing: 0.5px;\n & > * {\n display: inline-block !important;\n vertical-align: middle !important;\n }\n .icon {\n vertical-align: middle;\n\n & > * {\n vertical-align: middle !important;\n }\n svg {\n vertical-align: middle;\n }\n }\n `\n : css`\n .icon {\n display: inline-block;\n font-size: inherit;\n line-height: 0;\n vertical-align: middle;\n & > * {\n vertical-align: baseline !important;\n }\n & + ${Content} {\n margin-left: 10px;\n }\n }\n `}\n\n &:focus {\n outline: 0;\n }\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 /** BEGIN Responsive font-size */\n ${(props) => (props.fontSize ? property(props.fontSize, 'font-size') : null)}\n ${({ fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL }) => {\n return responsiveProperty({\n sizes: { fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL },\n cssProperty: 'font-size',\n })\n }}\n /** END Responsive font-size */\n\n ${(props) => (props.size ? property(chooseWidthValue(props.size), 'width') : null)}\n\n ${(props) => (props.height ? property(props.height, 'height') : null)}\n ${({ heightXS, heightS, heightM, heightL, heightXL }) =>\n responsiveProperty({ sizes: { heightXS, heightS, heightM, heightL, heightXL }, cssProperty: 'height' })}\n\n ${(props) => (props.width ? property(chooseWidthValue(props.width), 'width') : null)}\n ${({ widthXS, widthS, widthM, widthL, widthXL }) =>\n responsiveProperty({\n sizes: { widthXS, widthS, widthM, widthL, widthXL },\n cssProperty: 'width',\n customSizeHandler: chooseWidthValue,\n })}\n \n\n ${(props) =>\n props.round && props.size\n ? property(\n typeof props.size === 'string' && ROUND_SIZE[props.size] ? ROUND_SIZE[props.size] : props.size,\n roundSize\n )\n : null}\n \n\n ${(props) => (props.fluid ? property(props.fluid, fluid) : null)}\n ${({ fluidXS, fluidS, fluidM, fluidL, fluidXL }) =>\n responsiveProperty({ sizes: { fluidXS, fluidS, fluidM, fluidL, fluidXL }, cssProperty: fluid })}\n\n ${(props) => (props.disabled ? disabled : null)}\n ${(props) => (!props.disabled && !props.loading ? active : null)}\n`\n"],"names":["ROUND_SIZE","l","m","s","xs","loadingAnimation","keyframes","loading","css","rounded","props","theme","borderRadius","disabled","colors","mercury","silver","active","color","fontColor","tiny","saturate","lighten","toString","inverted","basic","roundSize","size","n","sizing","fluid","Content","styled","span","withConfig","componentId","Root","div","shouldForwardProp","prop","includes","noSpacing","display","round","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","fontSize","_ref11","fontSizeXS","fontSizeS","fontSizeM","fontSizeL","fontSizeXL","chooseWidthValue","height","_ref12","heightXS","heightS","heightM","heightL","heightXL","width","_ref13","widthXS","widthS","widthM","widthL","widthXL","customSizeHandler","_ref14","fluidXS","fluidS","fluidM","fluidL","fluidXL"],"mappings":"2TAQA,IAAMA,EAAsE,CAC1EC,EAAG,GACHC,EAAG,GACHC,EAAG,GACHC,GAAI,IAGN,IAAMC,EAAmBC,EAAzB,CAAA,qEASA,IAAMC,EAAUC,EAAH,CAAA,4NAAA,wCAYEH,GAKf,IAAMI,EAAUD,EACIE,CAAAA,iBAAAA,MAAAA,GAAUA,EAAMC,MAAMC,eAG1C,IAAMC,EAAWL,EAAH,CAAA,uCAAA,UAAA,MAESE,GAAUA,EAAMC,MAAMG,OAAOC,UACxCL,GAAUA,EAAMC,MAAMG,OAAOE,SAGzC,IAAMC,EAAST,EAAH,CAAA,qEAAA,IAAA,KAKLE,GACIA,EAAMQ,OAAUR,EAAMS,UAEpBX,EAAP,CAAA,SAAA,qBAAA,KACWE,EAAMS,UACKC,EAAKV,EAAMC,MAAMG,OAAOJ,EAAMQ,QAAQG,UAAU,GAAGC,SAAS,GAAGC,YAJxC,OAQ9Cb,IACAA,EAAMc,UAAYd,EAAMe,QAAUf,EAAMS,WAAaT,EAAMQ,MACxDV,EADJ,CAAA,kCAAA,8BAAA,MAG4BE,EAAMC,MAAMG,OAAOJ,EAAMQ,OAGzBR,EAAMC,MAAMG,OAAOJ,EAAMQ,QAGjD,OAGR,IAAMQ,EAA0B,SAACC,EAADC,GAAyB,IAAlBC,+BAAPD,EAAAA,EAAgB,KAC9C,OAAOpB,qFACImB,EAAOE,EACNF,EAAOE,EACJ,IAAOF,EAAOE,EACZ,IAAOF,EAAOE,EAClB,IAAOF,EAAOE,IAI7B,IAAMC,EAAsB,IACnBtB,EAAP,CAAA,kCAMWuB,IAAAA,EAAUC,EAAOC,KAAVC,WAAA,CAAAC,YAAA,wBAAGH,CAAhB,CAAA,8DAMA,IAAMI,EAAOJ,EAAOK,IAAIH,WAAwB,CACrDI,kBAAoBC,GAClB,CACE,WACA,YACA,QACA,SACA,KACA,OACA,MACA,UACA,OACA,eACA,gBACAC,SAASD,KAdEL,WAAA,CAAAC,YAAA,wBAAGH,CAAH,CAAA,scAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,uBAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,KAsCVtB,GACDA,EAAM+B,UACFjC,EAGA,CAAA,sBAAA,OAELE,GAAWA,EAAMgC,QAAUA,EAAQhC,EAAMgC,SAAW,OACpDhC,GAAWA,EAAMH,QAAUA,EAAU,OACrCG,GAAWA,EAAMD,QAAUA,EAAU,OACrCC,GAAWA,EAAMQ,MAAQA,EAAMR,EAAMQ,MAAOR,EAAMc,UAAYd,EAAMe,MAAQ,QAAU,oBAAsB,OAC5Gf,GACDA,EAAMS,UAAYD,EAAMR,EAAMS,UAAWT,EAAMc,UAAYd,EAAMe,MAAQ,mBAAqB,SAAW,OACxGf,GACDA,EAAMe,MACFjB,EAGA,CAAA,kCAAA,OAEHE,GACDA,EAAMiC,MACFnC,EADJ,CAAA,qNAmBIA,EAnBJ,CAAA,kIAAA,wBA4BcuB,KAWbrB,GAAWA,EAAMkC,QAAUC,EAASnC,EAAMkC,QAAS,WAAa,OAChElC,GAAWA,EAAMoC,WAAaD,EAASnC,EAAMoC,WAAY,eAAiB,OAC1EpC,GAAWA,EAAMqC,aAAeF,EAASnC,EAAMqC,aAAc,iBAAmB,OAChFrC,GAAWA,EAAMsC,cAAgBH,EAASnC,EAAMsC,cAAe,kBAAoB,OACnFtC,GAAWA,EAAMuC,YAAcJ,EAASnC,EAAMuC,YAAa,gBAAkB,OAI7EvC,GAAWA,EAAMwC,OAASL,EAASnC,EAAMwC,OAAQ,UAAY,OAC7DxC,GAAWA,EAAMyC,UAAYN,EAASnC,EAAMyC,UAAW,cAAgB,OACvEzC,GAAWA,EAAM0C,YAAcP,EAASnC,EAAM0C,YAAa,gBAAkB,OAC7E1C,GAAWA,EAAM2C,aAAeR,EAASnC,EAAM2C,aAAc,iBAAmB,OAChF3C,GAAWA,EAAM4C,WAAaT,EAASnC,EAAM4C,WAAY,eAAiB,OAI3EC,IAAA,IAACC,UAAEA,EAAFC,SAAaA,EAAbC,SAAuBA,EAAvBC,SAAiCA,EAAjCC,UAA2CA,GAA5CL,EAAA,OACAM,EAAmB,CAAEC,MAAO,CAAEN,UAAAA,EAAWC,SAAAA,EAAUC,SAAAA,EAAUC,SAAAA,EAAUC,UAAAA,GAAaG,YAAa,eACjGC,IAAA,IAACC,aAAEA,EAAFC,YAAgBA,EAAhBC,YAA6BA,EAA7BC,YAA0CA,EAA1CC,aAAuDA,GAAxDL,EAAA,OACAH,EAAmB,CACjBC,MAAO,CAAEG,aAAAA,EAAcC,YAAAA,EAAaC,YAAAA,EAAaC,YAAAA,EAAaC,aAAAA,GAC9DN,YAAa,mBAEfO,IAAA,IAACC,eAAEA,EAAFC,cAAkBA,EAAlBC,cAAiCA,EAAjCC,cAAgDA,EAAhDC,eAA+DA,GAAhEL,EAAA,OACAT,EAAmB,CACjBC,MAAO,CAAES,eAAAA,EAAgBC,cAAAA,EAAeC,cAAAA,EAAeC,cAAAA,EAAeC,eAAAA,GACtEZ,YAAa,qBAEfa,IAAA,IAACC,gBAAEA,EAAFC,eAAmBA,EAAnBC,eAAmCA,EAAnCC,eAAmDA,EAAnDC,gBAAmEA,GAApEL,EAAA,OACAf,EAAmB,CACjBC,MAAO,CAAEe,gBAAAA,EAAiBC,eAAAA,EAAgBC,eAAAA,EAAgBC,eAAAA,EAAgBC,gBAAAA,GAC1ElB,YAAa,sBAEfmB,IAAA,IAACC,cAAEA,EAAFC,aAAiBA,EAAjBC,aAA+BA,EAA/BC,aAA6CA,EAA7CC,cAA2DA,GAA5DL,EAAA,OACArB,EAAmB,CACjBC,MAAO,CAAEqB,cAAAA,EAAeC,aAAAA,EAAcC,aAAAA,EAAcC,aAAAA,EAAcC,cAAAA,GAClExB,YAAa,oBAKfyB,IAAA,IAACC,SAAEA,EAAFC,QAAYA,EAAZC,QAAqBA,EAArBC,QAA8BA,EAA9BC,SAAuCA,GAAxCL,EAAA,OACA3B,EAAmB,CAAEC,MAAO,CAAE2B,SAAAA,EAAUC,QAAAA,EAASC,QAAAA,EAASC,QAAAA,EAASC,SAAAA,GAAY9B,YAAa,cAC5F+B,IAAA,IAACC,YAAEA,EAAFC,WAAeA,EAAfC,WAA2BA,EAA3BC,WAAuCA,EAAvCC,YAAmDA,GAApDL,EAAA,OACAjC,EAAmB,CACjBC,MAAO,CAAEiC,YAAAA,EAAaC,WAAAA,EAAYC,WAAAA,EAAYC,WAAAA,EAAYC,YAAAA,GAC1DpC,YAAa,kBAEfqC,IAAA,IAACC,cAAEA,EAAFC,aAAiBA,EAAjBC,aAA+BA,EAA/BC,aAA6CA,EAA7CC,cAA2DA,GAA5DL,EAAA,OACAvC,EAAmB,CACjBC,MAAO,CAAEuC,cAAAA,EAAeC,aAAAA,EAAcC,aAAAA,EAAcC,aAAAA,EAAcC,cAAAA,GAClE1C,YAAa,oBAEf2C,IAAA,IAACC,eAAEA,EAAFC,cAAkBA,EAAlBC,cAAiCA,EAAjCC,cAAgDA,EAAhDC,eAA+DA,GAAhEL,EAAA,OACA7C,EAAmB,CACjBC,MAAO,CAAE6C,eAAAA,EAAgBC,cAAAA,EAAeC,cAAAA,EAAeC,cAAAA,EAAeC,eAAAA,GACtEhD,YAAa,qBAEfiD,IAAA,IAACC,aAAEA,EAAFC,YAAgBA,EAAhBC,YAA6BA,EAA7BC,YAA0CA,EAA1CC,aAAuDA,GAAxDL,EAAA,OACAnD,EAAmB,CACjBC,MAAO,CAAEmD,aAAAA,EAAcC,YAAAA,EAAaC,YAAAA,EAAaC,YAAAA,EAAaC,aAAAA,GAC9DtD,YAAa,mBAKdrD,GAAWA,EAAM4G,SAAWzE,EAASnC,EAAM4G,SAAU,aAAe,OACrEC,IAAiE,IAAhEC,WAAEA,EAAFC,UAAcA,EAAdC,UAAyBA,EAAzBC,UAAoCA,EAApCC,WAA+CA,GAAiBL,EACjE,OAAO1D,EAAmB,CACxBC,MAAO,CAAE0D,WAAAA,EAAYC,UAAAA,EAAWC,UAAAA,EAAWC,UAAAA,EAAWC,WAAAA,GACtD7D,YAAa,iBAKdrD,GAAWA,EAAMiB,KAAOkB,EAASgF,EAAiBnH,EAAMiB,MAAO,SAAW,OAE1EjB,GAAWA,EAAMoH,OAASjF,EAASnC,EAAMoH,OAAQ,UAAY,OAC9DC,IAAA,IAACC,SAAEA,EAAFC,QAAYA,EAAZC,QAAqBA,EAArBC,QAA8BA,EAA9BC,SAAuCA,GAAxCL,EAAA,OACAlE,EAAmB,CAAEC,MAAO,CAAEkE,SAAAA,EAAUC,QAAAA,EAASC,QAAAA,EAASC,QAAAA,EAASC,SAAAA,GAAYrE,YAAa,cAE3FrD,GAAWA,EAAM2H,MAAQxF,EAASgF,EAAiBnH,EAAM2H,OAAQ,SAAW,OAC7EC,IAAA,IAACC,QAAEA,EAAFC,OAAWA,EAAXC,OAAmBA,EAAnBC,OAA2BA,EAA3BC,QAAmCA,GAApCL,EAAA,OACAzE,EAAmB,CACjBC,MAAO,CAAEyE,QAAAA,EAASC,OAAAA,EAAQC,OAAAA,EAAQC,OAAAA,EAAQC,QAAAA,GAC1C5E,YAAa,QACb6E,kBAAmBf,OAIpBnH,GACDA,EAAMiC,OAASjC,EAAMiB,KACjBkB,EACwB,iBAAfnC,EAAMiB,MAAqB3B,EAAWU,EAAMiB,MAAQ3B,EAAWU,EAAMiB,MAAQjB,EAAMiB,KAC1FD,GAEF,OAGHhB,GAAWA,EAAMoB,MAAQe,EAASnC,EAAMoB,MAAOA,GAAS,OACzD+G,IAAA,IAACC,QAAEA,EAAFC,OAAWA,EAAXC,OAAmBA,EAAnBC,OAA2BA,EAA3BC,QAAmCA,GAApCL,EAAA,OACAhF,EAAmB,CAAEC,MAAO,CAAEgF,QAAAA,EAASC,OAAAA,EAAQC,OAAAA,EAAQC,OAAAA,EAAQC,QAAAA,GAAWnF,YAAajC,OAEtFpB,GAAWA,EAAMG,SAAWA,EAAW,OACvCH,GAAYA,EAAMG,UAAaH,EAAMH,QAAmB,KAATU"}
|
package/components/Icon/Icon.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Root as
|
|
1
|
+
import s from'clsx';import{Root as e}from'./style.js';import{defaultIcons as i}from'./icons.js';export{IconNames}from'./icons.js';import{jsxs as o,jsx as n}from'react/jsx-runtime';function r(r){var{name:l,icon:c,svg:t,pointer:z,color:a,size:m,sizeXS:f,sizeS:p,sizeM:x,sizeL:L,sizeXL:S,className:u,style:X,vAlign:d,children:v}=r;if(l&&i[l]){var y=i[l];return o(e,{vAlign:d,color:a,pointer:z,className:s('fox-icon',u),size:m,sizeXS:f,sizeS:p,sizeM:x,sizeL:L,sizeXL:S,style:X,children:[n(y,{}),v]})}return t?n(e,{vAlign:d,color:a,pointer:z,className:s('fox-icon',u),size:m,sizeXS:f,sizeS:p,sizeM:x,sizeL:L,sizeXL:S,style:X,dangerouslySetInnerHTML:{__html:t||''},children:c||null}):o(e,{vAlign:d,color:a,pointer:z,className:s('fox-icon',u),size:m,sizeXS:f,sizeS:p,sizeM:x,sizeL:L,sizeXL:S,style:X,children:[c||null,v]})}r.displayName='Icon';export{r as Icon};
|
|
2
2
|
//# sourceMappingURL=Icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { Color } from '../../mixins/color'\nimport { VAlign } from '../../mixins/vAlign'\nimport { ResponsiveProperty } from '../../mixins/responsive-property'\nimport { BaseProps } from '../../shared/interfaces'\nimport * as Styled from './style'\n\nimport { defaultIcons, IconNames } from './icons'\n\nexport interface IconProps extends BaseProps, Color, VAlign, ResponsiveProperty<'size'> {\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Name of default icon\n */\n name?: keyof typeof IconNames\n /**\n * Object with icon's svg. Use for custom icon insertion\n */\n svg?: string\n /**\n * Object with icon's svg. Use for custom icon insertion\n */\n icon?: React.ReactNode\n /**\n * Show pointer cursor on hover?\n */\n pointer?: boolean\n}\n\nIcon.displayName = 'Icon'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`VAlign`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'fontColor'>`](#/Миксины)\n * - [`ResponsiveProperty<'size'>`](#/Миксины)\n */\nexport function Icon(props: IconProps) {\n const {\n name,\n icon,\n svg,\n pointer,\n color,\n size,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n className,\n style,\n vAlign,\n children,\n } = props\n\n if (name && defaultIcons[name]) {\n const Icon = defaultIcons[name]\n return (\n <Styled.Root\n vAlign={vAlign}\n color={color}\n pointer={pointer}\n className={className}\n size={size}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n style={style}\n >\n <Icon />\n {children}\n </Styled.Root>\n )\n }\n\n if (svg)\n return (\n <Styled.Root\n vAlign={vAlign}\n color={color}\n pointer={pointer}\n className={className}\n size={size}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n style={style}\n dangerouslySetInnerHTML={{ __html: svg || '' }}\n >\n {icon || null}\n </Styled.Root>\n )\n\n return (\n <Styled.Root\n vAlign={vAlign}\n color={color}\n pointer={pointer}\n className={className}\n size={size}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n style={style}\n >\n {icon || null}\n {children}\n </Styled.Root>\n )\n}\n\nexport { IconNames }\n"],"names":["Icon","props","name","icon","svg","pointer","color","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","className","style","vAlign","children","defaultIcons","_jsxs","Styled.Root","_jsx","dangerouslySetInnerHTML","__html","displayName"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import cx from 'clsx'\nimport { Color } from '../../mixins/color'\nimport { VAlign } from '../../mixins/vAlign'\nimport { ResponsiveProperty } from '../../mixins/responsive-property'\nimport { BaseProps } from '../../shared/interfaces'\nimport * as Styled from './style'\n\nimport { defaultIcons, IconNames } from './icons'\n\nexport interface IconProps extends BaseProps, Color, VAlign, ResponsiveProperty<'size'> {\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Name of default icon\n */\n name?: keyof typeof IconNames\n /**\n * Object with icon's svg. Use for custom icon insertion\n */\n svg?: string\n /**\n * Object with icon's svg. Use for custom icon insertion\n */\n icon?: React.ReactNode\n /**\n * Show pointer cursor on hover?\n */\n pointer?: boolean\n}\n\nIcon.displayName = 'Icon'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`VAlign`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'fontColor'>`](#/Миксины)\n * - [`ResponsiveProperty<'size'>`](#/Миксины)\n */\nexport function Icon(props: IconProps) {\n const {\n name,\n icon,\n svg,\n pointer,\n color,\n size,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n className,\n style,\n vAlign,\n children,\n } = props\n\n if (name && defaultIcons[name]) {\n const Icon = defaultIcons[name]\n return (\n <Styled.Root\n vAlign={vAlign}\n color={color}\n pointer={pointer}\n className={cx('fox-icon', className)}\n size={size}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n style={style}\n >\n <Icon />\n {children}\n </Styled.Root>\n )\n }\n\n if (svg)\n return (\n <Styled.Root\n vAlign={vAlign}\n color={color}\n pointer={pointer}\n className={cx('fox-icon', className)}\n size={size}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n style={style}\n dangerouslySetInnerHTML={{ __html: svg || '' }}\n >\n {icon || null}\n </Styled.Root>\n )\n\n return (\n <Styled.Root\n vAlign={vAlign}\n color={color}\n pointer={pointer}\n className={cx('fox-icon', className)}\n size={size}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n style={style}\n >\n {icon || null}\n {children}\n </Styled.Root>\n )\n}\n\nexport { IconNames }\n"],"names":["Icon","props","name","icon","svg","pointer","color","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","className","style","vAlign","children","defaultIcons","_jsxs","Styled.Root","cx","_jsx","_Icon","dangerouslySetInnerHTML","__html","displayName"],"mappings":"oLA0CO,SAASA,EAAKC,GACnB,IAAMC,KACJA,EADIC,KAEJA,EAFIC,IAGJA,EAHIC,QAIJA,EAJIC,MAKJA,EALIC,KAMJA,EANIC,OAOJA,EAPIC,MAQJA,EARIC,MASJA,EATIC,MAUJA,EAVIC,OAWJA,EAXIC,UAYJA,EAZIC,MAaJA,EAbIC,OAcJA,EAdIC,SAeJA,GACEf,EAEJ,GAAIC,GAAQe,EAAaf,GAAO,CAC9B,IAAMF,EAAOiB,EAAaf,GAC1B,OACEgB,EAACC,EAAD,CACEJ,OAAQA,EACRT,MAAOA,EACPD,QAASA,EACTQ,UAAWO,EAAG,WAAYP,GAC1BN,KAAMA,EACNC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRE,MAAOA,EAXTE,SAAA,CAaEK,EAACC,EAbH,IAcGN,KAKP,OAAIZ,EAEAiB,EAACF,EAAD,CACEJ,OAAQA,EACRT,MAAOA,EACPD,QAASA,EACTQ,UAAWO,EAAG,WAAYP,GAC1BN,KAAMA,EACNC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRE,MAAOA,EACPS,wBAAyB,CAAEC,OAAQpB,GAAO,IAZ5CY,SAcGb,GAAQ,OAKbe,EAACC,EAAD,CACEJ,OAAQA,EACRT,MAAOA,EACPD,QAASA,EACTQ,UAAWO,EAAG,WAAYP,GAC1BN,KAAMA,EACNC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRE,MAAOA,EAXTE,SAAA,CAaGb,GAAQ,KACRa,KAtFPhB,EAAKyB,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import e from'@babel/runtime/helpers/esm/objectSpread2';import a from'@babel/runtime/helpers/esm/objectWithoutProperties';import{useClassname as s}from'../../hooks/useClassname.js';import{Root as r}from'./style.js';import{jsx as o}from'react/jsx-runtime';var m=["padding","rounded","shadow","className"];function t(d){var{padding:p="m",rounded:i=!0,shadow:n=!0,className:l}=d,u=a(d,m);var c=s(t.displayName,l);return o(r,e({padding:p,rounded:i,shadow:n,className:c},u))}t.displayName='Paper';export{t as Paper};
|
|
2
2
|
//# sourceMappingURL=Paper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paper.js","sources":["../../../../src/components/Paper/Paper.tsx"],"sourcesContent":["import { BaseProps } from '../../shared/interfaces'\nimport { Display } from '../../mixins/display'\nimport { ResponsiveProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport * as Styled from './style'\n\nexport interface PaperProps extends BaseProps, Display, Color, ResponsiveProperty<'padding'> {\n /**\n * Paper content\n */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Set to true to generate a circlular paper container\n */\n circle?: boolean\n /**\n * Paper with rounded corners\n */\n rounded?: boolean\n /**\n * Paper with shadow\n */\n shadow?: boolean\n /**\n * This number represents the zDepth of the paper shadow\n */\n zDepth?: false | 0 | 1 | 2 | 3 | 4\n /**\n * Text align\n */\n textAlign?: 'left' | 'center' | 'right'\n}\n\nPaper.displayName = 'Paper'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`ResponsiveProperty<'padding'>`](#/Миксины)\n */\nexport function Paper({ padding = 'm', rounded = true, shadow = true, ...props }: PaperProps) {\n return <Styled.Root padding={padding} rounded={rounded} shadow={shadow} {...props} />\n}\n"],"names":["Paper","_ref","padding","rounded","shadow","props","_objectWithoutProperties","_excluded","_jsx","Styled.Root","_objectSpread"
|
|
1
|
+
{"version":3,"file":"Paper.js","sources":["../../../../src/components/Paper/Paper.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport { BaseProps } from '../../shared/interfaces'\nimport { Display } from '../../mixins/display'\nimport { ResponsiveProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport * as Styled from './style'\n\nexport interface PaperProps extends BaseProps, Display, Color, ResponsiveProperty<'padding'> {\n /**\n * Paper content\n */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Set to true to generate a circlular paper container\n */\n circle?: boolean\n /**\n * Paper with rounded corners\n */\n rounded?: boolean\n /**\n * Paper with shadow\n */\n shadow?: boolean\n /**\n * This number represents the zDepth of the paper shadow\n */\n zDepth?: false | 0 | 1 | 2 | 3 | 4\n /**\n * Text align\n */\n textAlign?: 'left' | 'center' | 'right'\n}\n\nPaper.displayName = 'Paper'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`ResponsiveProperty<'padding'>`](#/Миксины)\n */\nexport function Paper({ padding = 'm', rounded = true, shadow = true, className, ...props }: PaperProps) {\n const _className = useClassname(Paper.displayName, className)\n\n return <Styled.Root padding={padding} rounded={rounded} shadow={shadow} className={_className} {...props} />\n}\n"],"names":["Paper","_ref","padding","rounded","shadow","className","props","_objectWithoutProperties","_excluded","_className","useClassname","displayName","_jsx","Styled.Root","_objectSpread"],"mappings":"gTA8CO,SAASA,EAAyFC,GAAA,IAAnFC,QAAEA,EAAU,IAAZC,QAAiBA,GAAAA,EAAjBC,OAAiCA,GAAS,EAA1CC,UAAgDA,GAAmCJ,EAArBK,EAAqBC,EAAAN,EAAAO,GACvG,IAAMC,EAAaC,EAAaV,EAAMW,YAAaN,GAEnD,OAAOO,EAACC,EAADC,EAAA,CAAaZ,QAASA,EAASC,QAASA,EAASC,OAAQA,EAAQC,UAAWI,GAAgBH,IAZrGN,EAAMW,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/esm/objectSpread2';import a from'@babel/runtime/helpers/esm/objectWithoutProperties';import{useState as r,useEffect as s,useCallback as
|
|
1
|
+
import e from'@babel/runtime/helpers/esm/objectSpread2';import a from'@babel/runtime/helpers/esm/objectWithoutProperties';import{useState as r,useEffect as s,useCallback as o}from'react';import{useClassname as l}from'../../hooks/useClassname.js';import{RadioGroup as i}from'./Group.js';import{Root as t}from'./style.js';import{jsxs as c,jsx as d}from'react/jsx-runtime';var m=["children","disabled","error","id","name","onChange","size","value","label","className","style"];function n(i){var h=void 0===i.checked;var[p,u]=r(h?i.defaultChecked:i.checked);var{children:f,disabled:b,error:v,id:k,name:g,onChange:y,size:C,value:j,label:x,className:N,style:w}=i,z=a(i,m);var R=l(n.displayName,N);s((()=>{h||p===i.checked||u(i.checked)}),[i.checked]);var G=o((e=>{e.stopPropagation(),'function'==typeof y&&y(e)}),[h]);var P=h?{defaultChecked:p}:{checked:p};return c(t,{className:R,style:w,disabled:b,checked:p,error:v,htmlFor:k||g,size:C,children:[d("input",e(e({},z),{},{id:k||g,name:g,type:"radio",onChange:G,value:j,disabled:b},P)),c("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",children:[d("circle",{cx:"10",cy:"10",r:"9",stroke:"#727D8A",strokeWidth:"2",fill:"#fff"}),d("circle",{cx:"10",cy:"10",r:"5",fill:"#727D8A"})]}),(x||f)&&d("span",{className:"label",children:x||f})]})}n.defaultProps={disabled:!1,size:'medium',defaultChecked:!1,onChange:e=>console.log(e,e.target.value)},n.Group=i,n.displayName='Radio';export{n as Radio};
|
|
2
2
|
//# sourceMappingURL=Radio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { BaseProps } from '../../shared/interfaces'\nimport { RadioGroup } from './Group'\nimport * as Styled from './style'\n\ntype RadioInputHtmlAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>\n\nexport interface RadioProps extends BaseProps, RadioInputHtmlAttributes {\n /**\n * Field id\n */\n id?: string\n /**\n * Field name\n */\n name?: string\n /**\n * Radio label\n */\n label?: string\n /**\n * On change handler\n */\n onChange?(_e: React.ChangeEvent<HTMLInputElement>): void\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * A Radio can appear disabled and be unable to change states\n */\n disabled?: boolean\n /**\n * Field can show the data contains errors\n */\n error?: boolean\n /**\n * Whether or not Radio is checked\n */\n checked?: boolean\n defaultChecked?: boolean\n /**\n * Checkbox size\n */\n size?: 'small' | 'medium' | 'large'\n /**\n * Value\n */\n value?: string | number\n}\n\nRadio.defaultProps = {\n disabled: false,\n size: 'medium',\n defaultChecked: false,\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log(e, e.target.value), // eslint-disable-line no-console\n}\n\nRadio.Group = RadioGroup\nRadio.displayName = 'Radio'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - `React.InputHTMLAttributes<HTMLInputElement>`\n */\nexport function Radio(props: typeof Radio.defaultProps & RadioProps) {\n const uncontrolled = props.checked === undefined\n const [checkedInput, setChecked] = useState(uncontrolled ? props.defaultChecked : props.checked)\n\n const { children, disabled, error, id, name, onChange, size, value, label, className, style, ...anotherProps } = props\n\n useEffect(() => {\n if (!uncontrolled && checkedInput !== props.checked) setChecked(props.checked)\n }, [props.checked])\n\n const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n e.stopPropagation()\n if (typeof onChange === 'function') onChange(e)\n },\n [uncontrolled]\n )\n\n const inputProps = uncontrolled ? { defaultChecked: checkedInput } : { checked: checkedInput }\n\n return (\n <Styled.Root\n className={
|
|
1
|
+
{"version":3,"file":"Radio.js","sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { useClassname } from 'hooks/useClassname'\nimport { BaseProps } from '../../shared/interfaces'\nimport { RadioGroup } from './Group'\nimport * as Styled from './style'\n\ntype RadioInputHtmlAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>\n\nexport interface RadioProps extends BaseProps, RadioInputHtmlAttributes {\n /**\n * Field id\n */\n id?: string\n /**\n * Field name\n */\n name?: string\n /**\n * Radio label\n */\n label?: string\n /**\n * On change handler\n */\n onChange?(_e: React.ChangeEvent<HTMLInputElement>): void\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * A Radio can appear disabled and be unable to change states\n */\n disabled?: boolean\n /**\n * Field can show the data contains errors\n */\n error?: boolean\n /**\n * Whether or not Radio is checked\n */\n checked?: boolean\n defaultChecked?: boolean\n /**\n * Checkbox size\n */\n size?: 'small' | 'medium' | 'large'\n /**\n * Value\n */\n value?: string | number\n}\n\nRadio.defaultProps = {\n disabled: false,\n size: 'medium',\n defaultChecked: false,\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log(e, e.target.value), // eslint-disable-line no-console\n}\n\nRadio.Group = RadioGroup\nRadio.displayName = 'Radio'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - `React.InputHTMLAttributes<HTMLInputElement>`\n */\nexport function Radio(props: typeof Radio.defaultProps & RadioProps) {\n const uncontrolled = props.checked === undefined\n const [checkedInput, setChecked] = useState(uncontrolled ? props.defaultChecked : props.checked)\n\n const { children, disabled, error, id, name, onChange, size, value, label, className, style, ...anotherProps } = props\n const _className = useClassname(Radio.displayName, className)\n\n useEffect(() => {\n if (!uncontrolled && checkedInput !== props.checked) setChecked(props.checked)\n }, [props.checked])\n\n const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n e.stopPropagation()\n if (typeof onChange === 'function') onChange(e)\n },\n [uncontrolled]\n )\n\n const inputProps = uncontrolled ? { defaultChecked: checkedInput } : { checked: checkedInput }\n\n return (\n <Styled.Root\n className={_className}\n style={style}\n disabled={disabled}\n checked={checkedInput}\n error={error}\n htmlFor={id || name}\n size={size}\n >\n <input\n {...anotherProps}\n id={id || name}\n name={name}\n type='radio'\n onChange={handleOnChange}\n value={value}\n disabled={disabled}\n {...inputProps}\n />\n <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>\n <circle cx='10' cy='10' r='9' stroke='#727D8A' strokeWidth='2' fill='#fff' />\n <circle cx='10' cy='10' r='5' fill='#727D8A' />\n </svg>\n {(label || children) && <span className='label'>{label || children}</span>}\n </Styled.Root>\n )\n}\n"],"names":["Radio","props","uncontrolled","undefined","checked","checkedInput","setChecked","useState","defaultChecked","children","disabled","error","id","name","onChange","size","value","label","className","style","anotherProps","_excluded","_className","useClassname","displayName","useEffect","handleOnChange","useCallback","e","stopPropagation","inputProps","_jsxs","Styled.Root","htmlFor","_jsx","type","xmlns","viewBox","cx","cy","r","stroke","strokeWidth","fill","defaultProps","console","log","target","Group","RadioGroup"],"mappings":"0dAmEO,SAASA,EAAMC,GACpB,IAAMC,OAAiCC,IAAlBF,EAAMG,QAC3B,IAAOC,EAAcC,GAAcC,EAASL,EAAeD,EAAMO,eAAiBP,EAAMG,SAExF,IAAMK,SAAEA,EAAFC,SAAYA,EAAZC,MAAsBA,EAAtBC,GAA6BA,EAA7BC,KAAiCA,EAAjCC,SAAuCA,EAAvCC,KAAiDA,EAAjDC,MAAuDA,EAAvDC,MAA8DA,EAA9DC,UAAqEA,EAArEC,MAAgFA,GAA2BlB,EAAjBmB,IAAiBnB,EAAjHoB,GACA,IAAMC,EAAaC,EAAavB,EAAMwB,YAAaN,GAEnDO,GAAU,KACHvB,GAAgBG,IAAiBJ,EAAMG,SAASE,EAAWL,EAAMG,WACrE,CAACH,EAAMG,UAEV,IAAMsB,EAA6DC,GAChEC,IACCA,EAAEC,kBACsB,mBAAbf,GAAyBA,EAASc,KAE/C,CAAC1B,IAGH,IAAM4B,EAAa5B,EAAe,CAAEM,eAAgBH,GAAiB,CAAED,QAASC,GAEhF,OACE0B,EAACC,EAAD,CACEd,UAAWI,EACXH,MAAOA,EACPT,SAAUA,EACVN,QAASC,EACTM,MAAOA,EACPsB,QAASrB,GAAMC,EACfE,KAAMA,EAPRN,SAAA,CASEyB,iBACMd,GADN,GAAA,CAEER,GAAIA,GAAMC,EACVA,KAAMA,EACNsB,KAAK,QACLrB,SAAUY,EACVV,MAAOA,EACPN,SAAUA,GACNoB,IAENC,EAAA,MAAA,CAAKK,MAAM,6BAA6BC,QAAQ,YAAhD5B,SACE,CAAAyB,EAAA,SAAA,CAAQI,GAAG,KAAKC,GAAG,KAAKC,EAAE,IAAIC,OAAO,UAAUC,YAAY,IAAIC,KAAK,SACpET,EAAA,SAAA,CAAQI,GAAG,KAAKC,GAAG,KAAKC,EAAE,IAAIG,KAAK,gBAEnC1B,GAASR,IAAayB,EAAA,OAAA,CAAMhB,UAAU,QAAhBT,SAAyBQ,GAASR,OA5DhET,EAAM4C,aAAe,CACnBlC,UAAU,EACVK,KAAM,SACNP,gBAAgB,EAChBM,SAAWc,GAA2CiB,QAAQC,IAAIlB,EAAGA,EAAEmB,OAAO/B,QAGhFhB,EAAMgD,MAAQC,EACdjD,EAAMwB,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/esm/objectSpread2';import a from'@babel/runtime/helpers/esm/objectWithoutProperties';import r,{AsyncCreatable as l,Async as
|
|
1
|
+
import e from'@babel/runtime/helpers/esm/objectSpread2';import a from'@babel/runtime/helpers/esm/objectWithoutProperties';import r,{AsyncCreatable as l,Async as s,Creatable as t}from'react-select';import{useClassname as o}from'../../hooks/useClassname.js';import{Root as c}from'./style.js';import{jsx as m}from'react/jsx-runtime';var p=["fluid","error","className","style"];function i(d){var{fluid:n,error:u,className:b,style:f}=d,h=a(d,p);var x=o(i.displayName,b);return m(c,{className:x,style:f,error:u,fluid:n,children:m(d.loadOptions?d.allowCreate?l:s:d.allowCreate?t:r,e(e({},h),{},{promptTextCreator:e=>"Добавить \"".concat(e,"\"")}))})}i.defaultProps={allowCreate:!1,searchable:!0,clearable:!1,addLabelText:'Добавить "{label}"?',backspaceToRemoveMessage:'Нажмите клавишу Backspace, чтобы удалить {last label}',clearAllText:'Очистить все',clearValueText:'Очистить значение',noResultsText:'Результатов не найдено',placeholder:'Выбрать ...',searchPromptText:'Введите поисковый запрос',loadingPlaceholder:'Загрузка...',autoload:!0,loadOptions:!1},i.displayName='Select';export{i as Select};
|
|
2
2
|
//# sourceMappingURL=Select.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import ReactSelect, { Async, AsyncCreatable, Creatable, ReactSelectProps } from 'react-select'\nimport { BaseProps } from '../../shared/interfaces'\nimport * as Styled from './style'\n\nexport interface SelectProps extends BaseProps, ReactSelectProps {\n fluid?: boolean\n error?: boolean\n}\n\nSelect.defaultProps = {\n allowCreate: false,\n searchable: true,\n clearable: false,\n addLabelText: 'Добавить \"{label}\"?',\n backspaceToRemoveMessage: 'Нажмите клавишу Backspace, чтобы удалить {last label}',\n clearAllText: 'Очистить все',\n clearValueText: 'Очистить значение',\n noResultsText: 'Результатов не найдено',\n placeholder: 'Выбрать ...',\n searchPromptText: 'Введите поисковый запрос',\n loadingPlaceholder: 'Загрузка...',\n autoload: true,\n loadOptions: false,\n}\n\nSelect.displayName = 'Select'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - `ReactSelectProps`\n */\nexport function Select(props: typeof Select.defaultProps & SelectProps) {\n const { fluid, error, className, style, ...reactSelectProps } = props\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n const SelectElement: typeof ReactSelect & typeof Creatable = props.loadOptions\n ? props.allowCreate\n ? AsyncCreatable\n : Async\n : props.allowCreate\n ? Creatable\n : ReactSelect\n\n return (\n <Styled.Root className={
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import ReactSelect, { Async, AsyncCreatable, Creatable, ReactSelectProps } from 'react-select'\nimport { useClassname } from 'hooks/useClassname'\nimport { BaseProps } from '../../shared/interfaces'\nimport * as Styled from './style'\n\nexport interface SelectProps extends BaseProps, ReactSelectProps {\n fluid?: boolean\n error?: boolean\n}\n\nSelect.defaultProps = {\n allowCreate: false,\n searchable: true,\n clearable: false,\n addLabelText: 'Добавить \"{label}\"?',\n backspaceToRemoveMessage: 'Нажмите клавишу Backspace, чтобы удалить {last label}',\n clearAllText: 'Очистить все',\n clearValueText: 'Очистить значение',\n noResultsText: 'Результатов не найдено',\n placeholder: 'Выбрать ...',\n searchPromptText: 'Введите поисковый запрос',\n loadingPlaceholder: 'Загрузка...',\n autoload: true,\n loadOptions: false,\n}\n\nSelect.displayName = 'Select'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - `ReactSelectProps`\n */\nexport function Select(props: typeof Select.defaultProps & SelectProps) {\n const { fluid, error, className, style, ...reactSelectProps } = props\n const _className = useClassname(Select.displayName, className)\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n const SelectElement: typeof ReactSelect & typeof Creatable = props.loadOptions\n ? props.allowCreate\n ? AsyncCreatable\n : Async\n : props.allowCreate\n ? Creatable\n : ReactSelect\n\n return (\n <Styled.Root className={_className} style={style} error={error} fluid={fluid}>\n <SelectElement {...reactSelectProps} promptTextCreator={(label: string) => `Добавить \"${label}\"`} />\n </Styled.Root>\n )\n}\n"],"names":["Select","props","fluid","error","className","style","reactSelectProps","_excluded","_className","useClassname","displayName","_jsx","Styled.Root","children","loadOptions","allowCreate","AsyncCreatable","Async","Creatable","ReactSelect","_objectSpread","promptTextCreator","label","concat","defaultProps","searchable","clearable","addLabelText","backspaceToRemoveMessage","clearAllText","clearValueText","noResultsText","placeholder","searchPromptText","loadingPlaceholder","autoload"],"mappings":"sXAiCO,SAASA,EAAOC,GACrB,IAAMC,MAAEA,EAAFC,MAASA,EAATC,UAAgBA,EAAhBC,MAA2BA,GAA+BJ,EAArBK,IAAqBL,EAAhEM,GACA,IAAMC,EAAaC,EAAaT,EAAOU,YAAaN,GAYpD,OACEO,EAACC,EAAD,CAAaR,UAAWI,EAAYH,MAAOA,EAAOF,MAAOA,EAAOD,MAAOA,EAAvEW,SACEF,EAVyDV,EAAMa,YAC/Db,EAAMc,YACJC,EACAC,EACFhB,EAAMc,YACNG,EACAC,EAIAC,EAAAA,EAAA,GAAmBd,GAAnB,GAAA,CAAqCe,kBAAoBC,GAAD,cAAAC,OAAgCD,EAAhC,WAvC9DtB,EAAOwB,aAAe,CACpBT,aAAAA,EACAU,YAAY,EACZC,WAAW,EACXC,aAAc,sBACdC,yBAA0B,wDAC1BC,aAAc,eACdC,eAAgB,oBAChBC,cAAe,yBACfC,YAAa,cACbC,iBAAkB,2BAClBC,mBAAoB,cACpBC,UAAU,EACVrB,aAAa,GAGfd,EAAOU,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/esm/objectSpread2';import{
|
|
1
|
+
import e from'@babel/runtime/helpers/esm/objectSpread2';import s from'@babel/runtime/helpers/esm/objectWithoutProperties';import{useClassname as r}from'../../hooks/useClassname.js';import{Root as a}from'./style.js';import{jsx as m}from'react/jsx-runtime';var o=["className"];function t(i){var{className:p}=i,l=s(i,o);var n=r(t.displayName,p);return m(a,e({className:n},l))}t.defaultProps={size:'m'},t.displayName='Spinner';export{t as Spinner};
|
|
2
2
|
//# sourceMappingURL=Spinner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.js","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import { ResponsiveProperty } from '../../mixins/responsive-property'\nimport { BaseProps } from '../../shared/interfaces'\nimport * as Styled from './style'\n\nexport interface SpinnerProps extends BaseProps, ResponsiveProperty<'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 * - [`ResponsiveProperty<'size'>`](#/Миксины)\n */\nexport function Spinner(props: typeof Spinner.defaultProps & SpinnerProps) {\n return <Styled.Root {...props} />\n}\n"],"names":["Spinner","props","_jsx","Styled.Root","_objectSpread","defaultProps","size"
|
|
1
|
+
{"version":3,"file":"Spinner.js","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import { useClassname } from 'hooks/useClassname'\nimport { ResponsiveProperty } from '../../mixins/responsive-property'\nimport { BaseProps } from '../../shared/interfaces'\nimport * as Styled from './style'\n\nexport interface SpinnerProps extends BaseProps, ResponsiveProperty<'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 * - [`ResponsiveProperty<'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":"mRA+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"}
|
package/components/Text/Text.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{TextHeading as e}from'../Text.Heading/Text.Heading.js';import{TextEllipse as
|
|
1
|
+
import{TextHeading as e}from'../Text.Heading/Text.Heading.js';import{TextEllipse as s}from'../Text.Ellipse/Text.Ellipse.js';import{useClassname as i}from'../../hooks/useClassname.js';import{Root as t}from'./style.js';import{jsx as l}from'react/jsx-runtime';function n(e){var{as:s="div",children:a,weight:o="normal",content:r,textAlign:m,underlineLinks:z,className:d,style:p,lineHeight:g="m",fontStyle:x="normal",title:y,color:c,size:h="m",sizeXS:L,sizeS:S,sizeM:f,sizeL:u,sizeXL:T,display:H}=e;var j=i(n.displayName,d);return l(t,a?{as:s,color:c,className:j,title:y,weight:o,lineHeight:g,textAlign:m,fontStyle:x,underlineLinks:z,size:h,sizeXS:L,sizeS:S,sizeM:f,sizeL:u,sizeXL:T,display:H,style:p,children:a}:{as:s,color:c,className:j,title:y,weight:o,lineHeight:g,textAlign:m,fontStyle:x,underlineLinks:z,size:h,sizeXS:L,sizeS:S,sizeM:f,sizeL:u,sizeXL:T,display:H,style:p,dangerouslySetInnerHTML:{__html:r||''}})}n.Heading=e,n.Ellipse=s,n.displayName='Text';export{n as Text};
|
|
2
2
|
//# sourceMappingURL=Text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { TextHeading } from '../../components/Text.Heading'\nimport { TextEllipse } from '../../components/Text.Ellipse'\nimport { Color } from '../../mixins/color'\nimport { ResponsiveProperty } 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, ResponsiveProperty<'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 * - [`ResponsiveProperty<'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,\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 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","style","lineHeight","fontStyle","title","color","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","display","_jsx","Styled.Root","dangerouslySetInnerHTML","__html","Heading","TextHeading","Ellipse","TextEllipse"
|
|
1
|
+
{"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { TextHeading } from '../../components/Text.Heading'\nimport { TextEllipse } from '../../components/Text.Ellipse'\nimport { Color } from '../../mixins/color'\nimport { ResponsiveProperty } from '../../mixins/responsive-property'\nimport { Display } from '../../mixins/display'\nimport { BaseProps } from '../../shared/interfaces'\nimport { useClassname } from '../../hooks/useClassname'\nimport * as Styled from './style'\n\nexport interface TextProps extends BaseProps, Color, ResponsiveProperty<'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 * - [`ResponsiveProperty<'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/dts/index.d.ts
CHANGED
|
@@ -323,6 +323,7 @@ interface Theme {
|
|
|
323
323
|
modal: number;
|
|
324
324
|
tooltip: number;
|
|
325
325
|
};
|
|
326
|
+
classNamePrefix: string;
|
|
326
327
|
}
|
|
327
328
|
declare const theme: Theme;
|
|
328
329
|
|
|
@@ -994,7 +995,7 @@ interface BadgeProps extends BaseProps, Color, Display {
|
|
|
994
995
|
* - [`Color`](#/Миксины)
|
|
995
996
|
* - [`Display`](#/Миксины)
|
|
996
997
|
*/
|
|
997
|
-
declare function Badge({ children, content, textProps, round, display, ...restProps }: BadgeProps): JSX.Element;
|
|
998
|
+
declare function Badge({ children, content, className, textProps, round, display, ...restProps }: BadgeProps): JSX.Element;
|
|
998
999
|
declare namespace Badge {
|
|
999
1000
|
var displayName: string;
|
|
1000
1001
|
}
|
|
@@ -1252,7 +1253,7 @@ interface PaperProps extends BaseProps, Display, Color, ResponsiveProperty<'padd
|
|
|
1252
1253
|
* - [`Color`](#/Миксины)
|
|
1253
1254
|
* - [`ResponsiveProperty<'padding'>`](#/Миксины)
|
|
1254
1255
|
*/
|
|
1255
|
-
declare function Paper({ padding, rounded, shadow, ...props }: PaperProps): JSX.Element;
|
|
1256
|
+
declare function Paper({ padding, rounded, shadow, className, ...props }: PaperProps): JSX.Element;
|
|
1256
1257
|
declare namespace Paper {
|
|
1257
1258
|
var displayName: string;
|
|
1258
1259
|
}
|
|
@@ -1736,7 +1737,7 @@ interface SpinnerProps extends BaseProps, ResponsiveProperty<'size'> {
|
|
|
1736
1737
|
* - [`BaseProps`](#/Миксины)
|
|
1737
1738
|
* - [`ResponsiveProperty<'size'>`](#/Миксины)
|
|
1738
1739
|
*/
|
|
1739
|
-
declare function Spinner(props: typeof Spinner.defaultProps & SpinnerProps): JSX.Element;
|
|
1740
|
+
declare function Spinner({ className, ...props }: typeof Spinner.defaultProps & SpinnerProps): JSX.Element;
|
|
1740
1741
|
declare namespace Spinner {
|
|
1741
1742
|
var defaultProps: {
|
|
1742
1743
|
size: string;
|