@utilitywarehouse/hearth-react-native 0.1.0

package/build/components/Card/CardAction.context.d.ts

@@ -0,0 +1,6 @@
+interface CardActionContextProps {
+    pressed?: boolean;
+}
+export declare const CardActionContext: import("react").Context<CardActionContextProps>;
+export declare const useCardActionContext: () => CardActionContextProps;
+export {};

package/build/components/Card/CardAction.context.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+export const CardActionContext = createContext({});
+export const useCardActionContext = () => {
+    const context = useContext(CardActionContext);
+    return context;
+};

package/build/components/Card/CardAction.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+declare const CardAction: {
+    ({ children }: PropsWithChildren<{
+        actionToInherit?: string;
+    }>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CardAction;

package/build/components/Card/CardAction.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { CardActionContext } from './CardAction.context';
+import { useCardContext } from './Card.context';
+const CardAction = ({ children }) => {
+    const { pressed } = useCardContext();
+    const context = useMemo(() => ({
+        pressed,
+    }), [pressed]);
+    return _jsx(CardActionContext.Provider, { value: context, children: children });
+};
+CardAction.displayName = 'CardAction';
+export default CardAction;

package/build/components/Card/CardRoot.d.ts

@@ -0,0 +1,11 @@
+import CardProps from './Card.props';
+declare const Card: {
+    ({ children, variant, colorScheme, noPadding, style, states, space, disabled, onPress, ...rest }: CardProps & {
+        states?: {
+            active?: boolean;
+            disabled?: boolean;
+        };
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Card;

package/build/components/Card/CardRoot.js

@@ -0,0 +1,244 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useStyleProps } from '../../hooks';
+import { CardContext } from './Card.context';
+// Helper that recursively collects onPress or other defined handlers from descendants
+const collectChildActionHandlers = (children) => React.Children.toArray(children).reduce((handlers, child) => {
+    if (React.isValidElement(child)) {
+        const childProps = child.props;
+        // @ts-expect-error - type
+        if (child.type.displayName === 'CardAction') {
+            const actionChildren = React.Children.toArray(childProps.children);
+            const actionToInherit = childProps['actionToInherit'] || 'onPress';
+            const firstChild = actionChildren[0];
+            if (React.isValidElement(firstChild) &&
+                typeof firstChild.props[actionToInherit] === 'function') {
+                handlers.push(firstChild.props[actionToInherit]);
+            }
+        }
+        if (childProps.children) {
+            handlers.push(...collectChildActionHandlers(childProps.children));
+        }
+    }
+    return handlers;
+}, []);
+const Card = ({ children, variant = 'subtle', colorScheme = 'white', noPadding = false, style, states, space, disabled = false, onPress, ...rest }) => {
+    const { active } = states || { active: false };
+    const childActionHandlers = collectChildActionHandlers(children);
+    // Extract style props using our custom hook
+    const { computedStyles, remainingProps } = useStyleProps(rest);
+    const handlePress = (e) => {
+        if (onPress) {
+            onPress(e);
+        }
+        childActionHandlers.forEach(fn => fn(e));
+    };
+    const inheritChildAction = childActionHandlers.length > 0;
+    const showPressed = inheritChildAction || !!onPress;
+    styles.useVariants({
+        variant,
+        colorScheme,
+        noPadding,
+        active,
+        showPressed,
+        disabled,
+        space,
+    });
+    const context = useMemo(() => ({
+        pressed: showPressed && active,
+    }), [showPressed, active]);
+    return (_jsx(CardContext.Provider, { value: context, children: _jsx(Pressable, { ...remainingProps, disabled: disabled, style: [styles.card, computedStyles, style], onPress: handlePress, children: children }) }));
+};
+Card.displayName = 'Card';
+const styles = StyleSheet.create(theme => ({
+    card: {
+        overflow: 'hidden',
+        alignItems: 'flex-start',
+        borderRadius: theme.components.card.borderRadius,
+        variants: {
+            space: theme.globalStyle.variants.space,
+            variant: {
+                subtle: {
+                    borderWidth: theme.components.card.neutral.subtle.borderWidth,
+                    borderColor: theme.components.card.neutral.subtle.borderColor,
+                },
+                emphasis: {
+                    borderWidth: theme.components.card.neutral.emphasis.borderWidth,
+                    borderColor: theme.components.card.neutral.emphasis.borderColor,
+                },
+            },
+            colorScheme: {
+                white: {
+                    backgroundColor: theme.components.card.neutral.whiteBackgroundColor,
+                },
+                warmWhite: {
+                    backgroundColor: theme.components.card.neutral.warmWhiteBackgroundColor,
+                },
+                purple: {
+                    borderWidth: theme.components.card.brand.borderWidth,
+                },
+                energyBlue: {
+                    borderWidth: theme.components.card.brand.borderWidth,
+                },
+                broadbandGreen: {
+                    borderWidth: theme.components.card.brand.borderWidth,
+                },
+                mobileRose: {
+                    borderWidth: theme.components.card.brand.borderWidth,
+                },
+                insuranceOrange: {
+                    borderWidth: theme.components.card.brand.borderWidth,
+                },
+                cashbackLilac: {
+                    borderWidth: theme.components.card.brand.borderWidth,
+                },
+                piggyPink: {
+                    borderWidth: theme.components.card.brand.borderWidth,
+                },
+            },
+            noPadding: {
+                true: {
+                    padding: theme.components.card.mobile.paddingNone,
+                },
+                false: {
+                    padding: {
+                        base: theme.components.card.mobile.padding,
+                        md: theme.components.card.tablet.padding,
+                        lg: theme.components.card.desktop.padding,
+                    },
+                },
+            },
+            active: {
+                true: {},
+            },
+            showPressed: {
+                true: {},
+                false: {
+                    cursor: 'auto',
+                },
+            },
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'subtle',
+                colorScheme: 'purple',
+                styles: {
+                    backgroundColor: theme.components.card.brand.subtle.purpleBackgroundColor,
+                    borderColor: theme.components.card.brand.subtle.borderColor,
+                },
+            },
+            {
+                variant: 'emphasis',
+                colorScheme: 'purple',
+                styles: {
+                    backgroundColor: theme.components.card.brand.emphasis.purpleBackgroundColor,
+                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                },
+            },
+            {
+                variant: 'subtle',
+                colorScheme: 'energyBlue',
+                styles: {
+                    backgroundColor: theme.components.card.brand.subtle.energyBlueBackgroundColor,
+                    borderColor: theme.components.card.brand.subtle.borderColor,
+                },
+            },
+            {
+                variant: 'emphasis',
+                colorScheme: 'energyBlue',
+                styles: {
+                    backgroundColor: theme.components.card.brand.emphasis.energyBlueBackgroundColor,
+                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                },
+            },
+            {
+                variant: 'subtle',
+                colorScheme: 'broadbandGreen',
+                styles: {
+                    backgroundColor: theme.components.card.brand.subtle.broadbandGreenBackgroundColor,
+                    borderColor: theme.components.card.brand.subtle.borderColor,
+                },
+            },
+            {
+                variant: 'emphasis',
+                colorScheme: 'broadbandGreen',
+                styles: {
+                    backgroundColor: theme.components.card.brand.emphasis.broadbandGreenBackgroundColor,
+                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                },
+            },
+            {
+                variant: 'subtle',
+                colorScheme: 'mobileRose',
+                styles: {
+                    backgroundColor: theme.components.card.brand.subtle.mobileRoseBackgroundColor,
+                    borderColor: theme.components.card.brand.subtle.borderColor,
+                },
+            },
+            {
+                variant: 'emphasis',
+                colorScheme: 'mobileRose',
+                styles: {
+                    backgroundColor: theme.components.card.brand.emphasis.mobileRoseBackgroundColor,
+                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                },
+            },
+            {
+                variant: 'subtle',
+                colorScheme: 'insuranceOrange',
+                styles: {
+                    backgroundColor: theme.components.card.brand.subtle.insuranceOrangeBackgroundColor,
+                    borderColor: theme.components.card.brand.subtle.borderColor,
+                },
+            },
+            {
+                variant: 'emphasis',
+                colorScheme: 'insuranceOrange',
+                styles: {
+                    backgroundColor: theme.components.card.brand.emphasis.insuranceOrangeBackgroundColor,
+                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                },
+            },
+            {
+                variant: 'subtle',
+                colorScheme: 'cashbackLilac',
+                styles: {
+                    backgroundColor: theme.components.card.brand.subtle.cashbackLilacBackgroundColor,
+                    borderColor: theme.components.card.brand.subtle.borderColor,
+                },
+            },
+            {
+                variant: 'emphasis',
+                colorScheme: 'cashbackLilac',
+                styles: {
+                    backgroundColor: theme.components.card.brand.emphasis.cashbackLilacBackgroundColor,
+                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                },
+            },
+            {
+                variant: 'subtle',
+                colorScheme: 'piggyPink',
+                styles: {
+                    backgroundColor: theme.components.card.brand.subtle.piggyPinkBackgroundColor,
+                    borderColor: theme.components.card.brand.subtle.borderColor,
+                },
+            },
+            {
+                variant: 'emphasis',
+                colorScheme: 'piggyPink',
+                styles: {
+                    backgroundColor: theme.components.card.brand.emphasis.piggyPinkBackgroundColor,
+                    borderColor: theme.components.card.brand.emphasis.borderColor,
+                },
+            },
+        ],
+    },
+}));
+export default Card;

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

@@ -0,0 +1,4 @@
+export { default as Card } from './Card';
+export { useCardContext } from './Card.context';
+export { useCardActionContext } from './CardAction.context';
+export { default as CardAction } from './CardAction';

package/build/components/Card/index.js

@@ -0,0 +1,4 @@
+export { default as Card } from './Card';
+export { useCardContext } from './Card.context';
+export { useCardActionContext } from './CardAction.context';
+export { default as CardAction } from './CardAction';

package/build/components/Center/Center.d.ts

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

package/build/components/Center/Center.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../Box';
+const Center = ({ children, ...props }) => (_jsx(Box, { alignItems: "center", justifyContent: "center", ...props, children: children }));
+Center.displayName = 'Center';
+export default Center;

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

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

package/build/components/Center/index.js

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

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

@@ -0,0 +1,10 @@
+export declare const CheckboxContext: import("react").Context<{
+    disabled?: boolean;
+    checked?: boolean;
+    active?: boolean;
+}>;
+export declare const useCheckboxContext: () => {
+    disabled?: boolean;
+    checked?: boolean;
+    active?: boolean;
+};

package/build/components/Checkbox/Checkbox.context.js

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

package/build/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,21 @@
+import CheckboxProps from './Checkbox.props';
+declare const CheckboxGroup: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("./CheckboxGroup.props").default & {
+    isCard?: boolean;
+}> & import("./CheckboxGroup.props").default & {
+    isCard?: boolean;
+} & import("@gluestack-ui/checkbox/lib/typescript/types").ICheckboxGroup>;
+declare const CheckboxIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").ViewProps> & import("react-native").ViewProps>;
+declare const CheckboxIcon: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("..").IconProps> & import("..").IconProps & {
+    forceMount?: boolean;
+}>;
+declare const CheckboxLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("../Label/Label.props").default> & Omit<import("../Label/Label.props").default, "ref">>;
+declare const Checkbox: {
+    ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const CheckboxTile: {
+    ({ type, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Checkbox, CheckboxGroup, CheckboxIndicator, CheckboxIcon, CheckboxLabel, CheckboxTile };
+export default Checkbox;

package/build/components/Checkbox/Checkbox.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createCheckbox } from '@gluestack-ui/checkbox';
+import StyledCheckbox from './CheckboxRoot';
+import StyledCheckboxIndicator from './CheckboxIndicator';
+import StyledCheckboxIcon from './CheckboxIcon';
+import StyledCheckboxLabel from './CheckboxLabel';
+import StyledCheckboxGroup from './CheckboxGroupRoot';
+import { Helper } from '../Helper';
+import { useCheckboxGroupContext } from './CheckboxGroup.context';
+import { useFormFieldContext } from '../FormField';
+import CheckboxTileRoot from './CheckboxTileRoot';
+import CheckboxTextContent from './CheckboxTextContent';
+const CheckboxComponent = createCheckbox({
+    Root: StyledCheckbox,
+    Group: StyledCheckboxGroup,
+    Indicator: StyledCheckboxIndicator,
+    Icon: StyledCheckboxIcon,
+    Label: StyledCheckboxLabel,
+});
+const CheckboxGroup = CheckboxComponent.Group;
+const CheckboxIndicator = CheckboxComponent.Indicator;
+const CheckboxIcon = CheckboxComponent.Icon;
+const CheckboxLabel = CheckboxComponent.Label;
+CheckboxGroup.displayName = 'CheckboxGroup';
+CheckboxIndicator.displayName = 'CheckboxIndicator';
+CheckboxIcon.displayName = 'CheckboxIcon';
+CheckboxLabel.displayName = 'CheckboxLabel';
+const Checkbox = ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', ...props }) => {
+    const { validationStatus: fieldValidationStatus } = useFormFieldContext();
+    const { validationStatus: groupValidationStatus, type: groupType } = useCheckboxGroupContext();
+    const validationStatus = fieldValidationStatus ?? groupValidationStatus ?? validation ?? 'initial';
+    const checkboxType = groupType ?? type;
+    const checkboxChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(CheckboxIndicator, { children: _jsx(CheckboxIcon, {}) }), _jsxs(CheckboxTextContent, { children: [!!label && _jsx(CheckboxLabel, { children: label }), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })] }));
+    return (
+    // @ts-expect-error - type
+    _jsx(CheckboxComponent, { ...props, isDisabled: disabled, isChecked: checked, children: checkboxType === 'tile' ? (_jsx(CheckboxTileRoot, { children: checkboxChildren })) : (checkboxChildren) }));
+};
+const CheckboxTile = ({ type = 'tile', ...props }) => {
+    return _jsx(Checkbox, { ...props, type: type });
+};
+CheckboxTile.displayName = 'CheckboxTile';
+Checkbox.displayName = 'Checkbox';
+export { Checkbox, CheckboxGroup, CheckboxIndicator, CheckboxIcon, CheckboxLabel, CheckboxTile };
+export default Checkbox;

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

@@ -0,0 +1,34 @@
+import type { ComponentType } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+type CheckboxBaseProps = {
+    onChange?: (isSelected: boolean) => void;
+    disabled?: boolean;
+    validationStatus?: 'valid' | 'invalid' | 'initial';
+    type?: 'default' | 'tile';
+} & ({
+    value?: string | number | boolean;
+    checked: boolean;
+} | {
+    value: string | number | boolean;
+    checked?: boolean;
+}) & Omit<PressableProps, 'children'>;
+type CheckboxWithChildrenProps = {
+    children: ViewProps['children'];
+    label?: never;
+    helperText?: never;
+    helperIcon?: never;
+    invalidText?: never;
+    validText?: never;
+    showValidationIcon?: never;
+} & CheckboxBaseProps;
+type CheckboxWithoutChildrenProps = {
+    children?: never;
+    label?: string;
+    helperText?: string;
+    helperIcon?: ComponentType;
+    invalidText?: string;
+    validText?: string;
+    showValidationIcon?: boolean;
+} & CheckboxBaseProps;
+type CheckboxProps = CheckboxWithChildrenProps | CheckboxWithoutChildrenProps;
+export default CheckboxProps;

package/build/components/Checkbox/Checkbox.props.js

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

package/build/components/Checkbox/CheckboxGroup.context.d.ts

@@ -0,0 +1,10 @@
+export declare const CheckboxGroupContext: import("react").Context<{
+    disabled?: boolean;
+    validationStatus?: "valid" | "invalid" | "initial";
+    type?: "default" | "tile";
+}>;
+export declare const useCheckboxGroupContext: () => {
+    disabled?: boolean;
+    validationStatus?: "valid" | "invalid" | "initial";
+    type?: "default" | "tile";
+};

package/build/components/Checkbox/CheckboxGroup.context.js

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

package/build/components/Checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,6 @@
+import CheckboxGroupProps from './CheckboxGroup.props';
+declare const CheckboxGroup: {
+    ({ children, disabled, readonly, validationStatus, label, helperText, invalidText, validText, showValidationIcon, helperIcon, type, direction, gap, ...props }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CheckboxGroup;

package/build/components/Checkbox/CheckboxGroup.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { CheckboxGroup as CheckboxGroupComponent } from './Checkbox';
+import { CheckboxGroupContext } from './CheckboxGroup.context';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import CheckboxGroupTextContent from './CheckboxGroupTextContent';
+import { Label } from '../Label';
+import { Helper } from '../Helper';
+const CheckboxGroup = ({ children, disabled, readonly, validationStatus, label, helperText, invalidText, validText, showValidationIcon = true, helperIcon, type, direction = 'column', gap, ...props }) => {
+    const value = useMemo(() => ({ disabled, validationStatus, type }), [disabled, validationStatus, type]);
+    const showHeader = !!label || !!helperText || !!invalidText || !!validText;
+    const childrenArray = React.Children.toArray(children);
+    const childIsCard = type === 'tile' ||
+        childrenArray.some(child => React.isValidElement(child) &&
+            // @ts-expect-error - child.type is not typed
+            (child.props.type === 'tile' || child.type.displayName === 'CheckboxTile'));
+    styles.useVariants({ type: childIsCard ? 'tile' : 'checkbox', direction });
+    return (_jsx(CheckboxGroupContext.Provider, { value: value, children: _jsxs(CheckboxGroupComponent, { ...props, value: props.value, isDisabled: disabled, isReadOnly: readonly, isCard: childIsCard, children: [showHeader && (_jsxs(CheckboxGroupTextContent, { children: [!!label && _jsx(Label, { disabled: disabled, children: label }), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })), _jsx(View, { style: [styles.container, styles.containerGap(gap)], children: children })] }) }));
+};
+const styles = StyleSheet.create(theme => ({
+    container: {
+        alignItems: 'stretch',
+        variants: {
+            type: {
+                checkbox: {
+                    gap: theme.components.checkbox.group.stack.gap,
+                },
+                tile: {
+                    gap: theme.components.checkbox.tile.group.stack.gap,
+                },
+            },
+            direction: {
+                column: {
+                    flexDirection: 'column',
+                },
+                row: {
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                },
+            },
+        },
+    },
+    containerGap: (gap) => ({
+        ...(gap ? { gap: theme.space[gap] } : {}),
+    }),
+}));
+CheckboxGroup.displayName = 'CheckboxGroup';
+export default CheckboxGroup;

package/build/components/Checkbox/CheckboxGroup.props.d.ts

@@ -0,0 +1,20 @@
+import { ComponentType } from 'react';
+import { space } from '../../tokens';
+import { ViewProps } from 'react-native';
+interface CheckboxGroupProps extends ViewProps {
+    disabled?: boolean;
+    value?: Array<string>;
+    onChange?: (value: Array<string>) => void;
+    readonly?: boolean;
+    validationStatus?: 'valid' | 'invalid' | 'initial';
+    label?: string;
+    helperText?: string;
+    showValidationIcon?: boolean;
+    invalidText?: string;
+    validText?: string;
+    helperIcon?: ComponentType;
+    type?: 'default' | 'tile';
+    direction?: 'row' | 'column';
+    gap?: keyof typeof space;
+}
+export default CheckboxGroupProps;

package/build/components/Checkbox/CheckboxGroup.props.js

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

package/build/components/Checkbox/CheckboxGroupRoot.d.ts

@@ -0,0 +1,8 @@
+import CheckboxGroupProps from './CheckboxGroup.props';
+declare const CheckboxGroup: {
+    ({ children, style, isCard, ...props }: CheckboxGroupProps & {
+        isCard?: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CheckboxGroup;

package/build/components/Checkbox/CheckboxGroupRoot.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native-unistyles';
+import { View } from 'react-native';
+const CheckboxGroup = ({ children, style, isCard = false, ...props }) => {
+    styles.useVariants({ type: isCard ? 'tile' : 'checkbox' });
+    return (_jsx(View, { ...props, style: [styles.container, style], children: children }));
+};
+CheckboxGroup.displayName = 'CheckboxGroup';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        variants: {
+            type: {
+                checkbox: {
+                    gap: theme.components.checkbox.group.gap,
+                },
+                tile: {
+                    gap: theme.components.checkbox.tile.group.gap,
+                },
+            },
+        },
+    },
+}));
+export default CheckboxGroup;

package/build/components/Checkbox/CheckboxGroupTextContent.d.ts

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

package/build/components/Checkbox/CheckboxGroupTextContent.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from '../Flex';
+const CheckboxGroupTextContent = ({ children, ...props }) => {
+    return (_jsx(Flex, { direction: "column", space: "none", ...props, children: children }));
+};
+CheckboxGroupTextContent.displayName = 'CheckboxGroupTextContent';
+export default CheckboxGroupTextContent;

package/build/components/Checkbox/CheckboxIcon.d.ts

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

package/build/components/Checkbox/CheckboxIcon.js

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

package/build/components/Checkbox/CheckboxIndicator.d.ts

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