@scalewing/react-native 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @scalewing/react-native
 
+## 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,7 +3,7 @@
 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, SegmentedControl, Stack, TabBar, Text, ThemeProvider } from '@scalewing/react-native';
 
 <ThemeProvider colorScheme="system" palette="cerulean">
   <Card padding={4}>

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/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

@@ -4,5 +4,8 @@ export { Card, type CardProps, type CardVariant } from './components/Card.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

@@ -3,5 +3,8 @@ export { Button, } from './components/Button.js';
 export { Card } from './components/Card.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-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.4.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.4.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",