@vvedantb/native-ui 0.3.17 → 0.5.0

package/src/ai/sources.tsx

@@ -0,0 +1,100 @@
+import { Linking, Pressable, View, type ViewProps } from "react-native";
+import { IconBook } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, touchSlop } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import {
+  Collapsible,
+  CollapsibleChevron,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  useCollapsible,
+  type CollapsibleProps,
+  type CollapsibleTriggerProps,
+} from "./collapsible";
+import { ResponseText } from "./response-text";
+
+/** The sources a reply used, folded (default closed). */
+export function Sources({ className, ...props }: CollapsibleProps) {
+  return <Collapsible className={cn("w-full", className)} {...props} />;
+}
+
+/** "Used 1 source", "Used 3 sources". */
+export function sourcesLabel(count: number) {
+  return `Used ${count} ${count === 1 ? "source" : "sources"}`;
+}
+
+export type SourcesTriggerProps = Omit<CollapsibleTriggerProps, "children"> & {
+  count: number;
+};
+
+/** Book icon, "Used 3 sources" and a chevron, muted (web `text-xs`, here `text-sm`). */
+export function SourcesTrigger({ count, className, ...props }: SourcesTriggerProps) {
+  const { open } = useCollapsible();
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const muted = tokens.color.muted[scheme];
+  const iconSize = largerText ? 18 : 14;
+  const label = sourcesLabel(count);
+  return (
+    <CollapsibleTrigger
+      accessibilityLabel={label}
+      className={cn("flex-row items-center gap-1.5 self-start", className)}
+      {...props}
+    >
+      <IconBook size={iconSize} color={muted} strokeWidth={1.5} />
+      <ResponseText size="small" tone="muted" selectable={false}>
+        {label}
+      </ResponseText>
+      <CollapsibleChevron open={open} size={iconSize} color={muted} />
+    </CollapsibleTrigger>
+  );
+}
+
+/** The list of `Source` rows, shown while open (web `mt-2 space-y-2`). */
+export function SourcesContent({ className, ...props }: ViewProps & { className?: string }) {
+  return <CollapsibleContent className={cn("mt-2 gap-2", className)} {...props} />;
+}
+
+export type SourceProps = {
+  href: string;
+  /** Shown, and read, in place of the address. */
+  title?: string;
+  /** Default: `Linking.openURL(href)`, the system browser or the app that owns the link. */
+  onPress?: (href: string) => void;
+  testID?: string;
+};
+
+/** A `text-sm` line with the web `py-2`: 36 high. The slop brings it to 44. */
+const ROW_HEIGHT = 36;
+
+/**
+ * One source as a link row: title (or address) on one line and a book icon.
+ * Pressed, it takes the web hover fill (`bg-surface-secondary`).
+ */
+export function Source({ href, title, onPress, testID }: SourceProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const label = title ?? href;
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="link"
+      accessibilityLabel={label}
+      hitSlop={touchSlop(MIN_TOUCH_TARGET, ROW_HEIGHT)}
+      onPress={() => (onPress ? onPress(href) : void Linking.openURL(href))}
+      className="flex-row items-center justify-between gap-2 px-3 py-2"
+      style={({ pressed }) => ({
+        borderRadius: tokens.radius.md,
+        backgroundColor: pressed ? tokens.color.surfaceSecondary[scheme] : "transparent",
+      })}
+    >
+      <ResponseText size="small" tone="muted" selectable={false} numberOfLines={1} className="shrink">
+        {label}
+      </ResponseText>
+      <IconBook size={largerText ? 18 : 14} color={tokens.color.muted[scheme]} strokeWidth={1.5} />
+    </Pressable>
+  );
+}

package/src/ai/suggestion.tsx

@@ -0,0 +1,93 @@
+import type { ReactNode } from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, sizeStyle, textStyle, touchSlop } from "../controlStyles";
+import { palette } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+
+export type SuggestionsProps = {
+  /** `horizontal` (default) scrolls one row of chips; `vertical` stacks them full width. */
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+  /** Classes for the horizontal row inside the scroll view, after the web `gap-2 px-1`. */
+  contentContainerClassName?: string;
+  children?: ReactNode;
+};
+
+/**
+ * Prompt suggestions. Horizontal is a `ScrollView` with no scroll bar (the web
+ * row with its scroll arrows; a phone swipes instead).
+ */
+export function Suggestions({
+  orientation = "horizontal",
+  className,
+  contentContainerClassName,
+  children,
+}: SuggestionsProps) {
+  if (orientation === "vertical") {
+    return <View className={cn("w-full gap-2", className)}>{children}</View>;
+  }
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      keyboardShouldPersistTaps="handled"
+      className={cn("w-full grow-0", className)}
+      contentContainerClassName={cn("items-center gap-2 px-1", contentContainerClassName)}
+    >
+      {children}
+    </ScrollView>
+  );
+}
+
+export type SuggestionProps = {
+  suggestion: string;
+  onPress?: (suggestion: string) => void;
+  /** Replaces the text; the accessibility label stays `suggestion`. */
+  children?: string;
+  disabled?: boolean;
+  testID?: string;
+};
+
+/** A `text-sm` line with the web `py-1.5`: 32 high. The slop brings it to 44. */
+const CHIP_HEIGHT = 32;
+
+/**
+ * A round chip with the web suggestion look: `rounded-full border
+ * bg-surface-secondary px-3 py-1.5 text-sm text-muted-foreground`. Pressed,
+ * it takes the web hover (`bg-surface-tertiary text-foreground`).
+ */
+export function Suggestion({ suggestion, onPress, children, disabled, testID }: SuggestionProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const size = chatTextSize("small", largerText);
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={suggestion}
+      accessibilityState={{ disabled: Boolean(disabled) }}
+      disabled={disabled}
+      hitSlop={touchSlop(MIN_TOUCH_TARGET, CHIP_HEIGHT)}
+      onPress={() => onPress?.(suggestion)}
+      className={cn("justify-center border", largerText ? "min-h-12 px-4 py-2" : "min-h-8 px-3 py-1.5", disabled && "opacity-45")}
+      style={({ pressed }) => ({
+        borderRadius: tokens.radius.pill,
+        borderColor: tokens.color.border[scheme],
+        backgroundColor: pressed ? palette.surfaceTertiary[scheme] : tokens.color.surfaceSecondary[scheme],
+      })}
+    >
+      {({ pressed }) => (
+        <Text
+          className={cn(size, "font-instrument-sans")}
+          style={[sizeStyle(size), textStyle(pressed ? "foreground" : "muted", scheme)]}
+        >
+          {children ?? suggestion}
+        </Text>
+      )}
+    </Pressable>
+  );
+}

package/src/ai/trace.tsx

@@ -0,0 +1,234 @@
+import { createContext, useContext, type ComponentType, type ReactNode } from "react";
+import { Pressable, Text, View, type ViewProps } from "react-native";
+import type { IconProps } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { sizeStyle, touchSlop } from "../controlStyles";
+import { palette } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+import {
+  Collapsible,
+  CollapsibleChevron,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  useCollapsible,
+  type CollapsibleProps,
+  type CollapsibleTriggerProps,
+} from "./collapsible";
+import { ResponseText } from "./response-text";
+import { Shimmer } from "./shimmer";
+
+// One agent step as one line: icon, title, optional faded description and an
+// optional fold. Reasoning, tool calls, grouped calls and to-dos can all
+// render through these parts, as on the web (`trace.tsx`). The web icon
+// crossfade (`iconKey`) is not ported: the icon swaps at once.
+
+export type AgentTraceStatus = "running" | "error" | "pending";
+
+/** Text and icon colour of a line: muted, or the danger colour for an error (web `text-destructive`). */
+export function traceLineColor(status: AgentTraceStatus | undefined, scheme: "light" | "dark") {
+  return status === "error" ? palette.danger[scheme] : tokens.color.muted[scheme];
+}
+
+// Native text and icons do not inherit a colour, so the line hands its own down.
+const TraceLineColorContext = createContext<string | undefined>(undefined);
+
+function useTraceColor() {
+  const scheme = useScheme();
+  return useContext(TraceLineColorContext) ?? tokens.color.muted[scheme];
+}
+
+/** A column of trace lines (web `flex w-full flex-col gap-2`). */
+export function AgentTrace({ className, ...props }: ViewProps & { className?: string }) {
+  return <View className={cn("w-full min-w-0 gap-2", className)} {...props} />;
+}
+
+export type AgentTraceLineProps = ViewProps & {
+  status?: AgentTraceStatus;
+  className?: string;
+};
+
+/** One line: a row of icon, title and description. `pending` fades it to 60%, `error` turns it the danger colour. */
+export function AgentTraceLine({ status, className, style, ...props }: AgentTraceLineProps) {
+  const scheme = useScheme();
+  return (
+    <TraceLineColorContext.Provider value={traceLineColor(status, scheme)}>
+      <View
+        className={cn("min-w-0 max-w-full shrink flex-row items-center gap-2", className)}
+        style={[status === "pending" ? { opacity: 0.6 } : null, style]}
+        {...props}
+      />
+    </TraceLineColorContext.Provider>
+  );
+}
+
+export type AgentTraceIconProps = {
+  /** A Tabler icon, drawn 16 (20 with larger text) in the line colour. */
+  icon?: ComponentType<IconProps>;
+  /** Anything else in the 16 box, such as a `Spinner size="sm"`. */
+  children?: ReactNode;
+  className?: string;
+};
+
+/** The 16 icon box at the start of a line. Hidden from assistive tech, as the web `aria-hidden`. */
+export function AgentTraceIcon({ icon: Icon, children, className }: AgentTraceIconProps) {
+  const color = useTraceColor();
+  const largerText = useLargerText();
+  const size = largerText ? 20 : 16;
+  return (
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      className={cn("shrink-0 items-center justify-center", className)}
+      style={{ width: size, height: size }}
+    >
+      {Icon ? <Icon size={size} color={color} /> : children}
+    </View>
+  );
+}
+
+export type AgentTraceTitleProps = {
+  children: string;
+  /** Pulse the title while the step runs (`Shimmer`). */
+  shimmer?: boolean;
+  className?: string;
+};
+
+/** The step title, on one line, cut off at the end. */
+export function AgentTraceTitle({ children, shimmer = false, className }: AgentTraceTitleProps) {
+  const color = useTraceColor();
+  const largerText = useLargerText();
+  if (shimmer) {
+    return (
+      <Shimmer duration={2.5} numberOfLines={1} className={className}>
+        {children}
+      </Shimmer>
+    );
+  }
+  const size = chatTextSize("small", largerText);
+  return (
+    <Text
+      numberOfLines={1}
+      className={cn(size, "min-w-0 shrink font-instrument-sans", className)}
+      style={[sizeStyle(size), { color }]}
+    >
+      {children}
+    </Text>
+  );
+}
+
+/** Faded detail after the title, such as "3 files" or "12s", in tabular figures (web `opacity-70 tabular-nums`). */
+export function AgentTraceDescription({ children, className }: { children: ReactNode; className?: string }) {
+  const color = useTraceColor();
+  const largerText = useLargerText();
+  const size = chatTextSize("small", largerText);
+  return (
+    <Text
+      numberOfLines={1}
+      className={cn(size, "shrink-0 font-instrument-sans", className)}
+      style={[sizeStyle(size), { color, opacity: 0.7, fontVariant: ["tabular-nums"] }]}
+    >
+      {children}
+    </Text>
+  );
+}
+
+/** A line with a fold (web `flex w-full min-w-0 flex-col`). Spread `useStreamingDisclosure(isStreaming)` on it to follow a stream. */
+export function AgentTraceCollapsible({ className, ...props }: CollapsibleProps) {
+  return <Collapsible className={cn("w-full min-w-0", className)} {...props} />;
+}
+
+export type AgentTraceCollapsibleTriggerProps = CollapsibleTriggerProps & {
+  /**
+   * Controls of their own (a pressable `FileChip`), drawn after the line and
+   * outside the trigger, as on the web, so each keeps its own press and
+   * accessibility label.
+   */
+  trailing?: ReactNode;
+};
+
+/** The line as a toggle, with a chevron after it that turns down when open. */
+export function AgentTraceCollapsibleTrigger({
+  children,
+  trailing,
+  className,
+  ...props
+}: AgentTraceCollapsibleTriggerProps) {
+  const { open, setOpen } = useCollapsible();
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const iconSize = largerText ? 20 : 16;
+  const chevron = (
+    <CollapsibleChevron open={open} variant="right" size={iconSize} color={tokens.color.muted[scheme]} />
+  );
+  if (trailing === undefined) {
+    return (
+      <CollapsibleTrigger
+        className={cn("max-w-full flex-row items-center gap-1 self-start", className)}
+        {...props}
+      >
+        {children}
+        {chevron}
+      </CollapsibleTrigger>
+    );
+  }
+  return (
+    <View className={cn("max-w-full flex-row items-center gap-2 self-start", className)}>
+      <CollapsibleTrigger className="min-w-0 shrink flex-row items-center" {...props}>
+        {children}
+      </CollapsibleTrigger>
+      {trailing}
+      {/* The chevron toggles too, as the web overlay makes the whole line press. The trigger already names the fold. */}
+      <Pressable
+        accessible={false}
+        importantForAccessibility="no-hide-descendants"
+        hitSlop={touchSlop(iconSize)}
+        onPress={() => setOpen(!open)}
+      >
+        {chevron}
+      </Pressable>
+    </View>
+  );
+}
+
+/**
+ * The folded body, indented behind a rail that starts under the centre of the
+ * line icon (web `ml-[calc(--spacing(2)-1px)] border-l pl-4`). A string child
+ * is drawn as muted `ResponseText`.
+ */
+export function AgentTraceCollapsibleContent({
+  children,
+  className,
+  style,
+  ...props
+}: ViewProps & { className?: string }) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const iconSize = largerText ? 20 : 16;
+  return (
+    <CollapsibleContent>
+      <View
+        className={cn("mb-1 mt-2 min-w-0 pl-4 pr-1", className)}
+        style={[
+          {
+            marginLeft: iconSize / 2 - 1,
+            borderLeftWidth: 1,
+            borderLeftColor: tokens.color.border[scheme],
+          },
+          style,
+        ]}
+        {...props}
+      >
+        {typeof children === "string" ? (
+          <ResponseText size="small" tone="muted">
+            {children}
+          </ResponseText>
+        ) : (
+          children
+        )}
+      </View>
+    </CollapsibleContent>
+  );
+}

package/src/ai/use-streaming-disclosure.ts

@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+
+const AUTO_CLOSE_DELAY_MS = 1000;
+
+/**
+ * Open state for a fold that follows a live stream: it opens when streaming
+ * starts so the text is readable as it lands, and closes once, a second after
+ * streaming stops. A reader's own toggle cancels a pending auto-close. A port
+ * of the web `useStreamingDisclosure`; spread the result on a `Collapsible`
+ * or `AgentTraceCollapsible`.
+ */
+export function useStreamingDisclosure(isStreaming: boolean): {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+} {
+  const [open, setOpen] = useState(isStreaming);
+  const [wasStreaming, setWasStreaming] = useState(isStreaming);
+  const [closeDue, setCloseDue] = useState(false);
+
+  // Adjusting state while rendering, as on the web: no extra commit with the
+  // old open state.
+  if (isStreaming !== wasStreaming) {
+    setWasStreaming(isStreaming);
+    if (isStreaming) {
+      setOpen(true);
+      setCloseDue(false);
+    } else {
+      setCloseDue(true);
+    }
+  }
+
+  // The close is a delayed reaction to the stream stopping, not to a press:
+  // only a timer can express "one second later".
+  useEffect(() => {
+    if (!closeDue) return;
+    const timer = setTimeout(() => {
+      setOpen(false);
+      setCloseDue(false);
+    }, AUTO_CLOSE_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, [closeDue]);
+
+  return {
+    open,
+    onOpenChange: (next) => {
+      setCloseDue(false);
+      setOpen(next);
+    },
+  };
+}

package/src/entries/ai.ts

@@ -0,0 +1,4 @@
+// `@vvedantb/native-ui/ai`: the AI chat parts. Reaches no optional peer, not
+// even a loader; the composer uses `react-native-safe-area-context` and the
+// shimmer `react-native-reanimated`, both required peers.
+export * from "../ai";

package/src/entries/date-time.ts

@@ -1,3 +1,4 @@
 // `@vvedantb/native-ui/date-time`. Imports
 // `@react-native-community/datetimepicker` and `dayjs`.
 export { DateTimeField } from "../DateTimeField";
+export type { DateTimeFieldProps } from "../DateTimeField";

package/src/entries/layout.ts

@@ -1,9 +1,13 @@
-// `@vvedantb/native-ui/layout`: screen containers, page headers and settings
-// chrome.
+// `@vvedantb/native-ui/layout`: screen containers, page headers, section
+// labels and settings chrome.
 export { SafeAreaContainer } from "../SafeAreaContainer";
 export { ScreenContainer } from "../ScreenContainer";
 export { PageTitle, PageHeader } from "../PageTitle";
 export type { PageTitleProps, PageHeaderProps } from "../PageTitle";
+export { StackPageHeader } from "../StackPageHeader";
+export type { StackPageHeaderProps } from "../StackPageHeader";
+export { SectionLabel } from "../SectionLabel";
+export type { SectionLabelProps } from "../SectionLabel";
 export { SettingsSection } from "../settings/SettingsSection";
 export { SettingsField } from "../settings/SettingsField";
 export { SettingsToggleRow } from "../settings/SettingsToggleRow";

package/src/entries/page-title.ts

@@ -1,4 +1,9 @@
-// `@vvedantb/native-ui/page-title`: `PageTitle` and `PageHeader` on their own.
-// Reaches no optional peer, not even a loader.
+// `@vvedantb/native-ui/page-title`: `PageTitle`, `PageHeader` and (from 0.5.0)
+// `StackPageHeader`. Reaches no optional peer, not even a loader.
+// `StackPageHeader` imports one Tabler icon (a required peer) for its back
+// button; Metro does not tree-shake by default, so that bundles the Tabler
+// package with this entry.
 export { PageTitle, PageHeader } from "../PageTitle";
 export type { PageTitleProps, PageHeaderProps } from "../PageTitle";
+export { StackPageHeader } from "../StackPageHeader";
+export type { StackPageHeaderProps } from "../StackPageHeader";

package/src/entries/primitives.ts

@@ -1,6 +1,8 @@
 // `@vvedantb/native-ui/primitives`: fields, display, tabs, overlays and
 // toasts. `BottomSheetContainer`, `DateTimeField` and `AmbientBackground` are
-// not here; they have their own entries.
+// not here; they have their own entries. `Text` and `TextClassContext` are the
+// `primitives/text` variants (from 0.5.0); they are not on the root entry.
+export { Text, TextClassContext } from "../primitives/text";
 export { Button } from "../Button";
 export type { ButtonProps, ButtonSize, ButtonVariant } from "../Button";
 export { Input } from "../Input";
@@ -23,6 +25,20 @@ export { Badge } from "../Badge";
 export type { BadgeProps, BadgeVariant } from "../Badge";
 export { StatusDot } from "../StatusDot";
 export type { StatusDotProps, StatusTone } from "../StatusDot";
+export { ColorSwatches } from "../ColorSwatches";
+export type { ColorSwatchesProps, ColorSwatchesSize } from "../ColorSwatches";
+export { StatGrid } from "../StatGrid";
+export type { StatGridItem, StatGridProps } from "../StatGrid";
+export { SectionLabel } from "../SectionLabel";
+export type { SectionLabelProps } from "../SectionLabel";
+export { SheetRow } from "../SheetRow";
+export type { SheetRowProps } from "../SheetRow";
+export { PageIndicator } from "../PageIndicator";
+export type { PageIndicatorProps } from "../PageIndicator";
+export { IconButton } from "../IconButton";
+export type { IconButtonProps, IconButtonSize, IconButtonVariant } from "../IconButton";
+export { CaptureButton } from "../CaptureButton";
+export type { CaptureButtonProps } from "../CaptureButton";
 export { Separator } from "../Separator";
 export type { SeparatorProps } from "../Separator";
 export { Progress } from "../Progress";
@@ -43,6 +59,7 @@ export type {
   TabsContentProps,
 } from "../Tabs";
 export { ListRow } from "../ListRow";
+export type { ListRowProps } from "../ListRow";
 export { HeaderIconButton } from "../HeaderIconButton";
 export { ThemeToggle } from "../ThemeToggle";
 export type { ThemeToggleProps } from "../ThemeToggle";
@@ -54,6 +71,7 @@ export {
   CardContent,
   CardFooter,
 } from "../Card";
+export type { CardProps } from "../Card";
 export { Skeleton, CardSkeleton } from "../Skeleton";
 export { EmptyState } from "../EmptyState";
 export type { EmptyStateVariant } from "../EmptyState";