@ornikar/kitt-universal 24.1.1 → 24.2.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [24.2.0](https://github.com/ornikar/kitt/compare/@ornikar/kitt-universal@24.1.1...@ornikar/kitt-universal@24.2.0) (2024-05-13)
+
+
+### Features
+
+* add file-arrow-down icon to the list of phosphor icons [no issue] ([#2384](https://github.com/ornikar/kitt/issues/2384)) ([96a20fd](https://github.com/ornikar/kitt/commit/96a20fd3b7ae21e0f236a528c0c03fa360f52883))
+* step adaptations (add borderless vertical steps) OSE-4992 ([#2333](https://github.com/ornikar/kitt/issues/2333)) ([2710612](https://github.com/ornikar/kitt/commit/27106124d9352494615a0f2db06479a229b528a0))
+
+
+
 ## [24.1.1](https://github.com/ornikar/kitt/compare/@ornikar/kitt-universal@24.1.0...@ornikar/kitt-universal@24.1.1) (2024-05-03)
 
 

package/dist/definitions/VerticalSteps/BorderlessStep.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export interface BorderlessStepProps {
+    title: ReactNode;
+    description?: ReactNode;
+    position?: number;
+    isLast?: boolean;
+    animated?: boolean;
+    currentStep?: number;
+}
+export declare function BorderlessStep({ description, title, position, isLast, animated, currentStep, }: BorderlessStepProps): ReactNode;
+//# sourceMappingURL=BorderlessStep.d.ts.map

package/dist/definitions/VerticalSteps/BorderlessStep.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BorderlessStep.d.ts","sourceRoot":"","sources":["../../../src/VerticalSteps/BorderlessStep.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAID,wBAAgB,cAAc,CAAC,EAC7B,WAAW,EACX,KAAK,EACL,QAAY,EACZ,MAAM,EACN,QAAQ,EACR,WAAe,GAChB,EAAE,mBAAmB,GAAG,SAAS,CAmFjC"}

package/dist/definitions/VerticalSteps/Step.animations.d.ts

@@ -0,0 +1,15 @@
+import type { ViewStyle } from 'react-native';
+import type { AnimateStyle } from 'react-native-reanimated';
+interface StepAnimations {
+    checkmarkAnimatedStyles: AnimateStyle<ViewStyle>;
+    progressBarAnimatedStyles: AnimateStyle<ViewStyle>;
+}
+interface StepAnimationsProps {
+    isDone: boolean;
+    animated: boolean;
+    position: number;
+    isNextDone: boolean;
+}
+export declare function useStepAnimations({ isDone, position, animated, isNextDone }: StepAnimationsProps): StepAnimations;
+export {};
+//# sourceMappingURL=Step.animations.d.ts.map

package/dist/definitions/VerticalSteps/Step.animations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.animations.d.ts","sourceRoot":"","sources":["../../../src/VerticalSteps/Step.animations.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG5D,UAAU,cAAc;IACtB,uBAAuB,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IACjD,yBAAyB,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;CACpD;AAED,UAAU,mBAAmB;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,mBAAmB,GAAG,cAAc,CAwCjH"}

package/dist/definitions/VerticalSteps/Step.d.ts

@@ -10,7 +10,8 @@ export interface StepProps {
     children: ReactNode;
     state?: StepState;
     isLast?: boolean;
+    isFirst?: boolean;
     shouldDisableNextLink?: boolean;
 }
-export declare function Step({ index, children, state, isLast, shouldDisableNextLink, }: StepProps): ReactNode;
+export declare function Step({ index, children, state, isLast, isFirst, shouldDisableNextLink, }: StepProps): ReactNode;
 //# sourceMappingURL=Step.d.ts.map

package/dist/definitions/VerticalSteps/Step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/VerticalSteps/Step.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAEhE;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,wBAAgB,IAAI,CAAC,EACnB,KAAS,EACT,QAAQ,EACR,KAAiB,EACjB,MAAc,EACd,qBAA6B,GAC9B,EAAE,SAAS,GAAG,SAAS,CAwBvB"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/VerticalSteps/Step.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAEhE;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,wBAAgB,IAAI,CAAC,EACnB,KAAS,EACT,QAAQ,EACR,KAAiB,EACjB,MAAc,EACd,OAAe,EACf,qBAA6B,GAC9B,EAAE,SAAS,GAAG,SAAS,CAwBvB"}

package/dist/definitions/VerticalSteps/VerticalSteps.d.ts

@@ -1,12 +1,17 @@
 import type { ViewProps } from '@ornikar/kitt-universal';
-import type { ReactComponentElement, ReactNode } from 'react';
-import { ExternalStep } from './Step';
+import type { ReactNode } from 'react';
+export declare enum StepVariationEnum {
+    default = "default",
+    borderless = "borderless"
+}
 export interface VerticalStepsProps extends ViewProps {
-    children: ReactComponentElement<typeof ExternalStep> | ReactComponentElement<typeof ExternalStep>[];
+    children: ReactNode;
     activeIndex: number;
+    animated?: boolean;
 }
-export declare function VerticalSteps({ children, activeIndex, ...props }: VerticalStepsProps): ReactNode;
+export declare function VerticalSteps({ children, activeIndex, animated, ...props }: VerticalStepsProps): ReactNode;
 export declare namespace VerticalSteps {
-    var Step: typeof ExternalStep;
+    var Step: typeof import("./Step").Step;
+    var BorderlessStep: typeof import("./BorderlessStep").BorderlessStep;
 }
 //# sourceMappingURL=VerticalSteps.d.ts.map

package/dist/definitions/VerticalSteps/VerticalSteps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalSteps.d.ts","sourceRoot":"","sources":["../../../src/VerticalSteps/VerticalSteps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEzD,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,YAAY,EAAQ,MAAM,QAAQ,CAAC;AAG5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,QAAQ,EAAE,qBAAqB,CAAC,OAAO,YAAY,CAAC,GAAG,qBAAqB,CAAC,OAAO,YAAY,CAAC,EAAE,CAAC;IACpG,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,GAAG,SAAS,CAsBhG;yBAtBe,aAAa"}
+{"version":3,"file":"VerticalSteps.d.ts","sourceRoot":"","sources":["../../../src/VerticalSteps/VerticalSteps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEzD,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrD,oBAAY,iBAAiB;IAC3B,OAAO,YAAY;IACnB,UAAU,eAAe;CAC1B;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,GAAG,SAAS,CA8B1G;yBA9Be,aAAa"}

package/dist/index-metro.es.android.js

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useContext, createContext, forwardRef, cloneElement, useRef, useEffect, useState, useMemo, Children, useReducer, Fragment as Fragment$1, useCallback, createElement } from 'react';
+import React, { useContext, createContext, forwardRef, cloneElement, useRef, useEffect, useState, useMemo, Children, useReducer, Fragment as Fragment$1, useCallback } from 'react';
 import { View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, Image as Image$1, FlatList as FlatList$1, SectionList as SectionList$1, Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Center as Center$1, useSx, Text, Input, useBreakpointValue as useBreakpointValue$1, NativeBaseProvider, extendTheme, useMediaQuery } from 'native-base';
 export { useClipboard, useMediaQuery, useSx, useToken } from 'native-base';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -11429,6 +11429,134 @@ function useCurrentBreakpointName() {
   });
 }
 
+function useStepAnimations({
+  isDone,
+  position,
+  animated,
+  isNextDone
+}) {
+  const checkmarkAnimatedValue = useSharedValue(animated ? 0 : 1);
+  const progressBarAnimatedValue = useSharedValue(animated ? 0 : 1);
+  const STAGGER_DELAY = 70;
+  useEffect(() => {
+    if (isDone) {
+      if (isNextDone) {
+        progressBarAnimatedValue.value = animated ? withDelay(STAGGER_DELAY + position * STAGGER_DELAY, withSpring(1)) : 1;
+      }
+      checkmarkAnimatedValue.value = animated ? withDelay(position * STAGGER_DELAY, withSpring(1)) : 1;
+    } else {
+      checkmarkAnimatedValue.value = 0;
+      progressBarAnimatedValue.value = 0;
+    }
+  }, [checkmarkAnimatedValue, progressBarAnimatedValue, isDone, position, animated, isNextDone]);
+  const checkmarkAnimatedStyles = useAnimatedStyle(() => {
+    return {
+      transform: [{
+        scale: checkmarkAnimatedValue.value
+      }]
+    };
+  }, [checkmarkAnimatedValue]);
+  const progressBarAnimatedStyles = useAnimatedStyle(() => {
+    return {
+      transform: [{
+        scaleY: interpolate(progressBarAnimatedValue.value, [0, 1], [0, 2])
+      }]
+    };
+  }, [progressBarAnimatedValue]);
+  return {
+    checkmarkAnimatedStyles,
+    progressBarAnimatedStyles
+  };
+}
+
+const AnimatedView = Animated.createAnimatedComponent(View);
+function BorderlessStep({
+  description,
+  title,
+  position = 1,
+  isLast,
+  animated,
+  currentStep = 1
+}) {
+  const isDone = position <= currentStep;
+  const isNextDone = position + 1 <= currentStep;
+  const {
+    checkmarkAnimatedStyles,
+    progressBarAnimatedStyles
+  } = useStepAnimations({
+    isDone,
+    isNextDone,
+    position,
+    animated: !!animated
+  });
+  return /*#__PURE__*/jsxs(HStack, {
+    paddingBottom: isLast ? 0 : 'kitt.6',
+    width: "100%",
+    children: [/*#__PURE__*/jsxs(View, {
+      zIndex: 1,
+      width: "kitt.8",
+      height: "kitt.8",
+      borderRadius: 16,
+      backgroundColor: "kitt.palettes.lateOcean.black50",
+      alignItems: "center",
+      justifyContent: "center",
+      marginRight: "kitt.3",
+      children: [/*#__PURE__*/jsx(Typography.Paragraph, {
+        variant: "bold",
+        color: "black-light",
+        children: position
+      }), isDone ? /*#__PURE__*/jsx(AnimatedView, {
+        style: checkmarkAnimatedStyles,
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "kitt.8",
+        height: "kitt.8",
+        borderRadius: 16,
+        backgroundColor: "kitt.primary",
+        alignItems: "center",
+        justifyContent: "center",
+        marginRight: "kitt.3",
+        children: /*#__PURE__*/jsx(TypographyIcon, {
+          color: "white",
+          icon: /*#__PURE__*/jsx(CheckRegularIcon, {})
+        })
+      }) : null]
+    }), /*#__PURE__*/jsxs(View, {
+      flexGrow: 1,
+      flexShrink: 1,
+      marginTop: "kitt.1",
+      children: [/*#__PURE__*/jsx(Typography.Paragraph, {
+        color: isDone ? 'primary' : 'black-light',
+        variant: "bold",
+        children: title
+      }), description ? /*#__PURE__*/jsx(Typography.Paragraph, {
+        color: isDone ? 'black' : 'black-light',
+        variant: "regular",
+        children: description
+      }) : null]
+    }), !isLast && /*#__PURE__*/jsx(View, {
+      left: 15,
+      top: 36,
+      bottom: 4,
+      width: 2,
+      borderRadius: 2,
+      position: "absolute",
+      backgroundColor: "kitt.palettes.lateOcean.black50",
+      overflow: "hidden",
+      children: isNextDone ? /*#__PURE__*/jsx(AnimatedView, {
+        style: progressBarAnimatedStyles,
+        position: "absolute",
+        width: 2,
+        top: 0,
+        bottom: 0,
+        left: 0,
+        backgroundColor: "kitt.primary"
+      }) : null
+    })]
+  });
+}
+
 const backgroundColors = {
   done: 'kitt.verticalSteps.done.icon.backgroundColor',
   active: 'kitt.verticalSteps.active.icon.backgroundColor',
@@ -11476,19 +11604,18 @@ function StepIcon({
   });
 }
 
-function ExternalStep() {
-  return null;
-}
 function Step({
   index = 0,
   children,
   state = 'default',
   isLast = false,
+  isFirst = false,
   shouldDisableNextLink = false
 }) {
   return /*#__PURE__*/jsxs(HStack$1, {
     space: "kitt.2",
     flexGrow: 1,
+    marginTop: isFirst ? undefined : 'kitt.4',
     children: [/*#__PURE__*/jsxs(View, {
       marginTop: "kitt.2",
       paddingY: "kitt.2",
@@ -11526,31 +11653,40 @@ function getStepState(index, activeIndex) {
   return 'default';
 }
 
-const _excluded = ["children", "activeIndex"];
+const _excluded = ["children", "activeIndex", "animated"];
 function VerticalSteps(_ref) {
   let {
       children,
-      activeIndex
+      activeIndex,
+      animated
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/jsx(VStack$1, _objectSpread(_objectSpread({
-    space: "kitt.4",
+  const childrenArray = Children.toArray(children);
+  const clonedArray = childrenArray.map((aChild, index) => {
+    if ((process.env.NODE_ENV !== "production") && aChild.type !== Step && aChild.type !== BorderlessStep) {
+      throw new Error('VerticalSteps only accepts VerticalSteps.Step or VerticalSteps.BorderlessStep as children');
+    }
+    const step = index + 1;
+    const isLast = step === childrenArray.length;
+    const newProps = _objectSpread(_objectSpread({}, aChild.props), {}, {
+      position: step,
+      animated,
+      isLast,
+      isFirst: index === 0,
+      currentStep: activeIndex,
+      state: getStepState(index, activeIndex),
+      index
+    });
+    return /*#__PURE__*/cloneElement(aChild, newProps, aChild.props.children);
+  });
+  return /*#__PURE__*/jsx(View$1, _objectSpread(_objectSpread({
     width: "100%"
   }, props), {}, {
-    children: Children.map(children, (child, index) => {
-      if ((process.env.NODE_ENV !== "production") && child.type !== ExternalStep) {
-        throw new Error('VerticalSteps only accepts VerticalSteps.Step as children');
-      }
-      const isLast = index === Children.count(children) - 1;
-      return /*#__PURE__*/createElement(Step, _objectSpread(_objectSpread({}, child.props), {}, {
-        index,
-        isLast,
-        state: getStepState(index, activeIndex)
-      }), child.props.children);
-    })
+    children: clonedArray
   }));
 }
-VerticalSteps.Step = ExternalStep;
+VerticalSteps.Step = Step;
+VerticalSteps.BorderlessStep = BorderlessStep;
 
 export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarkerLarge, MapMarkerPosition, MapMarkerSimple, MatchWindowSize, Message, ModalBehaviour, FlatList as NativeOnlyFlatList, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
 //# sourceMappingURL=index-metro.es.android.js.map