npm - @marcoschwartz/lite-ui - Versions diffs - 0.1.1 → 0.2.0 - Mend

@marcoschwartz/lite-ui 0.1.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md CHANGED Viewed

@@ -1,208 +1,312 @@
 # Lite UI
-A lightweight UI component library built with Tailwind CSS and React.
+A lightweight, modern UI component library built with React, TypeScript, and Tailwind CSS v4.
-## Features
+## ✨ Features
-- Built with TypeScript
-- Styled with Tailwind CSS
-- Tree-shakeable ESM and CJS builds
-- Live development with hot module reloading
-- Server Component compatible (works in Next.js App Router and other RSC frameworks)
-- Components are framework-agnostic React components
-- Built-in theming system with multiple pre-built themes
+- 🎨 **21 Production-Ready Components** - From basic inputs to complex data tables
+- 🌙 **Dark Mode Support** - Built-in dark mode with system preference detection
+- 🎭 **Theming System** - Multiple themes with easy customization
+- 📦 **Tree-Shakeable** - Only bundle what you use (ESM & CJS)
+- ⚡ **TypeScript First** - Full type safety and IntelliSense support
+- 🚀 **Server Component Compatible** - Works with Next.js App Router and RSC
+- 🎯 **Zero Runtime CSS** - Styles compiled with Tailwind CSS v4
+- ♿ **Accessible** - ARIA-compliant components
-## Development
-### Quick Start
-Run the library build watcher and demo app simultaneously:
+## 📦 Installation
 ```bash
-npm run dev:all
+npm install @marcoschwartz/lite-ui
 ```
-This single command will:
-1. Start the UI library build in watch mode (auto-rebuilds on changes)
-2. Start the Next.js demo app on http://localhost:3000
-3. Automatically reflect changes from the library in the demo app
-### Individual Commands
+### Setup
-Build the library once:
-```bash
-npm run build
-```
-Build the library in watch mode:
-```bash
-npm run dev
-```
+1. **Import the CSS** in your app's entry point:
-Run the demo app only:
-```bash
-cd demo && npm run dev
+```tsx
+// app/layout.tsx (Next.js) or main.tsx (Vite)
+import '@marcoschwartz/lite-ui/styles.css';
 ```
-## Components
-### Button
+2. **Wrap your app with ThemeProvider** (recommended):
-A versatile button component with multiple variants and sizes.
-#### Variants
-- `primary` (default) - Blue button
-- `secondary` - Gray button
-- `success` - Green button
-- `danger` - Red button
-- `warning` - Yellow button
-- `info` - Cyan button
+```tsx
+import { ThemeProvider } from '@marcoschwartz/lite-ui';
-#### Sizes
-- `sm` - Small
-- `md` (default) - Medium
-- `lg` - Large
-- `xl` - Extra Large
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <ThemeProvider defaultTheme="default" defaultColorMode="system">
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
+```
-#### Usage
+3. **Start using components:**
-**In Server Components (Next.js App Router):**
 ```tsx
-// app/page.tsx (Server Component)
-import { Button } from 'lite-ui';
+import { Button, Card, TextInput } from '@marcoschwartz/lite-ui';
 export default function Page() {
   return (
-    <div>
-      <Button variant="primary" size="md">
-        Static Button (Server Rendered)
-      </Button>
-    </div>
+    <Card>
+      <h1>Welcome to Lite UI</h1>
+      <TextInput placeholder="Enter your name" />
+      <Button variant="primary">Submit</Button>
+    </Card>
   );
 }
 ```
-**In Client Components (with interactivity):**
+## 🎨 Components
+### Form Controls
+- **Button** - Versatile button with 6 variants and 4 sizes
+- **TextInput** - Text input with validation and error states
+- **Select** - Dropdown select with custom styling
+- **Checkbox** - Checkbox with label and error support
+- **Toggle** - Switch/toggle component with multiple sizes
+- **DatePicker** - Date selection input
+- **TimePicker** - Time selection input
+- **DateTimePicker** - Combined date and time picker
+### Layout & Navigation
+- **Navbar** - Responsive navigation bar
+- **Sidebar** - Collapsible sidebar with mobile support
+- **Drawer** - Slide-out drawer panel
+- **Modal** - Accessible modal dialog
+- **Tabs** - Tabbed navigation component
+### Feedback & Overlays
+- **Alert** - Alert messages with 4 variants
+- **Spinner** - Loading spinner with 3 sizes
+- **Badge** - Status badges with 6 variants
+### Data Display
+- **Card** - Content container with optional header/footer
+- **Table** - Data table with sorting and selection
+- **Pagination** - Page navigation component
+### Utilities
+- **ActionMenu** - Dropdown action menu
+- **Icons** - Set of common UI icons
+[**📖 View Full Component Documentation**](./COMPONENTS.md)
+## 🌙 Dark Mode
+Lite UI includes built-in dark mode support with three color modes:
 ```tsx
-// app/components/InteractiveButton.tsx
-"use client";
+import { useTheme } from '@marcoschwartz/lite-ui';
-import { Button } from 'lite-ui';
+function ThemeToggle() {
+  const { colorMode, setColorMode } = useTheme();
-export function InteractiveButton() {
   return (
-    <Button variant="success" onClick={() => alert('Clicked!')}>
-      Click Me
-    </Button>
+    <select value={colorMode} onChange={(e) => setColorMode(e.target.value)}>
+      <option value="system">System</option>
+      <option value="light">Light</option>
+      <option value="dark">Dark</option>
+    </select>
   );
 }
 ```
-**In any React app:**
+## 🎭 Theming
+Switch between built-in themes or create your own:
 ```tsx
-import { Button } from 'lite-ui';
+import { useTheme } from '@marcoschwartz/lite-ui';
+function ThemeSwitcher() {
+  const { themeName, setTheme } = useTheme();
-function App() {
   return (
     <div>
-      <Button variant="primary" size="md">
-        Click Me
-      </Button>
-      <Button variant="success" size="lg" onClick={() => alert('Success!')}>
-        Submit
-      </Button>
-      <Button variant="danger" disabled>
-        Disabled
-      </Button>
+      <button onClick={() => setTheme('default')}>Default Theme</button>
+      <button onClick={() => setTheme('minimalistic')}>Minimalistic Theme</button>
     </div>
   );
 }
 ```
-## Structure
+### Available Themes
-```
-lite-ui-js/
-├── src/              # UI library source code
-│   ├── components/   # React components
-│   └── index.ts      # Main export file
-├── demo/             # Next.js demo application
-├── dist/             # Built library (generated)
-└── dev.sh            # Development script
-```
+- **Default** - Vibrant colors, shadows, and smooth animations
+- **Minimalistic** - Flat design, subtle colors, minimal effects
-## Theming
+## 🚀 Usage Examples
-Lite UI includes a built-in theming system that allows you to easily switch between different visual styles.
+### Basic Form
-### Available Themes
+```tsx
+"use client";
-1. **Default** - Vibrant colors, shadows, and smooth animations
-2. **Minimalistic** - Flat design, subtle colors, minimal effects
+import { useState } from 'react';
+import { Card, TextInput, Button, Alert } from '@marcoschwartz/lite-ui';
+export function ContactForm() {
+  const [email, setEmail] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+  return (
+    <Card>
+      <h2>Contact Us</h2>
+      {submitted && (
+        <Alert variant="success">Message sent successfully!</Alert>
+      )}
+      <TextInput
+        label="Email"
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="your@email.com"
+      />
+      <Button
+        variant="primary"
+        onClick={() => setSubmitted(true)}
+      >
+        Send Message
+      </Button>
+    </Card>
+  );
+}
+```
-### Usage
+### Data Table
-**Wrap your app with ThemeProvider:**
 ```tsx
-import { ThemeProvider } from 'lite-ui';
+import { Table } from '@marcoschwartz/lite-ui';
+const columns = [
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+  { key: 'status', label: 'Status' },
+];
-function App() {
+const data = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' },
+];
+export function UserTable() {
   return (
-    <ThemeProvider defaultTheme="default">
-      {/* your app */}
-    </ThemeProvider>
+    <Table
+      columns={columns}
+      data={data}
+      sortable
+      selectable
+    />
   );
 }
 ```
-**Switch themes dynamically:**
+### Modal Dialog
 ```tsx
 "use client";
-import { useTheme, Button } from 'lite-ui';
+import { useState } from 'react';
+import { Modal, Button } from '@marcoschwartz/lite-ui';
-function ThemeSwitcher() {
-  const { themeName, setTheme } = useTheme();
+export function ConfirmDialog() {
+  const [isOpen, setIsOpen] = useState(false);
   return (
-    <div>
-      <p>Current theme: {themeName}</p>
-      <Button onClick={() => setTheme('default')}>Default Theme</Button>
-      <Button onClick={() => setTheme('minimalistic')}>Minimalistic Theme</Button>
-    </div>
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
+      <Modal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Confirm Action"
+      >
+        <p>Are you sure you want to proceed?</p>
+        <div className="flex gap-2 mt-4">
+          <Button variant="danger" onClick={() => setIsOpen(false)}>
+            Confirm
+          </Button>
+          <Button variant="secondary" onClick={() => setIsOpen(false)}>
+            Cancel
+          </Button>
+        </div>
+      </Modal>
+    </>
   );
 }
 ```
-**Components work without ThemeProvider:**
-If you don't wrap your app in a ThemeProvider, components will automatically use the default theme.
+## 🛠️ Development
-### Creating Custom Themes
+### Running the Demo
-You can create custom themes by extending the theme configuration:
+```bash
+# Clone the repository
+git clone https://github.com/marcoschwartz/lite-ui.git
+cd lite-ui-js
-```tsx
-import { themes, ThemeProvider } from 'lite-ui';
-const customTheme = {
-  ...themes.default,
-  name: 'custom',
-  button: {
-    ...themes.default.button,
-    variants: {
-      ...themes.default.button.variants,
-      primary: 'bg-purple-600 hover:bg-purple-700 text-white',
-    },
-  },
-};
+# Install dependencies
+npm install
+# Run library + demo app in watch mode
+npm run dev:all
 ```
-## Technology Stack
+This will:
+1. Start the library build in watch mode (auto-rebuilds on changes)
+2. Start the Next.js demo app on http://localhost:3000
+3. Hot-reload changes from the library in the demo app
+### Building
+```bash
+# Build library
+npm run build
+# Build CSS only
+npm run build:css
+```
+## 📂 Project Structure
+```
+lite-ui-js/
+├── src/                    # Library source code
+│   ├── components/         # React components
+│   ├── theme/             # Theme system
+│   ├── icons/             # Icon components
+│   └── index.ts           # Main exports
+├── demo/                  # Demo Next.js app
+│   └── app/
+│       ├── components/    # Component examples
+│       └── page.tsx       # Home page
+├── dist/                  # Built library (generated)
+└── package.json
+```
+## 🤝 Contributing
+Contributions are welcome! Please feel free to submit a Pull Request.
+## 📄 License
+MIT © Marco Schwartz
+## 🔗 Links
+- [NPM Package](https://www.npmjs.com/package/@marcoschwartz/lite-ui)
+- [GitHub Repository](https://github.com/marcoschwartz/lite-ui)
+- [Component Documentation](./COMPONENTS.md)
+## 💡 Technology Stack
 - **React 19** - UI framework
-- **TypeScript** - Type safety
-- **Tailwind CSS v4** - Styling
-- **tsup** - Build tool
+- **TypeScript 5** - Type safety
+- **Tailwind CSS v4** - Utility-first styling
+- **tsup** - TypeScript bundler
 - **Next.js 15** - Demo app framework