panelui-native 0.30.0 → 0.32.0

package/src/icons/index.tsx

@@ -133,12 +133,18 @@ export function CalendarIcon({ size = 16, color, ...props }: IconProps) {
   );
 }
 
-export function BookmarkIcon({ size = 16, color, ...props }: IconProps) {
+export function BookmarkIcon({
+  size = 16,
+  color,
+  filled,
+  ...props
+}: IconProps & { filled?: boolean }) {
   const resolved = useResolvedColor(color, '#737373');
   return (
     <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
       <Path
         d="m19 21-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z"
+        fill={filled ? resolved : 'none'}
         stroke={resolved}
         strokeWidth={2}
         strokeLinecap="round"
@@ -974,3 +980,158 @@ export function CircleIcon({ size = 16, color, ...props }: IconProps) {
     </Svg>
   );
 }
+
+/* -------------------------------------------------------------------------- */
+/* Social                                                                     */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The icons a post's action row is made of.
+ *
+ * These are the only ones in the set that take `filled`, and it is not a
+ * stylistic choice: a like, a save and a vote are toggles, and the outline and
+ * the solid are the two states of one control. Drawn as two different icons
+ * they would swap shape under the finger; drawn as one that fills, the shape
+ * stays put and only the inside changes.
+ */
+export interface ToggleIconProps extends IconProps {
+  /** Solid rather than outlined — the on state of a like, a save, a vote. */
+  filled?: boolean;
+}
+
+/** Upvote. Filled once the vote is cast. */
+export function ArrowUpIcon({ size = 16, color, filled, ...props }: ToggleIconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M9 18v-6H5l7-7 7 7h-4v6z"
+        fill={filled ? resolved : 'none'}
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** Downvote. The same arrow, turned over. */
+export function ArrowDownIcon({ size = 16, color, filled, ...props }: ToggleIconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M9 6v6H5l7 7 7-7h-4V6z"
+        fill={filled ? resolved : 'none'}
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** A like. */
+export function HeartIcon({ size = 16, color, filled, ...props }: ToggleIconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
+        fill={filled ? resolved : 'none'}
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** A reply, or the count of them. */
+export function MessageCircleIcon({ size = 16, color, filled, ...props }: ToggleIconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"
+        fill={filled ? resolved : 'none'}
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** Views — how many times a thing has been seen rather than acted on. */
+export function EyeIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Circle cx={12} cy={12} r={3} stroke={resolved} strokeWidth={2} />
+    </Svg>
+  );
+}
+
+/** A repost — the same thing sent round again. */
+export function RepeatIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="m2 9 3-3 3 3M5 6v10a2 2 0 0 0 2 2h6M22 15l-3 3-3-3M19 18V8a2 2 0 0 0-2-2h-6"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export interface BadgeCheckIconProps extends IconProps {
+  /** The tick's colour when the rosette is solid. Defaults to white. */
+  checkColor?: string;
+}
+
+/**
+ * The verified rosette.
+ *
+ * Solid by default, unlike everything else here. A verification mark is a
+ * claim about the account rather than a control, and an outlined one next to
+ * an outlined like button reads as another thing you could press.
+ */
+export function BadgeCheckIcon({
+  size = 16,
+  color,
+  checkColor = '#ffffff',
+  ...props
+}: BadgeCheckIconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"
+        fill={resolved}
+      />
+      <Path
+        d="m9 12 2 2 4-4"
+        stroke={checkColor}
+        strokeWidth={2.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/index.ts

@@ -254,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,
@@ -431,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,
@@ -476,6 +505,13 @@ export {
   type ReasoningTriggerProps,
   type ReasoningContentProps,
 } from './components/reasoning';
+export {
+  Response,
+  type ResponseProps,
+  type ResponseComponents,
+  type ResponseBlock,
+  type ResponseInline,
+} from './components/response';
 export {
   Sources,
   type SourcesProps,
@@ -509,11 +545,17 @@ 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 {
@@ -596,7 +638,10 @@ export {
 export {
   AlertTriangleIcon,
   AppleIcon,
+  ArrowDownIcon,
+  ArrowUpIcon,
   ArrowUpRightIcon,
+  BadgeCheckIcon,
   BellIcon,
   BookmarkIcon,
   CalendarIcon,
@@ -607,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,
@@ -628,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/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]!;
   });