@swan-io/lake 3.1.0 → 3.2.1

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 (14) hide show
  1. package/package.json +13 -13
  2. package/src/components/AutoWidthImage.d.ts +14 -14
  3. package/src/components/ErrorBoundary.js +4 -1
  4. package/src/components/Form.d.ts +14 -14
  5. package/src/components/Heading.d.ts +14 -14
  6. package/src/components/LakeHeading.d.ts +14 -14
  7. package/src/components/LakeTextInput.d.ts +18 -14
  8. package/src/components/LakeTextInput.js +6 -3
  9. package/src/components/Link.d.ts +14 -14
  10. package/src/components/Pressable.d.ts +28 -28
  11. package/src/constants/design.d.ts +15 -0
  12. package/src/constants/design.js +18 -0
  13. package/src/utils/string.d.ts +5 -2
  14. package/src/utils/string.js +5 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@swan-io/lake",
3
- "version": "3.1.0",
3
+ "version": "3.2.1",
4
4
  "engines": {
5
5
  "node": ">=18.0.0",
6
6
  "yarn": "^1.22.0"
@@ -27,33 +27,33 @@
27
27
  "license": "MIT",
28
28
  "dependencies": {
29
29
  "@popperjs/core": "^2.11.8",
30
- "@react-three/drei": "^9.83.9",
31
- "@react-three/fiber": "^8.14.1",
30
+ "@react-three/drei": "^9.88.4",
31
+ "@react-three/fiber": "^8.15.4",
32
32
  "@swan-io/boxed": "^1.2.0",
33
33
  "@swan-io/chicane": "^1.4.1",
34
- "dayjs": "^1.11.9",
34
+ "dayjs": "^1.11.10",
35
35
  "polished": "^4.2.2",
36
- "prism-react-renderer": "^2.0.6",
36
+ "prism-react-renderer": "^2.1.0",
37
37
  "react": "^18.2.0",
38
38
  "react-atomic-state": "^1.2.7",
39
39
  "react-dom": "^18.2.0",
40
- "react-native-web": "^0.19.8",
40
+ "react-native-web": "^0.19.9",
41
41
  "react-popper": "^2.3.0",
42
42
  "react-ux-form": "^1.5.0",
43
43
  "rifm": "^0.12.1",
44
- "three": "^0.156.1",
44
+ "three": "^0.157.0",
45
45
  "ts-dedent": "^2.2.0",
46
46
  "ts-pattern": "^5.0.5",
47
47
  "urql": "^4.0.5",
48
48
  "uuid": "^9.0.1"
49
49
  },
50
50
  "devDependencies": {
51
- "@types/react": "^18.2.21",
52
- "@types/react-dom": "^18.2.7",
53
- "@types/react-native": "^0.72.2",
54
- "@types/three": "^0.156.0",
55
- "@types/uuid": "^9.0.3",
51
+ "@types/react": "^18.2.31",
52
+ "@types/react-dom": "^18.2.14",
53
+ "@types/react-native": "^0.72.5",
54
+ "@types/three": "^0.157.2",
55
+ "@types/uuid": "^9.0.6",
56
56
  "jsdom": "^22.1.0",
57
- "type-fest": "^4.3.1"
57
+ "type-fest": "^4.5.0"
58
58
  }
59
59
  }
package/src/components/AutoWidthImage.d.ts CHANGED
@@ -41,26 +41,26 @@ export declare const AutoWidthImage: import("react").MemoExoticComponent<import(
41
41
  label?: string | undefined;
42
42
  }>[] | undefined;
43
43
  accessibilityLabel?: string | undefined;
44
- 'aria-label'?: string | undefined;
44
+ "aria-label"?: string | undefined;
45
45
  accessibilityRole?: import("react-native").AccessibilityRole | undefined;
46
46
  accessibilityState?: import("react-native").AccessibilityState | undefined;
47
- 'aria-busy'?: boolean | undefined;
48
- 'aria-checked'?: boolean | "mixed" | undefined;
49
- 'aria-disabled'?: boolean | undefined;
50
- 'aria-expanded'?: boolean | undefined;
51
- 'aria-selected'?: boolean | undefined;
52
- 'aria-labelledby'?: string | undefined;
47
+ "aria-busy"?: boolean | undefined;
48
+ "aria-checked"?: boolean | "mixed" | undefined;
49
+ "aria-disabled"?: boolean | undefined;
50
+ "aria-expanded"?: boolean | undefined;
51
+ "aria-selected"?: boolean | undefined;
52
+ "aria-labelledby"?: string | undefined;
53
53
  accessibilityHint?: string | undefined;
54
54
  accessibilityValue?: import("react-native").AccessibilityValue | undefined;
55
- 'aria-valuemax'?: number | undefined;
56
- 'aria-valuemin'?: number | undefined;
57
- 'aria-valuenow'?: number | undefined;
58
- 'aria-valuetext'?: string | undefined;
55
+ "aria-valuemax"?: number | undefined;
56
+ "aria-valuemin"?: number | undefined;
57
+ "aria-valuenow"?: number | undefined;
58
+ "aria-valuetext"?: string | undefined;
59
59
  onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
60
60
  importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
61
- 'aria-hidden'?: boolean | undefined;
62
- 'aria-live'?: "off" | "polite" | "assertive" | undefined;
63
- 'aria-modal'?: boolean | undefined;
61
+ "aria-hidden"?: boolean | undefined;
62
+ "aria-live"?: "off" | "polite" | "assertive" | undefined;
63
+ "aria-modal"?: boolean | undefined;
64
64
  accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
65
65
  accessibilityLabelledBy?: string | string[] | undefined;
66
66
  accessibilityElementsHidden?: boolean | undefined;
package/src/components/ErrorBoundary.js CHANGED
@@ -1,6 +1,7 @@
1
1
  // https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
2
2
  // https://github.com/getsentry/sentry-javascript/blob/7.56.0/packages/react/src/errorboundary.tsx
3
3
  import { Component, isValidElement } from "react";
4
+ import { isNotNullish } from "../utils/nullish";
4
5
  const isError = (value) => {
5
6
  const string = Object.prototype.toString.call(value);
6
7
  if (string === "[object Error]" ||
@@ -42,7 +43,9 @@ export class ErrorBoundary extends Component {
42
43
  if (isError(error)) {
43
44
  const cause = new Error(error.message);
44
45
  cause.name = `ErrorBoundary ${cause.name}`;
45
- cause.stack = errorInfo.componentStack;
46
+ if (isNotNullish(errorInfo.componentStack)) {
47
+ cause.stack = errorInfo.componentStack;
48
+ }
46
49
  setCause(error, cause);
47
50
  }
48
51
  if (onError != null) {
package/src/components/Form.d.ts CHANGED
@@ -61,26 +61,26 @@ export declare const Form: import("react").MemoExoticComponent<import("react").F
61
61
  label?: string | undefined;
62
62
  }>[] | undefined;
63
63
  accessibilityLabel?: string | undefined;
64
- 'aria-label'?: string | undefined;
64
+ "aria-label"?: string | undefined;
65
65
  accessibilityRole?: import("react-native").AccessibilityRole | undefined;
66
66
  accessibilityState?: import("react-native").AccessibilityState | undefined;
67
- 'aria-busy'?: boolean | undefined;
68
- 'aria-checked'?: boolean | "mixed" | undefined;
69
- 'aria-disabled'?: boolean | undefined;
70
- 'aria-expanded'?: boolean | undefined;
71
- 'aria-selected'?: boolean | undefined;
72
- 'aria-labelledby'?: string | undefined;
67
+ "aria-busy"?: boolean | undefined;
68
+ "aria-checked"?: boolean | "mixed" | undefined;
69
+ "aria-disabled"?: boolean | undefined;
70
+ "aria-expanded"?: boolean | undefined;
71
+ "aria-selected"?: boolean | undefined;
72
+ "aria-labelledby"?: string | undefined;
73
73
  accessibilityHint?: string | undefined;
74
74
  accessibilityValue?: import("react-native").AccessibilityValue | undefined;
75
- 'aria-valuemax'?: number | undefined;
76
- 'aria-valuemin'?: number | undefined;
77
- 'aria-valuenow'?: number | undefined;
78
- 'aria-valuetext'?: string | undefined;
75
+ "aria-valuemax"?: number | undefined;
76
+ "aria-valuemin"?: number | undefined;
77
+ "aria-valuenow"?: number | undefined;
78
+ "aria-valuetext"?: string | undefined;
79
79
  onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
80
80
  importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
81
- 'aria-hidden'?: boolean | undefined;
82
- 'aria-live'?: "off" | "polite" | "assertive" | undefined;
83
- 'aria-modal'?: boolean | undefined;
81
+ "aria-hidden"?: boolean | undefined;
82
+ "aria-live"?: "off" | "polite" | "assertive" | undefined;
83
+ "aria-modal"?: boolean | undefined;
84
84
  accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
85
85
  accessibilityLabelledBy?: string | string[] | undefined;
86
86
  accessibilityElementsHidden?: boolean | undefined;
package/src/components/Heading.d.ts CHANGED
@@ -88,26 +88,26 @@ export declare const Heading: import("react").ForwardRefExoticComponent<{
88
88
  label?: string | undefined;
89
89
  }>[] | undefined;
90
90
  accessibilityLabel?: string | undefined;
91
- 'aria-label'?: string | undefined;
91
+ "aria-label"?: string | undefined;
92
92
  accessibilityRole?: import("react-native").AccessibilityRole | undefined;
93
93
  accessibilityState?: import("react-native").AccessibilityState | undefined;
94
- 'aria-busy'?: boolean | undefined;
95
- 'aria-checked'?: boolean | "mixed" | undefined;
96
- 'aria-disabled'?: boolean | undefined;
97
- 'aria-expanded'?: boolean | undefined;
98
- 'aria-selected'?: boolean | undefined;
99
- 'aria-labelledby'?: string | undefined;
94
+ "aria-busy"?: boolean | undefined;
95
+ "aria-checked"?: boolean | "mixed" | undefined;
96
+ "aria-disabled"?: boolean | undefined;
97
+ "aria-expanded"?: boolean | undefined;
98
+ "aria-selected"?: boolean | undefined;
99
+ "aria-labelledby"?: string | undefined;
100
100
  accessibilityHint?: string | undefined;
101
101
  accessibilityValue?: import("react-native").AccessibilityValue | undefined;
102
- 'aria-valuemax'?: number | undefined;
103
- 'aria-valuemin'?: number | undefined;
104
- 'aria-valuenow'?: number | undefined;
105
- 'aria-valuetext'?: string | undefined;
102
+ "aria-valuemax"?: number | undefined;
103
+ "aria-valuemin"?: number | undefined;
104
+ "aria-valuenow"?: number | undefined;
105
+ "aria-valuetext"?: string | undefined;
106
106
  onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
107
107
  importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
108
- 'aria-hidden'?: boolean | undefined;
109
- 'aria-live'?: "off" | "polite" | "assertive" | undefined;
110
- 'aria-modal'?: boolean | undefined;
108
+ "aria-hidden"?: boolean | undefined;
109
+ "aria-live"?: "off" | "polite" | "assertive" | undefined;
110
+ "aria-modal"?: boolean | undefined;
111
111
  accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
112
112
  accessibilityLabelledBy?: string | string[] | undefined;
113
113
  accessibilityElementsHidden?: boolean | undefined;
package/src/components/LakeHeading.d.ts CHANGED
@@ -37,26 +37,26 @@ export declare const LakeHeading: import("react").ForwardRefExoticComponent<{
37
37
  label?: string | undefined;
38
38
  }>[] | undefined;
39
39
  accessibilityLabel?: string | undefined;
40
- 'aria-label'?: string | undefined;
40
+ "aria-label"?: string | undefined;
41
41
  accessibilityRole?: import("react-native").AccessibilityRole | undefined;
42
42
  accessibilityState?: import("react-native").AccessibilityState | undefined;
43
- 'aria-busy'?: boolean | undefined;
44
- 'aria-checked'?: boolean | "mixed" | undefined;
45
- 'aria-disabled'?: boolean | undefined;
46
- 'aria-expanded'?: boolean | undefined;
47
- 'aria-selected'?: boolean | undefined;
48
- 'aria-labelledby'?: string | undefined;
43
+ "aria-busy"?: boolean | undefined;
44
+ "aria-checked"?: boolean | "mixed" | undefined;
45
+ "aria-disabled"?: boolean | undefined;
46
+ "aria-expanded"?: boolean | undefined;
47
+ "aria-selected"?: boolean | undefined;
48
+ "aria-labelledby"?: string | undefined;
49
49
  accessibilityHint?: string | undefined;
50
50
  accessibilityValue?: import("react-native").AccessibilityValue | undefined;
51
- 'aria-valuemax'?: number | undefined;
52
- 'aria-valuemin'?: number | undefined;
53
- 'aria-valuenow'?: number | undefined;
54
- 'aria-valuetext'?: string | undefined;
51
+ "aria-valuemax"?: number | undefined;
52
+ "aria-valuemin"?: number | undefined;
53
+ "aria-valuenow"?: number | undefined;
54
+ "aria-valuetext"?: string | undefined;
55
55
  onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
56
56
  importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
57
- 'aria-hidden'?: boolean | undefined;
58
- 'aria-live'?: "off" | "polite" | "assertive" | undefined;
59
- 'aria-modal'?: boolean | undefined;
57
+ "aria-hidden"?: boolean | undefined;
58
+ "aria-live"?: "off" | "polite" | "assertive" | undefined;
59
+ "aria-modal"?: boolean | undefined;
60
60
  accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
61
61
  accessibilityLabelledBy?: string | string[] | undefined;
62
62
  accessibilityElementsHidden?: boolean | undefined;
package/src/components/LakeTextInput.d.ts CHANGED
@@ -15,6 +15,7 @@ export type LakeTextInputProps = Except<TextInputProps, "editable" | "keyboardTy
15
15
  multiline?: boolean;
16
16
  icon?: IconName;
17
17
  unit?: string;
18
+ units?: string[];
18
19
  inputMode?: TextInputProps["inputMode"];
19
20
  pattern?: string;
20
21
  children?: ReactNode;
@@ -22,6 +23,7 @@ export type LakeTextInputProps = Except<TextInputProps, "editable" | "keyboardTy
22
23
  style?: TextInputProps["style"];
23
24
  containerStyle?: ViewProps["style"];
24
25
  onChange?: ChangeEventHandler<HTMLInputElement>;
26
+ onUnitChange?: (value: string) => void;
25
27
  maxCharCount?: number;
26
28
  help?: string;
27
29
  renderEnd?: () => ReactNode;
@@ -132,26 +134,26 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
132
134
  label?: string | undefined;
133
135
  }>[] | undefined;
134
136
  accessibilityLabel?: string | undefined;
135
- 'aria-label'?: string | undefined;
137
+ "aria-label"?: string | undefined;
136
138
  accessibilityRole?: import("react-native").AccessibilityRole | undefined;
137
139
  accessibilityState?: import("react-native").AccessibilityState | undefined;
138
- 'aria-busy'?: boolean | undefined;
139
- 'aria-checked'?: boolean | "mixed" | undefined;
140
- 'aria-disabled'?: boolean | undefined;
141
- 'aria-expanded'?: boolean | undefined;
142
- 'aria-selected'?: boolean | undefined;
143
- 'aria-labelledby'?: string | undefined;
140
+ "aria-busy"?: boolean | undefined;
141
+ "aria-checked"?: boolean | "mixed" | undefined;
142
+ "aria-disabled"?: boolean | undefined;
143
+ "aria-expanded"?: boolean | undefined;
144
+ "aria-selected"?: boolean | undefined;
145
+ "aria-labelledby"?: string | undefined;
144
146
  accessibilityHint?: string | undefined;
145
147
  accessibilityValue?: import("react-native").AccessibilityValue | undefined;
146
- 'aria-valuemax'?: number | undefined;
147
- 'aria-valuemin'?: number | undefined;
148
- 'aria-valuenow'?: number | undefined;
149
- 'aria-valuetext'?: string | undefined;
148
+ "aria-valuemax"?: number | undefined;
149
+ "aria-valuemin"?: number | undefined;
150
+ "aria-valuenow"?: number | undefined;
151
+ "aria-valuetext"?: string | undefined;
150
152
  onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
151
153
  importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
152
- 'aria-hidden'?: boolean | undefined;
153
- 'aria-live'?: "off" | "polite" | "assertive" | undefined;
154
- 'aria-modal'?: boolean | undefined;
154
+ "aria-hidden"?: boolean | undefined;
155
+ "aria-live"?: "off" | "polite" | "assertive" | undefined;
156
+ "aria-modal"?: boolean | undefined;
155
157
  accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
156
158
  accessibilityLabelledBy?: string | string[] | undefined;
157
159
  accessibilityElementsHidden?: boolean | undefined;
@@ -229,6 +231,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
229
231
  multiline?: boolean | undefined;
230
232
  icon?: "lake-building-bank" | "lake-calendar-arrow-swap" | "lake-card" | "lake-card-add" | "lake-card-filled" | "lake-card-one-off" | "lake-card-physical" | "lake-card-recurring" | "lake-card-single-use" | "lake-card-virtual" | "lake-chevron-double" | "lake-clipboard-bullet" | "lake-clock" | "lake-clock-arrow-swap" | "lake-close" | "lake-currencies" | "lake-delivery-grouped" | "lake-delivery-individual" | "lake-document-csv" | "lake-document-jpg" | "lake-document-pdf" | "lake-document-png" | "lake-document-xls" | "lake-email" | "lake-id-card" | "lake-inbox-empty" | "lake-menu" | "lake-people" | "lake-person-arrow-swap" | "lake-phone" | "lake-receipt" | "lake-settings" | "lake-signature" | "lake-transfer" | "lake-world-map" | "add-circle-filled" | "add-circle-regular" | "add-filled" | "approvals-app-filled" | "apps-list-filled" | "apps-list-regular" | "arrow-counterclockwise-filled" | "arrow-clockwise-filled" | "arrow-down-filled" | "arrow-down-regular" | "arrow-download-filled" | "arrow-left-filled" | "arrow-left-regular" | "arrow-right-filled" | "arrow-right-regular" | "arrow-swap-filled" | "arrow-swap-regular" | "arrow-up-filled" | "arrow-up-regular" | "arrow-upload-filled" | "arrow-upload-regular" | "beaker-filled" | "beaker-regular" | "board-filled" | "board-regular" | "box-regular" | "building-bank-filled" | "building-bank-regular" | "building-filled" | "building-multiple-regular" | "building-regular" | "building-shop-regular" | "calendar-ltr-regular" | "cart-regular" | "chat-help-filled" | "chat-help-regular" | "check-filled" | "check-regular" | "checkmark-circle-regular" | "checkmark-filled" | "chevron-down-filled" | "chevron-left-filled" | "chevron-right-filled" | "chevron-up-down-regular" | "chevron-up-filled" | "clipboard-search-regular" | "clock-filled" | "clock-regular" | "cloud-sync-filled" | "cloud-sync-regular" | "code-filled" | "code-regular" | "color-regular" | "comment-note-regular" | "copy-filled" | "copy-regular" | "cursor-click-regular" | "database-filled" | "database-regular" | "delete-filled" | "delete-regular" | "desktop-regular" | "device-meeting-room-regular" | "dismiss-circle-regular" | "dismiss-filled" | "dismiss-regular" | "document-regular" | "earth-regular" | "edit-filled" | "edit-regular" | "error-circle-filled" | "error-circle-regular" | "eye-filled" | "eye-off-filled" | "eye-regular" | "filter-filled" | "flag-filled" | "flag-regular" | "flash-filled" | "flash-regular" | "form-new-filled" | "form-new-regular" | "hand-right-regular" | "image-add-filled" | "image-add-regular" | "image-filled" | "image-regular" | "info-filled" | "info-regular" | "key-regular" | "link-filled" | "live-filled" | "live-regular" | "lock-closed-filled" | "lock-closed-regular" | "lock-open-filled" | "lock-open-regular" | "mail-filled" | "mail-regular" | "money-regular" | "more-vertical-filled" | "open-filled" | "open-regular" | "options-regular" | "paint-brush-filled" | "paint-brush-regular" | "pause-regular" | "payment-filled" | "payment-regular" | "people-add-regular" | "people-community-filled" | "people-community-regular" | "people-filled" | "people-regular" | "people-team-regular" | "person-accounts-filled" | "person-accounts-regular" | "person-add-regular" | "person-call-filled" | "person-call-regular" | "person-filled" | "person-lock-regular" | "person-regular" | "phone-filled" | "phone-regular" | "pin-regular" | "play-filled" | "play-regular" | "preview-link-filled" | "qr-code-regular" | "question-circle-regular" | "receipt-money-filled" | "receipt-money-regular" | "rocket-regular" | "search-filled" | "send-filled" | "send-regular" | "settings-filled" | "settings-regular" | "shield-checkmark-filled" | "shield-checkmark-regular" | "shield-error-regular" | "shield-regular" | "sign-out-regular" | "signature-filled" | "signature-regular" | "subtract-circle-filled" | "subtract-circle-regular" | "target-arrow-regular" | "task-list-square-ltr-filled" | "task-list-square-ltr-regular" | "warning-filled" | "warning-regular" | "window-dev-tools-filled" | "window-dev-tools-regular" | undefined;
231
233
  unit?: string | undefined;
234
+ units?: string[] | undefined;
232
235
  inputMode?: TextInputProps["inputMode"];
233
236
  pattern?: string | undefined;
234
237
  children?: ReactNode;
@@ -236,6 +239,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
236
239
  style?: TextInputProps["style"];
237
240
  containerStyle?: ViewProps["style"];
238
241
  onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
242
+ onUnitChange?: ((value: string) => void) | undefined;
239
243
  maxCharCount?: number | undefined;
240
244
  help?: string | undefined;
241
245
  renderEnd?: (() => ReactNode) | undefined;
package/src/components/LakeTextInput.js CHANGED
@@ -10,6 +10,7 @@ import { isNotNullish, isNotNullishOrEmpty, isNullish } from "../utils/nullish";
10
10
  import { Box } from "./Box";
11
11
  import { Fill } from "./Fill";
12
12
  import { Icon } from "./Icon";
13
+ import { LakeSelect } from "./LakeSelect";
13
14
  import { LakeText } from "./LakeText";
14
15
  const TRANSPARENT = "transparent";
15
16
  const styles = StyleSheet.create({
@@ -106,6 +107,8 @@ const styles = StyleSheet.create({
106
107
  borderWidth: 1,
107
108
  borderLeftWidth: 0,
108
109
  flexShrink: 0,
110
+ borderTopLeftRadius: 0,
111
+ borderBottomLeftRadius: 0,
109
112
  },
110
113
  unitDisabled: {
111
114
  borderColor: colors.gray[50],
@@ -121,7 +124,7 @@ const styles = StyleSheet.create({
121
124
  paddingTop: spacings[4],
122
125
  },
123
126
  });
124
- export const LakeTextInput = forwardRef(({ ariaExpanded, ariaControls, error, disabled = false, validating = false, valid = false, readOnly = false, icon, children, unit, color = "gray", inputMode = "text", hideErrors = false, onChange, pattern, style: stylesFromProps, containerStyle: containerStylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false, containerRef,
127
+ export const LakeTextInput = forwardRef(({ ariaExpanded, ariaControls, error, disabled = false, validating = false, valid = false, readOnly = false, icon, children, unit, units, color = "gray", inputMode = "text", hideErrors = false, onChange, onUnitChange, pattern, style: stylesFromProps, containerStyle: containerStylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false, containerRef,
125
128
  //maxCharCount is different from maxLength(props inherited of TextInput)
126
129
  //maxLength truncates the text in the limitation asked,
127
130
  //maxCharCount doesn't have limitation but displays a counter of characters
@@ -154,7 +157,7 @@ maxCharCount, help, renderEnd, ...props }, forwardRef) => {
154
157
  disabled && styles.disabled,
155
158
  readOnly && styles.readOnly,
156
159
  isFocused && styles.focused,
157
- isNotNullish(unit) && styles.inputWithUnit,
160
+ isNotNullish(unit ?? units) && styles.inputWithUnit,
158
161
  hasError && styles.error,
159
162
  valid && styles.valid,
160
163
  stylesFromProps,
@@ -164,5 +167,5 @@ maxCharCount, help, renderEnd, ...props }, forwardRef) => {
164
167
  readOnly && hasError && styles.readOnlyError,
165
168
  disabled && styles.disabled,
166
169
  readOnly && styles.readOnly,
167
- ] }), isNotNullish(renderEnd) && _jsx(View, { style: styles.endComponents, children: renderEnd() }), 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(unit) && (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit }))] }), children] }), !hideErrors && (_jsxs(Box, { direction: "row", style: styles.errorContainer, children: [isNotNullish(error) ? (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error })) : (_jsx(LakeText, { variant: "smallRegular", color: colors.gray[500], children: help ?? " " })), 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] })] }))] }))] }));
170
+ ] }), isNotNullish(renderEnd) && _jsx(View, { style: styles.endComponents, children: renderEnd() }), 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(units) && isNotNullish(onUnitChange) ? (_jsx(Box, { children: _jsx(LakeSelect, { value: unit, onValueChange: onUnitChange, items: units.map(value => ({ name: value, value })), disabled: disabled, style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], mode: "borderless", hideErrors: true }) })) : isNotNullish(unit) ? (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit })) : null] }), children] }), !hideErrors && (_jsxs(Box, { direction: "row", style: styles.errorContainer, children: [isNotNullish(error) ? (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error })) : (_jsx(LakeText, { variant: "smallRegular", color: colors.gray[500], children: help ?? " " })), 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] })] }))] }))] }));
168
171
  });
package/src/components/Link.d.ts CHANGED
@@ -46,26 +46,26 @@ export declare const Link: import("react").MemoExoticComponent<import("react").F
46
46
  label?: string | undefined;
47
47
  }>[] | undefined;
48
48
  accessibilityLabel?: string | undefined;
49
- 'aria-label'?: string | undefined;
49
+ "aria-label"?: string | undefined;
50
50
  accessibilityRole?: import("react-native").AccessibilityRole | undefined;
51
51
  accessibilityState?: import("react-native").AccessibilityState | undefined;
52
- 'aria-busy'?: boolean | undefined;
53
- 'aria-checked'?: boolean | "mixed" | undefined;
54
- 'aria-disabled'?: boolean | undefined;
55
- 'aria-expanded'?: boolean | undefined;
56
- 'aria-selected'?: boolean | undefined;
57
- 'aria-labelledby'?: string | undefined;
52
+ "aria-busy"?: boolean | undefined;
53
+ "aria-checked"?: boolean | "mixed" | undefined;
54
+ "aria-disabled"?: boolean | undefined;
55
+ "aria-expanded"?: boolean | undefined;
56
+ "aria-selected"?: boolean | undefined;
57
+ "aria-labelledby"?: string | undefined;
58
58
  accessibilityHint?: string | undefined;
59
59
  accessibilityValue?: import("react-native").AccessibilityValue | undefined;
60
- 'aria-valuemax'?: number | undefined;
61
- 'aria-valuemin'?: number | undefined;
62
- 'aria-valuenow'?: number | undefined;
63
- 'aria-valuetext'?: string | undefined;
60
+ "aria-valuemax"?: number | undefined;
61
+ "aria-valuemin"?: number | undefined;
62
+ "aria-valuenow"?: number | undefined;
63
+ "aria-valuetext"?: string | undefined;
64
64
  onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
65
65
  importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
66
- 'aria-hidden'?: boolean | undefined;
67
- 'aria-live'?: "off" | "polite" | "assertive" | undefined;
68
- 'aria-modal'?: boolean | undefined;
66
+ "aria-hidden"?: boolean | undefined;
67
+ "aria-live"?: "off" | "polite" | "assertive" | undefined;
68
+ "aria-modal"?: boolean | undefined;
69
69
  accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
70
70
  accessibilityLabelledBy?: string | string[] | undefined;
71
71
  accessibilityElementsHidden?: boolean | undefined;
package/src/components/Pressable.d.ts CHANGED
@@ -71,26 +71,26 @@ export declare const PressableText: FC<{
71
71
  label?: string | undefined;
72
72
  }>[] | undefined;
73
73
  accessibilityLabel?: string | undefined;
74
- 'aria-label'?: string | undefined;
74
+ "aria-label"?: string | undefined;
75
75
  accessibilityRole?: import("react-native").AccessibilityRole | undefined;
76
76
  accessibilityState?: import("react-native").AccessibilityState | undefined;
77
- 'aria-busy'?: boolean | undefined;
78
- 'aria-checked'?: boolean | "mixed" | undefined;
79
- 'aria-disabled'?: boolean | undefined;
80
- 'aria-expanded'?: boolean | undefined;
81
- 'aria-selected'?: boolean | undefined;
82
- 'aria-labelledby'?: string | undefined;
77
+ "aria-busy"?: boolean | undefined;
78
+ "aria-checked"?: boolean | "mixed" | undefined;
79
+ "aria-disabled"?: boolean | undefined;
80
+ "aria-expanded"?: boolean | undefined;
81
+ "aria-selected"?: boolean | undefined;
82
+ "aria-labelledby"?: string | undefined;
83
83
  accessibilityHint?: string | undefined;
84
84
  accessibilityValue?: import("react-native").AccessibilityValue | undefined;
85
- 'aria-valuemax'?: number | undefined;
86
- 'aria-valuemin'?: number | undefined;
87
- 'aria-valuenow'?: number | undefined;
88
- 'aria-valuetext'?: string | undefined;
85
+ "aria-valuemax"?: number | undefined;
86
+ "aria-valuemin"?: number | undefined;
87
+ "aria-valuenow"?: number | undefined;
88
+ "aria-valuetext"?: string | undefined;
89
89
  onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
90
90
  importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
91
- 'aria-hidden'?: boolean | undefined;
92
- 'aria-live'?: "off" | "polite" | "assertive" | undefined;
93
- 'aria-modal'?: boolean | undefined;
91
+ "aria-hidden"?: boolean | undefined;
92
+ "aria-live"?: "off" | "polite" | "assertive" | undefined;
93
+ "aria-modal"?: boolean | undefined;
94
94
  accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
95
95
  accessibilityLabelledBy?: string | string[] | undefined;
96
96
  accessibilityElementsHidden?: boolean | undefined;
@@ -253,26 +253,26 @@ export declare const PressableTextInput: FC<{
253
253
  label?: string | undefined;
254
254
  }>[] | undefined;
255
255
  accessibilityLabel?: string | undefined;
256
- 'aria-label'?: string | undefined;
256
+ "aria-label"?: string | undefined;
257
257
  accessibilityRole?: import("react-native").AccessibilityRole | undefined;
258
258
  accessibilityState?: import("react-native").AccessibilityState | undefined;
259
- 'aria-busy'?: boolean | undefined;
260
- 'aria-checked'?: boolean | "mixed" | undefined;
261
- 'aria-disabled'?: boolean | undefined;
262
- 'aria-expanded'?: boolean | undefined;
263
- 'aria-selected'?: boolean | undefined;
264
- 'aria-labelledby'?: string | undefined;
259
+ "aria-busy"?: boolean | undefined;
260
+ "aria-checked"?: boolean | "mixed" | undefined;
261
+ "aria-disabled"?: boolean | undefined;
262
+ "aria-expanded"?: boolean | undefined;
263
+ "aria-selected"?: boolean | undefined;
264
+ "aria-labelledby"?: string | undefined;
265
265
  accessibilityHint?: string | undefined;
266
266
  accessibilityValue?: import("react-native").AccessibilityValue | undefined;
267
- 'aria-valuemax'?: number | undefined;
268
- 'aria-valuemin'?: number | undefined;
269
- 'aria-valuenow'?: number | undefined;
270
- 'aria-valuetext'?: string | undefined;
267
+ "aria-valuemax"?: number | undefined;
268
+ "aria-valuemin"?: number | undefined;
269
+ "aria-valuenow"?: number | undefined;
270
+ "aria-valuetext"?: string | undefined;
271
271
  onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
272
272
  importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
273
- 'aria-hidden'?: boolean | undefined;
274
- 'aria-live'?: "off" | "polite" | "assertive" | undefined;
275
- 'aria-modal'?: boolean | undefined;
273
+ "aria-hidden"?: boolean | undefined;
274
+ "aria-live"?: "off" | "polite" | "assertive" | undefined;
275
+ "aria-modal"?: boolean | undefined;
276
276
  accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
277
277
  accessibilityLabelledBy?: string | string[] | undefined;
278
278
  accessibilityElementsHidden?: boolean | undefined;
package/src/constants/design.d.ts CHANGED
@@ -132,6 +132,21 @@ export declare const animations: {
132
132
  fadeAndSlideInFromLeft: Animation;
133
133
  fadeAndSlideInFromBottom: Animation;
134
134
  fadeAndSlideInFromRight: Animation;
135
+ heartbeat: {
136
+ enter: {
137
+ animationKeyframes: {
138
+ "0%, 100%": {
139
+ opacity: number;
140
+ };
141
+ "50%": {
142
+ opacity: number;
143
+ };
144
+ }[];
145
+ animationDuration: string;
146
+ animationTimingFunction: string;
147
+ animationIterationCount: "infinite";
148
+ };
149
+ };
135
150
  shake: {
136
151
  enter: {
137
152
  animationKeyframes: {
package/src/constants/design.js CHANGED
@@ -550,11 +550,29 @@ const shake = StyleSheet.create({
550
550
  animationTimingFunction: "cubic-bezier(.36,.07,.19,.97)",
551
551
  },
552
552
  });
553
+ const heartbeat = StyleSheet.create({
554
+ enter: {
555
+ animationKeyframes: [
556
+ {
557
+ "0%, 100%": {
558
+ opacity: 1,
559
+ },
560
+ "50%": {
561
+ opacity: 0.5,
562
+ },
563
+ },
564
+ ],
565
+ animationDuration: "1000ms",
566
+ animationTimingFunction: easeInOutQuad,
567
+ animationIterationCount: "infinite",
568
+ },
569
+ });
553
570
  export const animations = {
554
571
  fadeAndSlideInFromTop,
555
572
  fadeAndSlideInFromLeft,
556
573
  fadeAndSlideInFromBottom,
557
574
  fadeAndSlideInFromRight,
575
+ heartbeat,
558
576
  shake,
559
577
  };
560
578
  export const breakpoints = {
package/src/utils/string.d.ts CHANGED
@@ -1,4 +1,7 @@
1
1
  export declare const safeSplitAround: (string: string, expression: string) => string[];
2
2
  export declare const deburr: (value: string) => string;
3
- export declare const words: (string: string) => string[];
4
- export declare const capitalize: (string: string) => string;
3
+ export declare const words: (value: string) => string[];
4
+ export declare const lowerCase: <T extends string>(value: T) => Lowercase<T>;
5
+ export declare const upperCase: <T extends string>(value: T) => Uppercase<T>;
6
+ export declare const capitalize: <T extends string>(value: T) => Capitalize<T>;
7
+ export declare const uncapitalize: <T extends string>(value: T) => Uncapitalize<T>;
package/src/utils/string.js CHANGED
@@ -225,9 +225,8 @@ export const deburr = (value) => {
225
225
  .replace(reLatin, char => deburredLetters[char] ?? "")
226
226
  .replace(/[\u0300-\u036f]/g, "");
227
227
  };
228
- export const words = (string) => {
229
- return string.split(/\b/).filter(x => /^[a-zA-Z0-9]+$/.test(x));
230
- };
231
- export const capitalize = (string) => {
232
- return `${string.charAt(0).toUpperCase()}${string.slice(1).toLowerCase()}`;
233
- };
228
+ export const words = (value) => value.split(/\b/).filter(x => /^[a-zA-Z0-9]+$/.test(x));
229
+ export const lowerCase = (value) => value.toLowerCase();
230
+ export const upperCase = (value) => value.toUpperCase();
231
+ export const capitalize = (value) => `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
232
+ export const uncapitalize = (value) => `${value.charAt(0).toLowerCase()}${value.slice(1)}`;