@swan-io/lake 8.0.0 → 8.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "8.0.0",
+  "version": "8.1.1",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"
@@ -28,10 +28,10 @@
   "dependencies": {
     "@react-three/drei": "^9.104.1",
     "@react-three/fiber": "^8.16.1",
-    "@swan-io/boxed": "^2.1.1",
+    "@swan-io/boxed": "^2.2.1",
     "@swan-io/chicane": "^2.0.0",
-    "@swan-io/graphql-client": "^0.1.0",
-    "@swan-io/use-form": "^2.0.0",
+    "@swan-io/graphql-client": "^0.1.1",
+    "@swan-io/use-form": "^2.0.2",
     "dayjs": "^1.11.10",
     "polished": "^4.3.1",
     "prism-react-renderer": "^2.3.1",

package/src/components/LakeAlert.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyleSheet, View } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
-import { colors, shadows } from "../constants/design";
+import { breakpoints, colors, shadows } from "../constants/design";
+import { useResponsive } from "../hooks/useResponsive";
 import { isNotNullish, isNotNullishOrEmpty } from "../utils/nullish";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
@@ -72,10 +73,11 @@ const isText = (node) => typeof node === "string" || typeof node === "number";
 export const LakeAlert = ({ anchored = false, variant, title, subtitle, children, style, callToAction, }) => {
     const color = alertColor[variant];
     const icon = alertIcon[variant];
+    const { desktop } = useResponsive(breakpoints.medium);
     return (_jsxs(View, { style: [
             styles.base,
             { backgroundColor: alertBackground[variant], borderColor: alertBorder[variant] },
             anchored ? styles.anchored : { borderLeftColor: alertLeftBorder[variant] },
             style,
-        ], children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [icon != null ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, color: color, size: 20 }), _jsx(Space, { width: 20 })] })) : null, _jsxs(View, { style: commonStyles.fill, children: [_jsx(LakeText, { color: color, variant: icon != null ? "regular" : "medium", children: title }), isNotNullishOrEmpty(subtitle) && _jsx(LakeText, { color: color, children: subtitle })] }), isNotNullish(callToAction) && _jsx(View, { style: styles.callToAction, children: callToAction })] }), isNotNullish(children) && (_jsxs(View, { style: icon != null ? styles.content : null, children: [_jsx(Space, { height: 12 }), isText(children) ? _jsx(LakeText, { children: children }) : children] }))] }));
+        ], children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [icon != null ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, color: color, size: 20 }), _jsx(Space, { width: 20 })] })) : null, _jsxs(View, { style: commonStyles.fill, children: [_jsx(LakeText, { color: color, variant: icon != null ? "regular" : "medium", children: title }), isNotNullishOrEmpty(subtitle) && _jsx(LakeText, { color: color, children: subtitle })] }), isNotNullish(callToAction) && _jsx(View, { style: styles.callToAction, children: callToAction })] }), isNotNullish(children) && (_jsxs(View, { style: desktop && icon != null && styles.content, children: [_jsx(Space, { height: 12 }), isText(children) ? _jsx(LakeText, { children: children }) : children] }))] }));
 };

package/src/components/LakeTextInput.d.ts

@@ -26,6 +26,7 @@ export type LakeTextInputProps = Except<TextInputProps, "editable" | "keyboardTy
     onUnitChange?: (value: string) => void;
     maxCharCount?: number;
     help?: string;
+    warning?: boolean;
     renderEnd?: () => ReactNode;
     containerRef?: Ref<View>;
 };
@@ -242,6 +243,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
     onUnitChange?: ((value: string) => void) | undefined;
     maxCharCount?: number | undefined;
     help?: string | undefined;
+    warning?: boolean | undefined;
     renderEnd?: (() => ReactNode) | undefined;
     containerRef?: Ref<View> | undefined;
 } & import("react").RefAttributes<TextInput | null>>;

package/src/components/LakeTextInput.js

@@ -128,7 +128,7 @@ export const LakeTextInput = forwardRef(({ ariaExpanded, ariaControls, error, di
 //maxCharCount is different from maxLength(props inherited of TextInput)
 //maxLength truncates the text in the limitation asked,
 //maxCharCount doesn't have limitation but displays a counter of characters
-maxCharCount, help, renderEnd, ...props }, forwardRef) => {
+maxCharCount, help, warning = false, renderEnd, ...props }, forwardRef) => {
     const inputRef = useRef(null);
     const [isHovered, setIsHovered] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
@@ -158,6 +158,7 @@ maxCharCount, help, renderEnd, ...props }, forwardRef) => {
                                     readOnly && styles.readOnly,
                                     isFocused && styles.focused,
                                     isNotNullish(unit !== null && unit !== void 0 ? unit : units) && styles.inputWithUnit,
+                                    warning && { borderColor: colors.warning[500] },
                                     hasError && styles.error,
                                     valid && styles.valid,
                                     stylesFromProps,
@@ -167,5 +168,5 @@ maxCharCount, help, renderEnd, ...props }, forwardRef) => {
                                             readOnly && hasError && styles.readOnlyError,
                                             disabled && styles.disabled,
                                             readOnly && styles.readOnly,
-                                        ] }), 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 !== null && help !== void 0 ? 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] })] }))] }))] }));
+                                        ] }), 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 && warning && !hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.warning[500], 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 !== null && help !== void 0 ? 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] })] }))] }))] }));
 });

package/src/hooks/usePersistedState.js

@@ -6,7 +6,7 @@ export const usePersistedState = (key, defaultValue) => {
             .toOption()
             .flatMap(Option.fromNullable)
             .map(value => JSON.parse(value))
-            .getWithDefault(defaultValue);
+            .getOr(defaultValue);
     });
     const setPersistedState = useCallback((state) => {
         setState(state);