@foxford/ui 2.26.1 → 2.27.0-beta-b8dc728-20240507

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.
Files changed (61) hide show
  1. package/components/ActionBtn/ActionBtn.js.map +1 -1
  2. package/components/Anchor/Anchor.js +1 -1
  3. package/components/Anchor/Anchor.js.map +1 -1
  4. package/components/Arrow/Arrow.js +1 -1
  5. package/components/Arrow/Arrow.js.map +1 -1
  6. package/components/Badge/Badge.js +1 -1
  7. package/components/Badge/Badge.js.map +1 -1
  8. package/components/Button/Button.js +1 -1
  9. package/components/Button/Button.js.map +1 -1
  10. package/components/Button/style.js +1 -1
  11. package/components/Button/style.js.map +1 -1
  12. package/components/FormInputLabel/FormInputLabel.js +1 -1
  13. package/components/FormInputLabel/FormInputLabel.js.map +1 -1
  14. package/components/FormLabel/FormLabel.js +1 -1
  15. package/components/FormLabel/FormLabel.js.map +1 -1
  16. package/components/Icon/Icon.js +1 -1
  17. package/components/Icon/Icon.js.map +1 -1
  18. package/components/Icon/constants.js +2 -0
  19. package/components/Icon/constants.js.map +1 -0
  20. package/components/Icon/icons.js +1 -1
  21. package/components/Icon/icons.js.map +1 -1
  22. package/components/Icon/style.js +1 -1
  23. package/components/Icon/style.js.map +1 -1
  24. package/components/Input/Input.js +1 -1
  25. package/components/Input/Input.js.map +1 -1
  26. package/components/PopoverComponent/PopoverComponent.js +1 -1
  27. package/components/PopoverComponent/PopoverComponent.js.map +1 -1
  28. package/components/Skeleton/Skeleton.js +1 -1
  29. package/components/Skeleton/Skeleton.js.map +1 -1
  30. package/components/TooltipComponent/TooltipComponent.js +1 -1
  31. package/components/TooltipComponent/TooltipComponent.js.map +1 -1
  32. package/dts/index.d.ts +44 -128
  33. package/hocs/withMergedProps.js +1 -1
  34. package/hocs/withMergedProps.js.map +1 -1
  35. package/hooks/useMergedPalette.js +2 -0
  36. package/hooks/useMergedPalette.js.map +1 -0
  37. package/hooks/useMergedProps.js +2 -0
  38. package/hooks/useMergedProps.js.map +1 -0
  39. package/hooks/useMergedSizes.js +2 -0
  40. package/hooks/useMergedSizes.js.map +1 -0
  41. package/index.cjs.js +1 -1
  42. package/index.cjs.js.map +1 -1
  43. package/package.json +3 -3
  44. package/components/Arrow/images/arrow-top.module.svg.js +0 -2
  45. package/components/Arrow/images/arrow-top.module.svg.js.map +0 -1
  46. package/components/Button/images/loader.module.svg.js +0 -2
  47. package/components/Button/images/loader.module.svg.js.map +0 -1
  48. package/components/Button/images/success.module.svg.js +0 -2
  49. package/components/Button/images/success.module.svg.js.map +0 -1
  50. package/components/FormLabel/images/hint.module.svg.js +0 -2
  51. package/components/FormLabel/images/hint.module.svg.js.map +0 -1
  52. package/components/Input/images/minus.module.svg.js +0 -2
  53. package/components/Input/images/minus.module.svg.js.map +0 -1
  54. package/components/Input/images/plus.module.svg.js +0 -2
  55. package/components/Input/images/plus.module.svg.js.map +0 -1
  56. package/components/PopoverComponent/images/close.module.svg.js +0 -2
  57. package/components/PopoverComponent/images/close.module.svg.js.map +0 -1
  58. package/components/TooltipComponent/images/close.module.svg.js +0 -2
  59. package/components/TooltipComponent/images/close.module.svg.js.map +0 -1
  60. package/hooks/usePalette.js +0 -2
  61. package/hooks/usePalette.js.map +0 -1
package/dts/index.d.ts CHANGED
@@ -3,6 +3,7 @@ import * as react from 'react';
3
3
  import { CSSProperties, Component, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
4
4
  import * as styled_components from 'styled-components';
5
5
  import { DefaultTheme, FlattenSimpleInterpolation, CSSObject, Interpolation, ThemeProps, SimpleInterpolation, css, StyledProps } from 'styled-components';
6
+ import * as IconPack from '@foxford/icon-pack';
6
7
  import { Props, PopperInstance, PlacementOptions, SelectorOrElement, Styles } from 'react-floater/lib/types';
7
8
  import { Classes } from 'react-modal';
8
9
  import * as rc_scrollbars_lib_Scrollbars_types from 'rc-scrollbars/lib/Scrollbars/types';
@@ -1049,6 +1050,38 @@ declare const Text: React.ForwardRefExoticComponent<TextProps> & {
1049
1050
  Ellipse: typeof TextEllipse;
1050
1051
  };
1051
1052
 
1053
+ declare type IconPackIconName = Uncapitalize<keyof typeof IconPack>;
1054
+ declare type IconNameDefault = 'book' | 'blackBoard' | 'burger' | 'eye' | 'email' | 'sort' | 'unsort' | 'person' | 'diamond' | 'diamondFilled' | 'diamondSolid' | 'infoInverse' | 'list' | 'login' | 'logout' | 'fire' | 'camps' | 'cart' | 'clock' | 'clockFilled' | 'courses' | 'discount' | 'externat' | 'headphones' | 'page' | 'priceTag' | 'phone' | 'prof' | 'star' | 'settings' | 'student' | 'target' | 'textbook' | 'trophy' | 'message' | 'wallet' | 'edit' | 'copy' | 'print' | 'objective' | 'present' | 'coins' | 'calendar' | 'calendar_simple' | 'chevronDown' | 'chevronUp' | 'chevronRight' | 'chevronLeft' | 'cross' | 'dialog' | 'dropDownArrow' | 'externalLink' | 'file' | 'fileBordered' | 'lessons' | 'pencil' | 'phoneNoFill' | 'radioChecked' | 'radioNotChecked' | 'search' | 'tasks' | 'tinyCross' | 'sharpCross' | 'plus' | 'plusThin' | 'play' | 'reload' | 'checkCircle' | 'info' | 'check' | 'home' | 'questionFilled' | 'document' | 'cancel' | 'playPause' | 'video';
1055
+ declare type IconName = IconPackIconName | IconNameDefault;
1056
+ interface IconProps extends ResponsiveSizeProps, Omit<React.ComponentPropsWithRef<'span'>, 'children'> {
1057
+ /** UI: brand (v3), or default (v2) */
1058
+ preset?: ThemePreset;
1059
+ /** Icon color */
1060
+ color?: Color;
1061
+ /** Built-in icon name */
1062
+ name?: IconName;
1063
+ /** Custom icon element */
1064
+ icon?: JSX.Element;
1065
+ /** Value for vertical-align */
1066
+ vAlign?: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline';
1067
+ /** @ignore @deprecated */
1068
+ as?: React.ElementType<any>;
1069
+ }
1070
+
1071
+ /**
1072
+ *
1073
+ * Component accepts all \<span\> attributes.
1074
+ *
1075
+ * Responsive "size" props are supported.
1076
+ *
1077
+ * Exposed "ref" attached to root node.
1078
+ *
1079
+ * See full [IconProps](https://github.com/foxford/ui/blob/master/src/components/Icon/types.ts)
1080
+ */
1081
+ declare const Icon: React.ForwardRefExoticComponent<IconProps>;
1082
+
1083
+ declare const defaultIcons: Record<IconNameDefault, React.FC>;
1084
+
1052
1085
  declare global {
1053
1086
  // Some users of this package are don't use "dom" libs
1054
1087
  interface EventTarget {}
@@ -1121,125 +1154,6 @@ type TransitionPromptHook<S = LocationState> = History.TransitionPromptHook<S>;
1121
1154
  type Hash = History.Hash;
1122
1155
  type Href = History.Href;
1123
1156
 
1124
- interface VAlign {
1125
- vAlign?: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline';
1126
- }
1127
- declare const vAlign: (vAlign: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline') => styled_components.FlattenSimpleInterpolation;
1128
-
1129
- declare enum IconNames {
1130
- book = "book",
1131
- blackBoard = "blackBoard",
1132
- burger = "burger",
1133
- eye = "eye",
1134
- email = "email",
1135
- sort = "sort",
1136
- unsort = "unsort",
1137
- person = "person",
1138
- diamond = "diamond",
1139
- diamondFilled = "diamondFilled",
1140
- diamondSolid = "diamondSolid",
1141
- infoInverse = "infoInverse",
1142
- list = "list",
1143
- login = "login",
1144
- logout = "logout",
1145
- fire = "fire",
1146
- camps = "camps",
1147
- cart = "cart",
1148
- clock = "clock",
1149
- clockFilled = "clockFilled",
1150
- courses = "courses",
1151
- discount = "discount",
1152
- externat = "externat",
1153
- headphones = "headphones",
1154
- page = "page",
1155
- priceTag = "priceTag",
1156
- phone = "phone",
1157
- prof = "prof",
1158
- star = "star",
1159
- settings = "settings",
1160
- student = "student",
1161
- target = "target",
1162
- textbook = "textbook",
1163
- trophy = "trophy",
1164
- message = "message",
1165
- wallet = "wallet",
1166
- edit = "edit",
1167
- copy = "copy",
1168
- print = "print",
1169
- objective = "objective",
1170
- present = "present",
1171
- coins = "coins",
1172
- calendar = "calendar",
1173
- calendar_simple = "calendar_simple",
1174
- chevronDown = "chevronDown",
1175
- chevronUp = "chevronUp",
1176
- chevronRight = "chevronRight",
1177
- chevronLeft = "chevronLeft",
1178
- cross = "cross",
1179
- dialog = "dialog",
1180
- dropDownArrow = "dropDownArrow",
1181
- externalLink = "externalLink",
1182
- file = "file",
1183
- fileBordered = "fileBordered",
1184
- lessons = "lessons",
1185
- pencil = "pencil",
1186
- phoneNoFill = "phoneNoFill",
1187
- radioChecked = "radioChecked",
1188
- radioNotChecked = "radioNotChecked",
1189
- search = "search",
1190
- tasks = "tasks",
1191
- tinyCross = "tinyCross",
1192
- sharpCross = "sharpCross",
1193
- plus = "plus",
1194
- plusThin = "plusThin",
1195
- play = "play",
1196
- reload = "reload",
1197
- checkCircle = "checkCircle",
1198
- info = "info",
1199
- check = "check",
1200
- home = "home",
1201
- questionFilled = "questionFilled",
1202
- document = "document",
1203
- cancel = "cancel",
1204
- playPause = "playPause",
1205
- video = "video"
1206
- }
1207
- declare type Icon$1 = React.FC<React.SVGProps<SVGSVGElement>> | (() => JSX.Element);
1208
- declare const defaultIcons: Record<IconNames, Icon$1>;
1209
-
1210
- interface IconProps extends BaseProps, ColorProperty, VAlign, ResponsiveNamedProperty<'size'> {
1211
- /**
1212
- * Children react node
1213
- */
1214
- children?: React.ReactNode;
1215
- /**
1216
- * Name of default icon
1217
- */
1218
- name?: keyof typeof IconNames;
1219
- /**
1220
- * Object with icon's svg. Use for custom icon insertion
1221
- */
1222
- icon?: React.ReactNode;
1223
- /**
1224
- * Show pointer cursor on hover?
1225
- */
1226
- pointer?: boolean;
1227
- /** Root node polymorphic type */
1228
- as?: React.ElementType<any>;
1229
- }
1230
- /**
1231
- * Расширен:
1232
- * - [`BaseProps`](#/Миксины)
1233
- * - [`VAlign`](#/Миксины)
1234
- * - [`Color`](#/Миксины)
1235
- * - [`Color<'fontColor'>`](#/Миксины)
1236
- * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
1237
- */
1238
- declare function Icon(props: IconProps): JSX.Element;
1239
- declare namespace Icon {
1240
- var displayName: string;
1241
- }
1242
-
1243
1157
  declare type AnchorPalette = {
1244
1158
  color: CSSColor;
1245
1159
  colorHover: CSSColor;
@@ -1267,7 +1181,7 @@ DisplayProperty {
1267
1181
  /** Underline text content */
1268
1182
  underline?: CSSBorderStyle | boolean;
1269
1183
  /** Icons before and after content */
1270
- icon?: JSX.Element | [Nullable<JSX.Element>, Nullable<JSX.Element>];
1184
+ icon?: JSX.Element | IconName | [Nullable<JSX.Element | IconName>, Nullable<JSX.Element | IconName>];
1271
1185
  /** Props for icon components */
1272
1186
  iconProps?: IconProps;
1273
1187
  /** Build rel attribute with relBuilder from context */
@@ -1354,7 +1268,7 @@ ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {
1354
1268
  /** Display inline */
1355
1269
  inline?: boolean;
1356
1270
  /** Icons before and after content */
1357
- icon?: JSX.Element | [Nullable<JSX.Element>, Nullable<JSX.Element>];
1271
+ icon?: JSX.Element | IconName | [Nullable<JSX.Element | IconName>, Nullable<JSX.Element | IconName>];
1358
1272
  /** Props for icon components */
1359
1273
  iconProps?: IconProps;
1360
1274
  /** Border radius 50% */
@@ -1432,7 +1346,7 @@ interface AlertProps extends BaseProps {
1432
1346
  /** This method is taken from react-toastify library */
1433
1347
  closeToast?(): void;
1434
1348
  /** Icon name (for inner Icon component) */
1435
- customIcon?: keyof typeof IconNames;
1349
+ customIcon?: IconName;
1436
1350
  /** Any custom image (e.g.: img, svg, icon from @foxford/icon-pack) */
1437
1351
  image?: React.ReactNode;
1438
1352
  /** Use for tablet and mobile view */
@@ -1793,7 +1707,7 @@ DisplayProperty, Omit<React.ComponentPropsWithRef<'div'>, 'color' | 'children'>
1793
1707
  /** Root border radius */
1794
1708
  borderRadius?: string | number;
1795
1709
  /** Icons before and after content */
1796
- icon?: JSX.Element | [Nullable<JSX.Element>, Nullable<JSX.Element>];
1710
+ icon?: JSX.Element | IconName | [Nullable<JSX.Element | IconName>, Nullable<JSX.Element | IconName>];
1797
1711
  /** Props for icon components */
1798
1712
  iconProps?: IconProps;
1799
1713
  /** Don't use margin-right: 8px; */
@@ -2298,13 +2212,15 @@ declare const screenMinXl: (params?: MediaQueryParams) => <T extends object>(arg
2298
2212
  */
2299
2213
  declare const screenRetina: (args_0: TemplateStringsArray | CSSObject, args_1: SimpleInterpolation) => styled_components.FlattenSimpleInterpolation;
2300
2214
 
2215
+ declare const vAlign: (vAlign: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline') => styled_components.FlattenSimpleInterpolation;
2216
+
2301
2217
  declare function buildMediaQuery(value: number | Size | 'auto' | 'initial' | 'inherit' | boolean, property: string | ((_size: number | 'auto' | 'initial' | 'inherit' | boolean, _sizing?: null | string) => FlattenSimpleInterpolation | null), screenQueryFunction: typeof screenXs, sizing: null | string, sizes?: Record<Size, number>): ReturnType<typeof css>;
2302
2218
  declare const desktopFirst: (a: string, b: string) => number;
2303
2219
  declare const mobileFirst: (a: string, b: string) => number;
2304
2220
 
2305
2221
  interface ActionBtnProps extends BaseProps, DisplayProperty {
2306
2222
  /** Icon name (for inner Icon component) */
2307
- icon?: keyof typeof IconNames;
2223
+ icon?: IconName;
2308
2224
  disabled?: boolean;
2309
2225
  active?: boolean;
2310
2226
  onClick?(): void;
@@ -3586,7 +3502,7 @@ ResponsiveNamedProperty<'width', 'auto' | keyof typeof SizeInput | number> {
3586
3502
  /** Label position */
3587
3503
  labelPosition?: 'dynamic' | 'top' | 'center';
3588
3504
  /** Icon before input */
3589
- icon?: JSX.Element;
3505
+ icon?: JSX.Element | IconName;
3590
3506
  /** Props for icon component */
3591
3507
  iconProps?: IconProps;
3592
3508
  /** Props for text component */
@@ -3594,12 +3510,12 @@ ResponsiveNamedProperty<'width', 'auto' | keyof typeof SizeInput | number> {
3594
3510
  /** Input controls */
3595
3511
  controls?: {
3596
3512
  additional?: {
3597
- icon: JSX.Element;
3513
+ icon: JSX.Element | IconName;
3598
3514
  iconProps?: IconProps;
3599
3515
  buttonProps?: React.ComponentPropsWithoutRef<'button'>;
3600
3516
  };
3601
3517
  number?: {
3602
- icon?: [JSX.Element, JSX.Element];
3518
+ icon?: [JSX.Element | IconName, JSX.Element | IconName];
3603
3519
  iconProps?: IconProps;
3604
3520
  buttonProps?: React.ComponentPropsWithoutRef<'button'> | [Nullable<React.ComponentPropsWithoutRef<'button'>>, Nullable<React.ComponentPropsWithoutRef<'button'>>];
3605
3521
  };
@@ -3827,7 +3743,7 @@ interface FormLabelProps extends ResponsiveSizeProps, ResponsiveMarginProps, Rea
3827
3743
  hint?: {
3828
3744
  text?: React.ReactNode;
3829
3745
  textProps?: TextProps;
3830
- icon?: JSX.Element;
3746
+ icon?: JSX.Element | IconName;
3831
3747
  iconProps?: IconProps;
3832
3748
  buttonProps?: React.ComponentPropsWithoutRef<'button'>;
3833
3749
  };
@@ -1,2 +1,2 @@
1
- import e from'@babel/runtime/helpers/objectSpread2';import{forwardRef as r}from'react';import{useTheme as a}from'styled-components';import{mergeDeepLeft as t}from'ramda';import{jsx as s}from'react/jsx-runtime';var o=(o,i)=>{var p=r(((r,p)=>{var l,m,n;var v=a();var d=t(r,null!==(l=null===(m=v.components)||void 0===m?void 0:m[i.displayName])&&void 0!==l?l:{});var u=null!==(n=d.preset)&&void 0!==n?n:v.preset;var c='function'==typeof i.sizes?i.sizes(e(e({},d),{},{preset:u})):i.sizes;var f=d.sizes?t(d.sizes,c):c;var y=d.palette?function(e,r){var a=arguments.length>0&&void 0!==e?e:{};var t=arguments.length>1?r:void 0;return Object.keys(a).reduce(((e,r)=>{var s;var o=a[r];return e[r]=null!==(s=t.colors[o])&&void 0!==s?s:o,e}),{})}(d.palette,v):{};return o.displayName=i.displayName,s(o,e(e({},d),{},{preset:u,sizes:f,palette:y,ref:p}))}));return p.displayName="WithMergedProps".concat(i.displayName),p};export{o as withMergedProps};
1
+ import e from'@babel/runtime/helpers/objectSpread2';import{forwardRef as r}from'react';import{useMergedProps as s}from'../hooks/useMergedProps.js';import{useMergedSizes as a}from'../hooks/useMergedSizes.js';import{useMergedPalette as o}from'../hooks/useMergedPalette.js';import{jsx as t}from'react/jsx-runtime';function i(i,m){var p=r(((r,p)=>{var d=s(r,m.displayName);var u=a(d,m.sizes);var f=o(d);return i.displayName=m.displayName,t(i,e(e({},d),{},{sizes:u,palette:f,ref:p}))}));return p.displayName="WithMergedProps".concat(m.displayName),p}export{i as withMergedProps};
2
2
  //# sourceMappingURL=withMergedProps.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"withMergedProps.js","sources":["../../../src/hocs/withMergedProps.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { mergeDeepLeft } from 'ramda'\nimport type { DefaultTheme } from 'styled-components'\nimport type { ResponsiveSizeProps } from 'mixins/responsive-size'\nimport type { CSSColor, Sizes, Color, ThemePreset, ColorPaletteKey } from 'shared/types'\n\nconst injectThemeColors = (\n colors: Partial<Record<ColorPaletteKey, Color>> = {},\n theme: DefaultTheme\n): Partial<Record<ColorPaletteKey, CSSColor>> =>\n Object.keys(colors).reduce((resultColors, colorKey) => {\n const color = colors[colorKey]\n resultColors[colorKey] = theme.colors[color] ?? color\n return resultColors\n }, {} as Record<ColorPaletteKey, CSSColor>)\n\nexport const withMergedProps = <\n T extends ResponsiveSizeProps & {\n preset?: ThemePreset\n palette?: Partial<Record<ColorPaletteKey, Color>>\n },\n P extends HTMLElement = HTMLElement\n>(\n Component: React.FC<\n Omit<T, 'sizes' | 'preset' | 'palette'> & {\n sizes: Sizes\n preset: ThemePreset\n palette: Partial<Record<ColorPaletteKey, CSSColor>>\n } & React.RefAttributes<P>\n >,\n options: {\n displayName: string\n sizes: Sizes | ((props: Omit<T, 'sizes' | 'preset'> & { preset: ThemePreset }) => Sizes)\n }\n) => {\n const WithMergedProps = forwardRef<P, T>((props, ref) => {\n const theme = useTheme()\n\n const forwardProps = mergeDeepLeft(props, theme.components?.[options.displayName] ?? {}) as T\n const preset = forwardProps.preset ?? theme.preset\n const componentSizes =\n typeof options.sizes === 'function' ? options.sizes({ ...forwardProps, preset }) : options.sizes\n const sizes = (forwardProps.sizes ? mergeDeepLeft(forwardProps.sizes, componentSizes) : componentSizes) as Sizes\n const palette = forwardProps.palette ? injectThemeColors(forwardProps.palette, theme) : {}\n\n Component.displayName = options.displayName\n\n return <Component {...forwardProps} preset={preset} sizes={sizes} palette={palette} ref={ref} />\n })\n\n WithMergedProps.displayName = `WithMergedProps${options.displayName}`\n return WithMergedProps\n}\n"],"names":["withMergedProps","Component","options","WithMergedProps","forwardRef","props","ref","_theme$components$opt","_theme$components","_forwardProps$preset","theme","useTheme","forwardProps","mergeDeepLeft","components","displayName","preset","componentSizes","sizes","palette","e","r","colors","arguments","length","undefined","Object","keys","reduce","resultColors","colorKey","_theme$colors$color","color","_jsx","_objectSpread"],"mappings":"sNAiBaA,EAAkB,CAO7BC,EAOAC,KAKA,IAAMC,EAAkBC,IAAkBC,EAAOC,KAAQ,IAAAC,EAAAC,EAAAC,EACvD,IAAMC,EAAQC,IAEd,IAAMC,EAAeC,EAAcR,EAAD,UAAA,UAAQK,EAAMI,kBAAd,IAAAN,SAAQA,EAAmBN,EAAQa,oBAAAA,IAAnCR,EAAAA,EAAmD,IACrF,IAAMS,EAAgCN,UAAvBE,EAAaI,cAAAA,IAAUN,EAAAA,EAAAA,EAAMM,OAC5C,IAAMC,EACqB,mBAAlBf,EAAQgB,MAAuBhB,EAAQgB,aAAWN,GAAnB,GAAA,CAAiCI,OAAAA,KAAYd,EAAQgB,MAC7F,IAAMA,EAASN,EAAaM,MAAQL,EAAcD,EAAaM,MAAOD,GAAkBA,EACxF,IAAME,EAAUP,EAAaO,QArCP,SAAAC,EAAAC,GAAA,IACxBC,+BADwBF,EAAAA,EAC0B,GAD1B,IAExBV,EAFwBa,UAAAC,OAAA,EAAAH,OAAAI,EAAA,OAIxBC,OAAOC,KAAKL,GAAQM,QAAO,CAACC,EAAcC,KAAa,IAAAC,EACrD,IAAMC,EAAQV,EAAOQ,GAErB,OADAD,EAAaC,GAAb,QAAyBpB,EAAAA,EAAMY,OAAOU,UAAAA,IAAtCD,EAAAA,EAAgDC,EACzCH,IACN,IARqB,CAqCmCjB,EAAaO,QAAST,GAAS,GAIxF,OAFAT,EAAUc,YAAcb,EAAQa,YAEzBkB,EAAChC,EAADiC,EAAAA,EAAA,GAAetB,GAAf,GAAA,CAA6BI,OAAQA,EAAQE,MAAOA,EAAOC,QAASA,EAASb,IAAKA,QAI3F,OADAH,EAAgBY,YAAgCb,kBAAAA,OAAAA,EAAQa,aACjDZ"}
1
+ {"version":3,"file":"withMergedProps.js","sources":["../../../src/hocs/withMergedProps.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { ThemePreset, Sizes, Color, CSSColor, ColorPaletteKey } from 'shared/types'\nimport { useMergedProps } from 'hooks/useMergedProps'\nimport { useMergedSizes } from 'hooks/useMergedSizes'\nimport { useMergedPalette } from 'hooks/useMergedPalette'\n\ntype WrappedComponentProps = {\n preset?: ThemePreset\n sizes?: Partial<Sizes>\n palette?: Partial<Record<ColorPaletteKey, Color>>\n}\n\ntype MergedProps<T> = Omit<T, 'preset' | 'sizes' | 'palette'> & {\n preset: ThemePreset\n sizes: Sizes\n palette: Partial<Record<ColorPaletteKey, CSSColor>>\n}\n\ntype WithMergedPropsOptions<T> = {\n displayName: string\n sizes?: Sizes | ((props: T) => Sizes)\n}\n\nfunction withMergedProps<T extends WrappedComponentProps, R extends HTMLElement = HTMLElement>(\n WrappedComponent: React.FC<MergedProps<T>>,\n options: WithMergedPropsOptions<Omit<T, 'sizes'> & { preset: ThemePreset }>\n) {\n const WithMergedProps = forwardRef<R, T>((wrappedComponentProps, ref) => {\n const props = useMergedProps(wrappedComponentProps, options.displayName)\n const sizes = useMergedSizes(props, options.sizes)\n const palette = useMergedPalette(props)\n\n WrappedComponent.displayName = options.displayName\n\n return <WrappedComponent {...props} sizes={sizes} palette={palette} ref={ref} />\n })\n\n WithMergedProps.displayName = `WithMergedProps${options.displayName}`\n\n return WithMergedProps\n}\n\nexport { withMergedProps }\n"],"names":["withMergedProps","WrappedComponent","options","WithMergedProps","forwardRef","wrappedComponentProps","ref","props","useMergedProps","displayName","sizes","useMergedSizes","palette","useMergedPalette","_jsx","_objectSpread"],"mappings":"uTAuBA,SAASA,EACPC,EACAC,GAEA,IAAMC,EAAkBC,GAAAA,CAAkBC,EAAuBC,KAC/D,IAAMC,EAAQC,EAAeH,EAAuBH,EAAQO,aAC5D,IAAMC,EAAQC,EAAeJ,EAAOL,EAAQQ,OAC5C,IAAME,EAAUC,EAAiBN,GAIjC,OAFAN,EAAiBQ,YAAcP,EAAQO,YAEhCK,EAACb,EAADc,EAAAA,EAAA,GAAsBR,GAAtB,GAAA,CAA6BG,MAAOA,EAAOE,QAASA,EAASN,IAAKA,QAK3E,OAFAH,EAAgBM,YAAgCP,kBAAAA,OAAAA,EAAQO,aAEjDN"}
@@ -0,0 +1,2 @@
1
+ import{useTheme as e}from'styled-components';function r(r){var t;var o=e();var a=null!==(t=r.palette)&&void 0!==t?t:{};return Object.keys(a).reduce(((e,r)=>{var t;return e[r]=null!==(t=o.colors[a[r]])&&void 0!==t?t:a[r],e}),{})}export{r as useMergedPalette};
2
+ //# sourceMappingURL=useMergedPalette.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useMergedPalette.js","sources":["../../../src/hooks/useMergedPalette.ts"],"sourcesContent":["import { useTheme } from 'styled-components'\nimport type { ColorPaletteKey, Color, CSSColor } from 'shared/types'\n\nexport function useMergedPalette<\n T extends {\n palette?: Partial<Record<ColorPaletteKey, Color>>\n }\n>(componentProps: T): Record<ColorPaletteKey, CSSColor> {\n const theme = useTheme()\n\n const palette = componentProps.palette ?? {}\n\n return 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"],"names":["useMergedPalette","componentProps","_componentProps$palet","theme","useTheme","palette","Object","keys","reduce","injected","key","_theme$colors$palette","colors"],"mappings":"6CAGO,SAASA,EAIdC,GAAsD,IAAAC,EACtD,IAAMC,EAAQC,IAEd,IAAMC,UAAUJ,EAAAA,EAAeI,uBAAW,GAE1C,OAAOC,OAAOC,KAAKF,GAASG,QAAO,CAACC,EAAUC,KAAQ,IAAAC,EAEpD,OADAF,EAASC,WAAOP,EAAAA,EAAMS,OAAOP,EAAQK,mBAASL,EAAQK,GAC/CD,IACN"}
@@ -0,0 +1,2 @@
1
+ import e from'@babel/runtime/helpers/objectSpread2';import{useTheme as r}from'styled-components';import{mergeDeepLeft as o}from'ramda';function t(t,p){var s,m,a;var n=r();var l=null!==(m=(null!==(s=n.components)&&void 0!==s?s:{})[p])&&void 0!==m?m:{};var i=o(t,l);return e(e({},i),{},{preset:null!==(a=i.preset)&&void 0!==a?a:n.preset})}export{t as useMergedProps};
2
+ //# sourceMappingURL=useMergedProps.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useMergedProps.js","sources":["../../../src/hooks/useMergedProps.ts"],"sourcesContent":["import { useTheme } from 'styled-components'\nimport { mergeDeepLeft } from 'ramda'\nimport type { ThemePreset } from 'shared/types'\n\nexport function useMergedProps<\n T extends {\n preset?: ThemePreset\n }\n>(\n componentProps: T,\n componentName: string\n): T & {\n preset: ThemePreset\n} {\n const theme = useTheme()\n\n const context = theme.components ?? {}\n const contextProps: T = context[componentName] ?? {}\n const mergedProps = mergeDeepLeft(componentProps, contextProps) as T\n\n return {\n ...mergedProps,\n preset: mergedProps.preset ?? theme.preset,\n }\n}\n"],"names":["useMergedProps","componentProps","componentName","_theme$components","_context$componentNam","_mergedProps$preset","theme","useTheme","contextProps","context","components","mergedProps","mergeDeepLeft","_objectSpread","preset"],"mappings":"uIAIO,SAASA,EAKdC,EACAC,GAGA,IAAAC,EAAAC,EAAAC,EACA,IAAMC,EAAQC,IAGd,IAAMC,UAAkBC,WADRH,EAAAA,EAAMI,0BAAc,IACJR,kBAAkB,GAClD,IAAMS,EAAcC,EAAcX,EAAgBO,GAElD,OAAAK,EAAAA,EAAA,GACKF,GADL,GAAA,CAEEG,OAAM,UAAEH,EAAYG,cAAAA,IAAdT,EAAAA,EAAwBC,EAAMQ"}
@@ -0,0 +1,2 @@
1
+ import{mergeDeepLeft as e}from'ramda';var r={xxxl:{},xxl:{},xl:{},l:{},m:{},s:{},xs:{},xxs:{},xxxs:{}};function x(x,s){var a;var o=arguments.length>1&&void 0!==s?s:r;var t='function'==typeof o?o(x):o;var i=null!==(a=x.sizes)&&void 0!==a?a:{};return e(i,t)}export{x as useMergedSizes};
2
+ //# sourceMappingURL=useMergedSizes.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useMergedSizes.js","sources":["../../../src/hooks/useMergedSizes.ts"],"sourcesContent":["import { mergeDeepLeft } from 'ramda'\nimport type { Sizes } from 'shared/types'\n\nconst SIZES_EMPTY: Sizes = { xxxl: {}, xxl: {}, xl: {}, l: {}, m: {}, s: {}, xs: {}, xxs: {}, xxxs: {} }\n\nexport function useMergedSizes<\n T extends {\n sizes?: Partial<Sizes>\n }\n>(componentProps: T, componentSizes: Sizes | ((props: T) => Sizes) = SIZES_EMPTY): Sizes {\n const sizesDefault = typeof componentSizes === 'function' ? componentSizes(componentProps) : componentSizes\n const sizesProp = componentProps.sizes ?? {}\n\n return mergeDeepLeft(sizesProp, sizesDefault) as Sizes\n}\n"],"names":["SIZES_EMPTY","xxxl","xxl","xl","l","m","s","xs","xxs","xxxs","useMergedSizes","componentProps","a","_componentProps$sizes","componentSizes","sizesDefault","sizesProp","sizes","mergeDeepLeft"],"mappings":"sCAGA,IAAMA,EAAqB,CAAEC,KAAM,GAAIC,IAAK,GAAIC,GAAI,GAAIC,EAAG,GAAIC,EAAG,GAAIC,EAAG,GAAIC,GAAI,GAAIC,IAAK,GAAIC,KAAM,IAE7F,SAASC,EAIdC,EAJKC,GAIkF,IAAAC,EAAA,IAApEC,+BAJdF,EAAAA,EAI8DZ,EACnE,IAAMe,EAAyC,mBAAnBD,EAAgCA,EAAeH,GAAkBG,EAC7F,IAAME,UAAYL,EAAAA,EAAeM,qBAAS,GAE1C,OAAOC,EAAcF,EAAWD"}