@apple-pie/slice-native 0.1.6 → 0.1.7

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

@@ -5,7 +5,10 @@ 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');
 
 /**
@@ -13,10 +16,12 @@ var SliceText = require('../SliceText/SliceText.js');
  */
 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, animatedStyle, variant = 'primary', layout, presence, accessibilityState, ...pressableProps } = props;
+    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 !== '';
-    // 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);
@@ -26,15 +31,13 @@ function SliceButton(props) {
             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 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 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;
@@ -45,7 +48,7 @@ function SliceButton(props) {
                 : colors['core-link-primary'];
         return reactNative.StyleSheet.create({
             backgroundColor: {
-                backgroundColor: disabledBGColor ?? bgColor,
+                backgroundColor: applyLiquidGlass ? 'transparent' : (disabledBGColor ?? bgColor),
             },
             textColor: {
                 color: disabledColor ?? color,
@@ -57,16 +60,17 @@ function SliceButton(props) {
                 color: iconColor,
             },
         });
-    }, [variant, disabled, colors, isLightTheme]);
-    // primary buttons are full color and have no border
+    }, [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: variant === 'primary' ? 0 : 1,
-                borderColor: colors['core-outline-secondary'],
+                borderWidth: Number.isFinite(width) ? Math.max(0, width) : 0,
+                borderColor,
             },
         });
-    }, [variant, colors]);
+    }, [variant, borderColor, borderWidth]);
     // disable touch events when button is disabled
     const pointerEvents = react.useMemo(() => {
         return reactNative.StyleSheet.create({
@@ -75,24 +79,47 @@ function SliceButton(props) {
             },
         });
     }, [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 }))] }) }) }) }));
+    // 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: {
-        borderRadius: 100,
+        position: 'relative',
         overflow: 'hidden',
         justifyContent: 'center',
         alignItems: 'center',
-        height: 48,
         width: 'auto',
     },
-    roundWrapper: {
-        borderRadius: 24,
-        width: 48,
-        height: 48,
+    background: {
+        position: 'absolute',
+        inset: 0,
     },
     pressable: {
         flex: 1,

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

@@ -0,0 +1,12 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactNative = require('react-native');
+
+/** Android/web fallback. Metro selects SliceLiquidGlassView.ios on iOS. */
+const SliceLiquidGlassView = react.forwardRef(function SliceLiquidGlassView({ glassStyle: _glassStyle, glassTintColor: _glassTintColor, interactive: _interactive, cornerRadius = 24, fallbackColor = 'rgba(128, 128, 128, 0.18)', style, ...props }, ref) {
+    return (jsxRuntime.jsx(reactNative.View, { ...props, ref: ref, style: [{ backgroundColor: fallbackColor }, style, { borderRadius: cornerRadius, overflow: 'hidden' }] }));
+});
+
+exports.SliceLiquidGlassView = SliceLiquidGlassView;

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

@@ -5,12 +5,15 @@ var react = require('react');
 var reactNative = require('react-native');
 var Reanimated = require('react-native-reanimated');
 var useCreateThemedStyles = require('../../hooks/useCreateThemedStyles/useCreateThemedStyles.js');
+var SliceThemeProvider = require('../../providers/SliceThemeProvider.js');
 var typography = require('../../utils/typography/typography.js');
+var sizes = require('../../utils/sizes/sizes.js');
 var SliceIcon = require('../SliceIcon/SliceIcon.js');
 
 function SliceTextInput(props) {
     const themedStyles = useCreateThemedStyles.useCreateThemedStyles(styles);
-    const { didFocus, layout, icon, focused, blurClears = false, iconColor, iconSize = 24, placeholderTextColor = themedStyles.placeHolder.color, hideIconOnFocus = true, style, onFocus, onBlur, onChangeText, accessibilityState, ...rest } = props;
+    const { colors } = SliceThemeProvider.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 = react.useRef(null);
     const [isFocused, setIsFocused] = react.useState(false);
     // Only drive native focus when the caller explicitly supplies a preference.
@@ -37,7 +40,40 @@ function SliceTextInput(props) {
             padding: { paddingRight: 18, paddingLeft: showIcon ? 0 : 18 },
         });
     }, [showIcon]);
-    return (jsxRuntime.jsxs(Reanimated.View, { style: themedStyles.inputWrapper, layout: layout, children: [showIcon && (jsxRuntime.jsx(reactNative.View, { style: [themedStyles.icon, { height: iconSize, width: iconSize }], children: jsxRuntime.jsx(SliceIcon.SliceIcon, { name: icon, strokeColor: iconColorComputed, size: iconSize, accessible: false, pointerEvents: "none" }) })), jsxRuntime.jsx(reactNative.TextInput, { ...rest, ref: inputRef, style: [themedStyles.inputFieldView, padding.padding, style], accessibilityState: {
+    const inputSize = react.useMemo(() => {
+        return reactNative.StyleSheet.create({
+            size: {
+                minHeight: sizes.sizeToNumber(size),
+            },
+        });
+    }, [size]);
+    const borderStyles = react.useMemo(() => {
+        return reactNative.StyleSheet.create({
+            border: {
+                borderWidth: Number.isFinite(borderWidth) ? Math.max(0, borderWidth) : 0,
+                borderColor,
+            },
+        });
+    }, [borderColor, borderWidth]);
+    const cornerRadius = react.useMemo(() => {
+        return reactNative.StyleSheet.create({
+            borderRadius: {
+                borderRadius: sizes.borderRadiusToNumber(borderRadius),
+            },
+        });
+    }, [borderRadius]);
+    const bgColor = react.useMemo(() => {
+        return reactNative.StyleSheet.create({
+            backgroundColor: { backgroundColor: backgroundColor ?? colors['core-surface-primary'] },
+        });
+    }, [backgroundColor, colors]);
+    return (jsxRuntime.jsxs(Reanimated.View, { style: [
+            themedStyles.inputWrapper,
+            inputSize.size,
+            cornerRadius.borderRadius,
+            borderStyles.border,
+            bgColor.backgroundColor,
+        ], layout: layout, children: [showIcon && (jsxRuntime.jsx(reactNative.View, { style: [themedStyles.icon, { height: iconSize, width: iconSize }], children: jsxRuntime.jsx(SliceIcon.SliceIcon, { name: icon, strokeColor: iconColorComputed, size: iconSize, accessible: false, pointerEvents: "none" }) })), jsxRuntime.jsx(reactNative.TextInput, { ...rest, ref: inputRef, style: [themedStyles.inputFieldView, padding.padding, style], accessibilityState: {
                     ...accessibilityState,
                     disabled: rest.editable === false || accessibilityState?.disabled,
                 }, onChangeText: onChangeText, placeholderTextColor: placeholderTextColor, onFocus: (event) => {
@@ -65,11 +101,6 @@ const styles = (theme) => reactNative.StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'flex-start',
         gap: 8,
-        borderWidth: 1,
-        borderColor: theme.colors['core-outline-secondary'],
-        borderRadius: 100,
-        minHeight: 48,
-        backgroundColor: theme.colors['core-surface-primary'],
         zIndex: 2,
     },
     inputFieldView: {
@@ -77,10 +108,9 @@ const styles = (theme) => reactNative.StyleSheet.create({
         color: theme.colors['core-text-primary'],
         flex: 1,
         zIndex: 2,
-        minHeight: 48,
     },
     placeHolder: {
-        color: theme.colors['core-text-secondary'],
+        color: theme.colors['core-text-tertiary'],
     },
 });
 

package/dist/cjs/src/hooks/useDeviceCapabilities/useDeviceCapabilities.js

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

package/dist/cjs/src/utils/sizes/sizes.js

@@ -0,0 +1,40 @@
+'use strict';
+
+/**
+ * Internal utility converting size props to an absolute number
+ */
+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. */
+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;
+    }
+}
+
+exports.borderRadiusToNumber = borderRadiusToNumber;
+exports.sizeToNumber = sizeToNumber;

package/dist/cjs/utils.js

@@ -1,7 +1,10 @@
 'use strict';
 
 var typography = require('./src/utils/typography/typography.js');
+var sizes = require('./src/utils/sizes/sizes.js');
 
 
 
 exports.lineHeightTextStyle = typography.lineHeightTextStyle;
+exports.borderRadiusToNumber = sizes.borderRadiusToNumber;
+exports.sizeToNumber = sizes.sizeToNumber;

package/dist/esm/components.mjs

@@ -3,3 +3,5 @@ export { SliceIcons } from './src/components/SliceIcon/icons.mjs';
 export { StyledText } from './src/components/SliceText/SliceText.mjs';
 export { SliceButton } from './src/components/SliceButton/SliceButton.mjs';
 export { SliceTextInput } from './src/components/SliceTextInput/SliceTextInput.mjs';
+export { SliceLiquidGlassView } from './src/components/SliceLiquidGlassView/SliceLiquidGlassView.mjs';
+export { SliceBackgroundBlur } from './src/components/SliceBackgroundBlur/SliceBackgroundBlur.mjs';

package/dist/esm/hooks.mjs

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

package/dist/esm/index.mjs

@@ -3,7 +3,11 @@ export { SliceIcons } from './src/components/SliceIcon/icons.mjs';
 export { StyledText } from './src/components/SliceText/SliceText.mjs';
 export { SliceButton } from './src/components/SliceButton/SliceButton.mjs';
 export { SliceTextInput } from './src/components/SliceTextInput/SliceTextInput.mjs';
+export { SliceLiquidGlassView } from './src/components/SliceLiquidGlassView/SliceLiquidGlassView.mjs';
+export { SliceBackgroundBlur } from './src/components/SliceBackgroundBlur/SliceBackgroundBlur.mjs';
 export { createTypography, darkTheme, lightTheme } from './theme.mjs';
 export { SliceThemeProvider, useSliceContext, useSliceTheme } from './src/providers/SliceThemeProvider.mjs';
 export { useCreateThemedStyles } from './src/hooks/useCreateThemedStyles/useCreateThemedStyles.mjs';
+export { useDeviceCapabilities } from './src/hooks/useDeviceCapabilities/useDeviceCapabilities.mjs';
 export { lineHeightTextStyle } from './src/utils/typography/typography.mjs';
+export { borderRadiusToNumber, sizeToNumber } from './src/utils/sizes/sizes.mjs';

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

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { View, StyleSheet } from '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 jsx(View, { pointerEvents: "none", style: [StyleSheet.absoluteFill, style, { backgroundColor: fallbackColor }] });
+}
+
+export { SliceBackgroundBlur };

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

@@ -3,7 +3,10 @@ import { useMemo } from 'react';
 import { StyleSheet, Pressable } from 'react-native';
 import Reanimated from 'react-native-reanimated';
 import { useSliceTheme } from '../../providers/SliceThemeProvider.mjs';
+import { useDeviceCapabilities } from '../../hooks/useDeviceCapabilities/useDeviceCapabilities.mjs';
+import { sizeToNumber, borderRadiusToNumber } from '../../utils/sizes/sizes.mjs';
 import { SliceIcon } from '../SliceIcon/SliceIcon.mjs';
+import { SliceLiquidGlassView } from '../SliceLiquidGlassView/SliceLiquidGlassView.mjs';
 import { StyledText } from '../SliceText/SliceText.mjs';
 
 /**
@@ -11,10 +14,12 @@ import { StyledText } from '../SliceText/SliceText.mjs';
  */
 function SliceButton(props) {
     const { colors, name } = useSliceTheme();
+    const { supportsLiquidGlass } = useDeviceCapabilities();
     const isLightTheme = name.includes('light');
-    const { children, onPress, disabled = false, icon, iconPosition = 'left', iconSize = 24, animatedStyle, variant = 'primary', layout, presence, accessibilityState, ...pressableProps } = props;
+    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 !== '';
-    // 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);
@@ -24,15 +29,13 @@ function SliceButton(props) {
             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 bgColor = 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 = 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;
@@ -43,7 +46,7 @@ function SliceButton(props) {
                 : colors['core-link-primary'];
         return StyleSheet.create({
             backgroundColor: {
-                backgroundColor: disabledBGColor ?? bgColor,
+                backgroundColor: applyLiquidGlass ? 'transparent' : (disabledBGColor ?? bgColor),
             },
             textColor: {
                 color: disabledColor ?? color,
@@ -55,16 +58,17 @@ function SliceButton(props) {
                 color: iconColor,
             },
         });
-    }, [variant, disabled, colors, isLightTheme]);
-    // primary buttons are full color and have no border
+    }, [applyLiquidGlass, disabled, colors, isLightTheme, bgColor]);
+    // Preserve variant defaults while allowing an explicit zero-width border.
     const borderStyles = useMemo(() => {
+        const width = borderWidth ?? (variant === 'primary' ? 0 : 1);
         return StyleSheet.create({
             border: {
-                borderWidth: variant === 'primary' ? 0 : 1,
-                borderColor: colors['core-outline-secondary'],
+                borderWidth: Number.isFinite(width) ? Math.max(0, width) : 0,
+                borderColor,
             },
         });
-    }, [variant, colors]);
+    }, [variant, borderColor, borderWidth]);
     // disable touch events when button is disabled
     const pointerEvents = useMemo(() => {
         return StyleSheet.create({
@@ -73,24 +77,47 @@ function SliceButton(props) {
             },
         });
     }, [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 }))] }) }) }) }));
+    // set the button size
+    const buttonSize = useMemo(() => {
+        return StyleSheet.create({
+            size: {
+                minHeight: sizeToNumber(size),
+                width: hasLabel ? 'auto' : sizeToNumber(size),
+            },
+        });
+    }, [size, hasLabel]);
+    // set the button border radius
+    const cornerRadius = useMemo(() => {
+        return StyleSheet.create({
+            borderRadius: {
+                borderRadius: borderRadiusToNumber(borderRadius),
+            },
+        });
+    }, [borderRadius]);
+    return (jsx(Reanimated.View, { layout: layout, children: jsx(Reanimated.View, { entering: presence?.entering, exiting: presence?.exiting, children: jsxs(Reanimated.View, { style: [
+                    styles.wrapper,
+                    pointerEvents.pointer,
+                    colorStyles.backgroundColor,
+                    buttonSize.size,
+                    borderStyles.border,
+                    cornerRadius.borderRadius,
+                    animatedStyle,
+                ], children: [applyLiquidGlass && (jsx(SliceLiquidGlassView, { cornerRadius: borderRadiusToNumber(borderRadius), fallbackColor: fallbackColor, glassTintColor: glassTintColor, glassStyle: glassStyle, style: styles.background })), 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,
+        position: 'relative',
         overflow: 'hidden',
         justifyContent: 'center',
         alignItems: 'center',
-        height: 48,
         width: 'auto',
     },
-    roundWrapper: {
-        borderRadius: 24,
-        width: 48,
-        height: 48,
+    background: {
+        position: 'absolute',
+        inset: 0,
     },
     pressable: {
         flex: 1,

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

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+
+/** Android/web fallback. Metro selects SliceLiquidGlassView.ios on iOS. */
+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' }] }));
+});
+
+export { SliceLiquidGlassView };

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

@@ -3,12 +3,15 @@ import { useRef, useState, useEffect, useMemo } from 'react';
 import { StyleSheet, View, TextInput } from 'react-native';
 import Reanimated from 'react-native-reanimated';
 import { useCreateThemedStyles } from '../../hooks/useCreateThemedStyles/useCreateThemedStyles.mjs';
+import { useSliceTheme } from '../../providers/SliceThemeProvider.mjs';
 import { lineHeightTextStyle } from '../../utils/typography/typography.mjs';
+import { sizeToNumber, borderRadiusToNumber } from '../../utils/sizes/sizes.mjs';
 import { SliceIcon } from '../SliceIcon/SliceIcon.mjs';
 
 function SliceTextInput(props) {
     const themedStyles = useCreateThemedStyles(styles);
-    const { didFocus, layout, icon, focused, blurClears = false, iconColor, iconSize = 24, placeholderTextColor = themedStyles.placeHolder.color, hideIconOnFocus = true, style, onFocus, onBlur, onChangeText, accessibilityState, ...rest } = props;
+    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.
@@ -35,7 +38,40 @@ function SliceTextInput(props) {
             padding: { paddingRight: 18, paddingLeft: showIcon ? 0 : 18 },
         });
     }, [showIcon]);
-    return (jsxs(Reanimated.View, { style: themedStyles.inputWrapper, 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: {
+    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) => {
@@ -63,11 +99,6 @@ const styles = (theme) => StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'flex-start',
         gap: 8,
-        borderWidth: 1,
-        borderColor: theme.colors['core-outline-secondary'],
-        borderRadius: 100,
-        minHeight: 48,
-        backgroundColor: theme.colors['core-surface-primary'],
         zIndex: 2,
     },
     inputFieldView: {
@@ -75,10 +106,9 @@ const styles = (theme) => StyleSheet.create({
         color: theme.colors['core-text-primary'],
         flex: 1,
         zIndex: 2,
-        minHeight: 48,
     },
     placeHolder: {
-        color: theme.colors['core-text-secondary'],
+        color: theme.colors['core-text-tertiary'],
     },
 });
 

package/dist/esm/src/hooks/useDeviceCapabilities/useDeviceCapabilities.mjs

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

package/dist/esm/src/utils/sizes/sizes.mjs

@@ -0,0 +1,37 @@
+/**
+ * Internal utility converting size props to an absolute number
+ */
+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. */
+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;
+    }
+}
+
+export { borderRadiusToNumber, sizeToNumber };

package/dist/esm/utils.mjs

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, View } from 'react-native';
+/** Web/other-platform fallback. Metro selects the native implementation on iOS/Android. */
+export function SliceBackgroundBlur({ style, fallbackColor = 'rgba(128, 128, 128, 0.18)', }) {
+    return _jsx(View, { pointerEvents: "none", style: [StyleSheet.absoluteFill, style, { backgroundColor: fallbackColor }] });
+}