panelui-native 0.28.1 → 0.32.0

package/src/index.ts

@@ -21,6 +21,7 @@ export { Portal, PortalHost, PortalProvider } from './primitives/portal';
 // graceful fall back from blur to dim — as the built-in ones.
 export { Scrim, hasBlur, type ScrimProps } from './primitives/scrim';
 export { Text, type TextProps } from './primitives/text';
+export { Collapse, type CollapseProps } from './primitives/collapse';
 export {
   KeyboardAvoider,
   type KeyboardAvoiderProps,
@@ -253,6 +254,20 @@ export {
   type TabsTriggerProps,
   type TabsContentProps,
 } from './components/tabs';
+export {
+  Table,
+  type TableProps,
+  type TableFrameProps,
+  type TableHeaderProps,
+  type TableBodyProps,
+  type TableFooterProps,
+  type TableRowProps,
+  type TableHeadProps,
+  type TableCellProps,
+  type TableCaptionProps,
+  type TableEmptyProps,
+  type TableSortDirection,
+} from './components/table';
 export {
   Carousel,
   useCarouselState,
@@ -271,6 +286,8 @@ export {
 export {
   Calendar,
   type CalendarProps,
+  type CalendarHeaderProps,
+  type CalendarNavProps,
   type CalendarMode,
   type CalendarCaptionLayout,
   type CalendarDisabled,
@@ -332,6 +349,7 @@ export {
   type NumberInputProps,
 } from './components/number-input';
 export { OtpInput, type OtpInputProps } from './components/otp-input';
+export { Textarea, type TextareaProps } from './components/textarea';
 export {
   Item,
   type ItemProps,
@@ -375,6 +393,24 @@ export {
   type MarkerIconProps,
   type MarkerContentProps,
 } from './components/marker';
+export {
+  Menu,
+  type MenuProps,
+  type MenuTriggerProps,
+  type MenuContentProps,
+  type MenuBackgroundProps,
+  type MenuLabelProps,
+  type MenuItemProps,
+  type MenuCheckboxItemProps,
+  type MenuRadioGroupProps,
+  type MenuRadioItemProps,
+  type MenuSeparatorProps,
+  type MenuSubProps,
+  type MenuSubTriggerProps,
+  type MenuSubContentProps,
+  type MenuItemVariant,
+  type MenuRadioIndicator,
+} from './components/menu';
 export {
   MessageScroller,
   useMessageScroller,
@@ -409,6 +445,21 @@ export {
   type PopoverAlign,
   type PopoverPresentation,
 } from './components/popover';
+export {
+  Post,
+  type PostProps,
+  type PostHeaderProps,
+  type PostAuthorProps,
+  type PostActionProps,
+  type PostCommunityProps,
+  type PostTitleProps,
+  type PostBodyProps,
+  type PostMediaProps,
+  type PostFooterProps,
+  type PostStatProps,
+  type PostVotesProps,
+  type PostVote,
+} from './components/post';
 export { Progress, type ProgressProps } from './components/progress';
 export {
   RadioGroup,
@@ -448,6 +499,65 @@ export {
   type SignatureButtonProps,
 } from './components/signature';
 export { Shimmer, type ShimmerProps } from './components/shimmer';
+export {
+  Reasoning,
+  type ReasoningProps,
+  type ReasoningTriggerProps,
+  type ReasoningContentProps,
+} from './components/reasoning';
+export {
+  Response,
+  type ResponseProps,
+  type ResponseComponents,
+  type ResponseBlock,
+  type ResponseInline,
+} from './components/response';
+export {
+  Sources,
+  type SourcesProps,
+  type SourcesTriggerProps,
+  type SourcesContentProps,
+  type SourcesSourceProps,
+} from './components/sources';
+export {
+  Task,
+  type TaskProps,
+  type TaskTriggerProps,
+  type TaskContentProps,
+  type TaskItemProps,
+  type TaskFileProps,
+  type TaskStatus,
+} from './components/task';
+export {
+  CodeBlock,
+  resolveLanguage,
+  type CodeBlockProps,
+  type CodeBlockHeaderProps,
+  type CodeBlockFilenameProps,
+  type CodeBlockLanguageProps,
+  type CodeBlockActionsProps,
+  type CodeBlockCopyButtonProps,
+  type CodeLanguage,
+  type Token,
+  type TokenKind,
+} from './components/code-block';
+export {
+  Plan,
+  type PlanProps,
+  type PlanHeaderProps,
+  type PlanIconProps,
+  type PlanTitleProps,
+  type PlanDescriptionProps,
+  type PlanActionProps,
+  type PlanProgressProps,
+  type PlanTriggerProps,
+  type PlanContentProps,
+  type PlanStepsProps,
+  type PlanStepProps,
+  type PlanStepStatus,
+  type PlanStepCounts,
+  type PlanFooterProps,
+} from './components/plan';
 export {
   ScrollText,
   type ScrollTextProps,
@@ -508,9 +618,12 @@ export {
   type TooltipTriggerProps,
   type TooltipContentProps,
   type TooltipArrowProps,
+  type TooltipTitleProps,
+  type TooltipDescriptionProps,
   type TooltipPlacement,
   type TooltipAlign,
   type TooltipOpenOn,
+  type TooltipVariant,
 } from './components/tooltip';
 export {
   Typography,
@@ -525,7 +638,10 @@ export {
 export {
   AlertTriangleIcon,
   AppleIcon,
+  ArrowDownIcon,
+  ArrowUpIcon,
   ArrowUpRightIcon,
+  BadgeCheckIcon,
   BellIcon,
   BookmarkIcon,
   CalendarIcon,
@@ -536,16 +652,25 @@ export {
   ChevronLeftIcon,
   ChevronRightIcon,
   ChevronUpIcon,
+  CircleIcon,
+  CompassIcon,
+  CopyIcon,
+  CrosshairIcon,
   DownloadIcon,
   EllipsisIcon,
+  EyeIcon,
   FacebookIcon,
   FileIcon,
   GoogleIcon,
+  HeartIcon,
   IconColorProvider,
   InfoIcon,
   ImageIcon,
+  LinkIcon,
+  ListChecksIcon,
   LockIcon,
   MaximizeIcon,
+  MessageCircleIcon,
   MicIcon,
   MinusIcon,
   MoonIcon,
@@ -557,18 +682,24 @@ export {
   PlusIcon,
   PlusSquareIcon,
   ReceiptIcon,
+  RepeatIcon,
   RotateCcwIcon,
+  RotateCwIcon,
   SearchIcon,
   SendIcon,
   ShareNodesIcon,
   ShieldAlertIcon,
   ShieldCheckIcon,
+  SparklesIcon,
+  StarIcon,
   SunIcon,
   TrashIcon,
   UnlockIcon,
   XIcon,
   useIconColor,
   type IconProps,
+  type ToggleIconProps,
+  type BadgeCheckIconProps,
 } from './icons';
 
 // Hooks

package/src/primitives/collapse.tsx

@@ -0,0 +1,128 @@
+/**
+ * Collapse — a body that opens and closes by animating its own height.
+ *
+ * Height cannot be animated from `auto`, so the content is measured first and
+ * the measurement is what gets animated to. While that is happening the content
+ * is taken out of the flow, because a child of a view whose height is
+ * mid-animation reports that animated height back and the panel then settles on
+ * whatever it happened to measure.
+ *
+ * The moment the animation finishes, both go away and the content lays out
+ * normally again. That is what lets a Collapse hold another Collapse — or hold
+ * content that is still streaming in — without either of them being clipped to
+ * a number that was true a frame ago.
+ *
+ * ```tsx
+ * <Collapse open={open}>
+ *   <Text>Anything, of any height.</Text>
+ * </Collapse>
+ * ```
+ *
+ * The alternative — unmounting the body and letting a layout transition on the
+ * parent carry the change — is what `Accordion` does, and it is right when the
+ * closed state should cost nothing. This is for a body that opens and closes
+ * repeatedly and often while its content is still arriving, where remounting
+ * would throw away scroll position and restart every animation inside it.
+ */
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { View, type LayoutChangeEvent, type ViewProps } from 'react-native';
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { cn } from '../utils/cn';
+
+/** Long enough to read as the panel opening, short enough not to be waited on. */
+export const COLLAPSE_DURATION = 200;
+
+export interface CollapseProps extends Omit<ViewProps, 'children'> {
+  open: boolean;
+  /** Classes on the measured content, not on the clipping frame. */
+  className?: string;
+  duration?: number;
+  children?: ReactNode;
+}
+
+export function Collapse({
+  open,
+  className,
+  duration = COLLAPSE_DURATION,
+  children,
+  ...props
+}: CollapseProps) {
+  const reducedMotion = useReducedMotion();
+  const [height, setHeight] = useState(0);
+  const [animating, setAnimating] = useState(false);
+  const progress = useSharedValue(open ? 1 : 0);
+  const mounted = useRef(false);
+
+  useEffect(() => {
+    // The first pass is not a transition — a body that starts open should be
+    // open, not play its own entrance at nobody.
+    if (!mounted.current) {
+      mounted.current = true;
+      progress.value = open ? 1 : 0;
+      return;
+    }
+    if (reducedMotion) {
+      progress.value = open ? 1 : 0;
+      setAnimating(false);
+      return;
+    }
+    setAnimating(true);
+    progress.value = withTiming(open ? 1 : 0, { duration }, (finished) => {
+      if (finished) runOnJS(setAnimating)(false);
+    });
+  }, [open, reducedMotion, duration, progress]);
+
+  const style = useAnimatedStyle(() => ({
+    height: progress.value * height,
+    opacity: progress.value,
+  }));
+
+  // Re-measured rather than measured once: a body whose content is still
+  // streaming in grows, and a height captured on the first frame would crop it.
+  const onLayout = (event: LayoutChangeEvent) => {
+    const next = event.nativeEvent.layout.height;
+    setHeight((current) => (Math.abs(current - next) < 1 ? current : next));
+  };
+
+  /*
+   * Once it has finished opening, the measured height and the absolute
+   * positioning are both dropped and the content lays out normally.
+   *
+   * They are only needed *while* the height is being animated to a number, and
+   * keeping them costs real bugs: a Collapse whose content is itself a Collapse
+   * measures a child that has not settled yet, and settles on that wrong
+   * number, so the inner body ends up clipped to nothing. Content that is still
+   * streaming in has the same problem against itself. In natural flow both are
+   * simply laid out, and the measurement carries on in the background against
+   * the next time it closes.
+   */
+  const natural = open && !animating;
+
+  return (
+    <Animated.View
+      style={natural ? undefined : style}
+      className={natural ? undefined : 'overflow-hidden'}
+    >
+      {/*
+        The same two elements in both modes, so switching between them is a
+        style change rather than a remount — a remount would throw away the
+        state of everything inside.
+      */}
+      <View
+        onLayout={onLayout}
+        style={natural ? undefined : { position: 'absolute', left: 0, right: 0, top: 0 }}
+        className={cn(className)}
+        {...props}
+      >
+        {children}
+      </View>
+    </Animated.View>
+  );
+}
+Collapse.displayName = 'Collapse';

package/src/utils/date.ts

@@ -12,6 +12,18 @@
  *   comparison here goes through `startOfDay`.
  * - **Month arithmetic is done with `setMonth`, not by adding days.** The
  *   platform already knows that a month is 28, 29, 30 or 31 days long.
+ *
+ * Three more that are easy to lose and expensive to get back:
+ *
+ * - **Days are stepped with `setDate`, never with milliseconds.** Adding
+ *   `n * 86400000` is wrong by an hour on the two days a year the clocks move,
+ *   which is enough to land the wrong side of midnight and shift a whole grid.
+ * - **A month is normalised to the 1st before months are added.** `setMonth`
+ *   on the 31st of a month whose neighbour is shorter overflows into the month
+ *   after next — January 31st plus one month is March 3rd.
+ * - **Nothing is ever parsed back out of formatted text.** `Intl` is asked for
+ *   the *parts* and the numbers are read from those, because the order and the
+ *   separators belong to the locale and only the numbers are ours.
  */
 
 /** Names of the weekdays and months, in the caller's locale. */
@@ -60,12 +72,6 @@ export function addDays(date: Date, days: number): Date {
   return copy;
 }
 
-/** Whole days from `a` to `b`, ignoring the time of day on both. */
-export function daysBetween(a: Date, b: Date): number {
-  const MS = 24 * 60 * 60 * 1000;
-  return Math.round((startOfDay(b).getTime() - startOfDay(a).getTime()) / MS);
-}
-
 export function isBefore(a: Date, b: Date): boolean {
   return startOfDay(a).getTime() < startOfDay(b).getTime();
 }
@@ -82,12 +88,59 @@ export function isWithin(date: Date, from: Date, to: Date): boolean {
   return time >= Math.min(start, end) && time <= Math.max(start, end);
 }
 
+/**
+ * `date` pulled inside `min`..`max`, at day resolution.
+ *
+ * The bound is returned at its own start of day rather than as given, so a
+ * `maxDate` that happens to carry a time of 17:30 does not hand back a value
+ * that then compares as *after* the last selectable day.
+ */
 export function clampDate(date: Date, min?: Date, max?: Date): Date {
-  if (min && isBefore(date, min)) return min;
-  if (max && isAfter(date, max)) return max;
+  if (min && isBefore(date, min)) return startOfDay(min);
+  if (max && isAfter(date, max)) return startOfDay(max);
   return date;
 }
 
+/**
+ * A first-day-of-week index made safe.
+ *
+ * `weekStartsOn` arrives from a caller and reaches an array index by way of
+ * `(day + weekStartsOn) % 7`, where a negative or out-of-range value yields a
+ * negative index and an `undefined` weekday name. Both directions wrap.
+ */
+export function normalizeWeekStart(weekStartsOn: number): number {
+  if (!Number.isFinite(weekStartsOn)) return 0;
+  return ((Math.trunc(weekStartsOn) % 7) + 7) % 7;
+}
+
+/**
+ * The day the week starts on where this locale is spoken, as `Date.getDay()`
+ * counts it — 0 for Sunday.
+ *
+ * Sunday is a poor default outside North America and a handful of other
+ * regions, but it is the one the platform gives us when it knows nothing. Where
+ * `Intl` carries week data, ask it: `en-GB` and `fr-FR` start on Monday, and a
+ * calendar that says otherwise is wrong in a way its reader notices immediately.
+ */
+export function localeWeekStart(locale: DateLocale): number {
+  try {
+    const tag = (locale ?? 'en').split('-u-')[0] || 'en';
+    const resolved = new Intl.Locale(tag) as Intl.Locale & {
+      getWeekInfo?: () => { firstDay?: number };
+      weekInfo?: { firstDay?: number };
+    };
+    // Proposed as a method and shipped as a property first; both are in the
+    // wild, and neither is guaranteed to be there at all.
+    const info = resolved.getWeekInfo?.() ?? resolved.weekInfo;
+    const first = info?.firstDay;
+    // `Intl` counts 1 = Monday … 7 = Sunday; `Date.getDay()` counts 0 = Sunday.
+    if (typeof first === 'number' && Number.isFinite(first)) return first % 7;
+  } catch {
+    // No week data in this build.
+  }
+  return 0;
+}
+
 /**
  * The six-week grid for a month.
  *
@@ -98,12 +151,20 @@ export function clampDate(date: Date, min?: Date, max?: Date): Date {
  *
  * The leading and trailing cells belong to the neighbouring months; whether
  * they are drawn or left blank is the caller's decision.
+ *
+ * `system` and `locale` are what make this work for a Hijri grid, where the
+ * month it has to open on is not the Gregorian 1st.
  */
-export function monthGrid(month: Date, weekStartsOn: number): Date[][] {
-  const first = startOfMonth(month);
+export function monthGrid(
+  month: Date,
+  weekStartsOn: number,
+  system: 'gregory' | 'islamic' = 'gregory',
+  locale?: DateLocale
+): Date[][] {
+  const first = startOfCalendarMonth(month, system, locale);
   // How far back to the most recent `weekStartsOn`. The `+ 7` keeps the
   // modulo positive when the week starts later than the first of the month.
-  const lead = (first.getDay() - weekStartsOn + 7) % 7;
+  const lead = (first.getDay() - normalizeWeekStart(weekStartsOn) + 7) % 7;
   const start = addDays(first, -lead);
 
   return Array.from({ length: 6 }, (_unusedWeek, week) =>
@@ -119,10 +180,49 @@ export function monthGrid(month: Date, weekStartsOn: number): Date[][] {
  * locales they do not carry. Every formatter here falls back to English rather
  * than taking the screen down over a month name.
  */
+/**
+ * Formatters, kept.
+ *
+ * Building an `Intl.DateTimeFormat` is the expensive part of formatting, and a
+ * Hijri grid asks for one per cell twice over — once to decide which month the
+ * cell belongs to and once for the number in it — which is 84 constructions a
+ * render before anyone touches the year dropdown, where a century jump used to
+ * cost tens of thousands. The set of shapes asked for is tiny and fixed, so it
+ * is cached for the life of the process. A failure is cached too: a build with
+ * no data for a locale will not acquire any by being asked again.
+ */
+const formatters = new Map<string, Intl.DateTimeFormat | null>();
+
+function formatter(
+  locale: DateLocale,
+  options: Intl.DateTimeFormatOptions
+): Intl.DateTimeFormat | null {
+  // Sorted, so two call sites writing the same options in a different order
+  // share one entry rather than building two.
+  const shape = Object.keys(options)
+    .sort()
+    .map((key) => `${key}=${String(options[key as keyof Intl.DateTimeFormatOptions])}`)
+    .join(',');
+  const key = `${locale ?? ''}|${shape}`;
+
+  if (formatters.has(key)) return formatters.get(key) ?? null;
+
+  let made: Intl.DateTimeFormat | null = null;
+  try {
+    made = new Intl.DateTimeFormat(locale, options);
+  } catch {
+    made = null;
+  }
+  formatters.set(key, made);
+  return made;
+}
+
 function format(date: Date, locale: DateLocale, options: Intl.DateTimeFormatOptions): string | null {
   try {
-    return new Intl.DateTimeFormat(locale, options).format(date);
+    return formatter(locale, options)?.format(date) ?? null;
   } catch {
+    // Constructing succeeded and formatting still failed — some builds only
+    // discover a missing calendar at format time.
     return null;
   }
 }
@@ -189,7 +289,7 @@ export interface CalendarParts {
 export function resolveCalendar(system: CalendarSystem, locale: DateLocale): 'gregory' | 'islamic' {
   if (system !== 'auto') return system;
   try {
-    const resolved = new Intl.DateTimeFormat(locale).resolvedOptions().calendar ?? '';
+    const resolved = formatter(locale, {})?.resolvedOptions().calendar ?? '';
     return resolved.startsWith('islamic') ? 'islamic' : 'gregory';
   } catch {
     return 'gregory';
@@ -214,11 +314,12 @@ export function calendarParts(
     return { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() };
   }
   try {
-    const parts = new Intl.DateTimeFormat(withCalendar(locale, 'islamic'), {
+    const parts = formatter(withCalendar(locale, 'islamic'), {
       year: 'numeric',
       month: 'numeric',
       day: 'numeric',
-    }).formatToParts(date);
+    })?.formatToParts(date);
+    if (!parts) throw new Error('unusable');
     const read = (type: string) => Number(parts.find((part) => part.type === type)?.value);
     const year = read('year');
     const month = read('month');
@@ -246,13 +347,24 @@ export function isSameCalendarMonth(
   return one.year === two.year && one.month === two.month;
 }
 
+/** Whether two days fall in the same year and month of the given calendar. */
+function sameCalendarMonthParts(a: CalendarParts, b: CalendarParts): boolean {
+  return a.year === b.year && a.month === b.month;
+}
+
 /**
  * The first day of the calendar month `date` falls in.
  *
  * Walked back a day at a time rather than computed. A Hijri month is 29 or 30
  * days depending on the year, and the platform's own calendar data already
- * knows which — stepping until the day number reads 1 asks it, instead of
- * shipping a table that will disagree with the device.
+ * knows which — asking it is better than shipping a table that will disagree
+ * with the device.
+ *
+ * The walk stops where the *month number changes*, not where the day number
+ * reads 1. The observational Islamic calendars the platforms ship do not always
+ * label a day 1: in 1450 AH, month 11 day 30 is followed directly by month 12
+ * day 2. Hunting for a day 1 that is never emitted walked the cursor off the
+ * end of its budget and then paged the calendar to the same month forever.
  */
 export function startOfCalendarMonth(
   date: Date,
@@ -261,9 +373,15 @@ export function startOfCalendarMonth(
 ): Date {
   if (system === 'gregory') return startOfMonth(date);
   let cursor = startOfDay(date);
-  for (let step = 0; step < 31; step += 1) {
-    if (calendarParts(cursor, system, locale).day === 1) return cursor;
-    cursor = addDays(cursor, -1);
+  const target = calendarParts(cursor, system, locale);
+  // 32, not 31: one step more than the longest month, so the loop is bounded
+  // by a real answer rather than by running out.
+  for (let step = 0; step < 32; step += 1) {
+    const previous = addDays(cursor, -1);
+    if (!sameCalendarMonthParts(calendarParts(previous, system, locale), target)) {
+      return cursor;
+    }
+    cursor = previous;
   }
   return cursor;
 }
@@ -276,8 +394,13 @@ export function daysInCalendarMonth(
 ): number {
   if (system === 'gregory') return endOfMonth(date).getDate();
   const start = startOfCalendarMonth(date, system, locale);
+  const parts = calendarParts(start, system, locale);
+  // The first offset that lands outside this month is its length, whatever the
+  // day numbers along the way are called.
   for (let length = 28; length <= 31; length += 1) {
-    if (calendarParts(addDays(start, length), system, locale).day === 1) return length;
+    if (!sameCalendarMonthParts(calendarParts(addDays(start, length), system, locale), parts)) {
+      return length;
+    }
   }
   return 30;
 }
@@ -413,9 +536,10 @@ export function monthNames(locale: DateLocale, style: 'long' | 'short' = 'long')
 
 /** Column headings, rotated so the first one is `weekStartsOn`. */
 export function weekdayNames(locale: DateLocale, weekStartsOn: number): string[] {
+  const first = normalizeWeekStart(weekStartsOn);
   // 2021-08-01 was a Sunday, so adding the index lands on each weekday in turn.
   return Array.from({ length: 7 }, (_unused, day) => {
-    const index = (day + weekStartsOn) % 7;
+    const index = (day + first) % 7;
     const formatted = formatGregory(new Date(2021, 7, 1 + index), locale, { weekday: 'short' });
     return formatted ?? WEEKDAYS_EN[index]!;
   });