@apple-pie/slice-native 0.1.4 → 0.1.7

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

@@ -0,0 +1,371 @@
+// base family
+const fontFamily = `var(--slice-font-family, "Funnel Sans")`;
+// base weights
+export const fontWeights = {
+    regular: 360,
+    medium: 420,
+    semi: 480,
+    bold: 500,
+    extra: 560,
+};
+// base sizes
+export const fontSizes = {
+    xs: '0.75rem',
+    s: '0.875rem',
+    m: '0.9375rem',
+    l: '1rem',
+    xl: '1.0625rem',
+    h1: '4.25rem',
+    h2: '3.5rem',
+    h3: '2.75rem',
+    h4: '2rem',
+    h5: '1.5rem',
+    h6: '1.0625rem',
+};
+// base line heights
+export const lineHeights = {
+    xs: '116.67%',
+    s: '128.57%',
+    m: '133.33%',
+    l: '140%',
+    xl: '142.86%',
+    xxl: '162.5%',
+};
+// base letter spacing
+export const letterSpacings = {
+    xs: '0.00625em',
+    s: '0.009375em',
+    m: '0.0125em',
+    l: '0.015625em',
+};
+// ** new styles aligned to lyra */
+export const type = {
+    'body-xs-regular': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.regular};
+      font-size: ${fontSizes.xs};
+      line-height: ${lineHeights.m};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.m}`,
+    'body-xs-medium': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.medium};
+      font-size: ${fontSizes.xs};
+      line-height: ${lineHeights.m};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.m}`,
+    'body-xs-bold': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.bold};
+      font-size: ${fontSizes.xs};
+      line-height: ${lineHeights.m};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.l}`,
+    'body-s-regular': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.regular};
+      font-size: ${fontSizes.s};
+      line-height: ${lineHeights.xl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.s}`,
+    'body-s-medium': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.medium};
+      font-size: ${fontSizes.s};
+      line-height: ${lineHeights.xl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.s}`,
+    'body-s-bold': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.bold};
+      font-size: ${fontSizes.s};
+      line-height: ${lineHeights.xl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.m}`,
+    'body-m-regular': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.regular};
+      font-size: ${fontSizes.m};
+      line-height: ${lineHeights.l};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.s}`,
+    'body-m-medium': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.medium};
+      font-size: ${fontSizes.m};
+      line-height: ${lineHeights.l};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.s}`,
+    'body-m-bold': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.bold};
+      font-size: ${fontSizes.m};
+      line-height: ${lineHeights.l};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.m}`,
+    'body-l-regular': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.regular};
+      font-size: ${fontSizes.l};
+      line-height: ${lineHeights.xxl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.xs}`,
+    'body-l-medium': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.medium};
+      font-size: ${fontSizes.l};
+      line-height: ${lineHeights.xxl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.xs}`,
+    'body-l-bold': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.bold};
+      font-size: ${fontSizes.l};
+      line-height: ${lineHeights.xxl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.s}`,
+    'body-xl-regular': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.regular};
+      font-size: ${fontSizes.xl};
+      line-height: ${lineHeights.xxl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.xs}`,
+    'body-xl-medium': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.medium};
+      font-size: ${fontSizes.xl};
+      line-height: ${lineHeights.xxl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.xs}`,
+    'body-xl-bold': `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.bold};
+      font-size: ${fontSizes.xl};
+      line-height: ${lineHeights.xxl};
+      text-decoration: none;
+      letter-spacing: ${letterSpacings.s}`,
+    h1: `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.extra};
+      font-size: ${fontSizes.h1};
+      line-height: ${lineHeights.xs};
+      letter-spacing: ${letterSpacings.m}`,
+    h2: `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.extra};
+      font-size: ${fontSizes.h2};
+      line-height: ${lineHeights.xs};
+      letter-spacing: ${letterSpacings.m}`,
+    h3: `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.extra};
+      font-size: ${fontSizes.h3};
+      line-height: ${lineHeights.xs};
+      letter-spacing: ${letterSpacings.m}`,
+    h4: `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.extra};
+      font-size: ${fontSizes.h4};
+      line-height: ${lineHeights.xs};
+      letter-spacing: ${letterSpacings.m}`,
+    h5: `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.extra};
+      font-size: ${fontSizes.h5};
+      line-height: ${lineHeights.xs};
+      letter-spacing: ${letterSpacings.m}`,
+    h6: `
+      font-family: ${fontFamily};
+      font-weight: ${fontWeights.extra};
+      font-size: ${fontSizes.h6};
+      line-height: ${lineHeights.xs};
+      letter-spacing: ${letterSpacings.m}`,
+};
+export const typeCssClasses = {
+    'body-xs-regular': 'body-xs-regular',
+    'body-xs-medium': 'body-xs-medium',
+    'body-xs-bold': 'body-xs-bold',
+    'body-s-regular': 'body-s-regular',
+    'body-s-medium': 'body-s-medium',
+    'body-s-bold': 'body-s-bold',
+    'body-m-regular': 'body-m-regular',
+    'body-m-medium': 'body-m-medium',
+    'body-m-bold': 'body-m-bold',
+    'body-l-regular': 'body-l-regular',
+    'body-l-medium': 'body-l-medium',
+    'body-l-bold': 'body-l-bold',
+    'body-xl-regular': 'body-xl-regular',
+    'body-xl-medium': 'body-xl-medium',
+    'body-xl-bold': 'body-xl-bold',
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+};
+export const typeStyles = {
+    'body-xs-regular': {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.regular}`,
+        fontSize: `${fontSizes.xs}`,
+        lineHeight: `${lineHeights.m}`,
+        textDecoration: 'none',
+        letterSpacing: `${letterSpacings.m}`,
+    },
+    'body-xs-medium': {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.medium}`,
+        fontSize: `${fontSizes.xs}`,
+        lineHeight: `${lineHeights.m}`,
+        textDecoration: 'none',
+        letterSpacing: `${letterSpacings.m}`,
+    },
+    'body-xs-bold': {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.bold}`,
+        fontSize: `${fontSizes.xs}`,
+        lineHeight: `${lineHeights.m}`,
+        textDecoration: 'none',
+        letterSpacing: `${letterSpacings.l}`,
+    },
+    'body-s-regular': {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.regular}`,
+        fontSize: `${fontSizes.s}`,
+        lineHeight: `${lineHeights.xl}`,
+        textDecoration: 'none',
+        letterSpacing: `${letterSpacings.s}`,
+    },
+    'body-s-medium': {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.medium}`,
+        fontSize: `${fontSizes.s}`,
+        lineHeight: `${lineHeights.xl}`,
+        textDecoration: 'none',
+        letterSpacing: `${letterSpacings.s}`,
+    },
+    'body-s-bold': {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.bold}`,
+        fontSize: `${fontSizes.s}`,
+        lineHeight: `${lineHeights.xl}`,
+        textDecoration: 'none',
+        letterSpacing: `${letterSpacings.m}`,
+    },
+    'body-m-regular': {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.regular}`,
+        fontSize: `${fontSizes.m}`,
+        lineHeight: `${lineHeights.l}`,
+        textDecoration: 'none',
+        letterSpacing: `${letterSpacings.s}`,
+    },
+    'body-m-medium': {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.medium}`,
+        fontSize: `${fontSizes.m}`,
+        lineHeight: `${lineHeights.l}`,
+        textDecoration: 'none',
+        letterSpacing: `${letterSpacings.s}`,
+    },
+    'body-m-bold': {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.bold}`,
+        fontSize: `${fontSizes.m}`,
+        lineHeight: `${lineHeights.l}`,
+        textDecoration: 'none',
+        letterSpacing: `${letterSpacings.m}`,
+    },
+    'body-l-regular': {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.regular}`,
+        fontSize: `${fontSizes.l}`,
+        lineHeight: `${lineHeights.xxl}`,
+        textDecoration: 'none',
+        letterSpacing: `${letterSpacings.xs}`,
+    },
+    'body-l-medium': {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.medium}`,
+        fontSize: `${fontSizes.l}`,
+        lineHeight: `${lineHeights.xxl}`,
+        textDecoration: 'none',
+        letterSpacing: `${letterSpacings.xs}`,
+    },
+    'body-l-bold': {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.bold}`,
+        fontSize: `${fontSizes.l}`,
+        lineHeight: `${lineHeights.xxl}`,
+        textDecoration: 'none',
+        letterSpacing: `${letterSpacings.s}`,
+    },
+    'body-xl-regular': {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.regular}`,
+        fontSize: `${fontSizes.xl}`,
+        lineHeight: `${lineHeights.xxl}`,
+        textDecoration: 'none',
+        letterSpacing: `${letterSpacings.xs}`,
+    },
+    'body-xl-medium': {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.medium}`,
+        fontSize: `${fontSizes.xl}`,
+        lineHeight: `${lineHeights.xxl}`,
+        textDecoration: 'none',
+        letterSpacing: `${letterSpacings.xs}`,
+    },
+    'body-xl-bold': {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.bold}`,
+        fontSize: `${fontSizes.xl}`,
+        lineHeight: `${lineHeights.xxl}`,
+        textDecoration: 'none',
+        letterSpacing: `${letterSpacings.s}`,
+    },
+    h1: {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.extra}`,
+        fontSize: `${fontSizes.h1}`,
+        lineHeight: `${lineHeights.xs}`,
+        letterSpacing: `${letterSpacings.m}`,
+    },
+    h2: {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.extra}`,
+        fontSize: `${fontSizes.h2}`,
+        lineHeight: `${lineHeights.xs}`,
+        letterSpacing: `${letterSpacings.m}`,
+    },
+    h3: {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.extra}`,
+        fontSize: `${fontSizes.h3}`,
+        lineHeight: `${lineHeights.xs}`,
+        letterSpacing: `${letterSpacings.m}`,
+    },
+    h4: {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.extra}`,
+        fontSize: `${fontSizes.h4}`,
+        lineHeight: `${lineHeights.xs}`,
+        letterSpacing: `${letterSpacings.m}`,
+    },
+    h5: {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.extra}`,
+        fontSize: `${fontSizes.h5}`,
+        lineHeight: `${lineHeights.xs}`,
+        letterSpacing: `${letterSpacings.m}`,
+    },
+    h6: {
+        fontFamily: `${fontFamily}`,
+        fontWeight: `${fontWeights.extra}`,
+        fontSize: `${fontSizes.h6}`,
+        lineHeight: `${lineHeights.xs}`,
+        letterSpacing: `${letterSpacings.m}`,
+    },
+};

package/dist/react-native/src/theme/type/types.js

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

package/dist/types/native/src/components/SliceBackgroundBlur/SliceBackgroundBlur.d.ts

@@ -0,0 +1,3 @@
+import type { SliceBackgroundBlurProps } from './_types';
+/** Web/other-platform fallback. Metro selects the native implementation on iOS/Android. */
+export declare function SliceBackgroundBlur({ style, fallbackColor, }: Readonly<SliceBackgroundBlurProps>): import("react").JSX.Element;

package/dist/types/native/src/components/SliceBackgroundBlur/SliceBackgroundBlur.native.d.ts

@@ -0,0 +1,2 @@
+import type { SliceBackgroundBlurProps } from './_types';
+export declare function SliceBackgroundBlur({ fadeStop, blurIntensity, direction, fallbackColor, style, }: Readonly<SliceBackgroundBlurProps>): import("react").JSX.Element;

package/dist/types/native/src/components/SliceBackgroundBlur/_types.d.ts

@@ -0,0 +1,24 @@
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
+export interface SliceBackgroundBlurProps {
+    /**
+     * iOS only: direction from transparent to fully blurred. Defaults to 'down'.
+     * down: top to bottom; up: bottom to top;
+     * left: right to left; right: left to right.
+     */
+    direction?: 'down' | 'up' | 'left' | 'right';
+    /**
+     * iOS only: fraction of the view over which blur fades in (0–1).
+     * Defaults to 0, which renders uniform blur without a mask.
+     */
+    fadeStop?: number;
+    /**
+     * The intensity of the background blur effect. Defaults to 12
+     */
+    blurIntensity?: number;
+    /**
+     * Attach styles to the background view as View Style
+     */
+    style?: StyleProp<ViewStyle>;
+    /** Color used when native blur is unavailable or Reduce Transparency is enabled. */
+    fallbackColor?: ColorValue;
+}

package/dist/types/native/src/components/SliceBackgroundBlur/index.d.ts

@@ -0,0 +1,2 @@
+export { SliceBackgroundBlur } from './SliceBackgroundBlur';
+export type { SliceBackgroundBlurProps } from './_types';

package/dist/types/native/src/components/SliceButton/SliceButton.d.ts

@@ -0,0 +1,5 @@
+import type { SliceButtonProps } from './_types';
+/**
+ * Component logic & render
+ */
+export declare function SliceButton(props: Readonly<SliceButtonProps>): import("react").JSX.Element;

package/dist/types/native/src/components/SliceButton/_types.d.ts

@@ -0,0 +1,78 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { ColorValue, PressableProps } from 'react-native';
+import type Reanimated from 'react-native-reanimated';
+import type { BorderRadius, LiquidGlassBackground, Size } from '../../types/sharedTypes';
+type AnimatedViewProps = ComponentProps<typeof Reanimated.View>;
+export interface SliceButtonProps extends Omit<PressableProps, 'children' | 'style'> {
+    /**
+     * Element(s) to display on the button, typically just text
+     */
+    children?: ReactNode;
+    /**
+     * Button disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Pass through GestureResponderEvent when pressed
+     */
+    onPress?: PressableProps['onPress'];
+    /**
+     * Name of the button icon if any
+     */
+    icon?: string;
+    /**
+     * Icon position can be left / right or undefined
+     */
+    iconPosition?: 'left' | 'right';
+    /**
+     * Icon size
+     */
+    iconSize?: number;
+    /**
+     * Add an emphasis animation to the button
+     */
+    animatedStyle?: AnimatedViewProps['style'];
+    /**
+     * Primary or secondary type button
+     */
+    variant?: 'primary' | 'secondary';
+    /**
+     * Predefined sizes  that can be overriden with a numeric value
+     */
+    size?: Size;
+    /**
+     * Button transitions and animations
+     */
+    presence?: {
+        entering?: AnimatedViewProps['entering'];
+        exiting?: AnimatedViewProps['exiting'];
+    };
+    /**
+     * Enable layout animation definition for button layout changes
+     */
+    layout?: AnimatedViewProps['layout'];
+    /**
+     * Enable liquid glass background. Will only work on ios26+ with a fallback for
+     * non-supported devices
+     */
+    liquidGlassBackground?: LiquidGlassBackground;
+    /**
+     * Define a default border radius name or amount
+     */
+    borderRadius?: BorderRadius;
+    /**
+     * Border width in points. Negative/non-finite values become 0.
+     * Defaults to 0 for primary buttons and 1 for secondary buttons.
+     */
+    borderWidth?: number;
+    /**
+     * Border color. Defaults to the theme’s core-outline-secondary color.
+     */
+    borderColor?: ColorValue;
+    /**
+     * Solid background override, ignored while supported Liquid Glass is active.
+     * Disabled solid buttons use the disabled theme background.
+     */
+    backgroundColor?: ColorValue;
+}
+export {};

package/dist/types/native/src/components/SliceButton/index.d.ts

@@ -0,0 +1,2 @@
+export { SliceButton } from './SliceButton';
+export type { SliceButtonProps } from './_types';

package/dist/types/native/src/components/SliceIcon/SliceIcon.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from './_types';
+export declare const SliceIcon: import("react").MemoExoticComponent<(props: IconProps) => import("react").JSX.Element | null>;

package/dist/types/native/{components/Icon → src/components/SliceIcon}/icons.d.ts

@@ -89,6 +89,7 @@ export declare const SliceIcons: {
         readonly github: "github";
         readonly npm: "npm";
         readonly openAI: "openAI";
+        readonly android: "android";
     };
     readonly edit: {
         readonly edit: "edit";

package/dist/types/native/src/components/SliceIcon/index.d.ts

@@ -0,0 +1,3 @@
+export { SliceIcon } from './SliceIcon';
+export type { IconProps, IconProps as SliceIconProps } from './_types';
+export { SliceIcons } from './icons';

package/dist/types/native/src/components/SliceLiquidGlassView/SliceLiquidGlassView.d.ts

@@ -0,0 +1,3 @@
+import type { SliceLiquidGlassViewComponent } from './_types';
+/** Android/web fallback. Metro selects SliceLiquidGlassView.ios on iOS. */
+export declare const SliceLiquidGlassView: SliceLiquidGlassViewComponent;

package/dist/types/native/src/components/SliceLiquidGlassView/SliceLiquidGlassView.ios.d.ts

@@ -0,0 +1,2 @@
+import type { SliceLiquidGlassViewComponent } from './_types';
+export declare const SliceLiquidGlassView: SliceLiquidGlassViewComponent;

package/dist/types/native/src/components/SliceLiquidGlassView/_types.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentRef, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+import type { ColorValue, View, ViewProps } from 'react-native';
+export type SliceLiquidGlassViewComponent = ForwardRefExoticComponent<PropsWithoutRef<SliceLiquidGlassViewProps> & RefAttributes<ComponentRef<typeof View>>>;
+export interface SliceLiquidGlassViewProps extends ViewProps {
+    /** Custom glass child mounting does not support React Native's subview culling. */
+    removeClippedSubviews?: false;
+    /** Native iOS 26+ material. Defaults to regular. */
+    glassStyle?: 'regular' | 'clear';
+    /** Tint for the native glass material; does not change content opacity. */
+    glassTintColor?: ColorValue;
+    /** Enables native glass interaction feedback; use Pressable for actions. */
+    interactive?: boolean;
+    /** Uniform radius in points. Defaults to 24. Use this instead of style.borderRadius. */
+    cornerRadius?: number;
+    /** Background used on Android/web. Older iOS uses system blur. */
+    fallbackColor?: ColorValue;
+}

package/dist/types/native/src/components/SliceLiquidGlassView/index.d.ts

@@ -0,0 +1,2 @@
+export { SliceLiquidGlassView } from './SliceLiquidGlassView';
+export type { SliceLiquidGlassViewProps } from './_types';

package/dist/types/native/src/components/SliceText/SliceText.d.ts

@@ -0,0 +1,5 @@
+import type { StyledTextProps } from './_types';
+/**
+ * Utility wrapper around text component for easier styling of text using slice theme
+ */
+export declare function StyledText(props: Readonly<StyledTextProps>): import("react").JSX.Element;

package/dist/types/native/src/components/SliceText/_types.d.ts

@@ -0,0 +1,17 @@
+import type { TextProps } from 'react-native';
+import type { SliceNativeTheme } from '../../theme';
+export type StyledTextProps = TextProps & {
+    /**
+     * Keyed name of the slice type style to use
+     */
+    textStyle?: keyof SliceNativeTheme['type'];
+    /**
+     * Keyed name of the slice theme color to use
+     */
+    textColor?: keyof SliceNativeTheme['colors'];
+    /**
+     * If the text should be one line only, optionally the value of the line height to use
+     * Typically pass a value for headings to avoid large line heights
+     */
+    singleLine?: number | true;
+};

package/dist/types/native/src/components/SliceText/index.d.ts

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

package/dist/types/native/src/components/SliceTextInput/SliceTextInput.d.ts

@@ -0,0 +1,2 @@
+import type { SliceTextInputProps } from './_types';
+export declare function SliceTextInput(props: Readonly<SliceTextInputProps>): import("react").JSX.Element;

package/dist/types/native/src/components/SliceTextInput/_types.d.ts

@@ -0,0 +1,58 @@
+import type { ColorValue, TextInputProps } from 'react-native';
+import type { BaseAnimationBuilder, LayoutAnimationFunction } from 'react-native-reanimated';
+import type { BorderRadius, Size } from '../../types/sharedTypes';
+export interface SliceTextInputProps extends TextInputProps {
+    /**
+     * emits directive focus event
+     */
+    didFocus?: (focused: boolean) => void;
+    /**
+     * enables applying animations when the input layout changes using reanimated layout functions
+     */
+    layout?: typeof BaseAnimationBuilder | BaseAnimationBuilder | LayoutAnimationFunction;
+    /**
+     * When true, blur clears the input and calls onChangeText with an empty string. Default: false.
+     */
+    blurClears?: boolean;
+    /**
+     * Adds a slice icon to the start of the input field
+     */
+    icon?: string;
+    /**
+     * Optionally define the icon color
+     */
+    iconColor?: string;
+    /**
+     * Optionally define the icon size
+     */
+    iconSize?: number;
+    /**
+     * Optionally hide icon when input is focused - default = true
+     */
+    hideIconOnFocus?: boolean;
+    /**
+     * Expose a way to set focus on input from external events
+     */
+    focused?: boolean;
+    /**
+     * Element size in terms of height
+     */
+    size?: Size;
+    /**
+     * Define a default border radius name or amount
+     */
+    borderRadius?: BorderRadius;
+    /**
+     * Border width in points. Negative/non-finite values become 0.
+     * Defaults to 1.
+     */
+    borderWidth?: number;
+    /**
+     * Border color. Defaults to the theme’s core-outline-secondary color.
+     */
+    borderColor?: ColorValue;
+    /**
+     * Optional background color override
+     */
+    backgroundColor?: ColorValue;
+}

package/dist/types/native/src/components/SliceTextInput/index.d.ts

@@ -0,0 +1,2 @@
+export { SliceTextInput } from './SliceTextInput';
+export type { SliceTextInputProps } from './_types';

package/dist/types/native/src/components/index.d.ts

@@ -0,0 +1,12 @@
+export { SliceIcon, SliceIcons } from './SliceIcon';
+export type { IconProps, SliceIconProps } from './SliceIcon';
+export { StyledText } from './SliceText';
+export type { StyledTextProps } from './SliceText';
+export { SliceButton } from './SliceButton';
+export type { SliceButtonProps } from './SliceButton';
+export { SliceTextInput } from './SliceTextInput';
+export type { SliceTextInputProps } from './SliceTextInput';
+export { SliceLiquidGlassView } from './SliceLiquidGlassView';
+export type { SliceLiquidGlassViewProps } from './SliceLiquidGlassView';
+export { SliceBackgroundBlur } from './SliceBackgroundBlur';
+export type { SliceBackgroundBlurProps } from './SliceBackgroundBlur';

package/dist/types/native/src/hooks/index.d.ts

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

package/dist/types/native/src/hooks/useCreateThemedStyles/index.d.ts

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