@utilitywarehouse/hearth-react-native 0.8.2 → 0.10.0

package/src/components/Menu/MenuTrigger.props.ts

@@ -0,0 +1,14 @@
+import type { ReactElement } from 'react';
+
+export interface MenuTriggerProps {
+  /**
+   * The child element that triggers the menu (should be a single pressable element like Button)
+   */
+  children: ReactElement;
+  /**
+   * Called when the trigger is pressed.
+   */
+  onPress?: () => void;
+}
+
+export default MenuTriggerProps;

package/src/components/Menu/MenuTrigger.tsx

@@ -0,0 +1,20 @@
+import { cloneElement, isValidElement } from 'react';
+import type MenuTriggerProps from './MenuTrigger.props';
+
+interface MenuTriggerInternalProps extends MenuTriggerProps {
+  onPress: () => void;
+}
+
+const MenuTrigger = ({ children, onPress }: MenuTriggerInternalProps) => {
+  if (!isValidElement(children)) {
+    throw new Error('MenuTrigger: children must be a valid React element');
+  }
+
+  return cloneElement(children, {
+    onPress,
+  } as { onPress?: () => void });
+};
+
+MenuTrigger.displayName = 'MenuTrigger';
+
+export default MenuTrigger;

package/src/components/Menu/index.ts

@@ -0,0 +1,7 @@
+export { default as Menu } from './Menu';
+export { useMenuContext } from './Menu.context';
+export type { MenuMethods, default as MenuProps } from './Menu.props';
+export { default as MenuItem } from './MenuItem';
+export type { default as MenuItemProps } from './MenuItem.props';
+export { default as MenuTrigger } from './MenuTrigger';
+export type { default as MenuTriggerProps } from './MenuTrigger.props';

package/src/components/Modal/Modal.docs.mdx

@@ -25,11 +25,12 @@ The Modal component is ideal for displaying important information, collecting us
 - [Examples](#examples)
   - [Basic Modal](#basic-modal)
   - [Modal with Image](#modal-with-image)
+  - [Fullscreen Modal](#fullscreen-modal)
   - [Modal with Custom Content](#modal-with-custom-content)
   - [Loading State](#loading-state)
   - [Without Close Button](#without-close-button)
   - [Single Action Modal](#single-action-modal)
-  - [Fullscreen Modal (Usage with navigation modal)](#fullscreen-modal-usage-with-navigation-modal)
+  - [Modal in Navigation Modal](#modal-in-navigation-modal)
 - [Integration Notes](#integration-notes)
 - [External Resources](#external-resources)
 
@@ -104,7 +105,8 @@ The Modal component extends the `BottomSheetModal` component and accepts all of
 | `primaryButtonProps`          | `Omit<ButtonWithoutChildrenProps, 'children'>` | Additional props to pass to the primary button (colorScheme defaults to 'highlight', variant to 'solid')      | -       |
 | `secondaryButtonProps`        | `Omit<ButtonWithoutChildrenProps, 'children'>` | Additional props to pass to the secondary button (colorScheme defaults to 'functional', variant to 'outline') | -       |
 | `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`    | Additional props to pass to the close button                                                                  | -       |
-| `fullscreen`                  | `boolean`                                      | Whether the modal should take up the full screen height (useful for navigation modals)                        | `false` |
+| `fullscreen`                  | `boolean`                                      | Whether the modal should take up the full screen height                                                       | `false` |
+| `inNavModal`                  | `boolean`                                      | Renders the modal correctly when used inside a navigation modal                                               | `false` |
 
 ## Features
 
@@ -292,6 +294,33 @@ const ImageModal = () => {
 };
 ```
 
+### Fullscreen Modal
+
+Create a modal that takes up the full screen height:
+
+<Canvas of={Stories.FullscreenModal} />
+
+```tsx
+const FullscreenModal = () => {
+  const modalRef = useRef<BottomSheetModal>(null);
+
+  return (
+    <>
+      <Button onPress={() => modalRef.current?.present()}>Show Fullscreen Modal</Button>
+
+      <Modal
+        ref={modalRef}
+        heading="Fullscreen Modal"
+        description="This modal takes up the full screen height"
+        primaryButtonText="Close"
+        onPressPrimaryButton={() => modalRef.current?.dismiss()}
+        fullscreen
+      />
+    </>
+  );
+};
+```
+
 ### Modal with Custom Content
 
 Add custom content between the header and footer sections:
@@ -414,9 +443,9 @@ const AlertModal = () => {
 };
 ```
 
-### Fullscreen Modal (Usage with navigation modal)
+### Modal In Navigation Modal
 
-When using the Modal component in a navigation context, you can set it to fullscreen mode, this will make it behave like a standard modal screen.
+When using the Modal component in a navigation context, you can set it to `inNavModal` mode, this will make it behave like a standard modal screen.
 Here's an example of how to implement this with custom close animations for Android:
 
 ```tsx
@@ -465,7 +494,7 @@ export default function ModalScreen() {
   return (
     <Modal
       ref={modalRef}
-      fullscreen
+      inNavModal
       onPressCloseButton={handleClose}
       primaryButtonText="Action"
       onPressPrimaryButton={handleClose}

package/src/components/Modal/Modal.props.ts

@@ -9,6 +9,7 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
   showCloseButton?: boolean;
   heading?: string;
   description?: string;
+  inNavModal?: boolean;
   fullscreen?: boolean;
   children?: ViewProps['children'];
   onPressPrimaryButton?: () => void;

package/src/components/Modal/Modal.stories.tsx

@@ -41,6 +41,12 @@ const meta = {
       control: 'boolean',
       description: 'Whether the modal is in a loading state.',
     },
+    fullscreen: {
+      control: 'boolean',
+      description: 'Whether the modal should take up the full screen height.',
+    },
+  },
+  actions: {
     onPressPrimaryButton: { action: () => null },
     onPressSecondaryButton: { action: () => null },
     onPressCloseButton: { action: () => null },
@@ -52,6 +58,7 @@ const meta = {
     primaryButtonText: 'Primary',
     secondaryButtonText: 'Cancel',
     loading: false,
+    fullscreen: false,
     onPressCloseButton: () => null,
     onPressPrimaryButton: () => null,
     onPressSecondaryButton: () => null,
@@ -192,3 +199,42 @@ export const Loading = () => {
     </View>
   );
 };
+
+export const FullscreenModal: Story = {
+  render: () => {
+    const modalRef = useRef<BottomSheetModal>(null);
+
+    const openModal = () => {
+      modalRef.current?.present();
+    };
+
+    const closeModal = () => {
+      modalRef.current?.dismiss();
+    };
+
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 800 } : { flex: 1 }}>
+        <ViewWrap>
+          <Button onPress={openModal}>Open Fullscreen Modal</Button>
+
+          <Modal
+            ref={modalRef}
+            heading="Fullscreen Modal Heading"
+            description="This is a fullscreen modal description"
+            onPressCloseButton={closeModal}
+            primaryButtonText="Primary"
+            onPressPrimaryButton={closeModal}
+            secondaryButtonText="Cancel"
+            onPressSecondaryButton={closeModal}
+            fullscreen
+          >
+            <Box gap="200">
+              <BodyText>This is a fullscreen modal with content.</BodyText>
+              <BodyText>You can swipe it up and down to close.</BodyText>
+            </Box>
+          </Modal>
+        </ViewWrap>
+      </View>
+    );
+  },
+};

package/src/components/Modal/Modal.tsx

@@ -37,11 +37,12 @@ const Modal = ({
   closeOnPrimaryButtonPress = true,
   closeOnSecondaryButtonPress = true,
   loading,
+  fullscreen = false,
   image,
   primaryButtonProps,
   secondaryButtonProps,
   closeButtonProps,
-  fullscreen = false,
+  inNavModal = false,
   ...props
 }: ModalProps) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
@@ -52,7 +53,7 @@ const Modal = ({
   const pretendContentTranslateY = useSharedValue(20);
 
   const triggerCloseAnimation = useCallback(() => {
-    if (Platform.OS === 'android' && fullscreen) {
+    if (Platform.OS === 'android' && inNavModal) {
       pretendContentTranslateY.value = withTiming(20, {
         duration: 50,
         easing: Easing.in(Easing.quad),
@@ -62,16 +63,16 @@ const Modal = ({
         easing: Easing.in(Easing.quad),
       });
     }
-  }, [Platform.OS, fullscreen, pretendContentTranslateY, backgroundOpacity]);
+  }, [Platform.OS, inNavModal, pretendContentTranslateY, backgroundOpacity]);
 
   useImperativeHandle(ref, () => ({
     ...(bottomSheetModalRef.current as BottomSheetModal),
     triggerCloseAnimation,
   }));
 
-  // Trigger animations on render for fullscreen Android modal
+  // Trigger animations on render for inNavModal Android modal
   useEffect(() => {
-    if (Platform.OS === 'android' && fullscreen) {
+    if (Platform.OS === 'android' && inNavModal) {
       backgroundOpacity.value = withDelay(
         300,
         withTiming(1, {
@@ -87,7 +88,7 @@ const Modal = ({
         })
       );
     }
-  }, [fullscreen, backgroundOpacity, pretendContentTranslateY]);
+  }, [inNavModal, backgroundOpacity, pretendContentTranslateY]);
 
   const animatedBackgroundStyle = useAnimatedStyle(() => ({
     backgroundColor: hexWithOpacity(
@@ -96,7 +97,7 @@ const Modal = ({
     ),
   }));
 
-  const animatedFullscreenStyle = useAnimatedStyle(() => ({
+  const animatedInNavModalStyle = useAnimatedStyle(() => ({
     backgroundColor: hexWithOpacity(
       theme.components.overlay.backgroundColor,
       backgroundOpacity.value * (theme.components.overlay.opacity / 100)
@@ -240,7 +241,7 @@ const Modal = ({
     </>
   );
 
-  return fullscreen ? (
+  return inNavModal ? (
     <View style={{ flex: 1, backgroundColor: theme.color.background.primary }}>
       {Platform.OS === 'android' ? (
         <Animated.View style={[styles.androidContainer, animatedBackgroundStyle]}>
@@ -248,18 +249,19 @@ const Modal = ({
         </Animated.View>
       ) : null}
       <Animated.View
-        style={[styles.fullscreenContainer, Platform.OS === 'android' && animatedFullscreenStyle]}
+        style={[styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle]}
       >
-        <View style={styles.fullscreenContent}>{content}</View>
+        <View style={styles.inNavModalContent}>{content}</View>
       </Animated.View>
     </View>
   ) : (
     <BottomSheetModal
       ref={bottomSheetModalRef}
       enableDynamicSizing={true}
-      snapPoints={image ? ['90%'] : props.snapPoints}
+      snapPoints={image || fullscreen ? ['90%'] : props.snapPoints}
       showHandle={typeof loading !== 'undefined' && loading ? false : props.showHandle}
       accessible={false}
+      style={styles.modal}
       {...props}
       onChange={handleChange}
     >
@@ -272,9 +274,12 @@ const Modal = ({
 };
 
 const styles = StyleSheet.create((theme, rt) => ({
+  modal: {
+    gap: theme.components.modal.content.gap - theme.components.bottomSheet.gap,
+  },
   container: {
     flex: 1,
-    gap: theme.components.dialog.gap,
+    gap: theme.components.modal.gap,
     variants: {
       loading: {
         true: {
@@ -285,11 +290,11 @@ const styles = StyleSheet.create((theme, rt) => ({
   },
   header: {
     flexDirection: 'row',
-    gap: theme.components.dialog.gap,
+    gap: theme.components.modal.gap,
   },
   headerTextContent: {
     flex: 1,
-    gap: theme.components.dialog.content.gap,
+    gap: theme.components.modal.content.gap,
   },
   image: {
     width: 260,
@@ -297,52 +302,51 @@ const styles = StyleSheet.create((theme, rt) => ({
   },
   imageContainer: {
     alignItems: 'center',
-    justifyContent: 'center',
     flex: 1,
   },
   textContent: {
-    gap: theme.components.dialog.content.gap,
+    gap: theme.components.modal.content.gap,
   },
   loadingTop: {
-    borderTopLeftRadius: theme.components.dialog.borderRadius,
-    borderTopRightRadius: theme.components.dialog.borderRadius,
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.borderRadius,
     height: 16,
     backgroundColor: theme.color.surface.neutral.strong,
   },
   loadingContainer: {
-    borderTopLeftRadius: theme.components.dialog.borderRadius,
-    borderTopRightRadius: theme.components.dialog.borderRadius,
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.borderRadius,
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     minHeight: 140,
-    gap: theme.components.dialog.content.gap,
+    gap: theme.components.modal.content.gap,
   },
   footer: {
-    gap: theme.components.dialog.action.gap,
+    gap: theme.components.modal.action.gap,
   },
-  fullscreenContainer: {
+  inNavModalContainer: {
     flex: 1,
     ...(Platform.OS === 'ios' ? { backgroundColor: theme.components.overlay.backgroundColor } : {}),
   },
-  fullscreenContent: {
+  inNavModalContent: {
     flex: 1,
-    borderTopLeftRadius: theme.components.dialog.borderRadius,
-    borderTopRightRadius: theme.components.dialog.borderRadius,
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.borderRadius,
     backgroundColor: theme.color.surface.neutral.strong,
-    gap: theme.components.dialog.gap,
-    padding: theme.components.dialog.padding,
-    paddingBottom: theme.components.dialog.padding + rt.insets.bottom,
+    gap: theme.components.modal.gap,
+    padding: theme.components.modal.padding,
+    paddingBottom: theme.components.modal.padding + rt.insets.bottom,
   },
   androidContainer: {
     height: rt.insets.top + 18,
-    paddingLeft: theme.components.dialog.padding,
-    paddingRight: theme.components.dialog.padding,
+    paddingLeft: theme.components.modal.padding,
+    paddingRight: theme.components.modal.padding,
     justifyContent: 'flex-end',
   },
   pretendContent: {
-    borderTopLeftRadius: theme.components.dialog.borderRadius,
-    borderTopRightRadius: theme.components.dialog.borderRadius,
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.borderRadius,
     height: 12,
     backgroundColor: theme.components.parts.modalStack.backgroundColorCardTop,
   },

package/src/components/Modal/Modal.web.tsx

@@ -41,7 +41,7 @@ const Modal = ({
   primaryButtonProps,
   secondaryButtonProps,
   closeButtonProps,
-  fullscreen = false,
+  inNavModal = false,
   ...props
 }: ModalProps) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
@@ -52,7 +52,7 @@ const Modal = ({
   const pretendContentTranslateY = useSharedValue(20);
 
   const triggerCloseAnimation = useCallback(() => {
-    if (Platform.OS === 'android' && fullscreen) {
+    if (Platform.OS === 'android' && inNavModal) {
       pretendContentTranslateY.value = withTiming(20, {
         duration: 50,
         easing: Easing.in(Easing.quad),
@@ -62,16 +62,16 @@ const Modal = ({
         easing: Easing.in(Easing.quad),
       });
     }
-  }, [Platform.OS, fullscreen, pretendContentTranslateY, backgroundOpacity]);
+  }, [Platform.OS, inNavModal, pretendContentTranslateY, backgroundOpacity]);
 
   useImperativeHandle(ref, () => ({
     ...(bottomSheetModalRef.current as BottomSheetModal),
     triggerCloseAnimation,
   }));
 
-  // Trigger animations on render for fullscreen Android modal
+  // Trigger animations on render for inNavModal Android modal
   useEffect(() => {
-    if (Platform.OS === 'android' && fullscreen) {
+    if (Platform.OS === 'android' && inNavModal) {
       backgroundOpacity.value = withDelay(
         300,
         withTiming(1, {
@@ -87,7 +87,7 @@ const Modal = ({
         })
       );
     }
-  }, [fullscreen, backgroundOpacity, pretendContentTranslateY]);
+  }, [inNavModal, backgroundOpacity, pretendContentTranslateY]);
 
   const animatedBackgroundStyle = useAnimatedStyle(() => ({
     backgroundColor: hexWithOpacity(
@@ -96,7 +96,7 @@ const Modal = ({
     ),
   }));
 
-  const animatedFullscreenStyle = useAnimatedStyle(() => ({
+  const animatedInNavModalStyle = useAnimatedStyle(() => ({
     backgroundColor: hexWithOpacity(
       theme.components.overlay.backgroundColor,
       backgroundOpacity.value * (theme.components.overlay.opacity / 100)
@@ -238,7 +238,7 @@ const Modal = ({
     </>
   );
 
-  return fullscreen ? (
+  return inNavModal ? (
     <View style={{ flex: 1, backgroundColor: theme.color.background.primary }}>
       {Platform.OS === 'android' ? (
         <Animated.View style={[styles.androidContainer, animatedBackgroundStyle]}>
@@ -246,9 +246,9 @@ const Modal = ({
         </Animated.View>
       ) : null}
       <Animated.View
-        style={[styles.fullscreenContainer, Platform.OS === 'android' && animatedFullscreenStyle]}
+        style={[styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle]}
       >
-        <View style={styles.fullscreenContent}>{content}</View>
+        <View style={styles.inNavModalContent}>{content}</View>
       </Animated.View>
     </View>
   ) : (
@@ -271,15 +271,15 @@ const Modal = ({
 const styles = StyleSheet.create((theme, rt) => ({
   container: {
     flex: 1,
-    gap: theme.components.dialog.gap,
+    gap: theme.components.modal.gap,
   },
   header: {
     flexDirection: 'row',
-    gap: theme.components.dialog.gap,
+    gap: theme.components.modal.gap,
   },
   headerTextContent: {
     flex: 1,
-    gap: theme.components.dialog.content.gap,
+    gap: theme.components.modal.content.gap,
   },
   image: {
     width: 260,
@@ -291,40 +291,40 @@ const styles = StyleSheet.create((theme, rt) => ({
     flex: 1,
   },
   textContent: {
-    gap: theme.components.dialog.content.gap,
+    gap: theme.components.modal.content.gap,
   },
   loadingContainer: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     minHeight: 140,
-    gap: theme.components.dialog.content.gap,
+    gap: theme.components.modal.content.gap,
   },
   footer: {
-    gap: theme.components.dialog.action.gap,
+    gap: theme.components.modal.action.gap,
   },
-  fullscreenContainer: {
+  inNavModalContainer: {
     flex: 1,
     ...(Platform.OS === 'ios' ? { backgroundColor: theme.components.overlay.backgroundColor } : {}),
   },
-  fullscreenContent: {
+  inNavModalContent: {
     flex: 1,
-    borderTopLeftRadius: theme.components.dialog.borderRadius,
-    borderTopRightRadius: theme.components.dialog.borderRadius,
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.borderRadius,
     backgroundColor: theme.color.surface.neutral.strong,
-    gap: theme.components.dialog.gap,
-    padding: theme.components.dialog.padding,
-    paddingBottom: theme.components.dialog.padding + rt.insets.bottom,
+    gap: theme.components.modal.gap,
+    padding: theme.components.modal.padding,
+    paddingBottom: theme.components.modal.padding + rt.insets.bottom,
   },
   androidContainer: {
     height: rt.insets.top + 18,
-    paddingLeft: theme.components.dialog.padding,
-    paddingRight: theme.components.dialog.padding,
+    paddingLeft: theme.components.modal.padding,
+    paddingRight: theme.components.modal.padding,
     justifyContent: 'flex-end',
   },
   pretendContent: {
-    borderTopLeftRadius: theme.components.dialog.borderRadius,
-    borderTopRightRadius: theme.components.dialog.borderRadius,
+    borderTopLeftRadius: theme.components.modal.borderRadius,
+    borderTopRightRadius: theme.components.modal.borderRadius,
     height: 12,
     backgroundColor: theme.components.parts.modalStack.backgroundColorCardTop,
   },

package/src/components/PillGroup/Pill.props.ts

@@ -0,0 +1,13 @@
+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/src/components/PillGroup/Pill.tsx

@@ -0,0 +1,120 @@
+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';
+import type { PillProps } from './Pill.props';
+
+const PillRoot = ({
+  value,
+  label,
+  icon,
+  states = {},
+  ...props
+}: PillProps & { states?: { active?: boolean } }) => {
+  const { active } = states;
+  const context = usePillGroupContext();
+  const isSelected = context?.value.includes(value) ?? false;
+
+  styles.useVariants({ selected: isSelected, active });
+
+  const handlePress = () => {
+    context?.onChange(value);
+  };
+
+  return (
+    <Pressable
+      {...props}
+      style={styles.pill}
+      accessibilityRole="button"
+      accessibilityState={{ selected: isSelected }}
+      onPress={handlePress}
+    >
+      {icon && <Icon as={icon} size="sm" style={styles.icon} />}
+      <BodyText weight="semibold" style={styles.text}>
+        {label}
+      </BodyText>
+    </Pressable>
+  );
+};
+
+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/src/components/PillGroup/PillGroup.context.tsx

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+export interface PillGroupContextValue {
+  value: string[];
+  onChange: (value: string) => void;
+}
+
+export const PillGroupContext = createContext<PillGroupContextValue | null>(null);
+
+export const usePillGroupContext = () => {
+  return useContext(PillGroupContext);
+};