@ponti-studios/ui 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": false,
   "description": "Shared UI component library for Ponti Studios",
   "license": "MIT",

package/src/components/feedback/update-guard.tsx

@@ -196,7 +196,11 @@ function UpdateGuardClient({
     updateServiceWorker,
   } = useRegisterSW({ serviceWorkerPath });
 
-  const isOnline = useSyncExternalStore(subscribeOnline, getOnlineSnapshot, getOnlineServerSnapshot);
+  const isOnline = useSyncExternalStore(
+    subscribeOnline,
+    getOnlineSnapshot,
+    getOnlineServerSnapshot,
+  );
 
   const closePrompt = () => {
     setOfflineReady(false);

package/src/components/filters/active-filters-bar.stories.tsx

@@ -1,13 +1,13 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, userEvent, within } from 'storybook/test';
-import { fn } from 'storybook/test';
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { fn } from "storybook/test";
 
-import { ActiveFiltersBar } from './active-filters-bar';
+import { ActiveFiltersBar } from "./active-filters-bar";
 
 const meta = {
-  title: 'Filters/ActiveFiltersBar',
+  title: "Filters/ActiveFiltersBar",
   component: ActiveFiltersBar,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   decorators: [
     (Story) => (
       <div className="w-[600px]">
@@ -23,36 +23,36 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     filters: [
-      { id: '1', label: 'Status: Active', onRemove: fn() },
-      { id: '2', label: 'Created after Jan 1', onRemove: fn() },
+      { id: "1", label: "Status: Active", onRemove: fn() },
+      { id: "2", label: "Created after Jan 1", onRemove: fn() },
     ],
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const list = canvas.getByRole('list');
+    const list = canvas.getByRole("list");
     await expect(list).toBeInTheDocument();
-    const items = within(list).getAllByRole('listitem');
+    const items = within(list).getAllByRole("listitem");
     expect(items.length).toBe(2);
-    await expect(canvas.getByText('Status: Active')).toBeInTheDocument();
-    await expect(canvas.getByText('Created after Jan 1')).toBeInTheDocument();
-    await expect(canvas.getByRole('button', { name: 'Clear all' })).toBeInTheDocument();
+    await expect(canvas.getByText("Status: Active")).toBeInTheDocument();
+    await expect(canvas.getByText("Created after Jan 1")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Clear all" })).toBeInTheDocument();
   },
 };
 
 export const WithClearAll: Story = {
   args: {
     filters: [
-      { id: '1', label: 'Status: Active', onRemove: fn() },
-      { id: '2', label: 'Role: Engineer', onRemove: fn() },
+      { id: "1", label: "Status: Active", onRemove: fn() },
+      { id: "2", label: "Role: Engineer", onRemove: fn() },
     ],
     onClearAll: fn(),
   },
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
-    const list = canvas.getByRole('list');
-    const items = within(list).getAllByRole('listitem');
+    const list = canvas.getByRole("list");
+    const items = within(list).getAllByRole("listitem");
     expect(items.length).toBe(2);
-    const clearButton = canvas.getByRole('button', { name: 'Clear all' });
+    const clearButton = canvas.getByRole("button", { name: "Clear all" });
     await expect(clearButton).toBeInTheDocument();
     await userEvent.click(clearButton);
     await expect(args.onClearAll).toHaveBeenCalledTimes(1);
@@ -61,36 +61,34 @@ export const WithClearAll: Story = {
 
 export const WithSortOnly: Story = {
   args: {
-    filters: [
-      { id: '1', label: 'Date', onRemove: fn(), variant: 'sort', direction: 'desc' },
-    ],
+    filters: [{ id: "1", label: "Date", onRemove: fn(), variant: "sort", direction: "desc" }],
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const list = canvas.getByRole('list');
-    const items = within(list).getAllByRole('listitem');
+    const list = canvas.getByRole("list");
+    const items = within(list).getAllByRole("listitem");
     expect(items.length).toBe(1);
-    await expect(canvas.getByText('Date')).toBeInTheDocument();
-    await expect(canvas.getByRole('button', { name: 'Clear all' })).toBeInTheDocument();
+    await expect(canvas.getByText("Date")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Clear all" })).toBeInTheDocument();
   },
 };
 
 export const WithSortAndFilter: Story = {
   args: {
     filters: [
-      { id: 'filter-1', label: 'Status: Active', onRemove: fn(), variant: 'filter' },
-      { id: 'sort-1', label: 'Date', onRemove: fn(), variant: 'sort', direction: 'desc' },
+      { id: "filter-1", label: "Status: Active", onRemove: fn(), variant: "filter" },
+      { id: "sort-1", label: "Date", onRemove: fn(), variant: "sort", direction: "desc" },
     ],
     onClearAll: fn(),
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const list = canvas.getByRole('list');
-    const items = within(list).getAllByRole('listitem');
+    const list = canvas.getByRole("list");
+    const items = within(list).getAllByRole("listitem");
     expect(items.length).toBe(2);
-    await expect(canvas.getByText('Status: Active')).toBeInTheDocument();
-    await expect(canvas.getByText('Date')).toBeInTheDocument();
-    await expect(canvas.getByRole('button', { name: 'Clear all' })).toBeInTheDocument();
+    await expect(canvas.getByText("Status: Active")).toBeInTheDocument();
+    await expect(canvas.getByText("Date")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Clear all" })).toBeInTheDocument();
   },
 };
 
@@ -98,17 +96,17 @@ export const Empty: Story = {
   args: { filters: [] },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    expect(canvas.queryByRole('list')).toBeNull();
+    expect(canvas.queryByRole("list")).toBeNull();
   },
 };
 
 export const WithClassName: Story = {
   args: {
-    filters: [{ id: '1', label: 'Status: Active', onRemove: fn() }],
-    className: 'mt-4',
+    filters: [{ id: "1", label: "Status: Active", onRemove: fn() }],
+    className: "mt-4",
   },
   play: async ({ canvasElement }) => {
-    const container = canvasElement.querySelector('.mt-4');
+    const container = canvasElement.querySelector(".mt-4");
     await expect(container).not.toBeNull();
   },
 };

package/src/components/filters/filter-select.stories.tsx

@@ -1,22 +1,22 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, within } from 'storybook/test';
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
 
-import { FilterSelect } from './filter-select';
+import { FilterSelect } from "./filter-select";
 
 const meta = {
-  title: 'Filters/FilterSelect',
+  title: "Filters/FilterSelect",
   component: FilterSelect,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   args: {
     options: [
-      { value: 'active', label: 'Active' },
-      { value: 'interview', label: 'Interview' },
-      { value: 'offer', label: 'Offer' },
-      { value: 'rejected', label: 'Rejected' },
-      { value: 'archived', label: 'Archived' },
+      { value: "active", label: "Active" },
+      { value: "interview", label: "Interview" },
+      { value: "offer", label: "Offer" },
+      { value: "rejected", label: "Rejected" },
+      { value: "archived", label: "Archived" },
     ],
-    placeholder: 'All statuses',
-    label: 'Status',
+    placeholder: "All statuses",
+    label: "Status",
     onChange: () => {},
   },
 } satisfies Meta<typeof FilterSelect>;
@@ -25,47 +25,47 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: { value: '' },
+  args: { value: "" },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const trigger = canvas.getByRole('combobox', { name: 'Status' });
+    const trigger = canvas.getByRole("combobox", { name: "Status" });
     await expect(trigger).toBeInTheDocument();
-    await expect(trigger).toHaveTextContent('All statuses');
+    await expect(trigger).toHaveTextContent("All statuses");
   },
 };
 
 export const WithValue: Story = {
-  args: { value: 'active' },
+  args: { value: "active" },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const trigger = canvas.getByRole('combobox', { name: 'Status' });
-    await expect(trigger).toHaveTextContent('Active');
+    const trigger = canvas.getByRole("combobox", { name: "Status" });
+    await expect(trigger).toHaveTextContent("Active");
   },
 };
 
 export const Loading: Story = {
-  args: { value: '', isLoading: true, options: [] },
+  args: { value: "", isLoading: true, options: [] },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await expect(canvas.getByRole('combobox', { name: 'Status' })).toBeInTheDocument();
-    await expect(canvas.getByText('Status')).toBeInTheDocument();
+    await expect(canvas.getByRole("combobox", { name: "Status" })).toBeInTheDocument();
+    await expect(canvas.getByText("Status")).toBeInTheDocument();
   },
 };
 
 export const Empty: Story = {
-  args: { value: '', options: [], emptyLabel: 'No statuses found' },
+  args: { value: "", options: [], emptyLabel: "No statuses found" },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await expect(canvas.getByRole('combobox', { name: 'Status' })).toBeInTheDocument();
-    await expect(canvas.getByText('Status')).toBeInTheDocument();
+    await expect(canvas.getByRole("combobox", { name: "Status" })).toBeInTheDocument();
+    await expect(canvas.getByText("Status")).toBeInTheDocument();
   },
 };
 
 export const Disabled: Story = {
-  args: { value: 'active', disabled: true },
+  args: { value: "active", disabled: true },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const trigger = canvas.getByRole('combobox', { name: 'Status' });
+    const trigger = canvas.getByRole("combobox", { name: "Status" });
     await expect(trigger).toBeDisabled();
   },
 };

package/src/components/filters/filter-select.tsx

@@ -47,12 +47,7 @@ export function FilterSelect({
     <div className={cn("space-y-2 min-w-36 bg-background", className)}>
       <Label htmlFor={selectId}>{label}</Label>
       <Select value={value} onValueChange={onChange} items={items}>
-        <SelectTrigger
-          id={selectId}
-          disabled={disabled}
-          aria-label={label}
-          className="w-full"
-        >
+        <SelectTrigger id={selectId} disabled={disabled} aria-label={label} className="w-full">
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
         <SelectContent className="bg-background max-h-[250px] min-w-36 overflow-y-auto">

package/src/components/filters/filters.stories.tsx

@@ -1,13 +1,13 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, within } from 'storybook/test';
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
 
-import { Input } from '../forms/input';
-import { Filters } from './filters';
+import { Input } from "../forms/input";
+import { Filters } from "./filters";
 
 const meta = {
-  title: 'Filters/Compound',
+  title: "Filters/Compound",
   component: Filters,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   args: {
     children: null,
   },
@@ -17,9 +17,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const statusOptions = [
-  { value: 'active', label: 'Active' },
-  { value: 'interview', label: 'Interview' },
-  { value: 'offer', label: 'Offer' },
+  { value: "active", label: "Active" },
+  { value: "interview", label: "Interview" },
+  { value: "offer", label: "Offer" },
 ];
 
 export const Default: Story = {
@@ -38,15 +38,15 @@ export const Default: Story = {
         />
         <Filters.Select
           value=""
-          options={[{ value: 'engineer', label: 'Engineer' }]}
+          options={[{ value: "engineer", label: "Engineer" }]}
           onChange={() => {}}
           placeholder="All roles"
           label="Role"
         />
         <Filters.Active
           filters={[
-            { id: 'status', label: 'Status: Active', onRemove: () => {} },
-            { id: 'sort', label: 'Date', onRemove: () => {}, variant: 'sort', direction: 'desc' },
+            { id: "status", label: "Status: Active", onRemove: () => {} },
+            { id: "sort", label: "Date", onRemove: () => {}, variant: "sort", direction: "desc" },
           ]}
           onClearAll={() => {}}
         />
@@ -56,17 +56,17 @@ export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    await expect(canvas.getByText('Search')).toBeInTheDocument();
-    await expect(canvas.getByRole('textbox', { name: 'Search applications' })).toBeInTheDocument();
+    await expect(canvas.getByText("Search")).toBeInTheDocument();
+    await expect(canvas.getByRole("textbox", { name: "Search applications" })).toBeInTheDocument();
 
-    await expect(canvas.getByText('Status')).toBeInTheDocument();
-    await expect(canvas.getByRole('combobox', { name: 'Status' })).toBeInTheDocument();
+    await expect(canvas.getByText("Status")).toBeInTheDocument();
+    await expect(canvas.getByRole("combobox", { name: "Status" })).toBeInTheDocument();
 
-    await expect(canvas.getByText('Role')).toBeInTheDocument();
-    await expect(canvas.getByRole('combobox', { name: 'Role' })).toBeInTheDocument();
+    await expect(canvas.getByText("Role")).toBeInTheDocument();
+    await expect(canvas.getByRole("combobox", { name: "Role" })).toBeInTheDocument();
 
-    await expect(canvas.getByText('Status: Active')).toBeInTheDocument();
-    await expect(canvas.getByText('Date')).toBeInTheDocument();
-    await expect(canvas.getByRole('button', { name: 'Clear all' })).toBeInTheDocument();
+    await expect(canvas.getByText("Status: Active")).toBeInTheDocument();
+    await expect(canvas.getByText("Date")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Clear all" })).toBeInTheDocument();
   },
 };

package/src/components/filters/filters.tsx

@@ -5,13 +5,7 @@ import { ActiveFiltersBar, type ActiveFiltersBarProps } from "./active-filters-b
 import { FilterSelect, type FilterSelectProps } from "./filter-select";
 import { Label } from "../primitives/label";
 
-export function FiltersSearch({
-  label,
-  children,
-}: {
-  label: string;
-  children: ReactNode;
-}) {
+export function FiltersSearch({ label, children }: { label: string; children: ReactNode }) {
   const id = `filters-search-${label.toLowerCase().replace(/\s+/g, "-")}`;
   return (
     <div className="flex-1 space-y-2">

package/src/components/filters/search-filter-bar.stories.tsx

@@ -1,13 +1,13 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { Input } from '../forms/input';
-import { FilterSelect } from './filter-select';
-import { SearchFilterBar } from './search-filter-bar';
+import { Input } from "../forms/input";
+import { FilterSelect } from "./filter-select";
+import { SearchFilterBar } from "./search-filter-bar";
 
 const meta = {
-  title: 'Filters/SearchFilterBar',
+  title: "Filters/SearchFilterBar",
   component: SearchFilterBar,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
 } satisfies Meta<typeof SearchFilterBar>;
 
 export default meta;
@@ -20,16 +20,14 @@ export const Legacy: Story = {
   render: () => (
     <div className="w-[720px]">
       <SearchFilterBar
-        activeFilters={[
-          { id: 'status', label: 'Status: Active', onRemove: () => {} },
-        ]}
+        activeFilters={[{ id: "status", label: "Status: Active", onRemove: () => {} }]}
         onClearAll={() => {}}
         search={<Input placeholder="Search..." aria-label="Search" />}
         filters={[
           <FilterSelect
             key="status"
             value="active"
-            options={[{ value: 'active', label: 'Active' }]}
+            options={[{ value: "active", label: "Active" }]}
             onChange={() => {}}
             placeholder="All"
             label="Status"

package/src/components/filters/search-filter-bar.tsx

@@ -1,7 +1,7 @@
-import { type ReactNode } from 'react';
+import { type ReactNode } from "react";
 
-import { cn } from '../../lib/utils';
-import { ActiveFiltersBar, type ActiveFilter } from './active-filters-bar';
+import { cn } from "../../lib/utils";
+import { ActiveFiltersBar, type ActiveFilter } from "./active-filters-bar";
 
 export interface SearchFilterBarProps {
   activeFilters: ActiveFilter[];
@@ -22,10 +22,10 @@ export function SearchFilterBar({
   results,
   children,
   className,
-  filterItemClassName = 'sm:w-48',
+  filterItemClassName = "sm:w-48",
 }: SearchFilterBarProps) {
   return (
-    <div className={cn('flex flex-col gap-4', className)}>
+    <div className={cn("flex flex-col gap-4", className)}>
       <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
         {search ? <div className="flex-1">{search}</div> : null}
 
@@ -35,9 +35,7 @@ export function SearchFilterBar({
           </div>
         ))}
 
-        {results ? (
-          <div className="self-start lg:ml-auto lg:self-auto">{results}</div>
-        ) : null}
+        {results ? <div className="self-start lg:ml-auto lg:self-auto">{results}</div> : null}
 
         {children}
       </div>

package/src/components/navigation/app-navigation.stories.tsx

@@ -121,7 +121,11 @@ export const WithCustomRouterLink: Story = {
 
           <Navigation.Action>
             <Button size="md" asChild>
-              <a href="/get-started" data-router-link="stand-in" onClick={(e) => e.preventDefault()}>
+              <a
+                href="/get-started"
+                data-router-link="stand-in"
+                onClick={(e) => e.preventDefault()}
+              >
                 Get started
               </a>
             </Button>

package/src/components/navigation/app-navigation.tsx

@@ -26,17 +26,26 @@ export interface NavigationRootProps {
  * shape) so `Navigation.Item`'s active state and `asChild` composition
  * behave identically in both places.
  */
-function NavigationRoot({ children, ariaLabel = "Primary navigation", className }: NavigationRootProps) {
+function NavigationRoot({
+  children,
+  ariaLabel = "Primary navigation",
+  className,
+}: NavigationRootProps) {
   const [mobileOpen, setMobileOpen] = React.useState(false);
 
   const items = React.Children.toArray(children);
-  const brand = items.find((child) => React.isValidElement(child) && child.type === NavigationBrand);
+  const brand = items.find(
+    (child) => React.isValidElement(child) && child.type === NavigationBrand,
+  );
   const rest = items.filter((child) => child !== brand);
 
   return (
     <header className="bg-background/95 supports-backdrop-filter:bg-background/60 sticky top-0 z-50 flex w-full justify-center border-b px-4 backdrop-blur">
       <nav
-        className={cn("flex min-h-14 w-full max-w-7xl items-center justify-between gap-6", className)}
+        className={cn(
+          "flex min-h-14 w-full max-w-7xl items-center justify-between gap-6",
+          className,
+        )}
         aria-label={ariaLabel}
       >
         <div className="flex min-w-0 items-center">{brand}</div>
@@ -108,7 +117,13 @@ export type NavigationItemProps = NavigationItemOwnProps &
   Omit<ComponentPropsWithoutRef<"a">, keyof NavigationItemOwnProps>;
 
 /** A single nav link, wrapped in `<li>`. Auto-closes the mobile Sheet on click when rendered there. */
-function NavigationItem({ active = false, asChild = false, className, children, ...props }: NavigationItemProps) {
+function NavigationItem({
+  active = false,
+  asChild = false,
+  className,
+  children,
+  ...props
+}: NavigationItemProps) {
   const isMobile = React.useContext(MobileMenuContext);
   const itemClassName = cn(
     "inline-flex h-9 max-h-9 shrink-0 items-center px-3 py-2 text-sm font-medium hover:bg-muted hover:text-muted-foreground data-[active]:font-semibold data-[active]:text-foreground",

package/src/hooks/use-derived-filter-state.ts

@@ -53,9 +53,7 @@ export function useDerivedFilterState<T extends Record<string, FilterConfig>>({
       .filter(([, v]) => v !== "")
       .map(([key, v]) => ({
         id: key,
-        label: fields[key]?.label
-          ? fields[key].label!(v)
-          : `${key}: ${v}`,
+        label: fields[key]?.label ? fields[key].label!(v) : `${key}: ${v}`,
         onRemove: () => setValue(key, ""),
       }));
   }, [values, fields, setValue]);

package/src/hooks/use-filter-state.ts

@@ -18,8 +18,7 @@ export function useFilterState<T extends Record<string, unknown>>(
   const setFilters = useCallback(
     (newFilters: T | ((prev: T) => T)) => {
       setFiltersState((prev) => {
-        const updatedFilters =
-          typeof newFilters === "function" ? newFilters(prev) : newFilters;
+        const updatedFilters = typeof newFilters === "function" ? newFilters(prev) : newFilters;
 
         if (debounceMs && debounceMs > 0) {
           if (debounceTimerRef.current) {

package/src/native/card.tsx

@@ -4,7 +4,9 @@ import { Text, View, type TextProps, type ViewProps } from "react-native";
 import { cn } from "../lib/utils";
 
 function Card({ className, ...props }: ViewProps) {
-  return <View className={cn("bg-card gap-4 rounded border border-border p-4", className)} {...props} />;
+  return (
+    <View className={cn("bg-card gap-4 rounded border border-border p-4", className)} {...props} />
+  );
 }
 
 function CardHeader({ className, ...props }: ViewProps) {

package/src/native/index.ts

@@ -6,23 +6,33 @@
  * code, so web consumers never pull React Native into their graph and native
  * consumers never pull in react-dom.
  */
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./card";
+export { IconButton } from "./icon-button";
+export { ListRow } from "./list-row";
 export { createMakeStyles, type NamedStyles } from "./make-styles";
 export { nativeShadows, type NativeShadowLayer } from "./shadows";
-export { useColorMode, useThemeColors } from "./use-theme-colors";
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card";
 export { TextField } from "./text-field";
-export { IconButton } from "./icon-button";
+export { useColorMode, useThemeColors } from "./use-theme-colors";
 
 export {
-  typography as nativeTypography,
-  spacing as nativeSpacing,
-  screenMargin as nativeScreenMargin,
-  componentSize as nativeComponentSize,
   borderRadius as nativeBorderRadius,
-  streamItem as nativeStreamItem,
+  componentSize as nativeComponentSize,
   fontFamily as nativeFontFamily,
-  type TypographyVariant,
-  type SpacingToken,
-  type ComponentSizeToken,
+  screenMargin as nativeScreenMargin,
+  spacing as nativeSpacing,
+  streamItem as nativeStreamItem,
+  typography as nativeTypography,
   type BorderRadiusToken,
+  type ComponentSizeToken,
+  type SpacingToken,
+  type TypographyVariant,
 } from "../styles/tokens/normalize-native";
+export { motion as nativeMotion } from "../styles/tokens";

package/src/native/list-row.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+import { Pressable, type StyleProp, Text, type TextStyle, View } from "react-native";
+import { useCSSVariable } from "uniwind";
+
+interface ListRowProps {
+  accessibilityLabel: string;
+  actionTestID?: string;
+  eyebrow?: string;
+  leading?: ReactNode;
+  onLongPress?: () => void;
+  onPress: () => void;
+  subtitle?: string | null;
+  testID?: string;
+  title: string;
+  titleStyle?: StyleProp<TextStyle>;
+  trailing?: ReactNode;
+}
+
+function ListRow({
+  accessibilityLabel,
+  actionTestID,
+  eyebrow,
+  leading,
+  onLongPress,
+  onPress,
+  subtitle,
+  testID,
+  title,
+  titleStyle,
+  trailing,
+}: ListRowProps) {
+  const [muted] = useCSSVariable(["--color-muted"]) as string[];
+
+  return (
+    <Pressable
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      onLongPress={onLongPress}
+      onPress={onPress}
+      className="flex-row items-center gap-3 min-h-14 border-b border-border px-4 py-2"
+      style={({ pressed }) => pressed && { backgroundColor: muted }}
+      testID={testID ?? actionTestID}
+    >
+      {leading ? <View className="items-center justify-center w-6">{leading}</View> : null}
+      <View className="flex-1 gap-0.5 min-w-0">
+        {eyebrow ? (
+          <Text className="text-caption2 text-muted-foreground tracking-[0.2]">{eyebrow}</Text>
+        ) : null}
+        <Text numberOfLines={2} className="text-body text-foreground" style={titleStyle}>
+          {title}
+        </Text>
+        {subtitle ? (
+          <Text
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            className="text-caption1 text-muted-foreground"
+          >
+            {subtitle}
+          </Text>
+        ) : null}
+      </View>
+      {trailing ? <View className="items-center justify-center">{trailing}</View> : null}
+    </Pressable>
+  );
+}
+
+export { ListRow };

package/src/styles/tokens/generated/native.generated.ts

@@ -223,16 +223,44 @@ export default {
     icon: "0.375rem",
   },
   "stream-item": {
-    "border-radius": "0.375rem",
+    "border-radius": "0rem",
     "border-width": "1px",
-    gap: "0.5rem",
-    "icon-size": "1.5rem",
-    "min-height": "50px",
-    "padding-horizontal": "0.5rem",
-    "padding-vertical": "0.25rem",
+    gap: "0.75rem",
+    "icon-size": "1.25rem",
+    "min-height": "3.5rem",
+    "padding-horizontal": "1rem",
+    "padding-vertical": "0.5rem",
   },
   "font-family": {
     primary: "System",
     mono: "Menlo",
   },
+  motion: {
+    duration: {
+      instant: "0ms",
+      quick: "150ms",
+      standard: "300ms",
+      deliberate: "500ms",
+    },
+    easing: {
+      enter: [0, 0, 0.2, 1],
+      exit: [0.4, 0, 1, 1],
+      inOut: [0.4, 0, 0.2, 1],
+    },
+    distance: {
+      rowEnter: "0.5rem",
+      sceneReveal: "2rem",
+    },
+    opacity: {
+      hidden: 0,
+      visible: 1,
+      disabled: 0.5,
+    },
+    interruption: {
+      policy: "cancel-and-settle",
+    },
+    reducedMotion: {
+      policy: "replace-transform-with-opacity",
+    },
+  },
 };

package/src/styles/tokens/index.ts

@@ -1,6 +1,7 @@
 import darkTokens from "./generated/dark.colors.generated";
 import foundations from "./generated/foundations.generated";
 import lightTokens from "./generated/light.colors.generated";
+import nativeTokens from "./generated/native.generated";
 
 const toPixels = (value: string) => {
   if (value.endsWith("rem")) return Number.parseFloat(value) * 16;
@@ -62,6 +63,7 @@ export const transitionDurations = Object.fromEntries(
   Object.entries(foundations.duration).map(([key, value]) => [key, toMilliseconds(value)]),
 ) as Record<keyof typeof foundations.duration, number>;
 export const animations = foundations.animate;
+export const motion = nativeTokens.motion;
 
 export type RadiusToken = keyof typeof radii;
 export type TextSizeToken = keyof typeof textSizes;

package/src/styles/tokens/normalize-native.ts

@@ -17,7 +17,9 @@ const makeFlat = (raw: Record<string, unknown>) => ({
   fontWeight: raw.fontWeight as number,
   lineHeight: unwrap(raw.lineHeight as DimensionValue),
   letterSpacing: unwrap(raw.letterSpacing as DimensionValue),
-  ...(raw.textTransform ? { textTransform: raw.textTransform as "uppercase" | "lowercase" | "capitalize" | "none" } : {}),
+  ...(raw.textTransform
+    ? { textTransform: raw.textTransform as "uppercase" | "lowercase" | "capitalize" | "none" }
+    : {}),
 });
 
 const generated = nativeGenerated as unknown as {
@@ -62,13 +64,13 @@ export const screenMargin = toPixels(generated["screen-margin"]);
 
 export const componentSize = Object.fromEntries(
   Object.entries(generated["component-size"]).map(([key, value]) => [key, toPixels(value)]),
-) as Record<keyof typeof generated["component-size"], number>;
+) as Record<keyof (typeof generated)["component-size"], number>;
 
 export type ComponentSizeToken = keyof typeof componentSize;
 
 export const borderRadius = Object.fromEntries(
   Object.entries(generated["border-radius"]).map(([key, value]) => [key, toPixels(value)]),
-) as Record<keyof typeof generated["border-radius"], number>;
+) as Record<keyof (typeof generated)["border-radius"], number>;
 
 export type BorderRadiusToken = keyof typeof borderRadius;
 

package/src/styles/tokens/source/native.tokens.json

@@ -29,15 +29,15 @@
     "icon": { "$value": "{radius.md}" }
   },
   "stream-item": {
-    "$description": "Shared look for stream rows (time, inbox). Mirrors what the app used to hand-roll in theme.ts.",
+    "$description": "Shared flat list-row look (Inbox, Time, Tasks) — Vercel-style dense list: full-bleed bottom divider, no radius.",
     "$type": "dimension",
-    "border-radius": { "$value": "{radius.md}" },
+    "border-radius": { "$value": { "value": 0, "unit": "rem" } },
     "border-width": { "$value": { "value": 1, "unit": "px" } },
-    "gap": { "$value": "{spacing-scale.2}" },
-    "icon-size": { "$value": "{component-size.md}" },
-    "min-height": { "$value": { "value": 50, "unit": "px" } },
-    "padding-horizontal": { "$value": "{spacing-scale.2}" },
-    "padding-vertical": { "$value": "{spacing-scale.1}" }
+    "gap": { "$value": "{spacing-scale.3}" },
+    "icon-size": { "$value": "{component-size.icon}" },
+    "min-height": { "$value": "{spacing-scale.14}" },
+    "padding-horizontal": { "$value": "{spacing-scale.4}" },
+    "padding-vertical": { "$value": "{spacing-scale.2}" }
   },
   "font-family": {
     "$type": "string",
@@ -165,5 +165,40 @@
         "letterSpacing": { "value": 0, "unit": "px" }
       }
     }
+  },
+  "motion": {
+    "$description": "Portable motion semantics. Platform adapters own runtime animation objects and reduced-motion behavior.",
+    "duration": {
+      "$type": "duration",
+      "instant": { "$value": "0ms" },
+      "quick": { "$value": "{duration.150}" },
+      "standard": { "$value": "{duration.300}" },
+      "deliberate": { "$value": "{duration.500}" }
+    },
+    "easing": {
+      "$type": "cubicBezier",
+      "enter": { "$value": "{ease.out}" },
+      "exit": { "$value": "{ease.in}" },
+      "inOut": { "$value": "{ease.in-out}" }
+    },
+    "distance": {
+      "$type": "dimension",
+      "rowEnter": { "$value": "{spacing-scale.2}" },
+      "sceneReveal": { "$value": "{spacing-scale.8}" }
+    },
+    "opacity": {
+      "$type": "number",
+      "hidden": { "$value": 0 },
+      "visible": { "$value": 1 },
+      "disabled": { "$value": 0.5 }
+    },
+    "interruption": {
+      "$type": "string",
+      "policy": { "$value": "cancel-and-settle" }
+    },
+    "reducedMotion": {
+      "$type": "string",
+      "policy": { "$value": "replace-transform-with-opacity" }
+    }
   }
 }

package/src/styles/tokens/style-dictionary.native.mjs

@@ -5,7 +5,10 @@
  * foundations.generated.ts.
  */
 export default {
-  source: ["src/styles/tokens/source/foundations.tokens.json", "src/styles/tokens/source/native.tokens.json"],
+  source: [
+    "src/styles/tokens/source/foundations.tokens.json",
+    "src/styles/tokens/source/native.tokens.json",
+  ],
   platforms: {
     typescript: {
       transformGroup: "js",