@apple-pie/slice-native 0.1.4 → 0.1.7

package/dist/cjs/providers.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var SliceThemeProvider = require('./src/providers/SliceThemeProvider.js');
+
+
+
+exports.SliceThemeProvider = SliceThemeProvider.SliceThemeProvider;
+exports.useSliceContext = SliceThemeProvider.useSliceContext;
+exports.useSliceTheme = SliceThemeProvider.useSliceTheme;

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;

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

@@ -0,0 +1,146 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactNative = require('react-native');
+var Reanimated = require('react-native-reanimated');
+var SliceThemeProvider = require('../../providers/SliceThemeProvider.js');
+var useDeviceCapabilities = require('../../hooks/useDeviceCapabilities/useDeviceCapabilities.js');
+var sizes = require('../../utils/sizes/sizes.js');
+var SliceIcon = require('../SliceIcon/SliceIcon.js');
+var SliceLiquidGlassView = require('../SliceLiquidGlassView/SliceLiquidGlassView.js');
+var SliceText = require('../SliceText/SliceText.js');
+
+/**
+ * Component logic & render
+ */
+function SliceButton(props) {
+    const { colors, name } = SliceThemeProvider.useSliceTheme();
+    const { supportsLiquidGlass } = useDeviceCapabilities.useDeviceCapabilities();
+    const isLightTheme = name.includes('light');
+    const { children, onPress, disabled = false, icon, iconPosition = 'left', iconSize = 24, size = 'm', animatedStyle, variant = 'primary', layout, presence, accessibilityState, liquidGlassBackground, borderRadius = 'pill', borderWidth, borderColor = colors['core-outline-secondary'], backgroundColor, ...pressableProps } = props;
+    const { fallbackColor, glassTintColor, glassStyle } = liquidGlassBackground ?? {};
+    const applyLiquidGlass = Boolean(liquidGlassBackground) && supportsLiquidGlass;
+    const hasLabel = children !== undefined && children !== null && children !== false && children !== '';
+    const pressableStyle = react.useMemo(() => {
+        if (!hasLabel)
+            return reactNative.StyleSheet.compose(styles.pressable, styles.pressableNoLabel);
+        if (icon && iconPosition === 'left')
+            return reactNative.StyleSheet.compose(styles.pressable, styles.pressableIconLeft);
+        if (icon && iconPosition === 'right')
+            return reactNative.StyleSheet.compose(styles.pressable, styles.pressableIconRight);
+        return styles.pressable;
+    }, [icon, iconPosition, hasLabel]);
+    const bgColor = react.useMemo(() => {
+        if (applyLiquidGlass)
+            return 'transparent';
+        const baseBGColor = variant === 'primary' ? colors['core-button-primary'] : colors['core-surface-primary'];
+        return backgroundColor ?? fallbackColor ?? baseBGColor;
+    }, [applyLiquidGlass, backgroundColor, fallbackColor, colors, variant]);
+    const colorStyles = react.useMemo(() => {
+        const disabledBGColor = disabled ? colors['core-surface-secondary'] : undefined;
+        const color = colors['core-text-primary'];
+        const disabledColor = disabled ? colors['core-text-disabled'] : undefined;
+        const iconColor = disabled
+            ? disabledColor
+            : isLightTheme
+                ? colors['core-icon-primary']
+                : colors['core-link-primary'];
+        return reactNative.StyleSheet.create({
+            backgroundColor: {
+                backgroundColor: applyLiquidGlass ? 'transparent' : (disabledBGColor ?? bgColor),
+            },
+            textColor: {
+                color: disabledColor ?? color,
+            },
+            ripple: {
+                color: 'rgba(255,255,255,0.5)',
+            },
+            icon: {
+                color: iconColor,
+            },
+        });
+    }, [applyLiquidGlass, disabled, colors, isLightTheme, bgColor]);
+    // Preserve variant defaults while allowing an explicit zero-width border.
+    const borderStyles = react.useMemo(() => {
+        const width = borderWidth ?? (variant === 'primary' ? 0 : 1);
+        return reactNative.StyleSheet.create({
+            border: {
+                borderWidth: Number.isFinite(width) ? Math.max(0, width) : 0,
+                borderColor,
+            },
+        });
+    }, [variant, borderColor, borderWidth]);
+    // disable touch events when button is disabled
+    const pointerEvents = react.useMemo(() => {
+        return reactNative.StyleSheet.create({
+            pointer: {
+                pointerEvents: disabled ? 'none' : 'auto',
+            },
+        });
+    }, [disabled]);
+    // set the button size
+    const buttonSize = react.useMemo(() => {
+        return reactNative.StyleSheet.create({
+            size: {
+                minHeight: sizes.sizeToNumber(size),
+                width: hasLabel ? 'auto' : sizes.sizeToNumber(size),
+            },
+        });
+    }, [size, hasLabel]);
+    // set the button border radius
+    const cornerRadius = react.useMemo(() => {
+        return reactNative.StyleSheet.create({
+            borderRadius: {
+                borderRadius: sizes.borderRadiusToNumber(borderRadius),
+            },
+        });
+    }, [borderRadius]);
+    return (jsxRuntime.jsx(Reanimated.View, { layout: layout, children: jsxRuntime.jsx(Reanimated.View, { entering: presence?.entering, exiting: presence?.exiting, children: jsxRuntime.jsxs(Reanimated.View, { style: [
+                    styles.wrapper,
+                    pointerEvents.pointer,
+                    colorStyles.backgroundColor,
+                    buttonSize.size,
+                    borderStyles.border,
+                    cornerRadius.borderRadius,
+                    animatedStyle,
+                ], children: [applyLiquidGlass && (jsxRuntime.jsx(SliceLiquidGlassView.SliceLiquidGlassView, { cornerRadius: sizes.borderRadiusToNumber(borderRadius), fallbackColor: fallbackColor, glassTintColor: glassTintColor, glassStyle: glassStyle, style: styles.background })), jsxRuntime.jsxs(reactNative.Pressable, { ...pressableProps, accessibilityRole: pressableProps.accessibilityRole ?? 'button', accessibilityState: { ...accessibilityState, disabled }, disabled: disabled, style: pressableStyle, onPress: disabled ? undefined : onPress, android_ripple: pressableProps.android_ripple ?? colorStyles.ripple, children: [icon && iconPosition === 'left' && (jsxRuntime.jsx(SliceIcon.SliceIcon, { name: icon, size: iconSize, strokeColor: colorStyles.icon.color, pointerEvents: "none", accessible: false })), hasLabel && (jsxRuntime.jsx(SliceText.StyledText, { textStyle: 'body-xl-bold', style: colorStyles.textColor, singleLine: true, numberOfLines: 1, ellipsizeMode: 'tail', children: children })), icon && iconPosition === 'right' && (jsxRuntime.jsx(SliceIcon.SliceIcon, { name: icon, size: iconSize, strokeColor: colorStyles.icon.color, pointerEvents: "none", accessible: false }))] })] }) }) }));
+}
+/**
+ * Base Styles
+ */
+const styles = reactNative.StyleSheet.create({
+    wrapper: {
+        position: 'relative',
+        overflow: 'hidden',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 'auto',
+    },
+    background: {
+        position: 'absolute',
+        inset: 0,
+    },
+    pressable: {
+        flex: 1,
+        flexDirection: 'row',
+        gap: 6,
+        paddingHorizontal: 16,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    pressableIconLeft: {
+        paddingLeft: 16,
+        paddingRight: 22,
+    },
+    pressableIconRight: {
+        paddingLeft: 22,
+        paddingRight: 16,
+    },
+    pressableNoLabel: {
+        paddingLeft: 0,
+        paddingRight: 0,
+    },
+});
+
+exports.SliceButton = SliceButton;

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactNative = require('react-native');
+var Svg = require('react-native-svg');
+var iconRegistry = require('./iconRegistry.js');
+
+const SliceIcon = react.memo((props) => {
+    const dark = reactNative.useColorScheme() === 'dark';
+    const { name = 'home', size = 20, stroke = 1.5, strokeColor = dark ? '#ffffff' : '#000000', fillColor, fill = false, coverUp = dark ? '#000000' : '#ffffff', toggle = false, disabled = false, onPress, onPressIn, onPressOut, onLongPress, accessibilityState, opacity = 1, ...svgProps } = props;
+    const variant = iconRegistry.STATIC_ICON_REGISTRY.get(name);
+    const shape = toggle ? (variant?.lineOn ?? variant?.line) : variant?.line;
+    if (!shape)
+        return null;
+    return (jsxRuntime.jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", accessibilityRole: onPress || onLongPress ? 'button' : 'image', accessibilityLabel: `${name} icon`, ...svgProps, disabled: disabled, opacity: disabled ? Number(opacity) * 0.5 : opacity, accessibilityState: { ...accessibilityState, disabled }, onPress: disabled ? undefined : onPress, onPressIn: disabled ? undefined : onPressIn, onPressOut: disabled ? undefined : onPressOut, onLongPress: disabled ? undefined : onLongPress, children: shape({ stroke, strokeColor, fillColor: fill ? (fillColor ?? (dark ? 0.2 : 0.125)) : 0, coverUp }) }));
+});
+SliceIcon.displayName = 'SliceIcon';
+
+exports.SliceIcon = SliceIcon;