docs: update README and documentation for clarity and consistency

- Revised README to enhance clarity, including renaming "Features" to "Highlights" and restructuring content for better readability.
- Updated installation instructions to include additional package managers (pnpm, bun) and emphasized namespaced imports for tree-shaking.
- Improved documentation sections, including "Getting Started," "Usage," and "Theme," to provide clearer examples and usage patterns.
- Enhanced styling and layout in documentation components for better user experience and accessibility.
- Removed outdated references and streamlined content across various sections to reflect recent changes in the library.

Author: prabhuignoto

README.md

@@ -7,9 +7,8 @@
 ![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/react-creme)
 [![codecov](https://codecov.io/gh/prabhuignoto/react-creme/branch/master/graph/badge.svg?token=JEL70TGE8Q)](https://codecov.io/gh/prabhuignoto/react-creme)
 [![Snyk](https://snyk.io/test/github/prabhuignoto/react-creme/badge.svg)](https://snyk.io/test/github/prabhuignoto/react-creme)
-[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=react-creme&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=react-creme)
-[![CodeFactor](https://www.codefactor.io/repository/github/prabhuignoto/react-creme/badge)](https://www.codefactor.io/repository/github/prabhuignoto/react-creme)
-[![CodeQL](https://github.com/prabhuignoto/react-creme/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/prabhuignoto/react-creme/actions/workflows/codeql-analysis.yml)
+<!-- [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=react-creme&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=react-creme) -->
+<!-- [![CodeQL](https://github.com/prabhuignoto/react-creme/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/prabhuignoto/react-creme/actions/workflows/codeql-analysis.yml) -->
 [![dev status](https://img.shields.io/badge/status-beta-green)](https://img.shields.io/badge/status-beta-green)
 [![GitHub license](https://img.shields.io/github/license/prabhuignoto/react-creme)](https://github.com/prabhuignoto/react-creme/blob/master/LICENSE)
 ![npm](https://img.shields.io/npm/v/react-creme)
@@ -23,100 +22,145 @@ Modern UI Toolkit for React
 
 [Explore the Components](https://react-creme.vercel.app/)
 
-<h2>Features</h2>
+<h2>Highlights</h2>
 
-- 💎 High Quality React components.
-
-- 💪 Robust components written in Typescript.
-
-- ♿ Accessible UI Components.
-
-- 🌈 57 UI Components.
-
-- 🛠️ Customizable components.
-
-- 🎨 Themeable components.
-
-- ⚙️ Minimal Third party dependencies.
-
-- 🪶 Tree-shakeable: Import only what you need (~12-20kb per component) or use the full library (~115kb gzipped with all 57 components and CSS).
+- 57 production-ready React components built with TypeScript 5.9 (strict).
+- Accessible by default with ARIA-friendly patterns and keyboard support.
+- CSS Modules, design tokens, and theming via `ThemeProvider`.
+- Namespaced entry points for tree-shaking; fully typed API surface.
+- Light dependency stack focused on React, TypeScript, and CSS Modules.
+- React 19 ready; ships ESM and CJS plus type declarations.
 
 <h2>Table of Contents</h2>
 
+- [✨ Key Features](#-key-features)
+- [📦 Packaging & Bundles](#-packaging--bundles)
+- [🧰 Tooling & Quality](#-tooling--quality)
 - [🚀 Getting Started](#-getting-started)
-- [☕ Usage](#-usage)
+- [☕ Quick Usage](#-quick-usage)
+- [🎨 Theming](#-theming)
 - [🌍 Browser Support](#-browser-support)
-- [🍫 Examples & Documentation](#-examples--documentation)
-- [🔨 Build](#-build)
-- [🤝Contributing](#contributing)
+- [🍫 Documentation](#-documentation)
+- [🔨 Build & Test](#-build--test)
+- [🤝 Contributing](#-contributing)
+
+## ✨ Key Features
+
+- Comprehensive component set: forms, navigation, overlays, data display, media, layout, disclosure, feedback, core primitives.
+- Theming-first: design tokens, CSS variables, and `ThemeProvider` to keep brand control.
+- Tree-shakeable namespaces to keep bundles lean; side effects minimized.
+- Accessibility baked in: keyboard interactions and sensible ARIA defaults.
+- Type-safe: emitted declarations for every entry point; IntelliSense-friendly.
+
+## 📦 Packaging & Bundles
+
+- Package name: `react-creme` (unscoped).
+- Namespaced imports (recommended):
+  - `react-creme/core`, `react-creme/forms`, `react-creme/feedback`, `react-creme/data-display`,
+    `react-creme/navigation`, `react-creme/overlay`, `react-creme/layout`, `react-creme/disclosure`,
+    `react-creme/media`.
+- Measured bundles (latest build):
+  - Full ESM bundle: ~119 KB gzipped.
+  - CSS bundle: ~47 KB gzipped.
+  - Examples (ESM): core ~36 KB, forms ~80 KB, data-display ~88 KB, navigation ~64 KB, overlay ~60 KB.
+- Legacy root import `react-creme` remains for compatibility.
+
+## 🧰 Tooling & Quality
+
+- Build: Vite 6 and Bun build pipeline; Turborepo for orchestration.
+- Linting: ESLint, Stylelint, Oxlint; format via Prettier.
+- Tests: Vitest + Testing Library; coverage tracked with Codecov.
+- Security and analysis: Snyk, SonarCloud, CodeQL, CodeFactor.
+- Supported runtimes: Node >= 20.18.1, Bun >= 1.1.0.
 
 ## 🚀 Getting Started
 
-Install the package using npm or yarn
+Install with your preferred package manager:
 
 ```sh
-yarn add react-creme
-
-or
-
 npm install react-creme
+yarn add react-creme
+pnpm add react-creme
+bun add react-creme
+```
 
+Import the bundled styles once (typically in your root entry point):
+```ts
+import 'react-creme/css';
 ```
 
-## ☕ Usage
+Use namespaced entry points for tree-shaking:
 
-```sh
-  import { Button } from "react-creme";
+- `react-creme/core` — buttons, ThemeProvider, utilities
+- `react-creme/forms` — inputs, sliders, switches, file upload
+- `react-creme/feedback` — notifications, loaders, progress
+- `react-creme/data-display` — tables, tags, timelines
+- `react-creme/navigation` — tabs, breadcrumbs, menus
+- `react-creme/overlay` — dialogs, drawers, tooltips
+- `react-creme/layout` — layout primitives
+- `react-creme/disclosure` — accordion and collapsible surfaces
+- `react-creme/media` — media helpers
 
-  const App = () => {
-    return (
-      <div>
-        <Button>Welcome to react-creme</Button>
-      </div>
-    );
-  };
+Full bundle (ESM) is ~119 KB gzipped; CSS bundle is ~47 KB gzipped. The legacy root import `react-creme` remains available for compatibility.
 
-  export default App;
-```
+## ☕ Quick Usage
 
-## 🌍 Browser Support
+```tsx
+import { Button, ThemeProvider } from "react-creme/core";
+import "react-creme/css";
 
-| ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png) |
-| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
-| Chrome                                                                                              | Firefox                                                                                                | Microsoft Edge                                                                              | Opera                                                                                            | Safari                                                                                              |
+function App() {
+  return (
+    <ThemeProvider>
+      <Button>Welcome to react-creme</Button>
+    </ThemeProvider>
+  );
+}
 
-## 🍫 Examples & Documentation
+export default App;
+```
 
-For more thorough examples and the API details visit the [main site](https://react-creme.vercel.app)
+## 🎨 Theming
 
-## 🔨 Build
+Theme tokens are provided via `ThemeProvider` from `react-creme/core`. Define your palette, typography, and sizing once and components across namespaces inherit it. Example:
 
-To build everything
+```tsx
+import { ThemeProvider, Theme } from "react-creme/core";
+import { Input } from "react-creme/forms";
+import "react-creme/css";
 
-```sh
-bun build
+const theme: Theme = {
+  colors: { primary: "#0074B7" },
+  fontSizes: { md: 16, sm: 14 },
+};
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Input placeholder="Search" />
+    </ThemeProvider>
+  );
+}
 ```
 
-To build the library
+## 🌍 Browser Support
 
-```sh
-bun build:lib
-```
+| ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png) |
+| --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
+| Chrome                                                                                              | Firefox                                                                                                | Microsoft Edge                                                                              | Opera                                                                                            | Safari                                                                                              |
 
-To build and run the documentation
+## 🍫 Documentation
 
-```sh
-bun build:doc
-cd ./packages/documentation/expo_dist && bunx serve .
-```
+Full docs, live examples, and API reference: [react-creme.vercel.app](https://react-creme.vercel.app)
 
-To run the Unit tests
+## 🔨 Build & Test
 
-```sh
-bun test
-```
+- Build everything: `bun build`
+- Build library only: `bun build:lib`
+- Build docs: `bun build:doc` then `cd packages/documentation/expo_dist && bunx serve .`
+- Tests: `bun test`
 
-## 🤝Contributing
+## 🤝 Contributing
 
 Contributions, ideas and PR's are welcome!. Please read the [guidelines](/CONTRIBUTING.md) for more details.
 

packages/documentation/App.scss

@@ -27,7 +27,7 @@
 
   /* Typography */
   --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  --font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Consolas', 'Courier New', monospace;
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'ui-monospace', 'Monaco', 'Courier New', monospace;
   --font-size-xs: 0.75rem;
   --font-size-sm: 0.875rem;
   --font-size-base: 1rem;
@@ -38,6 +38,11 @@
   --line-height-tight: 1.4;
   --line-height-relaxed: 1.75;
 
+  /* Code tokens */
+  --code-bg: #f7f8fb;
+  --code-bg-dark: #0f1117;
+  --code-border: #e5e7eb;
+
   /* Colors (Light mode - Modern palette) */
   --bg-primary: #fff;
   --bg-secondary: #fafafa;
@@ -102,6 +107,8 @@
   --glass-border: rgba(255, 255, 255, 0.08);
   --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 4px rgba(0, 0, 0, 0.3);
   --shadow-card-hover: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 8px rgba(0, 0, 0, 0.5);
+  --code-bg: var(--code-bg-dark);
+  --code-border: #2d2f36;
 }
 
 /* ============================================

packages/documentation/common/syntax-highlighter/syntax-highlighter.scss

@@ -6,9 +6,9 @@
   position: relative;
   width: 100%;
   margin: var(--spacing-lg) 0;
-  background: var(--bg-secondary);
+  background: var(--code-bg, var(--bg-secondary));
   border-radius: 12px;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--code-border, var(--border-color));
   overflow: hidden;
   box-shadow: var(--shadow-md);
   transition: all var(--transition-base);
@@ -136,7 +136,7 @@
     margin: 0 !important;
     padding: var(--spacing-xl) !important;
     border-radius: 0 !important;
-    background: rgba(0, 0, 0, 0.02) !important;
+    background: var(--code-bg, rgba(0, 0, 0, 0.02)) !important;
     font-family: var(--font-mono) !important;
     font-size: 0.75rem !important;
     line-height: 1.6 !important;
@@ -228,8 +228,8 @@
 
 /* Dark mode adjustments */
 .dark .rc-demo-code-block {
-  background: #1e1e1e;
-  border-color: #333;
+  background: var(--code-bg-dark, #0f1117);
+  border-color: var(--code-border, #333);
 
   .rc-demo-code-file-name {
     background: #2d2d2d;
@@ -243,7 +243,7 @@
   }
 
   .rc-demo-code-content pre {
-    background: rgba(255, 255, 255, 0.03) !important;
+    background: var(--code-bg-dark, #0f1117) !important;
   }
 }
 

packages/documentation/home/index.tsx

@@ -1,4 +1,4 @@
-import { BlockQuote, Button, Text } from '../../lib/components';
+import { Button, Text } from '../../lib/components';
 import { Section } from '../../lib/components/section/section';
 // import packages from '../../lib/package.json';
 import { SyntaxHighLighter } from './../common/syntax-highlighter';
@@ -20,34 +20,34 @@ const Home: React.FunctionComponent = () => {
         {/* SETUP */}
         <Section title="Installation" size="md" hashPrefix="home">
           <Text>
-            Getting started with the <em>react-creme</em> package is easy. To
-            install it, you can use either npm or yarn package manager. If you
-            prefer to use npm, you can install it by running the following
-            command in your terminal:
+            Install the <em>react-creme</em> package from npm using your
+            preferred manager.
           </Text>
-          <Code wrap={false}>{`npm install --save react-creme`}</Code>
+          <Code wrap={false}>{`npm install react-creme
+yarn add react-creme
+pnpm add react-creme
+bun add react-creme`}</Code>
           <Text>
-            If you prefer to use yarn, you can install it by running the
-            following command in your terminal:
+            Import the bundled styles once in your application entry point.
           </Text>
-          <Code wrap={false}>{`yarn add react-creme`}</Code>
-          <Text>
-            After the installation is complete, you can import the package and
-            use its components and functionalities in your React application.
-          </Text>
-
-          <BlockQuote>
-            Once the package is installed, you can start building your
-            application with the powerful set of features provided by
-            react-creme, such as the ThemeProvider, which allows you to
-            customize the visual design of your application with ease.
-          </BlockQuote>
+          <Code wrap={false}>{`import 'react-creme/css';`}</Code>
         </Section>
 
         <Section title="Usage" size="md" hashPrefix="home">
           <Text>
-            The example below shows how to use the react-creme package to create
-            a simple button element.
+            Use namespaced entry points for tree-shaking and clarity. Common
+            namespaces include <code>react-creme/core</code>,{' '}
+            <code>react-creme/forms</code>, <code>react-creme/feedback</code>,{' '}
+            <code>react-creme/data-display</code>,{' '}
+            <code>react-creme/navigation</code>,{' '}
+            <code>react-creme/overlay</code>, <code>react-creme/layout</code>,{' '}
+            <code>react-creme/disclosure</code>, and{' '}
+            <code>react-creme/media</code>. The legacy root import{' '}
+            <code>react-creme</code> remains available for compatibility.
+          </Text>
+          <Text>
+            The example below shows how to render a button from the core
+            namespace.
           </Text>
           <SyntaxHighLighter
             code={gettingStarted}
@@ -64,24 +64,14 @@ const Home: React.FunctionComponent = () => {
 
         <Section title="Theme" size="md" hashPrefix="home">
           <Text>
-            The <em>react-creme</em> library comes with a powerful ThemeProvider
-            wrapper that makes it easy to customize the visual elements of your
-            application. This wrapper allows you to easily change the colors,
-            fonts, and icon sizes throughout your application with a single
-            point of configuration. This can be useful in situations where you
-            need to update the visual design of your application or when you
-            want to create a consistent look and feel across multiple pages or
-            components.
-          </Text>
-          <Text>
-            The ThemeProvider wrapper is easy to use and can be integrated into
-            your application in just a few lines of code, making it a powerful
-            tool for customizing the visual design of your React projects with
-            ease.
+            Use the <em>ThemeProvider</em> from <code>react-creme/core</code> to
+            configure brand colors, typography, icon sizing, and z-index scales
+            in one place.
           </Text>
           <Text>
-            The following example demonstrates how to use the{' '}
-            <em>ThemeProvider</em> to customize your app built with react-creme.
+            Components pulled from other namespaces, such as{' '}
+            <code>react-creme/forms</code>, automatically inherit your theme.
+            The example below shows a minimal setup.
           </Text>
           <SyntaxHighLighter
             code={gettingStartedTheme}