@apple-pie/slice-native 0.1.4 → 0.1.6

package/dist/esm/providers.mjs

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

package/dist/esm/src/components/SliceButton/SliceButton.mjs

@@ -0,0 +1,117 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { StyleSheet, Pressable } from 'react-native';
+import Reanimated from 'react-native-reanimated';
+import { useSliceTheme } from '../../providers/SliceThemeProvider.mjs';
+import { SliceIcon } from '../SliceIcon/SliceIcon.mjs';
+import { StyledText } from '../SliceText/SliceText.mjs';
+
+/**
+ * Component logic & render
+ */
+function SliceButton(props) {
+    const { colors, name } = 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 = useMemo(() => {
+        if (!hasLabel)
+            return StyleSheet.compose(styles.pressable, styles.pressableNoLabel);
+        if (icon && iconPosition === 'left')
+            return StyleSheet.compose(styles.pressable, styles.pressableIconLeft);
+        if (icon && iconPosition === 'right')
+            return StyleSheet.compose(styles.pressable, styles.pressableIconRight);
+        return styles.pressable;
+    }, [icon, iconPosition, hasLabel]);
+    // create a round button when the button has no label
+    const wrapperStyle = useMemo(() => {
+        if (!hasLabel)
+            return 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 = 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 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 = useMemo(() => {
+        return StyleSheet.create({
+            border: {
+                borderWidth: variant === 'primary' ? 0 : 1,
+                borderColor: colors['core-outline-secondary'],
+            },
+        });
+    }, [variant, colors]);
+    // disable touch events when button is disabled
+    const pointerEvents = useMemo(() => {
+        return StyleSheet.create({
+            pointer: {
+                pointerEvents: disabled ? 'none' : 'auto',
+            },
+        });
+    }, [disabled]);
+    return (jsx(Reanimated.View, { layout: layout, children: jsx(Reanimated.View, { entering: presence?.entering, exiting: presence?.exiting, children: jsx(Reanimated.View, { style: [wrapperStyle, pointerEvents.pointer, colorStyles.backgroundColor, borderStyles.border, animatedStyle], children: jsxs(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' && (jsx(SliceIcon, { name: icon, size: iconSize, strokeColor: colorStyles.icon.color, pointerEvents: "none", accessible: false })), hasLabel && (jsx(StyledText, { textStyle: 'body-xl-bold', style: colorStyles.textColor, singleLine: true, numberOfLines: 1, ellipsizeMode: 'tail', children: children })), icon && iconPosition === 'right' && (jsx(SliceIcon, { name: icon, size: iconSize, strokeColor: colorStyles.icon.color, pointerEvents: "none", accessible: false }))] }) }) }) }));
+}
+/**
+ * Base Styles
+ */
+const styles = 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,
+    },
+});
+
+export { SliceButton };

package/dist/esm/src/components/SliceIcon/SliceIcon.mjs

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { useColorScheme } from 'react-native';
+import Svg from 'react-native-svg';
+import { STATIC_ICON_REGISTRY } from './iconRegistry.mjs';
+
+const SliceIcon = memo((props) => {
+    const dark = 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 = STATIC_ICON_REGISTRY.get(name);
+    const shape = toggle ? (variant?.lineOn ?? variant?.line) : variant?.line;
+    if (!shape)
+        return null;
+    return (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';
+
+export { SliceIcon };