@utilitywarehouse/hearth-react-native 0.9.0 → 0.10.0

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

@@ -5,6 +5,7 @@ declare const _default: {
     readonly borderRadius: 16;
     readonly cell: {
         readonly borderWidth: 1;
+        readonly minHeight: 48;
         readonly padding: 12;
     };
     readonly emphasis: {
@@ -13,6 +14,7 @@ declare const _default: {
     readonly headerCell: {
         readonly borderWidth: 2;
         readonly gap: 8;
+        readonly height: 56;
         readonly paddingHorizontal: 12;
         readonly paddingVertical: 16;
     };

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

@@ -5,6 +5,7 @@ export default {
     borderRadius: 16,
     cell: {
         borderWidth: 1,
+        minHeight: 48,
         padding: 12,
     },
     emphasis: {
@@ -13,6 +14,7 @@ export default {
     headerCell: {
         borderWidth: 2,
         gap: 8,
+        height: 56,
         paddingHorizontal: 12,
         paddingVertical: 16,
     },

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

@@ -4,10 +4,14 @@
 declare const _default: {
     readonly backgroundColor: "#3f3f3f";
     readonly borderRadius: 8;
-    readonly gapHorizontal: 16;
+    readonly bottomPosition: 32;
+    readonly gap: 16;
     readonly padding: 14;
     readonly stack: {
-        readonly gapHorizontal: 8;
+        readonly gap: 12;
+    };
+    readonly text: {
+        readonly gap: 8;
     };
 };
 export default _default;

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

@@ -4,9 +4,13 @@
 export default {
     backgroundColor: '#3f3f3f',
     borderRadius: 8,
-    gapHorizontal: 16,
+    bottomPosition: 32,
+    gap: 16,
     padding: 14,
     stack: {
-        gapHorizontal: 8,
+        gap: 12,
+    },
+    text: {
+        gap: 8,
     },
 };

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

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

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

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

package/build/tokens/components/light/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: 2;
+        };
+    };
     readonly height: 48;
     readonly label: {
         readonly gap: 2;

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

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

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

@@ -24,6 +24,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/light/radio.js

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

package/build/tokens/components/light/table.d.ts

@@ -5,6 +5,7 @@ declare const _default: {
     readonly borderRadius: 16;
     readonly cell: {
         readonly borderWidth: 1;
+        readonly minHeight: 48;
         readonly padding: 12;
     };
     readonly emphasis: {
@@ -13,6 +14,7 @@ declare const _default: {
     readonly headerCell: {
         readonly borderWidth: 2;
         readonly gap: 8;
+        readonly height: 56;
         readonly paddingHorizontal: 12;
         readonly paddingVertical: 16;
     };

package/build/tokens/components/light/table.js

@@ -5,6 +5,7 @@ export default {
     borderRadius: 16,
     cell: {
         borderWidth: 1,
+        minHeight: 48,
         padding: 12,
     },
     emphasis: {
@@ -13,6 +14,7 @@ export default {
     headerCell: {
         borderWidth: 2,
         gap: 8,
+        height: 56,
         paddingHorizontal: 12,
         paddingVertical: 16,
     },

package/build/tokens/components/light/toast.d.ts

@@ -4,10 +4,14 @@
 declare const _default: {
     readonly backgroundColor: "#101010";
     readonly borderRadius: 8;
-    readonly gapHorizontal: 16;
+    readonly bottomPosition: 32;
+    readonly gap: 16;
     readonly padding: 14;
     readonly stack: {
-        readonly gapHorizontal: 8;
+        readonly gap: 12;
+    };
+    readonly text: {
+        readonly gap: 8;
     };
 };
 export default _default;

package/build/tokens/components/light/toast.js

@@ -4,9 +4,13 @@
 export default {
     backgroundColor: '#101010',
     borderRadius: 8,
-    gapHorizontal: 16,
+    bottomPosition: 32,
+    gap: 16,
     padding: 14,
     stack: {
-        gapHorizontal: 8,
+        gap: 12,
+    },
+    text: {
+        gap: 8,
     },
 };

package/docs/components/AllComponents.web.tsx

@@ -68,6 +68,8 @@ import {
   MenuTrigger,
   Modal,
   OL,
+  Pill,
+  PillGroup,
   ProgressStep,
   ProgressStepper,
   Radio,
@@ -85,6 +87,7 @@ import {
   TabsList,
   Textarea,
   ThemedImage,
+  ToastItem,
   ToggleButtonCard,
   ToggleButtonCardGroup,
   UL,
@@ -627,6 +630,21 @@ const AllComponents: React.FC = () => {
               </OL>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Pill Group" link="/?path=/docs/components-pill-group--docs">
+            <Center flex={1} p="200">
+              {(() => {
+                const [pillValue, setPillValue] = React.useState<string[]>(['energy', 'mobile']);
+                return (
+                  <PillGroup value={pillValue} onChange={v => setPillValue(v as string[])} wrap={false} multiple>
+                    <Pill value="all" label="All" />
+                    <Pill value="energy" label="Energy" icon={ElectricityMediumIcon} />
+                    <Pill value="broadband" label="Broadband" icon={BroadbandMediumIcon} />
+                    <Pill value="mobile" label="Mobile" icon={MobileMediumIcon} />
+                  </PillGroup>
+                );
+              })()}
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper
             name="Progress Stepper"
             link="/?path=/docs/components-progress-stepper--docs"
@@ -745,6 +763,14 @@ const AllComponents: React.FC = () => {
               />
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Toast" link="/?path=/docs/components-toast--docs">
+            <Center flex={1} p="200">
+              <ToastItem
+                onClose={() => {}}
+                toast={{ id: 'tst', text: "I'm a toast", duration: 0 }}
+              />
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper
             name="Toggle Button Card"
             link="/?path=/docs/components-toggle-button-card--docs"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -57,8 +57,8 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.7.3",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.7.3",
+    "@utilitywarehouse/hearth-react-icons": "^0.7.4",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.7.4",
     "@utilitywarehouse/hearth-svg-assets": "^0.2.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.0"
   },

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);
+};

package/src/components/PillGroup/PillGroup.docs.mdx

@@ -0,0 +1,96 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { BackToTopButton, ViewFigmaButton } from '../../../docs/components';
+import * as PillGroupStories from './PillGroup.stories';
+
+<Meta title="Components / Pill Group" />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens" />
+
+<BackToTopButton />
+
+# Pill Group
+
+A container component that groups multiple `Pill` components together for filtering and categorization. It provides layout control with optional wrapping behavior and manages selection state.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Examples](#examples)
+
+## Playground
+
+<Canvas of={PillGroupStories.Playground} />
+
+<Controls of={PillGroupStories.Playground} />
+
+## Usage
+
+The `PillGroup` component is a controlled component that manages the selection state of multiple `Pill` components. It supports both single and multi-select modes.
+
+### Basic Usage
+
+```tsx
+import { Pill, PillGroup } from '@hearth/react-native';
+import { useState } from 'react';
+
+const [selectedTags, setSelectedTags] = useState(['ui']);
+
+<PillGroup value={selectedTags} onChange={setSelectedTags}>
+  <Pill value="ui" label="UI" />
+  <Pill value="backend" label="Backend" icon={ServerMediumIcon} />
+  <Pill value="devops" label="DevOps" />
+</PillGroup>
+```
+
+## Props
+
+### PillGroup Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string \| string[]` | Required | Controlled selected value(s). Single string for single-select, array for multi-select |
+| `multiple` | `boolean` | `false` | Enable multi-select mode |
+| `wrap` | `boolean` | `true` | Whether pills should wrap to multiple lines when they overflow |
+| `onChange` | `(value: string \| string[]) => void` | - | Handle selection changes. Returns single string in single-select mode, array in multi-select mode |
+| `children` | `ReactNode` | Required | `Pill` components to group together |
+| ...rest | `ViewProps` | - | All standard View props are supported |
+
+### Pill Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | Required | Value returned when selected |
+| `label` | `string` | Required | The text content of the pill |
+| `icon` | `ComponentType<any>` | - | Optional icon component to display before the label |
+| ...rest | `PressableProps` | - | All standard Pressable props are supported |
+
+
+### Multi-Select Mode
+
+```tsx
+const [tags, setTags] = useState(['ui', 'backend']);
+
+<PillGroup multiple value={tags} onChange={setTags}>
+  <Pill value="ui" label="UI" />
+  <Pill value="backend" label="Backend" icon={ServerMediumIcon} />
+  <Pill value="devops" label="DevOps" />
+</PillGroup>
+```
+
+## Examples
+
+### Wrap Behavior
+
+Compare how pills behave with and without wrapping enabled.
+
+<Canvas of={PillGroupStories.WrapBehavior} />
+
+### Multi-Select Example
+
+Select multiple options
+
+<Canvas of={PillGroupStories.Multiple} />
+
+### All States of Pill
+
+<Canvas of={PillGroupStories.PillStates} />

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

@@ -0,0 +1,22 @@
+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[];
+}