@swan-io/lake 11.4.3 → 12.0.0

package/src/components/LakeTagInput.d.ts

@@ -1,6 +1,11 @@
-import { NativeSyntheticEvent, TextInput, TextInputFocusEventData, TextInputKeyPressEventData, TextInputProps } from "react-native";
+import { Ref } from "react";
+import { TextInput, TextInputProps } from "react-native";
 import { Merge } from "type-fest";
+export type TagInputRef = TextInput & {
+    pushPendingValue: () => void;
+};
 export type LakeTagInputProps = Merge<TextInputProps, {
+    ref?: Ref<TagInputRef>;
     readOnly?: boolean;
     error?: string;
     disabled?: boolean;
@@ -13,209 +18,4 @@ export type LakeTagInputProps = Merge<TextInputProps, {
     onValuesChanged: (values: string[]) => void;
     placeholder?: string;
 }>;
-export type TagInputRef = TextInput & {
-    pushPendingValue: () => void;
-};
-export declare const LakeTagInput: import("react").ForwardRefExoticComponent<{
-    allowFontScaling?: boolean | undefined | undefined;
-    autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined | undefined;
-    autoCorrect?: boolean | undefined | undefined;
-    autoFocus?: boolean | undefined | undefined;
-    blurOnSubmit?: boolean | undefined | undefined;
-    caretHidden?: boolean | undefined | undefined;
-    contextMenuHidden?: boolean | undefined | undefined;
-    defaultValue?: string | undefined | undefined;
-    editable?: boolean | undefined | undefined;
-    keyboardType?: import("react-native").KeyboardTypeOptions | undefined;
-    inputMode?: import("react-native").InputModeOptions | undefined;
-    maxLength?: number | undefined | undefined;
-    multiline?: boolean | undefined | undefined;
-    onBlur?: ((e: NativeSyntheticEvent<TextInputFocusEventData>) => void) | undefined | undefined;
-    onChange?: ((e: NativeSyntheticEvent<import("react-native").TextInputChangeEventData>) => void) | undefined | undefined;
-    onChangeText?: ((text: string) => void) | undefined | undefined;
-    onContentSizeChange?: ((e: NativeSyntheticEvent<import("react-native").TextInputContentSizeChangeEventData>) => void) | undefined | undefined;
-    onEndEditing?: ((e: NativeSyntheticEvent<import("react-native").TextInputEndEditingEventData>) => void) | undefined | undefined;
-    onPressIn?: ((e: NativeSyntheticEvent<import("react-native").NativeTouchEvent>) => void) | undefined | undefined;
-    onPressOut?: ((e: NativeSyntheticEvent<import("react-native").NativeTouchEvent>) => void) | undefined | undefined;
-    onFocus?: ((e: NativeSyntheticEvent<TextInputFocusEventData>) => void) | undefined | undefined;
-    onSelectionChange?: ((e: NativeSyntheticEvent<import("react-native").TextInputSelectionChangeEventData>) => void) | undefined | undefined;
-    onSubmitEditing?: ((e: NativeSyntheticEvent<import("react-native").TextInputSubmitEditingEventData>) => void) | undefined | undefined;
-    onTextInput?: ((e: NativeSyntheticEvent<import("react-native").TextInputTextInputEventData>) => void) | undefined | undefined;
-    onScroll?: ((e: NativeSyntheticEvent<import("react-native").TextInputScrollEventData>) => void) | undefined | undefined;
-    onKeyPress?: ((e: NativeSyntheticEvent<TextInputKeyPressEventData>) => void) | undefined | undefined;
-    placeholderTextColor?: import("react-native").ColorValue | undefined;
-    returnKeyType?: import("react-native").ReturnKeyTypeOptions | undefined;
-    secureTextEntry?: boolean | undefined | undefined;
-    selectTextOnFocus?: boolean | undefined | undefined;
-    selection?: {
-        start: number;
-        end?: number | undefined;
-    } | undefined | undefined;
-    selectionColor?: import("react-native").ColorValue | undefined;
-    style?: import("react-native").StyleProp<import("react-native").TextStyle>;
-    textAlign?: "left" | "center" | "right" | undefined | undefined;
-    testID?: string | undefined | undefined;
-    inputAccessoryViewID?: string | undefined | undefined;
-    value?: string | undefined | undefined;
-    maxFontSizeMultiplier?: number | null | undefined | undefined;
-    role?: import("react-native").WebRole | undefined;
-    lang?: string | undefined;
-    initialValue?: string | undefined;
-    autoComplete?: "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "email" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "name" | "new-password" | "nickname" | "off" | "on" | "one-time-code" | "organization" | "organization-title" | "postal-code" | "sex" | "street-address" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "url" | "username" | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
-    rows?: number | undefined;
-    children?: import("react").ReactNode;
-    hitSlop?: import("react-native").Insets | undefined;
-    id?: string | undefined | undefined;
-    onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined | undefined;
-    pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined | undefined;
-    removeClippedSubviews?: boolean | undefined | undefined;
-    nativeID?: string | undefined | undefined;
-    onKeyDown?: ((event: NativeSyntheticEvent<React.KeyboardEvent>) => void) | undefined;
-    onKeyDownCapture?: ((event: NativeSyntheticEvent<React.KeyboardEvent>) => void) | undefined;
-    onKeyUp?: ((event: NativeSyntheticEvent<React.KeyboardEvent>) => void) | undefined;
-    onKeyUpCapture?: ((event: NativeSyntheticEvent<React.KeyboardEvent>) => void) | undefined;
-    collapsable?: boolean | undefined | undefined;
-    needsOffscreenAlphaCompositing?: boolean | undefined | undefined;
-    renderToHardwareTextureAndroid?: boolean | undefined | undefined;
-    focusable?: boolean | undefined | undefined;
-    shouldRasterizeIOS?: boolean | undefined | undefined;
-    isTVSelectable?: boolean | undefined | undefined;
-    hasTVPreferredFocus?: boolean | undefined | undefined;
-    tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
-    tvParallaxShiftDistanceX?: number | undefined | undefined;
-    tvParallaxShiftDistanceY?: number | undefined | undefined;
-    tvParallaxTiltAngle?: number | undefined | undefined;
-    tvParallaxMagnification?: number | undefined | undefined;
-    onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined | undefined;
-    onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined | undefined;
-    onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined | undefined;
-    onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined | undefined;
-    onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined | undefined;
-    onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onPointerEnter?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerEnterCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerLeave?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerLeaveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerMove?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerMoveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerCancel?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerCancelCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerDown?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerDownCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerUp?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerUpCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    accessible?: boolean | undefined | undefined;
-    accessibilityActions?: readonly Readonly<{
-        name: import("react-native").AccessibilityActionName | string;
-        label?: string | undefined;
-    }>[] | undefined;
-    accessibilityLabel?: string | undefined | undefined;
-    "aria-label"?: string | undefined | undefined;
-    accessibilityRole?: import("react-native").AccessibilityRole | undefined;
-    accessibilityState?: import("react-native").AccessibilityState | undefined;
-    "aria-busy"?: boolean | undefined | undefined;
-    "aria-checked"?: boolean | "mixed" | undefined | undefined;
-    "aria-disabled"?: boolean | undefined | undefined;
-    "aria-expanded"?: boolean | undefined | undefined;
-    "aria-selected"?: boolean | undefined | undefined;
-    "aria-labelledby"?: string | undefined | undefined;
-    accessibilityHint?: string | undefined | undefined;
-    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
-    "aria-valuemax"?: number | undefined;
-    "aria-valuemin"?: number | undefined;
-    "aria-valuenow"?: number | undefined;
-    "aria-valuetext"?: string | undefined;
-    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined | undefined;
-    importantForAccessibility?: ("auto" | "yes" | "no" | "no-hide-descendants") | undefined | undefined;
-    "aria-hidden"?: boolean | undefined | undefined;
-    "aria-live"?: ("polite" | "assertive" | "off") | undefined | undefined;
-    "aria-modal"?: boolean | undefined | undefined;
-    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined | undefined;
-    accessibilityLabelledBy?: string | string[] | undefined | undefined;
-    accessibilityElementsHidden?: boolean | undefined | undefined;
-    accessibilityViewIsModal?: boolean | undefined | undefined;
-    onAccessibilityEscape?: (() => void) | undefined | undefined;
-    onAccessibilityTap?: (() => void) | undefined | undefined;
-    onMagicTap?: (() => void) | undefined | undefined;
-    accessibilityIgnoresInvertColors?: boolean | undefined | undefined;
-    accessibilityLanguage?: string | undefined | undefined;
-    tabIndex?: 0 | -1 | undefined;
-    "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: boolean | undefined;
-    "aria-autocomplete"?: string | undefined;
-    "aria-colcount"?: number | undefined;
-    "aria-colindex"?: number | undefined;
-    "aria-colspan"?: number | undefined;
-    "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "step" | "location" | "date" | "time" | undefined;
-    "aria-describedby"?: string | undefined;
-    "aria-details"?: string | undefined;
-    "aria-errormessage"?: string | undefined;
-    "aria-flowto"?: string | undefined;
-    "aria-haspopup"?: string | undefined;
-    "aria-invalid"?: boolean | undefined;
-    "aria-keyshortcuts"?: string | undefined;
-    "aria-level"?: number | undefined;
-    "aria-multiline"?: boolean | undefined;
-    "aria-multiselectable"?: boolean | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    "aria-owns"?: string | undefined;
-    "aria-placeholder"?: string | undefined;
-    "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | undefined;
-    "aria-readonly"?: boolean | undefined;
-    "aria-required"?: boolean | undefined;
-    "aria-roledescription"?: string | undefined;
-    "aria-rowcount"?: number | undefined;
-    "aria-rowindex"?: number | undefined;
-    "aria-rowspan"?: number | undefined;
-    "aria-setsize"?: number | undefined;
-    "aria-sort"?: "ascending" | "descending" | "none" | "other" | undefined;
-    clearButtonMode?: "never" | "while-editing" | "unless-editing" | "always" | undefined | undefined;
-    clearTextOnFocus?: boolean | undefined | undefined;
-    dataDetectorTypes?: import("react-native").DataDetectorTypes | import("react-native").DataDetectorTypes[] | undefined;
-    enablesReturnKeyAutomatically?: boolean | undefined | undefined;
-    keyboardAppearance?: "default" | "light" | "dark" | undefined | undefined;
-    passwordRules?: string | null | undefined | undefined;
-    rejectResponderTermination?: boolean | null | undefined | undefined;
-    selectionState?: import("react-native").DocumentSelectionState | undefined;
-    spellCheck?: boolean | undefined | undefined;
-    textContentType?: "none" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "location" | "middleName" | "name" | "namePrefix" | "nameSuffix" | "nickname" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "username" | "password" | "newPassword" | "oneTimeCode" | undefined | undefined;
-    scrollEnabled?: boolean | undefined | undefined;
-    lineBreakStrategyIOS?: "none" | "standard" | "hangul-word" | "push-out" | undefined | undefined;
-    cursorColor?: import("react-native").ColorValue | null | undefined;
-    importantForAutofill?: "auto" | "no" | "noExcludeDescendants" | "yes" | "yesExcludeDescendants" | undefined | undefined;
-    disableFullscreenUI?: boolean | undefined | undefined;
-    inlineImageLeft?: string | undefined | undefined;
-    inlineImagePadding?: number | undefined | undefined;
-    numberOfLines?: number | undefined | undefined;
-    returnKeyLabel?: string | undefined | undefined;
-    textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined | undefined;
-    underlineColorAndroid?: import("react-native").ColorValue | undefined;
-    textAlignVertical?: "auto" | "top" | "bottom" | "center" | undefined | undefined;
-    showSoftInputOnFocus?: boolean | undefined | undefined;
-    verticalAlign?: "auto" | "top" | "bottom" | "middle" | undefined | undefined;
-    readOnly?: boolean | undefined;
-    error?: string | undefined;
-    disabled?: boolean | undefined;
-    valid?: boolean | undefined;
-    hideErrors?: boolean | undefined;
-    validateOnBlur?: boolean | undefined;
-    help?: string | undefined;
-    validator?: ((value: string) => boolean) | undefined;
-    values: string[];
-    onValuesChanged: (values: string[]) => void;
-    placeholder?: string | undefined;
-} & import("react").RefAttributes<TagInputRef>>;
+export declare const LakeTagInput: ({ ref, validator, onFocus: originalOnFocus, onBlur: originalOnBlur, validateOnBlur, values, onValuesChanged, readOnly, disabled, valid, hideErrors, placeholder, help, error, }: LakeTagInputProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/LakeTagInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
+import { useCallback, useImperativeHandle, useRef, useState } from "react";
 import { StyleSheet, TextInput, View, } from "react-native";
-import { P, match } from "ts-pattern";
+import { match, P } from "ts-pattern";
 import { backgroundColor, colors, radii, shadows, spacings } from "../constants/design";
 import { useHover } from "../hooks/useHover";
 import { useMergeRefs } from "../hooks/useMergeRefs";
@@ -77,12 +77,12 @@ const styles = StyleSheet.create({
     },
 });
 const SEPARATORS_REGEX = /,| /;
-export const LakeTagInput = forwardRef(({ validator = () => true, onFocus: originalOnFocus, onBlur: originalOnBlur, validateOnBlur = true, values, onValuesChanged, readOnly = false, disabled = false, valid = false, hideErrors = false, placeholder, help, error, }, forwardedRef) => {
+export const LakeTagInput = ({ ref, validator = () => true, onFocus: originalOnFocus, onBlur: originalOnBlur, validateOnBlur = true, values, onValuesChanged, readOnly = false, disabled = false, valid = false, hideErrors = false, placeholder, help, error, }) => {
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const [isFocused, setIsFocused] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
-    const mergedRef = useMergeRefs(inputRef, forwardedRef);
+    const mergedRef = useMergeRefs(inputRef, ref);
     useHover(containerRef, {
         onHoverStart: () => setIsHovered(true),
         onHoverEnd: () => setIsHovered(false),
@@ -124,15 +124,13 @@ export const LakeTagInput = forwardRef(({ validator = () => true, onFocus: origi
     }, [originalOnFocus]);
     const onBlur = useCallback((event) => {
         const input = inputRef.current;
-        if (input instanceof HTMLInputElement &&
-            isNotNullishOrEmpty(input.value) &&
-            validateOnBlur) {
+        if (input instanceof HTMLInputElement && isNotNullishOrEmpty(input.value) && validateOnBlur) {
             pushNewValues([input.value]);
         }
         setIsFocused(false);
         originalOnBlur === null || originalOnBlur === void 0 ? void 0 : originalOnBlur(event);
     }, [pushNewValues, originalOnBlur, validateOnBlur]);
-    useImperativeHandle(forwardedRef, () => ({
+    useImperativeHandle(ref, () => ({
         pushPendingValue: () => {
             const input = inputRef.current;
             if (input instanceof HTMLInputElement &&
@@ -155,4 +153,4 @@ export const LakeTagInput = forwardRef(({ validator = () => true, onFocus: origi
                 ], "aria-errormessage": error, onPress: autoFocus, ref: containerRef, children: [values.map((value, i) => (_jsx(Tag, { onPressRemove: !readOnly && !disabled
                             ? () => onValuesChanged(values.filter(current => current !== value))
                             : undefined, style: styles.tag, color: validator(value) ? "gray" : "negative", children: value }, i))), _jsx(TextInput, { ref: mergedRef, style: [styles.input, disabled && styles.disabled], onFocus: onFocus, onBlur: onBlur, "aria-disabled": disabled, onChangeText: onTextInputChange, onKeyPress: onTextInputKeyPress, readOnly: readOnly, placeholder: placeholder })] }), !hideErrors && (_jsx(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 : " " })) }))] }));
-});
+};

package/src/components/LakeText.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from "react";
+import { ComponentProps, ReactNode, Ref } from "react";
 import { Text, TextProps, TextStyle } from "react-native";
 import { LakeTooltip } from "./LakeTooltip";
 declare const alignments: {
@@ -23,12 +23,14 @@ declare const variants: {
 };
 type TextAlign = keyof typeof alignments;
 export type TextVariant = keyof typeof variants;
-export declare const LakeText: import("react").ForwardRefExoticComponent<TextProps & {
+type Props = TextProps & {
+    ref?: Ref<Text>;
     align?: TextAlign;
     children: ReactNode;
     color?: string;
     userSelect?: TextStyle["userSelect"];
     variant?: TextVariant;
     tooltip?: Omit<ComponentProps<typeof LakeTooltip>, "children">;
-} & import("react").RefAttributes<Text>>;
+};
+export declare const LakeText: ({ ref, align, children, color, style, userSelect, variant, tooltip, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/LakeText.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { StyleSheet, Text } from "react-native";
 import { texts } from "../constants/design";
 import { isNotNullish } from "../utils/nullish";
@@ -27,10 +26,10 @@ const styles = StyleSheet.create({
         textOverflow: "ellipsis",
     },
 });
-export const LakeText = forwardRef(({ align = "left", children, color, style, userSelect, variant = "regular", tooltip, ...props }, forwardedRef) => (_jsx(Text, { ref: forwardedRef, style: [
+export const LakeText = ({ ref, align = "left", children, color, style, userSelect, variant = "regular", tooltip, ...props }) => (_jsx(Text, { ref: ref, style: [
         variants[variant],
         alignments[align],
         isNotNullish(color) && { color },
         isNotNullish(userSelect) && { userSelect },
         style,
-    ], ...props, children: tooltip ? (_jsx(LakeTooltip, { containerStyle: styles.tooltip, ...tooltip, children: _jsx(Text, { style: styles.ellipsis, children: children }) })) : (children) })));
+    ], ...props, children: tooltip ? (_jsx(LakeTooltip, { containerStyle: styles.tooltip, ...tooltip, children: _jsx(Text, { style: styles.ellipsis, children: children }) })) : (children) }));

package/src/components/LakeTextInput.d.ts

@@ -1,9 +1,10 @@
 import { ChangeEventHandler, ReactNode, Ref } from "react";
-import { NativeSyntheticEvent, TextInput, TextInputFocusEventData, TextInputProps, View, ViewProps } from "react-native";
+import { TextInput, TextInputProps, View, ViewProps } from "react-native";
 import { Except } from "type-fest";
 import { ColorVariants } from "../constants/design";
 import { IconName } from "./Icon";
 export type LakeTextInputProps = Except<TextInputProps, "editable" | "keyboardType" | "onChange"> & {
+    ref?: Ref<TextInput>;
     ariaExpanded?: boolean;
     ariaControls?: string;
     error?: string;
@@ -30,220 +31,4 @@ export type LakeTextInputProps = Except<TextInputProps, "editable" | "keyboardTy
     renderEnd?: () => ReactNode;
     containerRef?: Ref<View>;
 };
-export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
-    allowFontScaling?: boolean | undefined | undefined;
-    autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined | undefined;
-    autoCorrect?: boolean | undefined | undefined;
-    autoFocus?: boolean | undefined | undefined;
-    blurOnSubmit?: boolean | undefined | undefined;
-    caretHidden?: boolean | undefined | undefined;
-    contextMenuHidden?: boolean | undefined | undefined;
-    defaultValue?: string | undefined | undefined;
-    inputMode?: import("react-native").InputModeOptions | undefined;
-    maxLength?: number | undefined | undefined;
-    multiline?: boolean | undefined | undefined;
-    onBlur?: ((e: NativeSyntheticEvent<TextInputFocusEventData>) => void) | undefined | undefined;
-    onChangeText?: ((text: string) => void) | undefined | undefined;
-    onContentSizeChange?: ((e: NativeSyntheticEvent<import("react-native").TextInputContentSizeChangeEventData>) => void) | undefined | undefined;
-    onEndEditing?: ((e: NativeSyntheticEvent<import("react-native").TextInputEndEditingEventData>) => void) | undefined | undefined;
-    onPressIn?: ((e: NativeSyntheticEvent<import("react-native").NativeTouchEvent>) => void) | undefined | undefined;
-    onPressOut?: ((e: NativeSyntheticEvent<import("react-native").NativeTouchEvent>) => void) | undefined | undefined;
-    onFocus?: ((e: NativeSyntheticEvent<TextInputFocusEventData>) => void) | undefined | undefined;
-    onSelectionChange?: ((e: NativeSyntheticEvent<import("react-native").TextInputSelectionChangeEventData>) => void) | undefined | undefined;
-    onSubmitEditing?: ((e: NativeSyntheticEvent<import("react-native").TextInputSubmitEditingEventData>) => void) | undefined | undefined;
-    onTextInput?: ((e: NativeSyntheticEvent<import("react-native").TextInputTextInputEventData>) => void) | undefined | undefined;
-    onScroll?: ((e: NativeSyntheticEvent<import("react-native").TextInputScrollEventData>) => void) | undefined | undefined;
-    onKeyPress?: ((e: NativeSyntheticEvent<import("react-native").TextInputKeyPressEventData>) => void) | undefined | undefined;
-    placeholder?: string | undefined | undefined;
-    placeholderTextColor?: import("react-native").ColorValue | undefined;
-    returnKeyType?: import("react-native").ReturnKeyTypeOptions | undefined;
-    secureTextEntry?: boolean | undefined | undefined;
-    selectTextOnFocus?: boolean | undefined | undefined;
-    selection?: {
-        start: number;
-        end?: number | undefined;
-    } | undefined | undefined;
-    selectionColor?: import("react-native").ColorValue | undefined;
-    style?: import("react-native").StyleProp<import("react-native").TextStyle>;
-    textAlign?: "left" | "center" | "right" | undefined | undefined;
-    testID?: string | undefined | undefined;
-    inputAccessoryViewID?: string | undefined | undefined;
-    value?: string | undefined | undefined;
-    maxFontSizeMultiplier?: number | null | undefined | undefined;
-    role?: import("react-native").WebRole | undefined;
-    lang?: string | undefined;
-    initialValue?: string | undefined;
-    autoComplete?: "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "email" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "name" | "new-password" | "nickname" | "off" | "on" | "one-time-code" | "organization" | "organization-title" | "postal-code" | "sex" | "street-address" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "url" | "username" | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
-    rows?: number | undefined;
-    readOnly?: boolean | undefined;
-    children?: ReactNode;
-    hitSlop?: import("react-native").Insets | undefined;
-    id?: string | undefined | undefined;
-    onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined | undefined;
-    pointerEvents?: "box-none" | "none" | "box-only" | "auto" | undefined | undefined;
-    removeClippedSubviews?: boolean | undefined | undefined;
-    nativeID?: string | undefined | undefined;
-    onKeyDown?: ((event: NativeSyntheticEvent<React.KeyboardEvent>) => void) | undefined;
-    onKeyDownCapture?: ((event: NativeSyntheticEvent<React.KeyboardEvent>) => void) | undefined;
-    onKeyUp?: ((event: NativeSyntheticEvent<React.KeyboardEvent>) => void) | undefined;
-    onKeyUpCapture?: ((event: NativeSyntheticEvent<React.KeyboardEvent>) => void) | undefined;
-    collapsable?: boolean | undefined | undefined;
-    needsOffscreenAlphaCompositing?: boolean | undefined | undefined;
-    renderToHardwareTextureAndroid?: boolean | undefined | undefined;
-    focusable?: boolean | undefined | undefined;
-    shouldRasterizeIOS?: boolean | undefined | undefined;
-    isTVSelectable?: boolean | undefined | undefined;
-    hasTVPreferredFocus?: boolean | undefined | undefined;
-    tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
-    tvParallaxShiftDistanceX?: number | undefined | undefined;
-    tvParallaxShiftDistanceY?: number | undefined | undefined;
-    tvParallaxTiltAngle?: number | undefined | undefined;
-    tvParallaxMagnification?: number | undefined | undefined;
-    onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined | undefined;
-    onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined | undefined;
-    onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined | undefined;
-    onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined | undefined;
-    onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined | undefined;
-    onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined | undefined;
-    onPointerEnter?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerEnterCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerLeave?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerLeaveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerMove?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerMoveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerCancel?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerCancelCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerDown?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerDownCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerUp?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    onPointerUpCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-    accessible?: boolean | undefined | undefined;
-    accessibilityActions?: readonly Readonly<{
-        name: import("react-native").AccessibilityActionName | string;
-        label?: string | undefined;
-    }>[] | undefined;
-    accessibilityLabel?: string | undefined | undefined;
-    "aria-label"?: string | undefined | undefined;
-    accessibilityRole?: import("react-native").AccessibilityRole | undefined;
-    accessibilityState?: import("react-native").AccessibilityState | undefined;
-    "aria-busy"?: boolean | undefined | undefined;
-    "aria-checked"?: boolean | "mixed" | undefined | undefined;
-    "aria-disabled"?: boolean | undefined | undefined;
-    "aria-expanded"?: boolean | undefined | undefined;
-    "aria-selected"?: boolean | undefined | undefined;
-    "aria-labelledby"?: string | undefined | undefined;
-    accessibilityHint?: string | undefined | undefined;
-    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
-    "aria-valuemax"?: number | undefined;
-    "aria-valuemin"?: number | undefined;
-    "aria-valuenow"?: number | undefined;
-    "aria-valuetext"?: string | undefined;
-    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined | undefined;
-    importantForAccessibility?: ("auto" | "yes" | "no" | "no-hide-descendants") | undefined | undefined;
-    "aria-hidden"?: boolean | undefined | undefined;
-    "aria-live"?: ("polite" | "assertive" | "off") | undefined | undefined;
-    "aria-modal"?: boolean | undefined | undefined;
-    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined | undefined;
-    accessibilityLabelledBy?: string | string[] | undefined | undefined;
-    accessibilityElementsHidden?: boolean | undefined | undefined;
-    accessibilityViewIsModal?: boolean | undefined | undefined;
-    onAccessibilityEscape?: (() => void) | undefined | undefined;
-    onAccessibilityTap?: (() => void) | undefined | undefined;
-    onMagicTap?: (() => void) | undefined | undefined;
-    accessibilityIgnoresInvertColors?: boolean | undefined | undefined;
-    accessibilityLanguage?: string | undefined | undefined;
-    tabIndex?: 0 | -1 | undefined;
-    "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: boolean | undefined;
-    "aria-autocomplete"?: string | undefined;
-    "aria-colcount"?: number | undefined;
-    "aria-colindex"?: number | undefined;
-    "aria-colspan"?: number | undefined;
-    "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "step" | "location" | "date" | "time" | undefined;
-    "aria-describedby"?: string | undefined;
-    "aria-details"?: string | undefined;
-    "aria-errormessage"?: string | undefined;
-    "aria-flowto"?: string | undefined;
-    "aria-haspopup"?: string | undefined;
-    "aria-invalid"?: boolean | undefined;
-    "aria-keyshortcuts"?: string | undefined;
-    "aria-level"?: number | undefined;
-    "aria-multiline"?: boolean | undefined;
-    "aria-multiselectable"?: boolean | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    "aria-owns"?: string | undefined;
-    "aria-placeholder"?: string | undefined;
-    "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | undefined;
-    "aria-readonly"?: boolean | undefined;
-    "aria-required"?: boolean | undefined;
-    "aria-roledescription"?: string | undefined;
-    "aria-rowcount"?: number | undefined;
-    "aria-rowindex"?: number | undefined;
-    "aria-rowspan"?: number | undefined;
-    "aria-setsize"?: number | undefined;
-    "aria-sort"?: "ascending" | "descending" | "none" | "other" | undefined;
-    clearButtonMode?: "never" | "while-editing" | "unless-editing" | "always" | undefined | undefined;
-    clearTextOnFocus?: boolean | undefined | undefined;
-    dataDetectorTypes?: import("react-native").DataDetectorTypes | import("react-native").DataDetectorTypes[] | undefined;
-    enablesReturnKeyAutomatically?: boolean | undefined | undefined;
-    keyboardAppearance?: "default" | "light" | "dark" | undefined | undefined;
-    passwordRules?: string | null | undefined | undefined;
-    rejectResponderTermination?: boolean | null | undefined | undefined;
-    selectionState?: import("react-native").DocumentSelectionState | undefined;
-    spellCheck?: boolean | undefined | undefined;
-    textContentType?: "none" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "location" | "middleName" | "name" | "namePrefix" | "nameSuffix" | "nickname" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "username" | "password" | "newPassword" | "oneTimeCode" | undefined | undefined;
-    scrollEnabled?: boolean | undefined | undefined;
-    lineBreakStrategyIOS?: "none" | "standard" | "hangul-word" | "push-out" | undefined | undefined;
-    cursorColor?: import("react-native").ColorValue | null | undefined;
-    importantForAutofill?: "auto" | "no" | "noExcludeDescendants" | "yes" | "yesExcludeDescendants" | undefined | undefined;
-    disableFullscreenUI?: boolean | undefined | undefined;
-    inlineImageLeft?: string | undefined | undefined;
-    inlineImagePadding?: number | undefined | undefined;
-    numberOfLines?: number | undefined | undefined;
-    returnKeyLabel?: string | undefined | undefined;
-    textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined | undefined;
-    underlineColorAndroid?: import("react-native").ColorValue | undefined;
-    textAlignVertical?: "auto" | "top" | "bottom" | "center" | undefined | undefined;
-    showSoftInputOnFocus?: boolean | undefined | undefined;
-    verticalAlign?: "auto" | "top" | "bottom" | "middle" | undefined | undefined;
-} & {
-    ariaExpanded?: boolean;
-    ariaControls?: string;
-    error?: string;
-    readOnly?: boolean;
-    validating?: boolean;
-    valid?: boolean;
-    disabled?: boolean;
-    color?: ColorVariants;
-    multiline?: boolean;
-    icon?: IconName;
-    unit?: string;
-    units?: string[];
-    inputMode?: TextInputProps["inputMode"];
-    pattern?: string;
-    children?: ReactNode;
-    hideErrors?: boolean;
-    style?: TextInputProps["style"];
-    containerStyle?: ViewProps["style"];
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-    onUnitChange?: (value: string) => void;
-    maxCharCount?: number;
-    help?: string;
-    warning?: boolean;
-    renderEnd?: () => ReactNode;
-    containerRef?: Ref<View>;
-} & import("react").RefAttributes<TextInput | null>>;
+export declare const LakeTextInput: ({ ref, ariaExpanded, ariaControls, error, disabled, validating, valid, readOnly, icon, children, unit, units, color, inputMode, hideErrors, onChange, onUnitChange, pattern, style: stylesFromProps, containerStyle: containerStylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline, containerRef, maxCharCount, help, warning, renderEnd, ...props }: LakeTextInputProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/LakeTextInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useCallback, useRef, useState, } from "react";
+import { useCallback, useRef, useState } from "react";
 import { ActivityIndicator, StyleSheet, TextInput, View, } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
 import { backgroundColor, colors, radii, shadows, spacings, texts, } from "../constants/design";
@@ -124,11 +124,11 @@ const styles = StyleSheet.create({
         paddingTop: spacings[4],
     },
 });
-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, 
+export const LakeTextInput = ({ ref, 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, 
 //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, warning = false, renderEnd, ...props }, forwardRef) => {
+maxCharCount, help, warning = false, renderEnd, ...props }) => {
     const inputRef = useRef(null);
     const [isHovered, setIsHovered] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
@@ -145,7 +145,7 @@ maxCharCount, help, warning = false, renderEnd, ...props }, forwardRef) => {
         setIsFocused(false);
         originalOnBlur === null || originalOnBlur === void 0 ? void 0 : originalOnBlur(event);
     }, [originalOnBlur]);
-    const mergedRef = useMergeRefs(inputRef, forwardRef);
+    const mergedRef = useMergeRefs(inputRef, ref);
     const isInteractive = !disabled && !readOnly;
     const hasError = isNotNullishOrEmpty(error);
     const charCount = isNullish(value) ? 0 : value.length;
@@ -169,4 +169,4 @@ maxCharCount, help, warning = false, renderEnd, ...props }, forwardRef) => {
                                             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 && 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/components/LakeTooltip.d.ts

@@ -1,7 +1,12 @@
-import { ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 import { ViewProps } from "react-native";
 import { IconName } from "./Icon";
+export type TooltipRef = {
+    show: () => void;
+    hide: () => void;
+};
 type Props = {
+    ref?: Ref<TooltipRef>;
     children: ReactNode;
     content: ReactNode;
     describedBy?: string;
@@ -16,14 +21,11 @@ type Props = {
     containerStyle?: ViewProps["style"];
     disabled?: boolean;
 };
-export type TooltipRef = {
-    show: () => void;
-    hide: () => void;
-};
-export declare const LakeTooltip: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<TooltipRef>>;
-export declare const InformationTooltip: import("react").ForwardRefExoticComponent<{
+export declare const LakeTooltip: ({ ref, content, children, ...rest }: Props) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const InformationTooltip: ({ ref, text, icon, iconSize, }: {
+    ref?: Ref<TooltipRef>;
     text: string;
     icon?: IconName;
     iconSize?: number;
-} & import("react").RefAttributes<TooltipRef>>;
+}) => import("react/jsx-runtime").JSX.Element;
 export {};