@utilitywarehouse/hearth-react-native 0.9.0 → 0.10.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.9.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.10.0 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.9.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.10.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.10.0
+
+### Minor Changes
+
+- [#659](https://github.com/utilitywarehouse/hearth/pull/659) [`99afbed`](https://github.com/utilitywarehouse/hearth/commit/99afbed95df550d5d5a8bb6e04f7640077bf4883) Thanks [@MichalCiesliczka](https://github.com/MichalCiesliczka)! - Adds `Pill` and `PillGroup` components
+
+- [#671](https://github.com/utilitywarehouse/hearth/pull/671) [`706448d`](https://github.com/utilitywarehouse/hearth/commit/706448d91f354cb96a71a5f3acc9d17aaa767078) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `Toast` component
+
 ## 0.9.0
 
 ### Minor Changes

package/build/components/PillGroup/Pill.d.ts

@@ -0,0 +1,16 @@
+import type { PillProps } from './Pill.props';
+export declare const Pill: import("react").ForwardRefExoticComponent<PillProps & {
+    states?: {
+        active?: boolean;
+    };
+} & Omit<import("react-native").PressableProps, "children"> & {
+    tabIndex?: 0 | -1 | undefined;
+} & {
+    children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {
+        hovered?: boolean | undefined;
+        pressed?: boolean | undefined;
+        focused?: boolean | undefined;
+        focusVisible?: boolean | undefined;
+        disabled?: boolean | undefined;
+    }) => import("react").ReactNode);
+} & import("react").RefAttributes<unknown>>;

package/build/components/PillGroup/Pill.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPressable } from '@gluestack-ui/pressable';
+import { Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../Icon';
+import { BodyText } from '../BodyText';
+import { usePillGroupContext } from './PillGroup.context';
+const PillRoot = ({ value, label, icon, states = {}, ...props }) => {
+    const { active } = states;
+    const context = usePillGroupContext();
+    const isSelected = context?.value.includes(value) ?? false;
+    styles.useVariants({ selected: isSelected, active });
+    const handlePress = () => {
+        context?.onChange(value);
+    };
+    return (_jsxs(Pressable, { ...props, style: styles.pill, accessibilityRole: "button", accessibilityState: { selected: isSelected }, onPress: handlePress, children: [icon && _jsx(Icon, { as: icon, size: "sm", style: styles.icon }), _jsx(BodyText, { weight: "semibold", style: styles.text, children: label })] }));
+};
+export const Pill = createPressable({ Root: PillRoot });
+Pill.displayName = 'Pill';
+const styles = StyleSheet.create(theme => ({
+    pill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: theme.components.pill.height,
+        minWidth: theme.components.pill.minWidth,
+        gap: theme.components.pill.gap,
+        paddingHorizontal: theme.components.pill.paddingHorizontal,
+        paddingVertical: theme.components.pill.paddingVertical,
+        borderRadius: theme.components.pill.borderRadius,
+        borderWidth: theme.components.pill.borderWidth,
+        borderColor: theme.color.interactive.neutral.border.subtle,
+        backgroundColor: 'transparent',
+        _web: {
+            _hover: {
+                backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
+            },
+            '_focus-visible': theme.helpers.focusVisible,
+        },
+        variants: {
+            active: {
+                true: {
+                    backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+                },
+            },
+            selected: {
+                true: {
+                    backgroundColor: theme.color.interactive.brand.surface.strong.default,
+                    borderColor: theme.color.interactive.brand.surface.strong.default,
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.brand.surface.strong.hover,
+                            borderColor: theme.color.interactive.brand.surface.strong.hover,
+                        },
+                    },
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                selected: true,
+                active: true,
+                styles: {
+                    backgroundColor: theme.color.interactive.brand.surface.strong.active,
+                    borderColor: theme.color.interactive.brand.surface.strong.active,
+                },
+            },
+        ],
+    },
+    text: {
+        variants: {
+            selected: {
+                true: {
+                    color: theme.color.text.inverted,
+                },
+                false: {
+                    color: theme.color.text.primary,
+                },
+            },
+        },
+    },
+    icon: {
+        variants: {
+            selected: {
+                true: {
+                    color: theme.color.icon.inverted,
+                },
+                false: {
+                    color: theme.color.icon.primary,
+                },
+            },
+        },
+    },
+}));

package/build/components/PillGroup/Pill.props.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PressableProps } from 'react-native';
+export interface PillProps extends Omit<PressableProps, 'children'> {
+    /** Value returned when selected */
+    value: string;
+    /** Text label shown inside the pill */
+    label: string;
+    /** Left icon */
+    icon?: React.ComponentType<any>;
+}

package/build/components/PillGroup/Pill.props.js

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

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

@@ -0,0 +1,6 @@
+export interface PillGroupContextValue {
+    value: string[];
+    onChange: (value: string) => void;
+}
+export declare const PillGroupContext: import("react").Context<PillGroupContextValue | null>;
+export declare const usePillGroupContext: () => PillGroupContextValue | null;

package/build/components/PillGroup/PillGroup.context.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export const PillGroupContext = createContext(null);
+export const usePillGroupContext = () => {
+    return useContext(PillGroupContext);
+};

package/build/components/PillGroup/PillGroup.d.ts

@@ -0,0 +1,5 @@
+import type { PillGroupProps } from './PillGroup.props';
+export declare const PillGroup: {
+    ({ children, value, multiple, wrap, onChange, style, ...props }: PillGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/build/components/PillGroup/PillGroup.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ScrollView } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Box } from '../Box';
+import { PillGroupContext } from './PillGroup.context';
+export const PillGroup = ({ children, value, multiple = false, wrap = true, onChange, style, ...props }) => {
+    const normalizedValue = Array.isArray(value) ? value : [value];
+    const contextValue = useMemo(() => ({
+        value: normalizedValue,
+        onChange: (pillValue) => {
+            if (multiple) {
+                const newValue = normalizedValue.includes(pillValue)
+                    ? normalizedValue.filter(v => v !== pillValue)
+                    : [...normalizedValue, pillValue];
+                onChange?.(newValue);
+            }
+            else {
+                onChange?.(pillValue);
+            }
+        },
+    }), [normalizedValue, multiple, onChange]);
+    return (_jsx(PillGroupContext.Provider, { value: contextValue, children: wrap ? (_jsx(Box, { style: [styles.group, styles.wrap, style], ...props, children: children })) : (_jsx(ScrollView, { horizontal: true, contentContainerStyle: [styles.group, style], showsHorizontalScrollIndicator: false, ...props, children: children })) }));
+};
+PillGroup.displayName = 'PillGroup';
+const styles = StyleSheet.create(theme => ({
+    group: {
+        flexDirection: 'row',
+        gap: theme.components.pill.group.gap,
+    },
+    wrap: {
+        flexWrap: 'wrap',
+    },
+}));

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ScrollViewProps, ViewStyle } from 'react-native';
+export interface PillGroupProps extends Omit<ScrollViewProps, 'horizontal' | 'contentContainerStyle' | 'showsHorizontalScrollIndicator'> {
+    /** Controlled selected value(s) */
+    value: string | string[];
+    /** Multi-select mode. Default = false */
+    multiple?: boolean;
+    /** Allow pills to wrap lines. Default = true */
+    wrap?: boolean;
+    /** Handle selection changes */
+    onChange?: (value: string | string[]) => void;
+    /** Children must be <Pill> elements */
+    children: React.ReactNode;
+    style?: ViewStyle | ViewStyle[];
+}

package/build/components/PillGroup/PillGroup.props.js

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

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

@@ -0,0 +1,4 @@
+export { PillGroup } from './PillGroup';
+export type { PillGroupProps } from './PillGroup.props';
+export { Pill } from './Pill';
+export type { PillProps } from './Pill.props';

package/build/components/PillGroup/index.js

@@ -0,0 +1,2 @@
+export { PillGroup } from './PillGroup';
+export { Pill } from './Pill';

package/build/components/Select/Select.js

@@ -77,7 +77,7 @@ const Select = ({ options = [], value, onValueChange, label, placeholder = 'Sele
                         selectedValue: value,
                         onValueChange,
                         close: closeBottomSheet,
-                    }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, onChangeText: setSearch, type: "search" }) })), children ? (_jsx(BottomSheetScrollView, { children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, ...listProps }))] }) })] }));
+                    }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search" }) })), children ? (_jsx(BottomSheetScrollView, { children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, ...listProps }))] }) })] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {
@@ -161,6 +161,7 @@ const styles = StyleSheet.create(theme => ({
     emptyContainer: {
         alignItems: 'center',
         justifyContent: 'center',
+        marginTop: theme.space.md,
     },
 }));
 Select.displayName = 'Select';

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ToastContextValue } from './Toast.props';
+declare const ToastContext: React.Context<ToastContextValue | undefined>;
+export declare const useToastContext: () => ToastContextValue;
+export declare const ToastProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useToast: () => ToastContextValue;
+export default ToastContext;

package/build/components/Toast/Toast.context.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import ToastItem from './ToastItem';
+const ToastContext = createContext(undefined);
+export const useToastContext = () => {
+    const ctx = useContext(ToastContext);
+    if (!ctx)
+        throw new Error('useToastContext must be used within ToastProvider');
+    return ctx;
+};
+export const ToastProvider = ({ children }) => {
+    const [toasts, setToasts] = useState([]);
+    const timers = useRef({});
+    const toastRefs = useRef({});
+    const removeToast = useCallback((id) => {
+        setToasts(s => s.filter(t => t.id !== id));
+        const timer = timers.current[id];
+        if (timer) {
+            clearTimeout(timer);
+            delete timers.current[id];
+        }
+        delete toastRefs.current[id];
+    }, []);
+    const addToast = useCallback((opts) => {
+        const id = opts.id ?? `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+        const toast = {
+            id,
+            text: opts.text,
+            actionText: opts.actionText,
+            onPress: opts.onPress,
+            onDismiss: opts.onDismiss,
+            icon: opts.icon,
+            duration: opts.duration ?? 6000,
+            showDismissIcon: opts.showDismissIcon,
+            dismissOnPress: opts.dismissOnPress ?? true,
+        };
+        setToasts(s => [toast, ...s]);
+        // set auto-dismiss timer
+        if (toast.duration && toast.duration > 0) {
+            const t = setTimeout(() => {
+                // call dismiss animation if ref exists, otherwise remove immediately
+                const ref = toastRefs.current[id];
+                if (ref) {
+                    ref.dismiss();
+                }
+                else {
+                    removeToast(id);
+                }
+            }, toast.duration);
+            timers.current[id] = t;
+        }
+        return id;
+    }, [removeToast]);
+    useEffect(() => {
+        return () => {
+            // cleanup timers on unmount
+            Object.values(timers.current).forEach(t => clearTimeout(t));
+            timers.current = {};
+        };
+    }, []);
+    return (_jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [children, _jsx(View, { pointerEvents: "box-none", style: styles.container, children: _jsx(View, { style: styles.stack, children: toasts.map(t => (_jsx(ToastItem, { ref: el => {
+                            toastRefs.current[t.id] = el;
+                        }, toast: t, onClose: removeToast }, t.id))) }) })] }));
+};
+export const useToast = () => {
+    const ctx = useContext(ToastContext);
+    if (!ctx)
+        throw new Error('useToast must be used within ToastProvider');
+    return ctx;
+};
+export default ToastContext;
+const styles = StyleSheet.create(theme => ({
+    container: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        alignItems: 'stretch',
+        paddingBottom: theme.space['200'],
+        pointerEvents: 'box-none',
+    },
+    stack: {
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        gap: theme.components.toast.stack.gap,
+    },
+}));

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

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+export interface ToastOptions {
+    id?: string;
+    text: string | ReactNode;
+    /** Optional action text to display as a link */
+    actionText?: string;
+    /** Optional callback when action link or toast is pressed */
+    onPress?: () => void;
+    /** Optional callback when toast is dismissed */
+    onDismiss?: () => void;
+    /** Optional icon component */
+    icon?: React.ComponentType;
+    /** Duration in milliseconds; default 6000 */
+    duration?: number;
+    /** Whether to show the dismiss icon button; default true */
+    showDismissIcon?: boolean;
+    /** Whether to dismiss the toast when pressed; default true */
+    dismissOnPress?: boolean;
+}
+export interface ToastInstance extends ToastOptions {
+    id: string;
+    /** resolved duration */
+    duration: number;
+}
+export interface ToastContextValue {
+    addToast: (opts: ToastOptions) => string;
+    removeToast: (id: string) => void;
+}
+export default ToastOptions;

package/build/components/Toast/Toast.props.js

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

package/build/components/Toast/ToastItem.d.ts

@@ -0,0 +1,10 @@
+import type { ToastInstance } from './Toast.props';
+export interface ToastItemHandle {
+    dismiss: () => void;
+}
+interface Props {
+    toast: ToastInstance;
+    onClose: (id: string) => void;
+}
+declare const ToastItem: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<ToastItemHandle>>;
+export default ToastItem;

package/build/components/Toast/ToastItem.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { forwardRef, useEffect, useImperativeHandle } from 'react';
+import { AccessibilityInfo, Platform, Pressable, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming, } from 'react-native-reanimated';
+import { StyleSheet, withUnistyles } from 'react-native-unistyles';
+import { scheduleOnRN } from 'react-native-worklets';
+import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
+import { Link } from '../Link';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+const AnimatedView = Platform.OS === 'web' ? withUnistyles(Animated.View) : Animated.View;
+const ToastItem = forwardRef(({ toast, onClose }, ref) => {
+    const translateY = useSharedValue(30);
+    const opacity = useSharedValue(0);
+    const gestureTranslateY = useSharedValue(0);
+    useEffect(() => {
+        translateY.value = withTiming(0, { duration: 300 });
+        opacity.value = withTiming(1, { duration: 300 });
+        // Announce toast content to screen readers
+        // Use a slight delay to ensure iOS VoiceOver picks it up
+        const timer = setTimeout(() => {
+            const message = typeof toast.text === 'string' ? toast.text : 'Toast notification';
+            const announcement = toast.actionText ? `${message}, ${toast.actionText}` : message;
+            AccessibilityInfo.announceForAccessibility(announcement);
+        }, 100);
+        return () => clearTimeout(timer);
+    }, [toast.text, toast.actionText]);
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: translateY.value + gestureTranslateY.value }],
+        opacity: opacity.value,
+    }));
+    const handleDismiss = (fromGesture = false) => {
+        'worklet';
+        // Call onDismiss callback if provided
+        if (toast.onDismiss) {
+            scheduleOnRN(toast.onDismiss);
+        }
+        // animate out then call onClose
+        if (!fromGesture) {
+            gestureTranslateY.value = 0;
+        }
+        // Continue from current position and animate further down
+        translateY.value = withTiming(100, { duration: 250 });
+        opacity.value = withTiming(0, { duration: 250 }, finished => {
+            if (finished)
+                scheduleOnRN(onClose, toast.id);
+        });
+    };
+    useImperativeHandle(ref, () => ({
+        dismiss: handleDismiss,
+    }));
+    const panGesture = Gesture.Pan()
+        .onUpdate(event => {
+        // only allow downward drag
+        if (event.translationY > 0) {
+            gestureTranslateY.value = event.translationY;
+        }
+    })
+        .onEnd(event => {
+        if (event.translationY > 30 || event.velocityY > 800) {
+            handleDismiss(true);
+        }
+        else {
+            // spring back to original position
+            gestureTranslateY.value = withSpring(0, {
+                damping: 20,
+                stiffness: 300,
+            });
+        }
+    });
+    const IconComp = toast.icon;
+    const showDismissIcon = toast.showDismissIcon !== false; // default true
+    const dismissOnPress = toast.dismissOnPress === true; // default false
+    const handlePress = () => {
+        if (toast.onPress) {
+            toast.onPress();
+            if (dismissOnPress) {
+                handleDismiss(false);
+            }
+        }
+    };
+    const toastContent = (_jsxs(View, { style: styles.inner, children: [_jsxs(View, { style: styles.content, children: [IconComp ? (_jsx(View, { style: styles.iconWrap, children: _jsx(Icon, { as: IconComp, style: styles.icon }) })) : null, _jsx(BodyText, { inverted: true, children: toast.text })] }), toast.actionText ? (_jsx(Link, { onPress: handlePress, showIcon: false, inverted: true, children: toast.actionText })) : null, showDismissIcon ? (_jsx(View, { style: styles.actions, children: _jsx(UnstyledIconButton, { icon: CloseSmallIcon, accessibilityLabel: "Dismiss", inverted: true, onPress: () => handleDismiss(false) }) })) : null] }));
+    return (_jsx(GestureDetector, { gesture: panGesture, children: _jsx(AnimatedView, { style: [styles.toast, animatedStyle], ...(Platform.OS === 'ios' && {
+                accessible: true,
+                accessibilityRole: 'alert',
+                accessibilityLiveRegion: 'polite',
+            }), importantForAccessibility: Platform.OS === 'android' ? 'no-hide-descendants' : undefined, children: toast.onPress ? (_jsx(Pressable, { onPress: handlePress, style: styles.pressable, children: toastContent })) : (toastContent) }) }));
+});
+ToastItem.displayName = 'ToastItem';
+const styles = StyleSheet.create(theme => ({
+    toast: {
+        backgroundColor: theme.components.toast.backgroundColor,
+        borderRadius: theme.components.toast.borderRadius,
+        padding: theme.components.toast.padding,
+        width: '95%',
+    },
+    pressable: {
+        width: '100%',
+    },
+    inner: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '100%',
+        gap: theme.components.toast.gap,
+    },
+    iconWrap: {
+        width: 24,
+        height: 24,
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexShrink: 0,
+    },
+    icon: {
+        color: theme.color.icon.inverted,
+    },
+    content: {
+        flex: 1,
+        gap: theme.components.toast.text.gap,
+        flexDirection: 'row',
+        alignItems: 'center',
+        minWidth: 0,
+    },
+    actions: {
+        flexShrink: 0,
+    },
+}));
+export default ToastItem;

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

@@ -0,0 +1,3 @@
+export { ToastProvider, useToast, useToastContext } from './Toast.context';
+export type { ToastInstance, ToastOptions } from './Toast.props';
+export { default as ToastItem } from './ToastItem';

package/build/components/Toast/index.js

@@ -0,0 +1,2 @@
+export { ToastProvider, useToast, useToastContext } from './Toast.context';
+export { default as ToastItem } from './ToastItem';

package/build/components/index.d.ts

@@ -37,6 +37,7 @@ export * from './Link';
 export * from './List';
 export * from './Menu';
 export * from './Modal';
+export * from './PillGroup';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
@@ -48,6 +49,7 @@ export * from './Switch';
 export * from './Tabs';
 export * from './Textarea';
 export * from './ThemedImage';
+export * from './Toast';
 export * from './ToggleButtonCard';
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 export { Pressable } from 'react-native';

package/build/components/index.js

@@ -38,6 +38,7 @@ export * from './Link';
 export * from './List';
 export * from './Menu';
 export * from './Modal';
+export * from './PillGroup';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
@@ -49,6 +50,7 @@ export * from './Switch';
 export * from './Tabs';
 export * from './Textarea';
 export * from './ThemedImage';
+export * from './Toast';
 export * from './ToggleButtonCard';
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 export { Pressable } from 'react-native';

package/build/tokens/components/dark/checkbox.d.ts

@@ -27,6 +27,9 @@ declare const _default: {
         readonly gap: 8;
         readonly group: {
             readonly gap: 12;
+            readonly heading: {
+                readonly gap: 2;
+            };
             readonly stack: {
                 readonly gap: 12;
             };

package/build/tokens/components/dark/checkbox.js

@@ -27,6 +27,9 @@ export default {
         gap: 8,
         group: {
             gap: 12,
+            heading: {
+                gap: 2,
+            },
             stack: {
                 gap: 12,
             },

package/build/tokens/components/dark/input.d.ts

@@ -13,6 +13,12 @@ declare const _default: {
         readonly gap: 8;
     };
     readonly gap: 6;
+    readonly heading: {
+        readonly gap: 12;
+        readonly text: {
+            readonly gap: 0;
+        };
+    };
     readonly height: 48;
     readonly label: {
         readonly gap: 6;

package/build/tokens/components/dark/input.js

@@ -13,6 +13,12 @@ export default {
         gap: 8,
     },
     gap: 6,
+    heading: {
+        gap: 12,
+        text: {
+            gap: 0,
+        },
+    },
     height: 48,
     label: {
         gap: 6,

package/build/tokens/components/dark/radio.d.ts

@@ -24,6 +24,9 @@ declare const _default: {
         readonly gap: 8;
         readonly group: {
             readonly gap: 8;
+            readonly heading: {
+                readonly gap: 2;
+            };
             readonly stack: {
                 readonly gap: 12;
             };

package/build/tokens/components/dark/radio.js

@@ -24,6 +24,9 @@ export default {
         gap: 8,
         group: {
             gap: 8,
+            heading: {
+                gap: 2,
+            },
             stack: {
                 gap: 12,
             },