@utilitywarehouse/hearth-react-native 0.16.1 → 0.17.0

package/src/components/Card/CardRoot.tsx

@@ -1,104 +1,18 @@
-import React, { ReactNode, useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 import { GestureResponderEvent, Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { useStyleProps } from '../../hooks';
 import { CardContext } from './Card.context';
 import CardProps from './Card.props';
+import CardActions from './CardActions';
 import CardContent from './CardContent';
-
-// Helper to check if children contain specific component types
-const checkForComponentType = (children: React.ReactNode, displayName: string): boolean => {
-  return React.Children.toArray(children).some(child => {
-    if (React.isValidElement(child)) {
-      // @ts-expect-error - type
-      if (child.type.displayName === displayName) {
-        return true;
-      }
-      const childProps = child.props as any;
-      if (childProps.children) {
-        return checkForComponentType(childProps.children, displayName);
-      }
-    }
-    return false;
-  });
-};
-
-// Helper to filter out specific component types from children
-const filterChildren = (children: React.ReactNode, excludeDisplayName: string): React.ReactNode => {
-  return React.Children.map(children, child => {
-    if (React.isValidElement(child)) {
-      // @ts-expect-error - type
-      if (child.type.displayName === excludeDisplayName) {
-        return null;
-      }
-      const childProps = child.props as any;
-      if (childProps.children) {
-        return React.cloneElement(child, {
-          ...childProps,
-          children: filterChildren(childProps.children, excludeDisplayName),
-        });
-      }
-    }
-    return child;
-  });
-};
-
-// Helper to extract specific component types from children
-const extractChildren = (
-  children: React.ReactNode,
-  includeDisplayName: string,
-  markFirst = false
-): React.ReactNode => {
-  let isFirstFound = false;
-  return React.Children.map(children, child => {
-    if (React.isValidElement(child)) {
-      // @ts-expect-error - type
-      if (child.type.displayName === includeDisplayName) {
-        const isFirst = markFirst && !isFirstFound;
-        if (isFirst) {
-          isFirstFound = true;
-        }
-        return markFirst
-          ? React.cloneElement(child, { ...(child.props || {}), isFirst } as any)
-          : child;
-      }
-      const childProps = child.props as any;
-      if (childProps.children) {
-        return extractChildren(childProps.children, includeDisplayName, markFirst);
-      }
-    }
-    return null;
-  });
-};
-
-// Helper that recursively collects onPress or other defined handlers from descendants
-const collectChildActionHandlers = (
-  children: React.ReactNode
-): Array<(e: GestureResponderEvent) => void> =>
-  React.Children.toArray(children).reduce(
-    (handlers, child) => {
-      if (React.isValidElement(child)) {
-        const childProps = child.props as any;
-        // @ts-expect-error - type
-        if (child.type.displayName === 'CardPressHandler') {
-          const actionChildren = React.Children.toArray(childProps.children);
-          const handlerToInherit = childProps['handlerToInherit'] || 'onPress';
-          const firstChild = actionChildren[0];
-          if (
-            React.isValidElement(firstChild) &&
-            typeof (firstChild.props as any)[handlerToInherit] === 'function'
-          ) {
-            handlers.push((firstChild.props as any)[handlerToInherit]);
-          }
-        }
-        if (childProps.children) {
-          handlers.push(...collectChildActionHandlers(childProps.children));
-        }
-      }
-      return handlers;
-    },
-    [] as Array<(e: GestureResponderEvent) => void>
-  );
+import {
+  checkForComponentType,
+  collectChildActionHandlers,
+  extractCardActions,
+  filterChildren,
+  hasOnlyPotentialActions,
+} from './helpers';
 
 const Card = ({
   children,
@@ -116,8 +30,8 @@ const Card = ({
 }: CardProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { active } = states || { active: false };
   const childActionHandlers = collectChildActionHandlers(children as ReactNode);
-  const hasActions = checkForComponentType(children as ReactNode, 'CardAction');
-  const hasContent = checkForComponentType(children as ReactNode, 'CardContent');
+  const hasActions = checkForComponentType(children as ReactNode, CardActions);
+  const hasContent = checkForComponentType(children as ReactNode, CardContent);
   // Extract style props using our custom hook
   const { computedStyles, remainingProps } = useStyleProps(rest);
 
@@ -132,19 +46,9 @@ const Card = ({
   const inheritChildAction = childActionHandlers.length > 0;
   const showPressed = inheritChildAction || !!onPress;
 
-  const filteredChildren =
-    !hasContent && hasActions ? filterChildren(children as ReactNode, 'CardAction') : null;
-
-  // Check if there's any content besides CardActions
-  const hasOnlyActions =
-    hasActions &&
-    !hasContent &&
-    React.Children.toArray(filteredChildren).filter(child => child != null).length === 0;
-
-  const filteredCardActions =
-    !hasContent && hasActions
-      ? extractChildren(children as ReactNode, 'CardAction', hasOnlyActions)
-      : null;
+  // Check if all children are action groups (CardActions)
+  const potentiallyOnlyActions = hasOnlyPotentialActions(children as ReactNode, CardActions);
+  const hasOnlyActions = potentiallyOnlyActions && !hasContent;
 
   const context = useMemo(
     () => ({
@@ -162,38 +66,30 @@ const Card = ({
   styles.useVariants({
     variant,
     colorScheme,
-    noPadding: noPadding || hasActions || hasContent,
+    noPadding: noPadding || hasActions || hasContent || hasOnlyActions,
     active,
     showPressed,
     disabled,
-    space: hasActions || hasContent ? 'none' : space,
+    space: hasActions || hasContent || hasOnlyActions ? 'none' : space,
     shadowColor,
   });
 
   const renderChildren = () => {
-    // Default: render children as-is
-    if (hasContent || !hasActions) {
+    // Explicit CardContent used - render as-is or Card has only actions (or potential action wrappers) - render children directly
+    if (hasContent || hasOnlyActions || !hasActions) {
       return children as ReactNode;
     }
 
-    // Card has actions but no explicit CardContent
-    if (hasOnlyActions) {
-      // Only CardActions, no other content - render actions directly
-      return filteredCardActions as ReactNode;
-    }
+    // Has both actions and other content - wrap non-action content and render actions separately
+    const filteredNonActionChildren = filterChildren(children as ReactNode, CardActions);
+    const cardActions = extractCardActions(children as ReactNode, CardActions);
 
-    if (filteredChildren) {
-      // Has both actions and other content - wrap content and render actions below
-      return (
-        <>
-          <CardContent>{filteredChildren as ReactNode}</CardContent>
-          {filteredCardActions as ReactNode}
-        </>
-      );
-    }
-
-    // Fallback
-    return children as ReactNode;
+    return (
+      <>
+        <CardContent>{filteredNonActionChildren as ReactNode}</CardContent>
+        {cardActions}
+      </>
+    );
   };
 
   return (
@@ -298,7 +194,6 @@ const styles = StyleSheet.create(theme => ({
           },
         },
       },
-
       active: {
         true: {},
       },

package/src/components/Card/helpers.tsx

@@ -0,0 +1,195 @@
+import React from 'react';
+import { GestureResponderEvent } from 'react-native';
+
+const getInheritableHandler = (
+  child: React.ReactNode,
+  handlerToInherit: string
+): ((e: GestureResponderEvent) => void) | null => {
+  if (!React.isValidElement(child)) {
+    return null;
+  }
+
+  const childProps = child.props as any;
+  const isDisabled = !!childProps.disabled || !!childProps.loading;
+  if (isDisabled || typeof childProps[handlerToInherit] !== 'function') {
+    return null;
+  }
+
+  return childProps[handlerToInherit];
+};
+
+// Helper to check if children contain specific component types
+export const checkForComponentType = (
+  children: React.ReactNode,
+  componentType: React.ComponentType<any>
+): boolean => {
+  return React.Children.toArray(children).some(child => {
+    if (React.isValidElement(child)) {
+      if (child.type === componentType) {
+        return true;
+      }
+      const childProps = child.props as any;
+      if (childProps.children) {
+        return checkForComponentType(childProps.children, componentType);
+      }
+    }
+    return false;
+  });
+};
+
+// Check if a component has "content" in its children (not just actions)
+export const hasContentInChildren = (
+  child: React.ReactNode,
+  actionType: React.ComponentType<any>
+): boolean => {
+  if (!React.isValidElement(child)) {
+    return false;
+  }
+
+  const childProps = child.props as any;
+  if (!childProps?.children) {
+    return false;
+  }
+
+  // Check if children contain anything other than the action type
+  const childrenArray = React.Children.toArray(childProps.children);
+  return childrenArray.some(c => {
+    if (!React.isValidElement(c)) {
+      // Text, numbers, etc - this is content
+      return c != null;
+    }
+    return c.type !== actionType;
+  });
+};
+
+// Check if all children are CardActions groups
+export const hasOnlyPotentialActions = (
+  children: React.ReactNode,
+  actionType: React.ComponentType<any>
+): boolean => {
+  const childArray = React.Children.toArray(children);
+  if (childArray.length === 0) {
+    return false;
+  }
+
+  let hasActionCandidate = false;
+
+  for (const child of childArray) {
+    if (!React.isValidElement(child)) {
+      if (child != null) {
+        return false;
+      }
+      continue;
+    }
+
+    if (child.type === actionType) {
+      hasActionCandidate = true;
+      continue;
+    }
+
+    if (checkForComponentType(child, actionType)) {
+      hasActionCandidate = true;
+      continue;
+    }
+
+    if (typeof child.type === 'string') {
+      return false;
+    }
+
+    if (hasContentInChildren(child, actionType)) {
+      return false;
+    }
+
+    return false;
+  }
+
+  return hasActionCandidate || checkForComponentType(children, actionType);
+};
+
+// Helper to filter out specific component types from children
+export const filterChildren = (
+  children: React.ReactNode,
+  excludeComponentType: React.ComponentType<any>
+): React.ReactNode => {
+  return React.Children.map(children, child => {
+    if (React.isValidElement(child)) {
+      if (child.type === excludeComponentType) {
+        return null;
+      }
+
+      // Check if this child contains the excludeComponentType
+      if (checkForComponentType(child, excludeComponentType)) {
+        return null; // This child or its descendants contain the action
+      }
+
+      const childProps = child.props as any;
+      if (childProps.children) {
+        const filteredChildren = filterChildren(childProps.children, excludeComponentType);
+        // Only preserve wrapper if it has non-null children
+        const hasContent = React.Children.toArray(filteredChildren).some(c => c != null);
+        if (!hasContent) {
+          return null;
+        }
+        return React.cloneElement(child, {
+          ...childProps,
+          children: filteredChildren,
+        });
+      }
+    }
+    return child;
+  });
+};
+
+// Helper to extract only CardActions (preserving wrapper components)
+export const extractCardActions = (
+  children: React.ReactNode,
+  actionType: React.ComponentType<any>
+): React.ReactNode => {
+  const recursiveExtract = (children: React.ReactNode): React.ReactNode => {
+    return React.Children.map(children, child => {
+      if (!React.isValidElement(child)) return null;
+
+      // Direct action
+      if (child.type === actionType) {
+        return child;
+      }
+
+      // If this child contains a CardActions wrapper in its tree, keep it
+      if (checkForComponentType(child, actionType) && !hasContentInChildren(child, actionType)) {
+        return child;
+      }
+
+      return null;
+    });
+  };
+
+  return recursiveExtract(children);
+};
+
+// Helper that recursively collects onPress or other defined handlers from descendants
+export const collectChildActionHandlers = (
+  children: React.ReactNode
+): Array<(e: GestureResponderEvent) => void> =>
+  React.Children.toArray(children).reduce(
+    (handlers, child) => {
+      if (React.isValidElement(child)) {
+        const childProps = child.props as any;
+        // Check using displayName as CardPressHandler might not be directly importable
+        // @ts-expect-error - type
+        if (child.type?.displayName === 'CardPressHandler') {
+          const actionChildren = React.Children.toArray(childProps.children);
+          const handlerToInherit = childProps['handlerToInherit'] || 'onPress';
+          const firstChild = actionChildren[0];
+          const handler = getInheritableHandler(firstChild, handlerToInherit);
+          if (handler) {
+            handlers.push(handler);
+          }
+        }
+        if (childProps.children) {
+          handlers.push(...collectChildActionHandlers(childProps.children));
+        }
+      }
+      return handlers;
+    },
+    [] as Array<(e: GestureResponderEvent) => void>
+  );

package/src/components/Card/index.ts

@@ -1,5 +1,7 @@
 export { default as Card } from './Card';
 export { useCardContext } from './Card.context';
 export * from './CardAction';
+export { default as CardActions } from './CardActions';
+export { default as CardContent } from './CardContent';
 export { default as CardPressHandler } from './CardPressHandler';
 export { useCardPressHandlerContext } from './CardPressHandler.context';

package/src/components/DateInput/DateInput.docs.mdx

@@ -26,6 +26,7 @@ The `DateInput` component allows users to enter dates manually using separate in
   - [Flexible Segments](#flexible-segments)
   - [Grouping Inputs](#grouping-inputs)
   - [With State](#with-state)
+  - [Overriding Styles](#overriding-styles)
 - [Accessibility](#accessibility)
 
 ## Playground
@@ -65,35 +66,38 @@ const MyComponent = () => {
 
 ### DateInputProps
 
-| Prop               | Type                                | Default     | Description                                           |
-| ------------------ | ----------------------------------- | ----------- | ----------------------------------------------------- |
-| `label`            | `string`                            | -           | Label text displayed above the inputs                 |
-| `helperText`       | `string`                            | -           | Helper text displayed below the inputs                |
-| `helperIcon`       | `ComponentType`                     | -           | Icon component to display with helper/validation text |
-| `validationStatus` | `'initial' \| 'valid' \| 'invalid'` | `'initial'` | Validation status of the input                        |
-| `validText`        | `string`                            | -           | Text to display when validation status is valid       |
-| `invalidText`      | `string`                            | -           | Text to display when validation status is invalid     |
-| `required`         | `boolean`                           | `false`     | Whether the input is required                         |
-| `disabled`         | `boolean`                           | `false`     | Whether the input is disabled                         |
-| `readonly`         | `boolean`                           | `false`     | Whether the input is read-only                        |
-| `hideDay`          | `boolean`                           | `false`     | Whether to hide the day segment                       |
-| `hideMonth`        | `boolean`                           | `false`     | Whether to hide the month segment                     |
-| `hideYear`         | `boolean`                           | `false`     | Whether to hide the year segment                      |
-| `dayPlaceholder`   | `string`                            | `'DD'`      | Placeholder text for the day segment                  |
-| `monthPlaceholder` | `string`                            | `'MM'`      | Placeholder text for the month segment                |
-| `yearPlaceholder`  | `string`                            | `'YYYY'`    | Placeholder text for the year segment                 |
-| `dayValue`         | `string`                            | -           | Controlled value for the day segment                  |
-| `monthValue`       | `string`                            | -           | Controlled value for the month segment                |
-| `yearValue`        | `string`                            | -           | Controlled value for the year segment                 |
-| `onDayChange`      | `(text: string) => void`            | -           | Callback fired when the day value changes             |
-| `onMonthChange`    | `(text: string) => void`            | -           | Callback fired when the month value changes           |
-| `onYearChange`     | `(text: string) => void`            | -           | Callback fired when the year value changes            |
-| `onDayFocus`       | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the day segment receives focus    |
-| `onMonthFocus`     | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the month segment receives focus  |
-| `onYearFocus`      | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the year segment receives focus   |
-| `onDayBlur`        | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the day segment loses focus       |
-| `onMonthBlur`      | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the month segment loses focus     |
-| `onYearBlur`       | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the year segment loses focus      |
+| Prop                  | Type                                | Default     | Description                                           |
+| --------------------- | ----------------------------------- | ----------- | ----------------------------------------------------- |
+| `label`               | `string`                            | -           | Label text displayed above the inputs                 |
+| `helperText`          | `string`                            | -           | Helper text displayed below the inputs                |
+| `helperIcon`          | `ComponentType`                     | -           | Icon component to display with helper/validation text |
+| `validationStatus`    | `'initial' \| 'valid' \| 'invalid'` | `'initial'` | Validation status of the input                        |
+| `validText`           | `string`                            | -           | Text to display when validation status is valid       |
+| `invalidText`         | `string`                            | -           | Text to display when validation status is invalid     |
+| `required`            | `boolean`                           | `false`     | Whether the input is required                         |
+| `disabled`            | `boolean`                           | `false`     | Whether the input is disabled                         |
+| `readonly`            | `boolean`                           | `false`     | Whether the input is read-only                        |
+| `hideDay`             | `boolean`                           | `false`     | Whether to hide the day segment                       |
+| `hideMonth`           | `boolean`                           | `false`     | Whether to hide the month segment                     |
+| `hideYear`            | `boolean`                           | `false`     | Whether to hide the year segment                      |
+| `dayPlaceholder`      | `string`                            | `'DD'`      | Placeholder text for the day segment                  |
+| `monthPlaceholder`    | `string`                            | `'MM'`      | Placeholder text for the month segment                |
+| `yearPlaceholder`     | `string`                            | `'YYYY'`    | Placeholder text for the year segment                 |
+| `dayValue`            | `string`                            | -           | Controlled value for the day segment                  |
+| `monthValue`          | `string`                            | -           | Controlled value for the month segment                |
+| `yearValue`           | `string`                            | -           | Controlled value for the year segment                 |
+| `onDayChange`         | `(text: string) => void`            | -           | Callback fired when the day value changes             |
+| `onMonthChange`       | `(text: string) => void`            | -           | Callback fired when the month value changes           |
+| `onYearChange`        | `(text: string) => void`            | -           | Callback fired when the year value changes            |
+| `onDayFocus`          | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the day segment receives focus    |
+| `onMonthFocus`        | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the month segment receives focus  |
+| `onYearFocus`         | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the year segment receives focus   |
+| `onDayBlur`           | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the day segment loses focus       |
+| `onMonthBlur`         | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the month segment loses focus     |
+| `onYearBlur`          | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the year segment loses focus      |
+| `inputContainerStyle` | `ViewStyle`                         | -           | Custom style for each input container                 |
+| `inputStyle`          | `ViewStyle`                         | -           | Custom style for each input field                     |
+| `inputLabelStyle`     | `TextStyle`                         | -           | Custom style for each input label                     |
 
 ## Examples
 
@@ -155,6 +159,20 @@ Programmatically control date values:
 
 <Canvas of={Stories.WithState} />
 
+### Overriding Styles
+
+You can override the styles of the input containers, input fields, and input labels using the `inputContainerStyle`, `inputStyle`, and `inputLabelStyle` props respectively:
+
+<Canvas of={Stories.CustomWidth} />
+
+```tsx
+<DateInput
+  label="Custom width date input"
+  helperText="Date input with custom width"
+  inputContainerStyle={{ maxWidth: 'auto' }}
+/>
+```
+
 ## Accessibility
 
 - Each segment has a descriptive label ("Day", "Month", "Year") for screen readers

package/src/components/DateInput/DateInput.props.ts

@@ -1,5 +1,6 @@
-import type { TextInputProps } from 'react-native';
+import type { TextInputProps, ViewProps } from 'react-native';
 import type { FormFieldBaseProps } from '../FormField/FormField.props';
+import LabelProps from '../Label/Label.props';
 
 export interface DateInputProps extends FormFieldBaseProps {
   /**
@@ -77,4 +78,34 @@ export interface DateInputProps extends FormFieldBaseProps {
    * Callback fired when the year segment loses focus.
    */
   onYearBlur?: TextInputProps['onBlur'];
+  /*
+   * Style for all the input segment's container.
+   */
+  inputContainerStyle?: ViewProps['style'];
+  /*
+   * Style for all the input segment's TextInput.
+   */
+  inputStyle?: ViewProps['style'];
+  /*
+   * Style for all the input segment's label.
+   */
+  inputLabelStyle?: LabelProps['style'];
+}
+
+export interface DateInputSegmentProps {
+  label: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (text: string) => void;
+  onFocus?: DateInputProps['onDayFocus'];
+  onBlur?: DateInputProps['onDayBlur'];
+  disabled?: boolean;
+  required?: boolean;
+  validationStatus?: DateInputProps['validationStatus'];
+  maxLength?: number;
+  readonly?: boolean;
+  testID?: string;
+  inputContainerStyle?: ViewProps['style'];
+  inputStyle?: ViewProps['style'];
+  inputLabelStyle?: LabelProps['style'];
 }

package/src/components/DateInput/DateInput.stories.tsx

@@ -267,3 +267,13 @@ export const WithState: Story = {
     );
   },
 };
+
+export const CustomWidth: Story = {
+  render: () => (
+    <DateInput
+      label="Custom width date input"
+      helperText="Date input with custom width"
+      inputContainerStyle={{ maxWidth: 'auto' }}
+    />
+  ),
+};

package/src/components/DateInput/DateInput.tsx

@@ -32,6 +32,9 @@ const DateInput = ({
   onDayBlur,
   onMonthBlur,
   onYearBlur,
+  inputLabelStyle,
+  inputContainerStyle,
+  inputStyle,
   ...props
 }: DateInputProps) => {
   return (
@@ -63,6 +66,9 @@ const DateInput = ({
             validationStatus={validationStatus}
             maxLength={2}
             testID="date-input-day"
+            inputContainerStyle={inputContainerStyle}
+            inputStyle={inputStyle}
+            inputLabelStyle={inputLabelStyle}
           />
         )}
         {!hideMonth && (
@@ -79,6 +85,9 @@ const DateInput = ({
             validationStatus={validationStatus}
             maxLength={2}
             testID="date-input-month"
+            inputContainerStyle={inputContainerStyle}
+            inputStyle={inputStyle}
+            inputLabelStyle={inputLabelStyle}
           />
         )}
         {!hideYear && (
@@ -95,6 +104,9 @@ const DateInput = ({
             validationStatus={validationStatus}
             maxLength={4}
             testID="date-input-year"
+            inputContainerStyle={inputContainerStyle}
+            inputStyle={inputStyle}
+            inputLabelStyle={inputLabelStyle}
           />
         )}
       </View>
@@ -111,7 +123,6 @@ const styles = StyleSheet.create(theme => ({
   container: {
     flexDirection: 'row',
     gap: theme.components.input.date.gap,
-    // alignItems: 'stretch',
   },
 }));
 

package/src/components/DateInput/DateInputSegment.tsx

@@ -2,22 +2,7 @@ import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Input } from '../Input';
-import type { DateInputProps } from './DateInput.props';
-
-interface DateInputSegmentProps {
-  label: string;
-  placeholder?: string;
-  value?: string;
-  onChange?: (text: string) => void;
-  onFocus?: DateInputProps['onDayFocus'];
-  onBlur?: DateInputProps['onDayBlur'];
-  disabled?: boolean;
-  required?: boolean;
-  validationStatus?: DateInputProps['validationStatus'];
-  maxLength?: number;
-  readonly?: boolean;
-  testID?: string;
-}
+import type { DateInputSegmentProps } from './DateInput.props';
 
 const DateInputSegment = ({
   label,
@@ -31,11 +16,14 @@ const DateInputSegment = ({
   maxLength,
   readonly,
   testID,
+  inputContainerStyle,
+  inputStyle,
+  inputLabelStyle,
 }: DateInputSegmentProps) => {
   styles.useVariants({ disabled });
   return (
-    <View style={styles.container}>
-      <BodyText size="md" style={styles.label}>
+    <View style={[styles.container, inputContainerStyle]}>
+      <BodyText size="md" style={[styles.label, inputLabelStyle]}>
         {label}
       </BodyText>
       <Input
@@ -51,7 +39,7 @@ const DateInputSegment = ({
         disabled={disabled}
         validationStatus={validationStatus}
         readonly={readonly}
-        style={styles.input}
+        style={inputStyle}
       />
     </View>
   );
@@ -63,7 +51,7 @@ const styles = StyleSheet.create(theme => ({
   container: {
     flex: 1,
     gap: theme.components.input.gap,
-    // maxWidth: 96,
+    maxWidth: 96,
   },
   label: {
     variants: {
@@ -74,9 +62,6 @@ const styles = StyleSheet.create(theme => ({
       },
     },
   },
-  input: {
-    // maxWidth: 96,
-  },
 }));
 
 export default DateInputSegment;