@ornikar/kitt-universal 9.1.0 → 9.1.2

package/dist/index-node-14.17.cjs.web.js

@@ -326,6 +326,19 @@ function Avatar({
   });
 }
 
+function warn(message) {
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(message);
+  }
+}
+function deprecatedMessage(symbol, deprecation, replaceBy) {
+  const replaceMessage = replaceBy === undefined ? '' : `, please use ${replaceBy} instead`;
+  warn(`[Deprecation] in ${symbol}: ${deprecation} is deprecated${replaceMessage}.`);
+}
+function deprecatedInComponent(component, deprecation, replaceBy) {
+  deprecatedMessage(`<${component} />`, deprecation, replaceBy);
+}
+
 // type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
 // type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
 // export function withTheme<Props extends { theme: DefaultTheme }, C>(
@@ -512,8 +525,7 @@ const BaseStyledButtonPressable = /*#__PURE__*/styled__default(BabelPluginStyled
   return getVariantValuesIfExist(theme, $type, $variant).backgroundColor;
 }, ({
   theme,
-  $isLarge,
-  $isXLarge,
+  $size,
   $isDisabled
 }) => {
   const {
@@ -522,8 +534,8 @@ const BaseStyledButtonPressable = /*#__PURE__*/styled__default(BabelPluginStyled
     disabled: disabledPadding,
     xLarge
   } = theme.kitt.button.contentPadding;
-  if ($isXLarge) return xLarge;
-  if ($isLarge) return large;
+  if ($size === 'large') return large;
+  if ($size === 'xlarge') return xLarge;
   if ($isDisabled) return disabledPadding;
   return defaultPadding;
 });
@@ -726,6 +738,17 @@ function ButtonContent({
 }
 
 const allowedGhostTypes = ['primary', 'default'];
+
+const getButtonSize = ({
+  large,
+  xLarge,
+  size
+}) => {
+  if (large) return 'large';
+  if (xLarge) return 'xlarge';
+  return size;
+};
+
 const Button = /*#__PURE__*/react.forwardRef(({
   children,
   type = 'default',
@@ -735,6 +758,7 @@ const Button = /*#__PURE__*/react.forwardRef(({
   large,
   xLarge,
   icon,
+  size: sizeProp,
   iconPosition = 'left',
   testID,
   href,
@@ -746,6 +770,16 @@ const Button = /*#__PURE__*/react.forwardRef(({
     throw new Error('variant=ghost is only allowed with type=primary or default');
   }
 
+  if (large || xLarge) {
+    const deprecatedProp = large ? 'large' : 'xLarge';
+    deprecatedInComponent('Button', `${deprecatedProp} prop`, 'size');
+  }
+
+  const size = getButtonSize({
+    large,
+    xLarge,
+    size: sizeProp
+  });
   return /*#__PURE__*/jsxRuntime.jsx(AnimatedButtonPressable, {
     ref: ref,
     accessibilityRole: accessibilityRole,
@@ -761,8 +795,7 @@ const Button = /*#__PURE__*/react.forwardRef(({
       $type: type,
       $variant: variant,
       $isStretch: stretch,
-      $isLarge: large,
-      $isXLarge: xLarge,
+      $size: size,
       $isDisabled: disabled,
       children: [/*#__PURE__*/jsxRuntime.jsx(ButtonContent, {
         type: type,
@@ -2992,6 +3025,144 @@ Modal.Header = ModalHeader;
 Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 
+const createKittSpaces = spacing => {
+  const sizes = {};
+
+  for (let size = 1; size <= 64; size++) {
+    sizes[`kitt.${size}`] = size * spacing;
+  }
+
+  return sizes;
+}; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type -- let typescript infer types
+
+
+const createKittNativeBaseCustomTheme = theme => {
+  const spaces = createKittSpaces(theme.spacing);
+  return nativeBase.extendTheme({
+    colors: {
+      kitt: { ...theme.colors,
+        typography: theme.typography.colors
+      }
+    },
+    radii: {
+      'kitt.borderRadius': theme.card.borderRadius
+    },
+    sizes: { ...spaces,
+      // reset native-base to be able to set size as number
+      // https://docs.nativebase.io/next/default-theme#h2-size
+      ...Object.fromEntries([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, 78, 80, 96, 0.5, 1.5, 2.5, 3.5].map(value => [value, value]))
+    },
+    space: spaces,
+    breakpoints: {
+      // kitt breakpoints
+      base: KittBreakpoints.BASE,
+      small: KittBreakpoints.SMALL,
+      medium: KittBreakpoints.MEDIUM,
+      large: KittBreakpoints.LARGE,
+      wide: KittBreakpoints.WIDE,
+      // native base default naming
+      sm: Number.MAX_SAFE_INTEGER,
+      md: Number.MAX_SAFE_INTEGER,
+      lg: Number.MAX_SAFE_INTEGER,
+      xl: Number.MAX_SAFE_INTEGER,
+      '2xl': Number.MAX_SAFE_INTEGER
+    },
+    fontSizes: {
+      baseAndSmall: {
+        header1: `${theme.typography.types.headers.configs.header1.baseAndSmall.fontSize}px`,
+        header2: `${theme.typography.types.headers.configs.header2.baseAndSmall.fontSize}px`,
+        header3: `${theme.typography.types.headers.configs.header3.baseAndSmall.fontSize}px`,
+        header4: `${theme.typography.types.headers.configs.header4.baseAndSmall.fontSize}px`,
+        header5: `${theme.typography.types.headers.configs.header5.baseAndSmall.fontSize}px`,
+        'body-large': `${theme.typography.types.bodies.configs['body-large'].baseAndSmall.fontSize}px`,
+        'body-medium': `${theme.typography.types.bodies.configs['body-medium'].baseAndSmall.fontSize}px`,
+        body: `${theme.typography.types.bodies.configs.body.baseAndSmall.fontSize}px`,
+        'body-small': `${theme.typography.types.bodies.configs['body-small'].baseAndSmall.fontSize}px`,
+        'body-xsmall': `${theme.typography.types.bodies.configs['body-xsmall'].baseAndSmall.fontSize}px`
+      },
+      mediumAndWide: {
+        header1: `${theme.typography.types.headers.configs.header1.mediumAndWide.fontSize}px`,
+        header2: `${theme.typography.types.headers.configs.header2.mediumAndWide.fontSize}px`,
+        header3: `${theme.typography.types.headers.configs.header3.mediumAndWide.fontSize}px`,
+        header4: `${theme.typography.types.headers.configs.header4.mediumAndWide.fontSize}px`,
+        header5: `${theme.typography.types.headers.configs.header5.mediumAndWide.fontSize}px`,
+        'body-large': `${theme.typography.types.bodies.configs['body-large'].mediumAndWide.fontSize}px`,
+        'body-medium': `${theme.typography.types.bodies.configs['body-medium'].mediumAndWide.fontSize}px`,
+        body: `${theme.typography.types.bodies.configs.body.mediumAndWide.fontSize}px`,
+        'body-small': `${theme.typography.types.bodies.configs['body-small'].mediumAndWide.fontSize}px`,
+        'body-xsmall': `${theme.typography.types.bodies.configs['body-xsmall'].mediumAndWide.fontSize}px`
+      }
+    },
+    lineHeights: {
+      baseAndSmall: {
+        header1: theme.typography.types.headers.configs.header1.baseAndSmall.lineHeight,
+        header2: theme.typography.types.headers.configs.header2.baseAndSmall.lineHeight,
+        header3: theme.typography.types.headers.configs.header3.baseAndSmall.lineHeight,
+        header4: theme.typography.types.headers.configs.header4.baseAndSmall.lineHeight,
+        header5: theme.typography.types.headers.configs.header5.baseAndSmall.lineHeight,
+        'body-large': theme.typography.types.bodies.configs['body-large'].baseAndSmall.lineHeight,
+        'body-medium': theme.typography.types.bodies.configs['body-medium'].baseAndSmall.lineHeight,
+        body: theme.typography.types.bodies.configs.body.baseAndSmall.lineHeight,
+        'body-small': theme.typography.types.bodies.configs['body-small'].baseAndSmall.lineHeight,
+        'body-xsmall': theme.typography.types.bodies.configs['body-xsmall'].baseAndSmall.lineHeight
+      },
+      mediumAndWide: {
+        header1: theme.typography.types.headers.configs.header1.mediumAndWide.lineHeight,
+        header2: theme.typography.types.headers.configs.header2.mediumAndWide.lineHeight,
+        header3: theme.typography.types.headers.configs.header3.mediumAndWide.lineHeight,
+        header4: theme.typography.types.headers.configs.header4.mediumAndWide.lineHeight,
+        header5: theme.typography.types.headers.configs.header5.mediumAndWide.lineHeight,
+        'body-large': theme.typography.types.bodies.configs['body-large'].mediumAndWide.lineHeight,
+        'body-medium': theme.typography.types.bodies.configs['body-medium'].mediumAndWide.lineHeight,
+        body: theme.typography.types.bodies.configs.body.mediumAndWide.lineHeight,
+        'body-small': theme.typography.types.bodies.configs['body-small'].mediumAndWide.lineHeight,
+        'body-xsmall': theme.typography.types.bodies.configs['body-xsmall'].mediumAndWide.lineHeight
+      }
+    },
+    fontWeights: {
+      headers: {
+        regular: theme.typography.types.headers.fontWeight,
+        bold: theme.typography.types.headers.fontWeight
+      },
+      bodies: theme.typography.types.bodies.fontWeight
+    },
+    fonts: {
+      headers: theme.typography.types.headers.fontFamily,
+      bodies: theme.typography.types.bodies.fontFamily
+    },
+    components: {
+      Text: {
+        baseStyle: {
+          _light: {
+            color: 'kitt.typography.black'
+          },
+          _dark: {
+            color: 'kitt.typography.white'
+          },
+          fontFamily: theme.typography.types.bodies.fontFamily.regular,
+          fontStyle: theme.typography.types.bodies.fontStyle.regular,
+          fontWeight: theme.typography.types.bodies.fontWeight.regular,
+          fontSize: undefined,
+          lineHeight: theme.typography.types.bodies.configs.body.baseAndSmall.lineHeight
+        }
+      }
+    }
+  });
+};
+function KittNativeBaseProvider({
+  theme,
+  isSSR,
+  children
+}) {
+  const kittTheme = theme.kitt;
+  const nativeBaseCustomTheme = react.useMemo(() => createKittNativeBaseCustomTheme(kittTheme), [kittTheme]);
+  return /*#__PURE__*/jsxRuntime.jsx(nativeBase.NativeBaseProvider, {
+    theme: nativeBaseCustomTheme,
+    isSSR: isSSR,
+    children: children
+  });
+}
+
 function Notification({
   type,
   children,
@@ -3929,144 +4100,6 @@ const hex2rgba = (hex, alpha = 1) => {
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 };
 
-const createKittSpaces = spacing => {
-  const sizes = {};
-
-  for (let size = 1; size <= 64; size++) {
-    sizes[`kitt.${size}`] = size * spacing;
-  }
-
-  return sizes;
-}; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type -- let typescript infer types
-
-
-const createKittNativeBaseCustomTheme = theme => {
-  const spaces = createKittSpaces(theme.spacing);
-  return nativeBase.extendTheme({
-    colors: {
-      kitt: { ...theme.colors,
-        typography: theme.typography.colors
-      }
-    },
-    radii: {
-      'kitt.borderRadius': theme.card.borderRadius
-    },
-    sizes: { ...spaces,
-      // reset native-base to be able to set size as number
-      // https://docs.nativebase.io/next/default-theme#h2-size
-      ...Object.fromEntries([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, 78, 80, 96, 0.5, 1.5, 2.5, 3.5].map(value => [value, value]))
-    },
-    space: spaces,
-    breakpoints: {
-      // kitt breakpoints
-      base: KittBreakpoints.BASE,
-      small: KittBreakpoints.SMALL,
-      medium: KittBreakpoints.MEDIUM,
-      large: KittBreakpoints.LARGE,
-      wide: KittBreakpoints.WIDE,
-      // native base default naming
-      sm: Number.MAX_SAFE_INTEGER,
-      md: Number.MAX_SAFE_INTEGER,
-      lg: Number.MAX_SAFE_INTEGER,
-      xl: Number.MAX_SAFE_INTEGER,
-      '2xl': Number.MAX_SAFE_INTEGER
-    },
-    fontSizes: {
-      baseAndSmall: {
-        header1: `${theme.typography.types.headers.configs.header1.baseAndSmall.fontSize}px`,
-        header2: `${theme.typography.types.headers.configs.header2.baseAndSmall.fontSize}px`,
-        header3: `${theme.typography.types.headers.configs.header3.baseAndSmall.fontSize}px`,
-        header4: `${theme.typography.types.headers.configs.header4.baseAndSmall.fontSize}px`,
-        header5: `${theme.typography.types.headers.configs.header5.baseAndSmall.fontSize}px`,
-        'body-large': `${theme.typography.types.bodies.configs['body-large'].baseAndSmall.fontSize}px`,
-        'body-medium': `${theme.typography.types.bodies.configs['body-medium'].baseAndSmall.fontSize}px`,
-        body: `${theme.typography.types.bodies.configs.body.baseAndSmall.fontSize}px`,
-        'body-small': `${theme.typography.types.bodies.configs['body-small'].baseAndSmall.fontSize}px`,
-        'body-xsmall': `${theme.typography.types.bodies.configs['body-xsmall'].baseAndSmall.fontSize}px`
-      },
-      mediumAndWide: {
-        header1: `${theme.typography.types.headers.configs.header1.mediumAndWide.fontSize}px`,
-        header2: `${theme.typography.types.headers.configs.header2.mediumAndWide.fontSize}px`,
-        header3: `${theme.typography.types.headers.configs.header3.mediumAndWide.fontSize}px`,
-        header4: `${theme.typography.types.headers.configs.header4.mediumAndWide.fontSize}px`,
-        header5: `${theme.typography.types.headers.configs.header5.mediumAndWide.fontSize}px`,
-        'body-large': `${theme.typography.types.bodies.configs['body-large'].mediumAndWide.fontSize}px`,
-        'body-medium': `${theme.typography.types.bodies.configs['body-medium'].mediumAndWide.fontSize}px`,
-        body: `${theme.typography.types.bodies.configs.body.mediumAndWide.fontSize}px`,
-        'body-small': `${theme.typography.types.bodies.configs['body-small'].mediumAndWide.fontSize}px`,
-        'body-xsmall': `${theme.typography.types.bodies.configs['body-xsmall'].mediumAndWide.fontSize}px`
-      }
-    },
-    lineHeights: {
-      baseAndSmall: {
-        header1: theme.typography.types.headers.configs.header1.baseAndSmall.lineHeight,
-        header2: theme.typography.types.headers.configs.header2.baseAndSmall.lineHeight,
-        header3: theme.typography.types.headers.configs.header3.baseAndSmall.lineHeight,
-        header4: theme.typography.types.headers.configs.header4.baseAndSmall.lineHeight,
-        header5: theme.typography.types.headers.configs.header5.baseAndSmall.lineHeight,
-        'body-large': theme.typography.types.bodies.configs['body-large'].baseAndSmall.lineHeight,
-        'body-medium': theme.typography.types.bodies.configs['body-medium'].baseAndSmall.lineHeight,
-        body: theme.typography.types.bodies.configs.body.baseAndSmall.lineHeight,
-        'body-small': theme.typography.types.bodies.configs['body-small'].baseAndSmall.lineHeight,
-        'body-xsmall': theme.typography.types.bodies.configs['body-xsmall'].baseAndSmall.lineHeight
-      },
-      mediumAndWide: {
-        header1: theme.typography.types.headers.configs.header1.mediumAndWide.lineHeight,
-        header2: theme.typography.types.headers.configs.header2.mediumAndWide.lineHeight,
-        header3: theme.typography.types.headers.configs.header3.mediumAndWide.lineHeight,
-        header4: theme.typography.types.headers.configs.header4.mediumAndWide.lineHeight,
-        header5: theme.typography.types.headers.configs.header5.mediumAndWide.lineHeight,
-        'body-large': theme.typography.types.bodies.configs['body-large'].mediumAndWide.lineHeight,
-        'body-medium': theme.typography.types.bodies.configs['body-medium'].mediumAndWide.lineHeight,
-        body: theme.typography.types.bodies.configs.body.mediumAndWide.lineHeight,
-        'body-small': theme.typography.types.bodies.configs['body-small'].mediumAndWide.lineHeight,
-        'body-xsmall': theme.typography.types.bodies.configs['body-xsmall'].mediumAndWide.lineHeight
-      }
-    },
-    fontWeights: {
-      headers: {
-        regular: theme.typography.types.headers.fontWeight,
-        bold: theme.typography.types.headers.fontWeight
-      },
-      bodies: theme.typography.types.bodies.fontWeight
-    },
-    fonts: {
-      headers: theme.typography.types.headers.fontFamily,
-      bodies: theme.typography.types.bodies.fontFamily
-    },
-    components: {
-      Text: {
-        baseStyle: {
-          _light: {
-            color: 'kitt.typography.black'
-          },
-          _dark: {
-            color: 'kitt.typography.white'
-          },
-          fontFamily: theme.typography.types.bodies.fontFamily.regular,
-          fontStyle: theme.typography.types.bodies.fontStyle.regular,
-          fontWeight: theme.typography.types.bodies.fontWeight.regular,
-          fontSize: undefined,
-          lineHeight: theme.typography.types.bodies.configs.body.baseAndSmall.lineHeight
-        }
-      }
-    }
-  });
-};
-function KittNativeBaseProvider({
-  theme,
-  isSSR,
-  children
-}) {
-  const kittTheme = theme.kitt;
-  const nativeBaseCustomTheme = react.useMemo(() => createKittNativeBaseCustomTheme(kittTheme), [kittTheme]);
-  return /*#__PURE__*/jsxRuntime.jsx(nativeBase.NativeBaseProvider, {
-    theme: nativeBaseCustomTheme,
-    isSSR: isSSR,
-    children: children
-  });
-}
-
 function KittThemeProvider({
   isSSR,
   children
@@ -4128,6 +4161,7 @@ exports.InputTag = InputTag;
 exports.InputText = InputText;
 exports.KittBreakpoints = KittBreakpoints;
 exports.KittBreakpointsMax = KittBreakpointsMax;
+exports.KittNativeBaseProvider = KittNativeBaseProvider;
 exports.KittThemeDecorator = KittThemeDecorator;
 exports.KittThemeProvider = KittThemeProvider;
 exports.Label = Label;