@utilitywarehouse/hearth-react-native 0.27.3 → 0.28.0

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

@@ -0,0 +1,47 @@
+import { ViewProps } from 'react-native';
+export type TimelineVariant = 'static' | 'progress';
+export type TimelineItemState = 'complete' | 'active' | 'incomplete';
+export type TimelineItemPosition = 'single' | 'start' | 'middle' | 'end';
+export interface TimelineProps extends ViewProps {
+    /**
+     * Child TimelineItem components.
+     */
+    children: React.ReactNode;
+    /**
+     * Controls the indicator style used by all child timeline items.
+     * @default 'static'
+     */
+    variant?: TimelineVariant;
+}
+export interface TimelineItemProps extends ViewProps {
+    /**
+     * The primary label for the timeline item.
+     */
+    label: string;
+    /**
+     * Optional supporting text displayed beneath the label.
+     */
+    helperText?: string;
+    /**
+     * Visual state for progress timelines.
+     * @default 'incomplete'
+     */
+    state?: TimelineItemState;
+    /**
+     * Optional custom content rendered beneath the text content.
+     */
+    children?: React.ReactNode;
+    /**
+     * The timeline variant used when the item is rendered standalone.
+     * Items inside Timeline receive this automatically.
+     * @default 'static'
+     */
+    variant?: TimelineVariant;
+    /**
+     * The item's position in the timeline used to draw connectors.
+     * Items inside Timeline receive this automatically.
+     * @default 'single'
+     */
+    position?: TimelineItemPosition;
+}
+export default TimelineProps;

package/build/components/Timeline/Timeline.props.js

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

package/build/components/Timeline/TimelineItem.d.ts

@@ -0,0 +1,6 @@
+import type { TimelineItemProps } from './Timeline.props';
+declare const TimelineItem: {
+    ({ children, helperText, label, position, state, style, variant, accessibilityLabel: accessibilityLabelProp, accessible: accessibleProp, ...rest }: TimelineItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TimelineItem;

package/build/components/Timeline/TimelineItem.js

@@ -0,0 +1,235 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
+const TimelineItem = ({ children, helperText, label, position = 'single', state = 'incomplete', style, variant = 'static', accessibilityLabel: accessibilityLabelProp, accessible: accessibleProp, ...rest }) => {
+    styles.useVariants({ position, state, variant });
+    const hasCustomContent = Boolean(children);
+    const computedAccessibilityLabel = [
+        label,
+        helperText,
+        variant === 'progress' ? `Step ${state}` : undefined,
+    ]
+        .filter(Boolean)
+        .join(', ');
+    return (_jsxs(View, { style: [styles.item, style], ...rest, accessible: accessibleProp ?? !hasCustomContent, accessibilityLabel: (accessibleProp ?? !hasCustomContent)
+            ? (accessibilityLabelProp ?? computedAccessibilityLabel)
+            : undefined, children: [_jsxs(View, { style: styles.indicatorColumn, children: [(position === 'middle' || position === 'end') && _jsx(View, { style: styles.topConnector }), _jsx(View, { style: styles.circle, children: variant === 'progress' && state === 'complete' ? (_jsx(Icon, { as: TickSmallIcon, width: 20, height: 20, style: styles.completeIcon })) : variant === 'progress' && state === 'active' ? (_jsx(View, { style: styles.activeInnerDot })) : null }), (position === 'start' || position === 'middle') && _jsx(View, { style: styles.bottomConnector })] }), _jsxs(View, { style: styles.content, children: [_jsxs(View, { style: styles.textContent, accessible: hasCustomContent, accessibilityLabel: hasCustomContent ? (accessibilityLabelProp ?? computedAccessibilityLabel) : undefined, children: [_jsx(BodyText, { size: "md", weight: "semibold", style: styles.label, children: label }), helperText ? (_jsx(BodyText, { size: "md", style: styles.helperText, children: helperText })) : null] }), children ? _jsx(View, { style: styles.customContent, children: children }) : null] })] }));
+};
+TimelineItem.displayName = 'TimelineItem';
+const styles = StyleSheet.create(theme => ({
+    item: {
+        flexDirection: 'row',
+        gap: theme.components.timeline.gap,
+        width: '100%',
+    },
+    indicatorColumn: {
+        alignItems: 'center',
+        variants: {
+            variant: {
+                static: {
+                    width: theme.components.timeline.static.circle.width,
+                },
+                progress: {
+                    width: theme.components.timeline.progress.circle.width,
+                },
+            },
+        },
+    },
+    topConnector: {
+        width: theme.components.timeline.bar.width,
+        variants: {
+            variant: {
+                static: {
+                    height: theme.components.timeline.static.circle.height / 2,
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+                progress: {
+                    height: 0,
+                },
+            },
+            state: {
+                complete: {},
+                active: {},
+                incomplete: {},
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'progress',
+                state: 'complete',
+                styles: {
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+            },
+            {
+                variant: 'progress',
+                state: 'active',
+                styles: {
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+            },
+            {
+                variant: 'progress',
+                state: 'incomplete',
+                styles: {
+                    backgroundColor: theme.color.border.subtle,
+                },
+            },
+        ],
+    },
+    bottomConnector: {
+        flex: 1,
+        minHeight: theme.components.timeline.content.paddingBottom,
+        width: theme.components.timeline.bar.width,
+        variants: {
+            variant: {
+                static: {
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+                progress: {},
+            },
+            state: {
+                complete: {},
+                active: {},
+                incomplete: {},
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'progress',
+                state: 'complete',
+                styles: {
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+            },
+            {
+                variant: 'progress',
+                state: 'active',
+                styles: {
+                    backgroundColor: theme.color.border.subtle,
+                },
+            },
+            {
+                variant: 'progress',
+                state: 'incomplete',
+                styles: {
+                    backgroundColor: theme.color.border.subtle,
+                },
+            },
+        ],
+    },
+    circle: {
+        borderRadius: theme.borderRadius.full,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 2,
+        variants: {
+            variant: {
+                static: {
+                    width: theme.components.timeline.static.circle.width,
+                    height: theme.components.timeline.static.circle.height,
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+                progress: {
+                    width: theme.components.timeline.progress.circle.width,
+                    height: theme.components.timeline.progress.circle.height,
+                },
+            },
+            state: {
+                complete: {},
+                active: {},
+                incomplete: {},
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'progress',
+                state: 'complete',
+                styles: {
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+            },
+            {
+                variant: 'progress',
+                state: 'active',
+                styles: {
+                    backgroundColor: theme.color.surface.neutral.subtle,
+                    borderWidth: theme.borderWidth[2],
+                    borderColor: theme.color.surface.brand.default,
+                },
+            },
+            {
+                variant: 'progress',
+                state: 'incomplete',
+                styles: {
+                    backgroundColor: theme.color.surface.neutral.subtle,
+                    borderWidth: theme.borderWidth[2],
+                    borderColor: theme.color.border.subtle,
+                },
+            },
+        ],
+    },
+    activeInnerDot: {
+        width: '100%',
+        height: '100%',
+        borderRadius: theme.borderRadius.full,
+        backgroundColor: theme.color.surface.brand.default,
+    },
+    completeIcon: {
+        color: theme.color.text.inverted,
+    },
+    content: {
+        flex: 1,
+        minWidth: 0,
+        gap: theme.components.timeline.content.gap,
+        variants: {
+            position: {
+                single: {
+                    paddingBottom: 0,
+                },
+                start: {
+                    paddingBottom: theme.components.timeline.content.paddingBottom,
+                },
+                middle: {
+                    paddingBottom: theme.components.timeline.content.paddingBottom,
+                },
+                end: {
+                    paddingBottom: 0,
+                },
+            },
+            variant: {
+                static: {
+                    paddingTop: 0,
+                },
+                progress: {
+                    paddingTop: theme.components.timeline.content.paddingTop,
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                position: 'start',
+                variant: 'static',
+                styles: {
+                    marginTop: -6,
+                },
+            },
+        ],
+    },
+    textContent: {
+        width: '100%',
+    },
+    label: {
+        color: theme.color.text.primary,
+    },
+    helperText: {
+        color: theme.color.text.secondary,
+    },
+    customContent: {
+        width: '100%',
+    },
+}));
+export default TimelineItem;

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

@@ -0,0 +1,3 @@
+export { default as Timeline } from './Timeline';
+export { default as TimelineItem } from './TimelineItem';
+export type { TimelineItemPosition, TimelineItemProps, TimelineItemState, TimelineProps, TimelineVariant, } from './Timeline.props';

package/build/components/Timeline/index.js

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

package/build/components/index.d.ts

@@ -11,6 +11,7 @@ export * from './Card';
 export * from './Carousel';
 export * from './Center';
 export * from './Checkbox';
+export * from './Combobox';
 export * from './Container';
 export * from './CurrencyInput';
 export * from './DateInput';
@@ -39,20 +40,24 @@ export * from './Link';
 export * from './List';
 export * from './Menu';
 export * from './Modal';
+export * from './Pagination';
 export * from './PillGroup';
 export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
+export * from './SafeAreaView';
 export * from './SectionHeader';
 export * from './SegmentedControl';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
 export * from './Switch';
+export * from './Table';
 export * from './Tabs';
 export * from './Textarea';
 export * from './ThemedImage';
+export * from './Timeline';
 export * from './TimePicker';
 export * from './TimePickerInput';
 export * from './Toast';

package/build/components/index.js

@@ -12,6 +12,7 @@ export * from './Card';
 export * from './Carousel';
 export * from './Center';
 export * from './Checkbox';
+export * from './Combobox';
 export * from './Container';
 export * from './CurrencyInput';
 export * from './DateInput';
@@ -40,20 +41,24 @@ export * from './Link';
 export * from './List';
 export * from './Menu';
 export * from './Modal';
+export * from './Pagination';
 export * from './PillGroup';
 export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
+export * from './SafeAreaView';
 export * from './SectionHeader';
 export * from './SegmentedControl';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
 export * from './Switch';
+export * from './Table';
 export * from './Tabs';
 export * from './Textarea';
 export * from './ThemedImage';
+export * from './Timeline';
 export * from './TimePicker';
 export * from './TimePickerInput';
 export * from './Toast';

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

@@ -13,8 +13,8 @@ declare const _default: {
     readonly gap: 12;
     readonly progress: {
         readonly circle: {
-            readonly height: 24;
-            readonly width: 24;
+            readonly height: 28;
+            readonly width: 28;
         };
     };
     readonly static: {

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

@@ -13,8 +13,8 @@ export default {
     gap: 12,
     progress: {
         circle: {
-            height: 24,
-            width: 24,
+            height: 28,
+            width: 28,
         },
     },
     static: {

package/docs/components/AllComponents.web.tsx

@@ -8,6 +8,7 @@ import {
   ChevronRightMediumIcon,
   EditSmallIcon,
   ElectricityMediumIcon,
+  ExpandSmallIcon,
   InsuranceMediumIcon,
   MobileMediumIcon,
   ShareSmallIcon,
@@ -39,6 +40,7 @@ import {
   CarouselItem,
   Center,
   Checkbox,
+  Combobox,
   Container,
   CurrencyInput,
   DateInput,
@@ -72,6 +74,7 @@ import {
   MenuTrigger,
   Modal,
   OL,
+  Pagination,
   Pill,
   PillGroup,
   ProgressBar,
@@ -89,11 +92,19 @@ import {
   Spinner,
   Switch,
   Tab,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
   TabPanel,
   Tabs,
   TabsList,
   Textarea,
   ThemedImage,
+  Timeline,
+  TimelineItem,
   TimePicker,
   TimePickerInput,
   ToastItem,
@@ -139,6 +150,7 @@ const ComponentWrapper = ({
 };
 
 const AllComponents: React.FC = () => {
+  const [comboboxValue, setComboboxValue] = React.useState<string | null>('uk');
   const [selectValue, setSelectValue] = React.useState('1');
   const [toggleButtonValue, setToggleButtonValue] = React.useState('');
   const bottomSheetRef = useRef<BottomSheet>(null);
@@ -349,6 +361,24 @@ const AllComponents: React.FC = () => {
               </View>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Combobox" link="/?path=/docs/forms-combobox--docs">
+            <Center flex={1}>
+              <BottomSheetModalProvider>
+                <Combobox
+                  label="Search a country"
+                  placeholder="Search for a country"
+                  searchPlaceholder="Search for a country"
+                  options={[
+                    { label: 'United Kingdom', value: 'uk' },
+                    { label: 'United States', value: 'us' },
+                    { label: 'Canada', value: 'ca' },
+                  ]}
+                  value={comboboxValue}
+                  onValueChange={setComboboxValue}
+                />
+              </BottomSheetModalProvider>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Container" link="/?path=/docs/primitives-container--docs">
             <Container spacing="md" backgroundColor="secondary">
               <Box h={20} bg={color.blue[300]} />
@@ -390,29 +420,6 @@ const AllComponents: React.FC = () => {
               </BottomSheetModalProvider>
             </Center>
           </ComponentWrapper>
-          <ComponentWrapper name="Time Picker" link="/?path=/docs/components-time-picker--docs">
-            <Center flex={1}>
-              <Button onPress={handleTimePickerOpenPress}>Open Time Picker</Button>
-              <BottomSheetModalProvider>
-                <TimePicker
-                  ref={timePickerRef}
-                  date={selectedTime}
-                  onChange={({ date }) => setSelectedTime(date)}
-                  onCancel={() => setSelectedTime(undefined)}
-                />
-              </BottomSheetModalProvider>
-            </Center>
-          </ComponentWrapper>
-          <ComponentWrapper
-            name="Time Picker Input"
-            link="/?path=/docs/forms-time-picker-input--docs"
-          >
-            <Center flex={1} padding="200">
-              <BottomSheetModalProvider>
-                <TimePickerInput placeholder="HH:mm" />
-              </BottomSheetModalProvider>
-            </Center>
-          </ComponentWrapper>
           <ComponentWrapper
             name="Description List"
             link="/?path=/docs/components-description-list--docs"
@@ -681,6 +688,19 @@ const AllComponents: React.FC = () => {
               </OL>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Pagination" link="/?path=/docs/components-pagination--docs">
+            <Center flex={1} p="200">
+              <Box style={{ width: 280 }}>
+                <Pagination
+                  currentPage={3}
+                  totalPages={10}
+                  onPageChange={() => {}}
+                  condensed
+                  hideSkipButtons
+                />
+              </Box>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Pill Group" link="/?path=/docs/components-pill-group--docs">
             <Center flex={1} p="200">
               <PillGroup
@@ -733,6 +753,7 @@ const AllComponents: React.FC = () => {
               </RadioCardGroup>
             </Center>
           </ComponentWrapper>
+
           <ComponentWrapper
             name="Section Header"
             link="/?path=/docs/components-section-header--docs"
@@ -795,6 +816,36 @@ const AllComponents: React.FC = () => {
               <Switch value={switchEnabled} onValueChange={toggleSwitch} />
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Table" link="/?path=/docs/components-table--docs">
+            <Center flex={1} px="300">
+              <Box style={{ width: 360 }}>
+                <Table container="subtle">
+                  <TableHeader color="purple">
+                    <TableHeaderCell
+                      trailingContent={<Icon as={ExpandSmallIcon} color="#fcfbf2" />}
+                    >
+                      Name
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      trailingContent={<Icon as={ExpandSmallIcon} color="#fcfbf2" />}
+                    >
+                      Plan
+                    </TableHeaderCell>
+                  </TableHeader>
+                  <TableBody>
+                    <TableRow>
+                      <TableHeaderCell row>Alex Morgan</TableHeaderCell>
+                      <TableCell>Full Fibre 900</TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableHeaderCell row>Priya Shah</TableHeaderCell>
+                      <TableCell>Energy Saver</TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </Box>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Tabs" link="/?path=/docs/components-tabs--docs">
             <Center flex={1}>
               <Tabs defaultValue="tab-1">
@@ -831,6 +882,38 @@ const AllComponents: React.FC = () => {
               />
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Timeline" link="/?path=/docs/components-timeline--docs">
+            <Center flex={1} px="300">
+              <Timeline variant="progress">
+                <TimelineItem label="Order placed" helperText="Received" state="complete" />
+                <TimelineItem label="Checking details" helperText="In progress" state="active" />
+                <TimelineItem label="Service live" helperText="Pending" state="incomplete" />
+              </Timeline>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper name="Time Picker" link="/?path=/docs/components-time-picker--docs">
+            <Center flex={1}>
+              <Button onPress={handleTimePickerOpenPress}>Open Time Picker</Button>
+              <BottomSheetModalProvider>
+                <TimePicker
+                  ref={timePickerRef}
+                  date={selectedTime}
+                  onChange={({ date }) => setSelectedTime(date)}
+                  onCancel={() => setSelectedTime(undefined)}
+                />
+              </BottomSheetModalProvider>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper
+            name="Time Picker Input"
+            link="/?path=/docs/forms-time-picker-input--docs"
+          >
+            <Center flex={1} padding="200">
+              <BottomSheetModalProvider>
+                <TimePickerInput placeholder="HH:mm" />
+              </BottomSheetModalProvider>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Toast" link="/?path=/docs/components-toast--docs">
             <Center flex={1} p="200">
               <ToastItem