@apple-pie/slice-native 0.1.6 → 0.1.7

package/dist/react-native/native/src/components/SliceIcon/icons.js

@@ -0,0 +1,140 @@
+// Generated by native/scripts/generate-icons.mjs from src/components/Icon. Do not edit directly.
+export const SliceIcons = {
+    arrows: {
+        arrowLeft: 'arrow left',
+        arrowRight: 'arrow right',
+        arrowUp: 'arrow up',
+        arrowDown: 'arrow down',
+        chevronDown: 'chevron down',
+        chevronUp: 'chevron up',
+        navigateRight: 'navigate right',
+        navigateLeft: 'navigate left',
+        share: 'share',
+    },
+    selection: {
+        check: 'check',
+        checkCircle: 'check circle',
+        checkbox: 'checkbox',
+        checkboxChecked: 'checkbox checked',
+        checkboxPartial: 'checkbox partial',
+        circle: 'circle',
+        circleFill: 'circle fill',
+        plus: 'plus',
+        plusCircle: 'plus circle',
+    },
+    Messaging: {
+        chat: 'chat',
+        mail: 'mail',
+        notification: 'notification',
+        inbox: 'inbox',
+        like: 'like',
+        unlike: 'unlike',
+        at: '@',
+    },
+    media: {
+        camera: 'camera',
+        focus: 'focus',
+        mic: 'mic',
+        micMuted: 'mic muted',
+        video: 'video',
+        videoOff: 'video off',
+        download: 'download',
+        upload: 'upload',
+        speaker: 'speaker',
+        speakerMuted: 'speaker muted',
+        speakerHigh: 'speaker high',
+        speakerLow: 'speaker low',
+        play: 'play',
+        playCircle: 'play circle',
+        pause: 'pause',
+        pauseCircle: 'pause circle',
+    },
+    files: {
+        document: 'document',
+        documentEditor: 'document editor',
+        textDocument: 'text document',
+    },
+    people: {
+        people: 'people',
+        person: 'person',
+        talk: 'talk',
+    },
+    business: {
+        briefcase: 'briefcase',
+        dollar: 'dollar',
+        invoice: 'invoice',
+        payment: 'payment',
+        wallet: 'wallet',
+        laptop: 'laptop',
+    },
+    charts: {
+        barChart: 'bar chart',
+        chart: 'chart',
+        chartArrow: 'chart arrow',
+    },
+    status: {
+        alert: 'alert',
+        exclamation: 'exclamation',
+        help: 'help',
+        info: 'info',
+        issue: 'issue',
+        lightBulb: 'light bulb',
+        target: 'target',
+        openCircle: 'open circle',
+    },
+    brands: {
+        apple: 'apple',
+        google: 'google',
+        googleMono: 'google mono',
+        linkedin: 'linkedin',
+        github: 'github',
+        npm: 'npm',
+        openAI: 'openAI',
+        android: 'android',
+    },
+    edit: {
+        edit: 'edit',
+        trashBin: 'trash bin',
+        copy: 'copy',
+        filter: 'filter',
+        highlight: 'highlight',
+        undo: 'undo',
+        concise: 'concise',
+        expanded: 'expanded',
+        moderate: 'moderate',
+        recent: 'recent',
+    },
+    typography: {
+        fontLarger: 'font larger',
+        fontSmaller: 'font smaller',
+        characterBeam: 'character beam',
+    },
+    weather: {
+        sun: 'sun',
+        moonFull: 'moon full',
+    },
+    ai: {
+        sparkle: 'sparkle',
+        wand: 'wand',
+    },
+    ui: {
+        attach: 'attach',
+        blank: 'blank',
+        book: 'book',
+        globeLocation: 'globe location',
+        heart: 'heart',
+        stop: 'stop',
+        search: 'search',
+        settings: 'settings',
+        view: 'view',
+        refresh: 'refresh',
+        home: 'home',
+        menu: 'menu',
+        more: 'more',
+        sidebar: 'sidebar',
+        sidebarSplit: 'sidebar split',
+        keyboard: 'keyboard',
+        x: 'x',
+        fullscreen: 'fullscreen',
+    },
+};

package/dist/react-native/native/src/components/SliceIcon/index.js

@@ -0,0 +1,2 @@
+export { SliceIcon } from './SliceIcon';
+export { SliceIcons } from './icons';

package/dist/react-native/native/src/components/SliceLiquidGlassView/SliceLiquidGlassView.ios.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import NativeLiquidGlassView from '../../specs/LiquidGlassNativeComponent';
+export const SliceLiquidGlassView = forwardRef(function SliceLiquidGlassView({ glassStyle = 'regular', interactive = false, cornerRadius = 24, fallbackColor: _fallbackColor, style, ...props }, ref) {
+    return (_jsx(NativeLiquidGlassView, { ...props, ref: ref, glassStyle: glassStyle, interactive: interactive, cornerRadius: cornerRadius, style: [style, { borderRadius: cornerRadius }] }));
+});

package/dist/react-native/native/src/components/SliceLiquidGlassView/SliceLiquidGlassView.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+/** Android/web fallback. Metro selects SliceLiquidGlassView.ios on iOS. */
+export const SliceLiquidGlassView = forwardRef(function SliceLiquidGlassView({ glassStyle: _glassStyle, glassTintColor: _glassTintColor, interactive: _interactive, cornerRadius = 24, fallbackColor = 'rgba(128, 128, 128, 0.18)', style, ...props }, ref) {
+    return (_jsx(View, { ...props, ref: ref, style: [{ backgroundColor: fallbackColor }, style, { borderRadius: cornerRadius, overflow: 'hidden' }] }));
+});

package/dist/react-native/native/src/components/SliceLiquidGlassView/_types.js

@@ -0,0 +1 @@
+export {};

package/dist/react-native/native/src/components/SliceLiquidGlassView/index.js

@@ -0,0 +1 @@
+export { SliceLiquidGlassView } from './SliceLiquidGlassView';

package/dist/react-native/native/src/components/SliceText/SliceText.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'react-native';
+import { useSliceTheme } from '../../providers/SliceThemeProvider';
+/**
+ * Utility wrapper around text component for easier styling of text using slice theme
+ */
+export function StyledText(props) {
+    const { textStyle, textColor, style, singleLine, children, ...rest } = props;
+    const { type, colors } = useSliceTheme();
+    const textStyles = textStyle ? type[textStyle] : undefined;
+    const color = { color: textColor ? colors[textColor] : colors['core-text-primary'] };
+    const fontSize = textStyles?.fontSize ?? 16;
+    const height = typeof singleLine === 'number' ? singleLine : 1.2;
+    const lineHeight = { lineHeight: singleLine ? height * fontSize : textStyles?.lineHeight };
+    return (_jsx(Text, { ...rest, numberOfLines: singleLine ? 1 : rest.numberOfLines, style: [textStyles, color, lineHeight, style], children: children }));
+}

package/dist/react-native/native/src/components/SliceText/_types.js

@@ -0,0 +1 @@
+export {};

package/dist/react-native/native/src/components/SliceText/index.js

@@ -0,0 +1 @@
+export { StyledText } from './SliceText';

package/dist/react-native/native/src/components/SliceTextInput/SliceTextInput.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { StyleSheet, TextInput, View } from 'react-native';
+import Reanimated from 'react-native-reanimated';
+import { useCreateThemedStyles } from '../../hooks';
+import { useSliceTheme } from '../../providers';
+import { borderRadiusToNumber, lineHeightTextStyle, sizeToNumber } from '../../utils';
+import { SliceIcon } from '../SliceIcon';
+export function SliceTextInput(props) {
+    const themedStyles = useCreateThemedStyles(styles);
+    const { colors } = useSliceTheme();
+    const { didFocus, layout, icon, focused, blurClears = false, iconColor, iconSize = 24, placeholderTextColor = themedStyles.placeHolder.color, hideIconOnFocus = true, style, onFocus, onBlur, onChangeText, accessibilityState, borderRadius = 'pill', borderWidth = 1, borderColor = colors['core-outline-secondary'], backgroundColor, size = 'm', ...rest } = props;
+    const inputRef = useRef(null);
+    const [isFocused, setIsFocused] = useState(false);
+    // Only drive native focus when the caller explicitly supplies a preference.
+    useEffect(() => {
+        if (focused === undefined || !inputRef.current)
+            return;
+        if (focused && !inputRef.current.isFocused())
+            inputRef.current.focus();
+        else if (!focused && inputRef.current.isFocused())
+            inputRef.current.blur();
+    }, [focused]);
+    const iconColorComputed = useMemo(() => {
+        if (iconColor)
+            return iconColor;
+        return isFocused ? themedStyles.icon.color : placeholderTextColor;
+    }, [themedStyles, isFocused, iconColor, placeholderTextColor]);
+    const showIcon = useMemo(() => {
+        if (!icon)
+            return false;
+        return !(isFocused && hideIconOnFocus);
+    }, [isFocused, hideIconOnFocus, icon]);
+    const padding = useMemo(() => {
+        return StyleSheet.create({
+            padding: { paddingRight: 18, paddingLeft: showIcon ? 0 : 18 },
+        });
+    }, [showIcon]);
+    const inputSize = useMemo(() => {
+        return StyleSheet.create({
+            size: {
+                minHeight: sizeToNumber(size),
+            },
+        });
+    }, [size]);
+    const borderStyles = useMemo(() => {
+        return StyleSheet.create({
+            border: {
+                borderWidth: Number.isFinite(borderWidth) ? Math.max(0, borderWidth) : 0,
+                borderColor,
+            },
+        });
+    }, [borderColor, borderWidth]);
+    const cornerRadius = useMemo(() => {
+        return StyleSheet.create({
+            borderRadius: {
+                borderRadius: borderRadiusToNumber(borderRadius),
+            },
+        });
+    }, [borderRadius]);
+    const bgColor = useMemo(() => {
+        return StyleSheet.create({
+            backgroundColor: { backgroundColor: backgroundColor ?? colors['core-surface-primary'] },
+        });
+    }, [backgroundColor, colors]);
+    return (_jsxs(Reanimated.View, { style: [
+            themedStyles.inputWrapper,
+            inputSize.size,
+            cornerRadius.borderRadius,
+            borderStyles.border,
+            bgColor.backgroundColor,
+        ], layout: layout, children: [showIcon && (_jsx(View, { style: [themedStyles.icon, { height: iconSize, width: iconSize }], children: _jsx(SliceIcon, { name: icon, strokeColor: iconColorComputed, size: iconSize, accessible: false, pointerEvents: "none" }) })), _jsx(TextInput, { ...rest, ref: inputRef, style: [themedStyles.inputFieldView, padding.padding, style], accessibilityState: {
+                    ...accessibilityState,
+                    disabled: rest.editable === false || accessibilityState?.disabled,
+                }, onChangeText: onChangeText, placeholderTextColor: placeholderTextColor, onFocus: (event) => {
+                    setIsFocused(true);
+                    didFocus?.(true);
+                    onFocus?.(event);
+                }, onBlur: (event) => {
+                    setIsFocused(false);
+                    if (blurClears) {
+                        inputRef.current?.clear();
+                        onChangeText?.('');
+                    }
+                    didFocus?.(false);
+                    onBlur?.(event);
+                } })] }));
+}
+const styles = (theme) => StyleSheet.create({
+    icon: {
+        marginLeft: 16,
+        color: theme.name === 'lightMode' ? theme.colors['core-icon-primary'] : theme.colors['core-link-primary'],
+    },
+    inputWrapper: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        gap: 8,
+        zIndex: 2,
+    },
+    inputFieldView: {
+        ...lineHeightTextStyle(theme.type['body-xl-bold']),
+        color: theme.colors['core-text-primary'],
+        flex: 1,
+        zIndex: 2,
+    },
+    placeHolder: {
+        color: theme.colors['core-text-tertiary'],
+    },
+});

package/dist/react-native/native/src/components/SliceTextInput/_types.js

@@ -0,0 +1 @@
+export {};

package/dist/react-native/native/src/components/SliceTextInput/index.js

@@ -0,0 +1 @@
+export { SliceTextInput } from './SliceTextInput';

package/dist/react-native/native/src/components/index.js

@@ -0,0 +1,6 @@
+export { SliceIcon, SliceIcons } from './SliceIcon';
+export { StyledText } from './SliceText';
+export { SliceButton } from './SliceButton';
+export { SliceTextInput } from './SliceTextInput';
+export { SliceLiquidGlassView } from './SliceLiquidGlassView';
+export { SliceBackgroundBlur } from './SliceBackgroundBlur';

package/dist/react-native/native/src/hooks/index.js

@@ -0,0 +1,2 @@
+export { useCreateThemedStyles } from './useCreateThemedStyles';
+export { useDeviceCapabilities } from './useDeviceCapabilities';

package/dist/react-native/native/src/hooks/useCreateThemedStyles/index.js

@@ -0,0 +1 @@
+export { useCreateThemedStyles } from './useCreateThemedStyles';

package/dist/react-native/native/src/hooks/useCreateThemedStyles/useCreateThemedStyles.js

@@ -0,0 +1,8 @@
+import { useMemo } from 'react';
+import { useSliceTheme } from '../../providers/SliceThemeProvider';
+/** Resolve native styles using the current provider theme. Keep the factory stable
+ * (outside the component, or with useCallback) to reuse styles across renders. */
+export function useCreateThemedStyles(styles) {
+    const sliceTheme = useSliceTheme();
+    return useMemo(() => styles(sliceTheme), [sliceTheme, styles]);
+}

package/dist/react-native/native/src/hooks/useDeviceCapabilities/_types.js

@@ -0,0 +1 @@
+export {};

package/dist/react-native/native/src/hooks/useDeviceCapabilities/index.js

@@ -0,0 +1 @@
+export { useDeviceCapabilities } from './useDeviceCapabilities';

package/dist/react-native/native/src/hooks/useDeviceCapabilities/useDeviceCapabilities.js

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { Platform } from 'react-native';
+/** Unsupported-platform fallback. Metro selects the native hook on iOS/Android. */
+export function useDeviceCapabilities() {
+    return useMemo(() => ({
+        platform: Platform.OS,
+        iosVersion: null,
+        androidSdkVersion: null,
+        deviceName: null,
+        deviceModel: null,
+        supportsLiquidGlass: false,
+        supportsNativeBlur: false,
+    }), []);
+}

package/dist/react-native/native/src/hooks/useDeviceCapabilities/useDeviceCapabilities.native.js

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import { Platform } from 'react-native';
+import NativeDeviceCapabilities from '../../specs/NativeDeviceCapabilities';
+/**
+ * Reports native API availability. Both values are false on unsupported platforms
+ * or when the package's native module is absent. Accessibility preferences and
+ * per-view hardware acceleration can still cause components to use their fallback.
+ */
+export function useDeviceCapabilities() {
+    return useMemo(() => {
+        const platform = Platform.OS;
+        const native = platform === 'ios' || platform === 'android' ? NativeDeviceCapabilities?.getConstants() : null;
+        return {
+            platform,
+            iosVersion: platform === 'ios' ? String(Platform.Version) : null,
+            androidSdkVersion: platform === 'android' ? Platform.Version : null,
+            deviceName: native?.deviceName ?? null,
+            deviceModel: native?.deviceModel ?? null,
+            supportsLiquidGlass: native?.supportsLiquidGlass ?? false,
+            supportsNativeBlur: native?.supportsNativeBlur ?? false,
+        };
+    }, []);
+}

package/dist/react-native/native/src/index.js

@@ -0,0 +1,6 @@
+export { SliceIcon, SliceIcons, StyledText, SliceButton, SliceTextInput, SliceLiquidGlassView } from './components';
+export { lightTheme, darkTheme, createTypography } from './theme';
+export { SliceThemeProvider, useSliceTheme, useSliceContext } from './providers';
+export { useCreateThemedStyles, useDeviceCapabilities } from './hooks';
+export { lineHeightTextStyle, sizeToNumber, borderRadiusToNumber } from './utils';
+export { SliceBackgroundBlur } from './components/SliceBackgroundBlur';

package/dist/react-native/native/src/providers/SliceThemeProvider.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+import { useColorScheme } from 'react-native';
+import { darkTheme, lightTheme } from '../theme';
+const ThemeContext = createContext(undefined);
+export function SliceThemeProvider({ preference = 'system', onPreferenceChange = undefined, children, }) {
+    const deviceMode = useColorScheme();
+    const mode = preference === 'system' ? (deviceMode === 'dark' ? 'dark' : 'light') : preference;
+    const value = useMemo(() => ({
+        theme: mode === 'dark' ? darkTheme : lightTheme,
+        mode,
+        preference,
+        setPreference: onPreferenceChange,
+    }), [mode, preference, onPreferenceChange]);
+    return _jsx(ThemeContext.Provider, { value: value, children: children });
+}
+export function useSliceContext() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useSliceContext must be used within SliceThemeProvider');
+    }
+    return context;
+}
+export function useSliceTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useSliceTheme must be used within SliceThemeProvider');
+    }
+    return context.theme;
+}

package/dist/react-native/native/src/providers/index.js

@@ -0,0 +1 @@
+export { SliceThemeProvider, useSliceTheme, useSliceContext } from './SliceThemeProvider';

package/dist/react-native/native/src/specs/BackgroundBlurNativeComponent.ts

@@ -0,0 +1,16 @@
+import {
+	type CodegenTypes,
+	type ColorValue,
+	type HostComponent,
+	type ViewProps,
+	codegenNativeComponent,
+} from 'react-native';
+
+export interface NativeProps extends ViewProps {
+	blurIntensity?: CodegenTypes.WithDefault<CodegenTypes.Double, 12>;
+	fadeStop?: CodegenTypes.WithDefault<CodegenTypes.Double, 0>;
+	direction?: CodegenTypes.WithDefault<'down' | 'up' | 'left' | 'right', 'down'>;
+	fallbackColor?: ColorValue;
+}
+
+export default codegenNativeComponent<NativeProps>('SliceBackgroundBlur') as HostComponent<NativeProps>;

package/dist/react-native/native/src/specs/LiquidGlassNativeComponent.ts

@@ -0,0 +1,18 @@
+import {
+	type CodegenTypes,
+	type ColorValue,
+	type HostComponent,
+	type ViewProps,
+	codegenNativeComponent,
+} from 'react-native';
+
+export interface NativeProps extends ViewProps {
+	glassStyle?: CodegenTypes.WithDefault<'regular' | 'clear', 'regular'>;
+	glassTintColor?: ColorValue;
+	interactive?: CodegenTypes.WithDefault<boolean, false>;
+	cornerRadius?: CodegenTypes.WithDefault<CodegenTypes.Double, 24>;
+}
+
+export default codegenNativeComponent<NativeProps>('SliceLiquidGlassView', {
+	excludedPlatforms: ['android'],
+}) as HostComponent<NativeProps>;

package/dist/react-native/native/src/specs/NativeDeviceCapabilities.ts

@@ -0,0 +1,13 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+	readonly getConstants: () => {
+		supportsLiquidGlass: boolean;
+		supportsNativeBlur: boolean;
+		deviceName: string;
+		deviceModel: string;
+	};
+}
+
+export default TurboModuleRegistry.get<Spec>('SliceDeviceCapabilities');

package/dist/react-native/native/src/theme/index.js

@@ -0,0 +1,69 @@
+import { dark, light, coreColors as webCore } from '../../../src/theme/colors/colors';
+import { corners } from '../../../src/theme/corners/corners';
+// Import token modules directly: web barrel exports can initialize browser stores.
+import { elevations } from '../../../src/theme/elevations/elevations';
+import { motion as webMotion } from '../../../src/theme/motion/motion';
+import { spacing } from '../../../src/theme/spacing/spacing';
+import { type as webType } from '../../../src/theme/type/type';
+import { easing } from './motion';
+export { corners, spacing, elevations };
+const { 'surface-shadow-soft-light': _sl, 'surface-shadow-soft-dark': _sd, 'surface-shadow-strong-light': _hl, 'surface-shadow-strong-dark': _hd, ...palette } = webCore;
+export const coreColors = palette;
+/** Uses a 16dp base for the web rem scale. Load this font in the consuming app. */
+export function createTypography(fontFamily = 'Funnel Sans') {
+    return Object.fromEntries(Object.entries(webType).map(([key, css]) => {
+        const read = (property) => {
+            const value = css.match(new RegExp(`(?:^|;)\\s*${property}:\\s*([^;]+)`))?.[1];
+            if (!value)
+                throw new Error(`Missing typography property: ${property}`);
+            return Number.parseFloat(value);
+        };
+        const fontSize = read('font-size') * 16;
+        return [
+            key,
+            {
+                fontFamily,
+                fontSize,
+                fontWeight: read('font-weight'),
+                lineHeight: (fontSize * read('line-height')) / 100,
+                letterSpacing: fontSize * read('letter-spacing'),
+                textDecorationLine: 'none',
+            },
+        ];
+    }));
+}
+export const type = createTypography();
+export const motion = {
+    'motion-magnet': easing(webMotion['motion-magnet']),
+    'motion-water': easing(webMotion['motion-water']),
+    'motion-spring': easing(webMotion['motion-spring']),
+    'motion-magnet-duration': Number.parseFloat(webMotion['motion-magnet-duration']) * 1000,
+    'motion-water-duration': Number.parseFloat(webMotion['motion-water-duration']) * 1000,
+    'motion-spring-duration': Number.parseFloat(webMotion['motion-spring-duration']) * 1000,
+};
+function shadow(value) {
+    const match = value.match(/^([\d.]+)px ([\d.]+)px ([\d.]+)px (.+)$/);
+    if (!match)
+        throw new Error(`Unsupported Slice shadow: ${value}`);
+    return {
+        boxShadow: [
+            { offsetX: Number(match[1]), offsetY: Number(match[2]), blurRadius: Number(match[3]), color: match[4] },
+        ],
+    };
+}
+function createTheme(name, palette) {
+    const { 'surface-shadow-soft': soft, 'surface-shadow-strong': strong, ...colors } = palette;
+    return {
+        name,
+        coreColors,
+        colors,
+        corners,
+        spacing,
+        elevations,
+        type,
+        motion,
+        shadows: { 'surface-shadow-soft': shadow(soft), 'surface-shadow-strong': shadow(strong) },
+    };
+}
+export const lightTheme = createTheme('lightMode', light);
+export const darkTheme = createTheme('darkMode', dark);

package/dist/react-native/native/src/theme/motion.js

@@ -0,0 +1,43 @@
+/** Convert Slice's explicit CSS curves without importing the React Native runtime. */
+export function easing(css) {
+    if (css.startsWith('cubic-bezier(')) {
+        const [x1, y1, x2, y2] = css.slice(13, -1).split(',').map(Number);
+        const sample = (t, a, b) => 3 * (1 - t) ** 2 * t * a + 3 * (1 - t) * t ** 2 * b + t ** 3;
+        return (progress) => {
+            if (progress <= 0)
+                return 0;
+            if (progress >= 1)
+                return 1;
+            let low = 0;
+            let high = 1;
+            for (let i = 0; i < 30; i++) {
+                const middle = (low + high) / 2;
+                if (sample(middle, x1, x2) < progress)
+                    low = middle;
+                else
+                    high = middle;
+            }
+            return sample((low + high) / 2, y1, y2);
+        };
+    }
+    if (!css.startsWith('linear('))
+        throw new Error(`Unsupported Slice easing: ${css}`);
+    const points = css
+        .slice(7, -1)
+        .split(',')
+        .map((entry, index, entries) => {
+        const [value, percent] = entry.trim().split(/\s+/).map(Number.parseFloat);
+        return { value, position: percent === undefined ? index / (entries.length - 1) : percent / 100 };
+    });
+    return (progress) => {
+        if (progress <= 0)
+            return points[0].value;
+        for (let i = 1; i < points.length; i++) {
+            const left = points[i - 1];
+            const right = points[i];
+            if (progress <= right.position)
+                return (left.value + ((right.value - left.value) * (progress - left.position)) / (right.position - left.position));
+        }
+        return points[points.length - 1].value;
+    };
+}

package/dist/react-native/native/src/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/react-native/native/src/types/sharedTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/react-native/native/src/utils/index.js

@@ -0,0 +1,2 @@
+export { lineHeightTextStyle } from './typography';
+export { sizeToNumber, borderRadiusToNumber } from './sizes';

package/dist/react-native/native/src/utils/sizes/index.js

@@ -0,0 +1 @@
+export { sizeToNumber, borderRadiusToNumber } from './sizes';

package/dist/react-native/native/src/utils/sizes/sizes.js

@@ -0,0 +1,35 @@
+/**
+ * Internal utility converting size props to an absolute number
+ */
+export function sizeToNumber(size) {
+    if (!size)
+        return 48;
+    if (typeof size === 'number')
+        return size;
+    switch (size) {
+        case 's': {
+            return 40;
+        }
+        case 'm': {
+            return 48;
+        }
+        case 'l': {
+            return 56;
+        }
+        default:
+            return 48;
+    }
+}
+/** Resolve radius presets; invalid or negative values produce square corners. */
+export function borderRadiusToNumber(borderRadius) {
+    if (typeof borderRadius === 'number')
+        return Number.isFinite(borderRadius) ? Math.max(0, borderRadius) : 0;
+    switch (borderRadius) {
+        case 'pill':
+            return 1000;
+        case 'rectangular':
+            return 4;
+        default:
+            return 0;
+    }
+}

package/dist/react-native/native/src/utils/typography/index.js

@@ -0,0 +1 @@
+export { lineHeightTextStyle } from './typography';

package/dist/react-native/native/src/utils/typography/typography.js

@@ -0,0 +1,13 @@
+/**
+ * Simple utility to take text style and returns a defined line height factor
+ * Since there is no relative/percent in native, looks for the fontsize and
+ * derives an absolute line height from the font size
+ */
+export function lineHeightTextStyle(styles, lineHeightFactor = 1.2) {
+    if (!Number.isFinite(lineHeightFactor) || lineHeightFactor < 0 || lineHeightFactor > 2) {
+        throw new Error('lineHeightFactor must be a number between 0 and 2');
+    }
+    const fontSize = styles.fontSize ?? 16;
+    const lineHeight = lineHeightFactor * fontSize;
+    return { ...styles, lineHeight };
+}