@apple-pie/slice-native 0.1.6 → 0.1.7

package/README.md

@@ -1,310 +1,187 @@
 # @apple-pie/slice-native
 
-Experimental React Native SVG icons, with the same names and artwork as the web UIKit.
-Includes native light/dark theme tokens and a theme provider.
-It is built and published independently
-of `@apple-pie/slice` and does not require that package at runtime.
+**Alpha software — APIs, styling, and platform behavior may change between releases.**
 
-```tsx
-import { SliceIcon, SliceIcons } from '@apple-pie/slice-native';
-
-<SliceIcon
-  name={SliceIcons.ui.home}
-  size={24}
-  strokeColor="#334155"
-  accessibilityLabel="Go home"
-  onPress={() => navigation.navigate('Home')}
-/>
-```
-
-Supply native SVG props and
-native `style` objects; use `onPress` instead of `onClick`. CSS classes, cursor
-styling (`pointer`), and browser keyboard handlers are not part of this API.
-Use an enclosing React Native `Pressable` when you need a larger touch target or
-button feedback, and mark the icon `accessible={false}` when it is decorative.
-
-Defaults are 20×20, stroke width 1.5, and black/white colors based on the system
-color scheme. Pass `strokeColor` and `coverUp` explicitly to match an app theme.
-`fillColor` retains the web API's meaning: **opacity from 0 to 1**, not a color.
-`fill` enables that opacity (default 0.125 in light mode, 0.2 in dark mode).
-`toggle` selects the on variant when available; unknown names render nothing.
-`disabled` blocks press callbacks and halves the specified opacity.
-
-The package requires React, React Native, and react-native-svg as peers. Install
-the native SVG dependency in the consuming app using its normal native/Expo setup.
-
-## Development
-
-The package manifest and entry point live in `native/`. Icon components, types,
-generated artwork, and tests live in `native/src/components/SliceIcon/`.
-
-From this directory, run `npm run generate` after changing the web icon registry
-or `SliceIcons` constants. Generated files contain native SVG components and have
-no runtime imports from the web UIKit. Run `npm run typecheck` with the peer
-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
-```
-
-The build refreshes generated icons, checks types, and produces `dist/cjs/index.js`,
-`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.
-
-### Native coverage
+A React Native UI kit with themed components, SVG icons, native blur, and Liquid Glass.
+It shares Slice’s visual language with the web UIKit, but is packaged independently
+and does not require `@apple-pie/slice` at runtime.
 
-From the repository root, run:
-
-```sh
-npm run coverage --prefix native
-```
-
-This runs only the native tests and measures runtime TypeScript in native components,
-providers, theme modules, and the package entry point, including generated icon artwork.
-Tests and type-only files are excluded. Shared web sources, build scripts, and dependencies
-are outside this report. Files without tests are included in the coverage calculation.
-
-Open `native/coverage/index.html` for the interactive report. The command also prints
-a terminal summary and writes `native/coverage/lcov.info` and
-`native/coverage/coverage-summary.json` for tooling. Reports are ignored by Git.
-The coverage provider comes from the repository's existing `@vitest/coverage-v8`
-development dependency; install both root and native dependencies as described above.
-
-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`.
-
-To build a local installable tarball without publishing to npm, run from the repository root:
-
-```sh
-npm run pack:tarball --prefix native
-```
+**Blur, gradient masking, Liquid Glass, and device capability detection are built
+into this package and connected directly to native platform code.** No additional
+blur, gradient, masking, or glass libraries are required—including `expo-blur`,
+`expo-linear-gradient`, and `@react-native-masked-view/masked-view`.
 
-The archive is written to `native/pack/apple-pie-slice-native-<version>.tgz`.
-The `pack/` directory is ignored by Git. Install the archive in another project:
+## Installation
 
 ```sh
-npm install /absolute/path/to/uikit/native/pack/apple-pie-slice-native-<version>.tgz
+npm install @apple-pie/slice-native
 ```
 
-Then import from `@apple-pie/slice-native` normally. The consuming app must have
-compatible React, React Native, SVG, and Reanimated peer dependencies configured.
-After library changes, regenerate the tarball and reinstall it in the consuming
-project. Increment the native package version for each shared build to distinguish archives.
-
-## Theme tokens
-
-### Buttons
+Configure the package’s peer dependencies in your app: React 18/19, React Native
+0.80+, `react-native-svg` 15, and Reanimated 4 with its compatible Worklets setup.
+For Expo projects, use `npx expo install` for native peers to select compatible versions.
+These general UI dependencies are separate from the built-in native visual effects.
 
-`SliceButton` uses the shared theme provider.
-It supports `primary` and `secondary` variants, optional left/right icons, disabled
-state, native Pressable props, and Reanimated layout/enter/exit animations.
-Reanimated 4 and its compatible Worklets setup are required in the consuming app.
-Supply an `accessibilityLabel` for icon-only buttons; button icons are decorative.
-
-```tsx
-import { SliceButton, SliceThemeProvider } from '@apple-pie/slice-native';
-
-<SliceThemeProvider>
-  <SliceButton icon="home" onPress={() => navigation.navigate('Home')}>
-    Go home
-  </SliceButton>
-</SliceThemeProvider>
-```
+Native components require the New Architecture. iOS builds require Xcode 26+.
+Install iOS pods and rebuild your app after installing or updating the package.
+Expo apps need a development build; the custom native components are not available
+in Expo Go. Restarting Metro alone does not register new native code.
 
-Wrap the app in `SliceThemeProvider` and read its theme with `useSliceTheme`:
+## Quick start
 
 ```tsx
-import { SliceThemeProvider, useSliceTheme } from '@apple-pie/slice-native';
-
-function App() {
-  return <SliceThemeProvider>{/* app content */}</SliceThemeProvider>;
-}
-```
-
-The provider follows the system appearance by default. Pass `preference="light"`
-or `preference="dark"` to override it. For an app-controlled preference, pass
-`preference` and `onPreferenceChange`; the app owns updating and persisting that
-value. `useSliceContext` exposes `theme`, `mode`, `preference`, and the optional
-`setPreference` callback. Both hooks require a surrounding `SliceThemeProvider`.
-Use this exported provider and its hooks together so app and library components
-share the same context.
-
-```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;
+import { View } from 'react-native';
+import {
+  SliceButton,
+  SliceIcons,
+  SliceTextInput,
+  SliceThemeProvider,
+} from '@apple-pie/slice-native';
+
+export default function App() {
   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>
+    <SliceThemeProvider>
+      <View style={{ padding: 24, gap: 16 }}>
+        <SliceTextInput accessibilityLabel="Search tasks" placeholder="Search…" />
+        <SliceButton icon={SliceIcons.ui.home} onPress={() => console.log('Home')}>
+          Go home
+        </SliceButton>
+      </View>
+    </SliceThemeProvider>
   );
 }
 ```
 
-`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`.
+## Components
 
-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+).
+| Component | Summary |
+| --- | --- |
+| `SliceButton` | Primary/secondary buttons, optional icons, disabled states, Reanimated transitions, and optional Liquid Glass backgrounds. |
+| `SliceTextInput` | Themed native input with icons, optional focus control, focus callbacks, and opt-in clearing on blur. |
+| `StyledText` | Theme-based typography presets with native text props. |
+| `SliceIcon` / `SliceIcons` | Native SVG artwork and typed icon names shared with the web UIKit. Supports toggles, fills, sizing, and press handlers. |
+| `SliceLiquidGlassView` | Native glass container with children, tint, interaction feedback, and rounded corners. |
+| `SliceBackgroundBlur` | Background blur overlay with an optional directional fade on iOS. |
 
-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.
+Buttons and inputs support `size` (`s`, `m`, `l`, or a number), `borderRadius`
+(`pill`, `rectangular`, or a number), `borderWidth`, `borderColor`, and
+`backgroundColor`. Sizes define minimum heights, allowing room for larger text.
+Inputs forward `style` to the underlying text field. Buttons expose `animatedStyle`
+for their wrapper.
 
-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.
+`SliceButton`, `SliceTextInput`, and `StyledText` use `SliceThemeProvider`. Give
+inputs and icon-only buttons an accessible name. Icons inside these components
+are decorative; standalone icons can use `accessibilityLabel` and `onPress`.
+For `SliceIcon`, `fillColor` means fill opacity, not a color value.
 
-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.
+### Built-in Liquid Glass and blur
 
-## Themed styles hook
+| Effect | iOS | Android | Web |
+| --- | --- | --- | --- |
+| `SliceLiquidGlassView` | Native Liquid Glass on iOS 26+; system blur on older iOS. | Tinted color fallback. | Tinted color fallback. |
+| `SliceBackgroundBlur` | Native backdrop blur; optional directional fade. | Uniform backdrop blur when the required API is present (SDK 37.2+) and hardware acceleration is available; otherwise a color fallback. | Color fallback. |
 
-Define the style factory outside the component so its identity stays stable:
+The implementations ship with the package: Swift/UIKit and Fabric on iOS, and Java
+platform code on Android. Consumers do not need to install another effects library.
+iOS respects Reduce Transparency and renders a fallback when it is enabled.
 
 ```tsx
-import { StyleSheet, View } from 'react-native';
-import { useCreateThemedStyles, type SliceNativeTheme } from '@apple-pie/slice-native';
-
-const createStyles = (theme: SliceNativeTheme) => StyleSheet.create({
-  container: {
-    backgroundColor: theme.colors['core-surface-primary'],
-    padding: theme.spacing.m,
-  },
-  divider: { height: 1 }, // Styles do not have to use the theme.
-});
-
-function Card() {
-  const styles = useCreateThemedStyles(createStyles);
-  return <View style={styles.container} />;
-}
-```
-
-The component must be inside `SliceThemeProvider`. Style keys and property types
-are inferred from the factory return value. The hook recalculates when the theme
-or factory changes; an inline factory works but is recreated every render. If
-styles depend on component props, wrap the factory in `useCallback` with those
-props in its dependency list. The hook accepts ordinary native style objects too;
-calling `StyleSheet.create` inside the factory is optional.
-
-## Typography utility
+import { SliceBackgroundBlur, SliceLiquidGlassView } from '@apple-pie/slice-native';
 
-`lineHeightTextStyle` derives an absolute line height and returns a new style object:
+// Place over background content; fills its parent by default.
+<SliceBackgroundBlur blurIntensity={20} fadeStop={0.5} direction="down" />
 
-```tsx
-import { lineHeightTextStyle } from '@apple-pie/slice-native';
+<SliceLiquidGlassView cornerRadius={24} glassStyle="regular" style={{ padding: 20 }}>
+  {/* Foreground content */}
+</SliceLiquidGlassView>
 
-const label = lineHeightTextStyle({ fontSize: 20, color: '#123456' }, 1.5);
-// { fontSize: 20, color: '#123456', lineHeight: 30 }
+<SliceButton liquidGlassBackground={{ glassStyle: 'clear', fallbackColor: '#eeeeee' }}>
+  Continue
+</SliceButton>
 ```
 
-The defaults are a 16 font size and a 1.2 multiplier. The multiplier must be a
-finite number from 0 through 2. Existing line height is replaced; the input is unchanged.
+Blur defaults to intensity `12` and `fadeStop={0}`, which renders uniform blur
+without a mask. A positive `fadeStop` (0–1) enables fading on iOS. Directions are
+`down`, `up`, `left`, and `right`, from transparent toward full blur. Android
+ignores fading props. This fades the visibility of a uniform blur rather than
+varying the blur radius across the view.
+
+Use `cornerRadius` to control a glass container’s shape. Supported glass buttons
+keep their background transparent; unsupported devices use their solid background
+or configured fallback. Both effect components accept `fallbackColor`. Avoid opaque
+content over glass when you want the backdrop to remain visible. Android backdrop
+blur samples the same window; separately composed surfaces such as video may differ.
 
-## Text input
+## Hooks, provider, and theme
 
-`SliceTextInput` and `SliceTextInputProps` are exported from the package root.
-Use it within `SliceThemeProvider` and give each field an accessible name that
-identifies its purpose, rather than relying on a placeholder alone:
+| Export | Purpose |
+| --- | --- |
+| `SliceThemeProvider` | Light/dark themes; follows the system by default. Use `preference="light"` or `"dark"` to override. |
+| `useSliceTheme()` | Returns the active theme. |
+| `useSliceContext()` | Returns the theme, mode, preference, and optional preference setter. |
+| `useCreateThemedStyles(factory)` | Creates memoized styles from the active theme. Define the factory outside the component for stable reuse. |
+| `useDeviceCapabilities()` | Reports native effect support, platform, OS/API version, and device information. Does not require the theme provider. |
 
 ```tsx
-<SliceTextInput
-  accessibilityLabel="Email address"
-  accessibilityHint="Used to send your receipt"
-  placeholder="you@example.com"
-  keyboardType="email-address"
-  autoCapitalize="none"
-  value={email}
-  onChangeText={setEmail}
-/>
+const {
+  supportsLiquidGlass,
+  supportsNativeBlur,
+  platform,
+  iosVersion,
+  androidSdkVersion,
+  deviceName,
+  deviceModel,
+} = useDeviceCapabilities();
 ```
 
-Native TextInput props and styles are forwarded. Icons are decorative and hidden
-from accessibility focus. Font scaling remains enabled by default, and the field
-uses a minimum height rather than a fixed height. Check large text and multiline
-layouts on devices with VoiceOver/TalkBack enabled.
+Capability flags describe API availability, not live accessibility settings or
+per-view rendering conditions. They return `false` when the native module is absent.
+`iosVersion` is a full version string; `androidSdkVersion` is an integer API level
+without minor-release information. Use the support flags for effects decisions.
+Unavailable fields are `null`. iOS device names may be generic; its model is a
+hardware identifier such as `iPhone17,1`, not a marketing name. Android reports
+the system model name/code.
 
-`focused` optionally requests native focus or blur; omit it for normal native
-focus handling. `didFocus` reports focus changes alongside `onFocus`/`onBlur`.
-Icons hide on actual focus unless `hideIconOnFocus={false}`. `blurClears` defaults
-to false; when enabled, blur clears the native input and calls `onChangeText('')`
-so controlled consumers can update their value. Initial values are never cleared
-on mount.
+`lightTheme`, `darkTheme`, and `createTypography` are exported alongside theme types.
+Themes include colors, spacing, corners, typography, shadows, stacking levels, and
+motion. The `/theme` entry also exposes the underlying token groups. Typography
+uses Funnel Sans by default; load it in your app or use `createTypography` with
+your own loaded font. Fonts are not loaded by the package.
 
-## Package entry points and tree shaking
+## Utilities and entry points
 
-The base barrels under `native/src` are public package entry points:
+| Utility | Purpose |
+| --- | --- |
+| `sizeToNumber(size)` | Resolves size presets to points: `s` = 40, `m` = 48, `l` = 56. |
+| `borderRadiusToNumber(radius)` | Resolves `pill` to 1000, `rectangular` to 4, and numeric radii to nonnegative points. |
+| `lineHeightTextStyle(style, multiplier)` | Returns a new text style with an absolute line height. |
 
-```tsx
-import { SliceButton, SliceTextInput } from '@apple-pie/slice-native/components';
-import { useCreateThemedStyles } from '@apple-pie/slice-native/hooks';
-import { SliceThemeProvider } from '@apple-pie/slice-native/providers';
-import { lineHeightTextStyle } from '@apple-pie/slice-native/utils';
-import { lightTheme, darkTheme } from '@apple-pie/slice-native/theme';
-```
+Public types include `Size`, `BorderRadius`, `LiquidGlassBackground`,
+`DeviceCapabilities`, component props, and theme/provider types.
 
-Root imports remain supported. Each entry provides ESM, CommonJS, and TypeScript
-declarations. The build preserves individual modules and the package declares
-`sideEffects: false` so compatible consuming bundlers can remove unused exports.
-Actual tree shaking depends on the consuming app's bundler and configuration;
-CommonJS consumers should not assume the same elimination as ESM consumers.
-The theme and utility entry points do not import React, SVG, or Reanimated at runtime.
+Import from the package root or the dedicated `/components`, `/hooks`, `/providers`,
+`/theme`, and `/utils` entry points. ESM, CommonJS, TypeScript declarations, and
+Metro platform files are included. Theme tokens and utilities can be used independently
+of the component runtime.
 
-Run `npm run test:package --prefix native` to build and verify export targets and
-representative ESM consumer bundles. These checks verify that selecting only the
-line-height utility removes other package code and that hooks do not pull in SVG
-or Reanimated.
-
-## Native Storybook (browser documentation)
+## Development
 
-From the repository root, after installing both root and native dependencies:
+From the repository root:
 
 ```sh
-npm run storybook:native
-npm run typecheck:storybook:native
-npm run build-storybook:native
+npm install
+npm install --prefix native
+npm run lint:ci --prefix native
+npm run coverage --prefix native
+npm run test:package --prefix native
+npm run pack:tarball --prefix native
 ```
 
-The development server uses port 6007. The static build goes to
-`storybook-native-static/`, independently of the existing React Storybook.
-Stories live in `native/stories/`; configuration lives in `.storybook-native/`.
-The theme toolbar uses the native provider. React Native Web, SVG's web rendering,
-and Reanimated's web implementation render the actual components; these are not
-native-platform screenshots. Browser stories supplement device testing.
+Builds regenerate and automatically format native icons from the shared web artwork,
+check types, and emit the package distributions. The tarball is written to
+`native/pack/apple-pie-slice-native-<version>.tgz`; reinstall it and rebuild the
+consuming native app when testing platform changes.
 
-Deploy with `Dockerfile.react-native` and target `react-native-docs`, as described
-in `deployment/README.md` at the repository root.
+Browser documentation runs with `npm run storybook:native` from the repository root.
+It previews web fallbacks; native effects need simulator/device checks. Native unit
+coverage enforces a 95% overall threshold and does not measure Swift/Java rendering.

package/SliceNative.podspec

@@ -0,0 +1,24 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name = 'SliceNative'
+  s.module_name = 'SliceNative'
+  s.version = package['version']
+  s.summary = package['description']
+  s.homepage = 'https://github.com/uris/slice'
+  s.license = package['license']
+  s.authors = package['author']
+  s.source = { :git => 'https://github.com/uris/slice.git', :tag => "native-v#{s.version}" }
+  s.platforms = { :ios => min_ios_version_supported }
+  s.swift_version = '5.0'
+  s.requires_arc = true
+  s.source_files = 'platform/ios/**/*.{h,m,mm,swift}'
+  # Keep C++ React headers out of the module imported by the Swift compiler.
+  s.private_header_files = 'platform/ios/RCT*View.h', 'platform/ios/SliceDeviceCapabilities.h'
+  s.frameworks = 'UIKit'
+  s.pod_target_xcconfig = { 'DEFINES_MODULE' => 'YES' }
+
+  install_modules_dependencies(s)
+end

package/dist/cjs/components.js

@@ -5,6 +5,8 @@ var icons = require('./src/components/SliceIcon/icons.js');
 var SliceText = require('./src/components/SliceText/SliceText.js');
 var SliceButton = require('./src/components/SliceButton/SliceButton.js');
 var SliceTextInput = require('./src/components/SliceTextInput/SliceTextInput.js');
+var SliceLiquidGlassView = require('./src/components/SliceLiquidGlassView/SliceLiquidGlassView.js');
+var SliceBackgroundBlur = require('./src/components/SliceBackgroundBlur/SliceBackgroundBlur.js');
 
 
 
@@ -13,3 +15,5 @@ exports.SliceIcons = icons.SliceIcons;
 exports.StyledText = SliceText.StyledText;
 exports.SliceButton = SliceButton.SliceButton;
 exports.SliceTextInput = SliceTextInput.SliceTextInput;
+exports.SliceLiquidGlassView = SliceLiquidGlassView.SliceLiquidGlassView;
+exports.SliceBackgroundBlur = SliceBackgroundBlur.SliceBackgroundBlur;

package/dist/cjs/hooks.js

@@ -1,7 +1,9 @@
 'use strict';
 
 var useCreateThemedStyles = require('./src/hooks/useCreateThemedStyles/useCreateThemedStyles.js');
+var useDeviceCapabilities = require('./src/hooks/useDeviceCapabilities/useDeviceCapabilities.js');
 
 
 
 exports.useCreateThemedStyles = useCreateThemedStyles.useCreateThemedStyles;
+exports.useDeviceCapabilities = useDeviceCapabilities.useDeviceCapabilities;

package/dist/cjs/index.js

@@ -5,10 +5,14 @@ var icons = require('./src/components/SliceIcon/icons.js');
 var SliceText = require('./src/components/SliceText/SliceText.js');
 var SliceButton = require('./src/components/SliceButton/SliceButton.js');
 var SliceTextInput = require('./src/components/SliceTextInput/SliceTextInput.js');
+var SliceLiquidGlassView = require('./src/components/SliceLiquidGlassView/SliceLiquidGlassView.js');
+var SliceBackgroundBlur = require('./src/components/SliceBackgroundBlur/SliceBackgroundBlur.js');
 var theme = require('./theme.js');
 var SliceThemeProvider = require('./src/providers/SliceThemeProvider.js');
 var useCreateThemedStyles = require('./src/hooks/useCreateThemedStyles/useCreateThemedStyles.js');
+var useDeviceCapabilities = require('./src/hooks/useDeviceCapabilities/useDeviceCapabilities.js');
 var typography = require('./src/utils/typography/typography.js');
+var sizes = require('./src/utils/sizes/sizes.js');
 
 
 
@@ -17,6 +21,8 @@ exports.SliceIcons = icons.SliceIcons;
 exports.StyledText = SliceText.StyledText;
 exports.SliceButton = SliceButton.SliceButton;
 exports.SliceTextInput = SliceTextInput.SliceTextInput;
+exports.SliceLiquidGlassView = SliceLiquidGlassView.SliceLiquidGlassView;
+exports.SliceBackgroundBlur = SliceBackgroundBlur.SliceBackgroundBlur;
 exports.createTypography = theme.createTypography;
 exports.darkTheme = theme.darkTheme;
 exports.lightTheme = theme.lightTheme;
@@ -24,4 +30,7 @@ exports.SliceThemeProvider = SliceThemeProvider.SliceThemeProvider;
 exports.useSliceContext = SliceThemeProvider.useSliceContext;
 exports.useSliceTheme = SliceThemeProvider.useSliceTheme;
 exports.useCreateThemedStyles = useCreateThemedStyles.useCreateThemedStyles;
+exports.useDeviceCapabilities = useDeviceCapabilities.useDeviceCapabilities;
 exports.lineHeightTextStyle = typography.lineHeightTextStyle;
+exports.borderRadiusToNumber = sizes.borderRadiusToNumber;
+exports.sizeToNumber = sizes.sizeToNumber;

package/dist/cjs/src/components/SliceBackgroundBlur/SliceBackgroundBlur.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactNative = require('react-native');
+
+/** Web/other-platform fallback. Metro selects the native implementation on iOS/Android. */
+function SliceBackgroundBlur({ style, fallbackColor = 'rgba(128, 128, 128, 0.18)', }) {
+    return jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: [reactNative.StyleSheet.absoluteFill, style, { backgroundColor: fallbackColor }] });
+}
+
+exports.SliceBackgroundBlur = SliceBackgroundBlur;