@scalewing/react-native 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @scalewing/react-native
 
+## 0.2.0
+
+### Minor Changes
+
+- f35314a: Add Button (primary, secondary, ghost, danger; sm and md) for DOM and React Native after FutMas and coach-platform requested the same control. Includes onAccent/onDanger, 44px md hit target, focus ring, and disabled opacity tokens.
+- f35314a: Shift the default visual language to a quiet glass canvas: Apple-like neutrals and type, frosted Card, pill buttons, and generated document styles so links and native text controls are not user-agent chrome.
+
+### Patch Changes
+
+- Updated dependencies [f35314a]
+- Updated dependencies [f35314a]
+  - @scalewing/tokens@0.2.0
+
 ## 0.1.0
 
 ### Minor Changes

package/README.md

@@ -3,13 +3,16 @@
 React Native / Expo primitives that consume the same Scalewing tokens as the DOM package.
 
 ```ts
-import { Card, Stack, Text, ThemeProvider } from '@scalewing/react-native';
+import { Button, Card, Stack, Text, ThemeProvider } from '@scalewing/react-native';
 
 <Card padding={4}>
-  <Text variant="title">Kickoff</Text>
+  <Stack gap={3}>
+    <Text variant="title">Kickoff</Text>
+    <Button onPress={() => undefined}>Save</Button>
+  </Stack>
 </Card>
 ```
 
-There is no CSS class API. `padding={4}` is spacing step 4, the same step as `sw-padding-4` on web.
+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`).
 
 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/Button.d.ts

@@ -0,0 +1,11 @@
+import { type ButtonSize, type ButtonVariant } from '@scalewing/tokens';
+import { type ReactNode } from 'react';
+export type { ButtonSize, ButtonVariant };
+export type ButtonProps = {
+    children: ReactNode;
+    disabled?: boolean;
+    onPress: () => void;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+};
+export declare function Button({ children, disabled, onPress, size, variant, }: ButtonProps): import("react").JSX.Element;

package/dist/components/Button.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pressable } from 'react-native';
+import { buttonLabelColor, mapButtonViewStyle } from '../map-button-style.js';
+import { useTheme } from '../theme/ThemeProvider.js';
+import { Text } from './Text.js';
+export function Button({ children, disabled = false, onPress, size = 'md', variant = 'primary', }) {
+    const theme = useTheme();
+    const label = typeof children === 'string' ? children : undefined;
+    return (_jsx(Pressable, { accessibilityRole: "button", accessibilityState: { disabled }, accessibilityLabel: label, disabled: disabled, onPress: onPress, style: mapButtonViewStyle(theme, { disabled, size, variant }), children: typeof children === 'string' ? (_jsx(Text, { color: buttonLabelColor(variant), variant: "label", children: children })) : (children) }));
+}

package/dist/components/Card.d.ts

@@ -1,6 +1,6 @@
-import { type SpacingStep } from '@scalewing/tokens';
+import { type CardVariant, type SpacingStep } from '@scalewing/tokens';
 import { type BoxProps } from './Box.js';
-export type CardVariant = 'outlined' | 'elevated';
+export type { CardVariant };
 export type CardProps = BoxProps & {
     padding?: SpacingStep;
     variant?: CardVariant;

package/dist/components/Card.js

@@ -1,18 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from './Box.js';
+import { mapCardViewStyle } from '../map-card-style.js';
 import { useTheme } from '../theme/ThemeProvider.js';
-export function Card({ padding = 4, style, variant = 'outlined', ...rest }) {
+export function Card({ padding = 4, style, variant = 'glass', ...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 }));
+    return (_jsx(Box, { padding: padding, style: [mapCardViewStyle(theme, variant), style], ...rest }));
 }

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 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 { Inline, type InlineProps } from './components/Inline.js';
 export { Stack, type StackProps } from './components/Stack.js';

package/dist/index.js

@@ -1,4 +1,5 @@
 export { Box } from './components/Box.js';
+export { Button, } from './components/Button.js';
 export { Card } from './components/Card.js';
 export { Inline } from './components/Inline.js';
 export { Stack } from './components/Stack.js';

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

@@ -0,0 +1,9 @@
+import { type ButtonSize, type ButtonVariant, type SemanticColorKey, type Theme } from '@scalewing/tokens';
+import { type TextStyle, type ViewStyle } from 'react-native';
+export declare function buttonLabelColor(variant: ButtonVariant): SemanticColorKey;
+export declare function mapButtonViewStyle(theme: Theme, options: {
+    disabled: boolean;
+    size: ButtonSize;
+    variant: ButtonVariant;
+}): ViewStyle;
+export declare function mapButtonLabelStyle(theme: Theme, variant: ButtonVariant): TextStyle;

package/dist/map-button-style.js

@@ -0,0 +1,61 @@
+export function buttonLabelColor(variant) {
+    switch (variant) {
+        case 'primary':
+            return 'onAccent';
+        case 'secondary':
+            return 'text';
+        case 'ghost':
+            return 'accent';
+        case 'danger':
+            return 'onDanger';
+    }
+}
+export function mapButtonViewStyle(theme, options) {
+    const control = theme.control[options.size];
+    const fill = buttonFill(theme, options.variant);
+    return {
+        alignItems: 'center',
+        backgroundColor: fill.backgroundColor,
+        borderColor: fill.borderColor,
+        borderRadius: theme.radius.pill,
+        borderWidth: 1,
+        justifyContent: 'center',
+        minHeight: control.minHeight,
+        opacity: options.disabled ? theme.disabledOpacity : 1,
+        paddingHorizontal: control.paddingInline,
+    };
+}
+export function mapButtonLabelStyle(theme, variant) {
+    const type = theme.typography.label;
+    return {
+        color: theme.colors[buttonLabelColor(variant)],
+        fontSize: type.fontSize,
+        fontWeight: String(type.fontWeight),
+        letterSpacing: type.letterSpacing,
+        lineHeight: type.lineHeight,
+    };
+}
+function buttonFill(theme, variant) {
+    switch (variant) {
+        case 'primary':
+            return {
+                backgroundColor: theme.colors.accent,
+                borderColor: 'transparent',
+            };
+        case 'secondary':
+            return {
+                backgroundColor: theme.glass.fill,
+                borderColor: theme.glass.border,
+            };
+        case 'ghost':
+            return {
+                backgroundColor: 'transparent',
+                borderColor: 'transparent',
+            };
+        case 'danger':
+            return {
+                backgroundColor: theme.colors.danger,
+                borderColor: 'transparent',
+            };
+    }
+}

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

@@ -0,0 +1,3 @@
+import { type CardVariant, type Theme } from '@scalewing/tokens';
+import { type ViewStyle } from 'react-native';
+export declare function mapCardViewStyle(theme: Theme, variant: CardVariant): ViewStyle;

package/dist/map-card-style.js

@@ -0,0 +1,30 @@
+export function mapCardViewStyle(theme, variant) {
+    switch (variant) {
+        case 'glass':
+            return {
+                backgroundColor: theme.glass.fill,
+                borderColor: theme.glass.border,
+                borderRadius: theme.radius.lg,
+                borderWidth: 1,
+            };
+        case 'outlined':
+            return {
+                backgroundColor: theme.colors.surface,
+                borderColor: theme.colors.border,
+                borderRadius: theme.radius.lg,
+                borderWidth: 1,
+            };
+        case 'elevated':
+            return {
+                backgroundColor: theme.colors.surface,
+                borderColor: 'transparent',
+                borderRadius: theme.radius.lg,
+                borderWidth: 0,
+                elevation: 3,
+                shadowColor: theme.colors.text,
+                shadowOffset: { height: 8, width: 0 },
+                shadowOpacity: 0.08,
+                shadowRadius: 20,
+            };
+    }
+}

package/dist/theme/ThemeProvider.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo } from 'react';
-import { useColorScheme } from 'react-native';
+import { useColorScheme, View } 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 }));
+    return (_jsx(ThemeContext.Provider, { value: theme, children: _jsx(View, { style: { backgroundColor: theme.colors.background, flex: 1 }, children: children }) }));
 }
 export function useTheme() {
     const theme = useContext(ThemeContext);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react-native",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Scalewing React Native layout primitives.",
   "type": "module",
   "license": "MIT",
@@ -28,7 +28,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@scalewing/tokens": "0.1.0"
+    "@scalewing/tokens": "0.2.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",