npm - @marcoschwartz/lite-ui - Versions diffs - 0.1.0 → 0.3.1 - Mend

@marcoschwartz/lite-ui 0.1.0 → 0.3.1

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

package/dist/index.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -23,6 +23,186 @@ interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'size'
 }
 declare const Select: React.FC<SelectProps>;
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    showCloseButton?: boolean;
+}
+declare const Modal: React.FC<ModalProps>;
+interface NavbarProps {
+    logo?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    sticky?: boolean;
+}
+declare const Navbar: React.FC<NavbarProps>;
+interface SidebarProps {
+    children: React.ReactNode;
+    className?: string;
+    width?: 'sm' | 'md' | 'lg';
+    position?: 'left' | 'right';
+}
+declare const Sidebar: React.FC<SidebarProps>;
+interface SidebarContextValue {
+    isOpen: boolean;
+    isMobile: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    setIsMobile: (isMobile: boolean) => void;
+}
+interface SidebarProviderProps {
+    children: ReactNode;
+    defaultOpen?: boolean;
+}
+declare const SidebarProvider: React.FC<SidebarProviderProps>;
+declare const useSidebar: () => SidebarContextValue;
+interface DrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    position?: 'left' | 'right' | 'top' | 'bottom';
+    size?: 'sm' | 'md' | 'lg';
+    showCloseButton?: boolean;
+}
+declare const Drawer: React.FC<DrawerProps>;
+interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+}
+declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
+interface ActionMenuItem {
+    label: string;
+    onClick: () => void;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    variant?: 'default' | 'danger';
+}
+interface ActionMenuProps {
+    items: ActionMenuItem[];
+    trigger?: React.ReactNode;
+    position?: 'left' | 'right';
+}
+declare const ActionMenu: React.FC<ActionMenuProps>;
+interface CardProps {
+    children: React.ReactNode;
+    className?: string;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    hover?: boolean;
+}
+declare const Card: React.FC<CardProps>;
+interface AlertProps {
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    title?: string;
+    children: React.ReactNode;
+    onClose?: () => void;
+    className?: string;
+}
+declare const Alert: React.FC<AlertProps>;
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: string;
+    error?: string;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    label?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+interface BadgeProps {
+    children: React.ReactNode;
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+declare const Badge: React.FC<BadgeProps>;
+interface SpinnerProps {
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    color?: 'primary' | 'secondary' | 'white';
+    className?: string;
+}
+declare const Spinner: React.FC<SpinnerProps>;
+interface Tab {
+    label: string;
+    content: React.ReactNode;
+    disabled?: boolean;
+}
+interface TabsProps {
+    tabs: Tab[];
+    defaultIndex?: number;
+    onChange?: (index: number) => void;
+    className?: string;
+}
+declare const Tabs: React.FC<TabsProps>;
+interface Column<T = any> {
+    key: string;
+    title: string;
+    render?: (value: any, row: T, index: number) => React.ReactNode;
+    width?: string;
+}
+interface TableProps<T = any> {
+    columns: Column<T>[];
+    data: T[];
+    keyField?: string;
+    striped?: boolean;
+    hoverable?: boolean;
+    className?: string;
+}
+declare function Table<T extends Record<string, any>>({ columns, data, keyField, striped, hoverable, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    siblingCount?: number;
+    className?: string;
+}
+declare const Pagination: React.FC<PaginationProps>;
+interface DatePickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+}
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
+interface TimePickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+}
+declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLInputElement>>;
+interface DateTimePickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+}
+declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<HTMLInputElement>>;
 type ThemeName = 'default' | 'minimalistic';
 interface ButtonTheme {
     primary: string;
@@ -84,4 +264,34 @@ declare function ThemeProvider({ children, defaultTheme, defaultColorMode }: The
 declare const themeScript = "\n(function() {\n  try {\n    // Get stored preferences\n    const storedTheme = localStorage.getItem('lite-ui-theme') || 'default';\n    const storedColorMode = localStorage.getItem('lite-ui-color-mode');\n\n    // Determine color mode (system, light, or dark)\n    let colorMode = storedColorMode;\n    if (!colorMode || colorMode === 'system') {\n      colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n\n    // Set attributes before render\n    document.documentElement.setAttribute('data-theme', storedTheme);\n    document.documentElement.setAttribute('data-color-mode', colorMode);\n\n    // Add dark class for Tailwind\n    if (colorMode === 'dark') {\n      document.documentElement.classList.add('dark');\n    } else {\n      document.documentElement.classList.remove('dark');\n    }\n  } catch (e) {\n    console.error('Failed to initialize theme:', e);\n  }\n})();\n";
 declare function getThemeScript(): string;
-export { Button, type ButtonProps, type ButtonTheme, type ColorMode, Select, type SelectOption, type SelectProps, type SelectTheme, type Theme, type ThemeName, ThemeProvider, getThemeScript, themeScript, themes, useTheme };
+interface IconProps {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    color?: string;
+}
+interface IconComponent extends React.FC<IconProps> {
+    displayName?: string;
+}
+declare const HomeIcon: IconComponent;
+declare const UserIcon: IconComponent;
+declare const SearchIcon: IconComponent;
+declare const BellIcon: IconComponent;
+declare const SettingsIcon: IconComponent;
+declare const MenuIcon: IconComponent;
+declare const CloseIcon: IconComponent;
+declare const ChevronDownIcon: IconComponent;
+declare const ChevronRightIcon: IconComponent;
+declare const CheckIcon: IconComponent;
+declare const PlusIcon: IconComponent;
+declare const TrashIcon: IconComponent;
+declare const EditIcon: IconComponent;
+declare const MailIcon: IconComponent;
+declare const StarIcon: IconComponent;
+declare const HeartIcon: IconComponent;
+declare const DownloadIcon: IconComponent;
+declare const UploadIcon: IconComponent;
+declare const CameraIcon: IconComponent;
+declare const LockIcon: IconComponent;
+declare const CalendarIcon: IconComponent;
+export { ActionMenu, type ActionMenuItem, type ActionMenuProps, Alert, type AlertProps, Badge, type BadgeProps, BellIcon, Button, type ButtonProps, type ButtonTheme, CalendarIcon, CameraIcon, Card, type CardProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronRightIcon, CloseIcon, type ColorMode, type Column, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, DownloadIcon, Drawer, type DrawerProps, EditIcon, HeartIcon, HomeIcon, type IconComponent, type IconProps, LockIcon, MailIcon, MenuIcon, Modal, type ModalProps, Navbar, type NavbarProps, Pagination, type PaginationProps, PlusIcon, SearchIcon, Select, type SelectOption, type SelectProps, type SelectTheme, SettingsIcon, Sidebar, type SidebarContextValue, type SidebarProps, SidebarProvider, type SidebarProviderProps, Spinner, type SpinnerProps, StarIcon, type Tab, Table, type TableProps, Tabs, type TabsProps, TextInput, type TextInputProps, type Theme, type ThemeName, ThemeProvider, TimePicker, type TimePickerProps, Toggle, type ToggleProps, TrashIcon, UploadIcon, UserIcon, getThemeScript, themeScript, themes, useSidebar, useTheme };