@vvedantb/native-ui 0.4.0 → 0.5.0

package/src/StatusDot.tsx

@@ -4,7 +4,10 @@ import { palette, withAlpha } from "./palette";
 import { tokens } from "./tokens";
 import { useScheme } from "./useScheme";
 
-/** The web `StatusTone`s. */
+/**
+ * The web `StatusTone`s, and `info` (native only, from 0.5.0): neutral news
+ * such as "synced" or "new", in blue.
+ */
 export type StatusTone =
   | "progress"
   | "business-review"
@@ -13,6 +16,7 @@ export type StatusTone =
   | "cancelled"
   | "active"
   | "critical"
+  | "info"
   | "neutral";
 
 export type StatusDotProps = ViewProps & {
@@ -22,6 +26,13 @@ export type StatusDotProps = ViewProps & {
   className?: string;
 };
 
+/**
+ * The `info` blue: Tailwind `blue-500` in light and the lighter `blue-400` in
+ * dark. Local to the dot: `tokens.css` has no `--info`, so it is not a
+ * `palette` key.
+ */
+const INFO = { light: "#3b82f6", dark: "#60a5fa" } as const;
+
 function toneColor(tone: StatusTone, scheme: "light" | "dark") {
   switch (tone) {
     case "progress":
@@ -37,6 +48,8 @@ function toneColor(tone: StatusTone, scheme: "light" | "dark") {
       return withAlpha(tokens.color.muted[scheme], 0.4);
     case "critical":
       return palette.danger[scheme];
+    case "info":
+      return INFO[scheme];
     default:
       return withAlpha(tokens.color.muted[scheme], 0.6);
   }

package/src/ThemeToggle.tsx

@@ -9,6 +9,10 @@ export type ThemeToggleProps = {
   testID?: string;
 };
 
+/** Logged when NativeWind's `setColorScheme` throws. */
+const DARK_MODE_CLASS_HINT =
+  'ThemeToggle could not set the colour scheme. NativeWind throws while Tailwind darkMode is "media" (the default): set darkMode: "class" in tailwind.config.js. See the @vvedantb/native-ui README, Theme.';
+
 /**
  * A `HeaderIconButton` that switches between light and dark with NativeWind's
  * `setColorScheme`, the scheme `useScheme` reads. It shows and names the
@@ -16,6 +20,10 @@ export type ThemeToggleProps = {
  * "Switch to light mode" in dark. The choice lasts only as long as NativeWind
  * keeps it; an app that restores it on the next launch stores
  * `useColorScheme().colorScheme` itself.
+ *
+ * `setColorScheme` throws unless the app sets Tailwind `darkMode: "class"`.
+ * The press then logs that fix with `console.error` and leaves the scheme as
+ * it is, instead of throwing from the press handler.
  */
 export function ThemeToggle({ testID }: ThemeToggleProps) {
   const { setColorScheme } = useColorScheme();
@@ -24,12 +32,16 @@ export function ThemeToggle({ testID }: ThemeToggleProps) {
   const next = scheme === "dark" ? "light" : "dark";
   const Icon = next === "dark" ? IconMoon : IconSun;
 
+  const toggle = () => {
+    try {
+      setColorScheme(next);
+    } catch (error) {
+      console.error(DARK_MODE_CLASS_HINT, error);
+    }
+  };
+
   return (
-    <HeaderIconButton
-      label={`Switch to ${next} mode`}
-      testID={testID}
-      onPress={() => setColorScheme(next)}
-    >
+    <HeaderIconButton label={`Switch to ${next} mode`} testID={testID} onPress={toggle}>
       <Icon size={largerText ? 26 : 22} color={tokens.color.foreground[scheme]} />
     </HeaderIconButton>
   );

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";

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,
@@ -125,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;
@@ -194,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">
@@ -367,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>
@@ -515,6 +549,139 @@ function GalleryScreen() {
           </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 />

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";