@swan-io/lake 1.3.1 → 1.4.0

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 (16) hide show
  1. package/package.json +27 -30
  2. package/src/components/Caption.d.ts +1 -1
  3. package/src/components/FixedListViewCells.d.ts +2 -2
  4. package/src/components/Heading.d.ts +1 -1
  5. package/src/components/LakeHeading.d.ts +1 -1
  6. package/src/components/LakeSelect.js +9 -6
  7. package/src/components/LakeText.d.ts +1 -1
  8. package/src/components/LakeTextInput.d.ts +2 -0
  9. package/src/components/LakeTextInput.js +15 -6
  10. package/src/components/Link.d.ts +1 -1
  11. package/src/components/Pressable.d.ts +8 -8
  12. package/src/components/Stack.d.ts +4 -4
  13. package/src/components/Svg.d.ts +1 -1
  14. package/src/components/WithPartnerAccentColor.js +11 -24
  15. package/src/constants/insets.js +1 -1
  16. package/src/utils/array.js +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@swan-io/lake",
3
- "version": "1.3.1",
3
+ "version": "1.4.0",
4
4
  "engines": {
5
5
  "node": ">=14.0.0",
6
6
  "yarn": "^1.20.0"
@@ -26,36 +26,33 @@
26
26
  ],
27
27
  "license": "MIT",
28
28
  "dependencies": {
29
- "@popperjs/core": "2.11.6",
30
- "@swan-io/boxed": "0.12.1",
31
- "@swan-io/chicane": "1.3.4",
32
- "dayjs": "1.11.7",
33
- "graphql": "15.8.0",
34
- "polished": "4.2.2",
35
- "prism-react-renderer": "1.3.5",
36
- "react": "18.2.0",
37
- "react-dom": "18.2.0",
38
- "react-dropzone": "14.2.3",
39
- "react-fast-compare": "3.2.0",
40
- "react-native-web": "0.18.12",
41
- "react-popper": "2.3.0",
42
- "react-ux-form": "1.3.0",
43
- "rifm": "0.12.1",
44
- "ts-dedent": "2.2.0",
45
- "ts-pattern": "4.2.1",
46
- "urql": "3.0.3",
47
- "uuid": "9.0.0"
29
+ "@popperjs/core": "^2.11.6",
30
+ "@swan-io/boxed": "^0.12.1",
31
+ "@swan-io/chicane": "^1.3.4",
32
+ "dayjs": "^1.11.7",
33
+ "graphql": "^15.8.0",
34
+ "polished": "^4.2.2",
35
+ "prism-react-renderer": "^1.3.5",
36
+ "react": "^18.2.0",
37
+ "react-dom": "^18.2.0",
38
+ "react-dropzone": "^14.2.3",
39
+ "react-fast-compare": "^3.2.1",
40
+ "react-native-web": "^0.18.12",
41
+ "react-popper": "^2.3.0",
42
+ "react-ux-form": "^1.3.0",
43
+ "rifm": "^0.12.1",
44
+ "ts-dedent": "^2.2.0",
45
+ "ts-pattern": "^4.2.1",
46
+ "urql": "^3.0.4",
47
+ "uuid": "^9.0.0"
48
48
  },
49
49
  "devDependencies": {
50
- "@storybook/react": "6.5.16",
51
- "@testing-library/react": "13.4.0",
52
- "@testing-library/user-event": "14.4.3",
53
- "@types/react": "18.0.28",
54
- "@types/react-dom": "18.0.11",
55
- "@types/react-native": "0.70.11",
56
- "@types/uuid": "9.0.1",
57
- "jsdom": "21.1.0",
58
- "type-fest": "3.6.1",
59
- "vitest": "0.29.2"
50
+ "@storybook/react": "^6.5.16",
51
+ "@types/react": "^18.0.28",
52
+ "@types/react-dom": "^18.0.11",
53
+ "@types/react-native": "^0.70.12",
54
+ "@types/uuid": "^9.0.1",
55
+ "jsdom": "^21.1.1",
56
+ "type-fest": "^3.6.1"
60
57
  }
61
58
  }
package/src/components/Caption.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactText } from "react";
2
2
  import { Text, TextProps } from "react-native";
3
3
  export declare const Caption: import("react").ForwardRefExoticComponent<TextProps & {
4
- align?: "center" | "left" | "right" | undefined;
4
+ align?: "left" | "right" | "center" | undefined;
5
5
  children: ReactText;
6
6
  } & import("react").RefAttributes<Text>>;
package/src/components/FixedListViewCells.d.ts CHANGED
@@ -21,7 +21,7 @@ export declare const SimpleTitleCell: ({ isHighlighted, text, }: {
21
21
  export declare const SimpleRegularTextCell: ({ variant, text, textAlign, }: {
22
22
  variant?: "semibold" | "medium" | "regular" | "light" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
23
23
  text: string;
24
- textAlign?: "center" | "left" | "right" | undefined;
24
+ textAlign?: "left" | "right" | "center" | undefined;
25
25
  }) => JSX.Element;
26
26
  export declare const CopyableRegularTextCell: ({ variant, text, copyWording, copiedWording, }: {
27
27
  variant?: "semibold" | "medium" | "regular" | "light" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
@@ -33,7 +33,7 @@ export declare const BalanceCell: ({ value, currency, formatCurrency, textAlign,
33
33
  value: number;
34
34
  currency: string;
35
35
  formatCurrency: (value: number, currency: string) => string;
36
- textAlign?: "center" | "left" | "right" | undefined;
36
+ textAlign?: "left" | "right" | "center" | undefined;
37
37
  }) => JSX.Element;
38
38
  export declare const LinkCell: ({ children, external, onPress, }: {
39
39
  children: ReactNode;
package/src/components/Heading.d.ts CHANGED
@@ -54,7 +54,7 @@ declare const sizes: {
54
54
  type HeadingSize = keyof typeof sizes;
55
55
  export declare const Heading: import("react").ForwardRefExoticComponent<Except<TextProps, "accessibilityRole"> & {
56
56
  level: 1 | 2 | 3 | 4 | 5 | 6;
57
- align?: "center" | "left" | "right" | undefined;
57
+ align?: "left" | "right" | "center" | undefined;
58
58
  size: HeadingSize;
59
59
  children: ReactNode;
60
60
  } & import("react").RefAttributes<Text>>;
package/src/components/LakeHeading.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ReactNode } from "react";
2
2
  import { Text, TextProps } from "react-native";
3
3
  import { Except } from "type-fest";
4
4
  export declare const LakeHeading: import("react").ForwardRefExoticComponent<Except<TextProps, "accessibilityRole"> & {
5
- align?: "center" | "left" | "right" | undefined;
5
+ align?: "left" | "right" | "center" | undefined;
6
6
  children: ReactNode;
7
7
  color?: string | undefined;
8
8
  level: 1 | 2 | 3 | 4 | 5 | 6 | "none";
package/src/components/LakeSelect.js CHANGED
@@ -67,7 +67,6 @@ const styles = StyleSheet.create({
67
67
  paddingHorizontal: spacings[24],
68
68
  paddingVertical: spacings[8],
69
69
  flexDirection: "row",
70
- justifyContent: "space-between",
71
70
  alignItems: "center",
72
71
  },
73
72
  itemHighlighted: {
@@ -86,9 +85,9 @@ const styles = StyleSheet.create({
86
85
  backgroundColor: invariantColors.transparent,
87
86
  },
88
87
  itemText: {
89
- display: "flex",
90
- flexDirection: "row",
91
- alignItems: "center",
88
+ overflow: "hidden",
89
+ whiteSpace: "nowrap",
90
+ textOverflow: "ellipsis",
92
91
  },
93
92
  errorText: {
94
93
  paddingTop: spacings[4],
@@ -150,7 +149,11 @@ export function LakeSelect({ title, items, valueStyle, size, color = "current",
150
149
  mode !== "borderless" && error != null && styles.errorContainer,
151
150
  (disabled || readOnly) && mode === "borderless" && styles.inputBorderlessDisabled,
152
151
  style,
153
- ], onPress: toggle, onKeyDown: onKeyDown, accessibilityErrorMessage: error, children: ({ hovered }) => (_jsxs(_Fragment, { children: [mode === "normal" && _jsx(View, { style: [styles.shadowed, hovered && styles.hovered] }), _jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [icon && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: colors[color].primary, name: icon, size: isSmall ? 16 : 18 }), _jsx(Space, { width: 8 })] })), hasValue ? (_jsxs(LakeText, { color: colors.gray[900], variant: isSmall ? "smallRegular" : "regular", style: [styles.itemText, valueStyle], children: [isNotNullish(itemValue?.icon) && (_jsxs(_Fragment, { children: [itemValue?.icon, _jsx(Space, { width: 12 })] })), name] })) : (_jsx(LakeText, { style: [styles.selectPlaceholder, isSmall && styles.selectSmallPlaceholder], children: placeholder ?? " " }))] }), _jsx(Fill, { minWidth: 8 }), !disabled && (_jsx(Icon, { color: colors.gray[900], name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 16 }))] })] })) }), !hideErrors && (_jsx(LakeText, { color: colors.negative[400], style: styles.errorText, children: error ?? " " })), _jsxs(Popover, { role: "listbox", matchReferenceMinWidth: matchReferenceWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: [isNotNullish(title) && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "semibold", color: colors.gray[900], style: styles.selectListTitle, children: title }), _jsx(Separator, {})] })), _jsx(FlatList, { accessibilityRole: "list", data: items, ref: listRef, contentContainerStyle: styles.listContent, onKeyDown: e => {
152
+ ], onPress: toggle, onKeyDown: onKeyDown, accessibilityErrorMessage: error, children: ({ hovered }) => (_jsxs(_Fragment, { children: [mode === "normal" && _jsx(View, { style: [styles.shadowed, hovered && styles.hovered] }), _jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", alignItems: "center", style: commonStyles.fill, children: [icon && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: colors[color].primary, name: icon, size: isSmall ? 16 : 18 }), _jsx(Space, { width: 8 })] })), hasValue ? (_jsxs(Box, { direction: "row", alignItems: "center", style: commonStyles.fill, children: [isNotNullish(itemValue?.icon) && (_jsxs(_Fragment, { children: [itemValue?.icon, _jsx(Space, { width: 12 })] })), _jsx(LakeText, { color: colors.gray[900], variant: isSmall ? "smallRegular" : "regular", style: [styles.itemText, valueStyle], children: name })] })) : (_jsx(LakeText, { style: [
153
+ styles.itemText,
154
+ styles.selectPlaceholder,
155
+ isSmall && styles.selectSmallPlaceholder,
156
+ ], children: placeholder ?? " " }))] }), _jsx(Fill, { minWidth: 8 }), !disabled && (_jsx(Icon, { color: colors.gray[900], name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 16 }))] })] })) }), !hideErrors && (_jsx(LakeText, { color: colors.negative[400], style: styles.errorText, children: error ?? " " })), _jsxs(Popover, { role: "listbox", matchReferenceMinWidth: matchReferenceWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: [isNotNullish(title) && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "semibold", color: colors.gray[900], style: styles.selectListTitle, children: title }), _jsx(Separator, {})] })), _jsx(FlatList, { accessibilityRole: "list", data: items, ref: listRef, contentContainerStyle: styles.listContent, onKeyDown: e => {
154
157
  match(e.nativeEvent.key)
155
158
  .with("ArrowDown", () => {
156
159
  e.preventDefault();
@@ -178,6 +181,6 @@ export function LakeSelect({ title, items, valueStyle, size, color = "current",
178
181
  ], accessibilityRole: "option", accessibilitySelected: true, onPress: () => {
179
182
  onValueChange(item.value);
180
183
  close();
181
- }, children: [_jsxs(LakeText, { color: colors.gray[900], numberOfLines: 1, style: [styles.itemText, isSelected && styles.selected], children: [isNotNullish(item.icon) && (_jsxs(_Fragment, { children: [item.icon, _jsx(Space, { width: 12 })] })), item.name] }), isSelected && (_jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14 }))] }));
184
+ }, children: [isNotNullish(item.icon) && (_jsxs(_Fragment, { children: [item.icon, _jsx(Space, { width: 12 })] })), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, style: [styles.itemText, isSelected && styles.selected], children: item.name }), _jsx(Fill, { minWidth: 12 }), isSelected && (_jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14 }))] }));
182
185
  } }), PopoverFooter] })] }));
183
186
  }
package/src/components/LakeText.d.ts CHANGED
@@ -11,7 +11,7 @@ declare const variants: {
11
11
  };
12
12
  export type TextVariant = keyof typeof variants;
13
13
  export declare const LakeText: import("react").ForwardRefExoticComponent<TextProps & {
14
- align?: "center" | "left" | "right" | undefined;
14
+ align?: "left" | "right" | "center" | undefined;
15
15
  children: ReactNode;
16
16
  color?: string | undefined;
17
17
  variant?: "semibold" | "medium" | "regular" | "light" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
package/src/components/LakeTextInput.d.ts CHANGED
@@ -18,6 +18,7 @@ export type LakeTextInputProps = Omit<TextInputProps, "editable" | "onChange"> &
18
18
  hideErrors?: boolean;
19
19
  style?: TextInputProps["style"];
20
20
  onChange?: ChangeEventHandler<HTMLInputElement>;
21
+ maxCharCount?: number;
21
22
  };
22
23
  export declare const LakeTextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "editable" | "onChange"> & {
23
24
  error?: string | undefined;
@@ -35,4 +36,5 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<Om
35
36
  hideErrors?: boolean | undefined;
36
37
  style?: TextInputProps["style"];
37
38
  onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
39
+ maxCharCount?: number | undefined;
38
40
  } & import("react").RefAttributes<TextInput | null>>;
package/src/components/LakeTextInput.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { forwardRef, useCallback, useRef, useState } from "react";
3
3
  import { ActivityIndicator, StyleSheet, TextInput, View, } from "react-native";
4
4
  import { commonStyles } from "../constants/commonStyles";
@@ -7,6 +7,8 @@ import { useHover } from "../hooks/useHover";
7
7
  import { useMergeRefs } from "../hooks/useMergeRefs";
8
8
  import { useNativeProp } from "../hooks/useNativeProp";
9
9
  import { isNotNullish, isNotNullishOrEmpty, isNullish } from "../utils/nullish";
10
+ import { Box } from "./Box";
11
+ import { Fill } from "./Fill";
10
12
  import { Icon } from "./Icon";
11
13
  import { LakeText } from "./LakeText";
12
14
  const TRANSPARENT = "transparent";
@@ -93,9 +95,6 @@ const styles = StyleSheet.create({
93
95
  readOnlyEndIcon: {
94
96
  right: 0,
95
97
  },
96
- errorText: {
97
- paddingTop: spacings[4],
98
- },
99
98
  unit: {
100
99
  backgroundColor: colors.gray[50],
101
100
  paddingHorizontal: spacings[16],
@@ -115,8 +114,17 @@ const styles = StyleSheet.create({
115
114
  borderColor: colors.gray[500],
116
115
  boxShadow: shadows.tile,
117
116
  },
117
+ descriptionLimitation: {
118
+ flexShrink: 0,
119
+ },
120
+ errorContainer: {
121
+ paddingTop: spacings[4],
122
+ },
118
123
  });
119
- export const LakeTextInput = forwardRef(({ error, disabled = false, validating = false, valid = false, readOnly = false, icon, children, unit, color = "gray", keyboardType = "default", hideErrors = false, onChange, pattern, style: stylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false, ...props }, forwardRef) => {
124
+ export const LakeTextInput = forwardRef(({ error, disabled = false, validating = false, valid = false, readOnly = false, icon, children, unit, color = "gray", keyboardType = "default", hideErrors = false, onChange, pattern, style: stylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false,
125
+ //maxCharCount is different from maxLength(props inherited of TextInput), maxLength truncates the text in the limitation asked,
126
+ //maxCharCount doesn't have limitation but displays a counter of characters
127
+ maxCharCount, ...props }, forwardRef) => {
120
128
  const inputRef = useRef(null);
121
129
  const [isHovered, setIsHovered] = useState(false);
122
130
  const [isFocused, setIsFocused] = useState(false);
@@ -136,6 +144,7 @@ export const LakeTextInput = forwardRef(({ error, disabled = false, validating =
136
144
  const mergedRef = useMergeRefs(inputRef, forwardRef);
137
145
  const isInteractive = !disabled && !readOnly;
138
146
  const hasError = isNotNullishOrEmpty(error);
147
+ const charCount = isNullish(value) ? 0 : value.length;
139
148
  return (_jsxs(View, { style: commonStyles.fill, children: [_jsxs(View, { style: styles.root, accessibilityErrorMessage: error, children: [_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: styles.contents, children: [_jsx(TextInput, { keyboardType: keyboardType, ref: mergedRef, ...props, defaultValue: defaultValue, value: isNullish(defaultValue) ? value ?? "" : value, onFocus: onFocus, onBlur: onBlur, editable: isInteractive, onChange: onChange, multiline: multiline, style: [
140
149
  styles.input,
141
150
  multiline && styles.multilineInput,
@@ -150,5 +159,5 @@ export const LakeTextInput = forwardRef(({ error, disabled = false, validating =
150
159
  isFocused && styles.focused,
151
160
  isFocused && { borderColor: colors[color][500] },
152
161
  stylesFromProps,
153
- ] }), validating && (_jsx(ActivityIndicator, { size: "small", style: styles.endIcon, color: colors.current[500] })), !validating && hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.negative[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && !hasError && valid && (_jsx(Icon, { name: "checkmark-filled", size: 20, color: colors.positive[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon }))] }), isNotNullish(unit) && (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit }))] }), children] }), !hideErrors && (_jsx(LakeText, { color: colors.negative[400], style: styles.errorText, children: error ?? " " }))] }));
162
+ ] }), validating && (_jsx(ActivityIndicator, { size: "small", style: styles.endIcon, color: colors.current[500] })), !validating && hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.negative[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && !hasError && valid && (_jsx(Icon, { name: "checkmark-filled", size: 20, color: colors.positive[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon }))] }), isNotNullish(unit) && (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit }))] }), children] }), !hideErrors && (_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", style: styles.errorContainer, children: [_jsx(LakeText, { color: colors.negative[400], children: error ?? " " }), isNotNullish(maxCharCount) && (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 4 }), _jsxs(LakeText, { variant: "smallRegular", color: charCount > maxCharCount ? colors.negative[500] : colors.gray[400], style: styles.descriptionLimitation, children: [charCount, " / ", maxCharCount] })] }))] }))] }));
154
163
  });
package/src/components/Link.d.ts CHANGED
@@ -109,7 +109,7 @@ export declare const Link: import("react").MemoExoticComponent<import("react").F
109
109
  selectionColor?: import("react-native").ColorValue | undefined;
110
110
  textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined;
111
111
  dataDetectorType?: "none" | "all" | "link" | "phoneNumber" | "email" | null | undefined;
112
- android_hyphenationFrequency?: "none" | "normal" | "full" | undefined;
112
+ android_hyphenationFrequency?: "normal" | "none" | "full" | undefined;
113
113
  onBlur?: ((event: import("react-native").NativeSyntheticEvent<import("react").FocusEvent<Element, Element>>) => void) | undefined;
114
114
  onFocus?: ((event: import("react-native").NativeSyntheticEvent<import("react").FocusEvent<Element, Element>>) => void) | undefined;
115
115
  onPressMove?: ((event: unknown) => void) | undefined;
package/src/components/Pressable.d.ts CHANGED
@@ -134,7 +134,7 @@ export declare const PressableText: FC<{
134
134
  selectionColor?: import("react-native").ColorValue | undefined;
135
135
  textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined;
136
136
  dataDetectorType?: "none" | "all" | "link" | "phoneNumber" | "email" | null | undefined;
137
- android_hyphenationFrequency?: "none" | "normal" | "full" | undefined;
137
+ android_hyphenationFrequency?: "normal" | "none" | "full" | undefined;
138
138
  onBlur?: ((event: NativeSyntheticEvent<React.FocusEvent>) => void) | undefined;
139
139
  onFocus?: ((event: NativeSyntheticEvent<React.FocusEvent>) => void) | undefined;
140
140
  onPressMove?: ((event: unknown) => void) | undefined;
@@ -150,14 +150,14 @@ export declare const PressableText: FC<{
150
150
  ref?: Ref<Text> | undefined;
151
151
  }>;
152
152
  export declare const PressableTextInput: FC<Except<{
153
- textAlign?: "center" | "left" | "right" | undefined;
153
+ textAlign?: "left" | "right" | "center" | undefined;
154
154
  testID?: string | undefined;
155
- textAlignVertical?: "auto" | "center" | "bottom" | "top" | undefined;
155
+ textAlignVertical?: "auto" | "center" | "top" | "bottom" | undefined;
156
156
  style?: false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").TextStyle>> | ((state: PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").TextStyle>) | null | undefined;
157
157
  children?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal | ((state: PressableStateCallbackType) => ReactNode) | null | undefined;
158
158
  hitSlop?: import("react-native").Insets | undefined;
159
159
  onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
160
- pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
160
+ pointerEvents?: "none" | "auto" | "box-none" | "box-only" | undefined;
161
161
  removeClippedSubviews?: boolean | undefined;
162
162
  nativeID?: string | undefined;
163
163
  accessibilityRole?: import("react-native").WebAccessibilityRole | undefined;
@@ -279,10 +279,13 @@ export declare const PressableTextInput: FC<Except<{
279
279
  disabled?: boolean | undefined;
280
280
  selectionColor?: import("react-native").ColorValue | undefined;
281
281
  textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined;
282
+ autoFocus?: boolean | undefined;
282
283
  value?: string | undefined;
284
+ onContentSizeChange?: ((e: NativeSyntheticEvent<import("react-native").TextInputContentSizeChangeEventData>) => void) | undefined;
285
+ onScroll?: ((e: NativeSyntheticEvent<import("react-native").TextInputScrollEventData>) => void) | undefined;
286
+ scrollEnabled?: boolean | undefined;
283
287
  autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined;
284
288
  autoCorrect?: boolean | undefined;
285
- autoFocus?: boolean | undefined;
286
289
  blurOnSubmit?: boolean | undefined;
287
290
  caretHidden?: boolean | undefined;
288
291
  contextMenuHidden?: boolean | undefined;
@@ -294,13 +297,11 @@ export declare const PressableTextInput: FC<Except<{
294
297
  onBlur?: ((event: NativeSyntheticEvent<React.FocusEvent>) => void) | undefined;
295
298
  onChange?: ((e: NativeSyntheticEvent<import("react-native").TextInputChangeEventData>) => void) | undefined;
296
299
  onChangeText?: ((text: string) => void) | undefined;
297
- onContentSizeChange?: ((e: NativeSyntheticEvent<import("react-native").TextInputContentSizeChangeEventData>) => void) | undefined;
298
300
  onEndEditing?: ((e: NativeSyntheticEvent<import("react-native").TextInputEndEditingEventData>) => void) | undefined;
299
301
  onFocus?: ((event: NativeSyntheticEvent<React.FocusEvent>) => void) | undefined;
300
302
  onSelectionChange?: ((e: NativeSyntheticEvent<import("react-native").TextInputSelectionChangeEventData>) => void) | undefined;
301
303
  onSubmitEditing?: ((e: NativeSyntheticEvent<import("react-native").TextInputSubmitEditingEventData>) => void) | undefined;
302
304
  onTextInput?: ((e: NativeSyntheticEvent<import("react-native").TextInputTextInputEventData>) => void) | undefined;
303
- onScroll?: ((e: NativeSyntheticEvent<import("react-native").TextInputScrollEventData>) => void) | undefined;
304
305
  onKeyPress?: ((e: NativeSyntheticEvent<import("react-native").TextInputKeyPressEventData>) => void) | undefined;
305
306
  placeholder?: string | undefined;
306
307
  placeholderTextColor?: import("react-native").ColorValue | undefined;
@@ -324,7 +325,6 @@ export declare const PressableTextInput: FC<Except<{
324
325
  selectionState?: import("react-native").DocumentSelectionState | undefined;
325
326
  spellCheck?: boolean | undefined;
326
327
  textContentType?: "none" | "location" | "name" | "nickname" | "username" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "middleName" | "namePrefix" | "nameSuffix" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "password" | "newPassword" | "oneTimeCode" | undefined;
327
- scrollEnabled?: boolean | undefined;
328
328
  cursorColor?: import("react-native").ColorValue | null | undefined;
329
329
  importantForAutofill?: "auto" | "yes" | "no" | "noExcludeDescendants" | "yesExcludeDescendants" | undefined;
330
330
  disableFullscreenUI?: boolean | undefined;
package/src/components/Stack.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  /// <reference types="react" />
2
2
  import { View } from "react-native";
3
3
  export declare const Stack: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & {
4
- alignItems?: ("stretch" | "center" | "end" | "start" | "baseline") | undefined;
4
+ alignItems?: ("center" | "stretch" | "baseline" | "end" | "start") | undefined;
5
5
  children?: import("react").ReactNode;
6
- direction?: ("column" | "row" | "columnReverse" | "rowReverse") | undefined;
7
- justifyContent?: ("center" | "end" | "start" | "normal" | "spaceBetween" | "spaceAround" | "spaceEvenly") | undefined;
6
+ direction?: ("columnReverse" | "row" | "column" | "rowReverse") | undefined;
7
+ justifyContent?: ("normal" | "center" | "end" | "start" | "spaceBetween" | "spaceAround" | "spaceEvenly") | undefined;
8
8
  style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
9
9
  } & {
10
- space?: 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 96 | undefined;
10
+ space?: 16 | 4 | 8 | 12 | 20 | 24 | 32 | 40 | 48 | 72 | 96 | undefined;
11
11
  wrap?: boolean | undefined;
12
12
  } & import("react").RefAttributes<View>>;
package/src/components/Svg.d.ts CHANGED
@@ -118,7 +118,7 @@ export declare const Svg: ({ style, ...props }: SvgProps) => import("react").Rea
118
118
  flexShrink: number;
119
119
  })[];
120
120
  testID?: string | undefined;
121
- pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
121
+ pointerEvents?: "none" | "auto" | "box-none" | "box-only" | undefined;
122
122
  nativeID?: string | undefined;
123
123
  accessibilityRole?: import("react-native").WebAccessibilityRole | undefined;
124
124
  focusable?: boolean | undefined;
package/src/components/WithPartnerAccentColor.js CHANGED
@@ -30,34 +30,21 @@ export const WithPartnerAccentColor = ({ color, scoped = false, children }) => {
30
30
  scalePower += 0.1;
31
31
  }
32
32
  const colorScale = {
33
- 0: setLightness(1.0, color),
34
- 50: setLightness(0.97, color),
35
- 100: setLightness(0.9, color),
36
- 200: setLightness(0.8, color),
37
- 300: setLightness(0.7, color),
38
- 400: setLightness(0.6, color),
39
- 500: setLightness(0.5, color),
40
- 600: setLightness(0.4, color),
41
- 700: setLightness(0.3, color),
42
- 800: setLightness(0.2, color),
43
- 900: setLightness(0.1, color),
33
+ 0: setLightness(Math.pow(1.0, scalePower), color),
34
+ 50: setLightness(Math.pow(0.97, scalePower), color),
35
+ 100: setLightness(Math.pow(0.9, scalePower), color),
36
+ 200: setLightness(Math.pow(0.8, scalePower), color),
37
+ 300: setLightness(Math.pow(0.7, scalePower), color),
38
+ 400: setLightness(Math.pow(0.6, scalePower), color),
39
+ 500: setLightness(Math.pow(0.5, scalePower), color),
40
+ 600: setLightness(Math.pow(0.4, scalePower), color),
41
+ 700: setLightness(Math.pow(0.3, scalePower), color),
42
+ 800: setLightness(Math.pow(0.2, scalePower), color),
43
+ 900: setLightness(Math.pow(0.1, scalePower), color),
44
44
  primary: color,
45
45
  contrast: getContrastColor(color),
46
46
  secondary: shade(0.2, color),
47
47
  };
48
- element.ownerDocument.documentElement.style.setProperty("--color-partner-900", colorScale[900], "");
49
- element.ownerDocument.documentElement.style.setProperty("--color-partner-800", colorScale[800], "");
50
- element.ownerDocument.documentElement.style.setProperty("--color-partner-700", colorScale[700], "");
51
- element.ownerDocument.documentElement.style.setProperty("--color-partner-600", colorScale[600], "");
52
- element.ownerDocument.documentElement.style.setProperty("--color-partner-500", colorScale[500], "");
53
- element.ownerDocument.documentElement.style.setProperty("--color-partner-400", colorScale[400], "");
54
- element.ownerDocument.documentElement.style.setProperty("--color-partner-300", colorScale[300], "");
55
- element.ownerDocument.documentElement.style.setProperty("--color-partner-200", colorScale[200], "");
56
- element.ownerDocument.documentElement.style.setProperty("--color-partner-100", colorScale[100], "");
57
- element.ownerDocument.documentElement.style.setProperty("--color-partner-50", colorScale[50], "");
58
- element.ownerDocument.documentElement.style.setProperty("--color-partner-primary", colorScale.primary, "");
59
- element.ownerDocument.documentElement.style.setProperty("--color-partner-secondary", colorScale.secondary, "");
60
- element.ownerDocument.documentElement.style.setProperty("--color-partner-contrast", colorScale.contrast, "");
61
48
  const rootElement = scoped ? element : element.ownerDocument.documentElement;
62
49
  rootElement.style.setProperty("--color-partner-900", colorScale[900], "");
63
50
  rootElement.style.setProperty("--color-partner-800", colorScale[800], "");
package/src/constants/insets.js CHANGED
@@ -7,7 +7,7 @@ const top = `${cssFn}(safe-area-inset-top)`;
7
7
  const bottom = `${cssFn}(safe-area-inset-bottom)`;
8
8
  const left = `${cssFn}(safe-area-inset-left)`;
9
9
  const right = `${cssFn}(safe-area-inset-right)`;
10
- const addToX = (value, to) => isAvailable && (value > 0 || typeof value === "string")
10
+ const addToX = (value, to) => isAvailable && (typeof value === "string" || value > 0)
11
11
  ? `calc(${to} + ${typeof value === "string" ? value : `${value}px`})`
12
12
  : value;
13
13
  export const insets = {
package/src/utils/array.js CHANGED
@@ -49,7 +49,7 @@ export const sortedIndexOf = (array, value) => {
49
49
  if (item === value) {
50
50
  return searchIndex;
51
51
  }
52
- if (typeof item === "number") {
52
+ if (typeof item === "number" && typeof value === "number") {
53
53
  if (item > value) {
54
54
  endIndex = searchIndex;
55
55
  continue;