@ornikar/kitt-universal 7.1.0 → 7.3.0

package/dist/index-browser-all.es.web.js

@@ -4,7 +4,7 @@ import { View, Text as Text$1, useWindowDimensions, Image, Pressable, TextInput,
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import { UserIcon, CheckboxMark, EyeOffIcon, EyeIcon, ArcIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
-import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
+import styled, { css, useTheme, ThemeProvider } from 'styled-components/native';
 import { cloneElement, useContext, createContext, forwardRef, useMemo, useState, Fragment, Children, useEffect } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { styled as styled$1 } from '@linaria/react';
@@ -144,7 +144,8 @@ var StyledTypography = /*#__PURE__*/styled(Text$1).withConfig({
 }, function (_ref2) {
   var theme = _ref2.theme,
       $color = _ref2.$color;
-  return !$color ? '' : "\n  color: ".concat(theme.kitt.typography.colors[$color], ";\n  text-decoration-color: ").concat(theme.kitt.typography.colors[$color], ";\n  ");
+  if (!$color) return '';
+  return css(["color:", ";text-decoration-color:", ";"], theme.kitt.typography.colors[$color], theme.kitt.typography.colors[$color]);
 });
 function useTypographyTypeForCurrentWindowSize(base, small, medium, large) {
   var _useWindowDimensions = useWindowDimensions(),
@@ -547,11 +548,14 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled(View).withConfig({
 }, function (_ref7) {
   var theme = _ref7.theme,
       $isLarge = _ref7.$isLarge,
+      $isXLarge = _ref7.$isXLarge,
       $isDisabled = _ref7.$isDisabled;
   var _theme$kitt$button$co = theme.kitt.button.contentPadding,
       large = _theme$kitt$button$co.large,
       defaultPadding = _theme$kitt$button$co["default"],
-      disabledPadding = _theme$kitt$button$co.disabled;
+      disabledPadding = _theme$kitt$button$co.disabled,
+      xLarge = _theme$kitt$button$co.xLarge;
+  if ($isXLarge) return xLarge;
   if ($isLarge) return large;
   if ($isDisabled) return disabledPadding;
   return defaultPadding;
@@ -606,6 +610,9 @@ var getTextColorByType = function (type, variant) {
     case 'subtle-dark':
       return 'black';
 
+    case 'default':
+      return variant === 'ghost' ? 'white' : 'black';
+
     default:
       return 'black';
   }
@@ -747,6 +754,7 @@ function ButtonContent(_ref7) {
   });
 }
 
+var allowedGhostTypes = ['primary', 'default'];
 var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
       _ref$type = _ref.type,
@@ -756,6 +764,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       disabled = _ref.disabled,
       stretch = _ref.stretch,
       large = _ref.large,
+      xLarge = _ref.xLarge,
       icon = _ref.icon,
       _ref$iconPosition = _ref.iconPosition,
       iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
@@ -766,8 +775,8 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       accessibilityRole = _ref$accessibilityRol === void 0 ? 'button' : _ref$accessibilityRol,
       onPress = _ref.onPress;
 
-  if ((process.env.NODE_ENV !== "production") && variant === 'ghost' && type !== 'primary') {
-    throw new Error('variant=ghost is only allowed with type=primary');
+  if ((process.env.NODE_ENV !== "production") && variant === 'ghost' && !allowedGhostTypes.includes(type)) {
+    throw new Error('variant=ghost is only allowed with type=primary or default');
   }
 
   return /*#__PURE__*/jsx(AnimatedButtonPressable, {
@@ -786,6 +795,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       $variant: variant,
       $isStretch: stretch,
       $isLarge: large,
+      $isXLarge: xLarge,
       $isDisabled: disabled,
       children: [/*#__PURE__*/jsx(ButtonContent, {
         type: type,
@@ -925,7 +935,9 @@ var colors = {
   warning: lateOceanColorPalette.goldCrayola,
   separator: lateOceanColorPalette.black100,
   hover: lateOceanColorPalette.black100,
+  white: lateOceanColorPalette.white,
   black: lateOceanColorPalette.black1000,
+  blackAnthracite: lateOceanColorPalette.black800,
   uiBackground: lateOceanColorPalette.black25,
   uiBackgroundLight: lateOceanColorPalette.white,
   transparent: lateOceanColorPalette.transparent,
@@ -972,6 +984,7 @@ var button = {
   contentPadding: {
     "default": '7px 16px 7px',
     large: '11px 24px 11px',
+    xLarge: '15px 24px 15px',
     disabled: '5px 14px 5px'
   },
   transition: {
@@ -984,6 +997,15 @@ var button = {
       pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
       hoverBackgroundColor: 'rgba(0, 0, 0, 0.1)',
       focusBorderColor: 'rgba(0, 0, 0, 0.1)'
+    },
+    ghost: {
+      backgroundColor: 'rgba(255, 255, 255, 0.1)',
+      pressedBackgroundColor: 'rgba(255, 255, 255, 0.05)',
+      hoverBackgroundColor: 'rgba(255, 255, 255, 0.05)',
+      focusBorderColor: 'rgba(255, 255, 255, 0.4)',
+      color: lateOceanColorPalette.white,
+      hoverColor: lateOceanColorPalette.white,
+      activeColor: lateOceanColorPalette.white
     }
   },
   primary: {
@@ -1118,16 +1140,16 @@ var createTypographyTypeConfig = function (lineHeightMultiplier, baseAndSmallFon
 };
 var typography = {
   colors: {
-    black: lateOceanColorPalette.black1000,
-    'black-anthracite': lateOceanColorPalette.black800,
+    black: colors.black,
+    'black-anthracite': colors.blackAnthracite,
     'black-light': lateOceanColorPalette.black555,
-    white: lateOceanColorPalette.white,
-    'white-light': lateOceanColorPalette.white,
-    primary: lateOceanColorPalette.lateOcean,
-    'primary-light': lateOceanColorPalette.lateOceanLight1,
-    accent: lateOceanColorPalette.warmEmbrace,
-    success: lateOceanColorPalette.viride,
-    danger: lateOceanColorPalette.englishVermillon
+    white: colors.white,
+    'white-light': colors.white,
+    primary: colors.primary,
+    'primary-light': colors.primaryLight,
+    accent: colors.accent,
+    success: colors.success,
+    danger: colors.danger
   },
   types: {
     headers: {
@@ -1223,8 +1245,8 @@ var input = {
     size: 20
   },
   padding: {
-    "default": '5px 16px',
-    iOSSingleLine: '7px 16px'
+    horizontal: 16,
+    vertical: 5
   },
   transition: {
     property: 'border-color',
@@ -1339,7 +1361,20 @@ var listItem = {
 };
 
 var pageLoader = {
-  size: 60
+  size: 60,
+  strokeWidth: 3,
+  colors: {
+    base: colors.separator,
+    fill: colors.primary
+  },
+  animation: {
+    delay: 500,
+    circleBackgroundFillDuration: 1000,
+    filledCircleFillDuration: 1800,
+    groupFilledCircleRotationDuration: 1800,
+    filledCircleRotationDuration: 2160,
+    fillEasingFunction: [0.39, 0.575, 0.565, 1]
+  }
 };
 
 var shadows = {
@@ -1639,7 +1674,7 @@ var ViewInput = /*#__PURE__*/styled(View).withConfig({
   componentId: "kitt-universal__sc-11fmlmi-1"
 })(["", " padding:", ";min-height:", "px;min-width:", ";"], styledTextInputMixin, function (_ref) {
   var theme = _ref.theme;
-  return theme.kitt.forms.input.padding["default"];
+  return "".concat(theme.kitt.forms.input.padding.vertical, "px ").concat(theme.kitt.forms.input.padding.horizontal, "px");
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.kitt.forms.input.minHeight;
@@ -1800,20 +1835,18 @@ var StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
 })(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, function (_ref) {
   var theme = _ref.theme,
       multiline = _ref.multiline;
-
-  if (!multiline && "web" === 'ios') {
-    return theme.kitt.forms.input.padding.iOSSingleLine;
-  }
-
-  return theme.kitt.forms.input.padding["default"];
+  if (!multiline && "web" !== 'web') return "0 ".concat(theme.kitt.forms.input.padding.horizontal, "px");
+  return "".concat(theme.kitt.forms.input.padding.vertical, "px ").concat(theme.kitt.forms.input.padding.horizontal, "px");
 }, function (_ref2) {
   var theme = _ref2.theme,
       multiline = _ref2.multiline;
-  if (!multiline && "web" === 'ios') return 0;
+  if (!multiline && "web" !== 'web') return 0;
   var typeConfigKey = getTypographyTypeConfigKey(theme);
   return "".concat(theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight, "px");
 }, function (_ref3) {
-  var $minHeight = _ref3.$minHeight;
+  var theme = _ref3.theme,
+      _ref3$$minHeight = _ref3.$minHeight,
+      $minHeight = _ref3$$minHeight === void 0 ? theme.kitt.forms.input.minHeight : _ref3$$minHeight;
   return $minHeight;
 });
 var RightInputContainer = /*#__PURE__*/styled(View).withConfig({
@@ -1823,8 +1856,7 @@ var RightInputContainer = /*#__PURE__*/styled(View).withConfig({
 var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   var id = _ref4.id,
       right = _ref4.right,
-      _ref4$minHeight = _ref4.minHeight,
-      minHeight = _ref4$minHeight === void 0 ? 0 : _ref4$minHeight,
+      minHeight = _ref4.minHeight,
       formState = _ref4.state,
       internalForceState = _ref4.internalForceState,
       _ref4$disabled = _ref4.disabled,
@@ -3024,38 +3056,87 @@ var PageLoaderContainer = withTheme( /*#__PURE__*/styled$1("div")({
   "class": "kitt-u_PageLoaderContainer_ptkwz2j",
   vars: {
     "ptkwz2j-0": [function (_ref) {
-      var theme = _ref.theme;
-      return theme.kitt.colors.separator;
+      var $circlePerimeter = _ref.$circlePerimeter;
+      return $circlePerimeter;
+    }, "px"],
+    "ptkwz2j-2": [function (_ref2) {
+      var $circlePerimeter = _ref2.$circlePerimeter;
+      return $circlePerimeter * 0.2;
+    }, "px"],
+    "ptkwz2j-3": [function (_ref3) {
+      var theme = _ref3.theme;
+      return theme.kitt.pageLoader.size;
+    }, "px"],
+    "ptkwz2j-5": [function (_ref4) {
+      var theme = _ref4.theme;
+      return theme.kitt.pageLoader.strokeWidth;
+    }, "px"],
+    "ptkwz2j-8": [function (_ref5) {
+      var theme = _ref5.theme;
+      return theme.kitt.pageLoader.colors.base;
     }],
-    "ptkwz2j-1": [function (_ref2) {
-      var theme = _ref2.theme;
-      return theme.kitt.colors.primary;
+    "ptkwz2j-9": [function (_ref6) {
+      var theme = _ref6.theme;
+      var animation = theme.kitt.pageLoader.animation;
+
+      var _animation$fillEasing = _slicedToArray(animation.fillEasingFunction, 4),
+          x1 = _animation$fillEasing[0],
+          y1 = _animation$fillEasing[1],
+          x2 = _animation$fillEasing[2],
+          y2 = _animation$fillEasing[3];
+
+      return "".concat(animation.circleBackgroundFillDuration, "ms cubic-bezier(").concat(x1, ", ").concat(y1, ", ").concat(x2, ", ").concat(y2, ") ").concat(animation.delay, "ms forwards");
+    }],
+    "ptkwz2j-10": [function (_ref7) {
+      var theme = _ref7.theme;
+      var animation = theme.kitt.pageLoader.animation;
+      return "".concat(animation.filledCircleFillDuration, "ms linear ").concat(animation.delay, "ms infinite");
+    }],
+    "ptkwz2j-11": [function (_ref8) {
+      var theme = _ref8.theme;
+      return theme.kitt.pageLoader.colors.fill;
+    }],
+    "ptkwz2j-12": [function (_ref9) {
+      var theme = _ref9.theme;
+      var animation = theme.kitt.pageLoader.animation;
+
+      var _animation$fillEasing2 = _slicedToArray(animation.fillEasingFunction, 4),
+          x1 = _animation$fillEasing2[0],
+          y1 = _animation$fillEasing2[1],
+          x2 = _animation$fillEasing2[2],
+          y2 = _animation$fillEasing2[3];
+
+      var fillAnimation = "".concat(animation.filledCircleFillDuration, "ms cubic-bezier(").concat(x1, ", ").concat(y1, ", ").concat(x2, ", ").concat(y2, ") ").concat(animation.delay, "ms infinite alternate");
+      var rotationAnimation = "".concat(animation.filledCircleRotationDuration, "ms linear ").concat(animation.delay, "ms infinite");
+      return [fillAnimation, rotationAnimation].join(',');
     }]
   }
 }));
 function PageLoader() {
   var theme = /*#__PURE__*/useTheme();
-  var size = theme.kitt.pageLoader.size;
+  var _theme$kitt$pageLoade = theme.kitt.pageLoader,
+      size = _theme$kitt$pageLoade.size,
+      strokeWidth = _theme$kitt$pageLoade.strokeWidth;
+  var center = size * 0.5;
+  var radius = center - strokeWidth;
+  var circlePerimeter = 2 * Math.PI * radius;
+  var sharedProps = {
+    cx: center,
+    cy: center,
+    r: radius,
+    fill: 'none'
+  };
   return /*#__PURE__*/jsx(PageLoaderContainer, {
+    $circlePerimeter: circlePerimeter,
     children: /*#__PURE__*/jsxs("svg", {
       width: size,
       height: size,
       children: [/*#__PURE__*/jsx("g", {
         "data-large-loader": "base",
-        children: /*#__PURE__*/jsx("circle", {
-          cx: "30",
-          cy: "30",
-          r: "27",
-          fill: "none"
-        })
+        children: /*#__PURE__*/jsx("circle", _objectSpread({}, sharedProps))
       }), /*#__PURE__*/jsx("g", {
         "data-large-loader": "fill",
-        children: /*#__PURE__*/jsx("circle", {
-          cx: "30",
-          cy: "30",
-          r: "27",
-          fill: "none"
-        })
+        children: /*#__PURE__*/jsx("circle", _objectSpread({}, sharedProps))
       })]
     })
   });