@foxford/ui 2.23.0-beta-bf06722-20240422 → 2.24.0

package/components/Skeleton/Skeleton.js

@@ -0,0 +1,2 @@
+import e from'@babel/runtime/helpers/objectSpread2';import{forwardRef as r,isValidElement as t,cloneElement as l}from'react';import{usePalette as o}from'../../hooks/usePalette.js';import{Root as s}from'./style.js';import{jsx as a,Fragment as i}from'react/jsx-runtime';var n=r(((r,n)=>{var c=o(r);return a(s,e(e({},r),{},{palette:c,ref:n,children:r.children?t(r.children)&&'object'==typeof r.children.props&&null!==r.children.props&&!r.children.props.children?l(r.children,{},a(i,{children:" "})):r.children:a(i,{children:" "})}))}));export{n as Skeleton};
+//# sourceMappingURL=Skeleton.js.map

package/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef, isValidElement, cloneElement } from 'react'\nimport { usePalette } from 'hooks/usePalette'\nimport * as Styled from './style'\nimport type { SkeletonProps } from './types'\n\n/**\n *\n * Component accepts all \\<div\\> attributes.\n *\n * Responsive \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [SkeletonProps](https://github.com/foxford/ui/blob/master/src/components/Skeleton/types.ts)\n */\nconst Skeleton: React.ForwardRefExoticComponent<SkeletonProps> = forwardRef<HTMLDivElement, SkeletonProps>(\n  (props, ref) => {\n    const palette = usePalette(props)\n\n    return (\n      <Styled.Root {...props} palette={palette} ref={ref}>\n        {!props.children ? (\n          <>&nbsp;</>\n        ) : isValidElement(props.children) &&\n          typeof props.children.props === 'object' &&\n          props.children.props !== null &&\n          !props.children.props.children ? (\n          cloneElement(props.children, {}, <>&nbsp;</>)\n        ) : (\n          props.children\n        )}\n      </Styled.Root>\n    )\n  }\n)\n\nexport { Skeleton }\n"],"names":["Skeleton","forwardRef","props","ref","palette","usePalette","_jsx","Styled.Root","children","isValidElement","cloneElement","_Fragment"],"mappings":"4QAeMA,IAAAA,EAA2DC,GAC/D,CAACC,EAAOC,KACN,IAAMC,EAAUC,EAAWH,GAE3B,OACEI,EAACC,SAAgBL,GAAjB,GAAA,CAAwBE,QAASA,EAASD,IAAKA,EAA/CK,SACIN,EAAMM,SAEJC,EAAeP,EAAMM,WACS,iBAAzBN,EAAMM,SAASN,OACG,OAAzBA,EAAMM,SAASN,QACdA,EAAMM,SAASN,MAAMM,SACtBE,EAAaR,EAAMM,SAAU,GAAIF,EAAAK,EAAA,CAAAH,SAAA,OAEjCN,EAAMM,SAPNF,EAAAK,EAAA,CAAAH,SAAA"}

package/components/Skeleton/style.js

@@ -0,0 +1,2 @@
+import o from'@babel/runtime/helpers/objectSpread2';import r,{keyframes as e,css as n}from'styled-components';import{createShouldForwardProp as t}from'../../shared/utils/style.js';import{responsiveMargin as i}from'../../mixins/responsive-margin.js';var a=t((o=>!['inline','round','borderRadius','width','height','animationDuration','animationDelay','onColored'].includes(o)));var l=e(["0%{background-position-x:-100%;}100%{background-position-x:200%;}"]);var d=o=>"\n  background-color: ".concat(o.color,";\n  background-image: linear-gradient(90deg, ").concat(o.gradientColor," 0%, ").concat(o.gradientHighlightColor," 50%, ").concat(o.gradientColor," 100%);\n");var s={onColored:{secondary:n(["",""],(r=>d(o({color:r.theme.colors['skeleton-oncolor-secondary'],gradientColor:r.theme.colors['skeleton-gradient-from-color-oncolor'],gradientHighlightColor:r.theme.colors['skeleton-gradient-to-color-oncolor']},r.palette)))),primary:n(["",""],(r=>d(o({color:r.theme.colors['skeleton-oncolor-primary'],gradientColor:r.theme.colors['skeleton-gradient-from-color-oncolor'],gradientHighlightColor:r.theme.colors['skeleton-gradient-to-color-oncolor']},r.palette))))},default:{secondary:n(["",""],(r=>d(o({color:r.theme.colors['skeleton-onmain-secondary'],gradientColor:r.theme.colors['skeleton-gradient-from-color-onmain'],gradientHighlightColor:r.theme.colors['skeleton-gradient-to-color-onmain']},r.palette)))),primary:n(["",""],(r=>d(o({color:r.theme.colors['skeleton-onmain-primary'],gradientColor:r.theme.colors['skeleton-gradient-from-color-onmain'],gradientHighlightColor:r.theme.colors['skeleton-gradient-to-color-onmain']},r.palette))))}};var c=r.div.withConfig({shouldForwardProp:a}).withConfig({componentId:"fox-ui__sc-4t2o9u-0"})([""," "," ",""],(o=>{var r,e;var t=o.round?'50%':8;'string'!=typeof o.borderRadius&&'number'!=typeof o.borderRadius||(t=o.borderRadius);var i=o.width?o.width:'auto';var a=o.height?o.height:'auto';return n(["box-sizing:border-box;display:",";width:",";height:",";border-radius:",";flex-shrink:0;background-origin:border-box;background-size:50% 100%;background-repeat:no-repeat;animation-name:",";animation-duration:","ms;animation-delay:","ms;animation-iteration-count:infinite;& > *{visibility:hidden;}"],o.inline?'inline-block':'block','string'==typeof i?i:"".concat(i,"px"),'string'==typeof a?a:"".concat(a,"px"),'string'==typeof t?t:"".concat(t,"px"),l,null!==(r=o.animationDuration)&&void 0!==r?r:2e3,null!==(e=o.animationDelay)&&void 0!==e?e:500)}),(o=>{var r=o.onColored?s.onColored:s.default;return o.secondary?r.secondary:r.primary}),i);export{c as Root};
+//# sourceMappingURL=style.js.map

package/components/Skeleton/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../../src/components/Skeleton/style.ts"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { StyledSkeletonProps, SkeletonPalette } from './types'\n\nconst shouldForwardSkeletonProp = createShouldForwardProp(\n  (propKey) =>\n    ![\n      'inline',\n      'round',\n      'borderRadius',\n      'width',\n      'height',\n      'animationDuration',\n      'animationDelay',\n      'onColored',\n    ].includes(propKey)\n)\n\nconst shiftAnimation = keyframes`\n  0% {\n    background-position-x: -100%;\n  }\n  100% {\n    background-position-x: 200%;\n  }\n`\n\nconst template = (palette: SkeletonPalette) => `\n  background-color: ${palette.color};\n  background-image: linear-gradient(90deg, ${palette.gradientColor} 0%, ${palette.gradientHighlightColor} 50%, ${palette.gradientColor} 100%);\n`\n\nconst COLOR_SCHEMA = {\n  onColored: {\n    secondary: css<StyledSkeletonProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['skeleton-oncolor-secondary'],\n          gradientColor: props.theme.colors['skeleton-gradient-from-color-oncolor'],\n          gradientHighlightColor: props.theme.colors['skeleton-gradient-to-color-oncolor'],\n          ...props.palette,\n        })}\n    `,\n    primary: css<StyledSkeletonProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['skeleton-oncolor-primary'],\n          gradientColor: props.theme.colors['skeleton-gradient-from-color-oncolor'],\n          gradientHighlightColor: props.theme.colors['skeleton-gradient-to-color-oncolor'],\n          ...props.palette,\n        })}\n    `,\n  },\n  default: {\n    secondary: css<StyledSkeletonProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['skeleton-onmain-secondary'],\n          gradientColor: props.theme.colors['skeleton-gradient-from-color-onmain'],\n          gradientHighlightColor: props.theme.colors['skeleton-gradient-to-color-onmain'],\n          ...props.palette,\n        })}\n    `,\n    primary: css<StyledSkeletonProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['skeleton-onmain-primary'],\n          gradientColor: props.theme.colors['skeleton-gradient-from-color-onmain'],\n          gradientHighlightColor: props.theme.colors['skeleton-gradient-to-color-onmain'],\n          ...props.palette,\n        })}\n    `,\n  },\n}\n\nexport const Root = styled.div.withConfig<StyledSkeletonProps>({\n  shouldForwardProp: shouldForwardSkeletonProp,\n})`\n  ${(props) => {\n    let borderRadius = props.round ? '50%' : 8\n    if (typeof props.borderRadius === 'string' || typeof props.borderRadius === 'number') {\n      borderRadius = props.borderRadius\n    }\n\n    const width = props.width ? props.width : 'auto'\n    const height = props.height ? props.height : 'auto'\n\n    return css`\n      box-sizing: border-box;\n      display: ${props.inline ? 'inline-block' : 'block'};\n      width: ${typeof width === 'string' ? width : `${width}px`};\n      height: ${typeof height === 'string' ? height : `${height}px`};\n      border-radius: ${typeof borderRadius === 'string' ? borderRadius : `${borderRadius}px`};\n      flex-shrink: 0;\n      background-origin: border-box;\n      background-size: 50% 100%;\n      background-repeat: no-repeat;\n      animation-name: ${shiftAnimation};\n      animation-duration: ${props.animationDuration ?? 2000}ms;\n      animation-delay: ${props.animationDelay ?? 500}ms;\n      animation-iteration-count: infinite;\n\n      & > * {\n        visibility: hidden;\n      }\n    `\n  }}\n\n  ${(props) => {\n    const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n\n    return props.secondary ? schema.secondary : schema.primary\n  }}\n\n  ${responsiveMargin}\n`\n"],"names":["shouldForwardSkeletonProp","createShouldForwardProp","propKey","includes","shiftAnimation","keyframes","template","palette","color","gradientColor","concat","gradientHighlightColor","COLOR_SCHEMA","onColored","secondary","css","props","_objectSpread","theme","colors","primary","default","Root","styled","div","withConfig","shouldForwardProp","componentId","_props$animationDurat","_props$animationDelay","borderRadius","round","width","height","inline","animationDuration","animationDelay","schema","responsiveMargin"],"mappings":"yPAKA,IAAMA,EAA4BC,GAC/BC,IACE,CACC,SACA,QACA,eACA,QACA,SACA,oBACA,iBACA,aACAC,SAASD,KAGf,IAAME,EAAiBC,EAAvB,CAAA,sEASA,IAAMC,EAAYC,mCACIA,EAAQC,MACeD,kDAAAA,OAAAA,EAAQE,cAFpC,SAAAC,OAEyDH,EAAQI,wCAA+BJ,EAAQE,cAFzH,aAKA,IAAMG,EAAe,CACnBC,UAAW,CACTC,UAAWC,EACNC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,8BAC1BV,cAAeO,EAAME,MAAMC,OAAO,wCAClCR,uBAAwBK,EAAME,MAAMC,OAAO,uCACxCH,EAAMT,YAGfa,QAASL,EACJC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,4BAC1BV,cAAeO,EAAME,MAAMC,OAAO,wCAClCR,uBAAwBK,EAAME,MAAMC,OAAO,uCACxCH,EAAMT,aAIjBc,QAAS,CACPP,UAAWC,EACNC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,6BAC1BV,cAAeO,EAAME,MAAMC,OAAO,uCAClCR,uBAAwBK,EAAME,MAAMC,OAAO,sCACxCH,EAAMT,YAGfa,QAASL,EACJC,CAAAA,GAAAA,KAAAA,GACDV,EAAQW,EAAA,CACNT,MAAOQ,EAAME,MAAMC,OAAO,2BAC1BV,cAAeO,EAAME,MAAMC,OAAO,uCAClCR,uBAAwBK,EAAME,MAAMC,OAAO,sCACxCH,EAAMT,cAMZ,IAAMe,EAAOC,EAAOC,IAAIC,WAAgC,CAC7DC,kBAAmB1B,IADJyB,WAAA,CAAAE,YAAA,uBAAGJ,CAAH,CAAA,GAAA,IAAA,IAAA,KAGZP,IAAU,IAAAY,EAAAC,EACX,IAAIC,EAAed,EAAMe,MAAQ,MAAQ,EACP,iBAAvBf,EAAMc,cAA2D,iBAAvBd,EAAMc,eACzDA,EAAed,EAAMc,cAGvB,IAAME,EAAQhB,EAAMgB,MAAQhB,EAAMgB,MAAQ,OAC1C,IAAMC,EAASjB,EAAMiB,OAASjB,EAAMiB,OAAS,OAE7C,OAAOlB,EAEMC,CAAAA,iCAAAA,UAAAA,WAAAA,kBAAAA,mHAAAA,uBAAAA,sBAAAA,mEAAAA,EAAMkB,OAAS,eAAiB,QACjB,iBAAVF,EAAqBA,EAA5B,GAAAtB,OAAuCsB,EAAvC,MACmB,iBAAXC,EAAsBA,YAAYA,EAAzC,MAC+B,iBAAjBH,EAA4BA,EAAkBA,GAAAA,OAAAA,EALxE,MAUoB1B,EAC+B,QAA3BY,EAAAA,EAAMmB,yBAAAA,IAAqBP,EAAAA,EAAA,IAXnD,UAYqBZ,EAAMoB,sBAZ3B,IAAAP,EAAAA,EAY6C,QAS5Cb,IACD,IAAMqB,EAASrB,EAAMH,UAAYD,EAAaC,UAAYD,EAAaS,QAEvE,OAAOL,EAAMF,UAAYuB,EAAOvB,UAAYuB,EAAOjB,UAGnDkB"}

package/dts/index.d.ts

@@ -275,7 +275,15 @@ declare enum BaseColorNames {
     'product-bg-course' = "product-bg-course",
     'product-bg-tutor' = "product-bg-tutor",
     'product-bg-group' = "product-bg-group",
-    'product-bg-complect' = "product-bg-complect"
+    'product-bg-complect' = "product-bg-complect",
+    'skeleton-onmain-primary' = "skeleton-onmain-primary",
+    'skeleton-onmain-secondary' = "skeleton-onmain-secondary",
+    'skeleton-gradient-from-color-onmain' = "skeleton-gradient-from-color-onmain",
+    'skeleton-gradient-to-color-onmain' = "skeleton-gradient-to-color-onmain",
+    'skeleton-oncolor-primary' = "skeleton-oncolor-primary",
+    'skeleton-oncolor-secondary' = "skeleton-oncolor-secondary",
+    'skeleton-gradient-from-color-oncolor' = "skeleton-gradient-from-color-oncolor",
+    'skeleton-gradient-to-color-oncolor' = "skeleton-gradient-to-color-oncolor"
 }
 declare enum BrandColorNames {
     'content-brand-primary' = "content-brand-primary",
@@ -490,6 +498,14 @@ declare const ColorNames: {
     'product-bg-tutor': (typeof BaseColorNames)["product-bg-tutor"];
     'product-bg-group': (typeof BaseColorNames)["product-bg-group"];
     'product-bg-complect': (typeof BaseColorNames)["product-bg-complect"];
+    'skeleton-onmain-primary': (typeof BaseColorNames)["skeleton-onmain-primary"];
+    'skeleton-onmain-secondary': (typeof BaseColorNames)["skeleton-onmain-secondary"];
+    'skeleton-gradient-from-color-onmain': (typeof BaseColorNames)["skeleton-gradient-from-color-onmain"];
+    'skeleton-gradient-to-color-onmain': (typeof BaseColorNames)["skeleton-gradient-to-color-onmain"];
+    'skeleton-oncolor-primary': (typeof BaseColorNames)["skeleton-oncolor-primary"];
+    'skeleton-oncolor-secondary': (typeof BaseColorNames)["skeleton-oncolor-secondary"];
+    'skeleton-gradient-from-color-oncolor': (typeof BaseColorNames)["skeleton-gradient-from-color-oncolor"];
+    'skeleton-gradient-to-color-oncolor': (typeof BaseColorNames)["skeleton-gradient-to-color-oncolor"];
     profession: UnitColorNames.profession;
     professionDark: UnitColorNames.professionDark;
     camps: UnitColorNames.camps;
@@ -3593,4 +3609,48 @@ interface FormLabelProps extends ResponsiveSizeProps, ResponsiveMarginProps, Rea
  */
 declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps>;
 
-export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Color, ColorNames, ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FormLabel, HEX, INITIAL_MASK, Icon, Input, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };
+declare type SkeletonPalette = {
+    color: CSSColor;
+    gradientColor: CSSColor;
+    gradientHighlightColor: CSSColor;
+};
+interface SkeletonProps extends ResponsiveMarginProps, React.ComponentPropsWithRef<'div'> {
+    /** Element to infer sizing */
+    children?: React.ReactNode;
+    /** Custom colors */
+    palette?: Partial<Record<keyof SkeletonPalette, Color>>;
+    /** Display 'inline-block' */
+    inline?: boolean;
+    /** Root border-radius: 50% */
+    round?: boolean;
+    /** Root border-radius */
+    borderRadius?: string | number;
+    /** Root width */
+    width?: string | number;
+    /** Root height */
+    height?: string | number;
+    /** Value (ms) to control animation speed */
+    animationDuration?: number;
+    /** Delay to animation start (ms) to avoid flicker at fast connection */
+    animationDelay?: number;
+    /** Appearance variant */
+    primary?: boolean;
+    /** Appearance variant */
+    secondary?: boolean;
+    /** Appearance variant */
+    onColored?: boolean;
+}
+
+/**
+ *
+ * Component accepts all \<div\> attributes.
+ *
+ * Responsive "margin" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [SkeletonProps](https://github.com/foxford/ui/blob/master/src/components/Skeleton/types.ts)
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps>;
+
+export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Color, ColorNames, ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FormLabel, HEX, INITIAL_MASK, Icon, Input, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Skeleton, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };

package/hooks/usePalette.js

@@ -0,0 +1,2 @@
+import{useTheme as e}from'styled-components';var r=r=>{var{palette:t}=r;var a=e();return t?Object.keys(t).reduce(((e,r)=>{var o;return e[r]=null!==(o=a.colors[t[r]])&&void 0!==o?o:t[r],e}),{}):{}};export{r as usePalette};
+//# sourceMappingURL=usePalette.js.map

package/hooks/usePalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePalette.js","sources":["../../../src/hooks/usePalette.ts"],"sourcesContent":["import { useTheme } from 'styled-components'\nimport type { ColorPaletteKey, Color, CSSColor } from 'shared/types'\n\ntype PropsWithPalette = {\n  palette?: Partial<Record<ColorPaletteKey, Color>>\n}\n\nexport const usePalette = ({ palette }: PropsWithPalette): Record<ColorPaletteKey, CSSColor> => {\n  const theme = useTheme()\n\n  return palette\n    ? Object.keys(palette).reduce((injected, key) => {\n        injected[key] = theme.colors[palette[key]] ?? palette[key]\n        return injected\n      }, {} as Record<ColorPaletteKey, CSSColor>)\n    : {}\n}\n"],"names":["usePalette","_ref","palette","theme","useTheme","Object","keys","reduce","injected","key","_theme$colors$palette","colors"],"mappings":"6CAOO,IAAMA,EAAaC,IAAsE,IAArEC,QAAEA,GAAmED,EAC9F,IAAME,EAAQC,IAEd,OAAOF,EACHG,OAAOC,KAAKJ,GAASK,SAAQC,EAAUC,KAAQ,IAAAC,EAE7C,OADAF,EAASC,WAAON,EAAAA,EAAMQ,OAAOT,EAAQO,WAAAA,QAASP,EAAQO,GAC/CD,IACN,IACH"}