strivui 1.22.53 → 1.22.56

package/README.md

@@ -1,155 +1,110 @@
+````md
 <p align="center">
-  <img src="https://res-console.cloudinary.com/dpbwcdytl/thumbnails/v1/image/upload/v1753722770/c3RyaXZ1aV9sb2dvX2syZHhicQ==/drilldown" width="250" alt="StrivUI Logo" />
+  <img src="https://res-console.cloudinary.com/dpbwcdytl/thumbnails/v1/image/upload/v1753722770/c3RyaXZ1aV9sb2dvX2syZHhicQ==/drilldown" width="200" alt="StrivUI Logo" />
 </p>
 
+<h1 align="center">StrivUI</h1>
 
-**🚀StrivUI** is a hybrid, utility-first UI component library built for **React**, designed to feel instantly familiar to both **React Native** and **Web developers**. It follows a **class-based styling approach** and is written in **TypeScript**, delivering a seamless and consistent design system for modern applications.
+<p align="center">
+A hybrid, utility-first React component system inspired by React Native primitives.<br/>
+TypeScript • Atomic CSS • Tree-shakable • Minimal runtime
+</p>
 
-Every component in StrivUI comes with **thoughtfully crafted default styles**, allowing you to build polished interfaces out of the box — while still offering full flexibility for customization.
+---
 
-> Developed with ❤️ by [Syed Abdullah Ali](https://github.com/syedabdullahali)
+## Overview
 
----
+StrivUI provides a unified component model for building React applications with the
+ergonomics of **React Native primitives** and the structure of **modern web layouts**.
 
-## ✨ Why StrivUI?
+It is designed to deliver:
 
-* ⚡ **Utility-first styling** using a class-based approach
-* 📱 **React Native-style components** like `<View />`, `<Text />`, and `<FlatList />`
-* 🌐 **Web-native components** like `<Header />`, `<Section />`, and `<Card />`
-* 🧩 Shared UI building blocks for fast development
-* 🛠️ Built with TypeScript — safe and scalable
-* 💻 Lightweight and blazing fast
+- A consistent cross-platform mental model  
+- Composable, atomic styling with zero configuration  
+- Strict TypeScript support across all public APIs  
+- Lightweight, tree-shakable bundles  
 
----
+The library focuses on predictable composition, sensible defaults, and full
+`className` extensibility rather than heavy theming abstractions.
 
-## 📦 Installation
+---
 
-Install with npm or yarn:
+## Installation
 
 ```bash
 npm install strivui
-# or
-comingSoon-> yarn add strivui
-```
+````
 
 ---
 
-## 🔧 Usage
-
-### JavaScript
-
-```jsx
-import { Button } from 'strivui';
-
-function App() {
-  return <Button className="bg-blue-500 text-white px-4 py-2 rounded  hover:bg-blue-400">Click Me</Button>;
-}
-```
-
-### TypeScript
+## Usage
 
 ```tsx
-import { Button } from 'strivui';
-
-const App: React.FC = () => {
-  return <Button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-400">Click Me</Button>;
-};
+import { Button } from "strivui";
+
+export function App() {
+  return (
+    <Button className="bg-blue-500 text-white px-4 py-2 rounded">
+      Click me
+    </Button>
+  );
+}
 ```
 
 ---
 
-## 🧱 Component Categories
+## Component Architecture
 
-### 🟣 React Native–Inspired Components
+**Primitives**
+`View` · `Text` · `ScrollView` · `Pressable` · `FlatList` · `Image`
 
-Familiar primitives brought to the web:
+**Layout**
+`Header` · `Section` · `Container` · `Card` · `Navigation`
 
-* `<View />`
-* `<Text />`
-* `<ScrollView />`
-* `<Pressable />`
-* `<TouchableOpacity />`
-* `<FlatList />`
-* `<SectionList />`
-* `<Image />`
-* `<ImageBackground />`
-* `<ActivityIndicator />`
+**UI**
+`Button` · `Input` · `Select` · `Modal` · `Dialog` · `Table`
 
----
-
-### 🔵 Web Layout Components
-
-Semantic elements for responsive structure:
-
-* `<Header />`
-* `<Footer />`
-* `<Main />`
-* `<Section />`
-* `<Navigation />`
-* `<Container />`
-* `<Card />`
+Each layer is independently importable and optimized for tree-shaking.
 
 ---
 
-### 🟢 Shared UI Components
+## Styling Model
 
-Reusable components for forms, modals, tables, etc.:
+StrivUI uses an **atomic, utility-first CSS approach**:
 
-* `<Button />`
-* `<Input />`
-* `<TextArea />`
-* `<Select />`
-* `<Link />`
-* `<Modal />`
-* `<Dialog />`
-* `<Overlay />`
-* `<Table />`, `<TableHead />`, `<TableBody />`, `<TableRow />`, `<TableHeaderCell />`, `<TableDataCell />`
+* Single-purpose utility classes
+* Deterministic composition
+* No runtime style generation
+* Seamless integration with existing design systems
 
 ---
 
-## 🎨 Styling & Theming
+## TypeScript
 
-StrivUI uses a **utility-first, class-based styling approach**. You can customize components using `className` with your own styles or design system.
-
-> Coming soon: `strive.config.js` for overriding design tokens like colors, spacing, font scale, and variants.
+StrivUI is **TypeScript-first** and ships with complete declaration files for all
+public exports, ensuring accurate IntelliSense and type safety.
 
 ---
 
-## 📚 Documentation
-
-Full documentation and interactive previews will be available at:
+## Roadmap
 
-📘 [https://css\_striv\_ui.com](https://css_striv_ui.com)
+* Token-based theming (`striv.config.js`)
+* Dark mode primitives
+* Animation utilities
+* CLI scaffolding
+* SSR / RSC compatibility
 
 ---
 
-## 🧪 Local Development
+## License
 
-To run the library locally:
+MIT © Syed Abdullah Ali
 
-```bash
-git clone https://github.com/syedabdullahali/StrivUI.git
-cd StrivUI
-npm install
-npm run dev
 ```
 
 ---
 
-## 🤝 Contributing
-
-We love contributions!
-
-1. Fork the repo
-2. Create your feature branch: `git checkout -b feature/my-component`
-3. Commit your changes: `git commit -m 'Add my component'`
-4. Push to GitHub: `git push origin feature/my-component`
-5. Open a Pull Request 🚀
-
----
-
-## 📄 License
-
-MIT © 2025 [Syed Abdullah Ali](https://github.com/syedabdullahali)
-
----
+If you want, I can next add a **“Philosophy” section (very short)** that explains:
+> “No runtime styling, no heavy context providers, just composable primitives”
+That makes it sound **very senior / systems-level** like Radix, Ark UI, or Tamagui.
+```