@cdek-it/react-native-ui-kit 0.6.9 → 1.0.0-beta.0

package/dist/components/Typography/Anchor.js

@@ -1,14 +1,13 @@
 import { Fragment, memo, useCallback, useMemo, useState } from 'react';
 import { Pressable, Text, View, } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { SvgUniversal } from '../../utils/SvgUniversal';
-import { makeStyles } from '../../utils/makeStyles';
 const WORD_JOINER = '\u2060'; // символ невидимого пробела, чтобы избежать разрыва строки между текстом и иконкой
 /**
  * Используется для ссылок и якорей
  * @see https://www.figma.com/design/2ZnL6XPKEpxAHvrlbRvnMu/Template-Tailwind-CSS--DS-?node-id=1-271
  */
 export const Anchor = memo(({ onPress, base, visited, children, noWrapper, LeftIcon, RightIcon, testID, style, ...other }) => {
-    const styles = useStyles();
     const [pressed, setPressed] = useState(false);
     const onPressIn = useCallback(() => setPressed(true), []);
     const onPressOut = useCallback(() => setPressed(false), []);
@@ -18,11 +17,16 @@ export const Anchor = memo(({ onPress, base, visited, children, noWrapper, LeftI
             return {};
         }
         return { style: styles.container, testID: testID || AnchorTestId.root };
-    }, [noWrapper, styles.container, testID]);
-    const iconColor = useMemo(() => (visited ? styles.visited.color : styles.text.color), [styles.text.color, styles.visited.color, visited]);
+    }, [noWrapper, testID]);
+    const iconSize = base ? styles.iconBase : styles.icon;
+    const iconUniProps = ({ typography: t }) => ({
+        color: visited
+            ? t.Color.Service['text-help']
+            : t.Color.Service['text-info'],
+    });
     return (<Wrapper {...containerProps}>
         {LeftIcon ? (<Pressable style={styles.leftIconContainer} testID={AnchorTestId.leftPressable} onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut}>
-            <SvgUniversal source={LeftIcon} testID={AnchorTestId.leftIcon} {...styles.icon} {...(base ? styles.iconBase : {})} color={iconColor}/>
+            <SvgUniversal {...iconSize} source={LeftIcon} testID={AnchorTestId.leftIcon} uniProps={iconUniProps}/>
           </Pressable>) : null}
         <Text suppressHighlighting style={[
             styles.text,
@@ -37,11 +41,11 @@ export const Anchor = memo(({ onPress, base, visited, children, noWrapper, LeftI
         </Text>
 
         {RightIcon ? (<Pressable style={styles.rightIconContainer} testID={AnchorTestId.rightPressable} onPress={onPress} onPressIn={onPressIn} onPressOut={onPressOut}>
-            <SvgUniversal source={RightIcon} {...styles.icon} {...(base ? styles.iconBase : {})} color={iconColor} testID={AnchorTestId.rightIcon}/>
+            <SvgUniversal {...iconSize} source={RightIcon} testID={AnchorTestId.rightIcon} uniProps={iconUniProps}/>
           </Pressable>) : null}
       </Wrapper>);
 });
-const useStyles = makeStyles(({ spacing, typography, fonts }) => ({
+const styles = StyleSheet.create(({ spacing, typography, fonts }) => ({
     container: { flexDirection: 'row', alignItems: 'center' },
     text: {
         flexShrink: 1,

package/dist/components/Typography/Body.js

@@ -1,7 +1,6 @@
 import { Text } from 'react-native';
-import { makeStyles } from '../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
 export const Body = ({ base, color = 'default', disabled, paragraph, weight = 'regular', style, ...other }) => {
-    const styles = useStyles();
     return (<Text style={[
             styles.text,
             styles[weight],
@@ -12,7 +11,7 @@ export const Body = ({ base, color = 'default', disabled, paragraph, weight = 'r
             style,
         ]} testID='Body' {...other}/>);
 };
-const useStyles = makeStyles(({ theme, typography, fonts }) => ({
+const styles = StyleSheet.create(({ theme, typography, fonts }) => ({
     text: {
         fontSize: typography.Size['text-lg'],
         includeFontPadding: false,

package/dist/components/Typography/Caption.js

@@ -1,8 +1,7 @@
 import { Text, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { SvgUniversal } from '../../utils/SvgUniversal';
-import { makeStyles } from '../../utils/makeStyles';
 export const Caption = ({ color = 'default', disabled, style, Icon, ...other }) => {
-    const styles = useStyles();
     const text = (<Text style={[
             styles.text,
             styles[color],
@@ -12,14 +11,20 @@ export const Caption = ({ color = 'default', disabled, style, Icon, ...other })
         ]} testID={CaptionTestId.text} {...other}/>);
     if (Icon) {
         return (<View style={styles.withIconContainer}>
-        <SvgUniversal source={Icon} testID={CaptionTestId.icon} {...styles[color]} {...styles.icon}/>
+        <SvgUniversal {...styles.icon} source={Icon} testID={CaptionTestId.icon} uniProps={({ theme }) => ({
+                color: {
+                    default: theme.General.textColor,
+                    primary: theme.General.primaryColor,
+                    secondary: theme.General.textSecondaryColor,
+                }[color],
+            })}/>
         {text}
       </View>);
     }
     return text;
 };
 const CaptionTestId = { text: 'CaptionText', icon: 'CaptionIcon' };
-const useStyles = makeStyles(({ theme, spacing, typography, fonts }) => ({
+const styles = StyleSheet.create(({ theme, spacing, typography, fonts }) => ({
     text: {
         fontSize: typography.Size['text-sm'],
         includeFontPadding: false,

package/dist/components/Typography/Service.js

@@ -1,14 +1,13 @@
 import { IconAlertTriangle, IconCircleCheck, IconCircleX, IconHelpCircle, IconInfoCircle, } from '@tabler/icons-react-native';
 import { useMemo } from 'react';
 import { Text, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { SvgUniversal } from '../../utils/SvgUniversal';
-import { makeStyles } from '../../utils/makeStyles';
 /**
  * @see https://www.figma.com/design/2ZnL6XPKEpxAHvrlbRvnMu/Template-Tailwind-CSS-(DS)?node-id=1-284&m=dev
  */
 export const Service = ({ variant = 'success', showIcon = true, base = true, Icon: IconFromProps, ...other }) => {
-    const styles = useStyles();
-    const { Icon, variantStyle, iconSize, textStyles, containerStyle } = useMemo(() => {
+    const { Icon, iconSize, textStyles, containerStyle } = useMemo(() => {
         const iconMap = {
             danger: { Icon: IconCircleX, style: styles.danger },
             warning: { Icon: IconAlertTriangle, style: styles.warning },
@@ -18,7 +17,6 @@ export const Service = ({ variant = 'success', showIcon = true, base = true, Ico
         };
         return {
             Icon: IconFromProps || iconMap[variant]?.Icon || IconInfoCircle,
-            variantStyle: iconMap[variant]?.style || styles.info,
             iconSize: base ? styles.iconBase : styles.icon,
             textStyles: [
                 styles.textCommon,
@@ -27,13 +25,21 @@ export const Service = ({ variant = 'success', showIcon = true, base = true, Ico
             ],
             containerStyle: base ? styles.containerBase : styles.container,
         };
-    }, [variant, base, styles, IconFromProps]);
+    }, [variant, base, IconFromProps]);
     return (<View style={containerStyle}>
-      {showIcon ? (<SvgUniversal color={variantStyle.color} height={iconSize.height} source={Icon} width={iconSize.width}/>) : null}
+      {showIcon ? (<SvgUniversal {...iconSize} source={Icon} uniProps={({ typography: t }) => ({
+                color: {
+                    danger: t.Color.Service['text-danger'],
+                    warning: t.Color.Service['text-warning'],
+                    success: t.Color.Service['text-success'],
+                    info: t.Color.Service['text-info'],
+                    help: t.Color.Service['text-help'],
+                }[variant],
+            })}/>) : null}
       <Text style={textStyles} {...other}/>
     </View>);
 };
-const useStyles = makeStyles(({ typography, spacing, fonts }) => ({
+const styles = StyleSheet.create(({ typography, spacing, fonts }) => ({
     iconBase: {
         width: typography.Size['text-xl'],
         height: typography.Size['text-xl'],

package/dist/components/Typography/Subtitle.js

@@ -1,15 +1,12 @@
 import { memo } from 'react';
 import { Text } from 'react-native';
-import { makeStyles } from '../../utils/makeStyles';
+import { StyleSheet } from 'react-native-unistyles';
 /**
  * Используется для подзаголовков
  * @see https://www.figma.com/design/2ZnL6XPKEpxAHvrlbRvnMu/Template-Tailwind-CSS-(DS)?node-id=1-245
  */
-export const Subtitle = memo(({ base = false, color = 'default', style, ...other }) => {
-    const styles = useStyles();
-    return (<Text style={[styles.text, styles[color], base && styles.base, style]} testID='Subtitle' {...other}/>);
-});
-const useStyles = makeStyles(({ theme, typography, fonts }) => ({
+export const Subtitle = memo(({ base = false, color = 'default', style, ...other }) => (<Text style={[styles.text, styles[color], base && styles.base, style]} testID='Subtitle' {...other}/>));
+const styles = StyleSheet.create(({ theme, typography, fonts }) => ({
     text: {
         fontSize: typography.Size['text-sm'],
         fontWeight: 700,

package/dist/components/Typography/Title.js

@@ -1,10 +1,7 @@
 import { Text } from 'react-native';
-import { makeStyles } from '../../utils/makeStyles';
-export const Title = ({ level, style, ...other }) => {
-    const styles = useStyles();
-    return (<Text style={[styles.text, styles[level], style]} testID='Title' {...other}/>);
-};
-const useStyles = makeStyles(({ theme, typography, fonts }) => ({
+import { StyleSheet } from 'react-native-unistyles';
+export const Title = ({ level, style, ...other }) => (<Text style={[styles.text, styles[level], style]} testID='Title' {...other}/>);
+const styles = StyleSheet.create(({ theme, typography, fonts }) => ({
     text: {
         color: theme.General.textColor,
         fontFamily: fonts.primary,

package/dist/hooks/useChangeTheme.d.ts

@@ -1 +1,2 @@
-export declare const useChangeTheme: () => (theme: import("..").ThemeVariant) => void;
+import { ThemeVariant } from '../theme';
+export declare const useChangeTheme: () => (theme: ThemeVariant) => void;

package/dist/hooks/useChangeTheme.js

@@ -1,5 +1,12 @@
-import { useContext } from 'react';
-import { ThemeContext } from '../theme';
+import { useCallback } from 'react';
+import { UnistylesRuntime } from 'react-native-unistyles';
+import { ThemeVariant } from '../theme';
+const THEME_MAP = {
+    [ThemeVariant.Light]: 'light',
+    [ThemeVariant.Dark]: 'dark',
+};
 export const useChangeTheme = () => {
-    return useContext(ThemeContext).changeTheme;
+    return useCallback((theme) => {
+        UnistylesRuntime.setTheme(THEME_MAP[theme]);
+    }, []);
 };

package/dist/hooks/useFonts.d.ts

@@ -1 +1,2 @@
-export declare const useFonts: () => import("../theme").FontsConfig;
+import type { FontsConfig } from '../theme';
+export declare const useFonts: () => FontsConfig;

package/dist/hooks/useFonts.js

@@ -1,5 +1,5 @@
-import { useContext } from 'react';
-import { ThemeContext } from '../theme';
+import { useUnistyles } from 'react-native-unistyles';
 export const useFonts = () => {
-    return useContext(ThemeContext).fonts;
+    const { theme } = useUnistyles();
+    return theme.fonts;
 };

package/dist/hooks/useTheme.d.ts

@@ -1 +1,2 @@
-export declare const useTheme: () => import("..").ThemeVariant;
+import { ThemeVariant } from '../theme';
+export declare const useTheme: () => ThemeVariant;

package/dist/hooks/useTheme.js

@@ -1,5 +1,7 @@
-import { useContext } from 'react';
-import { ThemeContext } from '../theme';
-export const useTheme = () => {
-    return useContext(ThemeContext).theme;
+import { UnistylesRuntime } from 'react-native-unistyles';
+import { ThemeVariant } from '../theme';
+const THEME_VARIANT_MAP = {
+    light: ThemeVariant.Light,
+    dark: ThemeVariant.Dark,
 };
+export const useTheme = () => THEME_VARIANT_MAP[UnistylesRuntime.themeName ?? 'light'];

package/dist/index.d.ts

@@ -1,6 +1,7 @@
+import './theme';
 export * from './components';
 export { useChangeTheme } from './hooks/useChangeTheme';
-export { ThemeContext, ThemeContextProvider, ThemeVariant, darkTheme, lightTheme, } from './theme';
-export { makeStyles } from './utils/makeStyles';
+export { ThemeContext, ThemeContextProvider, ThemeVariant, darkTheme, lightTheme, type ThemeType, type FontsConfig, type FontsConfigType, type ThemeContextProviderProps, } from './theme';
+export { useFonts } from './hooks/useFonts';
 export { useTheme } from './hooks/useTheme';
 export { SvgUniversal, type SvgSource } from './utils/SvgUniversal';

package/dist/index.js

@@ -1,6 +1,7 @@
+import './theme';
 export * from './components';
 export { useChangeTheme } from './hooks/useChangeTheme';
 export { ThemeContext, ThemeContextProvider, ThemeVariant, darkTheme, lightTheme, } from './theme';
-export { makeStyles } from './utils/makeStyles';
+export { useFonts } from './hooks/useFonts';
 export { useTheme } from './hooks/useTheme';
 export { SvgUniversal } from './utils/SvgUniversal';

package/dist/theme/ThemeContext.d.ts

@@ -1,15 +1,17 @@
 import { type ReactNode } from 'react';
-import { ThemeVariant, type FontsConfig } from './types';
-interface ThemeContextType {
-    theme: ThemeVariant;
-    fonts: FontsConfig;
-    changeTheme: (theme: ThemeVariant) => void;
+import { darkTheme } from './darkTheme';
+import { lightTheme } from './lightTheme';
+import { type FontsConfig, ThemeVariant } from './types';
+declare module 'react-native-unistyles' {
+    interface UnistylesThemes {
+        light: typeof lightTheme;
+        dark: typeof darkTheme;
+    }
 }
 export interface ThemeContextProviderProps {
     readonly initialTheme?: ThemeVariant;
     readonly fonts?: FontsConfig;
     readonly children: ReactNode;
 }
-export declare const ThemeContext: import("react").Context<ThemeContextType>;
+export declare const ThemeContext: import("react").Context<null>;
 export declare const ThemeContextProvider: ({ children, initialTheme, fonts, }: ThemeContextProviderProps) => import("react").JSX.Element;
-export {};

package/dist/theme/ThemeContext.js

@@ -1,21 +1,28 @@
-import { createContext, useCallback, useMemo, useState, } from 'react';
+import { createContext, useLayoutEffect } from 'react';
+import { StyleSheet, UnistylesRuntime } from 'react-native-unistyles';
 import { SkeletonContextProvider } from '../utils/SkeletonContext';
+import { darkTheme } from './darkTheme';
+import { lightTheme } from './lightTheme';
 import { ThemeVariant } from './types';
-const defaultThemeContext = {
-    theme: ThemeVariant.Light,
-    fonts: { primary: 'TT Fellows', secondary: 'PT Sans' },
-    changeTheme: () => {
-        /* do nothing */
-    },
+StyleSheet.configure({
+    settings: { initialTheme: 'light' },
+    themes: { light: lightTheme, dark: darkTheme },
+});
+const THEME_NAME_MAP = {
+    [ThemeVariant.Light]: 'light',
+    [ThemeVariant.Dark]: 'dark',
 };
-export const ThemeContext = createContext(defaultThemeContext);
-export const ThemeContextProvider = ({ children, initialTheme = defaultThemeContext.theme, fonts = defaultThemeContext.fonts, }) => {
-    const [theme, setTheme] = useState(initialTheme);
-    const changeTheme = useCallback((nextTheme) => {
-        setTheme(nextTheme);
+export const ThemeContext = createContext(null);
+export const ThemeContextProvider = ({ children, initialTheme = ThemeVariant.Light, fonts, }) => {
+    useLayoutEffect(() => {
+        UnistylesRuntime.setTheme(THEME_NAME_MAP[initialTheme]);
+        if (fonts) {
+            UnistylesRuntime.updateTheme('light', (t) => ({ ...t, fonts }));
+            UnistylesRuntime.updateTheme('dark', (t) => ({ ...t, fonts }));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- initial* props применяем только на mount
     }, []);
-    const contextValue = useMemo(() => ({ theme, fonts, changeTheme }), [theme, fonts, changeTheme]);
-    return (<ThemeContext.Provider value={contextValue}>
+    return (<ThemeContext.Provider value={null}>
       <SkeletonContextProvider>{children}</SkeletonContextProvider>
     </ThemeContext.Provider>);
 };

package/dist/theme/darkTheme.js

@@ -6,4 +6,5 @@ import { commonTheme } from './commonTheme';
 export const darkTheme = {
     theme: { ...darkThemeAssets, InputSize, ModalSize, custom: customDark },
     ...commonTheme,
+    fonts: { primary: 'TT Fellows', secondary: 'PT Sans' },
 };

package/dist/theme/index.d.ts

@@ -1,4 +1,4 @@
 export { darkTheme } from './darkTheme';
 export { lightTheme } from './lightTheme';
-export { ThemeContextProvider, ThemeContext } from './ThemeContext';
+export { ThemeContext, ThemeContextProvider, type ThemeContextProviderProps, } from './ThemeContext';
 export { type ThemeType, ThemeVariant, type FontsConfigType, type FontsConfig, } from './types';

package/dist/theme/index.js

@@ -1,4 +1,4 @@
 export { darkTheme } from './darkTheme';
 export { lightTheme } from './lightTheme';
-export { ThemeContextProvider, ThemeContext } from './ThemeContext';
+export { ThemeContext, ThemeContextProvider, } from './ThemeContext';
 export { ThemeVariant, } from './types';

package/dist/theme/lightTheme.js

@@ -6,4 +6,5 @@ import { commonTheme } from './commonTheme';
 export const lightTheme = {
     theme: { ...lightThemeAssets, InputSize, ModalSize, custom: customLight },
     ...commonTheme,
+    fonts: { primary: 'TT Fellows', secondary: 'PT Sans' },
 };

package/dist/theme/types.d.ts

@@ -30,6 +30,7 @@ export interface ThemeType {
     typography: typeof typography;
     custom: typeof customCommon;
     shadow: typeof shadow;
+    fonts: FontsConfig;
 }
 export declare enum ThemeVariant {
     Light = "Light",

package/dist/utils/SvgUniversal.d.ts

@@ -1,26 +1,21 @@
-import { type ComponentType } from 'react';
+import { type ComponentType, type ForwardRefExoticComponent, type PropsWithoutRef, type RefAttributes } from 'react';
 import { type SvgProps } from 'react-native-svg';
+import type { ThemeType } from '../theme/types';
 export type SvgSource = {
     uri: string;
 } | {
     xml: string;
 } | ComponentType<SvgProps>;
-interface SvgUniversalProps extends SvgProps {
+export interface SvgUniversalProps extends SvgProps {
     /** Источник SVG */
     source: SvgSource;
 }
-/**
- * Компонент для рендера SVG из разных источников
- * Поддерживает:
- * - uri
- * - xml
- * - ComponentType<SvgProps>
- * @example
- * <SvgUniversal source={{ uri: 'https://example.com/icon.svg' }} />
- * <SvgUniversal source={{ xml: '<svg><path d="M1 1h1v1H1z" /></svg>' }} />
- * <SvgUniversal source={IconUser} />
- */
-export declare const SvgUniversal: import("react").NamedExoticComponent<SvgUniversalProps>;
+type SvgUniversalComponent = ForwardRefExoticComponent<PropsWithoutRef<Partial<SvgUniversalProps> & {
+    uniProps?: (theme: ThemeType) => Omit<Partial<SvgUniversalProps>, 'style' | 'contentContainerStyle'> & {
+        key?: string;
+    };
+}> & RefAttributes<unknown>>;
+export declare const SvgUniversal: SvgUniversalComponent;
 export declare const SvgUniversalTestId: {
     component: string;
     uri: string;

package/dist/utils/SvgUniversal.js

@@ -1,17 +1,24 @@
-import { memo } from 'react';
+import { memo, } from 'react';
 import { SvgUri, SvgXml } from 'react-native-svg';
+import { withUnistyles } from 'react-native-unistyles';
 /**
  * Компонент для рендера SVG из разных источников
  * Поддерживает:
  * - uri
  * - xml
  * - ComponentType<SvgProps>
+ *
+ * Подписан на обновления темы Unistyles через uniProps
  * @example
  * <SvgUniversal source={{ uri: 'https://example.com/icon.svg' }} />
  * <SvgUniversal source={{ xml: '<svg><path d="M1 1h1v1H1z" /></svg>' }} />
  * <SvgUniversal source={IconUser} />
+ * <SvgUniversal
+ *   source={IconUser}
+ *   uniProps={(theme) => ({ color: theme.colors.primary })}
+ * />
  */
-export const SvgUniversal = memo(({ source, ...rest }) => {
+const SvgUniversalRaw = memo(({ source, ...rest }) => {
     if ('uri' in source) {
         return <SvgUri testID={SvgUniversalTestId.uri} uri={source.uri} {...rest}/>;
     }
@@ -21,6 +28,7 @@ export const SvgUniversal = memo(({ source, ...rest }) => {
     const Component = source;
     return <Component testID={SvgUniversalTestId.component} {...rest}/>;
 });
+export const SvgUniversal = withUnistyles(SvgUniversalRaw);
 export const SvgUniversalTestId = {
     component: 'SvgUniversalComponent',
     uri: 'SvgUniversalUri',

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export { SvgUniversal, SvgUniversalTestId, type SvgSource, } from './SvgUniversal';

package/dist/utils/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdek-it/react-native-ui-kit",
-  "version": "0.6.9",
+  "version": "1.0.0-beta.0",
   "description": "UI kit на основе Prime Faces, Prime Flex для React Native",
   "license": "MIT",
   "homepage": "https://developer.cdek.ru/design-system",
@@ -24,17 +24,23 @@
   "files": [
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json",
     "test": "jest",
-    "start": "expo start --dev-client",
+    "start": "expo start --dev-client --clear",
     "android": "expo run:android",
     "ios": "expo run:ios --no-install",
     "storybook-generate": "sb-rn-get-stories --config-path .storybook && sed -i -e 's/export const view = global.view/export const view: ReturnType<typeof start> = global.view/' .storybook/storybook.requires.ts && prettier .storybook --write",
     "doctor": "expo-doctor",
     "check": "expo install --check",
-    "lint:check": "eslint .",
-    "lint:fix": "eslint --fix .",
+    "lint:check": "eslint --cache .",
+    "lint:fix": "eslint --fix --cache .",
     "prettier:check": "prettier . --check",
     "prettier:fix": "prettier . --write",
     "prettier:watch": "onchange . -- prettier --write --ignore-unknown \"{{changed}}\"",
@@ -106,10 +112,12 @@
     "react-native": "0.81.5",
     "react-native-advanced-input-mask": "1.4.6",
     "react-native-gesture-handler": "2.29.1",
-    "react-native-reanimated": "4.1.1",
+    "react-native-nitro-modules": "0.35.2",
+    "react-native-reanimated": "4.2.1",
     "react-native-safe-area-context": "5.6.2",
     "react-native-svg": "15.15.1",
-    "react-native-worklets": "0.5.1",
+    "react-native-unistyles": "3.2.3",
+    "react-native-worklets": "0.7.1",
     "release-it": "19.1.0",
     "standard-version": "9.5.0",
     "storybook": "10.1.10",
@@ -123,8 +131,10 @@
     "expo": ">=54.x.x",
     "react": ">=19.1",
     "react-native": ">=0.81.5",
-    "react-native-reanimated": ">=4.1.1",
-    "react-native-svg": ">=15.15.1"
+    "react-native-reanimated": ">=4.2.1",
+    "react-native-svg": ">=15.15.1",
+    "react-native-unistyles": ">=3.2.3",
+    "react-native-worklets": ">=0.7.0"
   },
   "peerDependenciesMeta": {
     "expo": {

package/dist/components/Button/styles/index.d.ts

@@ -1,2 +0,0 @@
-export { useBasicButtonStyles } from './useBasicButtonStyles';
-export { useSeverityButtonStyles } from './useSeverityButtonStyles';

package/dist/components/Button/styles/index.js

@@ -1,2 +0,0 @@
-export { useBasicButtonStyles } from './useBasicButtonStyles';
-export { useSeverityButtonStyles } from './useSeverityButtonStyles';

package/dist/components/Button/styles/useBasicButtonStyles.d.ts

@@ -1,98 +0,0 @@
-export declare const useBasicButtonStyles: () => {
-    containerVariantStyles: {
-        primary: {
-            borderColor: string;
-            backgroundColor: string;
-        };
-        secondary: {
-            borderColor: string;
-            backgroundColor: string;
-        };
-        tertiary: {
-            borderColor: string;
-            backgroundColor: string;
-        };
-        text: {
-            borderColor: string;
-            backgroundColor: string;
-        };
-        link: {
-            paddingHorizontal: number;
-            paddingVertical: number;
-            height: "auto";
-            minHeight: "auto";
-            borderColor: string;
-            backgroundColor: string;
-        };
-    };
-    labelVariantStyles: {
-        primary: {
-            color: string;
-        };
-        secondary: {
-            color: string;
-        };
-        tertiary: {
-            color: string;
-        };
-        text: {
-            color: string;
-        };
-        link: {
-            color: string;
-        };
-    };
-    pressedVariantStyles: {
-        primary: {
-            borderColor: string;
-            backgroundColor: string;
-        };
-        secondary: {
-            borderColor: string;
-            backgroundColor: string;
-        };
-        tertiary: {
-            borderColor: string;
-            backgroundColor: string;
-        };
-        text: {
-            borderColor: string;
-            backgroundColor: string;
-        };
-        link: {};
-    };
-    iconVariantStyles: {
-        primary: {
-            color: string;
-        };
-        secondary: {
-            color: string;
-        };
-        tertiary: {
-            color: string;
-        };
-        text: {
-            color: string;
-        };
-        link: {
-            color: string;
-        };
-    };
-    pressedLabelVariantStyles: {
-        primary: {
-            color: string;
-        };
-        secondary: {
-            color: string;
-        };
-        tertiary: {
-            color: string;
-        };
-        text: {
-            color: string;
-        };
-        link: {
-            color: string;
-        };
-    };
-};