@dreamtree-org/twreact-ui 1.0.94 → 1.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamtree-org/twreact-ui",
-  "version": "1.0.94",
+  "version": "1.0.95",
   "description": "A comprehensive React + Tailwind components library for building modern web apps",
   "author": {
     "name": "Partha Preetham Krishna",

package/dist/README.md

@@ -1,237 +0,0 @@
-# Dreamtree UI
-
-A comprehensive React + Tailwind CSS components library for building modern web applications. Built with accessibility, customization, and developer experience in mind.
-
-## Features
-
-- 🎨 **Modern Design**: Clean, professional components with Tailwind CSS
-- 🌙 **Dark Mode**: Built-in dark/light mode support
-- ♿ **Accessible**: ARIA compliant with keyboard navigation
-- 📱 **Responsive**: Mobile-first design approach
-- 🎯 **TypeScript Ready**: Full TypeScript support
-- 🧩 **Composable**: Flexible APIs with props, slots, and render functions
-- 🎨 **Customizable**: Easy theming with Tailwind config
-- 📦 **Tree Shakeable**: Import only what you need
-
-## Installation
-
-```bash
-npm install dreamtree-ui
-# or
-yarn add dreamtree-ui
-```
-
-## Quick Start
-
-```jsx
-import { Button, Input, Card } from 'dreamtree-ui';
-
-function App() {
-  return (
-    <div className="p-4">
-      <Card>
-        <Card.Header>
-          <Card.Title>Welcome to Dreamtree UI</Card.Title>
-        </Card.Header>
-        <Card.Content>
-          <Input placeholder="Enter your name" />
-          <Button className="mt-4">Get Started</Button>
-        </Card.Content>
-      </Card>
-    </div>
-  );
-}
-```
-
-## Components
-
-### Core Components
-
-- **Input** - Text inputs with validation states, icons, and clear functionality
-- **Button** - Various button styles and states
-- **Select** - Dropdown select with search, multi-select, and grouping
-- **DatePicker** - Calendar-based date selection
-- **Table** - Data tables with sorting, filtering, and pagination
-- **Form** - Declarative form builder with validation
-
-### Navigation
-
-- **Sidebar** - Collapsible sidebar navigation
-- **Navbar** - Top navigation bar with user menu
-- **FootNav** - Mobile bottom navigation
-- **Breadcrumbs** - Page hierarchy navigation
-
-### Feedback & Overlay
-
-- **Dialog** - Modal dialogs with customizable sizes
-- **Toast** - Notification messages with different types
-- **Tooltip** - Contextual help text
-- **Alert** - Status messages and notifications
-- **Loader** - Loading states and skeletons
-
-### Utility Components
-
-- **Tabs** - Tabbed content organization
-- **Accordion** - Collapsible content sections
-- **Badge** - Status indicators and labels
-- **Avatar** - User profile images with fallbacks
-- **Card** - Content containers with header/body/footer
-- **Pagination** - Page navigation controls
-- **Stepper** - Step-by-step process indicators
-- **FileUpload** - Drag & drop file upload with preview
-
-## Theming
-
-Dreamtree UI supports custom theming through Tailwind CSS configuration:
-
-```js
-// tailwind.config.js
-module.exports = {
-  theme: {
-    extend: {
-      colors: {
-        primary: {
-          50: '#eff6ff',
-          500: '#3b82f6',
-          600: '#2563eb',
-          // ... your custom colors
-        }
-      }
-    }
-  }
-}
-```
-
-## Dark Mode
-
-Enable dark mode with the built-in theme provider:
-
-```jsx
-import { ThemeProvider } from 'dreamtree-ui';
-
-function App() {
-  return (
-    <ThemeProvider defaultTheme="dark">
-      {/* Your app content */}
-    </ThemeProvider>
-  );
-}
-```
-
-## Examples
-
-### Form with Validation
-
-```jsx
-import { Form } from 'dreamtree-ui';
-
-const formFields = [
-  {
-    type: 'text',
-    name: 'firstName',
-    label: 'First Name',
-    required: true,
-    placeholder: 'Enter your first name'
-  },
-  {
-    type: 'email',
-    name: 'email',
-    label: 'Email',
-    required: true,
-    placeholder: 'Enter your email'
-  },
-  {
-    type: 'select',
-    name: 'country',
-    label: 'Country',
-    options: [
-      { value: 'us', label: 'United States' },
-      { value: 'ca', label: 'Canada' }
-    ]
-  }
-];
-
-function ContactForm() {
-  const handleSubmit = (data) => {
-    console.log('Form data:', data);
-  };
-
-  return (
-    <Form
-      fields={formFields}
-      onSubmit={handleSubmit}
-      submitText="Send Message"
-    />
-  );
-}
-```
-
-### Data Table
-
-```jsx
-import { Table } from 'dreamtree-ui';
-
-const columns = [
-  { key: 'name', label: 'Name', sortable: true },
-  { key: 'email', label: 'Email', sortable: true },
-  { key: 'role', label: 'Role' }
-];
-
-const data = [
-  { name: 'John Doe', email: 'john@example.com', role: 'Admin' },
-  { name: 'Jane Smith', email: 'jane@example.com', role: 'User' }
-];
-
-function UserTable() {
-  return (
-    <Table
-      columns={columns}
-      data={data}
-      sortable
-      filterable
-      pagination
-      pageSize={10}
-    />
-  );
-}
-```
-
-### Toast Notifications
-
-```jsx
-import { useToast, ToastContainer } from 'dreamtree-ui';
-
-function App() {
-  const { toast, toasts, removeToast } = useToast();
-
-  const showSuccess = () => {
-    toast.success('Success!', 'Your changes have been saved.');
-  };
-
-  const showError = () => {
-    toast.error('Error!', 'Something went wrong.');
-  };
-
-  return (
-    <div>
-      <button onClick={showSuccess}>Show Success</button>
-      <button onClick={showError}>Show Error</button>
-      <ToastContainer toasts={toasts} onRemove={removeToast} />
-    </div>
-  );
-}
-```
-
-## Contributing
-
-We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
-
-## License
-
-MIT License - see [LICENSE](LICENSE) for details.
-
-## Support
-
-- 📖 [Documentation](https://dreamtree-ui.dev)
-- 🐛 [Issue Tracker](https://github.com/dreamtree-ui/dreamtree-ui/issues)
-- 💬 [Discussions](https://github.com/dreamtree-ui/dreamtree-ui/discussions)