@vvedantb/native-ui 0.3.17 → 0.5.0

package/src/examples/AiChatGallery.tsx

@@ -0,0 +1,233 @@
+// Reference screen for the AI chat parts (`@vvedantb/native-ui/ai`). Render
+// `AiChatGallery` in a full-screen Expo route, with the same NativeWind setup
+// as the rest of the package and a `SafeAreaProvider` above it. The thread is
+// fixed sample text, not a model. It follows the app's larger-text setting.
+// `ParityGallery` shows `AiChatSamples` in its "AI chat" section.
+import { useState } from "react";
+import { View } from "react-native";
+import { IconFileText, IconPaperclip, IconSearch } from "@tabler/icons-react-native";
+import {
+  ActivityStep,
+  AgentTrace,
+  AgentTraceCollapsible,
+  AgentTraceCollapsibleContent,
+  AgentTraceCollapsibleTrigger,
+  AgentTraceDescription,
+  AgentTraceIcon,
+  AgentTraceLine,
+  AgentTraceTitle,
+  Attachment,
+  Attachments,
+  CodeBlock,
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+  FileChip,
+  Message,
+  MessageAction,
+  MessageActionsBar,
+  MessageContent,
+  PromptInput,
+  PromptInputButton,
+  Reasoning,
+  ReasoningContent,
+  ReasoningTrigger,
+  ResponseText,
+  Source,
+  Sources,
+  SourcesContent,
+  SourcesTrigger,
+  Suggestion,
+  Suggestions,
+  formatElapsed,
+  useStreamingDisclosure,
+  type AttachmentData,
+  type ChatStatus,
+} from "../ai";
+
+const SUGGESTIONS = [
+  "Summarise this thread",
+  "Draft a reply",
+  "List the next steps",
+  "Explain it more simply",
+];
+
+const SAMPLE_ATTACHMENTS: AttachmentData[] = [
+  { id: "notes", filename: "meeting-notes.pdf", mediaType: "application/pdf" },
+  { id: "sketch", filename: "sketch.png", mediaType: "image/png" },
+];
+
+const FINISHED_REASONING =
+  "The question is how to keep one list the same on two devices.\nCompare a shared server copy with device-to-device sync, then suggest the simpler one.";
+
+const FINISHED_REPLY =
+  "Keep one copy of the list on a server and have each device read and write it.\n\nWhen a device changes an item, it sends the change with a timestamp. The other device fetches changes it has not seen.";
+
+const SAMPLE_CODE = `type Change = {\n  itemId: string;\n  updatedAt: number;\n};`;
+
+const STREAMING_REASONING =
+  "Offline edits need to wait in a queue on the device.\nWhen the connection returns, send the queue in order and merge by timestamp…";
+
+/**
+ * The sample thread: a user message, a finished assistant message (folded
+ * reasoning and trace, reply, code, sources and actions), a second user
+ * message, and an assistant message that is still working while `streaming`.
+ */
+export function AiChatSamples({ streaming = true }: { streaming?: boolean }) {
+  const [feedback, setFeedback] = useState<"like" | "dislike" | null>(null);
+  const searchFold = useStreamingDisclosure(streaming);
+  const toggle = (kind: "like" | "dislike") => setFeedback(feedback === kind ? null : kind);
+
+  return (
+    <>
+      <Message from="user">
+        <MessageContent>How do I keep a list in sync across two devices?</MessageContent>
+      </Message>
+
+      <Message from="assistant">
+        <MessageContent>
+          <Reasoning duration={8}>
+            <ReasoningTrigger />
+            <ReasoningContent>{FINISHED_REASONING}</ReasoningContent>
+          </Reasoning>
+          <AgentTraceCollapsible>
+            <AgentTraceCollapsibleTrigger>
+              <AgentTraceLine>
+                <AgentTraceIcon icon={IconSearch} />
+                <AgentTraceTitle>Used 2 tools</AgentTraceTitle>
+                <AgentTraceDescription>{`Worked for ${formatElapsed(14)}`}</AgentTraceDescription>
+              </AgentTraceLine>
+            </AgentTraceCollapsibleTrigger>
+            <AgentTraceCollapsibleContent>
+              <AgentTrace>
+                <ActivityStep icon={IconSearch} label="Searched the web" description="5 results" />
+                <AgentTraceLine>
+                  <AgentTraceIcon icon={IconFileText} />
+                  <AgentTraceTitle>Read</AgentTraceTitle>
+                  <FileChip name="sync-notes.md" />
+                </AgentTraceLine>
+              </AgentTrace>
+            </AgentTraceCollapsibleContent>
+          </AgentTraceCollapsible>
+          <ResponseText>{FINISHED_REPLY}</ResponseText>
+          {/* The gallery has no clipboard: the button only shows its copied state. */}
+          <CodeBlock language="ts" code={SAMPLE_CODE} onCopy={() => undefined} />
+          <Sources>
+            <SourcesTrigger count={2} />
+            <SourcesContent>
+              <Source href="https://example.com/sync" title="Syncing data between devices" />
+              <Source href="https://example.com/timestamps" title="Merging changes by timestamp" />
+            </SourcesContent>
+          </Sources>
+        </MessageContent>
+        <MessageActionsBar>
+          <MessageAction kind="copy" />
+          <MessageAction kind="retry" />
+          <MessageAction kind="like" selected={feedback === "like"} onPress={() => toggle("like")} />
+          <MessageAction kind="dislike" selected={feedback === "dislike"} onPress={() => toggle("dislike")} />
+        </MessageActionsBar>
+      </Message>
+
+      <Message from="user">
+        <MessageContent>And when one device is offline?</MessageContent>
+      </Message>
+
+      <Message from="assistant">
+        <MessageContent>
+          <Reasoning isStreaming={streaming}>
+            <ReasoningTrigger />
+            <ReasoningContent>{STREAMING_REASONING}</ReasoningContent>
+          </Reasoning>
+          <AgentTraceCollapsible {...searchFold}>
+            <AgentTraceCollapsibleTrigger>
+              <AgentTraceLine>
+                <AgentTraceIcon icon={IconSearch} />
+                <AgentTraceTitle shimmer={streaming}>
+                  {streaming ? "Searching for offline sync" : "Searched for offline sync"}
+                </AgentTraceTitle>
+              </AgentTraceLine>
+            </AgentTraceCollapsibleTrigger>
+            <AgentTraceCollapsibleContent>
+              Offline-first sync, change queues, conflict handling
+            </AgentTraceCollapsibleContent>
+          </AgentTraceCollapsible>
+          <ActivityStep
+            icon={IconFileText}
+            label={streaming ? "Reading sync-notes.md" : "Read sync-notes.md"}
+            status={streaming ? "running" : "complete"}
+            description={streaming ? undefined : `Worked for ${formatElapsed(6)}`}
+          />
+          {streaming ? null : (
+            <ResponseText>
+              {"Queue each change on the device while it is offline.\n\nWhen it reconnects, send the queue in order. If both devices changed the same item, keep the newer change."}
+            </ResponseText>
+          )}
+        </MessageContent>
+      </Message>
+    </>
+  );
+}
+
+/**
+ * A full chat screen: the sample thread in a `Conversation` with its scroll
+ * button, suggestions, and the composer with sample attachments and an
+ * attach tool. The last message streams until Stop is pressed; then sent
+ * messages are added to the thread.
+ */
+export function AiChatGallery() {
+  const [status, setStatus] = useState<ChatStatus>("streaming");
+  const [draft, setDraft] = useState("");
+  const [sent, setSent] = useState<string[]>([]);
+  const [attachments, setAttachments] = useState(SAMPLE_ATTACHMENTS);
+
+  return (
+    <View className="flex-1">
+      <Conversation>
+        <ConversationContent>
+          <AiChatSamples streaming={status === "streaming"} />
+          {sent.map((text, index) => (
+            <Message key={`${index}-${text}`} from="user">
+              <MessageContent>{text}</MessageContent>
+            </Message>
+          ))}
+        </ConversationContent>
+        <ConversationScrollButton />
+      </Conversation>
+      <Suggestions className="pt-2" contentContainerClassName="px-3">
+        {SUGGESTIONS.map((suggestion) => (
+          <Suggestion key={suggestion} suggestion={suggestion} onPress={setDraft} />
+        ))}
+      </Suggestions>
+      <PromptInput
+        value={draft}
+        onChangeText={setDraft}
+        status={status}
+        onStop={() => setStatus("ready")}
+        onSubmit={(text) => {
+          setSent([...sent, text]);
+          setAttachments([]);
+        }}
+        header={
+          attachments.length > 0 ? (
+            <Attachments>
+              {attachments.map((attachment) => (
+                <Attachment
+                  key={attachment.id}
+                  data={attachment}
+                  onRemove={() => setAttachments(attachments.filter((item) => item.id !== attachment.id))}
+                />
+              ))}
+            </Attachments>
+          ) : null
+        }
+        toolbar={
+          <PromptInputButton
+            icon={IconPaperclip}
+            label="Attach files"
+            onPress={() => setAttachments(SAMPLE_ATTACHMENTS)}
+          />
+        }
+      />
+    </View>
+  );
+}

package/src/examples/ParityGallery.tsx

@@ -1,11 +1,18 @@
 // Reference screen for the components that mirror `@vvedantb/ui`. Render it in
 // an Expo route to compare against the web: it needs the same NativeWind setup
 // as the rest of the package and a `SafeAreaProvider` above it. It always
-// renders the default sizes (larger text off), as the web does. Prices below
-// are placeholders, not real plan prices.
+// renders the default sizes (larger text off), as the web does. Prices, names
+// and figures below are placeholders, not real data.
 import { useState, type ReactNode } from "react";
 import { ScrollView, Text, View, type TextProps } from "react-native";
-import { IconInbox } from "@tabler/icons-react-native";
+import {
+  IconCopy,
+  IconInbox,
+  IconPhoto,
+  IconRefresh,
+  IconTrash,
+  IconX,
+} from "@tabler/icons-react-native";
 import {
   APP_ICONS,
   APP_NAMES,
@@ -18,12 +25,14 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
+  AmbientBackground,
   AppMark,
   AppWordmark,
   Avatar,
   AvatarFallback,
   Badge,
   Button,
+  CaptureButton,
   Card,
   CardContent,
   CardDescription,
@@ -32,7 +41,9 @@ import {
   CardTitle,
   CenteredSpinner,
   Checkbox,
+  ColorSwatches,
   ConfirmDialog,
+  DateTimeField,
   Dialog,
   DialogBody,
   DialogClose,
@@ -44,15 +55,20 @@ import {
   DialogTrigger,
   EmptyState,
   GoogleMark,
+  IconButton,
   Input,
   Label,
   LabeledSwitchRow,
+  ListRow,
+  NEUTRAL_900,
   NativeUiProvider,
   PageHeader,
+  PageIndicator,
   PageTitle,
   PricingModal,
   Progress,
   SearchInput,
+  SectionLabel,
   Select,
   Separator,
   Sheet,
@@ -60,10 +76,13 @@ import {
   SheetDescription,
   SheetFooter,
   SheetHeader,
+  SheetRow,
   SheetTitle,
   SheetTrigger,
   Skeleton,
   Spinner,
+  StackPageHeader,
+  StatGrid,
   StatusDot,
   Switch,
   Tabs,
@@ -75,6 +94,7 @@ import {
   Toaster,
   UpgradeToProCard,
   initials,
+  palette,
   toast,
   tokens,
   useNativeUi,
@@ -85,6 +105,18 @@ import {
 } from "../index";
 import { typeStyle } from "../controlStyles";
 import { useScheme } from "../useScheme";
+import {
+  ChainOfThought,
+  ChainOfThoughtContent,
+  ChainOfThoughtHeader,
+  ChainOfThoughtSearchResult,
+  ChainOfThoughtSearchResults,
+  ChainOfThoughtStep,
+  ConversationEmptyState,
+  Suggestion,
+  Suggestions,
+} from "../ai";
+import { AiChatSamples } from "./AiChatGallery";
 
 const BUTTON_VARIANTS: ButtonVariant[] = [
   "default",
@@ -113,9 +145,13 @@ const STATUS_TONES: StatusTone[] = [
   "cancelled",
   "active",
   "critical",
+  "info",
   "neutral",
 ];
 
+const SWATCHES = ["#db2777", "#2563eb", "#16a34a", "#f59e0b", "#181818", "#ffffff"];
+const SWATCH_LABELS = ["Pink", "Blue", "Green", "Amber", "Black", "White"];
+
 // Space after the last section, so Card, Upgrade and Overlays can scroll to the
 // top of an 844-tall phone for screenshot crops.
 const GALLERY_END_SPACE = 720;
@@ -182,6 +218,13 @@ function GalleryScreen() {
   const [progress, setProgress] = useState(40);
   const [pricingOpen, setPricingOpen] = useState(false);
   const [confirmOpen, setConfirmOpen] = useState(false);
+  const [swatch, setSwatch] = useState(SWATCHES[0]!);
+  const [due, setDue] = useState<Date | null>(null);
+  const [when, setWhen] = useState(() => new Date());
+  const [muted, setMuted] = useState(false);
+  const [sort, setSort] = useState<"newest" | "name">("newest");
+  const [page, setPage] = useState(0);
+  const scheme = useScheme();
 
   return (
     <View className="flex-1">
@@ -355,6 +398,9 @@ function GalleryScreen() {
           <Card title="Today" description="Card props, as before.">
             <GalleryText>Body</GalleryText>
           </Card>
+          <Card title="Pressable" description="onPress makes the whole card a button." onPress={() => toast("Card pressed")}>
+            <GalleryText>Tap anywhere on the card.</GalleryText>
+          </Card>
           <Card>
             <CardHeader>
               <CardTitle>Composed</CardTitle>
@@ -502,6 +548,162 @@ function GalleryScreen() {
             <EmptyState.Description>New messages land here.</EmptyState.Description>
           </EmptyState.Root>
         </Section>
+
+        {/* 0.5.0: the Verve, vibot and Velth pieces. */}
+        <Section title="ColorSwatches">
+          <ColorSwatches
+            value={swatch}
+            onChange={setSwatch}
+            colors={SWATCHES}
+            labels={SWATCH_LABELS}
+            accessibilityLabel="Accent colour"
+          />
+          <ColorSwatches
+            value={swatch}
+            onChange={setSwatch}
+            colors={SWATCHES}
+            labels={SWATCH_LABELS}
+            accessibilityLabel="Accent colour"
+            size="sm"
+            disabled
+          />
+        </Section>
+
+        <Section title="DateTimeField">
+          {/* Date only, empty until picked, with a clear button once set. */}
+          <DateTimeField
+            mode="date"
+            value={due}
+            onChange={setDue}
+            placeholder="No due date"
+            onClear={() => setDue(null)}
+          />
+          <DateTimeField value={when} onChange={setWhen} />
+        </Section>
+
+        <Section title="ListRow">
+          {/* Long-press the first row for its second action. */}
+          <ListRow
+            title="Ada Lovelace"
+            meta="See you at nine"
+            leading={
+              <View>
+                <Avatar>
+                  <AvatarFallback>{initials("Ada Lovelace")}</AvatarFallback>
+                </Avatar>
+                <StatusDot tone="info" size="md" className="absolute right-0 top-0" />
+              </View>
+            }
+            titleEnd={<Badge variant="secondary">09:41</Badge>}
+            accessibilityLabel="Ada Lovelace, unread, 09:41"
+            onPress={() => toast("Open thread")}
+            onLongPress={() => toast("Thread actions")}
+          />
+          {/* The switch sits outside the pressable area: it toggles without opening the row. */}
+          <ListRow
+            title="Mute thread"
+            meta="Tap the row or the switch"
+            onPress={() => toast("Row pressed")}
+            control={<Switch checked={muted} onCheckedChange={setMuted} accessibilityLabel="Mute thread" />}
+          />
+        </Section>
+
+        <Section title="SectionLabel and StatGrid">
+          <SectionLabel>Today</SectionLabel>
+          <StatGrid
+            items={[
+              { label: "Done", value: "6" },
+              { label: "This week", value: "31" },
+              { label: "Streak", value: "12 days" },
+            ]}
+          />
+          <SectionLabel uppercase>Library</SectionLabel>
+          <StatGrid
+            columns={3}
+            items={[
+              { label: "Books", value: "24" },
+              { label: "Notes", value: "130" },
+              { label: "Clips", value: "8" },
+            ]}
+          />
+        </Section>
+
+        <Section title="SheetRow">
+          {/* Static rows on the sheet surface; in an app they sit in a `SheetContent`. */}
+          <View className="py-2" style={{ backgroundColor: palette.overlay[scheme], borderRadius: tokens.radius.lg }}>
+            <SheetRow icon={IconCopy} title="Copy link" onPress={() => toast("Copied")} />
+            <SheetRow icon={IconPhoto} title="Save image" detail="To your photo library" onPress={() => toast("Saved")} />
+            <SheetRow title="Newest first" active={sort === "newest"} onPress={() => setSort("newest")} />
+            <SheetRow title="By name" active={sort === "name"} onPress={() => setSort("name")} />
+            <SheetRow icon={IconPhoto} title="Export" detail="Needs V Pro" disabled />
+            <SheetRow icon={IconTrash} title="Delete" danger onPress={() => toast.error("Deleted")} />
+          </View>
+        </Section>
+
+        <Section title="PageIndicator">
+          <PageIndicator count={4} index={page} />
+          <PageIndicator count={4} index={page} onChange={setPage} />
+        </Section>
+
+        <Section title="StackPageHeader">
+          {/* `safeTop={false}`: the strip is not at the top of the screen. */}
+          <AmbientBackground className="flex-none overflow-hidden rounded-lg">
+            <StackPageHeader
+              title="Details"
+              description="Edited 2 min ago"
+              safeTop={false}
+              onBack={() => toast("Back")}
+              headerRight={<ThemeToggle />}
+            />
+          </AmbientBackground>
+          <AmbientBackground className="flex-none overflow-hidden rounded-lg">
+            <StackPageHeader title="A much longer page title that is cut off" safeTop={false} onBack={() => toast("Back")} />
+          </AmbientBackground>
+        </Section>
+
+        <Section title="Camera chrome">
+          {/* A dark stand-in for the live preview. */}
+          <View className="h-72 justify-between overflow-hidden rounded-lg p-4" style={{ backgroundColor: NEUTRAL_900 }}>
+            <View className="flex-row justify-between">
+              <IconButton variant="overlay" icon={IconX} label="Close camera" onPress={() => toast("Close")} />
+              <IconButton variant="overlay" icon={IconRefresh} label="Flip camera" onPress={() => toast("Flip")} />
+            </View>
+            <View className="flex-row items-center justify-between">
+              <IconButton variant="overlay" size="lg" icon={IconPhoto} label="Open library" onPress={() => toast("Library")} />
+              <CaptureButton onPress={() => toast.success("Captured")} />
+              <View style={{ width: 48 }} />
+            </View>
+          </View>
+          <View className="flex-row items-center gap-3">
+            <IconButton icon={IconCopy} label="Copy" size="sm" onPress={() => toast("Copied")} />
+            <IconButton icon={IconCopy} label="Copy" onPress={() => toast("Copied")} />
+            <IconButton icon={IconCopy} label="Copy" size="lg" onPress={() => toast("Copied")} />
+            <IconButton icon={IconTrash} label="Delete" disabled />
+          </View>
+        </Section>
+
+        {/* The full chat screen, with the composer and keyboard, is `AiChatGallery` (`@vvedantb/native-ui/ai-gallery`). */}
+        <Section title="AI chat">
+          <AiChatSamples />
+          <ChainOfThought defaultOpen>
+            <ChainOfThoughtHeader />
+            <ChainOfThoughtContent>
+              <ChainOfThoughtStep label="Read the question" />
+              <ChainOfThoughtStep label="Search for sync options" status="active">
+                <ChainOfThoughtSearchResults>
+                  <ChainOfThoughtSearchResult>example.com</ChainOfThoughtSearchResult>
+                  <ChainOfThoughtSearchResult>example.org</ChainOfThoughtSearchResult>
+                </ChainOfThoughtSearchResults>
+              </ChainOfThoughtStep>
+              <ChainOfThoughtStep label="Write the answer" status="pending" />
+            </ChainOfThoughtContent>
+          </ChainOfThought>
+          <Suggestions>
+            <Suggestion suggestion="Summarise this thread" onPress={(text) => toast(text)} />
+            <Suggestion suggestion="Draft a reply" onPress={(text) => toast(text)} />
+          </Suggestions>
+          <ConversationEmptyState className="flex-none" />
+        </Section>
       </ScrollView>
 
       <PricingModal

package/src/index.ts

@@ -59,6 +59,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";
@@ -79,6 +93,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";
@@ -90,6 +105,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";
@@ -136,11 +152,14 @@ export { Toaster } from "./Toast";
 export { toast } from "./toastStore";
 export type { ToastOptions, ToastVariant } from "./toastStore";
 export { DateTimeField } from "./DateTimeField";
+export type { DateTimeFieldProps } from "./DateTimeField";
 export { BottomSheetContainer } from "./BottomSheetContainer";
 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 { SettingsSection } from "./settings/SettingsSection";
 export { SettingsField } from "./settings/SettingsField";
 export { SettingsToggleRow } from "./settings/SettingsToggleRow";