rn-feav-ui 1.0.3 → 1.0.4

package/dist/components/Alert/index.js

@@ -44,25 +44,19 @@ var AlertFEA = function (_a) {
     return (React.createElement(react_native_1.View, { style: [
             styles.container,
             {
-                backgroundColor: destructive
-                    ? theme.mode === "light"
-                        ? "#fef2f2"
-                        : "rgba(127,29,29,0.35)"
-                    : theme.mode === "light"
-                        ? "#ffffff"
-                        : "#020617",
-                borderColor: destructive
-                    ? theme.mode === "light"
-                        ? "#fecaca"
-                        : "rgba(248,113,113,0.4)"
-                    : theme.mode === "light"
-                        ? "#e5e7eb"
-                        : "#1f2937",
+                backgroundColor: destructive ? theme.colors.destructive : theme.colors.card,
+                borderColor: destructive ? theme.colors.destructive : theme.colors.border,
             },
             style,
         ] },
-        React.createElement(react_native_1.Text, { style: [styles.title, { color: destructive ? "#dc2626" : theme.colors.text }] }, title),
-        description ? (React.createElement(react_native_1.Text, { style: [styles.description, { color: destructive ? "#b91c1c" : theme.colors.text }] }, description)) : null));
+        React.createElement(react_native_1.Text, { style: [
+                styles.title,
+                { color: destructive ? theme.colors.destructiveForeground : theme.colors.cardForeground },
+            ] }, title),
+        description ? (React.createElement(react_native_1.Text, { style: [
+                styles.description,
+                { color: destructive ? theme.colors.destructiveForeground : theme.colors.cardForeground, opacity: 0.85 },
+            ] }, description)) : null));
 };
 exports.AlertFEA = AlertFEA;
 var styles = react_native_1.StyleSheet.create({

package/dist/components/Avatar/index.js

@@ -50,11 +50,11 @@ var AvatarFEA = function (_a) {
                 width: size,
                 height: size,
                 borderRadius: size / 2,
-                backgroundColor: theme.mode === "light" ? "#f3f4f6" : "#1f2937",
-                borderColor: theme.mode === "light" ? "#e5e7eb" : "#374151",
+                backgroundColor: theme.colors.muted,
+                borderColor: theme.colors.border,
             },
         ] },
-        React.createElement(react_native_1.Text, { style: { color: theme.colors.text, fontWeight: "600", fontSize: Math.max(12, size / 3) } }, initials)));
+        React.createElement(react_native_1.Text, { style: { color: theme.colors.foreground, fontWeight: "600", fontSize: Math.max(12, size / 3) } }, initials)));
 };
 exports.AvatarFEA = AvatarFEA;
 var styles = react_native_1.StyleSheet.create({

package/dist/components/Badge/index.js

@@ -40,18 +40,17 @@ var react_native_1 = require("react-native");
 var BadgeFEA = function (_a) {
     var label = _a.label, _b = _a.style, style = _b === void 0 ? {} : _b;
     var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
-    var isLight = theme.mode === "light";
     return (React.createElement(react_native_1.View, { style: [
             styles.badge,
             {
-                backgroundColor: isLight ? "#eef2ff" : "rgba(30,64,175,0.35)",
-                borderColor: isLight ? "#c7d2fe" : "rgba(129,140,248,0.6)",
+                backgroundColor: theme.colors.secondary,
+                borderColor: theme.colors.border,
             },
             style,
         ] },
         React.createElement(react_native_1.Text, { style: [
                 styles.label,
-                { color: isLight ? "#1d4ed8" : "#c7d2fe" },
+                { color: theme.colors.secondaryForeground },
             ] }, label)));
 };
 exports.BadgeFEA = BadgeFEA;

package/dist/components/Button/index.js

@@ -51,7 +51,7 @@ var ButtonFEA = function (_a) {
             React.createElement(react_native_1.TouchableOpacity, { onPress: onPress, activeOpacity: 0.85, style: [styles.baseButton, sizeStyle], disabled: disabled },
                 React.createElement(react_native_1.Text, { style: [
                         styles.text,
-                        { color: theme.colors.text, opacity: disabled ? 0.5 : 1 },
+                        { color: theme.colors.foreground, opacity: disabled ? 0.5 : 1 },
                     ] }, title))));
     }
     if (variant === "soft") {
@@ -59,13 +59,13 @@ var ButtonFEA = function (_a) {
                 styles.baseButton,
                 sizeStyle,
                 styles.softButton,
-                theme.mode === "light" ? styles.softLight : styles.softDark,
+                { backgroundColor: theme.colors.secondary, borderColor: theme.colors.border },
                 disabled && styles.disabled,
                 style,
             ] },
             React.createElement(react_native_1.Text, { style: [
                     styles.text,
-                    { color: theme.colors.text, opacity: disabled ? 0.6 : 1 },
+                    { color: theme.colors.secondaryForeground, opacity: disabled ? 0.6 : 1 },
                 ] }, title)));
     }
     if (variant === "outline") {
@@ -74,7 +74,7 @@ var ButtonFEA = function (_a) {
                 sizeStyle,
                 styles.outlineButton,
                 {
-                    borderColor: theme.mode === "light" ? "#e5e7eb" : "rgba(148,163,184,0.7)",
+                    borderColor: theme.colors.border,
                 },
                 disabled && styles.disabled,
                 style,
@@ -82,7 +82,7 @@ var ButtonFEA = function (_a) {
             React.createElement(react_native_1.Text, { style: [
                     styles.text,
                     {
-                        color: theme.colors.text,
+                        color: theme.colors.foreground,
                         opacity: disabled ? 0.6 : 1,
                     },
                 ] }, title)));
@@ -98,7 +98,7 @@ var ButtonFEA = function (_a) {
             React.createElement(react_native_1.Text, { style: [
                     styles.text,
                     {
-                        color: theme.colors.text,
+                        color: theme.colors.foreground,
                         opacity: disabled ? 0.5 : 1,
                     },
                 ] }, title)));
@@ -112,7 +112,7 @@ var ButtonFEA = function (_a) {
         ] },
         React.createElement(react_native_1.Text, { style: [
                 styles.text,
-                styles.primaryText,
+                { color: theme.colors.primaryForeground },
                 disabled && { opacity: 0.8 },
             ] }, title)));
 };
@@ -152,14 +152,6 @@ var styles = react_native_1.StyleSheet.create({
         borderWidth: 1,
         width: "100%",
     },
-    softLight: {
-        backgroundColor: "#f9fafb",
-        borderColor: "#e5e7eb",
-    },
-    softDark: {
-        backgroundColor: "rgba(15,23,42,0.75)",
-        borderColor: "rgba(148,163,184,0.5)",
-    },
     outlineButton: {
         backgroundColor: "transparent",
         borderWidth: 1,

package/dist/components/Card/index.js

@@ -43,8 +43,8 @@ var CardFEA = function (_a) {
     return (React.createElement(react_native_1.View, { style: [
             styles.card,
             {
-                backgroundColor: theme.mode === "light" ? "#ffffff" : "#020617",
-                borderColor: theme.mode === "light" ? "#e5e7eb" : "#1f2937",
+                backgroundColor: theme.colors.card,
+                borderColor: theme.colors.border,
             },
             style,
         ] }, children));

package/dist/components/Checkbox/index.js

@@ -44,12 +44,12 @@ var CheckboxFEA = function (_a) {
         React.createElement(react_native_1.View, { style: [
                 styles.box,
                 {
-                    borderColor: checked ? theme.colors.primary : theme.mode === "light" ? "#d1d5db" : "#475569",
+                    borderColor: checked ? theme.colors.primary : theme.colors.input,
                     backgroundColor: checked ? theme.colors.primary : "transparent",
                     opacity: disabled ? 0.5 : 1,
                 },
             ] }, checked ? React.createElement(react_native_1.Text, { style: styles.tick }, "\u2713") : null),
-        label ? React.createElement(react_native_1.Text, { style: { color: theme.colors.text, opacity: disabled ? 0.6 : 1 } }, label) : null));
+        label ? (React.createElement(react_native_1.Text, { style: { color: theme.colors.foreground, opacity: disabled ? 0.6 : 1 } }, label)) : null));
 };
 exports.CheckboxFEA = CheckboxFEA;
 var styles = react_native_1.StyleSheet.create({

package/dist/components/Dialog/index.js

@@ -44,7 +44,9 @@ var DialogFEA = function (_a) {
     return (React.createElement(react_native_1.Modal, { transparent: true, visible: open, animationType: "fade", onRequestClose: function () { return onOpenChange(false); } },
         React.createElement(react_native_1.Pressable, { style: [
                 styles.overlay,
-                { backgroundColor: theme.mode === "light" ? "rgba(15,23,42,0.18)" : "rgba(0,0,0,0.55)" },
+                {
+                    backgroundColor: theme.mode === "light" ? "rgba(0,0,0,0.35)" : "rgba(0,0,0,0.6)",
+                },
             ], onPress: function () { return onOpenChange(false); } },
             React.createElement(react_native_1.Pressable, { onPress: function () { return null; }, style: styles.innerPress },
                 React.createElement(Card_1.CardFEA, { style: [styles.card, style] }, children)))));

package/dist/components/GlassCard/index.js

@@ -43,11 +43,11 @@ var GlassCardFEA = function (_a) {
     var children = _a.children, _b = _a.style, style = _b === void 0 ? {} : _b;
     var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
     return (React.createElement(expo_linear_gradient_1.LinearGradient, { colors: theme.mode === 'light'
-            ? ['rgba(255,255,255,0.97)', 'rgba(248,250,252,0.88)']
-            : ['rgba(15,23,42,0.88)', 'rgba(2,6,23,0.85)'], style: [
+            ? ['rgba(255,255,255,0.75)', 'rgba(255,255,255,0.55)']
+            : ['rgba(11,18,32,0.72)', 'rgba(2,6,23,0.62)'], style: [
             styles_1.glassCardStyles.card,
             theme.mode === 'light' ? styles_1.glassCardStyles.shadowLight : styles_1.glassCardStyles.shadowDark,
-            { borderColor: theme.mode === 'light' ? 'rgba(15,23,42,0.08)' : 'rgba(148,163,184,0.2)' },
+            { borderColor: theme.colors.border },
             style,
         ] },
         React.createElement(react_native_1.View, { style: styles_1.glassCardStyles.inner }, children)));

package/dist/components/Input/index.js

@@ -40,12 +40,12 @@ var react_native_1 = require("react-native");
 var InputFEA = function (_a) {
     var placeholder = _a.placeholder, _b = _a.style, style = _b === void 0 ? {} : _b;
     var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
-    return (React.createElement(react_native_1.TextInput, { placeholder: placeholder, placeholderTextColor: theme.mode === "light" ? "#9ca3af" : "rgba(148,163,184,0.9)", style: [
+    return (React.createElement(react_native_1.TextInput, { placeholder: placeholder, placeholderTextColor: theme.colors.mutedForeground, style: [
             styles.base,
             {
-                backgroundColor: theme.mode === "light" ? "#ffffff" : "rgba(15,23,42,0.9)",
-                color: theme.colors.text,
-                borderColor: theme.mode === "light" ? "#e5e7eb" : "rgba(51,65,85,0.9)",
+                backgroundColor: theme.colors.background,
+                color: theme.colors.foreground,
+                borderColor: theme.colors.input,
             },
             style,
         ] }));

package/dist/components/Modal/index.js

@@ -46,9 +46,7 @@ var ModalFEA = function (_a) {
     return (React.createElement(react_native_1.View, { pointerEvents: "box-none", style: [
             styles.overlay,
             {
-                backgroundColor: theme.mode === "light"
-                    ? "rgba(15,23,42,0.15)"
-                    : "rgba(0,0,0,0.45)",
+                backgroundColor: theme.mode === "light" ? "rgba(0,0,0,0.35)" : "rgba(0,0,0,0.6)",
             },
         ] },
         React.createElement(Card_1.CardFEA, { style: [styles.card, { width: "80%" }, style] }, children)));

package/dist/components/Progress/index.js

@@ -44,7 +44,7 @@ var ProgressFEA = function (_a) {
     return (React.createElement(react_native_1.View, { style: [
             styles.track,
             {
-                backgroundColor: theme.mode === "light" ? "#f3f4f6" : "#1f2937",
+                backgroundColor: theme.colors.muted,
             },
             style,
         ] },

package/dist/components/Separator/index.js

@@ -43,7 +43,7 @@ var SeparatorFEA = function (_a) {
     return (React.createElement(react_native_1.View, { style: [
             styles.sep,
             {
-                backgroundColor: theme.mode === "light" ? "rgba(15,23,42,0.08)" : "rgba(148,163,184,0.2)",
+                backgroundColor: theme.colors.border,
             },
             style,
         ] }));

package/dist/components/Skeleton/index.js

@@ -42,14 +42,14 @@ var SkeletonFEA = function (_a) {
     var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
     var colors = theme.mode === "light"
         ? [
-            "rgba(229,231,235,1)",
-            "rgba(243,244,246,1)",
-            "rgba(229,231,235,1)",
+            "rgba(241,245,249,1)",
+            "rgba(226,232,240,1)",
+            "rgba(241,245,249,1)",
         ]
         : [
-            "rgba(148,163,184,0.25)",
-            "rgba(51,65,85,0.35)",
-            "rgba(148,163,184,0.25)",
+            "rgba(148,163,184,0.10)",
+            "rgba(148,163,184,0.18)",
+            "rgba(148,163,184,0.10)",
         ];
     return (React.createElement(expo_linear_gradient_1.LinearGradient, { colors: colors, start: { x: 0, y: 0 }, end: { x: 1, y: 0 }, style: [{ height: height, borderRadius: borderRadius, marginVertical: marginVertical }, style] }));
 };

package/dist/components/Switch/index.js

@@ -41,7 +41,7 @@ var SwitchFEA = function (_a) {
     var value = _a.value, onValueChange = _a.onValueChange, label = _a.label, style = _a.style, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
     var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
     return (React.createElement(react_native_1.View, { style: [{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, style] },
-        label ? React.createElement(react_native_1.Text, { style: { color: theme.colors.text, opacity: disabled ? 0.6 : 1 } }, label) : React.createElement(react_native_1.View, null),
-        React.createElement(react_native_1.Switch, { value: value, onValueChange: onValueChange, disabled: disabled, trackColor: { false: theme.mode === "light" ? "#d1d5db" : "#475569", true: theme.colors.primary }, thumbColor: "#ffffff" })));
+        label ? (React.createElement(react_native_1.Text, { style: { color: theme.colors.foreground, opacity: disabled ? 0.6 : 1 } }, label)) : (React.createElement(react_native_1.View, null)),
+        React.createElement(react_native_1.Switch, { value: value, onValueChange: onValueChange, disabled: disabled, trackColor: { false: theme.colors.input, true: theme.colors.primary }, thumbColor: "#ffffff" })));
 };
 exports.SwitchFEA = SwitchFEA;

package/dist/components/TabBar/index.js

@@ -44,7 +44,7 @@ var TabBarFEA = function (_a) {
     return (React.createElement(Card_1.CardFEA, { style: [
             styles.container,
             {
-                borderColor: theme.mode === "light" ? "#e5e7eb" : "rgba(148,163,184,0.35)",
+                borderColor: theme.colors.border,
             },
             style,
         ] }, children));

package/dist/components/Tabs/index.js

@@ -50,8 +50,8 @@ var TabsListFEA = function (_a) {
     return (React.createElement(react_native_1.View, { style: [
             styles.list,
             {
-                backgroundColor: theme.mode === "light" ? "#f3f4f6" : "#1f2937",
-                borderColor: theme.mode === "light" ? "#e5e7eb" : "#374151",
+                backgroundColor: theme.colors.muted,
+                borderColor: theme.colors.border,
             },
             style,
         ] }, children));
@@ -68,12 +68,12 @@ var TabsTriggerFEA = function (_a) {
             styles.trigger,
             active
                 ? {
-                    backgroundColor: theme.mode === "light" ? "#ffffff" : "#0f172a",
-                    borderColor: theme.mode === "light" ? "#d1d5db" : "#334155",
+                    backgroundColor: theme.colors.background,
+                    borderColor: theme.colors.border,
                 }
                 : undefined,
         ], onPress: function () { return ctx.setValue(value); } },
-        React.createElement(react_native_1.Text, { style: { color: theme.colors.text, fontWeight: active ? "600" : "500" } }, children)));
+        React.createElement(react_native_1.Text, { style: { color: theme.colors.foreground, fontWeight: active ? "600" : "500" } }, children)));
 };
 exports.TabsTriggerFEA = TabsTriggerFEA;
 var TabsContentFEA = function (_a) {

package/dist/components/Textarea/index.js

@@ -40,12 +40,12 @@ var ThemeFEAVUiProvider_1 = require("../../theme/ThemeFEAVUiProvider");
 var TextareaFEA = function (_a) {
     var placeholder = _a.placeholder, style = _a.style;
     var theme = (0, ThemeFEAVUiProvider_1.useTheme)().theme;
-    return (React.createElement(react_native_1.TextInput, { multiline: true, textAlignVertical: "top", placeholder: placeholder, placeholderTextColor: theme.mode === "light" ? "#9ca3af" : "rgba(148,163,184,0.9)", style: [
+    return (React.createElement(react_native_1.TextInput, { multiline: true, textAlignVertical: "top", placeholder: placeholder, placeholderTextColor: theme.colors.mutedForeground, style: [
             styles.base,
             {
-                backgroundColor: theme.mode === "light" ? "#ffffff" : "rgba(15,23,42,0.9)",
-                color: theme.colors.text,
-                borderColor: theme.mode === "light" ? "#e5e7eb" : "rgba(51,65,85,0.9)",
+                backgroundColor: theme.colors.background,
+                color: theme.colors.foreground,
+                borderColor: theme.colors.input,
             },
             style,
         ] }));

package/dist/components/Typography/index.js

@@ -51,7 +51,13 @@ var TypographyFEA = function (_a) {
                     : variant === "muted"
                         ? styles.muted
                         : styles.p;
-    return (React.createElement(react_native_1.Text, { style: [variantStyle, { color: theme.colors.text }, style] }, children));
+    return (React.createElement(react_native_1.Text, { style: [
+            variantStyle,
+            {
+                color: variant === "muted" ? theme.colors.mutedForeground : theme.colors.foreground,
+            },
+            style,
+        ] }, children));
 };
 exports.TypographyFEA = TypographyFEA;
 var styles = react_native_1.StyleSheet.create({

package/dist/theme/colors.d.ts

@@ -1,20 +1,50 @@
 export declare const lightTheme: {
     mode: string;
     colors: {
+        background: string;
+        foreground: string;
+        card: string;
+        cardForeground: string;
+        popover: string;
+        popoverForeground: string;
+        muted: string;
+        mutedForeground: string;
+        border: string;
+        input: string;
+        ring: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        destructive: string;
+        destructiveForeground: string;
         bg: string;
         text: string;
-        primary: string;
-        border: string;
         glass: string;
     };
 };
 export declare const darkTheme: {
     mode: string;
     colors: {
+        background: string;
+        foreground: string;
+        card: string;
+        cardForeground: string;
+        popover: string;
+        popoverForeground: string;
+        muted: string;
+        mutedForeground: string;
+        border: string;
+        input: string;
+        ring: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        destructive: string;
+        destructiveForeground: string;
         bg: string;
         text: string;
-        primary: string;
-        border: string;
         glass: string;
     };
 };

package/dist/theme/colors.js

@@ -7,20 +7,53 @@ exports.darkTheme = exports.lightTheme = void 0;
 exports.lightTheme = {
     mode: 'light',
     colors: {
-        bg: '#eef1f5',
-        text: '#1f2937',
-        primary: '#6c7cff',
-        border: 'rgba(255,255,255,0.4)',
-        glass: 'rgba(255,255,255,0.2)',
+        // shadcn-like semantic tokens (neutral base + clear primary)
+        background: "#ffffff",
+        foreground: "#0f172a",
+        card: "#ffffff",
+        cardForeground: "#0f172a",
+        popover: "#ffffff",
+        popoverForeground: "#0f172a",
+        muted: "#f1f5f9",
+        mutedForeground: "#64748b",
+        border: "#e2e8f0",
+        input: "#e2e8f0",
+        ring: "#2563eb",
+        primary: "#2563eb",
+        primaryForeground: "#ffffff",
+        secondary: "#f1f5f9",
+        secondaryForeground: "#0f172a",
+        destructive: "#dc2626",
+        destructiveForeground: "#ffffff",
+        // backwards-compatible aliases
+        bg: "#ffffff",
+        text: "#0f172a",
+        glass: "rgba(255,255,255,0.55)",
     }
 };
 exports.darkTheme = {
     mode: 'dark',
     colors: {
-        bg: '#0f172a',
-        text: '#f1f5f9',
-        primary: '#8b9cff',
-        border: 'rgba(255,255,255,0.1)',
-        glass: 'rgba(255,255,255,0.05)',
+        background: "#020617",
+        foreground: "#f8fafc",
+        card: "#0b1220",
+        cardForeground: "#f8fafc",
+        popover: "#0b1220",
+        popoverForeground: "#f8fafc",
+        muted: "rgba(148,163,184,0.12)",
+        mutedForeground: "rgba(148,163,184,0.85)",
+        border: "rgba(148,163,184,0.22)",
+        input: "rgba(148,163,184,0.22)",
+        ring: "#60a5fa",
+        primary: "#60a5fa",
+        primaryForeground: "#020617",
+        secondary: "rgba(148,163,184,0.12)",
+        secondaryForeground: "#f8fafc",
+        destructive: "#f87171",
+        destructiveForeground: "#020617",
+        // backwards-compatible aliases
+        bg: "#020617",
+        text: "#f8fafc",
+        glass: "rgba(2,6,23,0.6)",
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-feav-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Shadcn-style React Native UI kit with theme support.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/readme.md

@@ -1,87 +1,87 @@
-# rn-feav-ui
-
-Shadcn-style React Native UI kit with theme support (light/dark).
-
-## Features
-
-- Simple, consistent “shadcn-like” components (Button/Input/Card/etc.)
-- Light/Dark mode via `ThemeFEAVUiProvider`
-- Pure React Native primitives (minimal native dependencies)
-
-## Installation
-
-```bash
-npm install rn-feav-ui
-```
-
-### TypeScript IntelliSense (auto-complete)
-
-Thư viện đã cấu hình `types`/`exports` nên bạn có thể import trực tiếp từ package root để IDE gợi ý component:
-
-```ts
-import { ButtonFEA, InputFEA, CardFEA, ThemeFEAVUiProvider } from "rn-feav-ui";
-```
-
-## Usage
-
-Wrap your app with the theme provider:
-
-```tsx
-import * as React from "react";
-import { ThemeFEAVUiProvider } from "rn-feav-ui";
-
-export default function App() {
-  return <ThemeFEAVUiProvider>{/* your screens */}</ThemeFEAVUiProvider>;
-}
-```
-
-Example (Button + Input + Dialog):
-
-```tsx
-import * as React from "react";
-import {
-  ButtonFEA,
-  InputFEA,
-  DialogFEA,
-  DialogHeaderFEA,
-  DialogFooterFEA,
-  TypographyFEA,
-} from "rn-feav-ui";
-
-export function Example() {
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <>
-      <InputFEA placeholder="Email" />
-      <ButtonFEA title="Open dialog" onPress={() => setOpen(true)} />
-      <DialogFEA open={open} onOpenChange={setOpen}>
-        <DialogHeaderFEA>
-          <TypographyFEA variant="h3">Confirm</TypographyFEA>
-        </DialogHeaderFEA>
-        <DialogFooterFEA>
-          <ButtonFEA title="Cancel" variant="ghost" onPress={() => setOpen(false)} />
-          <ButtonFEA title="OK" onPress={() => setOpen(false)} />
-        </DialogFooterFEA>
-      </DialogFEA>
-    </>
-  );
-}
-```
-
-## Component List
-
-Core components (exported from `rn-feav-ui`):
-- Layout/Surface: `CardFEA`, `GlassCardFEA`, `SeparatorFEA`
-- Navigation/Containers: `NavbarFEA`, `TabBarFEA`, `TabsFEA` (with `TabsListFEA`, `TabsTriggerFEA`, `TabsContentFEA`)
-- Inputs/Form: `InputFEA`, `TextareaFEA`, `LabelFEA`, `CheckboxFEA`, `SwitchFEA`
-- Feedback: `AlertFEA`, `ProgressFEA`, `SkeletonFEA`
-- Data display: `AvatarFEA`, `ListItemFEA`, `BadgeFEA`
-- Overlays: `ModalFEA`, `BottomSheetFEA`, `DialogFEA` (with `DialogHeaderFEA`, `DialogFooterFEA`)
-- Misc: `AccordionFEA`, `TypographyFEA`, `ButtonFEA`
-
-## Showcase
-
-There is a full demo inside the repo at:
-
-- `src/examples/Showcase.tsx`
+# rn-feav-ui
+
+Shadcn-style React Native UI kit with theme support (light/dark).
+
+## Features
+
+- Simple, consistent “shadcn-like” components (Button/Input/Card/etc.)
+- Light/Dark mode via `ThemeFEAVUiProvider`
+- Pure React Native primitives (minimal native dependencies)
+
+## Installation
+
+```bash
+npm install rn-feav-ui
+```
+
+### TypeScript IntelliSense (auto-complete)
+
+Thư viện đã cấu hình `types`/`exports` nên bạn có thể import trực tiếp từ package root để IDE gợi ý component:
+
+```ts
+import { ButtonFEA, InputFEA, CardFEA, ThemeFEAVUiProvider } from "rn-feav-ui";
+```
+
+## Usage
+
+Wrap your app with the theme provider:
+
+```tsx
+import * as React from "react";
+import { ThemeFEAVUiProvider } from "rn-feav-ui";
+
+export default function App() {
+  return <ThemeFEAVUiProvider>{/* your screens */}</ThemeFEAVUiProvider>;
+}
+```
+
+Example (Button + Input + Dialog):
+
+```tsx
+import * as React from "react";
+import {
+  ButtonFEA,
+  InputFEA,
+  DialogFEA,
+  DialogHeaderFEA,
+  DialogFooterFEA,
+  TypographyFEA,
+} from "rn-feav-ui";
+
+export function Example() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <InputFEA placeholder="Email" />
+      <ButtonFEA title="Open dialog" onPress={() => setOpen(true)} />
+      <DialogFEA open={open} onOpenChange={setOpen}>
+        <DialogHeaderFEA>
+          <TypographyFEA variant="h3">Confirm</TypographyFEA>
+        </DialogHeaderFEA>
+        <DialogFooterFEA>
+          <ButtonFEA title="Cancel" variant="ghost" onPress={() => setOpen(false)} />
+          <ButtonFEA title="OK" onPress={() => setOpen(false)} />
+        </DialogFooterFEA>
+      </DialogFEA>
+    </>
+  );
+}
+```
+
+## Component List
+
+Core components (exported from `rn-feav-ui`):
+- Layout/Surface: `CardFEA`, `GlassCardFEA`, `SeparatorFEA`
+- Navigation/Containers: `NavbarFEA`, `TabBarFEA`, `TabsFEA` (with `TabsListFEA`, `TabsTriggerFEA`, `TabsContentFEA`)
+- Inputs/Form: `InputFEA`, `TextareaFEA`, `LabelFEA`, `CheckboxFEA`, `SwitchFEA`
+- Feedback: `AlertFEA`, `ProgressFEA`, `SkeletonFEA`
+- Data display: `AvatarFEA`, `ListItemFEA`, `BadgeFEA`
+- Overlays: `ModalFEA`, `BottomSheetFEA`, `DialogFEA` (with `DialogHeaderFEA`, `DialogFooterFEA`)
+- Misc: `AccordionFEA`, `TypographyFEA`, `ButtonFEA`
+
+## Showcase
+
+There is a full demo inside the repo at:
+
+- `src/examples/Showcase.tsx`