@scalewing/react-native 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @scalewing/react-native
 
+## 0.5.0
+
+### Minor Changes
+
+- Keep public package versions matched for the GitHub `v0.5.0` release tag.
+  Native Field ships in this version.
+- 7cf64df: Add an accessible token-styled native `Field` with label, hint,
+  error, focus, disabled, and standard React Native text-input behavior.
+
+### Patch Changes
+
+- Updated dependencies
+  - @scalewing/tokens@0.5.0
+
 ## 0.4.0
 
 ### Minor Changes

package/README.md

@@ -3,18 +3,24 @@
 React Native / Expo primitives that consume the same Scalewing tokens as the DOM package.
 
 ```ts
-import { Button, Card, SegmentedControl, Stack, TabBar, Text, ThemeProvider } from '@scalewing/react-native';
+import { Button, Card, Field, SegmentedControl, Stack, TabBar, Text, ThemeProvider } from '@scalewing/react-native';
 
 <ThemeProvider colorScheme="system" palette="cerulean">
   <Card padding={4}>
     <Stack gap={3}>
       <Text variant="title">Kickoff</Text>
+      <Field label="Team name" onChangeText={() => undefined} value="Harbor United" />
       <Button onPress={() => undefined}>Save</Button>
     </Stack>
   </Card>
 </ThemeProvider>
 ```
 
-There is no CSS class API. `padding={4}` is spacing step 4, the same step as `sw-padding-4` on web. Field is web-only (`@scalewing/react`). `colorScheme` is `"light"`, `"dark"`, or `"system"`. Named palettes include both schemes; `colors` may be `{ light, dark }`.
+There is no CSS class API. `padding={4}` is spacing step 4, the same step as
+`sw-padding-4` on web. Native `Field` renders a controlled `TextInput` with a
+visible label and optional hint or error; it accepts standard text-input props
+except styling and controlled semantics owned by the component. `colorScheme`
+is `"light"`, `"dark"`, or `"system"`. Named palettes include both schemes;
+`colors` may be `{ light, dark }`.
 
 React and React Native are peer dependencies so the host Expo app owns the runtime. Rationale: duplicating React Native inside this package would fight Metro and Expo upgrades.

package/dist/components/Field.d.ts

@@ -0,0 +1,10 @@
+import { type TextInputProps } from 'react-native';
+export type FieldProps = Omit<TextInputProps, 'accessibilityLabel' | 'accessibilityState' | 'editable' | 'onChangeText' | 'style' | 'value'> & {
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+    label: string;
+    onChangeText: (value: string) => void;
+    value: string;
+};
+export declare function Field({ disabled, error, hint, label, onBlur, onChangeText, onFocus, value, ...inputProps }: FieldProps): import("react").JSX.Element;

package/dist/components/Field.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { TextInput } from 'react-native';
+import { mapFieldAccessibility } from '../map-field-accessibility.js';
+import { mapFieldInputStyle } from '../map-field-style.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+import { Stack } from './Stack.js';
+import { Text } from './Text.js';
+export function Field({ disabled = false, error, hint, label, onBlur, onChangeText, onFocus, value, ...inputProps }) {
+    const theme = useTheme();
+    const [focused, setFocused] = useState(false);
+    const supportingText = error ?? hint;
+    return (_jsxs(Stack, { gap: 1, children: [_jsx(Text, { variant: "label", children: label }), _jsx(TextInput, { ...inputProps, ...mapFieldAccessibility({
+                    accessibilityHint: inputProps.accessibilityHint,
+                    disabled,
+                    error,
+                    hint,
+                    label,
+                }), editable: !disabled, onBlur: (event) => {
+                    setFocused(false);
+                    onBlur?.(event);
+                }, onChangeText: onChangeText, onFocus: (event) => {
+                    setFocused(true);
+                    onFocus?.(event);
+                }, placeholderTextColor: theme.colors.muted, style: mapFieldInputStyle(theme, {
+                    disabled,
+                    focused,
+                    invalid: Boolean(error),
+                }), value: value }), supportingText ? (_jsx(Text, { accessibilityLiveRegion: error ? 'polite' : 'none', color: error ? 'danger' : 'muted', variant: "caption", children: supportingText })) : null] }));
+}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { Box, type BoxProps } from './components/Box.js';
 export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
 export { Card, type CardProps, type CardVariant } from './components/Card.js';
+export { Field, type FieldProps } from './components/Field.js';
 export { Inline, type InlineProps } from './components/Inline.js';
 export { Stack, type StackProps } from './components/Stack.js';
 export { type Align, type Justify } from './alignment.js';

package/dist/index.js

@@ -1,6 +1,7 @@
 export { Box } from './components/Box.js';
 export { Button, } from './components/Button.js';
 export { Card } from './components/Card.js';
+export { Field } from './components/Field.js';
 export { Inline } from './components/Inline.js';
 export { Stack } from './components/Stack.js';
 export { SegmentedControl, } from './components/SegmentedControl.js';

package/dist/map-field-accessibility.d.ts

@@ -0,0 +1,10 @@
+import { type TextInputProps } from 'react-native';
+type FieldAccessibilityProps = Pick<TextInputProps, 'accessibilityHint' | 'accessibilityLabel' | 'accessibilityState'>;
+export declare function mapFieldAccessibility(options: {
+    accessibilityHint?: string;
+    disabled: boolean;
+    error?: string;
+    hint?: string;
+    label: string;
+}): FieldAccessibilityProps;
+export {};

package/dist/map-field-accessibility.js

@@ -0,0 +1,7 @@
+export function mapFieldAccessibility(options) {
+    return {
+        accessibilityHint: options.error ?? options.hint ?? options.accessibilityHint,
+        accessibilityLabel: options.label,
+        accessibilityState: { disabled: options.disabled },
+    };
+}

package/dist/map-field-style.d.ts

@@ -0,0 +1,7 @@
+import { type Theme } from '@scalewing/tokens';
+import { type TextStyle } from 'react-native';
+export declare function mapFieldInputStyle(theme: Theme, options: {
+    disabled: boolean;
+    focused: boolean;
+    invalid: boolean;
+}): TextStyle;

package/dist/map-field-style.js

@@ -0,0 +1,22 @@
+export function mapFieldInputStyle(theme, options) {
+    const type = theme.typography.body;
+    return {
+        backgroundColor: theme.colors.surface,
+        borderColor: options.invalid
+            ? theme.colors.danger
+            : options.focused
+                ? theme.colors.accent
+                : theme.colors.border,
+        borderRadius: theme.radius.lg,
+        borderWidth: 1,
+        color: theme.colors.text,
+        fontSize: type.fontSize,
+        fontWeight: String(type.fontWeight),
+        letterSpacing: type.letterSpacing,
+        lineHeight: type.lineHeight,
+        minHeight: theme.control.md.minHeight,
+        opacity: options.disabled ? theme.disabledOpacity : 1,
+        paddingHorizontal: theme.control.md.paddingInline,
+        paddingVertical: theme.space[2],
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react-native",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Scalewing React Native layout primitives.",
   "type": "module",
   "license": "MIT",
@@ -28,7 +28,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@scalewing/tokens": "0.4.0"
+    "@scalewing/tokens": "0.5.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",