@scalewing/react-native 0.4.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @scalewing/react-native
 
+## 0.6.0
+
+### Minor Changes
+
+- ebbbd43: Add a controlled native Accordion with optional separate title navigation,
+  leading/metadata slots, expanded accessibility state, and theme-owned chrome.
+
+### Patch Changes
+
+- ebbbd43: Make native segmented selection visible with paired accent/onAccent colors
+  and a larger minimum touch height. Existing component props are unchanged.
+- Updated dependencies
+  - @scalewing/tokens@0.6.0
+
+## 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

@@ -2,19 +2,36 @@
 
 React Native / Expo primitives that consume the same Scalewing tokens as the DOM package.
 
+Native `Accordion` is controlled by `open` / `onOpenChange`. Provide a title,
+localized disclosure `accessibilityLabel`, and content. Optional `leading`
+and `metadata` slots support marks and counts. With `onTitlePress`, the title
+is a separate action (named by `titleAccessibilityLabel` or `title`) and only
+the trailing control toggles. Otherwise the entire header toggles. Collapsed
+content unmounts and is absent from the accessibility tree.
+
 ```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 }`.
+
+`SegmentedControl` uses the active palette's accent/onAccent pair for the
+selected section, with a 44-point minimum touch height. Labels grow with
+system text size. The native example demonstrates switching sections.
 
 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/Accordion.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+export type AccordionProps = {
+    accessibilityLabel: string;
+    children: ReactNode;
+    leading?: ReactNode;
+    metadata?: ReactNode;
+    onOpenChange: (open: boolean) => void;
+    onTitlePress?: () => void;
+    open: boolean;
+    title: string;
+    titleAccessibilityLabel?: string;
+};
+export declare function Accordion({ accessibilityLabel, children, leading, metadata, onOpenChange, onTitlePress, open, title, titleAccessibilityLabel, }: AccordionProps): import("react").JSX.Element;

package/dist/components/Accordion.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable } from 'react-native';
+import { mapAccordionChevronStyle, mapAccordionHeaderStyle, mapAccordionPressStyle, mapAccordionStyle, } from '../map-accordion-style.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+import { Box } from './Box.js';
+import { Text } from './Text.js';
+export function Accordion({ accessibilityLabel, children, leading, metadata, onOpenChange, onTitlePress, open, title, titleAccessibilityLabel, }) {
+    const theme = useTheme();
+    const toggle = () => onOpenChange(!open);
+    const chevron = (_jsx(Box, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: mapAccordionChevronStyle(theme, open) }));
+    return (_jsxs(Box, { style: mapAccordionStyle(theme), children: [_jsxs(Box, { style: mapAccordionHeaderStyle(theme), children: [_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: onTitlePress
+                            ? (titleAccessibilityLabel ?? title)
+                            : accessibilityLabel, accessibilityState: onTitlePress ? undefined : { expanded: open }, onPress: onTitlePress ?? toggle, style: ({ pressed }) => [
+                            mapAccordionPressStyle(theme, pressed),
+                            { flex: 1, minWidth: 0 },
+                        ], children: [leading, _jsx(Text, { variant: "label", style: { flex: 1, minWidth: 0 }, children: title }), !onTitlePress ? (_jsxs(_Fragment, { children: [metadata, chevron] })) : null] }), onTitlePress ? (_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: accessibilityLabel, accessibilityState: { expanded: open }, onPress: toggle, style: ({ pressed }) => mapAccordionPressStyle(theme, pressed), children: [metadata, chevron] })) : null] }), open ? (_jsx(Box, { paddingX: 1, paddingBottom: 1, children: children })) : null] }));
+}

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';
@@ -9,3 +10,4 @@ export { TabBar, TabBarTrailing, type TabBarItem, type TabBarProps, type TabBarT
 export { Table, TableBody, TableCell, TableHeader, TableRow, type TableBodyProps, type TableCellProps, type TableDensity, type TableHeaderProps, type TableProps, type TableRowProps, } from './components/Table.js';
 export { Text, type TextProps } from './components/Text.js';
 export { ThemeProvider, useTheme, type ThemeProviderProps, } from './theme/ThemeProvider.js';
+export { Accordion, type AccordionProps } from './components/Accordion.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';
@@ -8,3 +9,4 @@ export { TabBar, TabBarTrailing, } from './components/TabBar.js';
 export { Table, TableBody, TableCell, TableHeader, TableRow, } from './components/Table.js';
 export { Text } from './components/Text.js';
 export { ThemeProvider, useTheme, } from './theme/ThemeProvider.js';
+export { Accordion } from './components/Accordion.js';

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

@@ -0,0 +1,6 @@
+import { type Theme } from '@scalewing/tokens';
+import { type ViewStyle } from 'react-native';
+export declare function mapAccordionStyle(theme: Theme): ViewStyle;
+export declare function mapAccordionHeaderStyle(theme: Theme): ViewStyle;
+export declare function mapAccordionPressStyle(theme: Theme, pressed: boolean): ViewStyle;
+export declare function mapAccordionChevronStyle(theme: Theme, open: boolean): ViewStyle;

package/dist/map-accordion-style.js

@@ -0,0 +1,39 @@
+import { focusRing } from '@scalewing/tokens';
+export function mapAccordionStyle(theme) {
+    return {
+        backgroundColor: theme.colors.surface,
+        borderColor: theme.colors.border,
+        borderWidth: 1,
+        borderRadius: theme.radius.lg,
+        overflow: 'hidden',
+    };
+}
+export function mapAccordionHeaderStyle(theme) {
+    return {
+        flexDirection: 'row',
+        alignItems: 'stretch',
+        backgroundColor: theme.glass.fill,
+    };
+}
+export function mapAccordionPressStyle(theme, pressed) {
+    return {
+        alignItems: 'center',
+        flexDirection: 'row',
+        gap: theme.space[3],
+        minHeight: theme.control.md.minHeight + theme.space[3],
+        minWidth: theme.control.md.minHeight,
+        paddingHorizontal: theme.space[4],
+        paddingVertical: theme.space[3],
+        opacity: pressed ? theme.disabledOpacity : 1,
+    };
+}
+export function mapAccordionChevronStyle(theme, open) {
+    return {
+        width: theme.space[2],
+        height: theme.space[2],
+        borderBottomWidth: focusRing.width,
+        borderRightWidth: focusRing.width,
+        borderColor: theme.colors.muted,
+        transform: [{ rotate: open ? '225deg' : '45deg' }],
+    };
+}

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/dist/map-segmented-style.js

@@ -13,14 +13,14 @@ export function mapSegmentedControlStyle(theme) {
 export function mapSegmentedItemStyle(theme, selected) {
     return {
         alignItems: 'center',
-        backgroundColor: selected ? theme.colors.surface : 'transparent',
+        backgroundColor: selected ? theme.colors.accent : 'transparent',
         borderRadius: theme.radius.pill,
         flex: 1,
         justifyContent: 'center',
-        minHeight: theme.control.xs.minHeight,
+        minHeight: theme.control.md.minHeight,
         paddingHorizontal: theme.control.xs.paddingInline,
     };
 }
 export function segmentedItemColor(selected) {
-    return selected ? 'text' : 'muted';
+    return selected ? 'onAccent' : 'muted';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react-native",
-  "version": "0.4.0",
+  "version": "0.6.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.6.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -36,8 +36,10 @@
   },
   "devDependencies": {
     "@types/react": "^19.2.2",
+    "@types/react-test-renderer": "^19.3.0",
     "react": "19.2.3",
-    "react-native": "0.86.3"
+    "react-native": "0.86.3",
+    "react-test-renderer": "19.2.3"
   },
   "publishConfig": {
     "access": "public"