react-native-sj-ui 0.1.0 → 0.1.3

package/lib/module/components/Button.js

@@ -0,0 +1,104 @@
+"use strict";
+
+import { ActivityIndicator, TouchableOpacity } from 'react-native';
+import ViewCard from "./ViewCard.js";
+import TextView from "./TextView.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const COLORS = {
+  primary: '#2563EB',
+  secondary: '#6B7280',
+  success: '#16A34A',
+  danger: '#DC2626',
+  warning: '#D97706',
+  info: '#0891B2'
+};
+const Button = ({
+  title,
+  children,
+  variant = 'solid',
+  colorScheme = 'primary',
+  size = 'md',
+  loading = false,
+  disabled = false,
+  leftIcon,
+  rightIcon,
+  fullWidth = false,
+  borderRadius = 8,
+  onPress,
+  ...props
+}) => {
+  const color = COLORS[colorScheme];
+  const sizeStyle = {
+    sm: {
+      paddingVertical: 8,
+      paddingHorizontal: 12,
+      fontSize: 14
+    },
+    md: {
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      fontSize: 16
+    },
+    lg: {
+      paddingVertical: 16,
+      paddingHorizontal: 20,
+      fontSize: 18
+    }
+  }[size];
+  let backgroundColor = color;
+  let borderColor = color;
+  let borderWidth = 0;
+  let textColor = '#fff';
+  switch (variant) {
+    case 'outline':
+      backgroundColor = 'transparent';
+      borderColor = color;
+      borderWidth = 1;
+      textColor = color;
+      break;
+    case 'ghost':
+      backgroundColor = 'transparent';
+      borderColor = 'transparent';
+      borderWidth = 0;
+      textColor = color;
+      break;
+  }
+  if (disabled) {
+    backgroundColor = '#D1D5DB';
+    borderColor = '#D1D5DB';
+    textColor = '#6B7280';
+  }
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    ...props,
+    activeOpacity: 0.8,
+    disabled: disabled || loading,
+    onPress: onPress,
+    children: /*#__PURE__*/_jsx(ViewCard, {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 8,
+      width: fullWidth ? '100%' : undefined,
+      paddingVertical: sizeStyle.paddingVertical,
+      paddingHorizontal: sizeStyle.paddingHorizontal,
+      borderRadius: borderRadius,
+      backgroundColor: backgroundColor,
+      borderColor: borderColor,
+      borderWidth: borderWidth,
+      opacity: disabled ? 0.6 : 1,
+      children: loading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        color: variant === 'solid' ? '#fff' : color,
+        size: "small"
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [leftIcon, title && /*#__PURE__*/_jsx(TextView, {
+          textColor: textColor,
+          fontWeight: "600",
+          fontSize: sizeStyle.fontSize,
+          children: title
+        }), children, rightIcon]
+      })
+    })
+  });
+};
+export default Button;
+//# sourceMappingURL=Button.js.map

package/lib/module/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ActivityIndicator","TouchableOpacity","ViewCard","TextView","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","COLORS","primary","secondary","success","danger","warning","info","Button","title","children","variant","colorScheme","size","loading","disabled","leftIcon","rightIcon","fullWidth","borderRadius","onPress","props","color","sizeStyle","sm","paddingVertical","paddingHorizontal","fontSize","md","lg","backgroundColor","borderColor","borderWidth","textColor","activeOpacity","flexDirection","alignItems","justifyContent","gap","width","undefined","opacity","fontWeight"],"sourceRoot":"../../../src","sources":["components/Button.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Column.js

@@ -0,0 +1,13 @@
+"use strict";
+
+import React from 'react';
+import Flex from "./Flex.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Column = props => {
+  return /*#__PURE__*/_jsx(Flex, {
+    direction: "column",
+    ...props
+  });
+};
+export default Column;
+//# sourceMappingURL=Column.js.map

package/lib/module/components/Column.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Flex","jsx","_jsx","Column","props","direction"],"sourceRoot":"../../../src","sources":["components/Column.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAOC,IAAI,MAAM,WAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAI1B,MAAMC,MAA6B,GAAIC,KAAK,IAAK;EAC/C,oBAAOF,IAAA,CAACF,IAAI;IAACK,SAAS,EAAC,QAAQ;IAAA,GAAKD;EAAK,CAAG,CAAC;AAC/C,CAAC;AAED,eAAeD,MAAM","ignoreList":[]}

package/lib/module/components/Flex.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Flex = ({
+  children,
+  direction = 'column',
+  flex,
+  flexGrow,
+  flexShrink,
+  flexWrap,
+  gap,
+  justifyContent = 'flex-start',
+  alignItems = 'stretch',
+  alignSelf,
+  style,
+  ...rest
+}) => {
+  return /*#__PURE__*/_jsx(View, {
+    ...rest,
+    style: [{
+      flexDirection: direction,
+      flex,
+      flexGrow,
+      flexShrink,
+      flexWrap,
+      gap,
+      justifyContent,
+      alignItems,
+      alignSelf
+    }, style],
+    children: children
+  });
+};
+export default Flex;
+//# sourceMappingURL=Flex.js.map

package/lib/module/components/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","jsx","_jsx","Flex","children","direction","flex","flexGrow","flexShrink","flexWrap","gap","justifyContent","alignItems","alignSelf","style","rest","flexDirection"],"sourceRoot":"../../../src","sources":["components/Flex.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAIzB,SAASC,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAqBpC,MAAMC,IAAyB,GAAGA,CAAC;EACjCC,QAAQ;EAERC,SAAS,GAAG,QAAQ;EAEpBC,IAAI;EACJC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EAERC,GAAG;EAEHC,cAAc,GAAG,YAAY;EAC7BC,UAAU,GAAG,SAAS;EACtBC,SAAS;EAETC,KAAK;EACL,GAAGC;AACL,CAAC,KAAK;EACJ,oBACEb,IAAA,CAACF,IAAI;IAAA,GACCe,IAAI;IACRD,KAAK,EAAE,CACL;MACEE,aAAa,EAAEX,SAAS;MAExBC,IAAI;MACJC,QAAQ;MACRC,UAAU;MACVC,QAAQ;MAERC,GAAG;MAEHC,cAAc;MACdC,UAAU;MACVC;IACF,CAAC,EACDC,KAAK,CACL;IAAAV,QAAA,EAEDA;EAAQ,CACL,CAAC;AAEX,CAAC;AAED,eAAeD,IAAI","ignoreList":[]}

package/lib/module/components/Row.js

@@ -0,0 +1,13 @@
+"use strict";
+
+import React from 'react';
+import Flex from "./Flex.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Row = props => {
+  return /*#__PURE__*/_jsx(Flex, {
+    direction: "row",
+    ...props
+  });
+};
+export default Row;
+//# sourceMappingURL=Row.js.map

package/lib/module/components/Row.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Flex","jsx","_jsx","Row","props","direction"],"sourceRoot":"../../../src","sources":["components/Row.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAOC,IAAI,MAAM,WAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAI1B,MAAMC,GAAuB,GAAIC,KAAK,IAAK;EACzC,oBAAOF,IAAA,CAACF,IAAI;IAACK,SAAS,EAAC,KAAK;IAAA,GAAKD;EAAK,CAAG,CAAC;AAC5C,CAAC;AAED,eAAeD,GAAG","ignoreList":[]}

package/lib/module/components/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+import Column from "./Column.js";
+import Flex from "./Flex.js";
+import Row from "./Row.js";
+import TextView from "./TextView.js";
+import ViewCard from "./ViewCard.js";
+import Button from "./Button.js";
+export { Column, Flex, Row, TextView, ViewCard, Button };
+//# sourceMappingURL=index.js.map

package/lib/module/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Column","Flex","Row","TextView","ViewCard","Button"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,aAAU;AAC7B,OAAOC,IAAI,MAAM,WAAQ;AACzB,OAAOC,GAAG,MAAM,UAAO;AACvB,OAAOC,QAAQ,MAAM,eAAY;AACjC,OAAOC,QAAQ,MAAM,eAAY;AACjC,OAAOC,MAAM,MAAM,aAAU;AAE7B,SAASL,MAAM,EAAEC,IAAI,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM","ignoreList":[]}

package/lib/module/index.js

@@ -1,9 +1,5 @@
 "use strict";
 
-import { SjUiProvider } from "./provider/UIProvider.js";
-import TextView from "./components/TextView.js";
-import ViewCard from "./components/ViewCard.js";
-export { TextView };
-export { SjUiProvider };
-export { ViewCard };
+export { SjUiProvider } from "./provider/UIProvider.js";
+export { TextView, ViewCard, Row, Column, Flex } from "./components/index.js";
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["SjUiProvider","TextView","ViewCard"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,YAAY,QAAQ,0BAAuB;AACpD,OAAOC,QAAQ,MAAM,0BAAuB;AAC5C,OAAOC,QAAQ,MAAM,0BAAuB;AAE5C,SAASD,QAAQ;AACjB,SAASD,YAAY;AACrB,SAASE,QAAQ","ignoreList":[]}
+{"version":3,"names":["SjUiProvider","TextView","ViewCard","Row","Column","Flex"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,YAAY,QAAQ,0BAAuB;AAEpD,SAASC,QAAQ,EAAEC,QAAQ,EAAEC,GAAG,EAAEC,MAAM,EAAEC,IAAI,QAAQ,uBAAc","ignoreList":[]}

package/lib/typescript/src/components/Button.d.ts

@@ -0,0 +1,20 @@
+import { type TouchableOpacityProps } from 'react-native';
+type ButtonVariant = 'solid' | 'outline' | 'ghost';
+type ButtonColorScheme = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends TouchableOpacityProps {
+    title?: string;
+    children?: React.ReactNode;
+    variant?: ButtonVariant;
+    colorScheme?: ButtonColorScheme;
+    size?: ButtonSize;
+    loading?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    fullWidth?: boolean;
+    borderRadius?: number;
+    onPress?: () => void;
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/lib/typescript/src/components/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,cAAc,CAAC;AAItB,KAAK,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnD,KAAK,iBAAiB,GAClB,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,MAAM,CAAC;AAEX,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,UAAU,WAAY,SAAQ,qBAAqB;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAWD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8GjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/typescript/src/components/Column.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import Flex from './Flex.js';
+type ColumnProps = Omit<ComponentProps<typeof Flex>, 'direction'>;
+declare const Column: React.FC<ColumnProps>;
+export default Column;
+//# sourceMappingURL=Column.d.ts.map

package/lib/typescript/src/components/Column.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Column.d.ts","sourceRoot":"","sources":["../../../../src/components/Column.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,IAAI,MAAM,WAAQ,CAAC;AAE1B,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC;AAElE,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAEjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/typescript/src/components/Flex.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { ViewProps, ViewStyle, StyleProp } from 'react-native';
+interface FlexProps extends ViewProps {
+    children?: ReactNode;
+    direction?: ViewStyle['flexDirection'];
+    flex?: ViewStyle['flex'];
+    flexGrow?: ViewStyle['flexGrow'];
+    flexShrink?: ViewStyle['flexShrink'];
+    flexWrap?: ViewStyle['flexWrap'];
+    gap?: ViewStyle['gap'];
+    justifyContent?: ViewStyle['justifyContent'];
+    alignItems?: ViewStyle['alignItems'];
+    alignSelf?: ViewStyle['alignSelf'];
+    style?: StyleProp<ViewStyle>;
+}
+declare const Flex: React.FC<FlexProps>;
+export default Flex;
+//# sourceMappingURL=Flex.d.ts.map

package/lib/typescript/src/components/Flex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../src/components/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,UAAU,SAAU,SAAQ,SAAS;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,SAAS,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAEvC,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAEjC,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IAEvB,cAAc,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAEnC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA2C7B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/typescript/src/components/Row.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import Flex from './Flex.js';
+type RowProps = Omit<ComponentProps<typeof Flex>, 'direction'>;
+declare const Row: React.FC<RowProps>;
+export default Row;
+//# sourceMappingURL=Row.d.ts.map

package/lib/typescript/src/components/Row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../../src/components/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,IAAI,MAAM,WAAQ,CAAC;AAE1B,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC;AAE/D,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAE3B,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/lib/typescript/src/components/index.d.ts

@@ -0,0 +1,8 @@
+import Column from './Column.js';
+import Flex from './Flex.js';
+import Row from './Row.js';
+import TextView from './TextView.js';
+import ViewCard from './ViewCard.js';
+import Button from './Button.js';
+export { Column, Flex, Row, TextView, ViewCard, Button };
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAU,CAAC;AAC9B,OAAO,IAAI,MAAM,WAAQ,CAAC;AAC1B,OAAO,GAAG,MAAM,UAAO,CAAC;AACxB,OAAO,QAAQ,MAAM,eAAY,CAAC;AAClC,OAAO,QAAQ,MAAM,eAAY,CAAC;AAClC,OAAO,MAAM,MAAM,aAAU,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -1,7 +1,3 @@
-import { SjUiProvider } from './provider/UIProvider.js';
-import TextView from './components/TextView.js';
-import ViewCard from './components/ViewCard.js';
-export { TextView };
-export { SjUiProvider };
-export { ViewCard };
+export { SjUiProvider } from './provider/UIProvider.js';
+export { TextView, ViewCard, Row, Column, Flex } from './components/index.js';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAAuB,CAAC;AACrD,OAAO,QAAQ,MAAM,0BAAuB,CAAC;AAC7C,OAAO,QAAQ,MAAM,0BAAuB,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAAuB,CAAC;AAErD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,uBAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-sj-ui",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "The ui library for react native application.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/Button.tsx

@@ -0,0 +1,162 @@
+import {
+  ActivityIndicator,
+  TouchableOpacity,
+  type TouchableOpacityProps,
+} from 'react-native';
+import ViewCard from './ViewCard';
+import TextView from './TextView';
+
+type ButtonVariant = 'solid' | 'outline' | 'ghost';
+
+type ButtonColorScheme =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info';
+
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+interface ButtonProps extends TouchableOpacityProps {
+  title?: string;
+  children?: React.ReactNode;
+
+  variant?: ButtonVariant;
+  colorScheme?: ButtonColorScheme;
+  size?: ButtonSize;
+
+  loading?: boolean;
+
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+
+  fullWidth?: boolean;
+
+  borderRadius?: number;
+
+  onPress?: () => void;
+}
+
+const COLORS = {
+  primary: '#2563EB',
+  secondary: '#6B7280',
+  success: '#16A34A',
+  danger: '#DC2626',
+  warning: '#D97706',
+  info: '#0891B2',
+};
+
+const Button: React.FC<ButtonProps> = ({
+  title,
+  children,
+  variant = 'solid',
+  colorScheme = 'primary',
+  size = 'md',
+  loading = false,
+  disabled = false,
+  leftIcon,
+  rightIcon,
+  fullWidth = false,
+  borderRadius = 8,
+  onPress,
+  ...props
+}) => {
+  const color = COLORS[colorScheme];
+
+  const sizeStyle = {
+    sm: {
+      paddingVertical: 8,
+      paddingHorizontal: 12,
+      fontSize: 14,
+    },
+    md: {
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      fontSize: 16,
+    },
+    lg: {
+      paddingVertical: 16,
+      paddingHorizontal: 20,
+      fontSize: 18,
+    },
+  }[size];
+
+  let backgroundColor = color;
+  let borderColor = color;
+  let borderWidth = 0;
+  let textColor = '#fff';
+
+  switch (variant) {
+    case 'outline':
+      backgroundColor = 'transparent';
+      borderColor = color;
+      borderWidth = 1;
+      textColor = color;
+      break;
+
+    case 'ghost':
+      backgroundColor = 'transparent';
+      borderColor = 'transparent';
+      borderWidth = 0;
+      textColor = color;
+      break;
+  }
+
+  if (disabled) {
+    backgroundColor = '#D1D5DB';
+    borderColor = '#D1D5DB';
+    textColor = '#6B7280';
+  }
+
+  return (
+    <TouchableOpacity
+      {...props}
+      activeOpacity={0.8}
+      disabled={disabled || loading}
+      onPress={onPress}
+    >
+      <ViewCard
+        flexDirection="row"
+        alignItems="center"
+        justifyContent="center"
+        gap={8}
+        width={fullWidth ? '100%' : undefined}
+        paddingVertical={sizeStyle.paddingVertical}
+        paddingHorizontal={sizeStyle.paddingHorizontal}
+        borderRadius={borderRadius}
+        backgroundColor={backgroundColor}
+        borderColor={borderColor}
+        borderWidth={borderWidth}
+        opacity={disabled ? 0.6 : 1}
+      >
+        {loading ? (
+          <ActivityIndicator
+            color={variant === 'solid' ? '#fff' : color}
+            size="small"
+          />
+        ) : (
+          <>
+            {leftIcon}
+
+            {title && (
+              <TextView
+                textColor={textColor}
+                fontWeight="600"
+                fontSize={sizeStyle.fontSize}
+              >
+                {title}
+              </TextView>
+            )}
+
+            {children}
+
+            {rightIcon}
+          </>
+        )}
+      </ViewCard>
+    </TouchableOpacity>
+  );
+};
+
+export default Button;

package/src/components/Column.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+
+import Flex from './Flex';
+
+type ColumnProps = Omit<ComponentProps<typeof Flex>, 'direction'>;
+
+const Column: React.FC<ColumnProps> = (props) => {
+  return <Flex direction="column" {...props} />;
+};
+
+export default Column;

package/src/components/Flex.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { ViewProps, ViewStyle, StyleProp } from 'react-native';
+
+import { View } from 'react-native';
+
+interface FlexProps extends ViewProps {
+  children?: ReactNode;
+
+  direction?: ViewStyle['flexDirection'];
+
+  flex?: ViewStyle['flex'];
+  flexGrow?: ViewStyle['flexGrow'];
+  flexShrink?: ViewStyle['flexShrink'];
+  flexWrap?: ViewStyle['flexWrap'];
+
+  gap?: ViewStyle['gap'];
+
+  justifyContent?: ViewStyle['justifyContent'];
+  alignItems?: ViewStyle['alignItems'];
+  alignSelf?: ViewStyle['alignSelf'];
+
+  style?: StyleProp<ViewStyle>;
+}
+
+const Flex: React.FC<FlexProps> = ({
+  children,
+
+  direction = 'column',
+
+  flex,
+  flexGrow,
+  flexShrink,
+  flexWrap,
+
+  gap,
+
+  justifyContent = 'flex-start',
+  alignItems = 'stretch',
+  alignSelf,
+
+  style,
+  ...rest
+}) => {
+  return (
+    <View
+      {...rest}
+      style={[
+        {
+          flexDirection: direction,
+
+          flex,
+          flexGrow,
+          flexShrink,
+          flexWrap,
+
+          gap,
+
+          justifyContent,
+          alignItems,
+          alignSelf,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+export default Flex;

package/src/components/Row.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+
+import Flex from './Flex';
+
+type RowProps = Omit<ComponentProps<typeof Flex>, 'direction'>;
+
+const Row: React.FC<RowProps> = (props) => {
+  return <Flex direction="row" {...props} />;
+};
+
+export default Row;

package/src/components/index.ts

@@ -0,0 +1,8 @@
+import Column from './Column';
+import Flex from './Flex';
+import Row from './Row';
+import TextView from './TextView';
+import ViewCard from './ViewCard';
+import Button from './Button';
+
+export { Column, Flex, Row, TextView, ViewCard, Button };

package/src/index.tsx

@@ -1,7 +1,3 @@
-import { SjUiProvider } from './provider/UIProvider';
-import TextView from './components/TextView';
-import ViewCard from './components/ViewCard';
+export { SjUiProvider } from './provider/UIProvider';
 
-export { TextView };
-export { SjUiProvider };
-export { ViewCard };
+export { TextView, ViewCard, Row, Column, Flex } from './components';