@swan-io/lake 1.1.0 → 1.2.1

package/src/assets/main.css

@@ -0,0 +1,466 @@
+html,
+body {
+  height: 100%;
+}
+
+body {
+  overflow: hidden;
+}
+
+#app-root,
+#root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 2dppx) {
+  body {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+  }
+}
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+::-moz-selection {
+  background-color: #e7e8e8;
+  color: #14191a;
+  text-shadow: none;
+}
+
+::selection {
+  background-color: #e7e8e8;
+  color: #14191a;
+  text-shadow: none;
+}
+
+:root {
+  --shadow-tile: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
+  --shadow-tile-hover: 0 2px 10px 0 rgba(0, 0, 0, 0.18);
+  --shadow-modal: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 8px 18px -8px rgba(0, 0, 0, 0.24);
+
+  --spacing-4: 4px;
+  --spacing-8: 8px;
+  --spacing-12: 12px;
+  --spacing-16: 16px;
+  --spacing-20: 20px;
+  --spacing-24: 24px;
+  --spacing-32: 32px;
+  --spacing-40: 40px;
+  --spacing-48: 48px;
+  --spacing-72: 72px;
+  --spacing-96: 96px;
+
+  --spacing-negative-4: calc(-1 * var(--spacing-4));
+  --spacing-negative-8: calc(-1 * var(--spacing-8));
+  --spacing-negative-12: calc(-1 * var(--spacing-12));
+  --spacing-negative-16: calc(-1 * var(--spacing-16));
+  --spacing-negative-20: calc(-1 * var(--spacing-20));
+  --spacing-negative-24: calc(-1 * var(--spacing-24));
+  --spacing-negative-32: calc(-1 * var(--spacing-32));
+  --spacing-negative-40: calc(-1 * var(--spacing-40));
+  --spacing-negative-48: calc(-1 * var(--spacing-48));
+  --spacing-negative-72: calc(-1 * var(--spacing-72));
+  --spacing-negative-96: calc(-1 * var(--spacing-96));
+
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-8: 8px;
+
+  --color-white: #ffffff;
+  --color-black: #000000;
+
+  --color-swan-900: #080709;
+  --color-swan-800: #0f0e13;
+  --color-swan-700: #17151c;
+  --color-swan-600: #1e1c26;
+  --color-swan-500: #26232f;
+  --color-swan-400: #514f59;
+  --color-swan-300: #7d7b82;
+  --color-swan-200: #a8a7ac;
+  --color-swan-100: #d4d3d5;
+  --color-swan-50: #f4f3f5;
+  --color-swan-0: #f4f3f5;
+  --color-swan-primary: var(--color-swan-900);
+  --color-swan-secondary: var(--color-swan-400);
+  --color-swan-contrast: var(--color-white);
+
+  --color-dark-pink-900: #2e0d1d;
+  --color-dark-pink-800: #5d1b3b;
+  --color-dark-pink-700: #8b2858;
+  --color-dark-pink-600: #ba3676;
+  --color-dark-pink-500: #e84393;
+  --color-dark-pink-400: #ed69a9;
+  --color-dark-pink-300: #f18ebe;
+  --color-dark-pink-200: #f6b4d4;
+  --color-dark-pink-100: #fad9e9;
+  --color-dark-pink-50: #fef6fa;
+  --color-dark-pink-0: #fef6fa;
+  --color-dark-pink-primary: var(--color-dark-pink-600);
+  --color-dark-pink-secondary: var(--color-dark-pink-700);
+  --color-dark-pink-contrast: var(--color-white);
+
+  --color-medium-slade-blue-900: #21132f;
+  --color-medium-slade-blue-800: #42265e;
+  --color-medium-slade-blue-700: #63388c;
+  --color-medium-slade-blue-600: #844bbb;
+  --color-medium-slade-blue-500: #a55eea;
+  --color-medium-slade-blue-400: #b77eee;
+  --color-medium-slade-blue-300: #c99ef2;
+  --color-medium-slade-blue-200: #dbbff7;
+  --color-medium-slade-blue-100: #eddffb;
+  --color-medium-slade-blue-50: #fbf7fe;
+  --color-medium-slade-blue-0: #fbf7fe;
+  --color-medium-slade-blue-primary: var(--color-medium-slade-blue-600);
+  --color-medium-slade-blue-secondary: var(--color-medium-slade-blue-700);
+  --color-medium-slade-blue-contrast: var(--color-white);
+
+  --color-gray-900: #16141a;
+  --color-gray-800: #2d2b31;
+  --color-gray-700: #454348;
+  --color-gray-600: #5c5a5f;
+  --color-gray-500: #737276;
+  --color-gray-400: #8f8e91;
+  --color-gray-300: #abaaad;
+  --color-gray-200: #c7c7c8;
+  --color-gray-100: #e8e7e8;
+  --color-gray-75: #ededed;
+  --color-gray-50: #f4f4f4;
+  --color-gray-0: #f4f4f4;
+  --color-gray-primary: var(--color-gray-500);
+  --color-gray-secondary: var(--color-gray-700);
+  --color-gray-contrast: var(--color-white);
+
+  --color-live-900: #140d24;
+  --color-live-800: #271a48;
+  --color-live-700: #3b266d;
+  --color-live-600: #4e3391;
+  --color-live-500: #6240b5;
+  --color-live-400: #8166c4;
+  --color-live-300: #a18cd3;
+  --color-live-200: #c0b3e1;
+  --color-live-100: #e0d9f0;
+  --color-live-50: #f7f5fb;
+  --color-live-0: #f7f5fb;
+  --color-live-primary: var(--color-live-500);
+  --color-live-secondary: var(--color-live-600);
+  --color-live-contrast: var(--color-white);
+
+  --color-sandbox-900: #3d2325;
+  --color-sandbox-800: #643330;
+  --color-sandbox-700: #8b423b;
+  --color-sandbox-600: #b25246;
+  --color-sandbox-500: #d96151;
+  --color-sandbox-400: #e18174;
+  --color-sandbox-300: #e8a097;
+  --color-sandbox-200: #f0c0b9;
+  --color-sandbox-100: #f7dfdc;
+  --color-sandbox-50: #fdf7f6;
+  --color-sandbox-0: #fdf7f6;
+  --color-sandbox-primary: var(--color-sandbox-500);
+  --color-sandbox-secondary: var(--color-sandbox-600);
+  --color-sandbox-contrast: var(--color-white);
+
+  --color-positive-900: #062a1b;
+  --color-positive-800: #0c5436;
+  --color-positive-700: #137e50;
+  --color-positive-600: #19a86b;
+  --color-positive-500: #1fd286;
+  --color-positive-400: #4cdb9e;
+  --color-positive-300: #79e4b6;
+  --color-positive-200: #d2f6e7;
+  --color-positive-100: #f4fdf9;
+  --color-positive-50: #f4fdf9;
+  --color-positive-0: #f8fefb;
+  --color-positive-primary: var(--color-positive-700);
+  --color-positive-secondary: var(--color-positive-800);
+  --color-positive-contrast: var(--color-white);
+
+  --color-warning-900: #311f0f;
+  --color-warning-800: #623d1d;
+  --color-warning-700: #935c2c;
+  --color-warning-600: #c47a3a;
+  --color-warning-500: #f59949;
+  --color-warning-400: #f7ad6d;
+  --color-warning-300: #e59866;
+  --color-warning-200: #f9c292;
+  --color-warning-100: #fdebdb;
+  --color-warning-50: #fffaf6;
+  --color-warning-0: #fffcfa;
+  --color-warning-primary: var(--color-warning-700);
+  --color-warning-secondary: var(--color-warning-800);
+  --color-warning-contrast: var(--color-white);
+
+  --color-negative-900: #30090d;
+  --color-negative-800: #60111b;
+  --color-negative-700: #911a28;
+  --color-negative-600: #c12236;
+  --color-negative-500: #f12b43;
+  --color-negative-400: #f45569;
+  --color-negative-300: #f7808e;
+  --color-negative-200: #f9aab4;
+  --color-negative-100: #fcd5d9;
+  --color-negative-50: #fef4f6;
+  --color-negative-0: #fff9f9;
+  --color-negative-primary: var(--color-negative-600);
+  --color-negative-secondary: var(--color-negative-700);
+  --color-negative-contrast: var(--color-white);
+
+  /* White label defaults */
+  --color-partner-900: var(--color-swan-900);
+  --color-partner-800: var(--color-swan-800);
+  --color-partner-700: var(--color-swan-700);
+  --color-partner-600: var(--color-swan-600);
+  --color-partner-500: var(--color-swan-500);
+  --color-partner-400: var(--color-swan-400);
+  --color-partner-300: var(--color-swan-300);
+  --color-partner-200: var(--color-swan-200);
+  --color-partner-100: var(--color-swan-100);
+  --color-partner-50: var(--color-swan-50);
+  --color-partner-0: var(--color-swan-0);
+  --color-partner-primary: var(--color-partner-500);
+  --color-partner-secondary: var(--color-partner-600);
+  --color-partner-contrast: var(--color-white);
+
+  --color-shakespear-900: #132126;
+  --color-shakespear-800: #26414b;
+  --color-shakespear-700: #3a6271;
+  --color-shakespear-600: #4d8296;
+  --color-shakespear-500: #60a3bc;
+  --color-shakespear-400: #80b5c9;
+  --color-shakespear-300: #a0c8d7;
+  --color-shakespear-200: #bfdae4;
+  --color-shakespear-100: #dfedf2;
+  --color-shakespear-50: #f7fafc;
+  --color-shakespear-0: #f7fafc;
+  --color-shakespear-primary: var(--color-shakespear-700);
+  --color-shakespear-secondary: var(--color-shakespear-800);
+  --color-shakespear-contrast: var(--color-white);
+
+  --color-sunglow-900: #332a08;
+  --color-sunglow-800: #665411;
+  --color-sunglow-700: #997f19;
+  --color-sunglow-600: #cca922;
+  --color-sunglow-500: #ffd32a;
+  --color-sunglow-400: #ffdc55;
+  --color-sunglow-300: #ffe57f;
+  --color-sunglow-200: #ffedaa;
+  --color-sunglow-100: #fff6d4;
+  --color-sunglow-50: #fffdf4;
+  --color-sunglow-0: #fffef9;
+  --color-sunglow-primary: var(--color-sunglow-800);
+  --color-sunglow-secondary: var(--color-sunglow-900);
+  --color-sunglow-contrast: var(--color-white);
+
+  /* Default */
+  --color-current-900: var(--color-partner-900);
+  --color-current-800: var(--color-partner-800);
+  --color-current-700: var(--color-partner-700);
+  --color-current-600: var(--color-partner-600);
+  --color-current-500: var(--color-partner-500);
+  --color-current-400: var(--color-partner-400);
+  --color-current-300: var(--color-partner-300);
+  --color-current-200: var(--color-partner-200);
+  --color-current-100: var(--color-partner-100);
+  --color-current-50: var(--color-partner-50);
+  --color-current-0: var(--color-partner-50);
+  --color-current-primary: var(--color-partner-primary);
+  --color-current-secondary: var(--color-partner-secondary);
+  --color-current-contrast: var(--color-partner-contrast);
+
+  --color-background-light: #fafafa;
+  --color-background-light-50-transparency: #fafafa80;
+  --color-background-light-75-transparency: #fafafabf;
+  --color-background-light-90-transparency: #fafafae5;
+  --color-background-light-transparent: #fafafa00;
+  --color-background-light-accented: #ffffff;
+  --color-background-light-accented-50-transparency: #ffffff80;
+  --color-background-light-accented-75-transparency: #ffffffbf;
+  --color-background-light-accented-90-transparency: #ffffffe5;
+  --color-background-light-accented-transparent: #ffffff00;
+
+  --color-background-dark: #26232f;
+  --color-background-dark-transparent: #26232f00;
+  --color-background-dark-50-transparency: #26232f80;
+  --color-background-dark-75-transparency: #26232fbf;
+  --color-background-dark-90-transparency: #26232fe5;
+  --color-background-dark-accented: #35313f;
+  --color-background-dark-accented-transparent: #35313f00;
+  --color-background-dark-accented-50-transparency: #35313f80;
+  --color-background-dark-accented-75-transparency: #35313fbf;
+  --color-background-dark-accented-90-transparency: #35313fe5;
+
+  --color-background-default: var(--color-background-light);
+  --color-background-default-transparent: var(--color-background-light-transparent);
+  --color-background-default-50-transparency: var(--color-background-light-50-transparency);
+  --color-background-default-75-transparency: var(--color-background-light-75-transparency);
+  --color-background-default-90-transparency: var(--color-background-light-90-transparency);
+  --color-background-default-accented: var(--color-background-light-accented);
+  --color-background-default-accented-transparent: var(
+    --color-background-light-accented-transparent
+  );
+  --color-background-default-accented-50-transparency: var(
+    --color-background-light-accented-50-transparency
+  );
+  --color-background-default-accented-75-transparency: var(
+    --color-background-light-accented-75-transparency
+  );
+  --color-background-default-accented-90-transparency: var(
+    --color-background-light-accented-90-transparency
+  );
+
+  --gradient-vertical: linear-gradient(180deg, #8166c4 0%, #f2cbb2 70%);
+  --gradient-oblique: linear-gradient(128deg, #8266c4 20%, #f2cbb2 90%);
+
+  --focus-ring-color: #0019fe;
+
+  --font-family-primary: Inter, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Helvetica,
+    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji,
+    sans-serif;
+  --font-family-card-font: "Inter Card", monospace;
+  --font-family-code: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+
+  --heading-color: var(--color-gray-900);
+  --heading-line-height: 1.25;
+
+  --heading-1-font-size: 32px;
+  --heading-1-font-weight: 400;
+  --heading-2-font-size: 32px;
+  --heading-2-font-weight: 300;
+  --heading-3-font-size: 20px;
+  --heading-3-font-weight: 600;
+  --heading-4-font-size: 20px;
+  --heading-4-font-weight: 400;
+  --heading-5-font-size: 15px;
+  --heading-5-font-weight: 500;
+  --heading-6-font-size: 15px;
+  --heading-6-font-weight: 400;
+
+  --text-color: var(--color-gray-500);
+  --text-line-height: 1.5;
+
+  --text-semibold-font-size: 15px;
+  --text-semibold-font-weight: 600;
+  --text-medium-font-size: 15px;
+  --text-medium-font-weight: 500;
+  --text-regular-font-size: 15px;
+  --text-regular-font-weight: 400;
+  --text-light-font-size: 15px;
+  --text-light-font-weight: 300;
+
+  --text-small-semibold-font-size: 14px;
+  --text-small-semibold-font-weight: 600;
+  --text-small-medium-font-size: 14px;
+  --text-small-medium-font-weight: 500;
+  --text-small-regular-font-size: 14px;
+  --text-small-regular-font-weight: 400;
+
+  --placeholder-color: var(--color-gray-400);
+  --placeholder-line-height: 1.5;
+
+  --placeholder-font-size: 15px;
+  --placeholder-font-weight: 400;
+
+  --placeholder-small-font-size: 14px;
+  --placeholder-small-font-weight: 400;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+[data-hide-scrollbar] {
+  scrollbar-width: none;
+}
+
+[data-hide-scrollbar]::-webkit-scrollbar {
+  display: none;
+}
+
+[data-force-scrollbar]::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  border-radius: 10px;
+  -webkit-appearance: none;
+}
+
+[data-force-scrollbar]::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+}
+
+[tabindex="-1"] {
+  outline: none;
+}
+
+::placeholder {
+  font-style: italic;
+}
+
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--color-gray-100);
+  cursor: pointer;
+  border-radius: 1px;
+  border-style: none;
+  height: 20px;
+  box-shadow: 0 0 0 2px var(--color-background-light-accented),
+    inset 0 0 0 9px var(--color-background-light-accented);
+  background-image: linear-gradient(var(--color-current-500), var(--color-current-500));
+  background-size: 0 100%;
+  background-repeat: no-repeat;
+  margin: 0 -10px;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  -webkit-appearance: none;
+  box-shadow: none;
+  border: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  box-shadow: inset 0 0 0 4px var(--color-current-500);
+  height: 20px;
+  width: 20px;
+  border-radius: 10px;
+  background: var(--color-background-light-accented);
+  cursor: pointer;
+  -webkit-appearance: none;
+}
+
+#app-root {
+  transition: 300ms ease-in-out transform, 300ms ease-in-out filter, 300ms ease-in-out opacity;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #app-root {
+    transform: none !important;
+  }
+}
+
+.BottomPanelOpen #app-root {
+  transform: scale(0.98);
+  filter: blur(4px);
+}
+
+.RightPanelOpen #app-root {
+  transform: scale(0.98);
+  filter: blur(4px);
+}
+
+.ModalOpen #app-root {
+  transform: scale(0.98);
+  filter: blur(4px);
+}

package/src/components/FilterChooser.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
 export declare function FilterChooser<FilterName extends string>({ filters, openFilters, label, title, availableFilters, large, onAddFilter, }: {
-    filters: Partial<{
-        [K in FilterName]: string | string[] | undefined;
-    }>;
+    filters: Partial<Record<FilterName, unknown>>;
     openFilters: FilterName[];
     label: string;
     title: string;

package/src/components/Filters.d.ts

@@ -36,12 +36,18 @@ export type FilterInputDef = {
     placeholder?: string;
     validate?: (value: string) => ValidatorResult;
 };
-type Filter<T> = FilterCheckboxDef<T> | FilterRadioDef<T> | FilterDateDef | FilterInputDef;
+export type FilterBooleanDef = {
+    type: "boolean";
+    label: string;
+};
+type Filter<T> = FilterCheckboxDef<T> | FilterRadioDef<T> | FilterDateDef | FilterInputDef | FilterBooleanDef;
 type ExtractFilterValue<T extends Filter<unknown>> = T extends {
     type: "checkbox";
 } ? T["items"][number]["value"][] | undefined : T extends {
     type: "radio";
-} ? T["items"][number]["value"] | undefined : string | undefined;
+} ? T["items"][number]["value"] | undefined : T extends {
+    type: "boolean";
+} ? boolean | undefined : string | undefined;
 type FiltersDefinition = Record<string, Filter<unknown>>;
 export type FiltersState<T extends FiltersDefinition> = Simplify<{
     [K in keyof T]: Simplify<ExtractFilterValue<T[K]>>;

package/src/components/Filters.js

@@ -224,6 +224,10 @@ export const FiltersStack = ({ filters, openedFilters, definition, onChangeOpene
                         onChangeFilters({ ...filters, [filterName]: undefined });
                         onChangeOpened(openedFilters.filter(f => f !== filterName));
                     } })))
+                    .with({ type: "boolean" }, ({ label }) => (_jsx(Tag, { color: "current", onPressRemove: () => {
+                        onChangeFilters({ ...filters, [filterName]: undefined });
+                        onChangeOpened(openedFilters.filter(f => f !== filterName));
+                    }, children: label })))
                     .exhaustive() }, filterName));
         }) }));
 };

package/src/components/InputError.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet, Text } from "react-native";
+import { Space } from "./Space";
 import { colors } from "../constants/colors";
 import { typography } from "../constants/typography";
-import { Space } from "./Space";
 const styles = StyleSheet.create({
     base: {
         ...typography.bodySmall,

package/src/components/LakeCombobox.d.ts

@@ -2,6 +2,7 @@ import { AsyncData, Result } from "@swan-io/boxed";
 import { ForwardedRef, ReactNode, RefObject } from "react";
 import { IconName } from "./Icon";
 export type LakeComboboxProps<I> = {
+    inputRef?: RefObject<unknown>;
     value: string;
     items: AsyncData<Result<I[], unknown>>;
     ListFooterComponent?: ReactNode;
@@ -21,7 +22,7 @@ export type LakeComboboxRef = {
     close: () => void;
     open: () => void;
 };
-declare const LakeComboboxWithRef: <I>({ 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, nativeID, 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

@@ -4,6 +4,7 @@ import { FlatList, Pressable, StyleSheet, Text, View, } from "react-native";
 import { backgroundColor, colors, spacings } from "../constants/design";
 import { typography } from "../constants/typography";
 import { useDisclosure } from "../hooks/useDisclosure";
+import { useMergeRefs } from "../hooks/useMergeRefs";
 import { getFocusableElements } from "../utils/a11y";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
@@ -80,8 +81,10 @@ const getItemLayout = (_data, index) => ({
     offset: ELEMENT_HEIGHT * index,
     index,
 });
-const LakeComboboxWithRef = ({ 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, nativeID, error, }, externalRef) => {
     const ref = useRef(null);
+    // @ts-expect-error
+    const inputTextRef = useMergeRefs(ref, inputRef);
     const listRef = useRef(null);
     const listContainerRef = useRef(null);
     const blurTimeoutId = useRef(undefined);
@@ -140,7 +143,11 @@ const LakeComboboxWithRef = ({ value, items, ListFooterComponent, onValueChange,
             close();
         }, 100);
     }, [close]);
-    return (_jsxs(View, { children: [_jsx(LakeTextInput, { ref: ref, 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
+            // @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({
                         NotAsked: () => null,
                         Loading: () => _jsx(LoadingView, { style: styles.loader }),
                         Done: items => items.match({
@@ -153,6 +160,7 @@ const LakeComboboxWithRef = ({ value, items, ListFooterComponent, onValueChange,
                                                     focused && styles.focusedItem,
                                                     pressed && styles.pressedItem,
                                                 ], onPress: () => {
+                                                    window.clearTimeout(blurTimeoutId.current);
                                                     setIsFetchingAdditionalInfo(true);
                                                     Promise.resolve(onSelectItem(item)).finally(() => {
                                                         setIsFetchingAdditionalInfo(false);

package/src/components/LakeLabel.d.ts

@@ -1,12 +1,13 @@
 import { ReactNode } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import { ColorVariants } from "../constants/design";
+type LabelType = "form" | "formSmall" | "view" | "viewSmall" | "radioGroup";
 type Props = {
     label: string;
     optionalLabel?: string;
     readOnlyColor?: string;
     color?: ColorVariants;
-    type?: "form" | "formSmall" | "view" | "viewSmall";
+    type?: LabelType;
     extra?: () => ReactNode;
     help?: ReactNode;
     render: (id: string) => ReactNode;
@@ -14,6 +15,6 @@ type Props = {
     readOnly?: boolean;
     style?: StyleProp<ViewStyle>;
 };
-export declare const defaultLabelType: NonNullable<Props["type"]>;
+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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useRef, useState } from "react";
 import { StyleSheet, unstable_createElement, View, } from "react-native";
+import { match } from "ts-pattern";
 import { v4 as uuid } from "uuid";
 import { commonStyles } from "../constants/commonStyles";
 import { colors, fonts, spacings, texts } from "../constants/design";
@@ -39,5 +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" ? (_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: type === "formSmall" || type === "viewSmall" ? 4 : 8 }), _jsx(View, { accessibilityLabelledBy: type === "view" || type === "viewSmall" ? id : undefined, children: render(id) })] }), isNotNullish(actions) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), actions] }))] }));
+    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)
+                            .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] }))] }));
 };

package/src/components/LakeModal.js

@@ -128,5 +128,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].primary })) : 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, icon != null && title != null ? _jsx(Space, { height: 8 }) : 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, { 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 }) })] }) }));
 };

package/src/components/LakeStepper.js

@@ -13,6 +13,9 @@ const linkStyle = {
     textDecoration: "none",
 };
 const styles = StyleSheet.create({
+    container: {
+        alignItems: "flex-end",
+    },
     bar: {
         width: "100%",
         height: 4,
@@ -70,7 +73,7 @@ export const LakeStepper = ({ steps, activeStepId, style }) => {
         .exhaustive())
         .flat();
     const activeStepIndex = stepIds.indexOf(activeStepId);
-    return (_jsx(Grid, { numColumns: steps.length, horizontalSpace: 12, style: style, children: steps.map((step, index) => {
+    return (_jsx(Grid, { numColumns: steps.length, horizontalSpace: 12, style: [styles.container, style], children: steps.map((step, index) => {
             const stepNumber = index + 1;
             const currentId = match(step)
                 .with({ id: P.string }, ({ id }) => id)

package/src/components/LakeTextInput.d.ts

@@ -5,6 +5,7 @@ import { IconName } from "./Icon";
 export type LakeTextInputProps = Omit<TextInputProps, "editable" | "onChange"> & {
     error?: string;
     readOnly?: boolean;
+    validating?: boolean;
     valid?: boolean;
     disabled?: boolean;
     color?: ColorVariants;
@@ -21,6 +22,7 @@ export type LakeTextInputProps = Omit<TextInputProps, "editable" | "onChange"> &
 export declare const LakeTextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "editable" | "onChange"> & {
     error?: string | undefined;
     readOnly?: boolean | undefined;
+    validating?: boolean | undefined;
     valid?: boolean | undefined;
     disabled?: boolean | undefined;
     color?: "warning" | "current" | "gray" | "live" | "sandbox" | "positive" | "negative" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined;