@scalewing/react-native 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @scalewing/react-native
+
+## 0.1.0
+
+### Minor Changes
+
+- Initial foundation: Box, Stack, Inline, Card, Text, and ThemeProvider for React Native.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Scalewing contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,15 @@
+# @scalewing/react-native
+
+React Native / Expo primitives that consume the same Scalewing tokens as the DOM package.
+
+```ts
+import { Card, Stack, Text, ThemeProvider } from '@scalewing/react-native';
+
+<Card padding={4}>
+  <Text variant="title">Kickoff</Text>
+</Card>
+```
+
+There is no CSS class API. `padding={4}` is spacing step 4, the same step as `sw-padding-4` on web.
+
+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

@@ -0,0 +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 declare const alignItems: Record<Align, FlexAlignType>;
+export declare const justifyContent: Record<Justify, FlexStyle['justifyContent']>;

package/dist/alignment.js

@@ -0,0 +1,12 @@
+export const alignItems = {
+    center: 'center',
+    end: 'flex-end',
+    start: 'flex-start',
+    stretch: 'stretch',
+};
+export const justifyContent = {
+    between: 'space-between',
+    center: 'center',
+    end: 'flex-end',
+    start: 'flex-start',
+};

package/dist/components/Box.d.ts

@@ -0,0 +1,11 @@
+import { type RadiusStep, type SemanticColorKey } from '@scalewing/tokens';
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+import { type SpacingProps } from '../map-spacing-style.js';
+export type BoxProps = SpacingProps & ViewProps & {
+    background?: Extract<SemanticColorKey, 'background' | 'surface'>;
+    border?: boolean;
+    children?: ReactNode;
+    radius?: RadiusStep;
+};
+export declare function Box({ background, border, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, gap, radius, style, ...rest }: BoxProps): import("react").JSX.Element;

package/dist/components/Box.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { mapSpacingStyle } from '../map-spacing-style.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+export function Box({ background, border, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, gap, radius, style, ...rest }) {
+    const theme = useTheme();
+    const resolvedStyle = {
+        ...mapSpacingStyle(theme, {
+            gap,
+            padding,
+            paddingBottom,
+            paddingLeft,
+            paddingRight,
+            paddingTop,
+            paddingX,
+            paddingY,
+        }),
+        backgroundColor: background ? theme.colors[background] : undefined,
+        borderColor: border ? theme.colors.border : undefined,
+        borderRadius: radius ? theme.radius[radius] : undefined,
+        borderWidth: border ? 1 : undefined,
+    };
+    return _jsx(View, { style: [resolvedStyle, style], ...rest });
+}

package/dist/components/Card.d.ts

@@ -0,0 +1,8 @@
+import { type SpacingStep } from '@scalewing/tokens';
+import { type BoxProps } from './Box.js';
+export type CardVariant = 'outlined' | 'elevated';
+export type CardProps = BoxProps & {
+    padding?: SpacingStep;
+    variant?: CardVariant;
+};
+export declare function Card({ padding, style, variant, ...rest }: CardProps): import("react").JSX.Element;

package/dist/components/Card.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from './Box.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+export function Card({ padding = 4, style, variant = 'outlined', ...rest }) {
+    const theme = useTheme();
+    return (_jsx(Box, { background: "surface", border: variant === 'outlined', padding: padding, radius: "md", style: [
+            variant === 'elevated'
+                ? {
+                    shadowColor: theme.colors.text,
+                    shadowOffset: { height: 8, width: 0 },
+                    shadowOpacity: 0.12,
+                    shadowRadius: 16,
+                    elevation: 3,
+                }
+                : undefined,
+            style,
+        ], ...rest }));
+}

package/dist/components/Inline.d.ts

@@ -0,0 +1,10 @@
+import { type SpacingStep } from '@scalewing/tokens';
+import { type Align, type Justify } from '../alignment.js';
+import { type BoxProps } from './Box.js';
+export type InlineProps = BoxProps & {
+    align?: Align;
+    gap?: SpacingStep;
+    justify?: Justify;
+    wrap?: boolean;
+};
+export declare function Inline({ align, gap, justify, style, wrap, ...rest }: InlineProps): import("react").JSX.Element;

package/dist/components/Inline.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { alignItems, justifyContent, } from '../alignment.js';
+import { Box } from './Box.js';
+export function Inline({ align = 'center', gap = 0, justify = 'start', style, wrap = false, ...rest }) {
+    return (_jsx(Box, { gap: gap, style: [
+            {
+                alignItems: alignItems[align],
+                flexDirection: 'row',
+                flexWrap: wrap ? 'wrap' : 'nowrap',
+                justifyContent: justifyContent[justify],
+            },
+            style,
+        ], ...rest }));
+}

package/dist/components/Stack.d.ts

@@ -0,0 +1,10 @@
+import { type SpacingStep } from '@scalewing/tokens';
+import { type Align, type Justify } from '../alignment.js';
+import { type BoxProps } from './Box.js';
+export type { Align, Justify };
+export type StackProps = BoxProps & {
+    align?: Align;
+    gap?: SpacingStep;
+    justify?: Justify;
+};
+export declare function Stack({ align, gap, justify, style, ...rest }: StackProps): import("react").JSX.Element;

package/dist/components/Stack.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { alignItems, justifyContent, } from '../alignment.js';
+import { Box } from './Box.js';
+export function Stack({ align = 'stretch', gap = 0, justify = 'start', style, ...rest }) {
+    return (_jsx(Box, { gap: gap, style: [
+            {
+                alignItems: alignItems[align],
+                flexDirection: 'column',
+                justifyContent: justifyContent[justify],
+            },
+            style,
+        ], ...rest }));
+}

package/dist/components/Text.d.ts

@@ -0,0 +1,8 @@
+import { type SemanticColorKey, type TypographyVariant } from '@scalewing/tokens';
+import { type TextProps as NativeTextProps } from 'react-native';
+export type TextProps = NativeTextProps & {
+    color?: SemanticColorKey;
+    truncate?: boolean;
+    variant?: TypographyVariant;
+};
+export declare function Text({ color, style, truncate, variant, ...rest }: TextProps): import("react").JSX.Element;

package/dist/components/Text.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text as NativeText, } from 'react-native';
+import { useTheme } from '../theme/ThemeProvider.js';
+export function Text({ color = 'text', style, truncate = false, variant = 'body', ...rest }) {
+    const theme = useTheme();
+    const type = theme.typography[variant];
+    return (_jsx(NativeText, { numberOfLines: truncate ? 1 : undefined, style: [
+            {
+                color: theme.colors[color],
+                fontSize: type.fontSize,
+                fontWeight: String(type.fontWeight),
+                letterSpacing: type.letterSpacing,
+                lineHeight: type.lineHeight,
+            },
+            style,
+        ], ...rest }));
+}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { Box, type BoxProps } from './components/Box.js';
+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 { Text, type TextProps } from './components/Text.js';
+export { ThemeProvider, useTheme, type ThemeProviderProps, } from './theme/ThemeProvider.js';

package/dist/index.js

@@ -0,0 +1,6 @@
+export { Box } from './components/Box.js';
+export { Card } from './components/Card.js';
+export { Inline } from './components/Inline.js';
+export { Stack } from './components/Stack.js';
+export { Text } from './components/Text.js';
+export { ThemeProvider, useTheme, } from './theme/ThemeProvider.js';

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

@@ -0,0 +1,22 @@
+import { type SpacingStep, type Theme } from '@scalewing/tokens';
+export type SpacingProps = {
+    padding?: SpacingStep;
+    paddingX?: SpacingStep;
+    paddingY?: SpacingStep;
+    paddingTop?: SpacingStep;
+    paddingRight?: SpacingStep;
+    paddingBottom?: SpacingStep;
+    paddingLeft?: SpacingStep;
+    gap?: SpacingStep;
+};
+export type NativeSpacingStyle = {
+    padding?: number;
+    paddingHorizontal?: number;
+    paddingVertical?: number;
+    paddingTop?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    gap?: number;
+};
+export declare function mapSpacingStyle(theme: Theme, props: SpacingProps): NativeSpacingStyle;

package/dist/map-spacing-style.js

@@ -0,0 +1,28 @@
+export function mapSpacingStyle(theme, props) {
+    const style = {};
+    if (props.padding !== undefined) {
+        style.padding = theme.space[props.padding];
+    }
+    if (props.paddingX !== undefined) {
+        style.paddingHorizontal = theme.space[props.paddingX];
+    }
+    if (props.paddingY !== undefined) {
+        style.paddingVertical = theme.space[props.paddingY];
+    }
+    if (props.paddingTop !== undefined) {
+        style.paddingTop = theme.space[props.paddingTop];
+    }
+    if (props.paddingRight !== undefined) {
+        style.paddingRight = theme.space[props.paddingRight];
+    }
+    if (props.paddingBottom !== undefined) {
+        style.paddingBottom = theme.space[props.paddingBottom];
+    }
+    if (props.paddingLeft !== undefined) {
+        style.paddingLeft = theme.space[props.paddingLeft];
+    }
+    if (props.gap !== undefined) {
+        style.gap = theme.space[props.gap];
+    }
+    return style;
+}

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import { type ColorScheme, type ColorTokens, type Theme } from '@scalewing/tokens';
+export type ThemeProviderProps = {
+    colorScheme?: ColorScheme | 'system';
+    colors?: Partial<ColorTokens>;
+    children: ReactNode;
+};
+export declare function ThemeProvider({ colorScheme, colors, children, }: ThemeProviderProps): import("react").JSX.Element;
+export declare function useTheme(): Theme;

package/dist/theme/ThemeProvider.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+import { useColorScheme } from 'react-native';
+import { createTheme, } from '@scalewing/tokens';
+const ThemeContext = createContext(null);
+export function ThemeProvider({ colorScheme = 'system', colors, children, }) {
+    const deviceScheme = useColorScheme() === 'dark' ? 'dark' : 'light';
+    const resolvedScheme = colorScheme === 'system' ? deviceScheme : colorScheme;
+    const theme = useMemo(() => createTheme({ colorScheme: resolvedScheme, colors }), [colors, resolvedScheme]);
+    return (_jsx(ThemeContext.Provider, { value: theme, children: children }));
+}
+export function useTheme() {
+    const theme = useContext(ThemeContext);
+    if (!theme) {
+        throw new Error('useTheme must be used within ThemeProvider');
+    }
+    return theme;
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@scalewing/react-native",
+  "version": "0.1.0",
+  "description": "Scalewing React Native layout primitives.",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/dna-consulting/scalewing.git",
+    "directory": "packages/react-native"
+  },
+  "homepage": "https://gitlab.com/dna-consulting/scalewing#readme",
+  "bugs": {
+    "url": "https://gitlab.com/dna-consulting/scalewing/-/issues"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "react-native": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "CHANGELOG.md",
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "dependencies": {
+    "@scalewing/tokens": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-native": ">=0.76.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.2",
+    "react": "19.2.3",
+    "react-native": "0.86.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.json",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts"
+}