@nexub/react-native 0.0.0-stage → 2.2.0

package/package.json

@@ -1,6 +1,141 @@
 {
   "name": "@nexub/react-native",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "2.2.0",
+  "description": "React Native components for Nexub Design System — native chrome, Nexub content. Same tokens, brands and prop names as @nexub/react, for Expo and bare React Native apps.",
+  "license": "MIT",
+  "homepage": "https://github.com/Nexub-AI/nexub-ds#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Nexub-AI/nexub-ds.git",
+    "directory": "packages/react-native"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "components",
+    "design-system",
+    "nexub"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "lib",
+    "!src/__tests__"
+  ],
+  "sideEffects": false,
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./lib/typescript/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./patterns": {
+      "source": "./src/patterns/index.ts",
+      "types": "./lib/typescript/patterns/index.d.ts",
+      "default": "./lib/module/patterns/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "@expo-google-fonts/geist-mono": "^0.4.3",
+    "@expo-google-fonts/inter": "^0.4.2",
+    "@expo-google-fonts/plus-jakarta-sans": "^0.4.2",
+    "lucide-react-native": "^1.64.0",
+    "@nexub/core": "2.2.0",
+    "@nexub/icons": "2.2.0",
+    "@nexub/tokens": "2.2.0"
+  },
+  "peerDependencies": {
+    "expo-glass-effect": ">=57.0.0",
+    "expo-haptics": ">=57.0.0",
+    "react": ">=19.1.0",
+    "react-native": ">=0.86.0",
+    "react-native-reanimated": ">=4.5.0",
+    "react-native-safe-area-context": ">=5.6.0",
+    "react-native-svg": ">=15.0.0",
+    "@react-native-community/datetimepicker": ">=8.4.0",
+    "expo-screen-capture": ">=57.0.0"
+  },
+  "peerDependenciesMeta": {
+    "expo-glass-effect": {
+      "optional": true
+    },
+    "expo-haptics": {
+      "optional": true
+    },
+    "@react-native-community/datetimepicker": {
+      "optional": true
+    },
+    "expo-screen-capture": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/react-native": "^14.1.0",
+    "@types/jest": "^30.0.0",
+    "@types/react": "~19.3.0",
+    "expo": "~58.0.21",
+    "expo-glass-effect": "~58.0.5",
+    "expo-haptics": "~58.0.7",
+    "jest": "^30.2.0",
+    "jest-expo": "~58.0.13",
+    "react": "19.3.0",
+    "react-native": "0.88.1",
+    "react-native-builder-bob": "^0.44.1",
+    "react-native-reanimated": "4.7.1",
+    "react-native-safe-area-context": "~5.10.1",
+    "react-native-svg": "15.16.0",
+    "react-native-worklets": "0.13.0",
+    "typescript": "^5.9.3",
+    "@react-native-community/datetimepicker": "9.2.1",
+    "expo-screen-capture": "~58.0.6"
+  },
+  "jest": {
+    "preset": "jest-expo",
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "setupFiles": [
+      "<rootDir>/jest.setup.js"
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!(\\.pnpm|((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|react-native-svg|lucide-react-native|@nexub/.*|@material/.*))"
+    ],
+    "transform": {
+      "^.+\\.mjs$": "babel-jest"
+    },
+    "moduleNameMapper": {
+      "^react$": "<rootDir>/node_modules/react",
+      "^react/(.*)$": "<rootDir>/node_modules/react/$1"
+    }
+  },
+  "scripts": {
+    "build": "bob build",
+    "clean": "rm -rf lib",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "test": "jest"
+  }
 }

package/src/components/actions.tsx

@@ -0,0 +1,259 @@
+import * as React from 'react';
+import { ActivityIndicator, View, type StyleProp, type ViewStyle } from 'react-native';
+import type { ControlSize, ToneValue } from '@nexub/core';
+import type { NativeIconProps } from '@nexub/icons/native';
+import { Pressable, type PressableProps } from '../primitives/Pressable';
+import { Surface } from '../primitives/Surface';
+import { Text } from '../primitives/Text';
+import { useTheme, type RoleName } from '../theme/ThemeProvider';
+import type { HapticToken } from '../theme/haptics';
+import { TONE_ROLES, controlHeight, disabledOpacity, hitSlopFor } from './shared';
+
+export type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'text' | 'glass';
+
+// [container role | undefined, content role]
+const VARIANT: Record<ButtonVariant, [RoleName | undefined, RoleName]> = {
+  filled: ['primary', 'on-primary'],
+  tonal: ['secondary-container', 'on-secondary-container'],
+  outlined: [undefined, 'on-surface'],
+  text: [undefined, 'primary'],
+  glass: [undefined, 'on-surface'],
+};
+
+const LABEL: Record<ControlSize, 'label-md' | 'label-lg' | 'title-md'> = {
+  xs: 'label-md',
+  sm: 'label-md',
+  md: 'label-lg',
+  lg: 'label-lg',
+  xl: 'title-md',
+};
+const PAD: Record<ControlSize, number> = { xs: 10, sm: 14, md: 20, lg: 24, xl: 28 };
+const ICON: Record<ControlSize, NativeIconProps['size']> = {
+  xs: 'xs',
+  sm: 'sm',
+  md: 'sm',
+  lg: 'md',
+  xl: 'md',
+};
+
+export interface ButtonProps extends Omit<PressableProps, 'children'> {
+  children: React.ReactNode;
+  /** @default 'filled' */
+  variant?: ButtonVariant;
+  /** Solid semantic or product colour (overrides the variant colour). */
+  tone?: ToneValue;
+  /** The control ladder. Primary actions on mobile use 'lg' (48). @default 'md' */
+  size?: ControlSize;
+  /** Shows a spinner, blocks presses and announces `loadingLabel`. */
+  loading?: boolean;
+  loadingLabel?: string;
+  fullWidth?: boolean;
+  leadingIcon?: React.ComponentType<NativeIconProps>;
+  trailingIcon?: React.ComponentType<NativeIconProps>;
+}
+
+/** Capsule button. One `filled` (or toned) action per screen; the rest tonal/outlined/text. */
+export function Button({
+  children,
+  variant = 'filled',
+  tone,
+  size = 'md',
+  loading,
+  loadingLabel,
+  fullWidth,
+  leadingIcon: Leading,
+  trailingIcon: Trailing,
+  disabled,
+  style,
+  accessibilityLabel,
+  ...rest
+}: ButtonProps) {
+  const theme = useTheme();
+  const { roles } = theme;
+  const [bgRole, fgRole] = tone ? TONE_ROLES[tone] : VARIANT[variant];
+  const height = controlHeight(theme, size);
+  const fg = roles[fgRole];
+  const inactive = disabled || loading;
+  const label = typeof children === 'string' ? children : undefined;
+
+  const body = (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        opacity: disabled ? disabledOpacity(theme) : 1,
+      }}
+    >
+      {loading ? (
+        <ActivityIndicator size="small" color={fg} />
+      ) : (
+        Leading && <Leading size={ICON[size]} color={fg} />
+      )}
+      {typeof children === 'string' ? (
+        <Text variant={LABEL[size]} style={{ color: fg }} numberOfLines={1}>
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+      {!loading && Trailing && <Trailing size={ICON[size]} color={fg} />}
+    </View>
+  );
+
+  const shape: StyleProp<ViewStyle> = [
+    {
+      height,
+      paddingHorizontal: PAD[size],
+      borderRadius: theme.tokens.shape.control,
+      justifyContent: 'center',
+      alignSelf: fullWidth ? 'stretch' : 'flex-start',
+      backgroundColor: bgRole ? roles[bgRole] : 'transparent',
+    },
+    variant === 'outlined' && !tone && { borderWidth: 1, borderColor: roles['outline-variant'] },
+    disabled && bgRole && { backgroundColor: roles['on-surface'] + '1f' }, // disabled-container 12%
+    style,
+  ];
+
+  return (
+    <Pressable
+      accessibilityLabel={accessibilityLabel ?? (loading && loadingLabel ? loadingLabel : label)}
+      accessibilityState={{ disabled: !!inactive, busy: !!loading }}
+      disabled={inactive}
+      hitSlop={hitSlopFor(height)}
+      stateLayer={fgRole}
+      style={
+        variant === 'glass' && !tone ? { alignSelf: fullWidth ? 'stretch' : 'flex-start' } : shape
+      }
+      {...rest}
+    >
+      {variant === 'glass' && !tone ? (
+        <Surface
+          material="glass"
+          radius="control"
+          style={[{ height, paddingHorizontal: PAD[size], justifyContent: 'center' }, style]}
+        >
+          {body}
+        </Surface>
+      ) : (
+        body
+      )}
+    </Pressable>
+  );
+}
+
+export interface IconButtonProps extends Omit<PressableProps, 'children'> {
+  icon: React.ComponentType<NativeIconProps>;
+  /** Required: the accessible name (what it does, not "button"). */
+  label: string;
+  /** @default 'text' */
+  variant?: ButtonVariant;
+  tone?: ToneValue;
+  /** @default 'md' */
+  size?: ControlSize;
+  /** Toggle state for icon toggles (favourite, mute). */
+  selected?: boolean;
+  haptic?: HapticToken;
+}
+
+/** Circular icon-only button; always 44pt+ to touch. */
+export function IconButton({
+  icon: Glyph,
+  label,
+  variant = 'text',
+  tone,
+  size = 'md',
+  selected,
+  disabled,
+  style,
+  ...rest
+}: IconButtonProps) {
+  const theme = useTheme();
+  const [bgRole, fgRole] = tone ? TONE_ROLES[tone] : VARIANT[variant];
+  const fgSelected: RoleName = selected
+    ? 'primary'
+    : variant === 'text' && !tone
+      ? 'on-surface-variant'
+      : fgRole;
+  const height = controlHeight(theme, size);
+  return (
+    <Pressable
+      accessibilityLabel={label}
+      accessibilityState={{ disabled: !!disabled, selected }}
+      disabled={disabled}
+      hitSlop={hitSlopFor(height)}
+      stateLayer={fgRole}
+      style={[
+        {
+          width: height,
+          height,
+          borderRadius: height / 2,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: bgRole ? theme.roles[bgRole] : 'transparent',
+          opacity: disabled ? disabledOpacity(theme) : 1,
+        },
+        variant === 'outlined' && { borderWidth: 1, borderColor: theme.roles['outline-variant'] },
+        style,
+      ]}
+      {...rest}
+    >
+      <Glyph
+        size={ICON[size] === 'xs' ? 'sm' : size === 'xl' ? 'lg' : 'md'}
+        color={theme.roles[fgSelected]}
+      />
+    </Pressable>
+  );
+}
+
+export interface ButtonGroupProps {
+  children: React.ReactNode;
+  /** 'stack' puts actions full-width in a column (bottom of forms). @default 'row' */
+  direction?: 'row' | 'stack';
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Related actions together. In a stack, put the primary action first. */
+export function ButtonGroup({ children, direction = 'row', style }: ButtonGroupProps) {
+  const { tokens } = useTheme();
+  return (
+    <View
+      style={[
+        direction === 'row'
+          ? { flexDirection: 'row', flexWrap: 'wrap', gap: tokens.spacing[2] }
+          : { gap: tokens.spacing[3], alignItems: 'stretch' },
+        style,
+      ]}
+    >
+      {direction === 'stack'
+        ? React.Children.map(children, (c) =>
+            React.isValidElement<ButtonProps>(c) ? React.cloneElement(c, { fullWidth: true }) : c,
+          )
+        : children}
+    </View>
+  );
+}
+
+export interface LinkProps extends Omit<PressableProps, 'children'> {
+  children: string;
+}
+
+/** Inline text action. Opens nothing by itself: pass `onPress` (e.g. router.push / Linking.openURL). */
+export function Link({ children, style, ...rest }: LinkProps) {
+  return (
+    <Pressable
+      accessibilityRole="link"
+      accessibilityLabel={children}
+      stateLayer={false}
+      pressScale={false}
+      hitSlop={8}
+      style={style}
+      {...rest}
+    >
+      <Text variant="label-lg" color="primary" style={{ textDecorationLine: 'underline' }}>
+        {children}
+      </Text>
+    </Pressable>
+  );
+}