@swan-io/lake 3.2.0 → 3.3.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.
- package/package.json +13 -13
- package/src/components/AutoWidthImage.d.ts +14 -14
- package/src/components/ErrorBoundary.js +4 -1
- package/src/components/Form.d.ts +14 -14
- package/src/components/Heading.d.ts +14 -14
- package/src/components/Icon.d.ts +1 -0
- package/src/components/LakeHeading.d.ts +14 -14
- package/src/components/LakeTextInput.d.ts +15 -15
- package/src/components/Link.d.ts +14 -14
- package/src/components/Pressable.d.ts +28 -28
- package/src/components/SegmentedControl.d.ts +14 -0
- package/src/components/SegmentedControl.js +68 -0
- package/src/constants/design.d.ts +15 -0
- package/src/constants/design.js +18 -0
- package/src/icons/fluent-icons.json +1 -0
- package/src/utils/string.d.ts +5 -2
- 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.
|
|
3
|
+
"version": "3.3.0",
|
|
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.
|
|
31
|
-
"@react-three/fiber": "^8.
|
|
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.
|
|
34
|
+
"dayjs": "^1.11.10",
|
|
35
35
|
"polished": "^4.2.2",
|
|
36
|
-
"prism-react-renderer": "^2.0
|
|
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.
|
|
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.
|
|
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.
|
|
52
|
-
"@types/react-dom": "^18.2.
|
|
53
|
-
"@types/react-native": "^0.72.
|
|
54
|
-
"@types/three": "^0.
|
|
55
|
-
"@types/uuid": "^9.0.
|
|
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.
|
|
57
|
+
"type-fest": "^4.5.0"
|
|
58
58
|
}
|
|
59
59
|
}
|
|
@@ -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
|
-
|
|
44
|
+
"aria-label"?: string | undefined;
|
|
45
45
|
accessibilityRole?: import("react-native").AccessibilityRole | undefined;
|
|
46
46
|
accessibilityState?: import("react-native").AccessibilityState | undefined;
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
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
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
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
|
-
|
|
62
|
-
|
|
63
|
-
|
|
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;
|
|
@@ -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
|
-
|
|
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
|
-
|
|
64
|
+
"aria-label"?: string | undefined;
|
|
65
65
|
accessibilityRole?: import("react-native").AccessibilityRole | undefined;
|
|
66
66
|
accessibilityState?: import("react-native").AccessibilityState | undefined;
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
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
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
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
|
-
|
|
82
|
-
|
|
83
|
-
|
|
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;
|
|
@@ -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
|
-
|
|
91
|
+
"aria-label"?: string | undefined;
|
|
92
92
|
accessibilityRole?: import("react-native").AccessibilityRole | undefined;
|
|
93
93
|
accessibilityState?: import("react-native").AccessibilityState | undefined;
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
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
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
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
|
-
|
|
109
|
-
|
|
110
|
-
|
|
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/Icon.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
|
-
|
|
40
|
+
"aria-label"?: string | undefined;
|
|
41
41
|
accessibilityRole?: import("react-native").AccessibilityRole | undefined;
|
|
42
42
|
accessibilityState?: import("react-native").AccessibilityState | undefined;
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
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
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
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
|
-
|
|
58
|
-
|
|
59
|
-
|
|
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;
|
|
@@ -134,26 +134,26 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
|
|
|
134
134
|
label?: string | undefined;
|
|
135
135
|
}>[] | undefined;
|
|
136
136
|
accessibilityLabel?: string | undefined;
|
|
137
|
-
|
|
137
|
+
"aria-label"?: string | undefined;
|
|
138
138
|
accessibilityRole?: import("react-native").AccessibilityRole | undefined;
|
|
139
139
|
accessibilityState?: import("react-native").AccessibilityState | undefined;
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
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;
|
|
146
146
|
accessibilityHint?: string | undefined;
|
|
147
147
|
accessibilityValue?: import("react-native").AccessibilityValue | undefined;
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
148
|
+
"aria-valuemax"?: number | undefined;
|
|
149
|
+
"aria-valuemin"?: number | undefined;
|
|
150
|
+
"aria-valuenow"?: number | undefined;
|
|
151
|
+
"aria-valuetext"?: string | undefined;
|
|
152
152
|
onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
|
|
153
153
|
importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
154
|
+
"aria-hidden"?: boolean | undefined;
|
|
155
|
+
"aria-live"?: "off" | "polite" | "assertive" | undefined;
|
|
156
|
+
"aria-modal"?: boolean | undefined;
|
|
157
157
|
accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
|
|
158
158
|
accessibilityLabelledBy?: string | string[] | undefined;
|
|
159
159
|
accessibilityElementsHidden?: boolean | undefined;
|
|
@@ -229,7 +229,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
|
|
|
229
229
|
disabled?: boolean | undefined;
|
|
230
230
|
color?: "gray" | "live" | "sandbox" | "positive" | "warning" | "negative" | "current" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined;
|
|
231
231
|
multiline?: boolean | undefined;
|
|
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;
|
|
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-horizontal-filled" | "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;
|
|
233
233
|
unit?: string | undefined;
|
|
234
234
|
units?: string[] | undefined;
|
|
235
235
|
inputMode?: TextInputProps["inputMode"];
|
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
|
-
|
|
49
|
+
"aria-label"?: string | undefined;
|
|
50
50
|
accessibilityRole?: import("react-native").AccessibilityRole | undefined;
|
|
51
51
|
accessibilityState?: import("react-native").AccessibilityState | undefined;
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
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
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
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
|
-
|
|
67
|
-
|
|
68
|
-
|
|
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;
|
|
@@ -71,26 +71,26 @@ export declare const PressableText: FC<{
|
|
|
71
71
|
label?: string | undefined;
|
|
72
72
|
}>[] | undefined;
|
|
73
73
|
accessibilityLabel?: string | undefined;
|
|
74
|
-
|
|
74
|
+
"aria-label"?: string | undefined;
|
|
75
75
|
accessibilityRole?: import("react-native").AccessibilityRole | undefined;
|
|
76
76
|
accessibilityState?: import("react-native").AccessibilityState | undefined;
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
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
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
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
|
-
|
|
92
|
-
|
|
93
|
-
|
|
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
|
-
|
|
256
|
+
"aria-label"?: string | undefined;
|
|
257
257
|
accessibilityRole?: import("react-native").AccessibilityRole | undefined;
|
|
258
258
|
accessibilityState?: import("react-native").AccessibilityState | undefined;
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
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
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
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
|
-
|
|
274
|
-
|
|
275
|
-
|
|
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;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
export type Item<T extends string> = {
|
|
3
|
+
name: string;
|
|
4
|
+
id: T;
|
|
5
|
+
icon?: ReactNode;
|
|
6
|
+
};
|
|
7
|
+
type Props<T extends string> = {
|
|
8
|
+
mode?: "desktop" | "mobile";
|
|
9
|
+
selected: T;
|
|
10
|
+
items: ReadonlyArray<Item<T>>;
|
|
11
|
+
onValueChange: (value: T) => void;
|
|
12
|
+
};
|
|
13
|
+
export declare const SegmentedControl: <T extends string>({ mode, selected, items, onValueChange, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { StyleSheet, View } from "react-native";
|
|
3
|
+
import { backgroundColor, colors, radii, spacings, texts } from "../constants/design";
|
|
4
|
+
import { isNotNullish } from "../utils/nullish";
|
|
5
|
+
import { Box } from "./Box";
|
|
6
|
+
import { LakeText } from "./LakeText";
|
|
7
|
+
import { Pressable } from "./Pressable";
|
|
8
|
+
import { Space } from "./Space";
|
|
9
|
+
const styles = StyleSheet.create({
|
|
10
|
+
container: {
|
|
11
|
+
backgroundColor: colors.gray[50],
|
|
12
|
+
borderRadius: radii[8],
|
|
13
|
+
padding: spacings[4],
|
|
14
|
+
},
|
|
15
|
+
selectedItemIndicator: {
|
|
16
|
+
position: "absolute",
|
|
17
|
+
left: 0,
|
|
18
|
+
top: 0,
|
|
19
|
+
flexGrow: 1,
|
|
20
|
+
flexShrink: 1,
|
|
21
|
+
transitionProperty: "transform",
|
|
22
|
+
transitionDuration: "250ms",
|
|
23
|
+
transitionTimingFunction: "ease",
|
|
24
|
+
padding: spacings[4],
|
|
25
|
+
borderRadius: radii[4],
|
|
26
|
+
backgroundColor: backgroundColor.accented,
|
|
27
|
+
},
|
|
28
|
+
item: {
|
|
29
|
+
flexBasis: "0%",
|
|
30
|
+
flexGrow: 1,
|
|
31
|
+
flexShrink: 1,
|
|
32
|
+
alignItems: "center",
|
|
33
|
+
padding: spacings[12],
|
|
34
|
+
flexDirection: "row",
|
|
35
|
+
},
|
|
36
|
+
itemDesktop: {
|
|
37
|
+
flexDirection: "column",
|
|
38
|
+
justifyContent: "center",
|
|
39
|
+
},
|
|
40
|
+
itemText: {
|
|
41
|
+
userSelect: "none",
|
|
42
|
+
lineHeight: texts.regular.fontSize,
|
|
43
|
+
},
|
|
44
|
+
selectedItemMobile: {
|
|
45
|
+
right: 0,
|
|
46
|
+
},
|
|
47
|
+
selectedItemDesktop: {
|
|
48
|
+
bottom: 0,
|
|
49
|
+
},
|
|
50
|
+
});
|
|
51
|
+
export const SegmentedControl = ({ mode = "desktop", selected, items, onValueChange, }) => {
|
|
52
|
+
const selectedItemIndex = items.findIndex(item => item.id === selected);
|
|
53
|
+
return (_jsx(Box, { style: styles.container, children: _jsxs(Box, { direction: mode === "mobile" ? "column" : "row", children: [_jsx(View, { role: "none", style: [
|
|
54
|
+
styles.selectedItemIndicator,
|
|
55
|
+
mode === "mobile" ? styles.selectedItemMobile : styles.selectedItemDesktop,
|
|
56
|
+
mode === "mobile"
|
|
57
|
+
? {
|
|
58
|
+
height: `${(1 / items.length) * 100}%`,
|
|
59
|
+
transform: `translateY(${selectedItemIndex * 100}%)`,
|
|
60
|
+
}
|
|
61
|
+
: {
|
|
62
|
+
width: `${(1 / items.length) * 100}%`,
|
|
63
|
+
transform: `translateX(${selectedItemIndex * 100}%)`,
|
|
64
|
+
},
|
|
65
|
+
] }), items.map(item => (_jsxs(Pressable, { style: [styles.item, mode === "desktop" && styles.itemDesktop], onPress: () => {
|
|
66
|
+
onValueChange(item.id);
|
|
67
|
+
}, children: [isNotNullish(item.icon) && (_jsxs(_Fragment, { children: [item.icon, _jsx(Space, { height: 8, width: 12 })] })), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, variant: "regular", style: styles.itemText, children: item.name })] }, item.id)))] }) }));
|
|
68
|
+
};
|
|
@@ -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 = {
|
|
@@ -99,6 +99,7 @@
|
|
|
99
99
|
"mail-filled": "M22 8.6v8.15a3.25 3.25 0 0 1-3.07 3.24l-.18.01H5.25a3.25 3.25 0 0 1-3.24-3.07L2 16.75V8.61l9.65 5.05c.22.12.48.12.7 0L22 8.61ZM5.25 4h13.5a3.25 3.25 0 0 1 3.23 2.92L12 12.15 2.02 6.92a3.25 3.25 0 0 1 3.04-2.91L5.25 4h13.5-13.5Z",
|
|
100
100
|
"mail-regular": "M5.25 4h13.5a3.25 3.25 0 0 1 3.24 3.07l.01.18v9.5a3.25 3.25 0 0 1-3.07 3.24l-.18.01H5.25a3.25 3.25 0 0 1-3.24-3.07L2 16.75v-9.5a3.25 3.25 0 0 1 3.07-3.24L5.25 4h13.5-13.5ZM20.5 9.37l-8.15 4.3c-.19.1-.4.1-.6.04l-.1-.05L3.5 9.37v7.38c0 .92.7 1.67 1.6 1.74l.15.01h13.5c.92 0 1.67-.7 1.74-1.6l.01-.15V9.37ZM18.75 5.5H5.25c-.92 0-1.67.7-1.74 1.6l-.01.15v.43l8.5 4.47 8.5-4.47v-.43c0-.92-.7-1.67-1.6-1.74l-.15-.01Z",
|
|
101
101
|
"money-regular": "M10.5 8a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM9 11a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM2 7.25C2 6.01 3 5 4.25 5h12.5C17.99 5 19 6 19 7.25v7.5c0 1.24-1 2.25-2.25 2.25H4.25C3.01 17 2 16 2 14.75v-7.5Zm2.25-.75a.75.75 0 0 0-.75.75V8h.75c.41 0 .75-.34.75-.75V6.5h-.75Zm-.75 6h.75c1.24 0 2.25 1 2.25 2.25v.75h8v-.75c0-1.24 1-2.25 2.25-2.25h.75v-3h-.75c-1.24 0-2.25-1-2.25-2.25V6.5h-8v.75c0 1.24-1 2.25-2.25 2.25H3.5v3Zm14-4.5v-.75a.75.75 0 0 0-.75-.75H16v.75c0 .41.34.75.75.75h.75Zm0 6h-.75a.75.75 0 0 0-.75.75v.75h.75c.41 0 .75-.34.75-.75V14Zm-14 .75c0 .41.34.75.75.75H5v-.75a.75.75 0 0 0-.75-.75H3.5v.75Zm.9 3.75A3 3 0 0 0 7 20h10.25A4.75 4.75 0 0 0 22 15.25V10a3 3 0 0 0-1.5-2.6v7.85c0 1.8-1.46 3.25-3.25 3.25H4.4Z",
|
|
102
|
+
"more-horizontal-filled": "M8 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm6 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z",
|
|
102
103
|
"more-vertical-filled": "M12 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm0 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm-2 4a2 2 0 1 0 4 0 2 2 0 0 0-4 0Z",
|
|
103
104
|
"open-filled": "M6.25 5C5.56 5 5 5.56 5 6.25v11.5c0 .69.56 1.25 1.25 1.25h11.5c.69 0 1.25-.56 1.25-1.25V14a1 1 0 1 1 2 0v3.75c0 1.8-1.46 3.25-3.25 3.25H6.25A3.25 3.25 0 0 1 3 17.75V6.25C3 4.45 4.46 3 6.25 3H10a1 1 0 1 1 0 2H6.25ZM14 5a1 1 0 1 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V6.41l-4.3 4.3a1 1 0 0 1-1.4-1.42L17.58 5H14Z",
|
|
104
105
|
"open-regular": "M6.25 4.5c-.97 0-1.75.78-1.75 1.75v11.5c0 .97.78 1.75 1.75 1.75h11.5c.97 0 1.75-.78 1.75-1.75v-4a.75.75 0 0 1 1.5 0v4c0 1.8-1.46 3.25-3.25 3.25H6.25A3.25 3.25 0 0 1 3 17.75V6.25C3 4.45 4.46 3 6.25 3h4a.75.75 0 0 1 0 1.5h-4ZM13 3.75c0-.41.34-.75.75-.75h6.5c.41 0 .75.34.75.75v6.5a.75.75 0 0 1-1.5 0V5.56l-5.22 5.22a.75.75 0 0 1-1.06-1.06l5.22-5.22h-4.69a.75.75 0 0 1-.75-.75Z",
|
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: (
|
|
4
|
-
export declare const
|
|
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 = (
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
export const capitalize = (
|
|
232
|
-
|
|
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)}`;
|