@utilitywarehouse/hearth-react-native 0.1.0

package/build/components/Input/Input.js

@@ -0,0 +1,81 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { createInput } from '@gluestack-ui/input';
+import InputRoot from './InputRoot';
+import InputSlotComponent from './InputSlot';
+import InputIconComponent from './InputIcon';
+import InputFieldComponent from './InputField';
+import { useFormFieldContext } from '../FormField';
+import { CalendarMediumIcon, CloseSmallIcon, EyeSmallIcon, EyeOffSmallIcon, SearchMediumIcon, } from '@utilitywarehouse/hearth-react-native-icons';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import { Spinner } from '../Spinner';
+import { useTheme } from '../../hooks';
+import { DetailText } from '../DetailText';
+import { Platform } from 'react-native';
+export const InputComponent = createInput({
+    Icon: InputIconComponent,
+    Slot: InputSlotComponent,
+    Root: InputRoot,
+    Input: InputFieldComponent,
+});
+export const InputSlot = InputComponent.Slot;
+export const InputField = InputComponent.Input;
+export const InputIcon = InputComponent.Icon;
+const Input = ({ validationStatus = 'initial', children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle = true, onClear, format, loading, clearable = false, required, ...props }) => {
+    const formFieldContext = useFormFieldContext();
+    const { disabled: formFieldDisabled } = formFieldContext;
+    const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
+    const isRequired = formFieldContext?.required ?? required;
+    const [fieldType, setFieldType] = useState(type === 'password' ? 'password' : 'text');
+    const { components } = useTheme();
+    const defaultFornat = (() => {
+        if (type === 'currency') {
+            return '0.00';
+        }
+        if (type === 'date') {
+            return 'DD/MM/YYYY';
+        }
+        return;
+    })();
+    const getPlaceholder = (() => {
+        if (type === 'currency') {
+            return props.placeholder ?? format ?? defaultFornat;
+        }
+        if (type === 'date') {
+            return props.placeholder ?? format ?? defaultFornat;
+        }
+        return props.placeholder;
+    })();
+    const shouldShowPasswordToggle = type === 'password' && showPasswordToggle;
+    const shouldShowClear = clearable && !!props?.value;
+    const toggleFieldType = () => {
+        setFieldType(fieldType === 'password' ? 'text' : 'password');
+    };
+    const leadingIconComponent = (() => {
+        if (type === 'search') {
+            return SearchMediumIcon;
+        }
+        return leadingIcon;
+    })();
+    const trailingIconComponent = (() => {
+        if (type === 'date') {
+            return CalendarMediumIcon;
+        }
+        return trailingIcon;
+    })();
+    const getInputMode = (() => {
+        if (type === 'currency') {
+            return 'decimal';
+        }
+        if (type === 'search') {
+            return 'search';
+        }
+        return undefined;
+    })();
+    return (_jsx(InputComponent, { ...(children ? props : {}), validationStatus: validationStatusFromContext, isInvalid: validationStatusFromContext === 'invalid', isReadOnly: readonly, isDisabled: formFieldDisabled ?? disabled, isFocused: focused, type: type, isRequired: isRequired, children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [!!leadingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: leadingIconComponent }) })), type === 'currency' && (_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: {
+                            // todo: fix this
+                            ...(Platform.OS === 'ios' && { lineHeight: 46 }),
+                        }, children: "\u00A3" }) })), _jsx(InputField, { type: fieldType, inputMode: getInputMode, ...props, placeholder: getPlaceholder }), shouldShowClear && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: onClear, icon: CloseSmallIcon }) })), loading && (_jsx(InputSlot, { children: _jsx(Spinner, { size: "xs", color: components.icon.color }) })), shouldShowPasswordToggle && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: toggleFieldType, icon: fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon }) })), !!trailingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: trailingIconComponent }) }))] })) }));
+};
+Input.displayName = 'Input';
+export default Input;

package/build/components/Input/Input.props.d.ts

@@ -0,0 +1,100 @@
+import type { ComponentType } from 'react';
+import type { TextInputProps, ViewProps } from 'react-native';
+export interface InputBaseProps {
+    /**
+     * If true, the input will be disabled.
+     *
+     * @type boolean
+     * @example
+     * ```tsx
+     * <Input disabled={true} />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * The validation status of the Input component.
+     *
+     * @type 'initial' | 'valid' | 'invalid'
+     * @example
+     * ```tsx
+     * <Input validationStatus="valid" />
+     * ```
+     */
+    validationStatus?: 'initial' | 'valid' | 'invalid';
+    readonly?: boolean;
+    focused?: boolean;
+    placeholder?: string;
+}
+export interface InputWithChildrenProps extends InputBaseProps, ViewProps {
+    children: ViewProps['children'];
+    type?: undefined;
+    showPasswordToggle?: never;
+    format?: never;
+    loading?: never;
+    clearable?: never;
+    onClear?: never;
+    leadingIcon?: never;
+    trailingIcon?: never;
+    required?: never;
+}
+interface InputWithoutChildrenBaseProps extends InputBaseProps, Omit<TextInputProps, 'children'> {
+    children?: never;
+    leadingIcon?: ComponentType;
+    trailingIcon?: ComponentType;
+    required?: boolean;
+}
+interface TextInputSpecificProps extends InputWithoutChildrenBaseProps {
+    type?: 'text';
+    showPasswordToggle?: never;
+    format?: never;
+    loading?: never;
+    clearable?: never;
+    onClear?: never;
+}
+interface PasswordInputSpecificProps extends InputWithoutChildrenBaseProps {
+    type: 'password';
+    showPasswordToggle?: boolean;
+    format?: never;
+    loading?: never;
+    clearable?: never;
+    onClear?: never;
+}
+interface DateInputSpecificProps extends InputWithoutChildrenBaseProps {
+    type: 'date';
+    format?: string;
+    showPasswordToggle?: never;
+    loading?: never;
+    clearable?: never;
+    onClear?: never;
+}
+interface CurrencyInputSpecificProps extends InputWithoutChildrenBaseProps {
+    type: 'currency';
+    format?: string;
+    showPasswordToggle?: never;
+    loading?: never;
+    clearable?: never;
+    onClear?: never;
+}
+interface SearchInputSpecificProps extends InputWithoutChildrenBaseProps {
+    type: 'search';
+    loading?: boolean;
+    clearable?: boolean;
+    onClear?: () => void;
+    showPasswordToggle?: never;
+    format?: never;
+}
+export type InputWithoutChildrenProps = TextInputSpecificProps | PasswordInputSpecificProps | DateInputSpecificProps | CurrencyInputSpecificProps | SearchInputSpecificProps;
+/**
+ * Props for the Input component.
+ * This is a discriminated union type where the 'type' property
+ * determines which specific props are available.
+ */
+type InputProps = InputWithChildrenProps | InputWithoutChildrenProps;
+export type InputContextValue = {
+    disabled?: InputProps['disabled'];
+    focused?: InputProps['focused'];
+    readonly?: InputProps['readonly'];
+    validationStatus?: InputProps['validationStatus'];
+    type?: InputProps['type'];
+};
+export default InputProps;

package/build/components/Input/Input.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/Input/InputField.d.ts

@@ -0,0 +1,6 @@
+import { TextInputProps } from 'react-native';
+declare const InputField: {
+    ({ style, onFocus, onBlur, ...props }: TextInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default InputField;

package/build/components/Input/InputField.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useBottomSheetInternal } from '@gorhom/bottom-sheet';
+import { useCallback, useEffect } from 'react';
+import { TextInput as RNTextInput, } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { useInputContext } from './Input.context';
+const InputField = ({ style, onFocus, onBlur, ...props }) => {
+    const { disabled, focused = false, type } = useInputContext();
+    styles.useVariants({ focused, type });
+    const { components, color } = useTheme();
+    // Copied from @gorhom/bottom-sheet BottomSheetTextInput
+    const bottomSheetContext = useBottomSheetInternal(true);
+    const handleOnFocus = useCallback((args) => {
+        if (bottomSheetContext) {
+            bottomSheetContext.shouldHandleKeyboardEvents.value = true;
+        }
+        if (onFocus) {
+            onFocus(args);
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onFocus, bottomSheetContext?.shouldHandleKeyboardEvents]);
+    const handleOnBlur = useCallback((args) => {
+        if (bottomSheetContext) {
+            bottomSheetContext.shouldHandleKeyboardEvents.value = false;
+        }
+        if (onBlur) {
+            onBlur(args);
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onBlur, bottomSheetContext?.shouldHandleKeyboardEvents]);
+    useEffect(() => {
+        return () => {
+            // Reset the flag on unmount
+            if (bottomSheetContext) {
+                bottomSheetContext.shouldHandleKeyboardEvents.value = false;
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [bottomSheetContext?.shouldHandleKeyboardEvents]);
+    // End of copied code
+    return (_jsx(RNTextInput, { placeholderTextColor: components.input.placeholderColor, selectionColor: color.purple[700], cursorColor: color.purple[700], verticalAlign: "middle", "aria-disabled": disabled, onFocus: handleOnFocus, onBlur: handleOnBlur, ...props, style: [styles.input, style] }));
+};
+InputField.displayName = 'InputField';
+const styles = StyleSheet.create(theme => ({
+    input: {
+        flex: 1,
+        alignSelf: 'stretch',
+        width: 'auto',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: theme.components.text.color,
+        fontSize: theme.typography.mobile.bodyText.md.fontSize,
+        fontFamily: theme.typography.mobile.bodyText.fontFamily,
+        fontWeight: theme.typography.mobile.bodyText.fontWeight,
+        borderWidth: 0,
+        variants: {
+            focused: {
+                true: {},
+            },
+            type: {
+                text: {},
+                password: {},
+                search: {},
+                currency: {
+                    fontSize: theme.typography.mobile.detailText['4xl'].fontSize,
+                    fontFamily: theme.typography.mobile.detailText.fontFamily,
+                    fontWeight: theme.typography.mobile.detailText.fontWeight,
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                },
+                date: {},
+            },
+        },
+        _web: {
+            width: '100%',
+        },
+    },
+}));
+export default InputField;

package/build/components/Input/InputIcon.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType } from 'react';
+import { IconProps } from '../Icon';
+declare const InputIcon: {
+    ({ children, ...props }: IconProps & {
+        as?: ComponentType;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default InputIcon;

package/build/components/Input/InputIcon.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../Icon';
+const InputIcon = ({ children, ...props }) => {
+    return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
+            ? StyleSheet.compose(styles.icon, props.style)
+            : [styles.icon, props.style], children: children }));
+};
+InputIcon.displayName = 'InputIcon';
+const styles = StyleSheet.create(theme => ({
+    icon: {
+        color: theme.components.icon.color,
+    },
+}));
+export default InputIcon;

package/build/components/Input/InputRoot.d.ts

@@ -0,0 +1,12 @@
+import InputProps from './Input.props';
+declare const InputRoot: {
+    ({ children, style, states, validationStatus, type, ...props }: InputProps & {
+        states?: {
+            focus?: boolean;
+            disabled?: boolean;
+            readonly?: boolean;
+        };
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default InputRoot;

package/build/components/Input/InputRoot.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native-unistyles';
+import { View } from 'react-native';
+import { InputContext } from './Input.context';
+const InputRoot = ({ children, style, states, validationStatus, type, ...props }) => {
+    const { focus = false, disabled = false, readonly = false } = states || {};
+    styles.useVariants({ validationStatus, focus, disabled, readonly, type });
+    const value = useMemo(() => ({ focused: focus, disabled, readonly, validationStatus, type }), [focus, disabled, readonly, validationStatus, type]);
+    return (_jsx(InputContext.Provider, { value: value, children: _jsx(View, { ...props, style: [styles.container, style], children: children }) }));
+};
+InputRoot.displayName = 'InputRoot';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        borderColor: theme.components.input.borderColor,
+        height: theme.components.input.height,
+        borderRadius: theme.components.input.borderRadius,
+        flexDirection: 'row',
+        overflow: 'hidden',
+        alignContent: 'center',
+        paddingHorizontal: theme.components.input.paddingHorizontal,
+        backgroundColor: theme.components.input.backgroundColor,
+        gap: theme.components.input.gap,
+        outlineStyle: 'solid',
+        outlineWidth: theme.components.input.borderWidth,
+        outlineColor: theme.components.input.borderColor,
+        variants: {
+            focus: {
+                true: {
+                    outlineWidth: theme.components.input.borderWidthFocused,
+                },
+            },
+            validationStatus: {
+                invalid: {
+                    borderColor: theme.components.input.borderColorInvalid,
+                    outlineColor: theme.components.input.borderColorInvalid,
+                },
+                valid: {
+                    borderColor: theme.components.input.borderColorValid,
+                    outlineColor: theme.components.input.borderColorValid,
+                },
+                initial: {},
+            },
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+            readonly: {
+                true: {
+                    borderColor: theme.components.input.borderColorReadOnly,
+                },
+            },
+            type: {
+                text: {},
+                password: {},
+                search: {},
+                currency: {
+                    height: theme.components.input.currency.height,
+                    gap: theme.components.input.currency.gap,
+                },
+                date: {},
+            },
+        },
+    },
+}));
+export default InputRoot;

package/build/components/Input/InputSlot.d.ts

@@ -0,0 +1,6 @@
+import { ViewProps } from 'react-native';
+declare const InputSlot: {
+    ({ children, style, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default InputSlot;

package/build/components/Input/InputSlot.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
+import { View } from 'react-native';
+const InputSlot = ({ children, style, ...props }) => {
+    return (_jsx(View, { ...props, style: [styles.container, style], children: children }));
+};
+InputSlot.displayName = 'InputSlot';
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});
+export default InputSlot;

package/build/components/Input/index.d.ts

@@ -0,0 +1 @@
+export { default as Input, InputField, InputIcon, InputSlot } from './Input';

package/build/components/Input/index.js

@@ -0,0 +1 @@
+export { default as Input, InputField, InputIcon, InputSlot } from './Input';

package/build/components/Label/Label.d.ts

@@ -0,0 +1,6 @@
+import LabelProps from './Label.props';
+declare const Label: {
+    ({ children, nested, disabled, style, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Label;

package/build/components/Label/Label.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+const Label = ({ children, nested, disabled, style, ...props }) => {
+    styles.useVariants({ disabled });
+    return (_jsx(BodyText, { size: "md", weight: nested ? 'regular' : 'semibold', style: [styles.text, style], ...props, children: children }));
+};
+Label.displayName = 'Label';
+const styles = StyleSheet.create(theme => ({
+    text: {
+        color: theme.components.text.color,
+        variants: {
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+        },
+    },
+}));
+export default Label;

package/build/components/Label/Label.props.d.ts

@@ -0,0 +1,6 @@
+import type TextProps from '../BodyText/BodyText.props';
+interface LabelProps extends TextProps {
+    nested?: boolean;
+    disabled?: boolean;
+}
+export default LabelProps;

package/build/components/Label/Label.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/Label/index.d.ts

@@ -0,0 +1 @@
+export { default as Label } from './Label';

package/build/components/Label/index.js

@@ -0,0 +1 @@
+export { default as Label } from './Label';

package/build/components/Link/Link.context.d.ts

@@ -0,0 +1,11 @@
+import type { LinkProps } from './Link.props';
+export declare const LinkContext: import("react").Context<{
+    inverted?: LinkProps["inverted"];
+    disabled?: LinkProps["disabled"];
+    active?: boolean;
+}>;
+export declare const useLinkContext: () => {
+    inverted?: LinkProps["inverted"];
+    disabled?: LinkProps["disabled"];
+    active?: boolean;
+};

package/build/components/Link/Link.context.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from 'react';
+export const LinkContext = createContext({});
+export const useLinkContext = () => useContext(LinkContext);

package/build/components/Link/Link.d.ts

@@ -0,0 +1,7 @@
+import type { LinkProps } from './Link.props';
+export declare const LinkText: import("react").ForwardRefExoticComponent<import("react-native").TextProps & import("react").RefAttributes<import("react-native").TextProps>>;
+declare const Link: {
+    ({ children, icon, disabled, target, iconPosition, showIcon, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Link;

package/build/components/Link/Link.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createLink } from '@gluestack-ui/link';
+import LinkRoot from './LinkRoot';
+import LinkTextComponent from './LinkText';
+import LinkIcon from './LinkIcon';
+import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+const LinkComponent = createLink({
+    Root: LinkRoot,
+    Text: LinkTextComponent,
+});
+export const LinkText = LinkComponent.Text;
+LinkText.displayName = 'LinkText';
+const Link = ({ children, icon = ChevronRightSmallIcon, disabled = false, target = '_self', iconPosition = 'right', showIcon = true, ...props }) => {
+    const LinkAny = LinkComponent;
+    return (_jsxs(LinkAny, { ...props, isDisabled: disabled, isExternal: target === '_blank', children: [showIcon && icon && iconPosition === 'left' ? _jsx(LinkIcon, { as: icon }) : null, _jsx(LinkText, { children: children }), showIcon && icon && iconPosition === 'right' ? _jsx(LinkIcon, { as: icon }) : null] }));
+};
+Link.displayName = 'Link';
+export default Link;

package/build/components/Link/Link.props.d.ts

@@ -0,0 +1,13 @@
+import { ComponentType } from 'react';
+import { PressableProps, TextProps } from 'react-native';
+export interface LinkProps extends Omit<PressableProps, 'children'> {
+    children: TextProps['children'];
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    inverted?: boolean;
+    disabled?: boolean;
+    icon?: ComponentType;
+    iconPosition?: 'left' | 'right';
+    showIcon?: boolean;
+}
+export default LinkProps;

package/build/components/Link/Link.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/Link/LinkIcon.d.ts

@@ -0,0 +1,6 @@
+import IconProps from '../Icon/Icon.props';
+declare const LinkIcon: {
+    ({ children, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default LinkIcon;

package/build/components/Link/LinkIcon.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from 'react-native';
+import { useLinkContext } from './Link.context';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../Icon';
+const LinkIcon = ({ children, ...props }) => {
+    const { active, inverted, disabled } = useLinkContext();
+    styles.useVariants({ active, inverted, disabled });
+    return (_jsx(Icon, { ...props, style: Platform.OS === 'web'
+            ? StyleSheet.compose(styles.icon, props.style)
+            : [styles.icon, props.style], children: children }));
+};
+LinkIcon.displayName = 'LinkIcon';
+const styles = StyleSheet.create(theme => ({
+    icon: {
+        color: theme.components.link.color,
+        variants: {
+            active: {
+                true: {
+                    color: theme.components.link.colorActive,
+                },
+            },
+            inverted: {
+                true: {
+                    color: theme.components.link.inverted.color,
+                },
+            },
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                inverted: true,
+                active: true,
+                styles: {
+                    color: theme.components.link.inverted.colorActive,
+                },
+            },
+        ],
+    },
+}));
+export default LinkIcon;

package/build/components/Link/LinkRoot.d.ts

@@ -0,0 +1,11 @@
+import LinkProps from './Link.props';
+declare const LinkRoot: {
+    ({ children, inverted, states, ...props }: LinkProps & {
+        states?: {
+            active?: boolean;
+            disabled?: boolean;
+        };
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default LinkRoot;

package/build/components/Link/LinkRoot.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { LinkContext } from './Link.context';
+const LinkRoot = ({ children, inverted = false, states, ...props }) => {
+    const { active, disabled = false } = states || {};
+    styles.useVariants({ disabled, inverted, active });
+    const value = useMemo(() => ({ inverted, disabled, active }), [inverted, disabled, active]);
+    return (_jsx(LinkContext.Provider, { value: value, children: _jsx(Pressable, { ...props, style: [styles.container, props.style], children: children }) }));
+};
+LinkRoot.displayName = 'LinkRoot';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+        gap: theme.components.link.gap,
+        _web: {
+            '_focus-visible': {
+                borderRadius: theme.borderRadius.xs,
+                outlineStyle: 'solid',
+                outlineWidth: 2,
+                outlineColor: theme.components.focus.border,
+                outlineOffset: 1,
+                boxShadow: 'none',
+            },
+        },
+        variants: {
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+            inverted: {
+                true: {
+                    _web: {
+                        '_focus-visible': {
+                            outlineColor: theme.components.focus.borderInverted,
+                        },
+                    },
+                },
+            },
+            active: {
+                true: {},
+            },
+        },
+    },
+}));
+export default LinkRoot;

package/build/components/Link/LinkText.d.ts

@@ -0,0 +1,6 @@
+import { TextProps } from 'react-native';
+declare const LinkText: {
+    ({ children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default LinkText;