panelui-native 0.22.6 → 0.28.1

package/src/components/chip/index.tsx

@@ -38,7 +38,7 @@ import {
   AnimatedPressable,
   type AnimatedPressableProps,
 } from '../../primitives/animated-pressable';
-import { Text } from '../../primitives/text';
+import { Text, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 import { selectionTick } from '../../utils/haptics';
 
@@ -47,7 +47,7 @@ const chipVariants = tv({
     root: 'flex-row items-center self-start rounded-full border border-transparent',
     label: 'font-medium',
     close:
-      'items-center justify-center rounded-full -mr-1 aspect-square opacity-70',
+      'items-center justify-center rounded-full -me-1 aspect-square opacity-70',
   },
   variants: {
     variant: {
@@ -88,7 +88,7 @@ const chipVariants = tv({
     },
     /** Trims the trailing padding so the close target hugs the right edge. */
     closable: {
-      true: { root: 'pr-1' },
+      true: { root: 'pe-1' },
     },
     disabled: {
       true: { root: 'opacity-[0.56]' },
@@ -246,13 +246,11 @@ const ChipRoot = forwardRef<View, ChipProps>(
     const body = (
       <>
         {start}
-        {typeof children === 'string' ? (
+        {textChildren(children, (text) => (
           <Text className={slots.label({ className: labelClassName })}>
-            {children}
+            {text}
           </Text>
-        ) : (
-          children
-        )}
+        ))}
         {closable ? (
           <Pressable
             accessibilityRole="button"

package/src/components/date-picker/index.tsx

@@ -0,0 +1,237 @@
+/**
+ * DatePicker — a calendar behind a button.
+ *
+ * ```tsx
+ * const [day, setDay] = useState<Date>();
+ *
+ * <DatePicker selected={day} onSelect={setDay} placeholder="Pick a date" />
+ * ```
+ *
+ * It is the `Calendar` in a `Popover` with a trigger that reads back what was
+ * chosen, and it is a separate component from the calendar for the same reason
+ * `Select` is separate from a list: the hard parts are the ones around the
+ * grid — what a closed field says, when the panel closes, and what a range
+ * shows while only half of it has been picked.
+ *
+ * ## It closes when the selection is finished, not when it changes
+ *
+ * A single date is done in one tap, so the panel closes on it. A range needs
+ * two, so it stays open until the second — closing on the first would put
+ * someone back where they started with half a range on screen. Multiple never
+ * closes on its own; only the caller knows when a set is complete.
+ *
+ * ## An anchored panel, not a sheet
+ *
+ * A month grid is a fixed size that fits beside its trigger on any phone, and
+ * a sheet is the right container for a list of unknown length rather than for
+ * a shape that is always the same. Pass `presentation="bottom-sheet"` where the
+ * screen is busy — a form with the keyboard up is the usual case.
+ */
+import { useCallback, useMemo, useState, type ReactElement, type ReactNode } from 'react';
+import { View } from 'react-native';
+import { CalendarIcon } from '../../icons';
+import { Text } from '../../primitives/text';
+import { cn } from '../../utils/cn';
+import { calendarShortDate, resolveCalendar, type CalendarSystem } from '../../utils/date';
+import { Button } from '../button';
+import {
+  Calendar,
+  type CalendarCaptionLayout,
+  type CalendarDisabled,
+  type CalendarMode,
+  type CalendarSelection,
+  type DateRange,
+} from '../calendar';
+import { Popover, type PopoverPresentation } from '../popover';
+
+export type DatePickerMode = CalendarMode;
+
+/** What a closed picker shows when nothing has been chosen yet. */
+const DEFAULT_PLACEHOLDER = 'Pick a date';
+
+/**
+ * The chosen value as one line of text.
+ *
+ * A half-picked range reads as its start followed by a dash rather than as
+ * just the start: the dash is what says the picker is waiting for the other
+ * end, and without it a half range looks like a finished single date.
+ */
+function describe<Mode extends DatePickerMode>(
+  mode: Mode,
+  value: CalendarSelection[Mode] | undefined,
+  locale: string | undefined,
+  system: 'gregory' | 'islamic'
+): string | null {
+  if (!value) return null;
+  const write = (date: Date) => calendarShortDate(date, system, locale);
+
+  if (mode === 'range') {
+    const range = value as DateRange;
+    if (!range.from) return null;
+    return range.to ? `${write(range.from)} – ${write(range.to)}` : `${write(range.from)} –`;
+  }
+
+  if (mode === 'multiple') {
+    const days = value as Date[];
+    if (!days.length) return null;
+    if (days.length === 1) return write(days[0]!);
+    return `${days.length} dates`;
+  }
+
+  return write(value as Date);
+}
+
+export interface DatePickerProps<Mode extends DatePickerMode = 'single'> {
+  /** One day, several, or a span with two ends. */
+  mode?: Mode;
+  /** Controlled selection. Its shape follows `mode`. */
+  selected?: CalendarSelection[Mode];
+  /** Starting selection when uncontrolled. */
+  defaultSelected?: CalendarSelection[Mode];
+  onSelect?: (selected: CalendarSelection[Mode]) => void;
+  /** Controlled open state of the panel. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** What the trigger reads when nothing has been chosen. */
+  placeholder?: string;
+  /** Override how the chosen value is written on the trigger. */
+  format?: (selected: CalendarSelection[Mode]) => string;
+  /** Anchored panel, or a sheet from the bottom of the screen. */
+  presentation?: PopoverPresentation;
+  /** Stop the trigger opening it. */
+  disabled?: boolean;
+  /** Days that cannot be picked: a list, a span, or a rule. */
+  disabledDates?: CalendarDisabled;
+  /** Earliest selectable day. */
+  minDate?: Date;
+  /** Latest selectable day. */
+  maxDate?: Date;
+  /** Months side by side inside the panel. */
+  numberOfMonths?: number;
+  /** `dropdown` swaps the month caption for month and year pickers. */
+  captionLayout?: CalendarCaptionLayout;
+  /** `0` is Sunday. */
+  weekStartsOn?: number;
+  /** BCP 47 tag for the month and weekday names, and for the trigger's text. */
+  locale?: string;
+  /**
+   * Which calendar the months and day numbers are counted in. Forwarded to the
+   * grid, and used for the trigger's own text so the two always agree.
+   */
+  calendar?: CalendarSystem;
+  className?: string;
+  /**
+   * A trigger of your own. Given one, it is cloned with an `onPress` that opens
+   * the panel — so a field row or an icon button can stand in for the default
+   * button without this component knowing what either looks like.
+   */
+  children?: ReactElement<{ onPress?: () => void }> | ReactNode;
+}
+
+function DatePickerRoot<Mode extends DatePickerMode = 'single'>({
+  mode = 'single' as Mode,
+  selected,
+  defaultSelected,
+  onSelect,
+  open: openProp,
+  onOpenChange,
+  placeholder = DEFAULT_PLACEHOLDER,
+  format,
+  presentation = 'popover',
+  disabled = false,
+  disabledDates,
+  minDate,
+  maxDate,
+  numberOfMonths = 1,
+  captionLayout = 'label',
+  weekStartsOn = 0,
+  locale,
+  calendar = 'gregory',
+  className,
+  children,
+}: DatePickerProps<Mode>) {
+  // Resolved here as well as in the grid, because the trigger's text has to be
+  // written in the same calendar the cells were tapped in.
+  const system = useMemo(() => resolveCalendar(calendar, locale), [calendar, locale]);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [internalSelected, setInternalSelected] = useState<CalendarSelection[Mode] | undefined>(
+    defaultSelected
+  );
+
+  const isOpenControlled = openProp !== undefined;
+  const open = isOpenControlled ? openProp : internalOpen;
+
+  const isControlled = selected !== undefined;
+  const value = (isControlled ? selected : internalSelected) as CalendarSelection[Mode];
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!isOpenControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isOpenControlled, onOpenChange]
+  );
+
+  const handleSelect = useCallback(
+    (next: CalendarSelection[Mode]) => {
+      if (!isControlled) setInternalSelected(next);
+      onSelect?.(next);
+
+      // Done in one tap, so it closes on one. A range waits for its second end,
+      // and a set of dates is only the caller's to call finished.
+      if (mode === 'single' && next) setOpen(false);
+      if (mode === 'range' && (next as DateRange | undefined)?.to) setOpen(false);
+    },
+    [isControlled, onSelect, mode, setOpen]
+  );
+
+  const label = useMemo(() => {
+    if (format && value) return format(value);
+    return describe(mode, value, locale, system);
+  }, [format, value, mode, locale, system]);
+
+  const trigger = children ?? (
+    <Button
+      variant="outline"
+      disabled={disabled}
+      className={cn('justify-start gap-2', className)}
+    >
+      <CalendarIcon size={16} />
+      <Text className={label ? undefined : 'text-muted-foreground'}>
+        {label ?? placeholder}
+      </Text>
+    </Button>
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} presentation={presentation}>
+      <Popover.Trigger>{trigger as ReactElement<{ onPress?: () => void }>}</Popover.Trigger>
+      {/* The padding is on the inner view, not the panel: in sheet mode a
+          className on the panel is merged into the sheet's own padding and
+          would replace it. `self-center` for the same reason — the panel does
+          not have to know which presentation it ended up in. */}
+      <Popover.Content width="content-fit">
+        <View className="w-[300px] max-w-full self-center p-3">
+          <Calendar
+            mode={mode}
+            selected={value}
+            onSelect={handleSelect}
+            disabled={disabledDates}
+            minDate={minDate}
+            maxDate={maxDate}
+            numberOfMonths={numberOfMonths}
+            captionLayout={captionLayout}
+            weekStartsOn={weekStartsOn}
+            locale={locale}
+            calendar={calendar}
+          />
+        </View>
+      </Popover.Content>
+    </Popover>
+  );
+}
+DatePickerRoot.displayName = 'DatePicker';
+
+export const DatePicker = Object.assign(DatePickerRoot, {
+  Trigger: Popover.Trigger,
+});

package/src/components/dialog/index.tsx

@@ -14,7 +14,8 @@ import { Pressable, View, type ViewProps } from 'react-native';
 import Animated, { FadeIn, FadeOut, ZoomIn } from 'react-native-reanimated';
 import { Portal } from '../../primitives/portal';
 import { Scrim } from '../../primitives/scrim';
-import { Text, type TextProps } from '../../primitives/text';
+import { Text, type TextProps, textChildren } from '../../primitives/text';
+import { useBackHandler } from '../../hooks/use-back-handler';
 import { cn } from '../../utils/cn';
 
 interface DialogContextValue {
@@ -102,6 +103,10 @@ function DialogContent({
   const context = useDialog('Dialog.Content');
   const { open, setOpen } = context;
 
+  // While the dialog is up, the Android back button closes it rather than
+  // popping the screen behind — but only when tapping outside would too.
+  useBackHandler(open && dismissible, () => setOpen(false));
+
   if (!open) return null;
 
   return (
@@ -130,7 +135,7 @@ function DialogContent({
           )}
           {...props}
           >
-            {children}
+            {textChildren(children)}
           </Animated.View>
         </Animated.View>
       </DialogContext.Provider>

package/src/components/direction/index.tsx

@@ -33,16 +33,19 @@
  * comes from the device — so an app that did force RTL the old way still reads
  * back the truth.
  */
-import { createContext, useContext, useMemo, type ReactNode } from 'react';
-import { I18nManager, View, type ViewProps } from 'react-native';
-import { cn } from '../../utils/cn';
+import { useContext, useMemo, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import {
+  DirectionContext,
+  deviceDirection,
+  useDirection,
+  useDirectionSign,
+  type DirectionValue,
+} from '../../hooks/use-direction';
+import { textChildren } from '../../primitives/text';
 
-export type DirectionValue = 'ltr' | 'rtl';
-
-/** What the device is set to, for anything outside a provider. */
-const deviceDirection = (): DirectionValue => (I18nManager.isRTL ? 'rtl' : 'ltr');
-
-const DirectionContext = createContext<DirectionValue | null>(null);
+export { useDirection, useDirectionSign };
+export type { DirectionValue };
 
 export interface DirectionProps extends ViewProps {
   className?: string;
@@ -56,9 +59,14 @@ export interface DirectionProps extends ViewProps {
 }
 
 /**
- * Provider. Renders one `View` — it has to, since the flip is a style — which
- * fills its parent by default so it can wrap an app. Pass `className` to change
- * that: `flex-none` or a width class both win over the default.
+ * Provider. Renders one `View` — it has to, since the flip is a style.
+ *
+ * The view takes no layout of its own: it is as big as what is inside it, and
+ * `className` says otherwise. Wrapping a whole app therefore wants `flex-1`
+ * explicitly. It used to carry that by default, and every use inside a screen
+ * had to undo it with `flex-none` — a default that is wrong for one of its two
+ * uses is worse than no default, because the wrong one fails silently by
+ * swallowing the rest of the screen.
  */
 export function Direction({ className, children, dir, style, ...props }: DirectionProps) {
   const inherited = useContext(DirectionContext);
@@ -71,8 +79,8 @@ export function Direction({ className, children, dir, style, ...props }: Directi
 
   return (
     <DirectionContext.Provider value={value}>
-      <View className={cn('flex-1', className)} style={[directionStyle, style]} {...props}>
-        {children}
+      <View className={className} style={[directionStyle, style]} {...props}>
+        {textChildren(children)}
       </View>
     </DirectionContext.Provider>
   );
@@ -80,11 +88,3 @@ export function Direction({ className, children, dir, style, ...props }: Directi
 
 Direction.displayName = 'Direction';
 
-/**
- * The reading direction in force, for a component that has to flip maths Yoga
- * cannot flip for it. Safe with no provider mounted: it falls back to the
- * device's own setting.
- */
-export function useDirection(): DirectionValue {
-  return useContext(DirectionContext) ?? deviceDirection();
-}

package/src/components/empty-state/index.tsx

@@ -9,7 +9,7 @@
 import { createContext, forwardRef, useContext, type ReactNode } from 'react';
 import { View, type Text as RNText, type ViewProps } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
-import { Text, type TextProps } from '../../primitives/text';
+import { Text, type TextProps, textChildren } from '../../primitives/text';
 
 type EmptyStateSize = 'sm' | 'default' | 'lg';
 
@@ -140,7 +140,7 @@ const EmptyStateMedia = forwardRef<View, EmptyStateMediaProps>(
             />
           </>
         ) : null}
-        <View className={card()}>{children}</View>
+        <View className={card()}>{textChildren(children)}</View>
       </View>
     );
   }

package/src/components/field/index.tsx

@@ -31,7 +31,7 @@ import {
 } from 'react';
 import { View, type Text as RNText, type ViewProps } from 'react-native';
 import { tv } from 'tailwind-variants';
-import { Text, type TextProps } from '../../primitives/text';
+import { Text, type TextProps, textChildren } from '../../primitives/text';
 import { Label, type LabelProps } from '../label';
 import { Separator } from '../separator';
 
@@ -121,7 +121,7 @@ const FieldRoot = forwardRef<View, FieldProps>(
           className={root({ className })}
           {...props}
         >
-          {children}
+          {textChildren(children)}
         </View>
       </FieldContext.Provider>
     );
@@ -227,10 +227,8 @@ const FieldError = forwardRef<View, FieldErrorProps>(
               </View>
             ))
           )
-        ) : typeof children === 'string' ? (
-          <Text className={errorText()}>{children}</Text>
         ) : (
-          children
+          textChildren(children, (text) => <Text className={errorText()}>{text}</Text>)
         )}
       </View>
     );

package/src/components/flow/index.tsx

@@ -84,7 +84,7 @@ import Svg, {
 import { tv } from 'tailwind-variants';
 import { LockIcon, MaximizeIcon, MinusIcon, PlusIcon, UnlockIcon } from '../../icons';
 import { AnimatedPressable } from '../../primitives/animated-pressable';
-import { Text } from '../../primitives/text';
+import { Text, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 import {
   anchorOf,
@@ -1160,7 +1160,7 @@ function FlowNode({
           accessibilityState={{ selected }}
           {...props}
         >
-          {children}
+          {textChildren(children)}
         </Animated.View>
       </GestureDetector>
     </FlowNodeContext.Provider>
@@ -1772,7 +1772,7 @@ function FlowGroup({
           inside an absolutely-positioned box would be positioned against that
           box, and every graph coordinate would mean something different
           depending on which group it happened to be in. */}
-      {children}
+      {textChildren(children)}
     </FlowGroupContext.Provider>
   );
 }

package/src/components/frame/index.tsx

@@ -14,6 +14,23 @@
  * surfaces read as one misdrawn shape. The panel's bottom corners are not set
  * at all — the shell clips them, so they take its radius exactly.
  *
+ * That clip follows the shell's *border box*, not the box inside its border.
+ * Along the straight edges the panel is held off by the border width and the
+ * edge shows through, but at the corner arcs the panel's square corner is
+ * clipped to the outer radius and paints across the border. At the default
+ * hairline that is a sliver nobody sees. Give the shell a thicker border and
+ * the corners visibly eat it, so a Frame with `border-2` or more needs the
+ * panel told where to stop:
+ *
+ * ```tsx
+ * <Frame className="rounded-[28px] border-2 border-dashed">
+ *   <Frame.Panel className="rounded-b-[26px]">…</Frame.Panel>
+ * </Frame>
+ * ```
+ *
+ * The radius to use is the shell's less its border width. It is on the caller
+ * because both arrive as `className` strings, which the component cannot read.
+ *
  * ```tsx
  * <Frame>
  *   <Frame.Header>
@@ -63,7 +80,7 @@ import {
 } from 'react-native';
 import { tv } from 'tailwind-variants';
 import { ChevronRightIcon } from '../../icons';
-import { Text, type TextProps } from '../../primitives/text';
+import { Text, type TextProps, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 
 const frameVariants = tv({
@@ -191,13 +208,11 @@ const FrameAction = forwardRef<View, FrameActionProps>(
       className={cn('shrink-0 flex-row items-center gap-2', className)}
       {...props}
     >
-      {typeof children === 'string' ? (
+      {textChildren(children, (text) => (
         <Text size="sm" muted>
-          {children}
+          {text}
         </Text>
-      ) : (
-        children
-      )}
+      ))}
     </View>
   )
 );
@@ -376,7 +391,7 @@ const FrameRow = forwardRef<View, FrameRowProps>(
 
     const body = (
       <>
-        {children}
+        {textChildren(children)}
         {chevron ? <ChevronRightIcon size={16} /> : null}
       </>
     );

package/src/components/heatmap-chart/index.tsx

@@ -65,14 +65,23 @@ const AnimatedRect = Animated.createAnimatedComponent(Rect);
 
 /**
  * Rows in a week — the default, and what the calendar helper and the weekday
- * labels assume. The grid itself takes a `rows` prop, so an hourly band or a
- * single-row uptime strip is the same component with a different number.
+ * labels assume. The grid itself takes a `rows` prop, so a grid whose bins are
+ * hours rather than days is the same component with a different number.
  */
 const DAYS_IN_WEEK = 7;
 
 /** Opacity of the base colour at each activity level. Index 0 is "nothing". */
 const LEVEL_OPACITY = [1, 0.28, 0.5, 0.74, 1] as const;
 
+/**
+ * A theme token rather than a colour. Tokens are named, not written, so the
+ * leading `--` tells the two apart without the caller having to say which
+ * kind they passed.
+ */
+function isToken(value: string | undefined): value is string {
+  return typeof value === 'string' && value.startsWith('--');
+}
+
 /** Room left for the weekday labels when the y-axis does not ask for its own. */
 const DEFAULT_AXIS_WIDTH = 26;
 
@@ -317,8 +326,8 @@ export interface HeatmapChartProps extends ViewProps {
   /** Which weekday is the top row. `0` is Sunday. Labels follow it. */
   weekStartDay?: number;
   /**
-   * Rows per column. Seven for a calendar; use another number for a band that
-   * is not a week — twenty-four for hours, one for an uptime strip.
+   * Rows per column. Seven for a calendar; use another number when the bins
+   * are not weekdays — twenty-four for a grid of hours.
    */
   rows?: number;
   /**
@@ -333,8 +342,27 @@ export interface HeatmapChartProps extends ViewProps {
    * opacities, which follows the theme.
    */
   levelColors?: string[];
-  /** Base colour for the derived ramp. Defaults to the `--color-chart-1` token. */
+  /**
+   * Base colour for the derived ramp — the colour the busiest cells are drawn
+   * in, with the quieter levels the same colour at lower opacity.
+   *
+   * Takes a theme token by name as well as a literal, so `"--color-chart-3"`
+   * recolours the chart and keeps following the theme through light and dark.
+   * Defaults to `--color-chart-1`.
+   */
   color?: string;
+  /**
+   * Colour of a cell with nothing in it. Takes a token name too. Defaults to
+   * `--color-muted`, which is the right weight for "measured, and empty" —
+   * override it for a chart that should read as denser or fainter than that.
+   */
+  emptyColor?: string;
+  /**
+   * Opacity of the base colour at each of the five levels, quietest first.
+   * The way to retune the ramp's contrast without having to name five colours.
+   * Ignored when `levelColors` is given, which sets the colours outright.
+   */
+  levelOpacity?: number[];
   /** Milliseconds for the reveal on mount. */
   animationDuration?: number;
   /** Opacity of every cell that is not the one under the finger. */
@@ -361,6 +389,8 @@ const HeatmapChartRoot = forwardRef<View, HeatmapChartProps>(function HeatmapCha
     levels,
     levelColors,
     color,
+    emptyColor,
+    levelOpacity,
     animationDuration = 900,
     inactiveOpacity = 1,
     onActiveCellChange,
@@ -378,10 +408,24 @@ const HeatmapChartRoot = forwardRef<View, HeatmapChartProps>(function HeatmapCha
   const reveal = useSharedValue(0);
   const reducedMotion = useReducedMotion();
 
-  const baseToken = useCSSVariable('--color-chart-1');
-  const emptyToken = useCSSVariable('--color-muted');
-  const base = color ?? (typeof baseToken === 'string' ? baseToken : '#262626');
-  const empty = typeof emptyToken === 'string' ? emptyToken : 'rgba(128,128,128,0.16)';
+  /*
+   * `color` and `emptyColor` take a token name as readily as a literal. A
+   * literal is a colour frozen at the moment it was written — it cannot follow
+   * the theme into dark mode — so naming the token is almost always what the
+   * caller meant, and having to resolve it themselves is the reason they did
+   * not. The hooks run unconditionally; which of the two answers is used is
+   * decided after.
+   */
+  const baseToken = useCSSVariable(isToken(color) ? color : '--color-chart-1');
+  const emptyToken = useCSSVariable(
+    isToken(emptyColor) ? emptyColor : '--color-muted'
+  );
+  const base =
+    (isToken(color) ? undefined : color) ??
+    (typeof baseToken === 'string' ? baseToken : '#262626');
+  const empty =
+    (isToken(emptyColor) ? undefined : emptyColor) ??
+    (typeof emptyToken === 'string' ? emptyToken : 'rgba(128,128,128,0.16)');
 
   const parts = useMemo(() => splitParts(children), [children]);
   // The y-axis is laid out beside the grid rather than over it, so its width
@@ -419,8 +463,11 @@ const HeatmapChartRoot = forwardRef<View, HeatmapChartProps>(function HeatmapCha
     () =>
       levelColors
         ? { ramp: levelColors, opacities: levelColors.map(() => 1) }
-        : { ramp: [empty, base, base, base, base], opacities: [...LEVEL_OPACITY] },
-    [levelColors, empty, base]
+        : {
+            ramp: [empty, base, base, base, base],
+            opacities: levelOpacity ?? [...LEVEL_OPACITY],
+          },
+    [levelColors, levelOpacity, empty, base]
   );
 
   const levelOf = useMemo(

package/src/components/input-group/index.tsx

@@ -22,12 +22,13 @@ import {
 } from 'react-native';
 import { tv } from 'tailwind-variants';
 import { Input, type InputProps } from '../input';
+import { textChildren } from '../../primitives/text';
 
 const inputGroupVariants = tv({
   slots: {
     root: 'w-full',
-    prefix: 'absolute bottom-0 left-0 top-0 z-10 flex-row items-center justify-center gap-2 px-3',
-    suffix: 'absolute bottom-0 right-0 top-0 z-10 flex-row items-center justify-center gap-2 px-3',
+    prefix: 'absolute bottom-0 start-0 top-0 z-10 flex-row items-center justify-center gap-2 px-3',
+    suffix: 'absolute bottom-0 end-0 top-0 z-10 flex-row items-center justify-center gap-2 px-3',
   },
   variants: {
     isDisabled: {
@@ -71,7 +72,7 @@ const InputGroupRoot = forwardRef<View, InputGroupProps>(
     return (
       <InputGroupContext.Provider value={value}>
         <View ref={ref} className={root({ className })} {...props}>
-          {children}
+          {textChildren(children)}
         </View>
       </InputGroupContext.Provider>
     );
@@ -116,7 +117,7 @@ function createDecorator(side: 'prefix' | 'suffix') {
           className={slots[side]({ className })}
           {...props}
         >
-          {children}
+          {textChildren(children)}
         </View>
       );
     }