@swan-io/lake 1.4.4 → 1.5.1

package/src/components/FullViewportLayer.js

@@ -12,6 +12,9 @@ const styles = StyleSheet.create({
         ...StyleSheet.absoluteFillObject,
         overflow: "hidden",
     },
+    inert: {
+        pointerEvents: "none",
+    },
     fill: {
         ...StyleSheet.absoluteFillObject,
         animationFillMode: "forwards",
@@ -33,14 +36,14 @@ const styles = StyleSheet.create({
     },
     containerEnter: {
         animationKeyframes: {
-            "0%": { opacity: 0, transform: [{ translateZ: 0 }, { translateX: 200 }] },
+            "0%": { opacity: 0, transform: "translateZ(0px) translateX(200px)" },
         },
         animationDuration: "500ms",
         animationTimingFunction: "ease-in-out",
     },
     containerLeave: {
         animationKeyframes: {
-            "100%": { opacity: 0, transform: [{ translateZ: 0 }, { translateX: 200 }] },
+            "100%": { opacity: 0, transform: "translateZ(0px) translateX(200px)" },
         },
         animationDuration: "500ms",
         animationTimingFunction: "ease-in-out",
@@ -51,21 +54,21 @@ const styles = StyleSheet.create({
     },
     container: {
         ...StyleSheet.absoluteFillObject,
-        transform: [{ translateZ: 0 }],
+        transform: "translateZ(0px)",
         flexDirection: "row",
         alignItems: "stretch",
         backgroundColor: backgroundColor.default,
     },
     contentsEnter: {
         animationKeyframes: {
-            "0%": { transform: [{ translateZ: 0 }, { translateX: 50 }] },
+            "0%": { transform: "translateZ(0px) translateX(50px)" },
         },
         animationDuration: "500ms",
         animationTimingFunction: "ease-in-out",
     },
     contentsLeave: {
         animationKeyframes: {
-            "100%": { transform: [{ translateZ: 0 }, { translateX: 50 }] },
+            "100%": { transform: "translateZ(0px) translateX(50px)" },
         },
         animationDuration: "500ms",
         animationTimingFunction: "ease-in-out",
@@ -73,7 +76,7 @@ const styles = StyleSheet.create({
     contentsContainer: {
         ...StyleSheet.absoluteFillObject,
         zIndex: 2,
-        transform: [{ translateZ: 0 }],
+        transform: "translateZ(0px)",
         maxWidth: "100%",
     },
     contents: {
@@ -87,5 +90,5 @@ export const FullViewportLayer = ({ visible, children }) => {
     useEffect(() => {
         setDelayedVisible(visible);
     }, [visible]);
-    return (_jsx(Portal, { container: rootNode, children: _jsxs(View, { style: styles.root, pointerEvents: visible ? "auto" : "none", children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? _jsx(View, { style: styles.overlay }) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: styles.fill, enter: styles.containerEnter, leave: styles.containerLeave, children: delayedVisible ? (_jsx(FocusTrap, { focusLock: true, autoFocus: true, returnFocus: true, style: styles.container, children: _jsx(TransitionView, { style: styles.contentsContainer, enter: styles.contentsEnter, leave: styles.contentsLeave, children: _jsx(View, { style: styles.contents, children: _jsx(View, { style: styles.contentsContainer, children: children }) }) }) })) : null }) })] }) }));
+    return (_jsx(Portal, { container: rootNode, children: _jsxs(View, { style: [styles.root, !visible && styles.inert], children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? _jsx(View, { style: styles.overlay }) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: styles.fill, enter: styles.containerEnter, leave: styles.containerLeave, children: delayedVisible ? (_jsx(FocusTrap, { focusLock: true, autoFocus: true, returnFocus: true, style: styles.container, children: _jsx(TransitionView, { style: styles.contentsContainer, enter: styles.contentsEnter, leave: styles.contentsLeave, children: _jsx(View, { style: styles.contents, children: _jsx(View, { style: styles.contentsContainer, children: children }) }) }) })) : null }) })] }) }));
 };

package/src/components/Heading.d.ts

@@ -52,7 +52,7 @@ declare const sizes: {
     };
 };
 type HeadingSize = keyof typeof sizes;
-export declare const Heading: import("react").ForwardRefExoticComponent<Except<TextProps, "accessibilityRole"> & {
+export declare const Heading: import("react").ForwardRefExoticComponent<Except<TextProps, "role"> & {
     level: 1 | 2 | 3 | 4 | 5 | 6;
     align?: "left" | "right" | "center" | undefined;
     size: HeadingSize;

package/src/components/Heading.js

@@ -24,4 +24,4 @@ const sizes = StyleSheet.create({
     16: { ...baseStyle, fontSize: 16 },
     /* eslint-enable react-native/no-unused-styles */
 });
-export const Heading = forwardRef(({ children, align = "left", size, level, style, ...props }, forwardedRef) => (_jsx(Text, { ref: forwardedRef, accessibilityRole: "header", accessibilityLevel: level, style: [sizes[size], alignments[align], style], ...props, children: children })));
+export const Heading = forwardRef(({ children, align = "left", size, level, style, ...props }, forwardedRef) => (_jsx(Text, { ref: forwardedRef, role: "heading", "aria-level": level, style: [sizes[size], alignments[align], style], ...props, children: children })));

package/src/components/Icon.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AccessibilityProps, StyleProp, ViewProps, ViewStyle } from "react-native";
+import { StyleProp, ViewStyle, WebAccessibilityProps } from "react-native";
 declare const paths: {
     "lake-calendar-arrow-swap": string;
     "lake-card": string;
@@ -183,11 +183,9 @@ declare const paths: {
     "window-dev-tools-regular": string;
 };
 export type IconName = keyof typeof paths;
-type Props = AccessibilityProps & {
+type Props = WebAccessibilityProps & {
     color?: string;
-    focusable?: boolean;
     name: IconName;
-    pointerEvents?: ViewProps["pointerEvents"];
     size: number;
     style?: StyleProp<ViewStyle>;
 };

package/src/components/Icon.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from "react";
+import { StyleSheet } from "react-native";
 import { Path, Svg } from "./Svg";
 import customIcons from "../icons/custom-icons.json";
 import fluentIcons from "../icons/fluent-icons.json";
@@ -7,5 +8,10 @@ const paths = {
     ...fluentIcons,
     ...customIcons,
 };
-export const Icon = memo(({ name, color = "currentColor", focusable, size, pointerEvents = "none", style, ...props }) => (_jsx(Svg, { focusable: focusable, pointerEvents: pointerEvents, viewBox: "0 0 24 24", style: [{ height: size, width: size }, style], ...props, children: _jsx(Path, { d: paths[name], fill: color }) })));
+const styles = StyleSheet.create({
+    inert: {
+        pointerEvents: "none",
+    },
+});
+export const Icon = memo(({ name, color = "currentColor", size, style, ...props }) => (_jsx(Svg, { viewBox: "0 0 24 24", style: [styles.inert, { height: size, width: size }, style], ...props, children: _jsx(Path, { d: paths[name], fill: color }) })));
 Icon.displayName = "Icon";

package/src/components/Input.d.ts

@@ -1,16 +1,16 @@
 import { ChangeEventHandler, ReactNode } from "react";
-import { KeyboardTypeOptions, NativeSyntheticEvent, ReturnKeyTypeOptions, StyleProp, TextInput, TextInputProps, TextStyle, ViewStyle, WebAccessibilityRole } from "react-native";
+import { NativeSyntheticEvent, StyleProp, TextInput, TextInputProps, TextStyle, ViewStyle, WebRole } from "react-native";
 import { IconName } from "./Icon";
 type Props = {
-    accessibilityControls?: string;
-    accessibilityExpanded?: boolean;
+    ariaControls?: string;
+    ariaExpanded?: boolean;
     disabled?: boolean;
     error?: string;
     icon?: IconName;
     inputContainerStyle?: StyleProp<ViewStyle>;
-    role?: WebAccessibilityRole;
-    keyboardType?: KeyboardTypeOptions;
-    returnKeyType?: ReturnKeyTypeOptions;
+    role?: WebRole;
+    inputMode?: TextInputProps["inputMode"];
+    enterKeyHint?: TextInputProps["enterKeyHint"];
     maxLength?: number;
     label?: string;
     onFocus?: (event: NativeSyntheticEvent<React.FocusEvent>) => void;

package/src/components/Input.js

@@ -3,6 +3,7 @@ import { forwardRef, memo, useId, useRef } from "react";
 import { StyleSheet, Text, View, } from "react-native";
 import { colors } from "../constants/colors";
 import { commonStyles } from "../constants/commonStyles";
+import { shadows } from "../constants/design";
 import { typography } from "../constants/typography";
 import { useMergeRefs } from "../hooks/useMergeRefs";
 import { isNotNullish } from "../utils/nullish";
@@ -29,7 +30,7 @@ const styles = StyleSheet.create({
         placeholderTextColor: colors.gray[30],
         textOverflow: "ellipsis",
         transitionDuration: "150ms",
-        transitionProperty: ["border-color", "box-shadow"],
+        transitionProperty: "border-color, box-shadow",
         whiteSpace: "nowrap",
         wordBreak: "keep-all",
     },
@@ -38,10 +39,7 @@ const styles = StyleSheet.create({
     },
     focused: {
         borderColor: colors.gray[20],
-        shadowColor: colors.gray[100],
-        shadowOpacity: 0.12,
-        shadowOffset: { height: 0, width: 0 },
-        shadowRadius: 2,
+        boxShadow: shadows.tile,
     },
     disabled: {
         backgroundColor: colors.gray[3],
@@ -49,10 +47,7 @@ const styles = StyleSheet.create({
         cursor: "not-allowed",
     },
     hovered: {
-        shadowColor: colors.gray[100],
-        shadowOpacity: 0.06,
-        shadowOffset: { height: 4, width: 0 },
-        shadowRadius: 8,
+        boxShadow: shadows.tile,
     },
     leftIcon: {
         position: "absolute",
@@ -95,13 +90,13 @@ const styles = StyleSheet.create({
         ...typography.bodyLarge,
     },
 });
-export const Input = memo(forwardRef(({ accessibilityControls, accessibilityExpanded, disabled = false, error, icon, inputContainerStyle, role, keyboardType, returnKeyType, maxLength, label = "", onFocus, onBlur, onSubmitEditing, onChange, onValueChange, onKeyPress, placeholder, readOnly = false, size = "large", successful = false, suffix = "", value = "", style, inputStyle, RightComponent = null, hideErrorMessage = false, }, forwardedRef) => {
+export const Input = memo(forwardRef(({ ariaControls, ariaExpanded, disabled = false, error, icon, inputContainerStyle, role, inputMode, enterKeyHint, maxLength, label = "", onFocus, onBlur, onSubmitEditing, onChange, onValueChange, onKeyPress, placeholder, readOnly = false, size = "large", successful = false, suffix = "", value = "", style, inputStyle, RightComponent = null, hideErrorMessage = false, }, forwardedRef) => {
     const ref = useRef(null);
     const mergedRef = useMergeRefs(ref, forwardedRef);
     const labelId = `label-${useId()}`;
     const id = `input-${useId()}`;
     const errored = isNotNullish(error);
-    return (_jsxs(View, { style: style, children: [label !== "" && (_jsxs(_Fragment, { children: [_jsx(Label, { id: labelId, htmlFor: id, children: label }), _jsx(Space, { height: 8 })] })), _jsxs(Box, { direction: "row", style: inputContainerStyle, children: [_jsxs(Box, { direction: "row", alignItems: "center", style: commonStyles.fill, children: [_jsx(PressableTextInput, { ref: mergedRef, accessibilityControls: accessibilityControls, accessibilityExpanded: accessibilityExpanded, accessibilityLabelledBy: labelId, nativeID: id, allowFontScaling: false, autoComplete: "off", accessibilityRole: role, editable: !readOnly && !disabled, keyboardType: keyboardType, returnKeyType: returnKeyType, multiline: false, numberOfLines: 1, maxLength: maxLength, onFocus: onFocus, onBlur: onBlur, onChange: onChange, onChangeText: onValueChange, onSubmitEditing: onSubmitEditing, onKeyPress: onKeyPress, placeholder: placeholder, value: value, style: ({ hovered, focused }) => [
+    return (_jsxs(View, { style: style, children: [label !== "" && (_jsxs(_Fragment, { children: [_jsx(Label, { id: labelId, htmlFor: id, children: label }), _jsx(Space, { height: 8 })] })), _jsxs(Box, { direction: "row", style: inputContainerStyle, children: [_jsxs(Box, { direction: "row", alignItems: "center", style: commonStyles.fill, children: [_jsx(PressableTextInput, { ref: mergedRef, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-labelledby": labelId, id: id, allowFontScaling: false, autoComplete: "off", role: role, readOnly: readOnly || disabled, inputMode: inputMode, enterKeyHint: enterKeyHint, multiline: false, rows: 1, maxLength: maxLength, onFocus: onFocus, onBlur: onBlur, onChange: onChange, onChangeText: onValueChange, onSubmitEditing: onSubmitEditing, onKeyPress: onKeyPress, placeholder: placeholder, value: value, style: ({ hovered, focused }) => [
                                     styles.base,
                                     size === "small" && styles.small,
                                     isNotNullish(icon) && styles.withLeftIcon,

package/src/components/Label.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { TextProps } from "react-native";
 import { Except } from "type-fest";
-type Props = Except<TextProps, "accessibilityRole"> & {
+type Props = Except<TextProps, "role"> & {
     children?: ReactNode;
     htmlFor?: string;
     id?: string;

package/src/components/Label.js

@@ -15,5 +15,5 @@ const styles = StyleSheet.create({
 export const Label = ({ htmlFor, id, style, ...props }) => {
     const ref = useRef(null);
     useNativeProp(ref, "for", htmlFor);
-    return (_jsx(Text, { ref: ref, nativeID: id, accessibilityRole: "label", style: [styles.base, style], ...props }));
+    return _jsx(Text, { ref: ref, id: id, role: "label", style: [styles.base, style], ...props });
 };

package/src/components/LakeButton.d.ts

@@ -3,9 +3,9 @@ import { GestureResponderEvent, PressableStateCallbackType, StyleProp, View, Vie
 import { ColorVariants, Spacings } from "../constants/design";
 import { IconName } from "./Icon";
 export type ButtonProps = {
-    accessibilityControls?: string;
-    accessibilityExpanded?: boolean;
-    accessibilityLabel?: string;
+    ariaControls?: string;
+    ariaExpanded?: boolean;
+    ariaLabel?: string;
     children?: ReactNode;
     color?: ColorVariants;
     disabled?: boolean;

package/src/components/LakeButton.js

@@ -20,7 +20,7 @@ const styles = StyleSheet.create({
         justifyContent: "center",
         paddingHorizontal: 20,
         transitionDuration: "150ms",
-        transitionProperty: ["background-color", "color"],
+        transitionProperty: "background-color, color",
     },
     grow: {
         flexGrow: 1,
@@ -80,7 +80,7 @@ const styles = StyleSheet.create({
         ...StyleSheet.absoluteFillObject,
         alignItems: "center",
         justifyContent: "center",
-        transform: [{ translateZ: 0 }],
+        transform: "translateZ(0px)",
         borderRadius: radii[6],
     },
     group: {
@@ -101,13 +101,13 @@ const styles = StyleSheet.create({
     },
 });
 const isReactText = (node) => ["string", "number"].includes(typeof node);
-export const LakeButton = memo(forwardRef(({ accessibilityControls, accessibilityExpanded, accessibilityLabel, children, color = "gray", disabled = false, icon, grow = false, iconPosition = "start", loading = false, mode = "primary", onPress, size = "large", style, forceBackground = false, href, hrefAttrs, pill, }, forwardedRef) => {
+export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLabel, children, color = "gray", disabled = false, icon, grow = false, iconPosition = "start", loading = false, mode = "primary", onPress, size = "large", style, forceBackground = false, href, hrefAttrs, pill, }, forwardedRef) => {
     const isSmall = size === "small";
     const iconSize = isSmall ? 18 : 20;
     const hasIconStart = isNotNullish(icon) && iconPosition === "start";
     const hasIconEnd = isNotNullish(icon) && iconPosition === "end";
     const hasOnlyIcon = isNullish(children) && isNotNullish(icon);
-    return (_jsx(Pressable, { href: href, hrefAttrs: hrefAttrs, accessibilityRole: href != null ? "link" : "button", accessibilityBusy: loading, accessibilityDisabled: disabled, accessibilityControls: accessibilityControls, accessibilityExpanded: accessibilityExpanded, accessibilityLabel: accessibilityLabel, disabled: loading || disabled, ref: forwardedRef, onPress: onPress, style: ({ hovered, pressed, focused }) => [
+    return (_jsx(Pressable, { href: href, hrefAttrs: hrefAttrs, role: href != null ? "link" : "button", "aria-busy": loading, "aria-disabled": disabled, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, disabled: loading || disabled, ref: forwardedRef, onPress: onPress, style: ({ hovered, pressed, focused }) => [
             styles.base,
             isSmall && styles.small,
             hasIconStart && isSmall ? styles.withIconStartSmall : styles.withIconStart,
@@ -151,7 +151,7 @@ export const LakeButton = memo(forwardRef(({ accessibilityControls, accessibilit
                     ? colors[color][700]
                     : colors[color][600]
                 : colors[color].contrast;
-            return (_jsxs(_Fragment, { children: [hasIconStart && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: textColor, name: icon, size: iconSize }), isNotNullish(children) && _jsx(Space, { width: isSmall ? 8 : 12 })] })), isReactText(children) ? (_jsx(LakeText, { numberOfLines: 1, selectable: false, style: [isSmall ? styles.textSmall : styles.text, { color: textColor }], children: children })) : (children), hasIconEnd && (_jsxs(_Fragment, { children: [isNotNullish(children) && _jsx(Space, { width: isSmall ? 8 : 12 }), _jsx(Icon, { color: textColor, name: icon, size: iconSize })] })), loading && (_jsx(View, { accessibilityRole: "none", style: [
+            return (_jsxs(_Fragment, { children: [hasIconStart && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: textColor, name: icon, size: iconSize }), isNotNullish(children) && _jsx(Space, { width: isSmall ? 8 : 12 })] })), isReactText(children) ? (_jsx(LakeText, { numberOfLines: 1, userSelect: "none", style: [isSmall ? styles.textSmall : styles.text, { color: textColor }], children: children })) : (children), hasIconEnd && (_jsxs(_Fragment, { children: [isNotNullish(children) && _jsx(Space, { width: isSmall ? 8 : 12 }), _jsx(Icon, { color: textColor, name: icon, size: iconSize })] })), loading && (_jsx(View, { role: "none", style: [
                             styles.loaderContainer,
                             {
                                 backgroundColor: mode === "secondary" || mode === "tertiary"

package/src/components/LakeCheckbox.js

@@ -39,7 +39,7 @@ export const LakeCheckbox = ({ value, color = "current", disabled = false, isErr
         }
         isFirstRender.current = false;
     }, [value]);
-    return (_jsxs(View, { accessibilityRole: "none", style: [
+    return (_jsxs(View, { role: "none", style: [
             styles.container,
             disabled && styles.disabled,
             value !== false && {
@@ -50,5 +50,5 @@ export const LakeCheckbox = ({ value, color = "current", disabled = false, isErr
         ], children: [value === true && (_jsx(Svg, { viewBox: "0 0 16 16", children: _jsx(Path, { d: "m3.5 7.5 2.8 3.4 5.6-6.7", stroke: colors[color].contrast, strokeWidth: 1.5, fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: "20", strokeDashoffset: shouldAnimate ? "20" : "0", children: shouldAnimate && (_jsx(Animate, { attributeName: "stroke-dashoffset", values: "20;0", dur: "150ms", begin: "150ms", fill: "freeze" })) }) })), value === "mixed" && (_jsx(View, { style: [styles.mixed, { backgroundColor: colors[color].contrast }] }))] }));
 };
 export const LakeLabelledCheckbox = ({ value, color, label, onValueChange, disabled = false, isError = false, }) => {
-    return (_jsxs(Pressable, { accessibilityChecked: value, style: styles.labelled, onPress: () => onValueChange(value === true ? false : true), disabled: disabled, children: [_jsx(LakeCheckbox, { value: value, color: color, disabled: disabled, isError: isError }), _jsx(Space, { width: 8 }), _jsx(LakeText, { color: colors.gray[900], selectable: false, children: label })] }));
+    return (_jsxs(Pressable, { "aria-checked": value, style: styles.labelled, onPress: () => onValueChange(value === true ? false : true), disabled: disabled, children: [_jsx(LakeCheckbox, { value: value, color: color, disabled: disabled, isError: isError }), _jsx(Space, { width: 8 }), _jsx(LakeText, { color: colors.gray[900], userSelect: "none", children: label })] }));
 };

package/src/components/LakeCombobox.d.ts

@@ -15,14 +15,14 @@ export type LakeComboboxProps<I> = {
     disabled?: boolean;
     emptyResultText: string;
     error?: string;
-    nativeID?: string;
+    id?: string;
     readOnly?: boolean;
 };
 export type LakeComboboxRef = {
     close: () => void;
     open: () => void;
 };
-declare const LakeComboboxWithRef: <I>({ inputRef, value, items, ListFooterComponent, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled, emptyResultText, readOnly, nativeID, error, }: LakeComboboxProps<I>, externalRef: ForwardedRef<LakeComboboxRef>) => JSX.Element;
+declare const LakeComboboxWithRef: <I>({ inputRef, value, items, ListFooterComponent, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled, emptyResultText, readOnly, id, error, }: LakeComboboxProps<I>, externalRef: ForwardedRef<LakeComboboxRef>) => JSX.Element;
 export declare const LakeCombobox: <I>(props: LakeComboboxProps<I> & {
     ref?: RefObject<LakeComboboxRef> | undefined;
 }) => ReturnType<typeof LakeComboboxWithRef>;

package/src/components/LakeCombobox.js

@@ -46,6 +46,7 @@ const styles = StyleSheet.create({
     },
     itemText: {
         ...typography.bodyLarge,
+        userSelect: "none",
     },
     loader: {
         padding: spacings[24],
@@ -81,9 +82,8 @@ const getItemLayout = (_data, index) => ({
     offset: ELEMENT_HEIGHT * index,
     index,
 });
-const LakeComboboxWithRef = ({ inputRef, value, items, ListFooterComponent, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled = false, emptyResultText, readOnly, nativeID, error, }, externalRef) => {
+const LakeComboboxWithRef = ({ inputRef, value, items, ListFooterComponent, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled = false, emptyResultText, readOnly, id, error, }, externalRef) => {
     const ref = useRef(null);
-    // @ts-expect-error
     const inputTextRef = useMergeRefs(ref, inputRef);
     const listRef = useRef(null);
     const listContainerRef = useRef(null);
@@ -143,18 +143,14 @@ const LakeComboboxWithRef = ({ inputRef, value, items, ListFooterComponent, onVa
             close();
         }, 100);
     }, [close]);
-    return (_jsxs(View, { children: [_jsx(LakeTextInput
-            // @ts-expect-error
-            , { 
-                // @ts-expect-error
-                ref: inputTextRef, style: styles.input, accessibilityExpanded: isFocused, accessibilityControls: isFocused ? suggestionsId : "", returnKeyType: "search", icon: icon, accessibilityRole: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, onChangeText: onValueChange, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, nativeID: nativeID, readOnly: readOnly }), _jsx(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: ref, autoFocus: true, returnFocus: false, visible: isFocused && !items.isNotAsked(), underlay: false, forcedMode: "Dropdown", children: _jsx(View, { style: styles.list, children: items.match({
+    return (_jsxs(View, { children: [_jsx(LakeTextInput, { ref: inputTextRef, style: styles.input, ariaExpanded: isFocused, ariaControls: isFocused ? suggestionsId : "", enterKeyHint: "search", icon: icon, role: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, onChangeText: onValueChange, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, id: id, readOnly: readOnly }), _jsx(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: ref, autoFocus: true, returnFocus: false, visible: isFocused && !items.isNotAsked(), underlay: false, forcedMode: "Dropdown", children: _jsx(View, { style: styles.list, children: items.match({
                         NotAsked: () => null,
                         Loading: () => _jsx(LoadingView, { style: styles.loader }),
                         Done: items => items.match({
                             Error: _ => (_jsx(Icon, { name: "error-circle-regular", size: 22, color: colors.negative[500] })),
-                            Ok: items => (_jsxs(View, { ref: listContainerRef, style: styles.listContainer, children: [items.length === 0 ? (_jsxs(Box, { justifyContent: "center", alignItems: "center", style: styles.emptyList, children: [_jsx(Icon, { name: "clipboard-search-regular", size: 24, color: colors.gray.primary }), _jsx(Space, { height: 8 }), _jsx(Text, { style: styles.emptyListText, children: emptyResultText })] })) : (_jsx(FlatList, { ref: listRef, keyExtractor: keyExtractor, getItemLayout: getItemLayout, accessibilityRole: "list", data: items, style: styles.flatList, renderItem: ({ item }) => {
+                            Ok: items => (_jsxs(View, { ref: listContainerRef, style: styles.listContainer, children: [items.length === 0 ? (_jsxs(Box, { justifyContent: "center", alignItems: "center", style: styles.emptyList, children: [_jsx(Icon, { name: "clipboard-search-regular", size: 24, color: colors.gray.primary }), _jsx(Space, { height: 8 }), _jsx(Text, { style: styles.emptyListText, children: emptyResultText })] })) : (_jsx(FlatList, { ref: listRef, keyExtractor: keyExtractor, getItemLayout: getItemLayout, role: "list", data: items, style: styles.flatList, renderItem: ({ item }) => {
                                             const rendered = renderItem(item);
-                                            return (_jsx(Pressable, { onFocus: handleFocus, onBlur: handleBlur, accessibilityRole: "listitem", onKeyDown: handleListItemKeyPress, style: ({ hovered, pressed, focused }) => [
+                                            return (_jsx(Pressable, { onFocus: handleFocus, onBlur: handleBlur, role: "listitem", onKeyDown: handleListItemKeyPress, style: ({ hovered, pressed, focused }) => [
                                                     styles.item,
                                                     hovered && styles.hoveredItem,
                                                     focused && styles.focusedItem,
@@ -166,7 +162,7 @@ const LakeComboboxWithRef = ({ inputRef, value, items, ListFooterComponent, onVa
                                                         setIsFetchingAdditionalInfo(false);
                                                         close();
                                                     });
-                                                }, children: isReactText(rendered) ? (_jsx(Text, { numberOfLines: 1, selectable: false, style: styles.itemText, children: rendered })) : (rendered) }));
+                                                }, children: isReactText(rendered) ? (_jsx(Text, { numberOfLines: 1, style: styles.itemText, children: rendered })) : (rendered) }));
                                         } })), ListFooterComponent, isFetchingAdditionalInfo ? (_jsxs(View, { style: styles.loaderAdditional, children: [_jsx(View, { style: styles.loaderAdditionalUnderlay }), _jsx(LoadingView, {})] })) : null] })),
                         }),
                     }) }) })] }));

package/src/components/LakeDownloadButton.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Text } from "react-native";
 import { Icon } from "./Icon";
 export const LakeDownloadButton = ({ url, filename }) => {
-    return (_jsx(Text, { href: url, hrefAttrs: { download: filename, target: "blank" }, accessibilityHint: "download", children: _jsx(Icon, { size: 18, name: "arrow-download-filled" }) }));
+    return (_jsx(Text, { href: url, hrefAttrs: { download: filename, target: "blank" }, "aria-label": "download", children: _jsx(Icon, { size: 18, name: "arrow-download-filled" }) }));
 };

package/src/components/LakeHeading.d.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from "react";
-import { Text, TextProps } from "react-native";
+import { Text, TextProps, TextStyle } from "react-native";
 import { Except } from "type-fest";
-export declare const LakeHeading: import("react").ForwardRefExoticComponent<Except<TextProps, "accessibilityRole"> & {
+export declare const LakeHeading: import("react").ForwardRefExoticComponent<Except<TextProps, "role"> & {
     align?: "left" | "right" | "center" | undefined;
     children: ReactNode;
     color?: string | undefined;
     level: 1 | 2 | 3 | 4 | 5 | 6 | "none";
+    userSelect?: TextStyle["userSelect"];
     variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
 } & import("react").RefAttributes<Text>>;

package/src/components/LakeHeading.js

@@ -16,4 +16,10 @@ const variants = StyleSheet.create({
     h5: texts.h5,
     h6: texts.h6,
 });
-export const LakeHeading = forwardRef(({ align = "left", children, color, level, style, variant = "h1", ...props }, forwardedRef) => (_jsx(Text, { ref: forwardedRef, accessibilityRole: level === "none" ? undefined : "header", accessibilityLevel: level === "none" ? undefined : level, style: [variants[variant], alignments[align], isNotNullish(color) && { color }, style], ...props, children: children })));
+export const LakeHeading = forwardRef(({ align = "left", children, color, level, style, userSelect, variant = "h1", ...props }, forwardedRef) => (_jsx(Text, { ref: forwardedRef, role: level === "none" ? undefined : "heading", "aria-level": level === "none" ? undefined : level, style: [
+        variants[variant],
+        alignments[align],
+        isNotNullish(color) && { color },
+        isNotNullish(userSelect) && { userSelect },
+        style,
+    ], ...props, children: children })));

package/src/components/LakeLabel.d.ts

@@ -15,6 +15,5 @@ type Props = {
     readOnly?: boolean;
     style?: StyleProp<ViewStyle>;
 };
-export declare const defaultLabelType: LabelType;
 export declare const LakeLabel: ({ label, optionalLabel, extra, readOnly, color, readOnlyColor, type, help, render, actions, style, }: Props) => JSX.Element;
 export {};

package/src/components/LakeLabel.js

@@ -28,7 +28,7 @@ const styles = StyleSheet.create({
 const Label = (props) => {
     return unstable_createElement("label", props);
 };
-export const defaultLabelType = "formSmall";
+const defaultLabelType = "formSmall";
 export const LakeLabel = ({ label, optionalLabel, extra, readOnly = false, color = "current", readOnlyColor = colors[color].primary, type = defaultLabelType, help, render, actions, style, }) => {
     const [id] = useState(() => uuid());
     const containerRef = useRef(null);
@@ -40,9 +40,9 @@ export const LakeLabel = ({ label, optionalLabel, extra, readOnly = false, color
             target?.focus();
         }
     }, [id]);
-    return (_jsxs(Box, { style: [styles.container, style], direction: "row", alignItems: "center", justifyContent: "spaceBetween", children: [_jsxs(View, { style: commonStyles.fill, ref: containerRef, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", style: styles.shrink, children: [type === "form" || type === "formSmall" || type === "radioGroup" ? (_jsxs(Label, { onClick: onClick, htmlFor: id, style: [styles.label, readOnly && { color: readOnlyColor }], children: [label, optionalLabel != null ? (_jsxs(_Fragment, { children: [" - ", _jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: optionalLabel })] })) : null] })) : (_jsxs(LakeText, { variant: "medium", color: readOnlyColor, nativeID: id, children: [label, optionalLabel != null ? (_jsxs(_Fragment, { children: [" - ", _jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: optionalLabel })] })) : null] })), isNotNullish(extra) && extra()] }), isNotNullish(help) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), help] }))] }), _jsx(Space, { height: match(type)
+    return (_jsxs(Box, { style: [styles.container, style], direction: "row", alignItems: "center", justifyContent: "spaceBetween", children: [_jsxs(View, { style: commonStyles.fill, ref: containerRef, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", style: styles.shrink, children: [type === "form" || type === "formSmall" || type === "radioGroup" ? (_jsxs(Label, { onClick: onClick, htmlFor: id, style: [styles.label, readOnly && { color: readOnlyColor }], children: [label, optionalLabel != null ? (_jsxs(_Fragment, { children: [" - ", _jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: optionalLabel })] })) : null] })) : (_jsxs(LakeText, { variant: "medium", color: readOnlyColor, id: id, children: [label, optionalLabel != null ? (_jsxs(_Fragment, { children: [" - ", _jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: optionalLabel })] })) : null] })), isNotNullish(extra) && extra()] }), isNotNullish(help) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), help] }))] }), _jsx(Space, { height: match(type)
                             .with("formSmall", "viewSmall", () => 4)
                             .with("form", "view", () => 8)
                             .with("radioGroup", () => 12)
-                            .exhaustive() }), _jsx(View, { accessibilityLabelledBy: type === "view" || type === "viewSmall" ? id : undefined, children: render(id) })] }), isNotNullish(actions) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), actions] }))] }));
+                            .exhaustive() }), _jsx(View, { "aria-labelledby": type === "view" || type === "viewSmall" ? id : undefined, children: render(id) })] }), isNotNullish(actions) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), actions] }))] }));
 };

package/src/components/LakeModal.js

@@ -22,6 +22,9 @@ const styles = StyleSheet.create({
     container: {
         ...StyleSheet.absoluteFillObject,
     },
+    inert: {
+        pointerEvents: "none",
+    },
     fill: {
         ...StyleSheet.absoluteFillObject,
         animationFillMode: "forwards",
@@ -48,7 +51,7 @@ const styles = StyleSheet.create({
         animationKeyframes: {
             "0%": {
                 opacity: 0,
-                transform: [{ translateY: -20 }],
+                transform: "translateY(-20px)",
             },
         },
         animationDuration: "300ms",
@@ -58,7 +61,7 @@ const styles = StyleSheet.create({
         animationKeyframes: {
             "100%": {
                 opacity: 0,
-                transform: [{ translateY: -20 }],
+                transform: "translateY(-20px)",
             },
         },
         animationDuration: "300ms",
@@ -128,5 +131,5 @@ export const LakeModal = ({ visible, icon, title, color = "current", children, m
     if (rootElement == null) {
         return null;
     }
-    return (_jsx(Portal, { container: rootElement, children: _jsxs(View, { accessibilityModal: true, style: styles.container, pointerEvents: visible ? "auto" : "none", children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? _jsx(View, { style: styles.overlay }) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: styles.fill, enter: styles.modalEnter, leave: styles.modalLeave, children: visible ? (_jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.tiny, children: ({ large, small }) => (_jsx(FocusTrap, { autoFocus: true, focusLock: true, returnFocus: true, onEscapeKey: onPressClose, style: styles.trap, children: _jsxs(ScrollView, { style: styles.modalContainer, contentContainerStyle: large ? styles.modalContentContainer : styles.modalContentContainerSmall, children: [onPressClose != null ? (_jsx(Pressable, { onPress: onPressClose, style: styles.pressableOverlay })) : null, _jsxs(View, { style: [large ? styles.modal : styles.modalSmall, { maxWidth }], children: [_jsxs(View, { style: styles.modalHeader, children: [_jsxs(View, { style: styles.modalIconTitle, children: [icon != null ? (_jsx(Icon, { name: icon, size: large ? 40 : 32, color: colors[color][500] })) : null, icon != null && title != null ? _jsx(Space, { height: 12 }) : null, title != null ? (_jsxs(_Fragment, { children: [_jsx(LakeHeading, { level: 2, variant: "h3", children: title }), _jsx(Space, { height: 12 })] })) : null] }), onPressClose != null ? (_jsx(LakeButton, { style: styles.closeButton, mode: "tertiary", onPress: onPressClose, icon: "lake-close" })) : null] }), typeof children == "function" ? children({ large, small }) : children] })] }) })) })) : null }) })] }) }));
+    return (_jsx(Portal, { container: rootElement, children: _jsxs(View, { "aria-modal": true, style: [styles.container, !visible && styles.inert], children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? _jsx(View, { style: styles.overlay }) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: styles.fill, enter: styles.modalEnter, leave: styles.modalLeave, children: visible ? (_jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.tiny, children: ({ large, small }) => (_jsx(FocusTrap, { autoFocus: true, focusLock: true, returnFocus: true, onEscapeKey: onPressClose, style: styles.trap, children: _jsxs(ScrollView, { style: styles.modalContainer, contentContainerStyle: large ? styles.modalContentContainer : styles.modalContentContainerSmall, children: [onPressClose != null ? (_jsx(Pressable, { onPress: onPressClose, style: styles.pressableOverlay })) : null, _jsxs(View, { style: [large ? styles.modal : styles.modalSmall, { maxWidth }], children: [_jsxs(View, { style: styles.modalHeader, children: [_jsxs(View, { style: styles.modalIconTitle, children: [icon != null ? (_jsx(Icon, { name: icon, size: large ? 40 : 32, color: colors[color][500] })) : null, icon != null && title != null ? _jsx(Space, { height: 12 }) : null, title != null ? (_jsxs(_Fragment, { children: [_jsx(LakeHeading, { level: 2, variant: "h3", children: title }), _jsx(Space, { height: 12 })] })) : null] }), onPressClose != null ? (_jsx(LakeButton, { style: styles.closeButton, mode: "tertiary", onPress: onPressClose, icon: "lake-close" })) : null] }), typeof children == "function" ? children({ large, small }) : children] })] }) })) })) : null }) })] }) }));
 };

package/src/components/LakeRadio.js

@@ -20,12 +20,12 @@ const styles = StyleSheet.create({
         height: INNER_CIRCLE_SIZE,
         width: INNER_CIRCLE_SIZE,
         borderRadius: INNER_CIRCLE_SIZE / 2,
-        transform: [{ scale: 0 }],
+        transform: "scale(0)",
         transitionProperty: "transform",
         transitionDuration: "100ms",
     },
     innerCircleDisplay: {
-        transform: [{ scale: 1 }],
+        transform: "scale(1)",
     },
 });
 export const LakeRadio = ({ value, disabled = false, color = "current" }) => (_jsx(View, { style: [
@@ -34,7 +34,7 @@ export const LakeRadio = ({ value, disabled = false, color = "current" }) => (_j
         disabled && {
             borderColor: colors.gray[300],
         },
-    ], accessibilityRole: "none", children: _jsx(View, { accessibilityHidden: !value, style: [
+    ], role: "none", children: _jsx(View, { "aria-hidden": !value, style: [
             styles.innerCircle,
             { backgroundColor: colors[color].primary },
             disabled && {

package/src/components/LakeScrollView.js

@@ -21,6 +21,7 @@ const styles = StyleSheet.create({
         backgroundImage: `linear-gradient(to bottom, ${backgroundColor.default}, ${backgroundColor.defaultTransparent})`,
         opacity: 0,
         transition: "200ms ease-in-out opacity",
+        pointerEvents: "none",
     },
     visibleTopGradient: {
         opacity: 1,
@@ -31,5 +32,5 @@ export const LakeScrollView = ({ children, horizontalSafeArea = HORIZONTAL_SAFE_
     const onScroll = useCallback((event) => {
         setIsScrolled(event.nativeEvent.contentOffset.y > 0);
     }, []);
-    return (_jsxs(View, { style: styles.root, children: [_jsx(ScrollView, { onScroll: onScroll, scrollEventThrottle: 16, style: [styles.container, { marginHorizontal: -horizontalSafeArea }, style], contentContainerStyle: [{ paddingHorizontal: horizontalSafeArea }, contentContainerStyle], children: children }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient], pointerEvents: "none" })] }));
+    return (_jsxs(View, { style: styles.root, children: [_jsx(ScrollView, { onScroll: onScroll, scrollEventThrottle: 16, style: [styles.container, { marginHorizontal: -horizontalSafeArea }, style], contentContainerStyle: [{ paddingHorizontal: horizontalSafeArea }, contentContainerStyle], children: children }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }));
 };

package/src/components/LakeSearchField.js

@@ -41,7 +41,7 @@ const styles = StyleSheet.create({
         position: "absolute",
         right: 0,
         top: "50%",
-        transform: [{ translateY: "-50%" }],
+        transform: "translateY(-50%)",
         padding: 16,
     },
     clear: {
@@ -69,13 +69,13 @@ const styles = StyleSheet.create({
     },
 });
 const CollapsibleSeachField = ({ inputRef, placeholder, initialValue, onChange, setFocused, hasFocus, clear, currentValue, }) => {
-    return (_jsxs(View, { children: [_jsx(LakeButton, { mode: "secondary", size: "small", accessibilityLabel: placeholder, icon: "search-filled", onPress: () => {
+    return (_jsxs(View, { children: [_jsx(LakeButton, { mode: "secondary", size: "small", ariaLabel: placeholder, icon: "search-filled", onPress: () => {
                     setFocused.on();
                 }, pill: currentValue !== "" }), _jsx(TransitionView, { style: styles.openSearchFieldContainer, ...animations.fadeAndSlideInFromRight, children: hasFocus ? (_jsx(View, { style: styles.openSearchField, children: _jsx(ExpandedSearchField, { inputRef: inputRef, placeholder: placeholder, initialValue: initialValue, onChange: onChange, setFocused: setFocused, hasFocus: hasFocus, clear: clear, currentValue: currentValue }) })) : null })] }));
 };
 const ExpandedSearchField = ({ inputRef, placeholder, initialValue, onChange, setFocused, hasFocus, clear, }) => {
     const timeoutRef = useRef(null);
-    return (_jsxs(View, { style: styles.container, children: [_jsx(LakeTextInput, { ref: inputRef, autoFocus: hasFocus, icon: "search-filled", placeholder: placeholder, defaultValue: initialValue, keyboardType: "web-search", onChangeText: onChange, hideErrors: true, onFocus: () => {
+    return (_jsxs(View, { style: styles.container, children: [_jsx(LakeTextInput, { ref: inputRef, autoFocus: hasFocus, icon: "search-filled", placeholder: placeholder, defaultValue: initialValue, inputMode: "search", onChangeText: onChange, hideErrors: true, onFocus: () => {
                     if (timeoutRef.current != null) {
                         clearTimeout(timeoutRef.current);
                     }

package/src/components/LakeSelect.d.ts

@@ -22,9 +22,9 @@ export type SelectProps<V> = {
     value?: V;
     onValueChange: (value: V) => void;
     hideErrors?: boolean;
-    nativeID?: string;
+    id?: string;
     error?: string;
     readOnly?: boolean;
     style?: StyleProp<ViewStyle>;
 };
-export declare function LakeSelect<V>({ title, items, valueStyle, size, color, disabled, mode, placeholder, readOnly, nativeID, matchReferenceWidth, value, error, hideErrors, icon, onValueChange, PopoverFooter, style, }: SelectProps<V>): JSX.Element;
+export declare function LakeSelect<V>({ title, items, valueStyle, size, color, disabled, mode, placeholder, readOnly, id, matchReferenceWidth, value, error, hideErrors, icon, onValueChange, PopoverFooter, style, }: SelectProps<V>): JSX.Element;