@sandurtech/sandui 0.1.0 → 0.1.1

package/README.md

@@ -1,111 +1,120 @@
-<p align="center">
-  <strong>SandUI</strong><br/>
-  The design system powering the SandurTech ecosystem.
-</p>
+# SandUI
 
----
+<div align="center">
+  <img src="public/SandurTech-Logo-SVG.svg" alt="SandUI Logo" width="120" />
+  <p><strong>A high-performance, accessible React component library and Design System for SandurTech — featuring WAI-ARIA compliance, native dark mode, and TypeScript-first components.</strong></p>
 
-## Overview
+  [![npm version](https://img.shields.io/npm/v/@sandurtech/sandui.svg?style=flat-classic)](https://www.npmjs.com/package/@sandurtech/sandui)
+  [![License](https://img.shields.io/npm/l/@sandurtech/sandui.svg?style=flat-classic)](LICENSE)
+  [![Types](https://img.shields.io/npm/types/@sandurtech/sandui?style=flat-classic)](https://www.typescriptlang.org/)
+  [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-orange.svg?style=flat-classic)](https://github.com/sandurtech/sandui/pulls)
+</div>
 
-SandUI is a modern, Inter-font based React component library built for consistency across every SandurTech microservice. It follows the **Atomic Design** methodology — organizing components from Atoms to Templates — and ships with a comprehensive Storybook for documentation and visual testing.
+---
 
-## Tech Stack
+## ✨ Features
 
-| Layer | Technology |
-|---|---|
-| **Framework** | React 18+ |
-| **Build Tool** | Vite 7 |
-| **Styling** | SCSS Modules |
-| **Documentation** | Storybook 8 |
-| **Architecture** | Atomic Design |
-| **Typography** | Inter (Google Fonts) |
-| **Icons** | Material Symbols Rounded |
-| **CI/CD** | GitHub Actions → GitHub Pages |
+- ♿ **WAI-ARIA Compliant**: Built with accessibility as a first-class citizen.
+- 🌓 **Native Dark Mode**: Seamless theme switching with strictly derived design tokens.
+- ⚡ **Zero Lucide Dependency**: Utilizes Google Material Symbols (Rounded) for a lean bundle.
+- 📘 **TypeScript First**: Full IntelliSense support with comprehensive JSDoc documentation.
+- 🎨 **Modern Aesthetics**: Premium, high-performance UI primitives tailored for SaaS and dashboards.
+- 📱 **Fully Responsive**: Mobile-optimized layouts and documentation.
+- 🔌 **Composable API**: Declarative component composition with compound components.
+- 🎯 **Icon System**: Custom icon provider supporting Lucide, Radix, and other libraries.
 
-## Getting Started
+## 🚀 Quick Start
 
-To use SandUI in your React project, install the package via npm:
+### Installation
 
 ```bash
-# Install
 npm install @sandurtech/sandui
 ```
 
-Then, you can import and use the components, like the `<Button />` component, as shown below:
+### Icon Dependency
+
+SandUI uses **Google Material Symbols (Rounded)** for all internal icons. To ensure icons render correctly, you must include the following link in your `index.html` or import it in your CSS:
+
+```html
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+```
+
+Or in your CSS:
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+```
+
+### Usage
 
-```jsx
+1. **Wrap your app** with the `SandThemeProvider` to enable styling and tokens.
+2. **Import the global CSS** file in your entry point (e.g., `main.tsx`).
+
+```tsx
 import React from 'react';
-import { SandButton, SandThemeProvider } from '@sandurtech/sandui';
-import '@sandurtech/sandui/dist/style.css'; // Make sure to import the styles!
+import { SandThemeProvider, SandButton, SandCard } from '@sandurtech/sandui';
+import '@sandurtech/sandui/style.css';
 
-function App() {
+export function App() {
   return (
-    <SandThemeProvider defaultTheme="light">
-      <SandButton variant="primary" onClick={() => alert('Clicked!')}>
-        Click Me
-      </SandButton>
+    <SandThemeProvider defaultTheme="system">
+      <SandCard header={<h3>Getting Started</h3>}>
+        <p>Start building your next microservice with SandUI primitives.</p>
+        <SandButton variant="primary">
+          Launch Console
+        </SandButton>
+      </SandCard>
     </SandThemeProvider>
   );
 }
-
-export default App;
 ```
 
-### Development Scripts
+## 🛠 Component Surface
 
-```bash
-# Development
-npm run dev
+SandUI provides a growing set of modular components categorized for efficiency:
 
-# Build library
-npm run build
+| Category | Primitives |
+| :--- | :--- |
+| **Foundation** | `SandThemeProvider`, `SandIconProvider`, `SandBox`, `SandStack`, `SandGrid` |
+| **Layout** | `SandContainer`, `SandHeader`, `SandAppLayout`, `SandMicroserviceLayout` |
+| **Typography** | `SandTitle`, `SandText`, `SandCode`, `SandKBD` |
+| **Form Controls** | `SandInput`, `SandInputGroup`, `SandCheckbox`, `SandRadio`, `SandSwitch`, `SandChoiceGroup` |
+| **Data Display** | `SandTable`, `SandTabs`, `SandAccordion`, `SandCard`, `SandBadge`, `SandDivider` |
+| **Feedback** | `SandAlert`, `SandToast`, `SandSnackbar`, `SandLoader`, `SandProgress`, `SandSkeleton` |
+| **Navigation** | `SandNavbar`, `SandDrawer`, `SandBreadcrumbs`, `SandPagination` |
+| **Overlays** | `SandModal`, `SandDialog`, `SandTooltip` |
+| **Icons** | `SandIcon` (with custom provider support) |
 
-# Run Storybook
-npm run storybook
+## 📖 Documentation
 
-# Build Storybook for deployment
-npm run build-storybook
-```
+Explore interactive examples, API references, and design guidelines:
 
-## Component Inventory
+👉 [**View Live Documentation**](https://sandurtech.github.io/SandUI/)
 
-| Layer | Components |
-|---|---|
-| **Atoms** | `SandButton`, `SandLink`, `SandBadge`, `SandIcon` |
-| **Molecules** | `SandInputGroup`, `SandCard`, `SandToast`, `SandBox` |
-| **Organisms** | `SandNavbar`, `SandSidebar`, `SandFooter` |
-| **Templates** | `StandardLayout`, `AuthLayout` |
-| **Context** | `SandThemeProvider`, `useSandTheme` |
+## 🧪 Development
 
-## Usage
+Contributions are welcome! To get started locally:
 
-```jsx
-import { SandButton, SandCard, SandThemeProvider } from '@sandurtech/sandui';
+```bash
+# Install dependencies
+npm install
 
-function App() {
-  return (
-    <SandThemeProvider>
-      <SandCard>
-        <h2>Welcome</h2>
-        <SandButton variant="primary">Get Started</SandButton>
-      </SandCard>
-    </SandThemeProvider>
-  );
-}
-```
+# Start documentation app with Hot Module Replacement (HMR)
+npm run dev
 
-## Design Tokens
+# Run unit tests with Vitest
+npm run test
 
-- **Colors**: Primary `#262626`, Accent `orange`, Background `#F2F2F2`
-- **Spacing**: Strict 8px grid (`8, 16, 24, 32, 40, 48`)
-- **Radius**: `4px`, `6px`, `8px`, `12px`, `9999px`
-- **Shadows**: `sm`, `md`, `lg` + `glow`
-- **Fonts**: Inter (body), Outfit (display)
+# Build production library artifacts
+npm run build
+```
 
-## Keywords
+## 📄 License
 
-React 18, Vite, SCSS Modules, Design System, Atomic Design, Component Library, UI Kit, Storybook, Material Icons, Inter Font, SandurTech, GitHub Pages, Glassmorphism, Theme System, Dark Mode, Light Mode
+Distributed under the MIT License. See `LICENSE` for more information.
 
-## License
+---
 
-MIT — Built by [Amogha Raj Sandur](https://www.linkedin.com/in/amogharajsandur/) | [SandurTech](https://sandurtech.vercel.app)
+<div align="center">
+  Built with ❤️ by <strong>Amogha Raj Sandur</strong> & <strong>SandurTech (Sandur Technologies)</strong>
+</div>

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {}