strivui 1.22.55 → 1.22.57

package/README.md

@@ -1,174 +1,101 @@
 <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://striv-ui-web-app.vercel.app/assets/logo-C6E6T3Lj.png" width="200" alt="StrivUI Logo" />
 </p>
 
-# 🚀 StrivUI  
+<h1 align="center">StrivUI</h1>
 
-**StrivUI** is a **hybrid, utility-first UI component library** for **React**, designed to feel instantly familiar to both **React Native** and **Web developers**.  
-It follows an **Atomic CSS styling approach** and is written in **TypeScript**, providing a fast, consistent, and scalable 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 ships with **thoughtfully crafted defaults**, so you can build polished interfaces out of the box — while still keeping 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** powered by **Atomic CSS**  
-- 📱 **React Native–inspired primitives** like `<View />`, `<Text />`, `<FlatList />`  
-- 🌐 **Web-native layout components** like `<Header />`, `<Section />`, `<Card />`  
-- 🧩 Shared UI building blocks for rapid development  
-- 🛠️ Built in **TypeScript** — type-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
-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>
-  );
-}
+## Usage
 
-TypeScript
-import { Button } from 'strivui';
+```tsx
+import { Button } from "strivui";
 
-const App: React.FC = () => {
+export function App() {
   return (
-    <Button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-400">
-      Click Me
+    <Button className="bg-blue-500 text-white px-4 py-2 rounded">
+      Click me
     </Button>
   );
-};
-
-🧱 Component Categories
-🟣 React Native–Inspired Components
-
-Familiar primitives, now available for the web:
-
-<View />
-
-<Text />
-
-<ScrollView />
-
-<Pressable />
-
-<TouchableOpacity />
-
-<FlatList />
-
-<SectionList />
-
-<Image />
-
-<ImageBackground />
-
-<ActivityIndicator />
-
-🔵 Web Layout Components
-
-Semantic building blocks for responsive UIs:
-
-<Header />
-
-<Footer />
-
-<Main />
-
-<Section />
-
-<Navigation />
-
-<Container />
-
-<Card />
-
-🟢 Shared UI Components
-
-Reusable pieces for forms, modals, and tables:
-
-<Button />
-
-<Input />
-
-<TextArea />
-
-<Select />
-
-<Link />
-
-<Modal />
-
-<Dialog />
-
-<Overlay />
-
-<Table />, <TableHead />, <TableBody />, <TableRow />, <TableHeaderCell />, <TableDataCell />
-
-🎨 Styling & Theming
-
-StrivUI embraces an Atomic CSS, utility-first styling model.
-Each utility class maps to a single CSS property, giving you maximum composability and performance.
-
-You can customize any component via className or extend styles with your own design system.
-
-Coming soon: striv.config.js for overriding design tokens (colors, spacing, typography, variants).
+}
+```
 
-📚 Documentation
+---
 
-Full documentation and interactive previews will be available at:
+## Component Architecture
 
-📘 https://css_striv_ui.com
+**Primitives**
+`View` · `Text` · `ScrollView` · `Pressable` · `FlatList` · `Image`
 
-🧪 Local Development
+**Layout**
+`Header` · `Section` · `Container` · `Card` · `Navigation`
 
-To run StrivUI locally:
+**UI**
+`Button` · `Input` · `Select` · `Modal` · `Dialog` · `Table`
 
-git clone https://github.com/syedabdullahali/StrivUI.git
-cd StrivUI
-npm install
-npm run dev
+Each layer is independently importable and optimized for tree-shaking.
 
-🤝 Contributing
+---
 
-We love contributions!
+## Styling Model
 
-Fork the repo
+StrivUI uses an **atomic, utility-first CSS approach**:
 
-Create your feature branch: git checkout -b feature/my-component
+* Single-purpose utility classes
+* Deterministic composition
+* No runtime style generation
+* Seamless integration with existing design systems
 
-Commit changes: git commit -m 'Add my component'
+---
 
-Push to GitHub: git push origin feature/my-component
+## TypeScript
 
-Open a Pull Request 🚀
+StrivUI is **TypeScript-first** and ships with complete declaration files for all
+public exports, ensuring accurate IntelliSense and type safety.
 
-📄 License
+---
 
-MIT © 2025 Syed Abdullah Ali
+## Roadmap
 
+* Token-based theming (`striv.config.js`)
+* Dark mode primitives
+* Animation utilities
+* CLI scaffolding
+* SSR / RSC compatibility
 
 ---
 
-✅ This version:  
-- Replaces **“class-based styling” → “Atomic CSS”** everywhere.  
-- Reads more **professional & polished**, like a proper open-source README.  
-- Keeps all the original details, just restructured and cleaned.  
+## License
+
+MIT © Syed Abdullah Ali
 
-Want me to also design a **visual banner (GitHub social preview / LinkedIn share)** that highlights: *Atomic CSS • React Native + Web • TypeScript* for StrivUI?

package/dist/striveui.css

@@ -10197,6 +10197,315 @@ body {
   border-width: 8px;
 }
 
+:root {
+  --bg: #ffffff;
+  --bg-elevated: #ffffffcc;
+  --text: #0f172a;
+  --muted: #64748b;
+  --border: #e2e8f0;
+  --primary: #2563eb;
+  --primary-600: #1d4ed8;
+  --success: #16a34a;
+  --error: #dc2626;
+  --warning: #d97706;
+  --info: #0284c7;
+  --radius: 14px;
+  --radius-sm: 10px;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  --shadow-md: 0 10px 25px rgba(0,0,0,0.08);
+  --shadow-lg: 0 25px 50px rgba(0,0,0,0.15);
+  --transition: 200ms ease;
+  --blur: blur(12px);
+}
+
+.dark {
+  --bg: #020617;
+  --bg-elevated: #020617cc;
+  --text: #e2e8f0;
+  --muted: #94a3b8;
+  --border: #1e293b;
+}
+
+/* =========================================================
+   🧩 MIXINS
+========================================================= */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes modalIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes shimmer {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+/* =========================================================
+   🪟 MODAL
+========================================================= */
+.default_modal_overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(2, 6, 23, 0.55);
+  backdrop-filter: blur(6px);
+  display: grid;
+  place-items: center;
+  z-index: 999;
+}
+
+.default_modal {
+  background: var(--bg-elevated);
+  backdrop-filter: var(--blur);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  width: min(500px, 92%);
+  box-shadow: var(--shadow-lg);
+  animation: modalIn 0.25s ease;
+}
+
+/* =========================================================
+   📂 DROPDOWN
+========================================================= */
+.default_dropdown {
+  position: relative;
+  display: inline-block;
+}
+.default_dropdown_menu {
+  background: var(--bg-elevated);
+  backdrop-filter: var(--blur);
+  border: 1px solid var(--border);
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  min-width: 180px;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-md);
+  padding: 6px;
+  animation: fadeIn 0.2s ease;
+}
+.default_dropdown_menu > * {
+  padding: 0.5rem 0.75rem;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: var(--transition);
+}
+.default_dropdown_menu > *:hover {
+  background: rgba(37, 99, 235, 0.08);
+}
+
+/* =========================================================
+   📑 ACCORDION
+========================================================= */
+.default_accordion_item {
+  border-bottom: 1px solid var(--border);
+}
+.default_accordion_trigger {
+  width: 100%;
+  text-align: left;
+  padding: 0.9rem 0;
+  font-weight: 500;
+  color: var(--text);
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.default_accordion_content {
+  padding-bottom: 1rem;
+  color: var(--muted);
+  animation: fadeIn 0.2s ease;
+}
+
+/* =========================================================
+   🗂 TABS
+========================================================= */
+.default_tabs_list {
+  display: flex;
+  gap: 6px;
+  background: rgba(148, 163, 184, 0.12);
+  padding: 4px;
+  border-radius: var(--radius-sm);
+  width: fit-content;
+}
+.default_tabs_trigger {
+  padding: 0.45rem 0.9rem;
+  border-radius: 10px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--muted);
+  transition: var(--transition);
+}
+.default_tabs_trigger.active {
+  background: var(--bg);
+  box-shadow: var(--shadow-sm);
+  color: var(--text);
+}
+.default_tabs_content {
+  margin-top: 1rem;
+}
+
+/* =========================================================
+   💬 TOOLTIP
+========================================================= */
+.default_tooltip {
+  position: relative;
+  display: inline-block;
+}
+.default_tooltip_text {
+  position: absolute;
+  bottom: 120%;
+  left: 50%;
+  transform: translateX(-50%) scale(0.95);
+  background: #020617;
+  color: white;
+  padding: 4px 8px;
+  font-size: 12px;
+  border-radius: 6px;
+  opacity: 0;
+  pointer-events: none;
+  transition: var(--transition);
+  white-space: nowrap;
+}
+.default_tooltip:hover .default_tooltip_text {
+  opacity: 1;
+  transform: translateX(-50%) scale(1);
+}
+
+/* =========================================================
+   🏷 BADGE
+========================================================= */
+.default_badge {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: 12px;
+  border-radius: 999px;
+  background: rgba(37, 99, 235, 0.1);
+  color: var(--primary);
+  font-weight: 500;
+}
+
+/* =========================================================
+   👤 AVATAR
+========================================================= */
+.default_avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 999px;
+  overflow: hidden;
+  background: #e2e8f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  color: var(--text);
+}
+.default_avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* =========================================================
+   🚨 ALERT
+========================================================= */
+.default_alert {
+  padding: 0.9rem 1rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  font-size: 14px;
+}
+.default_alert_success {
+  background: rgba(22, 163, 74, 0.1);
+  color: var(--success);
+}
+.default_alert_error {
+  background: rgba(220, 38, 38, 0.1);
+  color: var(--error);
+}
+.default_alert_warning {
+  background: rgba(217, 119, 6, 0.1);
+  color: var(--warning);
+}
+.default_alert_info {
+  background: rgba(2, 132, 199, 0.1);
+  color: var(--info);
+}
+
+/* =========================================================
+   💀 SKELETON
+========================================================= */
+.default_skeleton {
+  background: linear-gradient(100deg, rgba(148, 163, 184, 0.2) 25%, rgba(148, 163, 184, 0.35) 37%, rgba(148, 163, 184, 0.2) 63%);
+  background-size: 400% 100%;
+  border-radius: var(--radius-sm);
+  animation: shimmer 1.4s ease infinite;
+}
+
+/* =========================================================
+   🔘 SWITCH
+========================================================= */
+.default_switch {
+  width: 42px;
+  height: 24px;
+  background: #cbd5f5;
+  border-radius: 999px;
+  position: relative;
+  border: none;
+  cursor: pointer;
+  transition: var(--transition);
+}
+.default_switch_thumb {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 18px;
+  height: 18px;
+  background: white;
+  border-radius: 999px;
+  transition: var(--transition);
+  box-shadow: var(--shadow-sm);
+}
+.default_switch.active {
+  background: var(--primary);
+}
+.default_switch.active .default_switch_thumb {
+  transform: translateX(18px);
+}
+
+/* =========================================================
+   📊 PROGRESS
+========================================================= */
+.default_progress {
+  width: 100%;
+  height: 8px;
+  background: #e2e8f0;
+  border-radius: 999px;
+  overflow: hidden;
+}
+.default_progress_bar {
+  height: 100%;
+  background: linear-gradient(90deg, #2563eb, #38bdf8);
+  transition: width 0.3s ease;
+}
+
 .grid {
   display: grid;
 }

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "strivui",
-  "version": "1.22.55",
+  "version": "1.22.57",
   "scripts": {
     "build": "npx sass app/styles/striveui.scss dist/striveui.css && rollup -c",
     "clean": "rimraf dist"
   },
   "files": [
-    "dist",
+    "dist/index.js",
+    "dist/index.esm.js",
+    "dist/types/index.d.ts",
+    "dist/striveui.css",
     "README.md"
   ],
   "description": "**StrivUI** is a modern, utility-first UI component library designed for building fast, beautiful, and accessible interfaces in **React** using both **TypeScript** and **JavaScript**.",