ui-rn 2.0.1 → 2.0.3

package/dist/Icon/PropsStyle.d.ts

@@ -0,0 +1,15 @@
+import { RNVectorIcon } from "./index";
+import { FlexStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { MakeProp } from "./makeProps";
+export interface Props extends MakeProp {
+    name: string;
+    size?: number;
+    type?: keyof typeof RNVectorIcon;
+    onPress?: () => void;
+    styleContainer?: StyleProp<ViewStyle>;
+    style?: StyleProp<TextStyle>;
+    alignSelf?: FlexStyle['alignSelf'];
+    disabled?: boolean;
+    activeOpacity?: number;
+    color?: string;
+}

package/dist/Icon/PropsStyle.js

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

package/dist/Icon/index.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import FontAwesome5 from "react-native-vector-icons/FontAwesome5";
+/**
+ * Collection of React Native Vector Icons
+ * Provides access to various icon sets from react-native-vector-icons
+ */
+export declare const RNVectorIcon: {
+    Ionicons: typeof Ionicons;
+    AntDesign: typeof Ionicons;
+    Entypo: typeof Ionicons;
+    EvilIcons: typeof Ionicons;
+    MaterialIcons: typeof Ionicons;
+    MaterialCommunityIcons: typeof Ionicons;
+    FontAwesome: typeof Ionicons;
+    FontAwesome5: typeof FontAwesome5;
+    SimpleLineIcons: typeof Ionicons;
+    Feather: typeof Ionicons;
+    Octicons: typeof Ionicons;
+    Fontisto: typeof Ionicons;
+};
+export type IconType = keyof typeof RNVectorIcon;
+import { Props } from "./PropsStyle";
+export default class IconApp extends React.PureComponent<Props> {
+    static defaultProps: Props;
+    res: {
+        color: string;
+        style: any;
+        size: number;
+    };
+    constructor(props: Props);
+    render(): React.JSX.Element | null;
+}

package/dist/Icon/index.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { StyleSheet, TouchableOpacity } from "react-native";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import EvilIcons from "react-native-vector-icons/EvilIcons";
+import FontAwesome from "react-native-vector-icons/FontAwesome";
+import FontAwesome5 from "react-native-vector-icons/FontAwesome5";
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
+import MaterialIcons from "react-native-vector-icons/MaterialIcons";
+import Entypo from "react-native-vector-icons/Entypo";
+import AntDesign from "react-native-vector-icons/AntDesign";
+import SimpleLineIcons from "react-native-vector-icons/SimpleLineIcons";
+import Feather from "react-native-vector-icons/Feather";
+import Octicons from "react-native-vector-icons/Octicons";
+import Fontisto from "react-native-vector-icons/Fontisto";
+/**
+ * Collection of React Native Vector Icons
+ * Provides access to various icon sets from react-native-vector-icons
+ */
+export const RNVectorIcon = {
+    Ionicons,
+    AntDesign,
+    Entypo,
+    EvilIcons,
+    MaterialIcons,
+    MaterialCommunityIcons,
+    FontAwesome,
+    FontAwesome5,
+    SimpleLineIcons,
+    Feather,
+    Octicons,
+    Fontisto,
+};
+import { makeProps } from "./makeProps";
+export default class IconApp extends React.PureComponent {
+    static defaultProps = {
+        size: 23,
+        color: "gray",
+        name: "home",
+    };
+    res;
+    constructor(props) {
+        super(props);
+        this.res = makeProps(props);
+    }
+    render() {
+        const { size, color, style } = this.res;
+        if (this.props.name === "none")
+            return null;
+        const IconView = RNVectorIcon[this.props.type || "Ionicons"];
+        if (typeof this.props.onPress != "function") {
+            return (<IconView size={size} color={color} style={style} name={this.props.name} onPress={this.props.onPress}/>);
+        }
+        return (<TouchableOpacity activeOpacity={this.props.activeOpacity || 0.5} disabled={typeof this.props.onPress == "function" ? this.props.disabled : true} style={[
+                styles.container,
+                { ...(this.props.alignSelf && { alignSelf: this.props.alignSelf }) },
+                this.props.style,
+                this.props.styleContainer,
+            ]}>
+        <IconView size={size} color={color} style={style} name={this.props.name} onPress={this.props.onPress}/>
+      </TouchableOpacity>);
+    }
+}
+/**
+ * Default styles for the IconApp component
+ */
+const styles = StyleSheet.create({
+    container: {
+        alignItems: "center",
+        justifyContent: "center",
+        alignSelf: "flex-start",
+    },
+});

package/dist/Icon/makeProps.d.ts

@@ -0,0 +1,37 @@
+import { ViewStyle } from "react-native";
+declare enum COLORS {
+    white = 1,
+    red = 2,
+    blue = 3,
+    black = 4,
+    green = 5,
+    yellow = 6,
+    pink = 7,
+    gray = 8,
+    primary = 9
+}
+type ColorKey = keyof typeof COLORS;
+type ColorModifiers = Partial<Record<ColorKey, boolean>>;
+declare const PROPS: {
+    readonly mar: "margin";
+    readonly marH: "marginHorizontal";
+    readonly marV: "marginVertical";
+    readonly marL: "marginLeft";
+    readonly marT: "marginTop";
+    readonly marR: "marginRight";
+    readonly marB: "marginBottom";
+    readonly zIndex: "zIndex";
+    readonly opacity: "opacity";
+    readonly size: "size";
+};
+export type ShortKey = keyof typeof PROPS;
+export type Convert<T extends string> = Partial<Record<T, boolean | number | string>>;
+export type MakeProp = Convert<ShortKey> & ColorModifiers;
+type Result = {
+    size: number;
+    color: string;
+    name: string;
+    style: ViewStyle;
+};
+export declare const makeProps: (props: Record<string, any>) => Result;
+export {};

package/dist/Icon/makeProps.js

@@ -0,0 +1,64 @@
+import { StyleSheet } from "react-native";
+var COLORS;
+(function (COLORS) {
+    COLORS[COLORS["white"] = 1] = "white";
+    COLORS[COLORS["red"] = 2] = "red";
+    COLORS[COLORS["blue"] = 3] = "blue";
+    COLORS[COLORS["black"] = 4] = "black";
+    COLORS[COLORS["green"] = 5] = "green";
+    COLORS[COLORS["yellow"] = 6] = "yellow";
+    COLORS[COLORS["pink"] = 7] = "pink";
+    COLORS[COLORS["gray"] = 8] = "gray";
+    COLORS[COLORS["primary"] = 9] = "primary";
+})(COLORS || (COLORS = {}));
+const PROPS = {
+    mar: "margin",
+    marH: "marginHorizontal",
+    marV: "marginVertical",
+    marL: "marginLeft",
+    marT: "marginTop",
+    marR: "marginRight",
+    marB: "marginBottom",
+    zIndex: "zIndex",
+    opacity: "opacity",
+    size: "size",
+};
+/** type guards */
+const isColorKey = (key) => key in COLORS;
+const isShortKey = (key) => key in PROPS;
+export const makeProps = (props) => {
+    const style = {};
+    const res = {
+        size: props.size ?? 23,
+        color: props.color ?? "gray",
+        name: props.name ?? "home",
+    };
+    Object.keys(props).forEach((key) => {
+        const match = key.match(/^(\w+)-(\w+)$/);
+        // color modifier
+        if (isColorKey(key)) {
+            res.color = key;
+            return;
+        }
+        if (match) {
+            const rawKey = match[1];
+            const rawValue = match[2];
+            const value = isNaN(Number(rawValue))
+                ? rawValue
+                : Number(rawValue);
+            if (rawKey === "size") {
+                res.size = Number(rawValue);
+            }
+            else if (rawKey === "color") {
+                res.color = rawValue;
+            }
+            else if (isShortKey(rawKey)) {
+                style[PROPS[rawKey]] = value;
+            }
+        }
+    });
+    return {
+        ...res,
+        style: StyleSheet.create({ style }).style,
+    };
+};

package/dist/Layout.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { ForceInsetProp } from "react-native-safe-area-view";
+import { StyleProp, ViewStyle } from "react-native";
+export interface LayoutAppProps {
+    children?: any;
+    forceInset?: ForceInsetProp;
+    forceInsetBot?: ForceInsetProp;
+    styleBot?: StyleProp<ViewStyle> | undefined;
+    style?: StyleProp<ViewStyle> | undefined;
+    isBack?: boolean;
+    disable?: boolean;
+}
+export default function Layout({ children, forceInset, forceInsetBot, styleBot, style, disable, }: LayoutAppProps): React.JSX.Element;

package/dist/Layout.js

@@ -0,0 +1,21 @@
+import React from "react";
+import SafeAreaView from "react-native-safe-area-view";
+export default function Layout({ children, forceInset = { top: "always", horizontal: "never", bottom: "never" }, forceInsetBot = { vertical: "never" }, styleBot, style, disable, }) {
+    if (disable)
+        return <>{children}</>;
+    return (<SafeAreaView style={[
+            {
+                flex: 1,
+            },
+            style,
+        ]} forceInset={forceInset}>
+      <SafeAreaView style={[
+            {
+                flex: 1,
+            },
+            styleBot,
+        ]} forceInset={forceInsetBot}>
+        {children}
+      </SafeAreaView>
+    </SafeAreaView>);
+}

package/dist/Text/Props.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { TextProps, TextStyle } from 'react-native';
+import { MakeProp } from './makeStyle';
+interface PropsParent {
+    children?: React.ReactNode;
+    bold?: boolean | TextStyle['fontWeight'];
+    center?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    color?: string;
+    toUpperCase?: boolean;
+    toLowerCase?: boolean;
+    background?: string;
+}
+export interface Props extends TextProps, PropsParent, MakeProp {
+    backgroundColor?: string;
+    primary?: boolean;
+    white?: boolean;
+    red?: boolean;
+    blue?: boolean;
+    green?: boolean;
+    yellow?: boolean;
+    pink?: boolean;
+    gray?: boolean;
+    black?: boolean;
+    lang?: string;
+    content?: string;
+}
+export {};

package/dist/Text/Props.js

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

package/dist/Text/Style.d.ts

@@ -0,0 +1 @@
+export declare const Style: any;

package/dist/Text/Style.js

@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+import { makeStyle } from "./makeStyle";
+export const Style = (props) => {
+    const PropsConvert = StyleSheet.flatten([
+        props.color && { color: props.color },
+        props.center && { textAlign: 'center' },
+        props.italic && { fontStyle: 'italic' },
+        props.bold && { fontWeight: typeof props.bold == "boolean" ? '500' : props.bold },
+        props.underline && { textDecorationLine: 'underline' },
+        props.toUpperCase && { textTransform: 'uppercase' },
+        props.toLowerCase && { textTransform: 'lowercase' },
+    ]);
+    return [
+        makeStyle(props),
+        PropsConvert,
+    ];
+};

package/dist/Text/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { Props } from "./Props";
+declare const TextApp: React.FC<Props>;
+export default TextApp;

package/dist/Text/index.js

@@ -0,0 +1,44 @@
+import React, { isValidElement } from "react";
+import { StyleSheet, Text } from "react-native";
+import { Style } from "./Style";
+import { isArray, isObject } from "underscore";
+const TextApp = ({ style, children, ...props }) => {
+    const Children = () => {
+        const content = props?.lang ?? undefined;
+        if (typeof content !== "undefined") {
+            if (typeof content == "string" ||
+                typeof content == "number" ||
+                isArray(children))
+                return content;
+            if (typeof content == "function")
+                return "Error content == 'function'";
+            if (isObject(children))
+                return JSON.stringify(children);
+            if (isValidElement(content))
+                return content;
+            return React.createElement(Text, {});
+        }
+        if (typeof children !== "undefined") {
+            if (typeof children == "string" ||
+                typeof children == "number" ||
+                isArray(children))
+                return children;
+            if (isObject(children))
+                return JSON.stringify(children);
+            if (typeof children == "function")
+                return "Error children == 'function'";
+            if (isValidElement(children))
+                return children;
+            return React.createElement(Text, {}, children);
+        }
+    };
+    return (<Text style={[styles.default, Style(props), style]} {...props}>
+      {Children()}
+    </Text>);
+};
+export default TextApp;
+const styles = StyleSheet.create({
+    default: {
+        fontSize: 14,
+    },
+});

package/dist/Text/makeStyle.d.ts

@@ -0,0 +1,63 @@
+import { TextStyle } from "react-native";
+declare enum COLORS {
+    "white" = 1,
+    "red" = 2,
+    "blue" = 3,
+    "black" = 4,
+    "green" = 5,
+    "yellow" = 6,
+    "pink" = 7,
+    "gray" = 8,
+    "primary" = 9
+}
+declare const PROPS: {
+    readonly bg: "backgroundColor";
+    readonly background: "backgroundColor";
+    readonly color: "color";
+    readonly w: "width";
+    readonly width: "width";
+    readonly minW: "minWidth";
+    readonly maxW: "maxWidth";
+    readonly h: "height";
+    readonly height: "height";
+    readonly minH: "minHeight";
+    readonly maxH: "maxHeight";
+    readonly pad: "padding";
+    readonly padH: "paddingHorizontal";
+    readonly padV: "paddingVertical";
+    readonly padL: "paddingLeft";
+    readonly padT: "paddingTop";
+    readonly padR: "paddingRight";
+    readonly padB: "paddingBottom";
+    readonly mar: "margin";
+    readonly marH: "marginHorizontal";
+    readonly marV: "marginVertical";
+    readonly marL: "marginLeft";
+    readonly marT: "marginTop";
+    readonly marR: "marginRight";
+    readonly marB: "marginBottom";
+    readonly border: "borderWidth";
+    readonly borderW: "borderWidth";
+    readonly borderR: "borderRadius";
+    readonly borderC: "borderColor";
+    readonly borderLW: "borderLeftWidth";
+    readonly borderTW: "borderTopWidth";
+    readonly borderRW: "borderRightWidth";
+    readonly borderBW: "borderBottomWidth";
+    readonly flex: "flex";
+    readonly zIndex: "zIndex";
+    readonly left: "left";
+    readonly top: "top";
+    readonly bottom: "bottom";
+    readonly right: "right";
+    readonly opacity: "opacity";
+    readonly size: "fontSize";
+};
+export type ColorKey = keyof typeof COLORS;
+export type ShortKey = keyof typeof PROPS;
+export type Convert<T extends string> = Partial<Record<T, boolean | number | string>>;
+export type MakeProp = Partial<Record<ShortKey, number | string>> & Partial<Record<ColorKey, boolean>> & Record<string, any>;
+export declare const makeStyle: (props: {
+    [key: string]: any;
+}) => TextStyle;
+export {};

package/dist/Text/makeStyle.js

@@ -0,0 +1,91 @@
+import { StyleSheet } from "react-native";
+import { isNaN } from "underscore";
+var COLORS;
+(function (COLORS) {
+    COLORS[COLORS["white"] = 1] = "white";
+    COLORS[COLORS["red"] = 2] = "red";
+    COLORS[COLORS["blue"] = 3] = "blue";
+    COLORS[COLORS["black"] = 4] = "black";
+    COLORS[COLORS["green"] = 5] = "green";
+    COLORS[COLORS["yellow"] = 6] = "yellow";
+    COLORS[COLORS["pink"] = 7] = "pink";
+    COLORS[COLORS["gray"] = 8] = "gray";
+    COLORS[COLORS["primary"] = 9] = "primary";
+})(COLORS || (COLORS = {}));
+const PROPS = {
+    bg: "backgroundColor",
+    background: "backgroundColor",
+    color: "color",
+    w: "width",
+    width: "width",
+    minW: "minWidth",
+    maxW: "maxWidth",
+    h: "height",
+    height: "height",
+    minH: "minHeight",
+    maxH: "maxHeight",
+    pad: "padding",
+    padH: "paddingHorizontal",
+    padV: "paddingVertical",
+    padL: "paddingLeft",
+    padT: "paddingTop",
+    padR: "paddingRight",
+    padB: "paddingBottom",
+    mar: "margin",
+    marH: "marginHorizontal",
+    marV: "marginVertical",
+    marL: "marginLeft",
+    marT: "marginTop",
+    marR: "marginRight",
+    marB: "marginBottom",
+    border: 'borderWidth',
+    borderW: 'borderWidth',
+    borderR: "borderRadius",
+    borderC: "borderColor",
+    borderLW: "borderLeftWidth",
+    borderTW: "borderTopWidth",
+    borderRW: "borderRightWidth",
+    borderBW: "borderBottomWidth",
+    flex: 'flex',
+    zIndex: 'zIndex',
+    left: 'left',
+    top: 'top',
+    bottom: 'bottom',
+    right: 'right',
+    opacity: 'opacity',
+    size: 'fontSize'
+};
+const isColorKey = (key) => {
+    return key in COLORS;
+};
+const isShortKey = (key) => {
+    return key in PROPS;
+};
+export const makeStyle = (props) => {
+    const style = {};
+    Object.keys(props).forEach((key) => {
+        const match = key.match(/^(\w+)-(\w+)$/);
+        if (isColorKey(key)) {
+            style.color = key;
+            return;
+        }
+        if (match) {
+            const [, rawKey, rawValue] = match;
+            const value = isNaN(Number(rawValue))
+                ? rawValue
+                : Number(rawValue);
+            if (isShortKey(rawKey)) {
+                style[PROPS[rawKey]] = value;
+            }
+            else {
+                style[rawKey] = value;
+            }
+            return;
+        }
+        // 🔹 Normal props
+        if (isShortKey(key)) {
+            style[PROPS[key]] = props[key];
+        }
+    });
+    return StyleSheet.create({ style }).style;
+};

package/dist/Touch/Block.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { View } from "react-native";
+import { Props } from "./Props";
+declare const Block: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<View>>;
+export default Block;

package/dist/Touch/Block.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { View } from "react-native";
+import { Style } from "./Style";
+const Block = React.forwardRef(({ style, ...props }, ref) => {
+    if (props?.hidden)
+        return <></>;
+    return (<View ref={ref} style={[Style(props), style]} {...props}>
+        {props.children}
+      </View>);
+});
+export default Block;

package/dist/Touch/Props.d.ts

@@ -0,0 +1,128 @@
+import { FlexStyle, TouchableWithoutFeedbackProps, ViewStyle } from "react-native";
+import { MakeProp } from "./makeStyle";
+/**
+ * Interface for application-specific props that extend React Native's style properties
+ * @interface PropsApp
+ */
+export interface PropsApp {
+    /** Border radius for top corners */
+    borderUpRadius?: number;
+    /** Border radius for bottom corners */
+    borderDownRadius?: number;
+    /** Flexbox alignment along cross axis */
+    alignItems?: FlexStyle['alignItems'];
+    /** Flexbox alignment for self */
+    alignSelf?: FlexStyle['alignSelf'];
+    /** Flexbox alignment along main axis */
+    justifyContent?: FlexStyle['justifyContent'];
+    /** Border style (solid, dashed, dotted) */
+    borderStyle?: ViewStyle['borderStyle'];
+    /** Opacity of the view */
+    opacity?: ViewStyle['opacity'];
+    /** Overflow behavior */
+    overflow?: ViewStyle['overflow'];
+    /** Set width to 100% */
+    w100?: boolean;
+    /** Set height to 100% */
+    h100?: boolean;
+    /** Center content both horizontally and vertically */
+    mid?: boolean;
+    middle?: boolean;
+    /** Set flex direction to row */
+    row?: boolean;
+    /** Center content horizontally */
+    alignCenter?: boolean;
+    /** Center content vertically */
+    justifyCenter?: boolean;
+    /** Make border radius circular */
+    borderCircle?: boolean;
+    /** Center content horizontally and space between vertically */
+    centerBetween?: boolean;
+    /** Space content evenly along main axis */
+    justifyBetween?: boolean;
+    /** Hide overflow content */
+    overHidden?: boolean;
+    /** Set width and height to same value */
+    square?: number;
+    /** Set width to 100% */
+    width100?: boolean;
+    /** Set height to 100% */
+    height100?: boolean;
+    /** Background color or gradient colors */
+    background?: string;
+    /** Gradient direction */
+    gradient?: 'vertical' | 'horizontal';
+    /** Set flex to 1 */
+    flexOne?: boolean;
+    flex1?: boolean;
+    /** Shadow color or boolean to enable default shadow */
+    shadowColor?: string | boolean;
+    /** Border options for each side */
+    borderOption?: {
+        top?: number;
+        left?: number;
+        right?: number;
+        bottom?: number;
+        color?: string;
+    };
+    /** Position options for absolute positioning */
+    positionOption?: {
+        top?: number;
+        left?: number;
+        right?: number;
+        bottom?: number;
+    };
+    /** Padding options for each side */
+    paddingOption?: {
+        all?: number;
+        top?: number;
+        left?: number;
+        right?: number;
+        bottom?: number;
+    };
+    /** Padding options for vertical and horizontal */
+    paddingFlex?: {
+        vertical?: number;
+        horizontal?: number;
+    };
+    /** Margin options for vertical and horizontal */
+    marginFlex?: {
+        vertical?: number;
+        horizontal?: number;
+    };
+    /** Margin options for each side */
+    marginOption?: {
+        all?: number;
+        top?: number;
+        left?: number;
+        right?: number;
+        bottom?: number;
+    };
+    /** Shadow configuration options */
+    shadowOption?: {
+        color?: string;
+        width?: number;
+        height?: number;
+        opacity?: number;
+        radius?: number;
+        elevation?: number;
+    };
+    /** Custom style character */
+    styleChar?: string;
+    /** Set width to screen width */
+    widthScreen?: boolean;
+    /** Set height to screen height */
+    heightScreen?: boolean;
+}
+/**
+ * Main Props interface that combines TouchableWithoutFeedbackProps, PropsApp, and MakeProp
+ * @interface Props
+ */
+export interface Props extends TouchableWithoutFeedbackProps, PropsApp, MakeProp {
+    /** Child components */
+    children?: React.ReactNode;
+    /** Hide the component */
+    hidden?: boolean;
+    /** Opacity when pressed */
+    activeOpacity?: number;
+}

package/dist/Touch/Props.js

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

package/dist/Touch/Style.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Style utility function that generates React Native styles based on provided props
+ * This function combines various style properties into a single style object
+ *
+ * @param props - Style properties object containing various style configurations
+ * @returns Array containing base styles and computed styles
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <View style={Style({ mid: true, row: true })}>
+ *
+ * // With position options
+ * <View style={Style({
+ *   positionOption: { top: 10, left: 20 },
+ *   paddingOption: { all: 10 }
+ * })}>
+ *
+ * // With shadow
+ * <View style={Style({
+ *   shadowOption: {
+ *     color: '#000',
+ *     width: 2,
+ *     height: 2,
+ *     opacity: 0.5,
+ *     radius: 5
+ *   }
+ * })}>
+ * ```
+ */
+export declare const Style: any;

package/dist/Touch/Style.js

@@ -0,0 +1,118 @@
+import { StyleSheet, Dimensions } from "react-native";
+import { isEmpty, isString } from "underscore";
+import { makeStyle } from "./makeStyle";
+/**
+ * Style utility function that generates React Native styles based on provided props
+ * This function combines various style properties into a single style object
+ *
+ * @param props - Style properties object containing various style configurations
+ * @returns Array containing base styles and computed styles
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <View style={Style({ mid: true, row: true })}>
+ *
+ * // With position options
+ * <View style={Style({
+ *   positionOption: { top: 10, left: 20 },
+ *   paddingOption: { all: 10 }
+ * })}>
+ *
+ * // With shadow
+ * <View style={Style({
+ *   shadowOption: {
+ *     color: '#000',
+ *     width: 2,
+ *     height: 2,
+ *     opacity: 0.5,
+ *     radius: 5
+ *   }
+ * })}>
+ * ```
+ */
+export const Style = (props) => {
+    const PropsApp = StyleSheet.flatten([
+        // Layout properties
+        props.alignItems && { alignItems: props.alignItems },
+        props.justifyContent && { justifyContent: props.justifyContent },
+        props.borderStyle && { borderStyle: props.borderStyle },
+        props.overflow && { overflow: props.overflow },
+        // Border radius properties
+        props.borderUpRadius && { borderTopLeftRadius: (props.borderUpRadius), borderTopRightRadius: (props.borderUpRadius) },
+        props.borderDownRadius && { borderBottomLeftRadius: (props.borderUpRadius), borderBottomRightRadius: (props.borderUpRadius) },
+        // Layout shortcuts
+        props.mid && { alignItems: 'center', justifyContent: 'center' },
+        props.row && { flexDirection: 'row' },
+        props.width100 && { width: '100%' },
+        props.height100 && { height: '100%' },
+        props.square && { width: props.square, height: props.square },
+        props.borderCircle && { borderRadius: 1000 },
+        props.alignCenter && { alignItems: 'center' },
+        props.justifyCenter && { justifyContent: 'center' },
+        props.justifyBetween && { justifyContent: 'space-between' },
+        props.overHidden && { overflow: 'hidden' },
+        props.centerBetween && { alignItems: 'center', justifyContent: 'space-between', },
+        // Position options
+        props.positionOption && {
+            position: 'absolute',
+            top: props.positionOption?.top,
+            bottom: props.positionOption?.bottom,
+            left: props.positionOption?.left,
+            right: props.positionOption?.right,
+        },
+        // Padding options
+        props.paddingOption && {
+            paddingLeft: props.paddingOption?.all || props.paddingOption?.left,
+            paddingTop: props.paddingOption?.all || props.paddingOption?.top,
+            paddingRight: props.paddingOption?.all || props.paddingOption?.right,
+            paddingBottom: props.paddingOption?.all || props.paddingOption?.bottom,
+        },
+        // Margin options
+        props.marginOption && {
+            marginLeft: props.marginOption?.all || props.marginOption?.left,
+            marginTop: props.marginOption?.all || props.marginOption?.top,
+            marginRight: props.marginOption?.all || props.marginOption?.right,
+            marginBottom: props.marginOption?.all || props.marginOption?.bottom,
+        },
+        // Border options
+        props.borderOption && {
+            borderLeftWidth: props.borderOption.left,
+            borderTopWidth: props.borderOption.top,
+            borderBottomWidth: props.borderOption.bottom,
+            borderRightWidth: props.borderOption.right,
+            borderColor: props.borderOption.color,
+        },
+        // Shadow options
+        !isEmpty(props.shadowOption) && {
+            shadowColor: props.shadowOption?.color,
+            shadowOffset: {
+                width: props.shadowOption?.width,
+                height: props.shadowOption?.height,
+            },
+            shadowOpacity: props.shadowOption?.opacity,
+            shadowRadius: props.shadowOption?.radius,
+            elevation: props.shadowOption?.elevation,
+        },
+        // Default shadow
+        props.shadowColor && {
+            shadowColor: isString(props.shadowColor) ? props.shadowColor : '#000',
+            shadowOffset: { width: 2, height: 2, },
+            shadowOpacity: 1,
+            shadowRadius: 10,
+            elevation: 2,
+        },
+        // Width and height shortcuts
+        props.w100 && { width: '100%' },
+        props.h100 && { height: '100%' },
+        props.flex1 && { flex: 1 },
+        props.flexOne && { flex: 1 },
+        // Screen dimensions
+        props.widthScreen && { width: Dimensions.get('screen').width },
+        props.heightScreen && { height: Dimensions.get('screen').height },
+    ]);
+    return [
+        makeStyle(props),
+        PropsApp,
+    ];
+};

package/dist/Touch/Touch.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { Props } from "./Props";
+/**
+ * Touch component that extends TouchableOpacity with additional styling capabilities
+ * Supports gradient backgrounds and custom styling options
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Touch onPress={() => console.log('pressed')}>
+ *   <Text>Press me</Text>
+ * </Touch>
+ *
+ *
+ * // With custom styling
+ * <Touch
+ *   mid={true}
+ *   row={true}
+ *   paddingOption={{ all: 10 }}
+ *   onPress={() => console.log('pressed')}
+ * >
+ *   <Text>Styled Button</Text>
+ * </Touch>
+ * ```
+ */
+declare const Touch: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<import("react-native").View>>;
+export default Touch;

package/dist/Touch/Touch.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { TouchableOpacity } from "react-native";
+import { Style } from "./Style";
+/**
+ * Touch component that extends TouchableOpacity with additional styling capabilities
+ * Supports gradient backgrounds and custom styling options
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Touch onPress={() => console.log('pressed')}>
+ *   <Text>Press me</Text>
+ * </Touch>
+ *
+ *
+ * // With custom styling
+ * <Touch
+ *   mid={true}
+ *   row={true}
+ *   paddingOption={{ all: 10 }}
+ *   onPress={() => console.log('pressed')}
+ * >
+ *   <Text>Styled Button</Text>
+ * </Touch>
+ * ```
+ */
+const Touch = React.forwardRef(({ style, ...props }, ref) => {
+    if (props?.hidden)
+        return <></>;
+    return (<TouchableOpacity ref={ref} activeOpacity={props.activeOpacity || 0.5} style={[Style(props), style]} {...props}>
+        {props.children}
+      </TouchableOpacity>);
+});
+export default Touch;

package/dist/Touch/TouchScale.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ViewProps } from "react-native";
+import { Props } from "./Props";
+interface ButtonScaleProps extends Props {
+    scaleValue?: number;
+    scale?: boolean;
+    containerStyle?: ViewProps["style"];
+}
+declare const Touch: React.ForwardRefExoticComponent<Omit<ButtonScaleProps, "ref"> & React.RefAttributes<import("react-native").View>>;
+export default Touch;

package/dist/Touch/TouchScale.js

@@ -0,0 +1,30 @@
+import React, { useCallback } from "react";
+import { Animated, TouchableOpacity } from "react-native";
+import { Style } from "./Style";
+const Touch = React.forwardRef(({ scaleValue = 1.1, style, background, containerStyle, ...props }, ref) => {
+    if (props?.hidden)
+        return <></>;
+    const animatedButtonScale = React.useRef(new Animated.Value(1)).current;
+    const onPressIn = useCallback(() => {
+        Animated.spring(animatedButtonScale, {
+            toValue: scaleValue,
+            useNativeDriver: true,
+        }).start();
+    }, [scaleValue]);
+    const onPressOut = useCallback(() => {
+        Animated.spring(animatedButtonScale, {
+            toValue: 1,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    return (<TouchableOpacity ref={ref} onPressIn={onPressIn} onPressOut={onPressOut} activeOpacity={props.activeOpacity || 1} style={containerStyle} {...props}>
+        <Animated.View style={[
+            { transform: [{ scale: animatedButtonScale }] },
+            Style(props),
+            style,
+        ]}>
+          {props.children}
+        </Animated.View>
+      </TouchableOpacity>);
+});
+export default Touch;

package/dist/Touch/makeStyle.d.ts

@@ -0,0 +1,64 @@
+import { ViewStyle } from "react-native";
+declare enum COLORS {
+    "white" = 1,
+    "red" = 2,
+    "blue" = 3,
+    "black" = 4,
+    "green" = 5,
+    "yellow" = 6,
+    "pink" = 7,
+    "gray" = 8,
+    "primary" = 9
+}
+declare const PROPS: {
+    readonly bg: "backgroundColor";
+    readonly background: "backgroundColor";
+    readonly w: "width";
+    readonly width: "width";
+    readonly minW: "minWidth";
+    readonly maxW: "maxWidth";
+    readonly h: "height";
+    readonly height: "height";
+    readonly minH: "minHeight";
+    readonly maxH: "maxHeight";
+    readonly pad: "padding";
+    readonly padH: "paddingHorizontal";
+    readonly horizontal: "paddingHorizontal";
+    readonly padV: "paddingVertical";
+    readonly vertical: "paddingVertical";
+    readonly padL: "paddingLeft";
+    readonly padT: "paddingTop";
+    readonly padR: "paddingRight";
+    readonly padB: "paddingBottom";
+    readonly mar: "margin";
+    readonly marH: "marginHorizontal";
+    readonly marV: "marginVertical";
+    readonly marL: "marginLeft";
+    readonly marT: "marginTop";
+    readonly marR: "marginRight";
+    readonly marB: "marginBottom";
+    readonly border: "borderWidth";
+    readonly borderW: "borderWidth";
+    readonly borderR: "borderRadius";
+    readonly radius: "borderRadius";
+    readonly borderC: "borderColor";
+    readonly borderLW: "borderLeftWidth";
+    readonly borderTW: "borderTopWidth";
+    readonly borderRW: "borderRightWidth";
+    readonly borderBW: "borderBottomWidth";
+    readonly flex: "flex";
+    readonly zIndex: "zIndex";
+    readonly left: "left";
+    readonly top: "top";
+    readonly bottom: "bottom";
+    readonly right: "right";
+    readonly opacity: "opacity";
+};
+export type ColorKey = keyof typeof COLORS;
+export type ShortKey = keyof typeof PROPS;
+export type Convert<T extends string> = Partial<Record<T, boolean | number | string>>;
+export type MakeProp = Partial<Record<ShortKey, number | string>> & Partial<Record<ColorKey, boolean>> & Record<string, any>;
+export declare const makeStyle: <T>(props: {
+    [key: string]: any;
+}) => ViewStyle;
+export {};

package/dist/Touch/makeStyle.js

@@ -0,0 +1,94 @@
+import { StyleSheet } from "react-native";
+import { isNaN } from "underscore";
+var COLORS;
+(function (COLORS) {
+    COLORS[COLORS["white"] = 1] = "white";
+    COLORS[COLORS["red"] = 2] = "red";
+    COLORS[COLORS["blue"] = 3] = "blue";
+    COLORS[COLORS["black"] = 4] = "black";
+    COLORS[COLORS["green"] = 5] = "green";
+    COLORS[COLORS["yellow"] = 6] = "yellow";
+    COLORS[COLORS["pink"] = 7] = "pink";
+    COLORS[COLORS["gray"] = 8] = "gray";
+    COLORS[COLORS["primary"] = 9] = "primary";
+})(COLORS || (COLORS = {}));
+const PROPS = {
+    bg: "backgroundColor",
+    background: "backgroundColor",
+    w: "width",
+    width: "width",
+    minW: "minWidth",
+    maxW: "maxWidth",
+    h: "height",
+    height: "height",
+    minH: "minHeight",
+    maxH: "maxHeight",
+    pad: "padding",
+    padH: "paddingHorizontal",
+    horizontal: "paddingHorizontal",
+    padV: "paddingVertical",
+    vertical: "paddingVertical",
+    padL: "paddingLeft",
+    padT: "paddingTop",
+    padR: "paddingRight",
+    padB: "paddingBottom",
+    mar: "margin",
+    marH: "marginHorizontal",
+    marV: "marginVertical",
+    marL: "marginLeft",
+    marT: "marginTop",
+    marR: "marginRight",
+    marB: "marginBottom",
+    border: 'borderWidth',
+    borderW: 'borderWidth',
+    borderR: "borderRadius",
+    radius: "borderRadius",
+    borderC: "borderColor",
+    borderLW: "borderLeftWidth",
+    borderTW: "borderTopWidth",
+    borderRW: "borderRightWidth",
+    borderBW: "borderBottomWidth",
+    flex: 'flex',
+    zIndex: 'zIndex',
+    left: 'left',
+    top: 'top',
+    bottom: 'bottom',
+    right: 'right',
+    opacity: 'opacity'
+};
+const isColorKey = (key) => {
+    return key in COLORS;
+};
+const isShortKey = (key) => {
+    return key in PROPS;
+};
+export const makeStyle = (props) => {
+    const style = {};
+    Object.keys(props).forEach((key) => {
+        const match = key.match(/^(\w+)-(\w+)$/);
+        // 🎨 Color
+        if (isColorKey(key)) {
+            style.backgroundColor = key;
+            return;
+        }
+        // 🔹 Hyphen syntax (pad-10)
+        if (match) {
+            const [, rawKey, rawValue] = match;
+            const value = isNaN(Number(rawValue))
+                ? rawValue
+                : Number(rawValue);
+            if (isShortKey(rawKey)) {
+                style[PROPS[rawKey]] = value;
+            }
+            else {
+                style[rawKey] = value;
+            }
+            return;
+        }
+        // 🔹 Normal props
+        if (isShortKey(key)) {
+            style[PROPS[key]] = props[key];
+        }
+    });
+    return StyleSheet.create({ style }).style;
+};

package/dist/Touch/utils.d.ts

@@ -0,0 +1,5 @@
+export declare function sliceTextAndNumber(input: string): {
+    text: string | null;
+    number: number | null;
+};
+export declare function replaceAll(str?: string, search?: string, replacement?: string): string;

package/dist/Touch/utils.js

@@ -0,0 +1,23 @@
+export function sliceTextAndNumber(input) {
+    let text = "";
+    let number = "";
+    let mid = false;
+    for (let i = 0; i < input.length; i++) {
+        const currentChar = input[i];
+        if (!isNaN(parseInt(currentChar)) && mid == false) {
+            mid = i;
+        }
+    }
+    if (mid) {
+        text = input.slice(0, mid);
+        number = input.slice(mid);
+    }
+    // Log.d('mid', { mid, text, number })
+    return {
+        text: mid ? text : null,
+        number: mid ? Number(number) : null,
+    };
+}
+export function replaceAll(str = '', search = '', replacement = '') {
+    return str.replace(new RegExp(search, 'g'), replacement); //[g] ~~ search global
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Touch } from './Touch/Touch';
+export { default as Block } from './Touch/Block';
+export { default as Text } from './Text';
+export { default as Icon } from './Icon';
+export { default as Layout } from './Layout';

package/dist/index.js

@@ -0,0 +1,5 @@
+export { default as Touch } from './Touch/Touch';
+export { default as Block } from './Touch/Block';
+export { default as Text } from './Text';
+export { default as Icon } from './Icon';
+export { default as Layout } from './Layout';

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "ui-rn",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "repository": "https://github.com/package-dev/ui-rn",
   "description": "ui-rn",
   "author": "Phamha98",
-  "main": "src/index.tsx",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "peerDependencies": {
     "react": ">=18",
     "react-native": ">=0.70"
@@ -24,10 +25,11 @@
     "typescript": "^5.9.3"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npx tsc"
   },
   "license": "ISC",
   "keywords": [
     "ui-rn"
   ]
-}
+}

package/src/Text/makeStyle.ts

@@ -76,7 +76,7 @@ export const makeStyle = (props: { [key: string]: any }) => {
         const match = key.match(/^(\w+)-(\w+)$/);
 
         if (isColorKey(key)) {
-            style.backgroundColor = key;
+            style.color = key;
             return;
         }
 

package/src/global.d.ts

@@ -0,0 +1 @@
+declare module 'react-native-vector-icons/*';

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+
+    // 👇 FIX LỖI CHÍNH
+    "moduleResolution": "node",
+
+    // ❌ BỎ DOM đi
+    "lib": ["ESNext"],
+
+    // 👇 CHO REACT NATIVE
+    "jsx": "react-native",
+
+    "declaration": true,
+    "outDir": "dist",
+
+    "esModuleInterop": true,
+    "skipLibCheck": true, // 👈 cực quan trọng (giảm 90% lỗi)
+    "strict": true
+  },
+  "include": ["src"]
+}