@apple-pie/slice-native 0.1.3 → 0.1.6

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/SliceButton/SliceButton.js

@@ -0,0 +1,119 @@
+'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 SliceIcon = require('../SliceIcon/SliceIcon.js');
+var SliceText = require('../SliceText/SliceText.js');
+
+/**
+ * Component logic & render
+ */
+function SliceButton(props) {
+    const { colors, name } = SliceThemeProvider.useSliceTheme();
+    const isLightTheme = name.includes('light');
+    const { children, onPress, disabled = false, icon, iconPosition = 'left', iconSize = 24, animatedStyle, variant = 'primary', layout, presence, accessibilityState, ...pressableProps } = props;
+    const hasLabel = children !== undefined && children !== null && children !== false && children !== '';
+    // adjust padding for the visual discrepancy because of the intrinsic padding of each icon
+    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]);
+    // create a round button when the button has no label
+    const wrapperStyle = react.useMemo(() => {
+        if (!hasLabel)
+            return reactNative.StyleSheet.compose(styles.wrapper, styles.roundWrapper);
+        return styles.wrapper;
+    }, [hasLabel]);
+    // memoize the color styles to apply to the button/label based on variant and disabled state
+    const colorStyles = react.useMemo(() => {
+        const bgColor = variant === 'primary' ? colors['core-button-primary'] : colors['core-surface-primary'];
+        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: disabledBGColor ?? bgColor,
+            },
+            textColor: {
+                color: disabledColor ?? color,
+            },
+            ripple: {
+                color: 'rgba(255,255,255,0.5)',
+            },
+            icon: {
+                color: iconColor,
+            },
+        });
+    }, [variant, disabled, colors, isLightTheme]);
+    // primary buttons are full color and have no border
+    const borderStyles = react.useMemo(() => {
+        return reactNative.StyleSheet.create({
+            border: {
+                borderWidth: variant === 'primary' ? 0 : 1,
+                borderColor: colors['core-outline-secondary'],
+            },
+        });
+    }, [variant, colors]);
+    // disable touch events when button is disabled
+    const pointerEvents = react.useMemo(() => {
+        return reactNative.StyleSheet.create({
+            pointer: {
+                pointerEvents: disabled ? 'none' : 'auto',
+            },
+        });
+    }, [disabled]);
+    return (jsxRuntime.jsx(Reanimated.View, { layout: layout, children: jsxRuntime.jsx(Reanimated.View, { entering: presence?.entering, exiting: presence?.exiting, children: jsxRuntime.jsx(Reanimated.View, { style: [wrapperStyle, pointerEvents.pointer, colorStyles.backgroundColor, borderStyles.border, animatedStyle], children: 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: {
+        borderRadius: 100,
+        overflow: 'hidden',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 48,
+        width: 'auto',
+    },
+    roundWrapper: {
+        borderRadius: 24,
+        width: 48,
+        height: 48,
+    },
+    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;