rn-feav-ui 1.0.2 → 1.0.4

package/dist/examples/Showcase.js

@@ -0,0 +1,131 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Showcase = void 0;
+var React = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var ThemeFEAVUiProvider_1 = require("../theme/ThemeFEAVUiProvider");
+var components_1 = require("../components");
+var ShowcaseContent = function () {
+    var _a = (0, ThemeFEAVUiProvider_1.useTheme)(), theme = _a.theme, toggleTheme = _a.toggleTheme;
+    var _b = React.useState(true), checked = _b[0], setChecked = _b[1];
+    var _c = React.useState(false), switchOn = _c[0], setSwitchOn = _c[1];
+    var _d = React.useState(false), dialogOpen = _d[0], setDialogOpen = _d[1];
+    var _e = React.useState(false), modalOpen = _e[0], setModalOpen = _e[1];
+    return (React.createElement(react_native_1.View, { style: { flex: 1, backgroundColor: theme.colors.bg } },
+        React.createElement(react_native_1.ScrollView, { contentContainerStyle: { padding: 16, gap: 14 } },
+            React.createElement(components_1.NavbarFEA, { title: "FEAV UI Showcase" }),
+            React.createElement(components_1.CardFEA, null,
+                React.createElement(components_1.TypographyFEA, { variant: "h2" }, "Theme"),
+                React.createElement(components_1.TypographyFEA, { variant: "muted" },
+                    "Current: ",
+                    theme.mode),
+                React.createElement(react_native_1.View, { style: { marginTop: 10 } },
+                    React.createElement(components_1.ButtonFEA, { title: "Toggle Theme", variant: "outline", onPress: toggleTheme }))),
+            React.createElement(components_1.CardFEA, null,
+                React.createElement(components_1.TypographyFEA, { variant: "h2" }, "Buttons"),
+                React.createElement(react_native_1.View, { style: { gap: 8, marginTop: 10 } },
+                    React.createElement(components_1.ButtonFEA, { title: "Primary", onPress: function () { return null; } }),
+                    React.createElement(components_1.ButtonFEA, { title: "Secondary / Soft", variant: "soft", onPress: function () { return null; } }),
+                    React.createElement(components_1.ButtonFEA, { title: "Outline", variant: "outline", onPress: function () { return null; } }),
+                    React.createElement(components_1.ButtonFEA, { title: "Ghost", variant: "ghost", onPress: function () { return null; } }),
+                    React.createElement(components_1.ButtonFEA, { title: "Glass", variant: "glass", onPress: function () { return null; } }))),
+            React.createElement(components_1.CardFEA, null,
+                React.createElement(components_1.TypographyFEA, { variant: "h2" }, "Inputs"),
+                React.createElement(react_native_1.View, { style: { marginTop: 10 } },
+                    React.createElement(components_1.LabelFEA, null, "Username"),
+                    React.createElement(components_1.InputFEA, { placeholder: "Enter username" }),
+                    React.createElement(components_1.LabelFEA, null, "Description"),
+                    React.createElement(components_1.TextareaFEA, { placeholder: "Write something..." }))),
+            React.createElement(components_1.CardFEA, null,
+                React.createElement(components_1.TypographyFEA, { variant: "h2" }, "Selection"),
+                React.createElement(react_native_1.View, { style: { marginTop: 10, gap: 12 } },
+                    React.createElement(components_1.CheckboxFEA, { checked: checked, onChange: setChecked, label: "Accept terms" }),
+                    React.createElement(components_1.SwitchFEA, { value: switchOn, onValueChange: setSwitchOn, label: "Enable notifications" }))),
+            React.createElement(components_1.CardFEA, null,
+                React.createElement(components_1.TypographyFEA, { variant: "h2" }, "Status & Feedback"),
+                React.createElement(react_native_1.View, { style: { marginTop: 10, gap: 10 } },
+                    React.createElement(components_1.BadgeFEA, { label: "Beta" }),
+                    React.createElement(components_1.AlertFEA, { title: "Heads up!", description: "This is a default alert." }),
+                    React.createElement(components_1.AlertFEA, { variant: "destructive", title: "Something went wrong", description: "Please try again later." }),
+                    React.createElement(components_1.ProgressFEA, { value: 66 }),
+                    React.createElement(components_1.SkeletonFEA, { height: 40 }))),
+            React.createElement(components_1.CardFEA, null,
+                React.createElement(components_1.TypographyFEA, { variant: "h2" }, "Display"),
+                React.createElement(react_native_1.View, { style: { marginTop: 10, gap: 12 } },
+                    React.createElement(react_native_1.View, { style: { flexDirection: "row", gap: 8 } },
+                        React.createElement(components_1.AvatarFEA, { fallback: "NT" }),
+                        React.createElement(components_1.AvatarFEA, { fallback: "UI", size: 32 })),
+                    React.createElement(components_1.SeparatorFEA, null),
+                    React.createElement(components_1.ListItemFEA, { title: "List title", subtitle: "Supporting text for list item." }))),
+            React.createElement(components_1.CardFEA, null,
+                React.createElement(components_1.TypographyFEA, { variant: "h2" }, "Tabs"),
+                React.createElement(components_1.TabsFEA, { defaultValue: "account" },
+                    React.createElement(components_1.TabsListFEA, { style: { marginTop: 10 } },
+                        React.createElement(components_1.TabsTriggerFEA, { value: "account" }, "Account"),
+                        React.createElement(components_1.TabsTriggerFEA, { value: "password" }, "Password")),
+                    React.createElement(components_1.TabsContentFEA, { value: "account" },
+                        React.createElement(components_1.TypographyFEA, { variant: "p" }, "Manage your account settings here.")),
+                    React.createElement(components_1.TabsContentFEA, { value: "password" },
+                        React.createElement(components_1.TypographyFEA, { variant: "p" }, "Change your password from this tab.")))),
+            React.createElement(components_1.AccordionFEA, { title: "Accordion Example" },
+                React.createElement(components_1.TypographyFEA, { variant: "p" }, "This content is shown when accordion is open.")),
+            React.createElement(components_1.TabBarFEA, null,
+                React.createElement(components_1.ButtonFEA, { title: "Home", variant: "ghost", onPress: function () { return null; } }),
+                React.createElement(components_1.ButtonFEA, { title: "Search", variant: "ghost", onPress: function () { return null; } }),
+                React.createElement(components_1.ButtonFEA, { title: "Profile", variant: "ghost", onPress: function () { return null; } })),
+            React.createElement(components_1.CardFEA, null,
+                React.createElement(components_1.TypographyFEA, { variant: "h2" }, "Overlays"),
+                React.createElement(react_native_1.View, { style: { marginTop: 10, gap: 8 } },
+                    React.createElement(components_1.ButtonFEA, { title: "Open Dialog", onPress: function () { return setDialogOpen(true); } }),
+                    React.createElement(components_1.ButtonFEA, { title: "Open Modal", variant: "outline", onPress: function () { return setModalOpen(true); } }))),
+            React.createElement(components_1.BottomSheetFEA, null,
+                React.createElement(components_1.TypographyFEA, { variant: "small" }, "BottomSheet preview area"))),
+        React.createElement(components_1.DialogFEA, { open: dialogOpen, onOpenChange: setDialogOpen },
+            React.createElement(components_1.DialogHeaderFEA, null,
+                React.createElement(components_1.TypographyFEA, { variant: "h3" }, "Confirm Action"),
+                React.createElement(components_1.TypographyFEA, { variant: "muted" }, "This is a shadcn-style dialog on React Native.")),
+            React.createElement(components_1.DialogFooterFEA, null,
+                React.createElement(components_1.ButtonFEA, { title: "Cancel", variant: "ghost", onPress: function () { return setDialogOpen(false); } }),
+                React.createElement(components_1.ButtonFEA, { title: "Continue", onPress: function () { return setDialogOpen(false); } }))),
+        React.createElement(components_1.ModalFEA, { visible: modalOpen },
+            React.createElement(components_1.TypographyFEA, { variant: "h3" }, "Modal Content"),
+            React.createElement(components_1.TypographyFEA, { variant: "muted" }, "This is the modal component preview."),
+            React.createElement(react_native_1.View, { style: { marginTop: 12 } },
+                React.createElement(components_1.ButtonFEA, { title: "Close", onPress: function () { return setModalOpen(false); } })))));
+};
+var Showcase = function () { return (React.createElement(ThemeFEAVUiProvider_1.ThemeFEAVUiProvider, null,
+    React.createElement(ShowcaseContent, null))); };
+exports.Showcase = Showcase;

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,14 +1,31 @@
 {
   "name": "rn-feav-ui",
-  "version": "1.0.2",
+  "version": "1.0.4",
+  "description": "Shadcn-style React Native UI kit with theme support.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "react-native": "dist/index.js",
+  "sideEffects": false,
   "files": [
     "dist"
   ],
-"scripts": {
-  "build": "tsc"
-},
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react-native",
+    "ui-kit",
+    "components",
+    "shadcn"
+  ],
   "peerDependencies": {
     "expo-linear-gradient": ">=55.0.11",
     "react": ">=18",

package/readme.md

@@ -1,21 +1,87 @@
-# 🌈 RN FEAV UI
-
-Modern **Glassmorphism + Soft UI** component library for React Native  
-Lightweight • Beautiful • Dark Mode Ready
-
----
-
-## ✨ Features
-
-- 🧊 Glassmorphism UI (no blur, performance friendly)
-- 🌗 Light / Dark mode support
-- 🎨 Soft UI (neumorphism)
-- ⚡ Pure React Native (no native dependency)
-- 🎯 Easy to customize theme
-
----
-
-## 📦 Installation
-
-```bash
-npm install rn-feav-ui
+# 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`