@apple-pie/slice-native 0.1.0 → 0.1.3

package/README.md

@@ -1,9 +1,12 @@
-# @apple-pie/icons-native
+# @apple-pie/slice-native
 
-React Native SVG icons, with the same names and artwork as the web UIKit.
+Experimental React Native SVG icons, with the same names and artwork as the web UIKit.
+Includes native light/dark theme tokens; other Slice components and a theme provider
+are not included. It is built and published independently
+of `@apple-pie/slice` and does not require that package at runtime.
 
 ```tsx
-import { Icon, SliceIcons } from '@apple-pie/icons-native';
+import { Icon, SliceIcons } from '@apple-pie/slice-native';
 
 <Icon
   name={SliceIcons.ui.home}
@@ -43,7 +46,10 @@ dependencies installed and TypeScript available from the repository.
 From the repository root:
 
 ```sh
+npm install
 npm install --prefix native
+npm run lint --prefix native
+npm test --prefix native
 npm run build --prefix native
 ```
 
@@ -51,6 +57,64 @@ The build refreshes generated icons, checks types, and produces `dist/cjs/index.
 `dist/esm/index.mjs`, and declarations under `dist/types`. React, React Native, and
 react-native-svg stay external peer dependencies. The web build is independent.
 
+Native tests use their own `vitest.config.mts` and mocked native components. Install native
+dependencies before running them. Root tests and coverage do not include the native package;
+passing the native unit tests does not replace device rendering checks.
+
+CI runs these checks independently in **Slice Native Lint, Build, Test** on Node 24.
+It uses `npm run lint:ci --prefix native` to check formatting and types without writing
+fixes, then runs native tests, builds, and inspects the package contents. Root dependencies
+provide shared tooling such as Biome; native dependencies are installed separately.
+
 Run `npm pack --dry-run` from `native/` to inspect the publishable files, or
 `npm pack` to create a tarball. The `prepack` hook builds automatically. Build and
 pack from this repository: generation uses the web artwork in `src/components/Icon`.
+
+## Theme tokens
+
+```tsx
+import { Text, View, useColorScheme } from 'react-native';
+import { lightTheme, darkTheme } from '@apple-pie/slice-native/theme';
+
+function Card() {
+  const theme = useColorScheme() === 'dark' ? darkTheme : lightTheme;
+  return (
+    <View style={{
+      backgroundColor: theme.colors['core-surface-primary'],
+      padding: theme.spacing.m,
+      borderRadius: theme.corners['corner-m'],
+      ...theme.shadows['surface-shadow-soft'],
+    }}>
+      <Text style={{ ...theme.type['body-m-regular'], color: theme.colors['core-text-primary'] }}>
+        Hello Slice
+      </Text>
+    </View>
+  );
+}
+```
+
+`lightTheme`, `darkTheme`, `createTypography`, and the `SliceNativeTheme` type are
+also available from the package root. `SliceTheme` aliases the native theme type.
+The dedicated `/theme` entry has no runtime React Native, React, or SVG imports.
+It also exports `coreColors`, `corners`, `spacing`, `elevations`, `type`, and `motion`.
+
+Colors, spacing, corners, and stacking levels are sourced from the web tokens at
+build time and bundled into this package. No web package is needed in an app.
+CSS shadow strings are removed from `colors` and `coreColors`; use `theme.shadows`
+instead. Shadows use native `boxShadow` arrays, which require the New Architecture
+and supported Android versions (outset shadows require Android 9+).
+
+Typography uses a fixed 16dp base for rem conversion and numeric line heights and
+letter spacing. Load Funnel Sans in your app, or replace `theme.type` with
+`createTypography('YourLoadedFontName')`. Exact font weights depend on the font
+and platform; test your loaded font on devices. This package does not load fonts.
+
+Motion durations are milliseconds. Curve tokens are easing functions suitable for
+`Animated.timing`'s `easing` option; the CSS spring is interpolated from its original
+samples, preserving overshoot. They are ordinary JavaScript functions, not Reanimated
+worklets. `elevations` retains the web stacking levels for `zIndex`; do not pass these
+values to Android's `elevation` property.
+
+Build from the repository so shared source tokens are available. All generated
+JavaScript and declarations are included under `dist/`, including declarations for
+shared source types. Changes to web tokens are picked up by the next native build.

package/dist/cjs/index.js

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var reactNative = require('react-native');
 var Svg = require('react-native-svg');
+var theme = require('./theme.js');
 
 /**
  * Static icon registry created once at module load.
@@ -805,6 +806,9 @@ const SliceIcons = {
     },
 };
 
+exports.createTypography = theme.createTypography;
+exports.darkTheme = theme.darkTheme;
+exports.lightTheme = theme.lightTheme;
 exports.Icon = NativeIcon;
 exports.NativeIcon = NativeIcon;
 exports.SliceIcons = SliceIcons;