@nexub/react-native 0.0.0-stage → 2.1.0

package/lib/module/patterns/app.js

@@ -0,0 +1,709 @@
+"use strict";
+
+import * as React from 'react';
+import { FlatList, KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
+import { ArrowUp, Bell, Check, Sparkles } from '@nexub/icons/native';
+import { Button, IconButton } from "../components/actions.js";
+import { Card, ListItem, ListSection } from "../components/containers.js";
+import { Avatar, Badge } from "../components/display.js";
+import { EmptyState } from "../components/feedback.js";
+import { SearchField, SegmentedControl, Chip } from "../components/inputs.js";
+import { BottomSheet } from "../components/overlays.js";
+import { Carousel, StickyFooter } from "../components/mobile.js";
+import { Pressable } from "../primitives/Pressable.js";
+import { ScreenContainer } from "../primitives/ScreenContainer.js";
+import { Heading, Text } from "../primitives/Text.js";
+import { fontStyle } from "../theme/fonts.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+
+// ─── Onboarding ──────────────────────────────────────────────────────────────
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Swipeable value slides + Get started / Sign in. */
+export function OnboardingScreen({
+  slides,
+  onGetStarted,
+  onSignIn
+}) {
+  const {
+    tokens
+  } = useTheme();
+  return /*#__PURE__*/_jsx(StickyFooter, {
+    footer: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        size: "lg",
+        fullWidth: true,
+        onPress: onGetStarted,
+        children: "Get started"
+      }), onSignIn && /*#__PURE__*/_jsx(Button, {
+        size: "lg",
+        fullWidth: true,
+        variant: "text",
+        onPress: onSignIn,
+        children: "I already have an account"
+      })]
+    }),
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1,
+        justifyContent: 'center'
+      },
+      children: /*#__PURE__*/_jsx(Carousel, {
+        data: slides,
+        renderItem: ({
+          item
+        }) => /*#__PURE__*/_jsxs(View, {
+          style: {
+            padding: tokens.spacing[6],
+            gap: tokens.spacing[4],
+            alignItems: 'center'
+          },
+          children: [item.art, /*#__PURE__*/_jsx(Heading, {
+            variant: "headline-md",
+            style: {
+              textAlign: 'center'
+            },
+            children: item.title
+          }), /*#__PURE__*/_jsx(Text, {
+            variant: "body-lg",
+            color: "on-surface-variant",
+            style: {
+              textAlign: 'center'
+            },
+            children: item.body
+          })]
+        })
+      })
+    })
+  });
+}
+/** Explain a permission before the one-shot OS prompt (notifications, camera, location). */
+export function PermissionPrimer({
+  icon: Glyph = Bell,
+  title,
+  body,
+  onAllow,
+  onNotNow
+}) {
+  const {
+    roles,
+    tokens
+  } = useTheme();
+  return /*#__PURE__*/_jsx(StickyFooter, {
+    footer: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        size: "lg",
+        fullWidth: true,
+        onPress: onAllow,
+        children: "Continue"
+      }), /*#__PURE__*/_jsx(Button, {
+        size: "lg",
+        fullWidth: true,
+        variant: "text",
+        onPress: onNotNow,
+        children: "Not now"
+      })]
+    }),
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: tokens.spacing[4],
+        padding: tokens.spacing[6]
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          width: 88,
+          height: 88,
+          borderRadius: 44,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: roles['primary-container']
+        },
+        children: /*#__PURE__*/_jsx(Glyph, {
+          size: 44,
+          color: roles['on-primary-container']
+        })
+      }), /*#__PURE__*/_jsx(Heading, {
+        variant: "headline-sm",
+        style: {
+          textAlign: 'center'
+        },
+        children: title
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "body-md",
+        color: "on-surface-variant",
+        style: {
+          textAlign: 'center'
+        },
+        children: body
+      })]
+    })
+  });
+}
+
+// ─── Settings & profile ──────────────────────────────────────────────────────
+
+/** Grouped settings (web SettingsLayout + SettingsSection). */
+export function SettingsScreen({
+  header,
+  groups
+}) {
+  return /*#__PURE__*/_jsxs(ScreenContainer, {
+    gap: "6",
+    children: [header, groups.map((g, i) => /*#__PURE__*/_jsx(ListSection, {
+      header: g.header,
+      footer: g.footer,
+      inset: g.items.some(it => it.leading) ? 56 : 16,
+      children: g.items.map(it => /*#__PURE__*/_jsx(ListItem, {
+        ...it
+      }, it.title))
+    }, g.header ?? i))]
+  });
+}
+/** Theme, glass intensity dial and haptics: the user preferences NexubNativeProvider takes. */
+export function AppearanceSection({
+  scheme,
+  onSchemeChange,
+  glass,
+  onGlassChange,
+  haptics,
+  onHapticsChange
+}) {
+  const {
+    tokens,
+    messages
+  } = useTheme();
+  return /*#__PURE__*/_jsxs(ListSection, {
+    header: "Appearance",
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        padding: tokens.spacing[4],
+        gap: tokens.spacing[3]
+      },
+      children: [/*#__PURE__*/_jsx(SegmentedControl, {
+        label: "Theme",
+        value: scheme,
+        onValueChange: onSchemeChange,
+        options: [{
+          value: 'system',
+          label: 'System'
+        }, {
+          value: 'light',
+          label: 'Light'
+        }, {
+          value: 'dark',
+          label: 'Dark'
+        }]
+      }), /*#__PURE__*/_jsx(SegmentedControl, {
+        label: messages.glass,
+        value: glass,
+        onValueChange: onGlassChange,
+        options: [{
+          value: 'clear',
+          label: messages.glassClear
+        }, {
+          value: 'balanced',
+          label: messages.glassBalanced
+        }, {
+          value: 'tinted',
+          label: messages.glassTinted
+        }, {
+          value: 'off',
+          label: messages.glassSolid
+        }]
+      })]
+    }), /*#__PURE__*/_jsx(ListItem, {
+      variant: "switch",
+      title: "Haptics",
+      subtitle: "Vibration feedback on selections",
+      checked: haptics,
+      onCheckedChange: onHapticsChange
+    })]
+  });
+}
+/** Account card at the top of Settings / Profile (web UserCard). */
+export function ProfileHeader({
+  name,
+  detail,
+  image,
+  onPress
+}) {
+  const {
+    tokens
+  } = useTheme();
+  return /*#__PURE__*/_jsxs(Card, {
+    onPress: onPress,
+    accessibilityLabel: [name, detail].filter(Boolean).join(', '),
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: tokens.spacing[4]
+    },
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      name: name,
+      src: image,
+      size: "lg"
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1,
+        gap: 2
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "title-lg",
+        children: name
+      }), detail && /*#__PURE__*/_jsx(Text, {
+        variant: "body-sm",
+        color: "on-surface-variant",
+        children: detail
+      })]
+    })]
+  });
+}
+
+// ─── Notifications ───────────────────────────────────────────────────────────
+
+/** Inbox list with unread dots (web NotificationItem). */
+export function NotificationsInbox({
+  notifications,
+  onPress,
+  onMarkAllRead
+}) {
+  const {
+    roles,
+    tokens
+  } = useTheme();
+  const unread = notifications.filter(n => n.unread).length;
+  return /*#__PURE__*/_jsxs(ScreenContainer, {
+    children: [unread > 0 && onMarkAllRead && /*#__PURE__*/_jsx(Button, {
+      variant: "text",
+      size: "sm",
+      leadingIcon: Check,
+      onPress: onMarkAllRead,
+      style: {
+        alignSelf: 'flex-end'
+      },
+      children: "Mark all as read"
+    }), notifications.length === 0 ? /*#__PURE__*/_jsx(EmptyState, {
+      icon: Bell,
+      title: "You\u2019re all caught up"
+    }) : /*#__PURE__*/_jsx(ListSection, {
+      inset: 56,
+      children: notifications.map(n => {
+        const Glyph = n.icon ?? Bell;
+        return /*#__PURE__*/_jsx(ListItem, {
+          title: n.title,
+          subtitle: [n.body, n.time].filter(Boolean).join(' · '),
+          leading: /*#__PURE__*/_jsxs(View, {
+            children: [/*#__PURE__*/_jsx(Glyph, {
+              size: "md",
+              color: roles['on-surface-variant']
+            }), n.unread && /*#__PURE__*/_jsx(View, {
+              style: {
+                position: 'absolute',
+                top: -2,
+                end: -2,
+                width: 8,
+                height: 8,
+                borderRadius: 4,
+                backgroundColor: roles.primary
+              }
+            })]
+          }),
+          trailing: n.unread ? /*#__PURE__*/_jsx(Badge, {
+            tone: "info",
+            size: "sm",
+            children: "New"
+          }) : null,
+          onPress: onPress && (() => onPress(n)),
+          variant: onPress ? 'button' : 'static'
+        }, n.id);
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        height: tokens.spacing[4]
+      }
+    })]
+  });
+}
+
+// ─── Search ──────────────────────────────────────────────────────────────────
+
+/** Search field, recent searches, results and a no-results state. */
+export function SearchScreen({
+  query,
+  onQueryChange,
+  results,
+  renderResult,
+  keyOf,
+  recent = [],
+  placeholder
+}) {
+  const {
+    tokens,
+    messages
+  } = useTheme();
+  return /*#__PURE__*/_jsxs(ScreenContainer, {
+    scroll: false,
+    children: [/*#__PURE__*/_jsx(SearchField, {
+      value: query,
+      onChangeText: onQueryChange,
+      placeholder: placeholder,
+      autoFocus: true
+    }), !query && recent.length > 0 && /*#__PURE__*/_jsxs(View, {
+      style: {
+        gap: tokens.spacing[2]
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "title-sm",
+        color: "on-surface-variant",
+        accessibilityRole: "header",
+        children: "Recent"
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          gap: tokens.spacing[2]
+        },
+        children: recent.map(r => /*#__PURE__*/_jsx(Chip, {
+          label: r,
+          onPress: () => onQueryChange(r)
+        }, r))
+      })]
+    }), !!query && /*#__PURE__*/_jsx(FlatList, {
+      data: results,
+      keyExtractor: keyOf,
+      renderItem: ({
+        item
+      }) => /*#__PURE__*/_jsx(_Fragment, {
+        children: renderResult(item)
+      }),
+      keyboardDismissMode: "on-drag",
+      ListEmptyComponent: /*#__PURE__*/_jsx(EmptyState, {
+        title: messages.noResultsFor(query)
+      })
+    })]
+  });
+}
+
+// ─── Chat / AI assistant ─────────────────────────────────────────────────────
+
+/** Conversation with a composer above the keyboard (web Conversation + PromptInput + MessageBubble). */
+export function ChatScreen({
+  messages: list,
+  onSend,
+  thinking,
+  placeholder,
+  empty
+}) {
+  const {
+    roles,
+    tokens,
+    fonts,
+    messages
+  } = useTheme();
+  const [text, setText] = React.useState('');
+  const send = () => {
+    const t = text.trim();
+    if (!t) return;
+    onSend(t);
+    setText('');
+  };
+  return /*#__PURE__*/_jsxs(KeyboardAvoidingView, {
+    behavior: Platform.OS === 'ios' ? 'padding' : 'height',
+    keyboardVerticalOffset: Platform.OS === 'ios' ? 100 : 0,
+    style: {
+      flex: 1,
+      backgroundColor: roles.surface
+    },
+    children: [/*#__PURE__*/_jsx(FlatList, {
+      data: [...list].reverse(),
+      inverted: true,
+      keyExtractor: m => m.id,
+      contentContainerStyle: {
+        padding: tokens.spacing[4],
+        gap: tokens.spacing[3],
+        flexGrow: 1
+      },
+      ListHeaderComponent: thinking ? /*#__PURE__*/_jsx(ThinkingDots, {}) : undefined,
+      ListEmptyComponent: /*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1,
+          transform: [{
+            scaleY: -1
+          }]
+        },
+        children: empty ?? /*#__PURE__*/_jsx(EmptyState, {
+          icon: Sparkles,
+          title: "Ask anything"
+        })
+      }),
+      renderItem: ({
+        item
+      }) => {
+        const mine = item.role === 'user';
+        return /*#__PURE__*/_jsx(View, {
+          accessible: true,
+          accessibilityLabel: `${mine ? messages.youSaid : messages.assistantSaid}: ${item.text}`,
+          style: {
+            alignSelf: mine ? 'flex-end' : 'flex-start',
+            maxWidth: '85%',
+            paddingHorizontal: tokens.spacing[4],
+            paddingVertical: tokens.spacing[3],
+            borderRadius: tokens.shape.container,
+            borderBottomEndRadius: mine ? tokens.shape.min : tokens.shape.container,
+            borderBottomStartRadius: mine ? tokens.shape.container : tokens.shape.min,
+            backgroundColor: roles[mine ? 'primary' : 'surface-container-high']
+          },
+          children: /*#__PURE__*/_jsxs(Text, {
+            color: mine ? 'on-primary' : 'on-surface',
+            children: [item.text, item.streaming ? ' ▍' : '']
+          })
+        });
+      }
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        gap: tokens.spacing[2],
+        padding: tokens.spacing[3],
+        borderTopWidth: 1,
+        borderTopColor: roles['outline-variant'],
+        backgroundColor: roles.surface
+      },
+      children: [/*#__PURE__*/_jsx(TextInput, {
+        accessibilityLabel: messages.promptLabel,
+        value: text,
+        onChangeText: setText,
+        placeholder: placeholder ?? messages.promptLabel,
+        placeholderTextColor: roles['on-surface-muted'],
+        multiline: true,
+        style: {
+          flex: 1,
+          minHeight: 44,
+          maxHeight: 140,
+          paddingHorizontal: tokens.spacing[4],
+          paddingTop: 12,
+          paddingBottom: 12,
+          borderRadius: 22,
+          backgroundColor: roles['surface-container-high'],
+          color: roles['on-surface'],
+          fontSize: tokens.type['body-md'].size,
+          ...fontStyle('sans', 400, fonts)
+        }
+      }), /*#__PURE__*/_jsx(IconButton, {
+        icon: ArrowUp,
+        label: messages.sendMessage,
+        variant: "filled",
+        disabled: !text.trim(),
+        onPress: send
+      })]
+    })]
+  });
+}
+function ThinkingDots() {
+  const {
+    roles,
+    messages
+  } = useTheme();
+  return /*#__PURE__*/_jsx(View, {
+    accessible: true,
+    accessibilityLabel: messages.thinking,
+    accessibilityLiveRegion: "polite",
+    style: {
+      flexDirection: 'row',
+      gap: 4,
+      padding: 12,
+      alignSelf: 'flex-start'
+    },
+    children: [0, 1, 2].map(i => /*#__PURE__*/_jsx(View, {
+      style: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: roles['on-surface-variant'],
+        opacity: 0.4 + i * 0.2
+      }
+    }, i))
+  });
+}
+
+// ─── Paywall ─────────────────────────────────────────────────────────────────
+
+/** Plan choice + subscribe (web PlanCard). */
+export function PaywallScreen({
+  title,
+  plans,
+  defaultPlan,
+  onSubscribe,
+  onRestore,
+  terms
+}) {
+  const {
+    roles,
+    tokens
+  } = useTheme();
+  const [plan, setPlan] = React.useState(defaultPlan ?? plans[0]?.id);
+  return /*#__PURE__*/_jsx(StickyFooter, {
+    footer: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        size: "lg",
+        fullWidth: true,
+        onPress: () => plan && onSubscribe(plan),
+        children: "Continue"
+      }), onRestore && /*#__PURE__*/_jsx(Button, {
+        size: "lg",
+        fullWidth: true,
+        variant: "text",
+        onPress: onRestore,
+        children: "Restore purchases"
+      }), terms && /*#__PURE__*/_jsx(Text, {
+        variant: "label-sm",
+        color: "on-surface-variant",
+        style: {
+          textAlign: 'center'
+        },
+        children: terms
+      })]
+    }),
+    children: /*#__PURE__*/_jsxs(ScreenContainer, {
+      children: [/*#__PURE__*/_jsx(Heading, {
+        variant: "headline-md",
+        children: title
+      }), /*#__PURE__*/_jsx(View, {
+        accessibilityRole: "radiogroup",
+        style: {
+          gap: tokens.spacing[3]
+        },
+        children: plans.map(p => {
+          const on = p.id === plan;
+          return /*#__PURE__*/_jsxs(Pressable, {
+            accessibilityRole: "radio",
+            accessibilityLabel: `${p.name}, ${p.price}`,
+            accessibilityState: {
+              checked: on
+            },
+            haptic: on ? undefined : 'selection',
+            onPress: () => setPlan(p.id),
+            pressScale: 0.98,
+            style: {
+              padding: tokens.spacing[4],
+              gap: tokens.spacing[2],
+              borderRadius: tokens.shape.container,
+              borderWidth: on ? 2 : 1,
+              borderColor: on ? roles.primary : roles['outline-variant'],
+              backgroundColor: roles['surface-container-lowest']
+            },
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: tokens.spacing[2]
+              },
+              children: [/*#__PURE__*/_jsx(Text, {
+                variant: "title-md",
+                style: {
+                  flex: 1
+                },
+                children: p.name
+              }), p.badge && /*#__PURE__*/_jsx(Badge, {
+                tone: "info",
+                children: p.badge
+              })]
+            }), /*#__PURE__*/_jsx(Text, {
+              variant: "title-lg",
+              tabular: true,
+              children: p.price
+            }), p.features.map(f => /*#__PURE__*/_jsxs(View, {
+              style: {
+                flexDirection: 'row',
+                gap: tokens.spacing[2]
+              },
+              children: [/*#__PURE__*/_jsx(Check, {
+                size: "sm",
+                color: roles.success
+              }), /*#__PURE__*/_jsx(Text, {
+                variant: "body-sm",
+                color: "on-surface-variant",
+                style: {
+                  flex: 1
+                },
+                children: f
+              })]
+            }, f))]
+          }, p.id);
+        })
+      })]
+    })
+  });
+}
+
+// ─── App switcher ────────────────────────────────────────────────────────────
+
+/** Nexub apps in a sheet (web AppLauncher). */
+export function AppSwitcherSheet({
+  open,
+  onOpenChange,
+  apps,
+  current,
+  onOpenApp
+}) {
+  const {
+    roles,
+    tokens
+  } = useTheme();
+  return /*#__PURE__*/_jsx(BottomSheet, {
+    open: open,
+    onOpenChange: onOpenChange,
+    title: "Nexub apps",
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        rowGap: tokens.spacing[4]
+      },
+      children: apps.map(a => {
+        const tone = a.tone ?? 'primary';
+        return /*#__PURE__*/_jsxs(Pressable, {
+          accessibilityLabel: a.name,
+          accessibilityState: {
+            selected: a.id === current
+          },
+          onPress: () => {
+            onOpenChange(false);
+            onOpenApp(a);
+          },
+          stateLayer: false,
+          style: {
+            width: '25%',
+            alignItems: 'center',
+            gap: 6
+          },
+          children: [/*#__PURE__*/_jsx(View, {
+            style: {
+              width: 56,
+              height: 56,
+              borderRadius: 14,
+              overflow: 'hidden',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: roles[`${tone}-container`],
+              borderWidth: a.id === current ? 2 : 0,
+              borderColor: roles.primary
+            },
+            children: a.icon ?? /*#__PURE__*/_jsx(Text, {
+              variant: "title-md",
+              color: `on-${tone}-container`,
+              children: a.name.slice(0, 2)
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            variant: "label-md",
+            numberOfLines: 1,
+            children: a.name
+          })]
+        }, a.id);
+      })
+    })
+  });
+}
+//# sourceMappingURL=app.js.map