@n3wth/ui 0.2.2 → 0.2.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Oliver Newth
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,40 +1,184 @@
 # @n3wth/ui
 
-Atomic design system for Newth sites - flat, minimal, iOS-inspired.
+[![npm version](https://img.shields.io/npm/v/@n3wth/ui.svg)](https://www.npmjs.com/package/@n3wth/ui)
+[![npm downloads](https://img.shields.io/npm/dm/@n3wth/ui.svg)](https://www.npmjs.com/package/@n3wth/ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-## Install
+Atomic design system for Newth sites. Flat, minimal, iOS-inspired. No shadows, no glows, just clean glass morphism.
+
+**Demo**: [ui.newth.ai](https://ui.newth.ai)
+
+## Installation
+
+```bash
+npm install @n3wth/ui
+```
+
+### Peer Dependencies
+
+Requires React 18+ and React DOM:
 
 ```bash
-npm i @n3wth/ui
+npm install react react-dom
 ```
 
-## Usage
+## Quick Start
 
 ```tsx
 import { Button, Card, Nav } from '@n3wth/ui'
 import '@n3wth/ui/styles'
 ```
 
-### Tailwind Preset
+### Tailwind CSS Preset
+
+Include the design tokens in your Tailwind config:
 
 ```js
 // tailwind.config.js
 export default {
-  presets: [require('@n3wth/ui/tailwind')]
+  presets: [require('@n3wth/ui/tailwind')],
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@n3wth/ui/dist/**/*.js'
+  ]
 }
 ```
 
 ## Components
 
-**Atoms**: Button, Input, Icon, Badge
+### Atoms
+
+Basic building blocks:
+
+| Component | Description |
+|-----------|-------------|
+| `Button` | Primary, secondary, ghost, glass variants with loading state |
+| `Badge` | Default, sage, coral, mint, gold, outline variants |
+| `Input` | Text input with glass variant, icons, and error state |
+| `Icon` | 20+ SVG icons (arrows, check, x, copy, search, github, etc.) |
+| `AnimatedText` | Text with entrance animations |
+| `HamburgerIcon` | Animated menu icon |
+| `NoiseOverlay` | Subtle noise texture overlay |
+| `ScrollIndicator` | Scroll progress indicator |
+
+### Molecules
+
+Composite components:
+
+| Component | Description |
+|-----------|-------------|
+| `Card` | Container with header, content, footer. Glass/interactive variants |
+| `NavLink` | Navigation link with underline/pill styles |
+| `CommandBox` | Copy-to-clipboard code display |
+| `ThemeToggle` | Dark/light mode toggle |
+| `MobileDrawer` | Slide-out mobile navigation |
+
+### Organisms
+
+Complex UI sections:
+
+| Component | Description |
+|-----------|-------------|
+| `Nav` | Fixed navigation with mobile menu and theme toggle |
+| `Hero` | Hero section with badge, title, description, CTAs |
+| `Section` | Content section wrapper with header |
+| `Footer` | Multi-column footer with sections |
+
+## Hooks
+
+```tsx
+import { useTheme, useMediaQuery, useKeyboardShortcuts, useReducedMotion } from '@n3wth/ui'
+```
+
+| Hook | Description |
+|------|-------------|
+| `useTheme` | Dark/light theme management with system preference detection |
+| `useMediaQuery` | Responsive breakpoint detection |
+| `useKeyboardShortcuts` | Keyboard shortcut handler |
+| `useReducedMotion` | Respects user's motion preferences |
+
+## Design Tokens
+
+The Tailwind preset includes:
+
+- **Colors**: Semantic color palette with dark mode support
+- **Typography**: Display and body font families
+- **Spacing**: Consistent spacing scale
+- **Effects**: Glass morphism and blur effects
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Watch mode for library development
+npm run dev
+
+# Run demo app at localhost:5173
+npm run demo
+
+# Build library to dist/
+npm run build
+
+# Build demo for deployment
+npm run demo:build
+
+# Lint
+npm run lint
+```
+
+## Project Structure
+
+```
+src/
+  atoms/        # Button, Badge, Input, Icon, etc.
+  molecules/    # Card, NavLink, CommandBox, etc.
+  organisms/    # Nav, Hero, Footer, Section
+  hooks/        # useTheme, useMediaQuery, etc.
+  tokens/       # Design tokens (colors, typography)
+demo/           # Demo app (ui.newth.ai)
+```
+
+## Usage Examples
+
+### Button
 
-**Molecules**: Card, NavLink, ThemeToggle, CommandBox
+```tsx
+import { Button, Icon } from '@n3wth/ui'
+
+<Button variant="primary">Primary</Button>
+<Button variant="glass" isLoading>Loading</Button>
+<Button leftIcon={<Icon name="github" />}>GitHub</Button>
+```
+
+### Card
 
-**Organisms**: Nav, Footer, Hero, Section
+```tsx
+import { Card, CardHeader, CardTitle, CardContent } from '@n3wth/ui'
+
+<Card variant="glass">
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+  </CardHeader>
+  <CardContent>Content here</CardContent>
+</Card>
+```
+
+### Theme
+
+```tsx
+import { useTheme, ThemeToggle } from '@n3wth/ui'
+
+function App() {
+  const { theme, toggleTheme } = useTheme()
+  return <ThemeToggle theme={theme} onToggle={toggleTheme} />
+}
+```
 
-## Demo
+## Browser Support
 
-https://ui.newth.ai
+Supports all modern browsers. Uses CSS custom properties and backdrop-filter for glass effects.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@n3wth/ui",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Atomic design system for Newth sites - flat, minimal, iOS-inspired",
   "type": "module",
   "main": "./dist/index.js",
@@ -40,6 +40,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.0",
+    "eslint": "^9.39.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwindcss": "^4.1.18",
@@ -56,6 +57,6 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/n3wth/n3wth-ui"
+    "url": "https://github.com/n3wth/ui"
   }
 }