@scalewing/react-native 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @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
+
+- Keep public package versions matched for the GitHub `v0.4.0` release tag.
+  Native TabBar, Table, and SegmentedControl ship in this version.
+- feef1f8: Add native SegmentedControl with radiogroup semantics, a glass pill track, and a surface-filled selected item. Labels stay in the consumer.
+- feef1f8: Add native TabBar with selected tab semantics, icon slots, and an optional trailing control for round search-style actions.
+- feef1f8: Add native Table with compact density, numeric cells, and the same row/cell language as the web table.
+
+### Patch Changes
+
+- 01b138f: Point package metadata to the GitHub source repository and document explicit GitHub Actions releases. Package names and runtime APIs are unchanged.
+- feef1f8: Allow optional `onPress` on native TableRow so compact score rows can open a detail screen without a product-only MatchRow.
+- Updated dependencies [01b138f]
+- Updated dependencies
+  - @scalewing/tokens@0.4.0
+
 ## 0.3.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, Stack, 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/alignment.d.ts

@@ -1,5 +1,5 @@
 import { type FlexAlignType, type FlexStyle } from 'react-native';
 export type Align = 'start' | 'center' | 'end' | 'stretch';
-export type Justify = 'start' | 'center' | 'end' | 'between';
+export type Justify = 'start' | 'center' | 'end' | 'between' | 'around';
 export declare const alignItems: Record<Align, FlexAlignType>;
 export declare const justifyContent: Record<Justify, FlexStyle['justifyContent']>;

package/dist/alignment.js

@@ -5,6 +5,7 @@ export const alignItems = {
     stretch: 'stretch',
 };
 export const justifyContent = {
+    around: 'space-around',
     between: 'space-between',
     center: 'center',
     end: 'flex-end',

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/components/SegmentedControl.d.ts

@@ -0,0 +1,11 @@
+export type SegmentedItem = {
+    id: string;
+    label: string;
+};
+export type SegmentedControlProps = {
+    accessibilityLabel: string;
+    items: readonly SegmentedItem[];
+    onChange: (id: string) => void;
+    value: string;
+};
+export declare function SegmentedControl({ accessibilityLabel, items, onChange, value, }: SegmentedControlProps): import("react").JSX.Element;

package/dist/components/SegmentedControl.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pressable } from 'react-native';
+import { mapSegmentedControlStyle, mapSegmentedItemStyle, segmentedItemColor, } from '../map-segmented-style.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+import { Box } from './Box.js';
+import { Text } from './Text.js';
+export function SegmentedControl({ accessibilityLabel, items, onChange, value, }) {
+    const theme = useTheme();
+    return (_jsx(Box, { accessibilityLabel: accessibilityLabel, accessibilityRole: "radiogroup", style: mapSegmentedControlStyle(theme), children: items.map((item) => {
+            const selected = item.id === value;
+            return (_jsx(Pressable, { accessibilityRole: "radio", accessibilityState: { selected }, onPress: () => {
+                    if (!selected) {
+                        onChange(item.id);
+                    }
+                }, style: mapSegmentedItemStyle(theme, selected), children: _jsx(Text, { color: segmentedItemColor(selected), variant: "label", children: item.label }) }, item.id));
+        }) }));
+}

package/dist/components/TabBar.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+export type TabBarItem = {
+    icon: ReactNode;
+    key: string;
+    label: string;
+    onPress: () => void;
+    selected: boolean;
+};
+export type TabBarProps = {
+    bottomInset?: number;
+    items: readonly TabBarItem[];
+    trailing?: ReactNode;
+};
+export type TabBarTrailingProps = {
+    accessibilityLabel: string;
+    children: ReactNode;
+    onPress: () => void;
+};
+export declare function TabBarTrailing({ accessibilityLabel, children, onPress, }: TabBarTrailingProps): import("react").JSX.Element;
+export declare function TabBar({ bottomInset, items, trailing }: TabBarProps): import("react").JSX.Element;

package/dist/components/TabBar.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable } from 'react-native';
+import { mapTabBarStyle, mapTabBarTrailingStyle, tabBarItemColor, } from '../map-tab-bar-style.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+import { Box } from './Box.js';
+import { Inline } from './Inline.js';
+import { Stack } from './Stack.js';
+import { Text } from './Text.js';
+export function TabBarTrailing({ accessibilityLabel, children, onPress, }) {
+    const theme = useTheme();
+    return (_jsx(Pressable, { accessibilityLabel: accessibilityLabel, accessibilityRole: "button", onPress: onPress, style: mapTabBarTrailingStyle(theme), children: children }));
+}
+export function TabBar({ bottomInset = 0, items, trailing }) {
+    const theme = useTheme();
+    return (_jsx(Box, { accessibilityRole: "tablist", style: mapTabBarStyle(theme, { bottomInset }), children: _jsxs(Inline, { align: "center", gap: 3, children: [_jsx(Inline, { align: "center", justify: "around", style: { flex: 1 }, children: items.map((item) => (_jsx(Pressable, { accessibilityLabel: item.label, accessibilityRole: "tab", accessibilityState: { selected: item.selected }, onPress: item.onPress, children: _jsxs(Stack, { align: "center", gap: 1, children: [item.icon, _jsx(Text, { color: tabBarItemColor(item.selected), variant: "caption", children: item.label })] }) }, item.key))) }), trailing] }) }));
+}

package/dist/components/Table.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+import { type TableDensity } from '../map-table-style.js';
+export type TableProps = {
+    children: ReactNode;
+    density?: TableDensity;
+};
+export declare function Table({ children, density }: TableProps): import("react").JSX.Element;
+export type TableHeaderProps = {
+    children: ReactNode;
+};
+export declare function TableHeader({ children }: TableHeaderProps): import("react").JSX.Element;
+export type TableBodyProps = {
+    children: ReactNode;
+};
+export declare function TableBody({ children }: TableBodyProps): import("react").JSX.Element;
+export type TableRowProps = {
+    accessibilityLabel?: string;
+    children: ReactNode;
+    onPress?: () => void;
+};
+export declare function TableRow({ accessibilityLabel, children, onPress, }: TableRowProps): import("react").JSX.Element;
+export type TableCellProps = {
+    align?: 'start' | 'center' | 'end';
+    children: ReactNode;
+    flex?: number;
+    header?: boolean;
+    numeric?: boolean;
+    truncate?: boolean;
+};
+export declare function TableCell({ align, children, flex, header, numeric, truncate, }: TableCellProps): import("react").JSX.Element;
+export type { TableDensity };

package/dist/components/Table.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { Pressable } from 'react-native';
+import { Box } from './Box.js';
+import { Text } from './Text.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+import { mapTableCellStyle, mapTableRowStyle, } from '../map-table-style.js';
+const TableContext = createContext({
+    density: 'compact',
+});
+export function Table({ children, density = 'compact' }) {
+    return (_jsx(TableContext.Provider, { value: { density }, children: _jsx(Box, { children: children }) }));
+}
+export function TableHeader({ children }) {
+    return _jsx(Box, { children: children });
+}
+export function TableBody({ children }) {
+    return _jsx(Box, { children: children });
+}
+export function TableRow({ accessibilityLabel, children, onPress, }) {
+    const theme = useTheme();
+    const { density } = useContext(TableContext);
+    if (onPress) {
+        return (_jsx(Pressable, { accessibilityLabel: accessibilityLabel, accessibilityRole: "button", onPress: onPress, style: ({ pressed }) => mapTableRowStyle(theme, { density, pressed }), children: children }));
+    }
+    return _jsx(Box, { style: mapTableRowStyle(theme, { density }), children: children });
+}
+export function TableCell({ align = 'start', children, flex = 1, header = false, numeric = false, truncate = false, }) {
+    return (_jsx(Box, { style: mapTableCellStyle({ align, flex, numeric }), children: typeof children === 'string' || typeof children === 'number' ? (_jsx(Text, { color: header ? 'muted' : 'text', truncate: truncate, variant: numeric ? 'data' : 'caption', children: children })) : (children) }));
+}

package/dist/index.d.ts

@@ -1,8 +1,12 @@
 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';
+export { SegmentedControl, type SegmentedControlProps, type SegmentedItem, } from './components/SegmentedControl.js';
+export { TabBar, TabBarTrailing, type TabBarItem, type TabBarProps, type TabBarTrailingProps, } from './components/TabBar.js';
+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';

package/dist/index.js

@@ -1,7 +1,11 @@
 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';
+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';

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.d.ts

@@ -0,0 +1,5 @@
+import { type SemanticColorKey, type Theme } from '@scalewing/tokens';
+import { type ViewStyle } from 'react-native';
+export declare function mapSegmentedControlStyle(theme: Theme): ViewStyle;
+export declare function mapSegmentedItemStyle(theme: Theme, selected: boolean): ViewStyle;
+export declare function segmentedItemColor(selected: boolean): SemanticColorKey;

package/dist/map-segmented-style.js

@@ -0,0 +1,26 @@
+import { trackInset, } from '@scalewing/tokens';
+export function mapSegmentedControlStyle(theme) {
+    return {
+        backgroundColor: theme.glass.fill,
+        borderColor: theme.glass.border,
+        borderRadius: theme.radius.pill,
+        borderWidth: 1,
+        flexDirection: 'row',
+        gap: trackInset,
+        padding: trackInset,
+    };
+}
+export function mapSegmentedItemStyle(theme, selected) {
+    return {
+        alignItems: 'center',
+        backgroundColor: selected ? theme.colors.surface : 'transparent',
+        borderRadius: theme.radius.pill,
+        flex: 1,
+        justifyContent: 'center',
+        minHeight: theme.control.xs.minHeight,
+        paddingHorizontal: theme.control.xs.paddingInline,
+    };
+}
+export function segmentedItemColor(selected) {
+    return selected ? 'text' : 'muted';
+}

package/dist/map-tab-bar-style.d.ts

@@ -0,0 +1,7 @@
+import { type SemanticColorKey, type Theme } from '@scalewing/tokens';
+import { type ViewStyle } from 'react-native';
+export declare function mapTabBarStyle(theme: Theme, options?: {
+    bottomInset: number;
+}): ViewStyle;
+export declare function tabBarItemColor(selected: boolean): SemanticColorKey;
+export declare function mapTabBarTrailingStyle(theme: Theme): ViewStyle;

package/dist/map-tab-bar-style.js

@@ -0,0 +1,26 @@
+export function mapTabBarStyle(theme, options = { bottomInset: 0 }) {
+    return {
+        backgroundColor: theme.colors.surface,
+        borderTopColor: theme.colors.border,
+        borderTopWidth: 1,
+        paddingBottom: theme.space[2] + options.bottomInset,
+        paddingHorizontal: theme.space[3],
+        paddingTop: theme.space[2],
+    };
+}
+export function tabBarItemColor(selected) {
+    return selected ? 'accent' : 'muted';
+}
+export function mapTabBarTrailingStyle(theme) {
+    const size = theme.control.md.minHeight;
+    return {
+        alignItems: 'center',
+        backgroundColor: theme.colors.surface,
+        borderColor: theme.colors.border,
+        borderRadius: theme.radius.pill,
+        borderWidth: 1,
+        height: size,
+        justifyContent: 'center',
+        width: size,
+    };
+}

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

@@ -0,0 +1,12 @@
+import { type Theme } from '@scalewing/tokens';
+import { type ViewStyle } from 'react-native';
+export type TableDensity = 'comfortable' | 'compact';
+export declare function mapTableRowStyle(theme: Theme, options: {
+    density: TableDensity;
+    pressed?: boolean;
+}): ViewStyle;
+export declare function mapTableCellStyle(options: {
+    align: 'start' | 'center' | 'end';
+    flex: number;
+    numeric: boolean;
+}): ViewStyle;

package/dist/map-table-style.js

@@ -0,0 +1,24 @@
+export function mapTableRowStyle(theme, options) {
+    const compact = options.density === 'compact';
+    return {
+        alignItems: 'center',
+        borderBottomColor: theme.colors.border,
+        borderBottomWidth: 1,
+        flexDirection: 'row',
+        opacity: options.pressed ? theme.disabledOpacity : 1,
+        paddingHorizontal: compact ? theme.space[2] : theme.space[3],
+        paddingVertical: compact ? theme.space[1] : theme.space[2],
+    };
+}
+export function mapTableCellStyle(options) {
+    const alignment = options.align === 'center'
+        ? 'center'
+        : options.numeric || options.align === 'end'
+            ? 'flex-end'
+            : 'flex-start';
+    return {
+        alignItems: alignment,
+        flex: options.flex,
+        minWidth: 0,
+    };
+}

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@scalewing/react-native",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Scalewing React Native layout primitives.",
   "type": "module",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://gitlab.com/dna-consulting/scalewing.git",
+    "url": "git+https://github.com/nestor-garcia-dev/scalewing.git",
     "directory": "packages/react-native"
   },
-  "homepage": "https://gitlab.com/dna-consulting/scalewing#readme",
+  "homepage": "https://github.com/nestor-garcia-dev/scalewing#readme",
   "bugs": {
-    "url": "https://gitlab.com/dna-consulting/scalewing/-/issues"
+    "url": "https://github.com/nestor-garcia-dev/scalewing/issues"
   },
   "sideEffects": false,
   "exports": {
@@ -28,7 +28,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@scalewing/tokens": "0.3.0"
+    "@scalewing/tokens": "0.5.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",