panelui-native 0.25.0 → 0.30.0

package/src/components/typography/index.tsx

@@ -25,7 +25,7 @@
 import { Children, forwardRef, 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';
 import { cn } from '../../utils/cn';
 
 const typographyVariants = tv({
@@ -300,7 +300,7 @@ const TypographyList = forwardRef<View, TypographyListProps>(
             // platform font, and a view does not.
             <View className="mt-2.5 size-1.5 shrink-0 rounded-full bg-muted-foreground" />
           )}
-          <View className="flex-1">{child}</View>
+          <View className="flex-1">{textChildren(child)}</View>
         </View>
       ))}
     </View>

package/src/hooks/index.ts

@@ -31,5 +31,6 @@ export {
   type UseScrollSectionsOptions,
   type UseScrollSectionsResult,
 } from './use-scroll-sections';
+export { useBackHandler } from './use-back-handler';
 export { useDebouncedValue } from './use-debounced-value';
 export { usePrevious } from './use-previous';

package/src/hooks/use-back-handler.ts

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react';
+import { BackHandler, Platform } from 'react-native';
+
+/**
+ * Runs a handler when the Android hardware back button is pressed.
+ *
+ * An open overlay owns the back button while it is up: pressing back should
+ * dismiss the overlay, not pop the screen behind it. Without this, the back
+ * gesture navigates away and the overlay is orphaned — the same mistake as a
+ * modal that stays put when you tap outside it.
+ *
+ * The listener is Android-only and gated on `enabled`, so an overlay wires it
+ * to `open && dismissible` and nothing runs while the overlay is closed or
+ * pinned. Returning `true` from the handler tells the platform the press was
+ * consumed, which is what stops the navigation.
+ *
+ * ```tsx
+ * useBackHandler(open && dismissible, () => setOpen(false));
+ * ```
+ */
+export function useBackHandler(enabled: boolean, onBack: () => void): void {
+  // Held in a ref so a caller passing an inline `() => setOpen(false)` does not
+  // resubscribe the listener on every render — only a change in `enabled` does.
+  const onBackRef = useRef(onBack);
+  onBackRef.current = onBack;
+
+  useEffect(() => {
+    if (Platform.OS !== 'android' || !enabled) return;
+
+    const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+      onBackRef.current();
+      return true;
+    });
+
+    return () => subscription.remove();
+  }, [enabled]);
+}

package/src/icons/index.tsx

@@ -103,6 +103,51 @@ export function MinusIcon({ size = 14, color, strokeWidth = 3, ...props }: IconP
   );
 }
 
+export function ChevronUpIcon({ 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="m18 15-6-6-6 6"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function CalendarIcon({ 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="M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function BookmarkIcon({ 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="m19 21-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
 export function ChevronDownIcon({ size = 16, color, ...props }: IconProps) {
   const resolved = useResolvedColor(color, '#737373');
   return (
@@ -827,3 +872,105 @@ export function UnlockIcon({ size = 16, color, ...props }: IconProps) {
     </Svg>
   );
 }
+
+/**
+ * Four-pointed sparkles. The mark for a model doing something on your behalf —
+ * a reasoning step, a generated plan — where a gear or a brain reads as
+ * machinery rather than as assistance.
+ */
+export function SparklesIcon({ 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="M11 3 12.6 8.4 18 10l-5.4 1.6L11 17l-1.6-5.4L4 10l5.4-1.6z"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M18 15.5 18.7 18l2.3.7-2.3.7-.7 2.3-.7-2.3-2.3-.7 2.3-.7z"
+        stroke={resolved}
+        strokeWidth={1.6}
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** Two stacked sheets — the copy action, paired with CheckIcon once it has run. */
+export function CopyIcon({ 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="M9 9h10v12H9z"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M15 5H5v12h2"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** Two links of a chain, for a row that opens somewhere outside the app. */
+export function LinkIcon({ 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="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** A list with its items ticked off — a plan, or a run of steps. */
+export function ListChecksIcon({ 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="m3 6 1.8 1.8L8 4.5M3 16l1.8 1.8L8 14.5"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M12 6.5h9M12 17.5h9"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+      />
+    </Svg>
+  );
+}
+
+/** A hollow ring, for a step that has not started. */
+export function CircleIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Circle cx={12} cy={12} r={8} stroke={resolved} strokeWidth={2} />
+    </Svg>
+  );
+}

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,
@@ -79,6 +80,7 @@ export {
   type AreaChartProps,
   type AreaChartHandle,
   type AreaChartGridProps,
+  type AreaChartHeaderProps,
   type AreaChartAreaProps,
   type AreaChartXAxisProps,
   type AreaChartYAxisProps,
@@ -93,6 +95,7 @@ export {
   useBarChart,
   type BarChartProps,
   type BarChartHandle,
+  type BarChartHeaderProps,
   type BarChartGridProps,
   type BarChartBarProps,
   type BarChartXAxisProps,
@@ -133,6 +136,11 @@ export {
   type ToggleButtonVariant,
   type ToggleSelectionMode,
 } from './components/toggle-button';
+export {
+  DatePicker,
+  type DatePickerProps,
+  type DatePickerMode,
+} from './components/date-picker';
 export {
   Dialog,
   type DialogProps,
@@ -246,6 +254,32 @@ export {
   type TabsTriggerProps,
   type TabsContentProps,
 } from './components/tabs';
+export {
+  Carousel,
+  useCarouselState,
+  type CarouselProps,
+  type CarouselHandle,
+  type CarouselContentProps,
+  type CarouselItemProps,
+  type CarouselCaptionProps,
+  type CarouselDotsProps,
+  type CarouselArrowProps,
+  type CarouselControlsProps,
+  type CarouselVariant,
+  type CarouselOrientation,
+  type CarouselAlign,
+} from './components/carousel';
+export {
+  Calendar,
+  type CalendarProps,
+  type CalendarHeaderProps,
+  type CalendarNavProps,
+  type CalendarMode,
+  type CalendarCaptionLayout,
+  type CalendarDisabled,
+  type CalendarSelection,
+  type DateRange,
+} from './components/calendar';
 export { Card, type CardProps } from './components/card';
 export { Checkbox, type CheckboxProps } from './components/checkbox';
 export {
@@ -301,6 +335,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,
@@ -320,6 +355,7 @@ export {
   useLineChart,
   type LineChartProps,
   type LineChartHandle,
+  type LineChartHeaderProps,
   type LineChartGridProps,
   type LineChartLineProps,
   type LineChartAreaProps,
@@ -343,6 +379,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,
@@ -416,6 +470,52 @@ 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 {
+  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 PlanTitleProps,
+  type PlanDescriptionProps,
+  type PlanActionProps,
+  type PlanTriggerProps,
+  type PlanContentProps,
+  type PlanFooterProps,
+} from './components/plan';
 export {
   ScrollText,
   type ScrollTextProps,
@@ -470,6 +570,19 @@ export {
   type ToastIndicatorProps,
   type ToastCloseProps,
 } from './components/toast';
+export {
+  Tooltip,
+  type TooltipProps,
+  type TooltipTriggerProps,
+  type TooltipContentProps,
+  type TooltipArrowProps,
+  type TooltipTitleProps,
+  type TooltipDescriptionProps,
+  type TooltipPlacement,
+  type TooltipAlign,
+  type TooltipOpenOn,
+  type TooltipVariant,
+} from './components/tooltip';
 export {
   Typography,
   type TypographyProps,
@@ -485,12 +598,15 @@ export {
   AppleIcon,
   ArrowUpRightIcon,
   BellIcon,
+  BookmarkIcon,
+  CalendarIcon,
   CardIcon,
   CheckCircleIcon,
   CheckIcon,
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  ChevronUpIcon,
   DownloadIcon,
   EllipsisIcon,
   FacebookIcon,

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/primitives/keyboard-avoider.tsx

@@ -27,6 +27,7 @@ import {
   useKeyboardAvoidance,
   type KeyboardAvoidanceMode,
 } from '../hooks/use-keyboard-avoidance';
+import { textChildren } from './text';
 
 export interface KeyboardAvoiderProps extends ViewProps {
   className?: string;
@@ -86,7 +87,7 @@ export function KeyboardAvoider({
       className={className}
       style={[style, avoidance.animatedStyle]}
     >
-      {children}
+      {textChildren(children)}
     </Animated.View>
   );
 }

package/src/primitives/text.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { Children, forwardRef, type ReactElement, type ReactNode } from 'react';
 import { Text as RNText, type Text as RNTextType, type TextProps as RNTextProps } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
 import { useDirection } from '../hooks/use-direction';
@@ -63,3 +63,30 @@ export const Text = forwardRef<RNTextType, TextProps>(
 );
 
 Text.displayName = 'Text';
+
+/**
+ * Wraps the bare text among `children` so it can live in a plain view.
+ *
+ * React Native will not render a string outside a `<Text>`, and a component
+ * that takes `children` has no say in whether it is handed one — so anything
+ * putting `children` into a `View`, a `Pressable` or a scroller has to allow
+ * for it. Every part in the library that does runs its children through here.
+ *
+ * Per child, and not all-or-nothing. A part is nearly always given an element
+ * and some text together — an icon and a label, an arrow and a line of text —
+ * which makes `children` an *array*, so a `typeof children === 'string'` check
+ * never matches and the text underneath reaches the view bare. That is the
+ * shape this exists to make impossible.
+ *
+ * `render` is there because the wrapper is rarely the plain default: a button
+ * wants its own label variant, a sheet header wants a heading. Pass one, and
+ * the text arrives dressed the way the part would have dressed it anyway.
+ */
+export function textChildren(
+  children: ReactNode,
+  render: (text: string | number) => ReactElement = (text) => <Text>{text}</Text>
+): ReactNode {
+  return Children.map(children, (child) =>
+    typeof child === 'string' || typeof child === 'number' ? render(child) : child
+  );
+}