panelui-native 0.25.0 → 0.30.0

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

@@ -0,0 +1,255 @@
+/**
+ * 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;
+  /** Earliest month the `dropdown` caption offers. Defaults to `minDate`. */
+  startMonth?: Date;
+  /** Latest month the `dropdown` caption offers. Defaults to `maxDate`. */
+  endMonth?: 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;
+  /** Let a tap on a neighbouring month's day select it. Off by default. */
+  selectOutsideDays?: boolean;
+  /** 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,
+  startMonth,
+  endMonth,
+  numberOfMonths = 1,
+  captionLayout = 'label',
+  weekStartsOn = 0,
+  selectOutsideDays = false,
+  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-[308px] max-w-full self-center p-3">
+          {/*
+            Unbordered: the panel around it already draws one, and a card
+            inside a card is a seam. The calendar frames itself only when it is
+            standing on a page.
+          */}
+          <Calendar
+            bordered={false}
+            mode={mode}
+            selected={value}
+            onSelect={handleSelect}
+            disabled={disabledDates}
+            minDate={minDate}
+            maxDate={maxDate}
+            startMonth={startMonth}
+            endMonth={endMonth}
+            numberOfMonths={numberOfMonths}
+            captionLayout={captionLayout}
+            weekStartsOn={weekStartsOn}
+            selectOutsideDays={selectOutsideDays}
+            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

@@ -42,6 +42,7 @@ import {
   useDirectionSign,
   type DirectionValue,
 } from '../../hooks/use-direction';
+import { textChildren } from '../../primitives/text';
 
 export { useDirection, useDirectionSign };
 export type { DirectionValue };
@@ -79,7 +80,7 @@ export function Direction({ className, children, dir, style, ...props }: Directi
   return (
     <DirectionContext.Provider value={value}>
       <View className={className} style={[directionStyle, style]} {...props}>
-        {children}
+        {textChildren(children)}
       </View>
     </DirectionContext.Provider>
   );

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

@@ -80,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({
@@ -208,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>
   )
 );
@@ -393,7 +391,7 @@ const FrameRow = forwardRef<View, FrameRowProps>(
 
     const body = (
       <>
-        {children}
+        {textChildren(children)}
         {chevron ? <ChevronRightIcon size={16} /> : null}
       </>
     );

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

@@ -22,6 +22,7 @@ import {
 } from 'react-native';
 import { tv } from 'tailwind-variants';
 import { Input, type InputProps } from '../input';
+import { textChildren } from '../../primitives/text';
 
 const inputGroupVariants = tv({
   slots: {
@@ -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>
       );
     }

package/src/components/item/index.tsx

@@ -28,7 +28,7 @@ import { createContext, forwardRef, useContext, type ReactNode } from 'react';
 import { View, type ViewProps } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
 import { AnimatedPressable, type AnimatedPressableProps } from '../../primitives/animated-pressable';
-import { Text, type TextProps } from '../../primitives/text';
+import { Text, type TextProps, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 
 type ItemSize = 'default' | 'sm' | 'xs';
@@ -152,7 +152,7 @@ const ItemRoot = forwardRef<View, ItemProps>(
         className={root({ className })}
         {...(props as ViewProps)}
       >
-        {children}
+        {textChildren(children)}
       </View>
     ) : (
       <AnimatedPressable
@@ -164,7 +164,7 @@ const ItemRoot = forwardRef<View, ItemProps>(
         className={root({ className })}
         {...props}
       >
-        {children}
+        {textChildren(children)}
       </AnimatedPressable>
     );
 
@@ -200,7 +200,7 @@ const ItemGroup = forwardRef<View, ItemGroupProps>(
       )}
       {...props}
     >
-      {children}
+      {textChildren(children)}
     </View>
   )
 );
@@ -246,7 +246,7 @@ const ItemMedia = forwardRef<View, ItemMediaProps>(
         className={mediaVariants({ variant, size: size ?? item.size, className })}
         {...props}
       >
-        {children}
+        {textChildren(children)}
       </View>
     );
   }
@@ -277,7 +277,7 @@ const ItemContent = forwardRef<View, ItemContentProps>(
         )}
         {...props}
       >
-        {children}
+        {textChildren(children)}
       </View>
     );
   }
@@ -326,7 +326,7 @@ const ItemActions = forwardRef<View, ItemActionsProps>(
       className={cn('shrink-0 flex-row items-center gap-1.5', className)}
       {...props}
     >
-      {children}
+      {textChildren(children)}
     </View>
   )
 );
@@ -349,7 +349,7 @@ const ItemHeader = forwardRef<View, ItemHeaderProps>(
       className={cn('w-full flex-row items-center justify-between gap-2', className)}
       {...props}
     >
-      {children}
+      {textChildren(children)}
     </View>
   )
 );
@@ -368,7 +368,7 @@ const ItemFooter = forwardRef<View, ItemFooterProps>(
       className={cn('w-full flex-row items-center gap-2', className)}
       {...props}
     >
-      {children}
+      {textChildren(children)}
     </View>
   )
 );

package/src/components/label/index.tsx

@@ -16,7 +16,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';
 
 const labelVariants = tv({
   slots: {
@@ -86,7 +86,7 @@ const LabelRoot = forwardRef<View, LabelProps>(
           {...props}
         >
           {/* Bare strings are the common case — wrap them so callers don't have to. */}
-          {typeof children === 'string' ? <LabelText>{children}</LabelText> : children}
+          {textChildren(children, (text) => <LabelText>{text}</LabelText>)}
         </View>
       </LabelContext.Provider>
     );