@bubbasfw/ui 0.1.0 → 0.2.0

package/dist/tokens.cjs

@@ -3,6 +3,7 @@
 // src/tokens.ts
 var tokens = {
   brandVersion: "1.0.0",
+  systemVersion: "0.3.0",
   colors: {
     blue: "#007CE8",
     red: "#CC0000",
@@ -19,7 +20,97 @@ var tokens = {
   },
   spacing: { 1: 4, 2: 8, 3: 12, 4: 16, 6: 24, 8: 32, 12: 48, 16: 64 },
   radius: { control: 4, panel: 12 },
-  touchTarget: { minimum: 44, default: 48 }
+  touchTarget: { minimum: 44, default: 48 },
+  layout: { maxWidth: 1200, readingWidth: 720, breakpoints: { compact: 640, wide: 960 } },
+  motion: { feedback: 140 },
+  themes: {
+    "light": {
+      "canvas": "#F7F8FA",
+      "surface": "#FFFFFF",
+      "raised": "#FFFFFF",
+      "hover": "#F6F7F9",
+      "selected": "#ECEEF1",
+      "text": "#131B23",
+      "heading": "#03256C",
+      "muted": "#526075",
+      "line": "#E4E6EA",
+      "border": "#637086",
+      "link": "#03256C",
+      "link-hover": "#A80000",
+      "focus": "#03256C",
+      "focus-inner": "#FFFFFF",
+      "accent": "#CC0000",
+      "action-text": "#FFFFFF",
+      "action-border": "#A80000",
+      "disabled-surface": "#F0F2F5",
+      "disabled-text": "#6B727E",
+      "info": "#03256C",
+      "info-surface": "#F1F5FC",
+      "info-border": "#03256C",
+      "success": "#23633F",
+      "success-surface": "#EAF5EF",
+      "success-border": "#23633F",
+      "warning": "#805500",
+      "warning-surface": "#FFF4D6",
+      "warning-border": "#805500",
+      "error": "#B42318",
+      "error-surface": "#FFF0EF",
+      "error-border": "#B42318",
+      "code-surface": "#171717",
+      "code-text": "#FFFFFF",
+      "code-muted": "#B4B4B4",
+      "selection": "#D9E8FB",
+      "selection-text": "#131B23",
+      "scrollbar": "#637086",
+      "scrollbar-track": "#F7F8FA",
+      "shadow-action": "0 3px 8px #CC000024",
+      "shadow-panel": "0 2px 12px #131B2308",
+      "shadow-dialog": "0 20px 100px #00133345"
+    },
+    "dark": {
+      "canvas": "#171717",
+      "surface": "#202020",
+      "raised": "#292929",
+      "hover": "#303030",
+      "selected": "#383838",
+      "text": "#FFFFFF",
+      "heading": "#FFFFFF",
+      "muted": "#B4B4B4",
+      "line": "#3D3D3D",
+      "border": "#858585",
+      "link": "#8DC7FF",
+      "link-hover": "#B8DEFF",
+      "focus": "#FFFFFF",
+      "focus-inner": "#202020",
+      "accent": "#FF9F99",
+      "action-text": "#FFFFFF",
+      "action-border": "#EF817A",
+      "disabled-surface": "#242424",
+      "disabled-text": "#9A9A9A",
+      "info": "#8DC7FF",
+      "info-surface": "#1D2D3D",
+      "info-border": "#8DC7FF",
+      "success": "#8DDBA9",
+      "success-surface": "#183323",
+      "success-border": "#8DDBA9",
+      "warning": "#FED766",
+      "warning-surface": "#3A2E12",
+      "warning-border": "#FED766",
+      "error": "#FFAEA8",
+      "error-surface": "#3D2020",
+      "error-border": "#FFAEA8",
+      "code-surface": "#171717",
+      "code-text": "#FFFFFF",
+      "code-muted": "#B4B4B4",
+      "selection": "#383838",
+      "selection-text": "#FFFFFF",
+      "scrollbar": "#858585",
+      "scrollbar-track": "#171717",
+      "shadow-action": "0 3px 8px #00000040",
+      "shadow-panel": "0 2px 12px #00000020",
+      "shadow-dialog": "0 20px 100px #00000080"
+    }
+  }
 };
 
 exports.tokens = tokens;

package/dist/tokens.d.cts

@@ -1,6 +1,7 @@
 /** Pinned foundations from Bubba's Brand Studio brand release 1.0.0. */
 declare const tokens: {
     readonly brandVersion: "1.0.0";
+    readonly systemVersion: "0.3.0";
     readonly colors: {
         readonly blue: "#007CE8";
         readonly red: "#CC0000";
@@ -33,6 +34,105 @@ declare const tokens: {
         readonly minimum: 44;
         readonly default: 48;
     };
+    readonly layout: {
+        readonly maxWidth: 1200;
+        readonly readingWidth: 720;
+        readonly breakpoints: {
+            readonly compact: 640;
+            readonly wide: 960;
+        };
+    };
+    readonly motion: {
+        readonly feedback: 140;
+    };
+    readonly themes: {
+        readonly light: {
+            readonly canvas: "#F7F8FA";
+            readonly surface: "#FFFFFF";
+            readonly raised: "#FFFFFF";
+            readonly hover: "#F6F7F9";
+            readonly selected: "#ECEEF1";
+            readonly text: "#131B23";
+            readonly heading: "#03256C";
+            readonly muted: "#526075";
+            readonly line: "#E4E6EA";
+            readonly border: "#637086";
+            readonly link: "#03256C";
+            readonly 'link-hover': "#A80000";
+            readonly focus: "#03256C";
+            readonly 'focus-inner': "#FFFFFF";
+            readonly accent: "#CC0000";
+            readonly 'action-text': "#FFFFFF";
+            readonly 'action-border': "#A80000";
+            readonly 'disabled-surface': "#F0F2F5";
+            readonly 'disabled-text': "#6B727E";
+            readonly info: "#03256C";
+            readonly 'info-surface': "#F1F5FC";
+            readonly 'info-border': "#03256C";
+            readonly success: "#23633F";
+            readonly 'success-surface': "#EAF5EF";
+            readonly 'success-border': "#23633F";
+            readonly warning: "#805500";
+            readonly 'warning-surface': "#FFF4D6";
+            readonly 'warning-border': "#805500";
+            readonly error: "#B42318";
+            readonly 'error-surface': "#FFF0EF";
+            readonly 'error-border': "#B42318";
+            readonly 'code-surface': "#171717";
+            readonly 'code-text': "#FFFFFF";
+            readonly 'code-muted': "#B4B4B4";
+            readonly selection: "#D9E8FB";
+            readonly 'selection-text': "#131B23";
+            readonly scrollbar: "#637086";
+            readonly 'scrollbar-track': "#F7F8FA";
+            readonly 'shadow-action': "0 3px 8px #CC000024";
+            readonly 'shadow-panel': "0 2px 12px #131B2308";
+            readonly 'shadow-dialog': "0 20px 100px #00133345";
+        };
+        readonly dark: {
+            readonly canvas: "#171717";
+            readonly surface: "#202020";
+            readonly raised: "#292929";
+            readonly hover: "#303030";
+            readonly selected: "#383838";
+            readonly text: "#FFFFFF";
+            readonly heading: "#FFFFFF";
+            readonly muted: "#B4B4B4";
+            readonly line: "#3D3D3D";
+            readonly border: "#858585";
+            readonly link: "#8DC7FF";
+            readonly 'link-hover': "#B8DEFF";
+            readonly focus: "#FFFFFF";
+            readonly 'focus-inner': "#202020";
+            readonly accent: "#FF9F99";
+            readonly 'action-text': "#FFFFFF";
+            readonly 'action-border': "#EF817A";
+            readonly 'disabled-surface': "#242424";
+            readonly 'disabled-text': "#9A9A9A";
+            readonly info: "#8DC7FF";
+            readonly 'info-surface': "#1D2D3D";
+            readonly 'info-border': "#8DC7FF";
+            readonly success: "#8DDBA9";
+            readonly 'success-surface': "#183323";
+            readonly 'success-border': "#8DDBA9";
+            readonly warning: "#FED766";
+            readonly 'warning-surface': "#3A2E12";
+            readonly 'warning-border': "#FED766";
+            readonly error: "#FFAEA8";
+            readonly 'error-surface': "#3D2020";
+            readonly 'error-border': "#FFAEA8";
+            readonly 'code-surface': "#171717";
+            readonly 'code-text': "#FFFFFF";
+            readonly 'code-muted': "#B4B4B4";
+            readonly selection: "#383838";
+            readonly 'selection-text': "#FFFFFF";
+            readonly scrollbar: "#858585";
+            readonly 'scrollbar-track': "#171717";
+            readonly 'shadow-action': "0 3px 8px #00000040";
+            readonly 'shadow-panel': "0 2px 12px #00000020";
+            readonly 'shadow-dialog': "0 20px 100px #00000080";
+        };
+    };
 };
 type BubbaTokens = typeof tokens;
 

package/dist/tokens.d.ts

@@ -1,6 +1,7 @@
 /** Pinned foundations from Bubba's Brand Studio brand release 1.0.0. */
 declare const tokens: {
     readonly brandVersion: "1.0.0";
+    readonly systemVersion: "0.3.0";
     readonly colors: {
         readonly blue: "#007CE8";
         readonly red: "#CC0000";
@@ -33,6 +34,105 @@ declare const tokens: {
         readonly minimum: 44;
         readonly default: 48;
     };
+    readonly layout: {
+        readonly maxWidth: 1200;
+        readonly readingWidth: 720;
+        readonly breakpoints: {
+            readonly compact: 640;
+            readonly wide: 960;
+        };
+    };
+    readonly motion: {
+        readonly feedback: 140;
+    };
+    readonly themes: {
+        readonly light: {
+            readonly canvas: "#F7F8FA";
+            readonly surface: "#FFFFFF";
+            readonly raised: "#FFFFFF";
+            readonly hover: "#F6F7F9";
+            readonly selected: "#ECEEF1";
+            readonly text: "#131B23";
+            readonly heading: "#03256C";
+            readonly muted: "#526075";
+            readonly line: "#E4E6EA";
+            readonly border: "#637086";
+            readonly link: "#03256C";
+            readonly 'link-hover': "#A80000";
+            readonly focus: "#03256C";
+            readonly 'focus-inner': "#FFFFFF";
+            readonly accent: "#CC0000";
+            readonly 'action-text': "#FFFFFF";
+            readonly 'action-border': "#A80000";
+            readonly 'disabled-surface': "#F0F2F5";
+            readonly 'disabled-text': "#6B727E";
+            readonly info: "#03256C";
+            readonly 'info-surface': "#F1F5FC";
+            readonly 'info-border': "#03256C";
+            readonly success: "#23633F";
+            readonly 'success-surface': "#EAF5EF";
+            readonly 'success-border': "#23633F";
+            readonly warning: "#805500";
+            readonly 'warning-surface': "#FFF4D6";
+            readonly 'warning-border': "#805500";
+            readonly error: "#B42318";
+            readonly 'error-surface': "#FFF0EF";
+            readonly 'error-border': "#B42318";
+            readonly 'code-surface': "#171717";
+            readonly 'code-text': "#FFFFFF";
+            readonly 'code-muted': "#B4B4B4";
+            readonly selection: "#D9E8FB";
+            readonly 'selection-text': "#131B23";
+            readonly scrollbar: "#637086";
+            readonly 'scrollbar-track': "#F7F8FA";
+            readonly 'shadow-action': "0 3px 8px #CC000024";
+            readonly 'shadow-panel': "0 2px 12px #131B2308";
+            readonly 'shadow-dialog': "0 20px 100px #00133345";
+        };
+        readonly dark: {
+            readonly canvas: "#171717";
+            readonly surface: "#202020";
+            readonly raised: "#292929";
+            readonly hover: "#303030";
+            readonly selected: "#383838";
+            readonly text: "#FFFFFF";
+            readonly heading: "#FFFFFF";
+            readonly muted: "#B4B4B4";
+            readonly line: "#3D3D3D";
+            readonly border: "#858585";
+            readonly link: "#8DC7FF";
+            readonly 'link-hover': "#B8DEFF";
+            readonly focus: "#FFFFFF";
+            readonly 'focus-inner': "#202020";
+            readonly accent: "#FF9F99";
+            readonly 'action-text': "#FFFFFF";
+            readonly 'action-border': "#EF817A";
+            readonly 'disabled-surface': "#242424";
+            readonly 'disabled-text': "#9A9A9A";
+            readonly info: "#8DC7FF";
+            readonly 'info-surface': "#1D2D3D";
+            readonly 'info-border': "#8DC7FF";
+            readonly success: "#8DDBA9";
+            readonly 'success-surface': "#183323";
+            readonly 'success-border': "#8DDBA9";
+            readonly warning: "#FED766";
+            readonly 'warning-surface': "#3A2E12";
+            readonly 'warning-border': "#FED766";
+            readonly error: "#FFAEA8";
+            readonly 'error-surface': "#3D2020";
+            readonly 'error-border': "#FFAEA8";
+            readonly 'code-surface': "#171717";
+            readonly 'code-text': "#FFFFFF";
+            readonly 'code-muted': "#B4B4B4";
+            readonly selection: "#383838";
+            readonly 'selection-text': "#FFFFFF";
+            readonly scrollbar: "#858585";
+            readonly 'scrollbar-track': "#171717";
+            readonly 'shadow-action': "0 3px 8px #00000040";
+            readonly 'shadow-panel': "0 2px 12px #00000020";
+            readonly 'shadow-dialog': "0 20px 100px #00000080";
+        };
+    };
 };
 type BubbaTokens = typeof tokens;
 

package/dist/tokens.js

@@ -1,6 +1,7 @@
 // src/tokens.ts
 var tokens = {
   brandVersion: "1.0.0",
+  systemVersion: "0.3.0",
   colors: {
     blue: "#007CE8",
     red: "#CC0000",
@@ -17,7 +18,97 @@ var tokens = {
   },
   spacing: { 1: 4, 2: 8, 3: 12, 4: 16, 6: 24, 8: 32, 12: 48, 16: 64 },
   radius: { control: 4, panel: 12 },
-  touchTarget: { minimum: 44, default: 48 }
+  touchTarget: { minimum: 44, default: 48 },
+  layout: { maxWidth: 1200, readingWidth: 720, breakpoints: { compact: 640, wide: 960 } },
+  motion: { feedback: 140 },
+  themes: {
+    "light": {
+      "canvas": "#F7F8FA",
+      "surface": "#FFFFFF",
+      "raised": "#FFFFFF",
+      "hover": "#F6F7F9",
+      "selected": "#ECEEF1",
+      "text": "#131B23",
+      "heading": "#03256C",
+      "muted": "#526075",
+      "line": "#E4E6EA",
+      "border": "#637086",
+      "link": "#03256C",
+      "link-hover": "#A80000",
+      "focus": "#03256C",
+      "focus-inner": "#FFFFFF",
+      "accent": "#CC0000",
+      "action-text": "#FFFFFF",
+      "action-border": "#A80000",
+      "disabled-surface": "#F0F2F5",
+      "disabled-text": "#6B727E",
+      "info": "#03256C",
+      "info-surface": "#F1F5FC",
+      "info-border": "#03256C",
+      "success": "#23633F",
+      "success-surface": "#EAF5EF",
+      "success-border": "#23633F",
+      "warning": "#805500",
+      "warning-surface": "#FFF4D6",
+      "warning-border": "#805500",
+      "error": "#B42318",
+      "error-surface": "#FFF0EF",
+      "error-border": "#B42318",
+      "code-surface": "#171717",
+      "code-text": "#FFFFFF",
+      "code-muted": "#B4B4B4",
+      "selection": "#D9E8FB",
+      "selection-text": "#131B23",
+      "scrollbar": "#637086",
+      "scrollbar-track": "#F7F8FA",
+      "shadow-action": "0 3px 8px #CC000024",
+      "shadow-panel": "0 2px 12px #131B2308",
+      "shadow-dialog": "0 20px 100px #00133345"
+    },
+    "dark": {
+      "canvas": "#171717",
+      "surface": "#202020",
+      "raised": "#292929",
+      "hover": "#303030",
+      "selected": "#383838",
+      "text": "#FFFFFF",
+      "heading": "#FFFFFF",
+      "muted": "#B4B4B4",
+      "line": "#3D3D3D",
+      "border": "#858585",
+      "link": "#8DC7FF",
+      "link-hover": "#B8DEFF",
+      "focus": "#FFFFFF",
+      "focus-inner": "#202020",
+      "accent": "#FF9F99",
+      "action-text": "#FFFFFF",
+      "action-border": "#EF817A",
+      "disabled-surface": "#242424",
+      "disabled-text": "#9A9A9A",
+      "info": "#8DC7FF",
+      "info-surface": "#1D2D3D",
+      "info-border": "#8DC7FF",
+      "success": "#8DDBA9",
+      "success-surface": "#183323",
+      "success-border": "#8DDBA9",
+      "warning": "#FED766",
+      "warning-surface": "#3A2E12",
+      "warning-border": "#FED766",
+      "error": "#FFAEA8",
+      "error-surface": "#3D2020",
+      "error-border": "#FFAEA8",
+      "code-surface": "#171717",
+      "code-text": "#FFFFFF",
+      "code-muted": "#B4B4B4",
+      "selection": "#383838",
+      "selection-text": "#FFFFFF",
+      "scrollbar": "#858585",
+      "scrollbar-track": "#171717",
+      "shadow-action": "0 3px 8px #00000040",
+      "shadow-panel": "0 2px 12px #00000020",
+      "shadow-dialog": "0 20px 100px #00000080"
+    }
+  }
 };
 
 export { tokens };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bubbasfw/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Bubba\u2019s universal React Native and web design system, styled with NativeWind.",
   "license": "MIT",
   "type": "module",
@@ -54,7 +54,7 @@
     "url": "https://github.com/handh-dev/bubbas-ui.git",
     "directory": "packages/ui"
   },
-  "homepage": "https://github.com/handh-dev/bubbas-ui#readme",
+  "homepage": "https://handh-dev.github.io/bubbas-ui/",
   "keywords": [
     "react-native",
     "react-native-web",

package/src/components/Button.tsx

@@ -2,8 +2,8 @@
 
 import { forwardRef, type ElementRef, type ReactNode } from 'react';
 import { ActivityIndicator, Pressable, Text, type PressableProps } from 'react-native';
-import { twMerge } from 'tailwind-merge';
-import { tokens } from '../tokens';
+import { cn, focusRing } from '../internal/utils';
+import { useTheme } from '../theme';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
 export type ButtonSize = 'sm' | 'md' | 'lg';
@@ -20,16 +20,16 @@ export interface ButtonProps extends Omit<PressableProps, 'children' | 'classNam
 }
 
 const containerVariants: Record<ButtonVariant, string> = {
-  primary: 'border-bubba-red bg-bubba-red',
-  secondary: 'border-bubba-navy bg-bubba-navy',
-  outline: 'border-bubba-navy bg-transparent',
+  primary: 'border-ui-action-border bg-bubba-red',
+  secondary: 'border-ui-border bg-ui-selected',
+  outline: 'border-ui-border bg-transparent',
   ghost: 'border-transparent bg-transparent',
 };
 const textVariants: Record<ButtonVariant, string> = {
-  primary: 'text-bubba-white',
-  secondary: 'text-bubba-white',
-  outline: 'text-bubba-navy',
-  ghost: 'text-bubba-navy',
+  primary: 'text-ui-action-text',
+  secondary: 'text-ui-text',
+  outline: 'text-ui-text',
+  ghost: 'text-ui-link',
 };
 const containerSizes: Record<ButtonSize, string> = {
   sm: 'min-h-[44px] px-3 py-2',
@@ -61,14 +61,13 @@ export const Button = forwardRef<ElementRef<typeof Pressable>, ButtonProps>(
     },
     ref,
   ) {
+    const { colors } = useTheme();
     const explicitlyDisabled = disabled || (ariaDisabled ?? accessibilityState?.disabled ?? false);
     const isDisabled = explicitlyDisabled || loading;
     const isBusy = loading || (ariaBusy ?? accessibilityState?.busy ?? false);
     const spinnerColor = explicitlyDisabled
-      ? tokens.colors.disabledText
-      : variant === 'primary' || variant === 'secondary'
-        ? tokens.colors.white
-        : tokens.colors.navy;
+      ? colors['disabled-text']
+      : variant === 'primary' ? colors['action-text'] : colors.text;
 
     return (
       <Pressable
@@ -79,21 +78,22 @@ export const Button = forwardRef<ElementRef<typeof Pressable>, ButtonProps>(
         aria-busy={isBusy}
         aria-disabled={isDisabled}
         disabled={isDisabled}
-        className={twMerge(
-          'min-w-[44px] flex-row items-center justify-center gap-2 rounded-[4px] border active:opacity-80 web:focus-visible:outline web:focus-visible:outline-2 web:focus-visible:outline-offset-2 web:focus-visible:outline-bubba-navy',
+        className={cn(
+          'min-w-[44px] flex-row items-center justify-center gap-2 rounded-[4px] border active:opacity-80',
+          focusRing,
           containerVariants[variant],
           containerSizes[size],
-          explicitlyDisabled && 'border-bubba-disabled bg-bubba-disabled',
+          explicitlyDisabled && 'border-ui-disabled-surface bg-ui-disabled-surface',
           className,
         )}
       >
         {loading ? <ActivityIndicator size="small" color={spinnerColor} accessible={false} /> : null}
         <Text
-          className={twMerge(
+          className={cn(
             'font-bold text-center',
             textVariants[variant],
             textSizes[size],
-            explicitlyDisabled && 'text-bubba-disabledText',
+            explicitlyDisabled && 'text-ui-disabled-text',
             textClassName,
           )}
         >

package/src/components/actions.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { forwardRef, type ElementRef, type ReactNode } from 'react';
+import { Linking, Platform, Pressable, type PressableProps } from 'react-native';
+import { cn, focusRing } from '../internal/utils';
+import { Text } from './typography';
+
+export interface IconButtonProps extends Omit<PressableProps, 'children' | 'accessibilityLabel'> {
+  accessibilityLabel: string;
+  children: ReactNode;
+  variant?: 'primary' | 'outline' | 'ghost';
+  className?: string;
+}
+const iconVariants = { primary: 'bg-bubba-red border-bubba-red', outline: 'border-ui-border bg-transparent', ghost: 'border-transparent bg-transparent' };
+export const IconButton = forwardRef<ElementRef<typeof Pressable>, IconButtonProps>(function IconButton({ accessibilityLabel, children, variant = 'ghost', className, disabled, accessibilityState, 'aria-disabled': ariaDisabled, ...props }, ref) {
+  const isDisabled = disabled || (ariaDisabled ?? accessibilityState?.disabled ?? false);
+  return <Pressable {...props} ref={ref} accessibilityRole="button" accessibilityLabel={accessibilityLabel} disabled={isDisabled} aria-disabled={isDisabled} accessibilityState={{ ...accessibilityState, disabled: isDisabled }} className={cn('h-12 w-12 items-center justify-center rounded border active:opacity-80', focusRing, iconVariants[variant], isDisabled && 'opacity-50', className)}>{children}</Pressable>;
+});
+
+export interface LinkProps extends Omit<PressableProps, 'children'> {
+  href: string;
+  children: ReactNode;
+  external?: boolean;
+  className?: string;
+  textClassName?: string;
+  /** Called when the operating system cannot open a native URL. */
+  onOpenError?: (error: unknown) => void;
+}
+type WebLinkProps = PressableProps & { href?: string; hrefAttrs?: { target?: string; rel?: string } };
+const LinkPressable = Pressable as typeof Pressable & ((props: WebLinkProps) => ReactNode);
+
+export const Link = forwardRef<ElementRef<typeof Pressable>, LinkProps>(function Link({ href, children, external = false, className, textClassName, disabled, onPress, onOpenError, accessibilityState, 'aria-disabled': ariaDisabled, ...props }, ref) {
+  const isDisabled = disabled || (ariaDisabled ?? accessibilityState?.disabled ?? false);
+  const webProps = Platform.OS === 'web' && !isDisabled ? { href, hrefAttrs: external ? { target: '_blank', rel: 'noopener noreferrer' } : undefined } : {};
+  return <LinkPressable {...props} {...webProps} ref={ref} accessibilityRole="link" disabled={isDisabled} aria-disabled={isDisabled} accessibilityState={{ ...accessibilityState, disabled: isDisabled }} className={cn('min-h-[44px] min-w-[44px] justify-center self-start', focusRing, isDisabled && 'opacity-50', className)} onPress={(event) => {
+    onPress?.(event);
+    if (Platform.OS !== 'web' && !event.isDefaultPrevented()) void Linking.openURL(href).catch((error: unknown) => onOpenError?.(error));
+  }}><Text className={cn('text-ui-link underline', textClassName)}>{children}</Text></LinkPressable>;
+});

package/src/components/content.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { forwardRef, useState, type ElementRef, type ReactNode } from 'react';
+import { Image, Pressable, View, type ImageSourcePropType, type ViewProps, type PressableProps } from 'react-native';
+import { cn, focusRing } from '../internal/utils';
+import { Text } from './typography';
+
+export type StatusTone = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+const toneClasses = {
+  neutral: 'bg-ui-selected', info: 'bg-ui-info-surface', success: 'bg-ui-success-surface', warning: 'bg-ui-warning-surface', error: 'bg-ui-error-surface',
+};
+const toneText = { neutral: 'text-ui-text', info: 'text-ui-info', success: 'text-ui-success', warning: 'text-ui-warning', error: 'text-ui-error' };
+export interface BadgeProps extends ViewProps { children: ReactNode; tone?: StatusTone; className?: string; textClassName?: string }
+export function Badge({ children, tone = 'neutral', className, textClassName, ...props }: BadgeProps) {
+  return <View {...props} className={cn('self-start rounded-full px-3 py-1', toneClasses[tone], className)}><Text variant="small" className={cn('font-semibold', toneText[tone], textClassName)}>{children}</Text></View>;
+}
+
+export interface AvatarProps extends ViewProps {
+  source?: ImageSourcePropType;
+  name: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+const avatarSizes = { sm: 'h-8 w-8', md: 'h-12 w-12', lg: 'h-16 w-16' };
+export function Avatar({ source, name, size = 'md', className, ...props }: AvatarProps) {
+  const [failedSource, setFailedSource] = useState<ImageSourcePropType>();
+  const initials = name.trim().split(/\s+/).slice(0, 2).map((part) => part[0]).join('').toUpperCase() || '?';
+  return <View {...props} accessible accessibilityRole="image" accessibilityLabel={name} className={cn('items-center justify-center overflow-hidden rounded-full bg-ui-selected', avatarSizes[size], className)}>
+    {source && source !== failedSource ? <Image source={source} resizeMode="cover" accessible={false} className="h-full w-full" onError={() => setFailedSource(source)} /> : <Text accessible={false} className="font-bold">{initials}</Text>}
+  </View>;
+}
+
+export interface EmptyStateProps extends ViewProps { title: string; description?: string; children?: ReactNode; className?: string }
+export function EmptyState({ title, description, children, className, ...props }: EmptyStateProps) {
+  return <View {...props} className={cn('items-start gap-3 py-8', className)}>
+    <Text className="text-lg font-bold">{title}</Text>
+    {description ? <Text tone="muted">{description}</Text> : null}
+    {children}
+  </View>;
+}
+
+export interface ListItemProps extends Omit<ViewProps, 'children'> {
+  title: string;
+  description?: string;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  className?: string;
+  onPress?: PressableProps['onPress'];
+  disabled?: boolean;
+}
+export const ListItem = forwardRef<ElementRef<typeof View>, ListItemProps>(function ListItem({ title, description, leading, trailing, className, disabled = false, onPress, accessibilityState, ...props }, ref) {
+  const content = <>{leading}<View className="min-w-0 flex-1 gap-1"><Text className="font-semibold">{title}</Text>{description ? <Text variant="small" tone="muted">{description}</Text> : null}</View>{trailing}</>;
+  const classes = cn('min-h-[48px] min-w-[44px] flex-row items-center gap-3 border-b border-ui-line py-3', onPress && focusRing, disabled && 'opacity-50', className);
+  return onPress ? <Pressable {...props} ref={ref} onPress={onPress} disabled={disabled} aria-disabled={disabled} accessibilityRole="button" accessibilityState={{ ...accessibilityState, disabled }} className={classes}>{content}</Pressable> : <View {...props} ref={ref} accessibilityState={accessibilityState} className={classes}>{content}</View>;
+});