@tallyui/components 1.0.0 → 3.0.0-next.0

package/src/sale/sync-status.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useRef, useState } from 'react';
+import { AccessibilityInfo, Platform, Text, View } from 'react-native';
+import type { SyncNotice } from '@tallyui/core';
+import type { OutboxState } from '@tallyui/pos';
+
+/**
+ * What the cashier reads when the product pull stops, keyed by the notice's code; the code itself is never shown.
+ * Every detail starts "You can keep selling." `software`, `minVersion` and `fix` come from the notice, so the
+ * component never names a backend or a version itself.
+ */
+type PullNoticeText = { line: (pluginName: string) => string; detail: (notice: SyncNotice, pluginName: string) => string };
+const PULL_NOTICE_TEXT: Record<string, PullNoticeText> = {
+  unauthorized: {
+    line: () => "Products aren't updating: this till needs to sign in to the online store again.",
+    detail: () => 'You can keep selling. Products, prices and stock stay as they were until someone signs in again.',
+  },
+  till_update_required: {
+    line: () => "Products aren't updating: this till needs updating.",
+    detail: () => 'You can keep selling. Products, prices and stock stay as they were until this till is updated.',
+  },
+  unsupported_store: {
+    line: () => "Products aren't updating: the online store needs a software update.",
+    detail: ({ software, minVersion }) => software && minVersion
+      ? `You can keep selling. Ask the store owner to update ${software} to version ${minVersion} or later.`
+      : "You can keep selling. Ask the store owner to update the store's software.",
+  },
+  missing_plugin: {
+    line: (pluginName) => `Products aren't updating: the online store is missing ${pluginName}.`,
+    detail: (_notice, pluginName) => `You can keep selling. This till couldn't find ${pluginName} on the online store. `
+      + "Ask the store owner to check that it is installed and switched on, and that the store address in this till's settings is right.",
+  },
+  store_misconfigured: {
+    line: () => "Products aren't updating: a setting on the online store needs changing.",
+    detail: ({ fix }) => fix ? `You can keep selling. Ask the store owner to ${fix}.`
+      : "You can keep selling. Ask the store owner to check the store's settings.",
+  },
+};
+const PULL_NOTICE_FALLBACK: PullNoticeText = {
+  line: () => "Products aren't updating.",
+  detail: () => 'You can keep selling. Products, prices and stock stay as they were. '
+    + 'Restart the app; if it keeps happening, tell the store owner.',
+};
+
+// The line the cashier reads while the store keeps answering 404 (OutboxState.backendMissing) and no order is stuck.
+const BACKEND_MISSING = "Sales aren't reaching the online store. Keep selling: they're saved on this till and will send by themselves.";
+// The same line once an order is stuck, with the store missing or not; {time} becomes stuck.since.
+const BACKEND_MISSING_SINCE = "Sales haven't reached the online store since {time}. Keep selling: they're saved on this till and will send by themselves.";
+// The line instead when no sale waits but till updates do, and its "since" variant once registerState.stuck is set.
+const TILL_UPDATES_MISSING = "Till updates aren't reaching the online store. Keep selling: they're saved on this till and will send by themselves.";
+const TILL_UPDATES_MISSING_SINCE = "Till updates haven't reached the online store since {time}. Keep selling: they're saved on this till and will send by themselves.";
+// The detail below it; {pluginName} becomes the pluginName prop. With nothing waiting (store missing or not) the line is only
+// "Sales are up to date.", and here {lastTime} is set.
+const BACKEND_MISSING_DETAIL = "This till couldn't find {pluginName} on the online store{lastTime}. Ask the store owner to check that it is installed "
+  + "and switched on, and that the store address in this till's settings is right.";
+
+// The whole status line while the store has refused sales (OutboxState.rejected), in place of every other outbox line (#269).
+// `waiting` is empty, or ", " and what else waits, so the line never hides waiting sales.
+const REFUSED = (n: number, waiting: string) => n === 1
+  ? `1 sale needs attention${waiting} · The online store refused it. Ask the store owner to look at the till's sync log.`
+  : `${n} sales need attention${waiting} · The online store refused them. Ask the store owner to look at the till's sync log.`;
+// The first detail below it, in the Front desk's ruling (#269). Not every refusal can be retried (idempotency_mismatch can't).
+const REFUSED_DETAIL = 'Refused sales stay on this till under Needs attention, each with what to do next.';
+// The sentence after the waiting count once the store refused a whole batch (OutboxState.refused) from the outbox shown, when
+// no command carries a code. Neither outbox sets a timer then: a new pending command flushes its outbox. For sales,
+// useOrderOutbox also calls start() when the store opens, which flushes; no app starts the register outbox at launch today,
+// so the till-updates sentence names only the next till update (#269).
+const SALES_REFUSED = 'The online store refused the last send. This till will try again with the next sale, or when the app is reopened.';
+const TILL_UPDATES_REFUSED = 'The online store refused the last send. This till will try again with the next till update.';
+
+const count = (n: number, noun: string) => `${n} ${noun}${n === 1 ? '' : 's'}`;
+// iOS has no live region (accessibilityLiveRegion is Android-only), so there each text is announced when it changes: never on
+// the first mount, nor on a re-render with the same text. Texts that change in the same render go in ONE call, joined by a space.
+function useAnnounceOnIos(...texts: (string | undefined)[]) {
+  const announced = useRef(texts);
+  useEffect(() => {
+    const changed = texts.filter((text, index) => text && text !== announced.current[index]);
+    announced.current = texts;
+    if (changed.length > 0 && Platform.OS === 'ios') AccessibilityInfo.announceForAccessibility(changed.join(' '));
+  }, texts);
+}
+/**
+ * `pluginName` names the store's plugin in the detail, as its owners know it; `registerState` counts till updates.
+ * `pullNotice` (a stopped product pull) shows as its own line and detail, above the outbox line.
+ */
+export function SyncStatus({ state, registerState, pluginName = 'the POS plugin', pullNotice }:
+  { state: OutboxState; registerState?: OutboxState; pluginName?: string; pullNotice?: SyncNotice }) {
+  const updates = registerState?.pending ?? 0;
+  // The outbox whose sending and retrying text is shown (and whose countdown ticks): the register's when only till updates wait.
+  const outbox = state.pending === 0 && registerState?.pending ? registerState : state;
+  const [now, setNow] = useState(Date.now);
+  useEffect(() => {
+    setNow(Date.now());
+    if (!outbox.nextAttemptAt) return;
+    const timer = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(timer);
+  }, [outbox.nextAttemptAt]);
+  const seconds = Math.max(0, Math.ceil(((outbox.nextAttemptAt ?? now) - now) / 1000));
+  const label = [state.pending && count(state.pending, 'sale'),
+    updates && count(updates, 'till update')].filter(Boolean).join(' and ') + ' waiting to sync';
+  const { stuck } = state;
+  const backendMissing = state.backendMissing ?? registerState?.backendMissing;
+  // The device's own 12/24-hour format, with no forced leading zero on the hour.
+  const at = (time: number) => new Date(time).toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+  const backendMissingText = state.pending === 0 && updates > 0 ? (registerState?.stuck
+    ? TILL_UPDATES_MISSING_SINCE.replace('{time}', () => at(registerState.stuck!.since)) : TILL_UPDATES_MISSING)
+    : stuck ? BACKEND_MISSING_SINCE.replace('{time}', () => at(stuck.since)) : BACKEND_MISSING;
+  const upToDate = state.pending === 0 && updates === 0;
+  // The sentence shows with the store missing, or once the waiting sales (with none waiting, the till updates) are stuck, then as
+  // its "since" variant: the same words for any reason, and no reason code.
+  // A refused batch from the outbox shown (the sales', whenever a sale waits) replaces that sentence: it is the store's latest
+  // answer, and sending waits for that outbox's next command or start.
+  const sentence = outbox.refused ? ` · ${outbox === state ? SALES_REFUSED : TILL_UPDATES_REFUSED}`
+    : backendMissing || (state.pending === 0 && updates > 0 ? registerState?.stuck : stuck) ? ` · ${backendMissingText}` : '';
+  // The live region holds only the substance (counts and the sentence), so it is announced when that changes and never as sending
+  // or retrying flips or the countdown ticks: those are a short line of their own below it, outside any live region.
+  // Refused sales are never up to date, and their line outranks the sentences and sending or retrying. It keeps what else waits:
+  // "5 waiting to sync" for sales alone, else the label, which names the till updates (and the sales, if any).
+  const refused = state.rejected ? REFUSED(state.rejected, upToDate ? '' : `, ${updates ? label : `${state.pending} waiting to sync`}`) : '';
+  const spoken = refused || (upToDate ? 'Sales are up to date.' : label + sentence);
+  const doing = refused || upToDate || backendMissing || outbox.refused ? '' : outbox.sending ? 'Sending…'
+    : outbox.lastRetryReason ? `Retrying in ${seconds} s.` : '';
+  const text = pullNotice
+    && (Object.hasOwn(PULL_NOTICE_TEXT, pullNotice.code) ? PULL_NOTICE_TEXT[pullNotice.code] : PULL_NOTICE_FALLBACK);
+  const notice = pullNotice && text
+    && { line: text.line(pluginName), detail: text.detail(pullNotice, pluginName) };
+  useAnnounceOnIos(notice?.line, spoken);
+  // Both notices name the missing plugin: both lines show, and the pull notice's detail once, below them, in place of the outbox's.
+  const oneDetail = pullNotice?.code === 'missing_plugin' && !!backendMissing;
+  // The notice lines carry no accessibility label, so a screen reader reads their text; the outbox line's label is its spoken text.
+  // The notice line and the outbox line are polite live regions (react-native-web renders accessibilityLiveRegion as aria-live);
+  // the details are not: each line says what changed, and its detail is there to read.
+  return <View>{notice ? <>
+    <Text accessibilityLiveRegion="polite" className="px-4 py-2 text-xs text-muted-foreground">{notice.line}</Text>
+    {oneDetail ? null : <Text className="px-4 pb-2 text-xs text-muted-foreground">{notice.detail}</Text>}
+  </> : null}<Text accessibilityLabel={spoken} accessibilityLiveRegion="polite" className="px-4 py-2 text-xs text-muted-foreground">{spoken}</Text>
+  {doing ? <Text className="px-4 pb-2 text-xs text-muted-foreground">{doing}</Text> : null}
+  {refused ? <Text className="px-4 pb-2 text-xs text-muted-foreground">{REFUSED_DETAIL}</Text> : null}
+  {oneDetail && notice ? <Text className="px-4 pb-2 text-xs text-muted-foreground">{notice.detail}</Text>
+    : backendMissing ? <Text className="px-4 pb-2 text-xs text-muted-foreground">
+    {BACKEND_MISSING_DETAIL.replace('{pluginName}', () => pluginName).replace('{lastTime}', () => upToDate ? ' the last time it checked' : '')}</Text> : null}</View>;
+}

package/src/sale/tender.tsx

@@ -0,0 +1,38 @@
+import { Pressable, Text, TextInput, View } from 'react-native';
+import { formatMoney } from '@tallyui/core';
+import type { useSale } from '@tallyui/pos';
+import { CashTendered, ChangeDisplay } from '../checkout';
+
+/** order.create's bound on `payments[].reference`, in UTF-16 units: a typed reference never goes past what finalize keeps. */
+const REFERENCE_MAX = 255;
+
+export function Tender({ sale }: { sale: ReturnType<typeof useSale> }) {
+  const { order, stage } = sale;
+  if (stage.kind !== 'tender') return null;
+  const money = (amount: number) => ({ amount, currency: order.currency });
+  return <View dataSet={{ print: 'hide' }} className="gap-4 p-4">
+    {stage.method === 'cash' ? <>
+      <CashTendered total={money(order.totalMinor)} amount={money(order.payments[0]?.amountMinor ?? 0)}
+        onChangeAmount={(amount) => sale.setTender({ method: 'cash', amountMinor: amount.amount })} />
+      <ChangeDisplay change={money(order.changeDueMinor)} />
+      {order.balanceDueMinor > 0 ? <Text className="text-foreground">Balance due: {formatMoney(money(order.balanceDueMinor))}</Text> : null}
+      <Pressable accessibilityRole="button" disabled={order.balanceDueMinor > 0} onPress={sale.complete} className={`rounded-md bg-primary px-4 py-3 ${order.balanceDueMinor > 0 ? 'opacity-50' : ''}`}>
+        <Text className="text-center font-semibold text-primary-foreground">Complete sale</Text>
+      </Pressable>
+    </> : <>
+      <Text className="text-foreground">Card terminal: {formatMoney(money(order.totalMinor))}</Text>
+      <TextInput accessibilityLabel="Terminal reference" placeholder="Terminal reference" maxLength={REFERENCE_MAX}
+        value={order.payments[0]?.reference ?? ''}
+        onChangeText={(reference) => sale.setTender({ method: 'external', amountMinor: order.totalMinor, reference })} className="rounded-md border border-border px-3 py-2 text-foreground" />
+      <Pressable accessibilityRole="button" onPress={sale.complete} className="rounded-md bg-primary px-4 py-3"><Text className="text-center font-semibold text-primary-foreground">Payment approved on terminal</Text></Pressable>
+    </>}
+    {sale.error ? <Text accessibilityRole="alert" className="text-destructive">{sale.error}</Text> : null}
+    {sale.canContinue ? <>
+      <Text className="text-foreground">This sale is stored and will be sent. Continue to the next sale.</Text>
+      <Pressable accessibilityRole="button" onPress={() => sale.continueSale()} className="rounded-md bg-primary px-4 py-3">
+        <Text className="text-center font-semibold text-primary-foreground">Continue</Text>
+      </Pressable>
+    </> : null}
+    <Pressable accessibilityRole="button" onPress={sale.cancelTender} className="rounded-md border border-border bg-card px-4 py-3"><Text className="text-center text-foreground">Back</Text></Pressable>
+  </View>;
+}

package/src/settings/connector-status.tsx

@@ -0,0 +1,65 @@
+import { Text, View, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export type ConnectionStatus = 'connected' | 'disconnected' | 'syncing' | 'error';
+
+export interface ConnectorStatusProps extends Omit<ViewProps, 'children'> {
+  name: string;
+  status: ConnectionStatus;
+  lastSync?: string;
+  error?: string;
+  className?: string;
+  /** Products the sales channel doesn't sell (the calculated-price runner's `unreported`). Hidden when undefined or 0. */
+  unsoldCount?: number;
+  /** True when that count is from an older pass than the last failure (`!isFingerprintResultCurrent(state)`). */
+  unsoldStale?: boolean;
+  /** The line's text; default: `${n} product(s) not sold in this channel`, plus ` (last check failed)` when stale. */
+  formatUnsold?: (count: number, stale: boolean) => string;
+}
+
+// App wiring:
+// const s = useObservable(runner.state$);
+// <ConnectorStatus … unsoldCount={s.lastResult?.unreported} unsoldStale={!isFingerprintResultCurrent(s)} />
+
+function defaultFormatUnsold(count: number, stale: boolean): string {
+  return `${count} ${count === 1 ? 'product' : 'products'} not sold in this channel${stale ? ' (last check failed)' : ''}`;
+}
+
+const STATUS_CONFIG: Record<ConnectionStatus, { label: string; dot: string; text: string }> = {
+  connected: { label: 'Connected', dot: 'bg-success', text: 'text-success' },
+  disconnected: { label: 'Disconnected', dot: 'bg-muted', text: 'text-muted-foreground' },
+  syncing: { label: 'Syncing...', dot: 'bg-info', text: 'text-info' },
+  error: { label: 'Error', dot: 'bg-destructive', text: 'text-destructive' },
+};
+
+export function ConnectorStatus({
+  name,
+  status,
+  lastSync,
+  error,
+  className,
+  unsoldCount,
+  unsoldStale,
+  formatUnsold = defaultFormatUnsold,
+  ...viewProps
+}: ConnectorStatusProps) {
+  const config = STATUS_CONFIG[status];
+
+  return (
+    <View className={cn('gap-2 rounded-lg border border-border bg-card p-3', className)} {...viewProps}>
+      <View className="flex-row items-center justify-between">
+        <Text className="text-sm font-semibold text-foreground">{name}</Text>
+        <View className="flex-row items-center gap-1.5">
+          <View className={cn('h-2 w-2 rounded-full', config.dot)} />
+          <Text className={cn('text-xs font-medium', config.text)}>{config.label}</Text>
+        </View>
+      </View>
+      {lastSync && <Text className="text-xs text-muted-foreground">Last sync: {lastSync}</Text>}
+      {error && <Text className="text-xs text-destructive">{error}</Text>}
+      {!!unsoldCount && (
+        <Text className={cn('text-xs', unsoldStale ? 'text-muted-foreground' : 'text-warning')}>{formatUnsold(unsoldCount, !!unsoldStale)}</Text>
+      )}
+    </View>
+  );
+}

package/src/settings/index.ts

@@ -0,0 +1,3 @@
+export { SettingsRow, type SettingsRowProps } from './settings-row';
+export { SettingsGroup, type SettingsGroupProps } from './settings-group';
+export { ConnectorStatus, type ConnectorStatusProps, type ConnectionStatus } from './connector-status';

package/src/settings/settings-group.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export interface SettingsGroupProps extends Omit<ViewProps, 'children'> {
+  title: string;
+  description?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function SettingsGroup({ title, description, children, className, ...viewProps }: SettingsGroupProps) {
+  return (
+    <View className={cn('gap-1', className)} {...viewProps}>
+      <View className="px-4 py-2">
+        <Text className="text-sm font-semibold text-foreground">{title}</Text>
+        {description && <Text className="text-xs text-muted-foreground">{description}</Text>}
+      </View>
+      <View className="rounded-lg border border-border bg-card">{children}</View>
+    </View>
+  );
+}

package/src/settings/settings-row.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+
+import { cn } from '@tallyui/theme';
+
+export interface SettingsRowProps extends Omit<ViewProps, 'children'> {
+  label: string;
+  description?: string;
+  action?: ReactNode;
+  className?: string;
+}
+
+export function SettingsRow({ label, description, action, className, ...viewProps }: SettingsRowProps) {
+  return (
+    <View className={cn('flex-row items-center gap-3 px-4 py-3', className)} {...viewProps}>
+      <View className="flex-1 gap-0.5">
+        <Text className="text-sm font-medium text-foreground">{label}</Text>
+        {description && <Text className="text-xs text-muted-foreground">{description}</Text>}
+      </View>
+      {action && <View>{action}</View>}
+    </View>
+  );
+}

package/src/ui/accordion/index.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Accordion as AccordionPrimitive, TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(function AccordionItem({ className, ...props }, ref) {
+  return (
+    <AccordionPrimitive.Item ref={ref} className={cn('border-b border-border', className)} {...props} />
+  );
+});
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(function AccordionTrigger({ className, children, ...props }, ref) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <TextClassContext.Provider value="text-sm font-medium">
+        <AccordionPrimitive.Trigger
+          ref={ref}
+          className={cn(
+            'flex flex-1 flex-row items-center justify-between py-4 font-medium web:transition-all web:hover:underline',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </AccordionPrimitive.Trigger>
+      </TextClassContext.Provider>
+    </AccordionPrimitive.Header>
+  );
+});
+AccordionTrigger.displayName = 'AccordionTrigger';
+
+const AccordionContent = React.forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(function AccordionContent({ className, children, ...props }, ref) {
+  return (
+    <TextClassContext.Provider value="text-sm">
+      <AccordionPrimitive.Content
+        ref={ref}
+        className={cn('overflow-hidden text-sm web:transition-all', className)}
+        {...props}
+      >
+        <View className="pb-4 pt-0">{children}</View>
+      </AccordionPrimitive.Content>
+    </TextClassContext.Provider>
+  );
+});
+AccordionContent.displayName = 'AccordionContent';
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/ui/alert-dialog/index.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { AlertDialog as AlertDialogPrimitive, TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(function AlertDialogOverlay({ className, ...props }, ref) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      ref={ref}
+      className={cn('fixed inset-0 z-50 bg-black/80', className)}
+      {...props}
+    />
+  );
+});
+AlertDialogOverlay.displayName = 'AlertDialogOverlay';
+
+const AlertDialogContent = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(function AlertDialogContent({ className, children, ...props }, ref) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          'fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border border-border bg-background p-6 shadow-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </AlertDialogPrimitive.Content>
+    </AlertDialogPortal>
+  );
+});
+AlertDialogContent.displayName = 'AlertDialogContent';
+
+function AlertDialogHeader({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) {
+  return <View className={cn('flex flex-col gap-2', className)} {...props} />;
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) {
+  return <View className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2', className)} {...props} />;
+}
+
+const AlertDialogTitle = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(function AlertDialogTitle({ className, ...props }, ref) {
+  return (
+    <TextClassContext.Provider value="text-lg font-semibold text-foreground">
+      <AlertDialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold text-foreground', className)} {...props} />
+    </TextClassContext.Provider>
+  );
+});
+AlertDialogTitle.displayName = 'AlertDialogTitle';
+
+const AlertDialogDescription = React.forwardRef<
+  React.ComponentRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(function AlertDialogDescription({ className, ...props }, ref) {
+  return (
+    <AlertDialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  );
+});
+AlertDialogDescription.displayName = 'AlertDialogDescription';
+
+const AlertDialogAction = AlertDialogPrimitive.Action;
+const AlertDialogCancel = AlertDialogPrimitive.Cancel;
+
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/ui/avatar/index.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Image, View, Text, type ViewProps } from 'react-native';
+import { cn } from '@tallyui/theme';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const avatarVariants = cva('relative overflow-hidden rounded-full', {
+  variants: {
+    size: {
+      sm: 'h-8 w-8',
+      md: 'h-10 w-10',
+      lg: 'h-12 w-12',
+      xl: 'h-16 w-16',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+type AvatarProps = ViewProps & VariantProps<typeof avatarVariants> & {
+  src?: string;
+  alt?: string;
+  fallback?: string;
+};
+
+function Avatar({ className, size, src, alt, fallback, ...props }: AvatarProps) {
+  const [hasError, setHasError] = React.useState(false);
+
+  return (
+    <View className={cn(avatarVariants({ size }), className)} {...props}>
+      {src && !hasError ? (
+        <Image
+          source={{ uri: src }}
+          accessibilityLabel={alt}
+          onError={() => setHasError(true)}
+          className="h-full w-full"
+        />
+      ) : (
+        <View className="flex h-full w-full items-center justify-center bg-muted">
+          <Text className="text-sm font-medium text-muted-foreground">
+            {fallback ?? alt?.charAt(0)?.toUpperCase() ?? '?'}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+export { Avatar, avatarVariants };
+export type { AvatarProps };

package/src/ui/badge/index.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+import { cn } from '@tallyui/theme';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary',
+        secondary: 'border-transparent bg-secondary',
+        destructive: 'border-transparent bg-destructive',
+        outline: 'border-border',
+        success: 'border-transparent bg-success',
+        warning: 'border-transparent bg-warning',
+        info: 'border-transparent bg-info',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const badgeTextVariants = cva('text-xs font-semibold', {
+  variants: {
+    variant: {
+      default: 'text-primary-foreground',
+      secondary: 'text-secondary-foreground',
+      destructive: 'text-destructive-foreground',
+      outline: 'text-foreground',
+      success: 'text-success-foreground',
+      warning: 'text-warning-foreground',
+      info: 'text-info-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+type BadgeProps = ViewProps & VariantProps<typeof badgeVariants> & {
+  label?: string;
+};
+
+function Badge({ className, variant, label, children, ...props }: BadgeProps) {
+  return (
+    <View className={cn(badgeVariants({ variant }), className)} {...props}>
+      {label ? (
+        <Text className={badgeTextVariants({ variant })}>{label}</Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+}
+
+export { Badge, badgeVariants, badgeTextVariants };
+export type { BadgeProps };

package/src/ui/button/index.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { TextClassContext, Slot } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const buttonVariants = cva(
+  'inline-flex flex-row items-center justify-center gap-2 rounded-md web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary active:opacity-90',
+        destructive: 'bg-destructive active:opacity-90',
+        outline: 'border border-input bg-background active:bg-accent',
+        secondary: 'bg-secondary active:opacity-80',
+        ghost: 'active:bg-accent',
+        link: 'web:underline-offset-4 web:hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+const buttonTextVariants = cva(
+  'web:whitespace-nowrap text-sm font-medium',
+  {
+    variants: {
+      variant: {
+        default: 'text-primary-foreground',
+        destructive: 'text-destructive-foreground',
+        outline: 'text-foreground',
+        secondary: 'text-secondary-foreground',
+        ghost: 'text-foreground',
+        link: 'text-primary',
+      },
+      size: {
+        default: '',
+        sm: '',
+        lg: 'text-base',
+        icon: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+type ButtonProps = PressableProps & VariantProps<typeof buttonVariants> & {
+  asChild?: boolean;
+};
+
+const Button = React.forwardRef<React.ComponentRef<typeof Pressable>, ButtonProps>(
+  function Button({ className, variant, size, asChild = false, disabled, ...props }, ref) {
+    const Component = asChild ? Slot : Pressable;
+
+    return (
+      <TextClassContext.Provider
+        value={buttonTextVariants({ variant, size })}
+      >
+        <Component
+          ref={ref}
+          role="button"
+          disabled={disabled}
+          className={cn(
+            buttonVariants({ variant, size }),
+            disabled && 'opacity-50 web:pointer-events-none',
+            className,
+          )}
+          {...props}
+        />
+      </TextClassContext.Provider>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export { Button, buttonVariants, buttonTextVariants };
+export type { ButtonProps };