@swan-io/lake 1.0.0

package/src/components/Heading.d.ts

@@ -0,0 +1,61 @@
+import { ReactNode } from "react";
+import { Text, TextProps } from "react-native";
+import { Except } from "type-fest";
+declare const sizes: {
+    40: {
+        fontSize: number;
+        color: string;
+        fontWeight: "600";
+        lineHeight: number;
+        fontFamily: string;
+        letterSpacing: number;
+    };
+    32: {
+        fontSize: number;
+        color: string;
+        fontWeight: "600";
+        lineHeight: number;
+        fontFamily: string;
+        letterSpacing: number;
+    };
+    28: {
+        fontSize: number;
+        color: string;
+        fontWeight: "600";
+        lineHeight: number;
+        fontFamily: string;
+        letterSpacing: number;
+    };
+    24: {
+        fontSize: number;
+        color: string;
+        fontWeight: "600";
+        lineHeight: number;
+        fontFamily: string;
+        letterSpacing: number;
+    };
+    20: {
+        fontSize: number;
+        color: string;
+        fontWeight: "600";
+        lineHeight: number;
+        fontFamily: string;
+        letterSpacing: number;
+    };
+    16: {
+        fontSize: number;
+        color: string;
+        fontWeight: "600";
+        lineHeight: number;
+        fontFamily: string;
+        letterSpacing: number;
+    };
+};
+type HeadingSize = keyof typeof sizes;
+export declare const Heading: import("react").ForwardRefExoticComponent<Except<TextProps, "accessibilityRole"> & {
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    align?: "center" | "left" | "right" | undefined;
+    size: HeadingSize;
+    children: ReactNode;
+} & import("react").RefAttributes<Text>>;
+export {};

package/src/components/Heading.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { StyleSheet, Text } from "react-native";
+import { colors } from "../constants/colors";
+import { typography } from "../constants/typography";
+const baseStyle = {
+    ...typography.interFont,
+    color: colors.gray[100],
+    fontWeight: typography.fontWeights.demi,
+    lineHeight: typography.lineHeights.title,
+};
+/* eslint-disable react-native/no-unused-styles */
+const alignments = StyleSheet.create({
+    center: { textAlign: "center" },
+    left: { textAlign: "left" },
+    right: { textAlign: "right" },
+});
+const sizes = StyleSheet.create({
+    40: { ...baseStyle, fontSize: 40 },
+    32: { ...baseStyle, fontSize: 32 },
+    28: { ...baseStyle, fontSize: 28 },
+    24: { ...baseStyle, fontSize: 24 },
+    20: { ...baseStyle, fontSize: 20 },
+    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 })));

package/src/components/Icon.d.ts

@@ -0,0 +1,191 @@
+/// <reference types="react" />
+import { AccessibilityProps, StyleProp, ViewProps, ViewStyle } from "react-native";
+declare const paths: {
+    "lake-calendar-arrow-swap": string;
+    "lake-card": string;
+    "lake-card-one-off": string;
+    "lake-card-physical": string;
+    "lake-card-recurring": string;
+    "lake-card-single-use": string;
+    "lake-card-virtual": string;
+    "lake-chevron-double": string;
+    "lake-clipboard-bullet": string;
+    "lake-clock": string;
+    "lake-clock-arrow-swap": string;
+    "lake-close": string;
+    "lake-currencies": string;
+    "lake-delivery-grouped": string;
+    "lake-delivery-individual": string;
+    "lake-document-csv": string;
+    "lake-document-jpg": string;
+    "lake-document-pdf": string;
+    "lake-document-png": string;
+    "lake-document-xls": string;
+    "lake-email": string;
+    "lake-id-card": string;
+    "lake-inbox-empty": string;
+    "lake-menu": string;
+    "lake-people": string;
+    "lake-person-arrow-swap": string;
+    "lake-phone": string;
+    "lake-receipt": string;
+    "lake-settings": string;
+    "lake-signature": string;
+    "lake-transfer": string;
+    "lake-world-map": string;
+    "add-circle-filled": string;
+    "add-circle-regular": string;
+    "add-filled": string;
+    "approvals-app-filled": string;
+    "apps-list-filled": string;
+    "apps-list-regular": string;
+    "arrow-counterclockwise-filled": string;
+    "arrow-down-filled": string;
+    "arrow-down-regular": string;
+    "arrow-download-filled": string;
+    "arrow-left-filled": string;
+    "arrow-left-regular": string;
+    "arrow-right-filled": string;
+    "arrow-right-regular": string;
+    "arrow-swap-filled": string;
+    "arrow-swap-regular": string;
+    "arrow-up-filled": string;
+    "arrow-up-regular": string;
+    "beaker-filled": string;
+    "beaker-regular": string;
+    "board-regular": string;
+    "box-regular": string;
+    "building-bank-filled": string;
+    "building-bank-regular": string;
+    "building-filled": string;
+    "building-multiple-regular": string;
+    "building-regular": string;
+    "building-shop-regular": string;
+    "calendar-ltr-regular": string;
+    "cart-regular": string;
+    "chat-help-filled": string;
+    "chat-help-regular": string;
+    "checkmark-circle-regular": string;
+    "checkmark-filled": string;
+    "chevron-down-filled": string;
+    "chevron-left-filled": string;
+    "chevron-right-filled": string;
+    "chevron-up-down-regular": string;
+    "chevron-up-filled": string;
+    "clipboard-search-regular": string;
+    "clock-filled": string;
+    "clock-regular": string;
+    "cloud-sync-filled": string;
+    "cloud-sync-regular": string;
+    "code-filled": string;
+    "code-regular": string;
+    "color-regular": string;
+    "comment-note-regular": string;
+    "copy-filled": string;
+    "copy-regular": string;
+    "cursor-click-regular": string;
+    "database-filled": string;
+    "database-regular": string;
+    "delete-filled": string;
+    "delete-regular": string;
+    "desktop-regular": string;
+    "device-meeting-room-regular": string;
+    "dismiss-circle-regular": string;
+    "dismiss-filled": string;
+    "dismiss-regular": string;
+    "document-regular": string;
+    "earth-regular": string;
+    "edit-filled": string;
+    "edit-regular": string;
+    "error-circle-filled": string;
+    "error-circle-regular": string;
+    "eye-filled": string;
+    "eye-off-filled": string;
+    "eye-regular": string;
+    "filter-filled": string;
+    "flag-filled": string;
+    "flag-regular": string;
+    "flash-filled": string;
+    "flash-regular": string;
+    "form-new-filled": string;
+    "form-new-regular": string;
+    "hand-right-regular": string;
+    "image-add-filled": string;
+    "image-add-regular": string;
+    "image-filled": string;
+    "image-regular": string;
+    "info-filled": string;
+    "info-regular": string;
+    "key-regular": string;
+    "link-filled": string;
+    "live-filled": string;
+    "live-regular": string;
+    "lock-closed-filled": string;
+    "lock-closed-regular": string;
+    "lock-open-filled": string;
+    "lock-open-regular": string;
+    "mail-filled": string;
+    "mail-regular": string;
+    "money-regular": string;
+    "more-vertical-filled": string;
+    "open-filled": string;
+    "open-regular": string;
+    "options-regular": string;
+    "paint-brush-filled": string;
+    "paint-brush-regular": string;
+    "pause-regular": string;
+    "payment-filled": string;
+    "payment-regular": string;
+    "people-add-regular": string;
+    "people-community-filled": string;
+    "people-community-regular": string;
+    "people-filled": string;
+    "people-regular": string;
+    "people-team-regular": string;
+    "person-accounts-filled": string;
+    "person-accounts-regular": string;
+    "person-add-regular": string;
+    "person-call-filled": string;
+    "person-call-regular": string;
+    "person-filled": string;
+    "person-lock-regular": string;
+    "person-regular": string;
+    "phone-filled": string;
+    "phone-regular": string;
+    "pin-regular": string;
+    "play-filled": string;
+    "play-regular": string;
+    "preview-link-filled": string;
+    "question-circle-regular": string;
+    "rocket-regular": string;
+    "search-filled": string;
+    "send-filled": string;
+    "send-regular": string;
+    "settings-filled": string;
+    "settings-regular": string;
+    "shield-checkmark-filled": string;
+    "shield-checkmark-regular": string;
+    "shield-error-regular": string;
+    "shield-regular": string;
+    "sign-out-regular": string;
+    "signature-filled": string;
+    "signature-regular": string;
+    "subtract-circle-filled": string;
+    "subtract-circle-regular": string;
+    "target-arrow-regular": string;
+    "warning-filled": string;
+    "warning-regular": string;
+    "window-dev-tools-filled": string;
+    "window-dev-tools-regular": string;
+};
+export type IconName = keyof typeof paths;
+type Props = AccessibilityProps & {
+    color?: string;
+    focusable?: boolean;
+    name: IconName;
+    pointerEvents?: ViewProps["pointerEvents"];
+    size: number;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const Icon: import("react").NamedExoticComponent<Props>;
+export {};

package/src/components/Icon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Path, Svg } from "./Svg";
+import customIcons from "../icons/custom-icons.json";
+import fluentIcons from "../icons/fluent-icons.json";
+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 }) })));
+Icon.displayName = "Icon";

package/src/components/Input.d.ts

@@ -0,0 +1,34 @@
+import { ChangeEventHandler, ReactNode } from "react";
+import { KeyboardTypeOptions, NativeSyntheticEvent, ReturnKeyTypeOptions, StyleProp, TextInput, TextInputProps, TextStyle, ViewStyle, WebAccessibilityRole } from "react-native";
+import { IconName } from "./Icon";
+type Props = {
+    accessibilityControls?: string;
+    accessibilityExpanded?: boolean;
+    disabled?: boolean;
+    error?: string;
+    icon?: IconName;
+    inputContainerStyle?: StyleProp<ViewStyle>;
+    role?: WebAccessibilityRole;
+    keyboardType?: KeyboardTypeOptions;
+    returnKeyType?: ReturnKeyTypeOptions;
+    maxLength?: number;
+    label?: string;
+    onFocus?: (event: NativeSyntheticEvent<React.FocusEvent>) => void;
+    onBlur?: (event: NativeSyntheticEvent<React.FocusEvent>) => void;
+    onSubmitEditing?: TextInputProps["onSubmitEditing"];
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onValueChange?: TextInputProps["onChangeText"];
+    onKeyPress?: TextInputProps["onKeyPress"];
+    placeholder?: string;
+    readOnly?: boolean;
+    size?: "large" | "small";
+    successful?: boolean;
+    suffix?: string;
+    value?: string;
+    style?: StyleProp<ViewStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+    RightComponent?: ReactNode;
+    hideErrorMessage?: boolean;
+};
+export declare const Input: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<TextInput>>>;
+export {};

package/src/components/Input.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 { typography } from "../constants/typography";
+import { useMergeRefs } from "../hooks/useMergeRefs";
+import { isNotNullish } from "../utils/nullish";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { InputError } from "./InputError";
+import { Label } from "./Label";
+import { PressableTextInput } from "./Pressable";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    base: {
+        ...typography.bodyLarge,
+        lineHeight: typography.bodyLarge.fontSize,
+        backgroundColor: colors.white,
+        borderColor: colors.gray[10],
+        borderRadius: 4,
+        borderWidth: 1,
+        flexGrow: 1,
+        flexShrink: 1,
+        height: 48,
+        maxWidth: "100%",
+        outlineStyle: "none",
+        paddingHorizontal: 16,
+        placeholderTextColor: colors.gray[30],
+        textOverflow: "ellipsis",
+        transitionDuration: "150ms",
+        transitionProperty: ["border-color", "box-shadow"],
+        whiteSpace: "nowrap",
+        wordBreak: "keep-all",
+    },
+    small: {
+        height: 40,
+    },
+    focused: {
+        borderColor: colors.gray[20],
+        shadowColor: colors.gray[100],
+        shadowOpacity: 0.12,
+        shadowOffset: { height: 0, width: 0 },
+        shadowRadius: 2,
+    },
+    disabled: {
+        backgroundColor: colors.gray[3],
+        borderColor: colors.gray[3],
+        cursor: "not-allowed",
+    },
+    hovered: {
+        shadowColor: colors.gray[100],
+        shadowOpacity: 0.06,
+        shadowOffset: { height: 4, width: 0 },
+        shadowRadius: 8,
+    },
+    leftIcon: {
+        position: "absolute",
+        left: 16,
+    },
+    withLeftIcon: {
+        paddingLeft: 48,
+    },
+    withSuffix: {
+        borderBottomRightRadius: 0,
+        borderTopRightRadius: 0,
+    },
+    rightIcon: {
+        position: "absolute",
+        right: 16,
+    },
+    errored: {
+        borderColor: colors.red[100],
+        paddingRight: 48,
+    },
+    successful: {
+        borderColor: colors.green[100],
+        paddingRight: 48,
+    },
+    suffix: {
+        alignItems: "center",
+        backgroundColor: colors.gray[3],
+        borderBottomRightRadius: 4,
+        borderTopRightRadius: 4,
+        borderColor: colors.gray[10],
+        borderLeftWidth: 0,
+        borderWidth: 1,
+        justifyContent: "center",
+        paddingHorizontal: 16,
+    },
+    suffixDisabled: {
+        borderWidth: 0,
+    },
+    suffixText: {
+        ...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) => {
+    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 }) => [
+                                    styles.base,
+                                    size === "small" && styles.small,
+                                    isNotNullish(icon) && styles.withLeftIcon,
+                                    suffix !== "" && styles.withSuffix,
+                                    disabled ? styles.disabled : focused ? styles.focused : hovered && styles.hovered,
+                                    errored && styles.errored,
+                                    successful && styles.successful,
+                                    inputStyle,
+                                ] }), icon && (_jsx(Icon, { name: icon, color: colors.gray[50], size: 20, style: styles.leftIcon })), successful ? (_jsx(Icon, { name: "checkmark-filled", color: colors.green[100], size: 20, style: styles.rightIcon })) : errored ? (_jsx(Icon, { name: "error-circle-regular", size: 20, color: colors.red[100], style: styles.rightIcon })) : null] }), suffix !== "" && (_jsx(View, { style: [styles.suffix, disabled && styles.suffixDisabled], children: _jsx(Text, { numberOfLines: 1, style: styles.suffixText, children: suffix }) })), Boolean(RightComponent) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), RightComponent] }))] }), !hideErrorMessage && _jsx(InputError, { message: error })] }));
+}));
+Input.displayName = "Input";

package/src/components/InputError.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { StyleProp, TextStyle } from "react-native";
+type Props = {
+    message?: string;
+    style?: StyleProp<TextStyle>;
+};
+export declare const InputError: ({ message, style }: Props) => JSX.Element;
+export {};

package/src/components/InputError.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, Text } from "react-native";
+import { colors } from "../constants/colors";
+import { typography } from "../constants/typography";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    base: {
+        ...typography.bodySmall,
+        color: colors.red[100],
+        lineHeight: typography.lineHeights.input,
+        minHeight: 32,
+        paddingHorizontal: 3,
+        paddingVertical: 4,
+    },
+});
+export const InputError = ({ message = "", style }) => message !== "" ? _jsx(Text, { style: [styles.base, style], children: message }) : _jsx(Space, { height: 32 });

package/src/components/Label.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { TextProps } from "react-native";
+import { Except } from "type-fest";
+type Props = Except<TextProps, "accessibilityRole"> & {
+    children?: ReactNode;
+    htmlFor?: string;
+    id?: string;
+};
+export declare const Label: ({ htmlFor, id, style, ...props }: Props) => JSX.Element;
+export {};

package/src/components/Label.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { StyleSheet, Text } from "react-native";
+import { colors } from "../constants/colors";
+import { typography } from "../constants/typography";
+import { useNativeProp } from "../hooks/useNativeProp";
+const styles = StyleSheet.create({
+    base: {
+        ...typography.bodyLarge,
+        color: colors.gray[60],
+        lineHeight: typography.lineHeights.title,
+        paddingHorizontal: 3, // borderRadius / 2
+    },
+});
+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 }));
+};

package/src/components/LakeAlert.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+type AlertVariant = "info" | "warning" | "error" | "success";
+type Props = {
+    anchored?: boolean;
+    variant: AlertVariant;
+    children?: ReactNode;
+    callToAction?: ReactNode;
+    title: ReactNode;
+    subtitle?: string;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const LakeAlert: ({ anchored, variant, title, subtitle, children, style, callToAction, }: Props) => JSX.Element;
+export {};

package/src/components/LakeAlert.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, View } from "react-native";
+import { commonStyles } from "../constants/commonStyles";
+import { colors, shadows } from "../constants/design";
+import { isNotNullish, isNotNullishOrEmpty } from "../utils/nullish";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { LakeText } from "./LakeText";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    base: {
+        paddingVertical: 20,
+        paddingHorizontal: 24,
+        borderRadius: 4,
+        borderWidth: 0.5,
+        borderLeftWidth: 4,
+        boxShadow: shadows.tile,
+    },
+    anchored: {
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+        borderLeftWidth: 0.5,
+        marginHorizontal: -1,
+        marginBottom: -1,
+    },
+    content: {
+        marginLeft: 40,
+    },
+    callToAction: {
+        marginTop: -12,
+        marginBottom: -12,
+        marginRight: -12,
+        flexShrink: 0,
+    },
+});
+const alertIcon = {
+    info: "info-regular",
+    warning: "warning-regular",
+    error: "dismiss-circle-regular",
+    success: "checkmark-circle-regular",
+};
+const alertColor = {
+    info: colors.shakespear[700],
+    warning: colors.warning[700],
+    error: colors.negative[700],
+    success: colors.positive[700],
+};
+const alertBackground = {
+    info: colors.shakespear[0],
+    warning: colors.warning[0],
+    error: colors.negative[0],
+    success: colors.positive[0],
+};
+const alertBorder = {
+    info: colors.shakespear[200],
+    warning: colors.warning[200],
+    error: colors.negative[200],
+    success: colors.positive[200],
+};
+const alertLeftBorder = {
+    info: colors.shakespear[500],
+    warning: colors.warning[500],
+    error: colors.negative[500],
+    success: colors.positive[500],
+};
+const isText = (node) => typeof node === "string" || typeof node === "number";
+export const LakeAlert = ({ anchored = false, variant, title, subtitle, children, style, callToAction, }) => {
+    const color = alertColor[variant];
+    return (_jsxs(View, { style: [
+            styles.base,
+            { backgroundColor: alertBackground[variant], borderColor: alertBorder[variant] },
+            anchored ? styles.anchored : { borderLeftColor: alertLeftBorder[variant] },
+            style,
+        ], children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(Icon, { name: alertIcon[variant], color: color, size: 20 }), _jsx(Space, { width: 20 }), _jsxs(View, { style: commonStyles.fill, children: [_jsx(LakeText, { color: color, children: title }), isNotNullishOrEmpty(subtitle) && _jsx(LakeText, { color: color, children: subtitle })] }), isNotNullish(callToAction) && _jsx(View, { style: styles.callToAction, children: callToAction })] }), isNotNullish(children) && (_jsxs(View, { style: styles.content, children: [_jsx(Space, { height: 12 }), isText(children) ? _jsx(LakeText, { children: children }) : children] }))] }));
+};

package/src/components/LakeButton.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+import { GestureResponderEvent, PressableStateCallbackType, StyleProp, View, ViewStyle } from "react-native";
+import { ColorVariants, Spacings } from "../constants/design";
+import { IconName } from "./Icon";
+export type ButtonProps = {
+    accessibilityControls?: string;
+    accessibilityExpanded?: boolean;
+    accessibilityLabel?: string;
+    children?: ReactNode;
+    color?: ColorVariants;
+    disabled?: boolean;
+    loading?: boolean;
+    grow?: boolean;
+    icon?: IconName;
+    iconPosition?: "start" | "end";
+    mode?: "primary" | "secondary" | "tertiary";
+    onPress?: (event: GestureResponderEvent) => void;
+    size?: "large" | "small";
+    style?: StyleProp<ViewStyle> | ((props: PressableStateCallbackType) => StyleProp<ViewStyle>);
+    forceBackground?: boolean;
+    href?: string;
+    hrefAttrs?: {
+        download?: boolean;
+        rel?: string;
+        target?: string;
+    };
+    pill?: boolean;
+};
+export declare const LakeButton: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<View>>>;
+type GroupProps = {
+    children: ReactNode;
+    justifyContent?: ViewStyle["justifyContent"];
+    paddingBottom?: 0 | Spacings;
+};
+export declare const LakeButtonGroup: ({ children, justifyContent, paddingBottom, }: GroupProps) => JSX.Element;
+export {};