@scalewing/react-native 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @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

package/README.md

@@ -2,6 +2,13 @@
 
 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, Field, SegmentedControl, Stack, TabBar, Text, ThemeProvider } from '@scalewing/react-native';
 
@@ -23,4 +30,8 @@ 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/index.d.ts

@@ -10,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

@@ -9,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-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.5.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.5.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"