@dreamtree-org/twreact-ui 1.0.57

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Partha Preetham
+
+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

@@ -0,0 +1,620 @@
+# 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/twreact-ui
+# or
+yarn add @dreamtree/twreact-ui
+```
+
+## Quick Start
+
+```jsx
+import { Button, Input, Card } from '@dreamtree/twreact-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
+
+#### Button
+Versatile button component with multiple variants and states.
+
+**Props:**
+- `variant`: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'success' | 'warning' (default: 'primary')
+- `size`: 'sm' | 'md' | 'lg' (default: 'md')
+- `disabled`: boolean
+- `loading`: boolean
+- `leftIcon`: ReactNode
+- `rightIcon`: ReactNode
+- `fullWidth`: boolean
+- `className`: string
+
+```jsx
+<Button variant="primary" size="lg" loading>
+  Loading...
+</Button>
+```
+
+#### Input
+Enhanced text input with validation states, icons, and clear functionality.
+
+**Props:**
+- `type`: 'text' | 'password' | 'email' | 'search' | 'number' | 'tel' | 'url'
+- `variant`: 'default' | 'filled' | 'outlined'
+- `size`: 'sm' | 'md' | 'lg' (default: 'md')
+- `label`: string
+- `placeholder`: string
+- `error`: string
+- `success`: string
+- `disabled`: boolean
+- `required`: boolean
+- `clearable`: boolean
+- `icon`: ReactNode
+- `iconPosition`: 'left' | 'right' (default: 'left')
+- `showCount`: boolean
+- `maxLength`: number
+- `readOnly`: boolean
+- `onClear`: () => void
+
+```jsx
+<Input
+  type="email"
+  label="Email Address"
+  placeholder="Enter your email"
+  error="Please enter a valid email"
+  clearable
+  required
+/>
+```
+
+#### Select
+Advanced select component with search, multi-select, and grouping support.
+
+**Props:**
+- `options`: Array<{value: any, label: string, disabled?: boolean}>
+- `value`: any | Array<any>
+- `onChange`: (value: any) => void
+- `placeholder`: string (default: 'Select an option...')
+- `label`: string
+- `error`: string
+- `disabled`: boolean
+- `required`: boolean
+- `multiSelect`: boolean
+- `searchable`: boolean
+- `grouped`: boolean
+- `creatable`: boolean
+- `onCreateOption`: (value: string) => void
+- `onSearch`: (term: string) => void
+- `loading`: boolean
+- `selectAllOption`: boolean
+- `closeOnSelect`: boolean
+- `maxTagCount`: number (default: 3)
+- `allowClear`: boolean
+
+```jsx
+<Select
+  options={[
+    { value: 'us', label: 'United States' },
+    { value: 'ca', label: 'Canada' }
+  ]}
+  multiSelect
+  searchable
+  placeholder="Choose countries"
+/>
+```
+
+#### Form
+Declarative form builder with validation support.
+
+**Props:**
+- `fields`: Array<FormField>
+- `onSubmit`: (data: any) => void
+- `defaultValues`: object
+- `validationSchema`: any
+- `submitText`: string (default: 'Submit')
+- `resetText`: string (default: 'Reset')
+- `showReset`: boolean (default: true)
+
+```jsx
+const formFields = [
+  {
+    type: 'text',
+    name: 'firstName',
+    label: 'First Name',
+    required: true,
+    placeholder: 'Enter your first name'
+  },
+  {
+    type: 'email',
+    name: 'email',
+    label: 'Email',
+    required: true
+  }
+];
+
+<Form
+  fields={formFields}
+  onSubmit={(data) => console.log(data)}
+  submitText="Create Account"
+/>
+```
+
+#### Table
+Feature-rich data table with sorting, filtering, and pagination.
+
+**Props:**
+- `data`: Array<object>
+- `columns`: Array<Column>
+- `sortable`: boolean (default: true)
+- `filterable`: boolean
+- `selectable`: boolean
+- `pagination`: boolean
+- `pageSize`: number (default: 10)
+- `onSort`: (key: string, direction: 'asc' | 'desc') => void
+- `onFilter`: (filters: object) => void
+- `onSelectionChange`: (selectedRows: Set<any>) => void
+- `onRowClick`: (row: object) => void
+- `hasDetails`: boolean
+- `DetailsComponent`: ReactComponent
+- `withAction`: boolean
+- `onAction`: (action: string, row: object) => void
+- `actions`: Array<Action>
+- `showSerial`: boolean (default: true)
+
+```jsx
+const columns = [
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+  { key: 'role', label: 'Role' }
+];
+
+<Table
+  columns={columns}
+  data={users}
+  sortable
+  filterable
+  pagination
+  pageSize={10}
+/>
+```
+
+#### DatePicker
+Calendar-based date selection with keyboard navigation.
+
+**Props:**
+- `value`: Date | string
+- `onChange`: (date: Date | null) => void
+- `placeholder`: string (default: 'Select date...')
+- `label`: string
+- `error`: string
+- `disabled`: boolean
+- `required`: boolean
+- `minDate`: Date | string
+- `maxDate`: Date | string
+- `weekStartsOn`: 0 | 1 (default: 0)
+- `portal`: boolean
+- `displayFormat`: string (default: 'MMM dd, yyyy')
+- `locale`: Locale
+- `showClear`: boolean (default: true)
+- `closeOnSelect`: boolean (default: true)
+
+```jsx
+<DatePicker
+  label="Birth Date"
+  minDate={new Date('1900-01-01')}
+  maxDate={new Date()}
+  placeholder="Select your birth date"
+/>
+```
+
+### Navigation Components
+
+#### Sidebar
+Collapsible sidebar navigation with nested items.
+
+**Props:**
+- `items`: Array<SidebarItem>
+- `collapsed`: boolean (default: false)
+- `onToggle`: () => void
+- `logo`: ReactNode
+- `user`: {name: string, email: string, avatar?: string, menuItems?: Array<MenuItem>}
+- `onUserClick`: (user: object) => void
+
+```jsx
+const sidebarItems = [
+  {
+    id: 'dashboard',
+    label: 'Dashboard',
+    icon: <Home className="h-4 w-4" />,
+    active: true
+  },
+  {
+    id: 'users',
+    label: 'Users',
+    icon: <Users className="h-4 w-4" />,
+    children: [
+      { id: 'all-users', label: 'All Users' },
+      { id: 'new-user', label: 'Add New User' }
+    ]
+  }
+];
+
+<Sidebar
+  items={sidebarItems}
+  logo={<div className="text-xl font-bold">Dreamtree</div>}
+  user={{ name: 'John Doe', email: 'john@example.com' }}
+/>
+```
+
+#### Navbar
+Top navigation bar with user menu and notifications.
+
+**Props:**
+- `logo`: ReactNode
+- `items`: Array<NavItem>
+- `user`: {name: string, email: string, avatar?: string, menuItems?: Array<MenuItem>}
+- `notifications`: Array<Notification>
+- `searchable`: boolean
+- `onSearch`: (term: string) => void
+- `onNotificationClick`: (notifications: Array<Notification>) => void
+- `onUserClick`: (user: object) => void
+- `leftIcon`: ReactNode | false
+- `onLeftIconClick`: () => void
+
+```jsx
+<Navbar
+  logo={<div className="text-xl font-bold">Dreamtree</div>}
+  items={navItems}
+  user={user}
+  notifications={notifications}
+  searchable
+  onSearch={(term) => console.log(term)}
+/>
+```
+
+### Feedback Components
+
+#### Alert
+Status messages and notifications with different variants.
+
+**Props:**
+- `variant`: 'success' | 'error' | 'warning' | 'info' (default: 'info')
+- `title`: string
+- `children`: ReactNode
+- `dismissible`: boolean
+- `onDismiss`: () => void
+
+```jsx
+<Alert variant="success" title="Success!" dismissible>
+  Your changes have been saved successfully.
+</Alert>
+```
+
+#### Toast
+Notification messages with different types and positions.
+
+**Props:**
+- `id`: string
+- `title`: string
+- `message`: string
+- `type`: 'success' | 'error' | 'warning' | 'info' (default: 'info')
+- `duration`: number (default: 5000)
+- `onClose`: (id: string) => void
+- `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'
+
+```jsx
+import { useToast, ToastContainer } from 'dreamtree-ui';
+
+function App() {
+  const { toast, toasts, removeToast } = useToast();
+
+  const showSuccess = () => {
+    toast.success('Success!', 'Your changes have been saved.');
+  };
+
+  return (
+    <div>
+      <button onClick={showSuccess}>Show Success</button>
+      <ToastContainer toasts={toasts} onRemove={removeToast} />
+    </div>
+  );
+}
+```
+
+### Utility Components
+
+#### Card
+Content containers with header, body, and footer sections.
+
+**Props:**
+- `children`: ReactNode
+- `hover`: boolean
+- `className`: string
+
+```jsx
+<Card hover>
+  <Card.Header>
+    <Card.Title>Card Title</Card.Title>
+    <Card.Description>Card description</Card.Description>
+  </Card.Header>
+  <Card.Content>
+    Card content goes here
+  </Card.Content>
+  <Card.Footer>
+    <Button>Action</Button>
+  </Card.Footer>
+</Card>
+```
+
+#### Avatar
+User profile images with fallbacks and status indicators.
+
+**Props:**
+- `src`: string
+- `alt`: string
+- `name`: string
+- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' (default: 'md')
+- `shape`: 'circle' | 'square' | 'rounded' (default: 'circle')
+- `status`: 'online' | 'offline' | 'away' | 'busy'
+
+```jsx
+<Avatar
+  src="https://example.com/avatar.jpg"
+  name="John Doe"
+  size="lg"
+  status="online"
+/>
+```
+
+#### Badge
+Status indicators and labels with different variants.
+
+**Props:**
+- `children`: ReactNode
+- `variant`: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'outline' (default: 'default')
+- `size`: 'sm' | 'md' | 'lg' (default: 'md')
+- `rounded`: boolean (default: true)
+
+```jsx
+<Badge variant="success" size="sm">
+  Active
+</Badge>
+```
+
+#### Tabs
+Tabbed content organization with different styles.
+
+**Props:**
+- `items`: Array<{id: string, label: string, content: ReactNode, icon?: ReactNode, badge?: string}>
+- `defaultActiveTab`: string
+- `orientation`: 'horizontal' | 'vertical' (default: 'horizontal')
+- `variant`: 'default' | 'pills' | 'underline' (default: 'default')
+- `onTabChange`: (tabId: string) => void
+
+```jsx
+const tabItems = [
+  {
+    id: 'overview',
+    label: 'Overview',
+    content: <div>Overview content</div>
+  },
+  {
+    id: 'settings',
+    label: 'Settings',
+    content: <div>Settings content</div>
+  }
+];
+
+<Tabs items={tabItems} variant="pills" />
+```
+
+## Theming
+
+Dreamtree UI supports custom theming through Tailwind CSS configuration:
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+        },
+        success: {
+          50: '#f0fdf4',
+          100: '#dcfce7',
+          500: '#22c55e',
+          600: '#16a34a',
+        },
+        error: {
+          50: '#fef2f2',
+          100: '#fee2e2',
+          500: '#ef4444',
+          600: '#dc2626',
+        },
+        warning: {
+          50: '#fffbeb',
+          100: '#fef3c7',
+          500: '#f59e0b',
+          600: '#d97706',
+        }
+      }
+    }
+  }
+}
+```
+
+## 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
+
+### Complete Form Example
+
+```jsx
+import { Form, Button, Card } 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 (
+    <Card>
+      <Card.Header>
+        <Card.Title>Contact Information</Card.Title>
+        <Card.Description>Please fill out the form below</Card.Description>
+      </Card.Header>
+      <Card.Content>
+    <Form
+      fields={formFields}
+      onSubmit={handleSubmit}
+      submitText="Send Message"
+    />
+      </Card.Content>
+    </Card>
+  );
+}
+```
+
+### Data Table with Actions
+
+```jsx
+import { Table, Button, Badge } from 'dreamtree-ui';
+
+const columns = [
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+  { key: 'status', label: 'Status' }
+];
+
+const data = [
+  { 
+    id: 1, 
+    name: 'John Doe', 
+    email: 'john@example.com', 
+    status: 'Active' 
+  },
+  { 
+    id: 2, 
+    name: 'Jane Smith', 
+    email: 'jane@example.com', 
+    status: 'Inactive' 
+  }
+];
+
+const actions = [
+  {
+    label: 'Edit',
+    onClick: (row) => console.log('Edit', row)
+  },
+  {
+    label: 'Delete',
+    onClick: (row) => console.log('Delete', row),
+    variant: 'destructive'
+  }
+];
+
+function UserTable() {
+  return (
+    <Table
+      columns={columns}
+      data={data}
+      sortable
+      filterable
+      pagination
+      pageSize={10}
+      actions={actions}
+    />
+  );
+}
+```
+
+## 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)

package/dist/README.md

@@ -0,0 +1,237 @@
+# 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)

package/dist/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@preethamkrishna/twreact-ui",
+  "version": "1.0.10",
+  "description": "A comprehensive React + Tailwind components library for building modern web apps",
+  "author": {
+    "name": "Partha Preetham Krishna",
+    "email": "partha.preetham.krishna@gmail.com",
+    "url": "https://www.linkedin.com/in/partha-preetham-krishna-68ba00197/"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "node scripts/version-bump.js && NODE_ENV=production rollup -c && cp package.json dist/ && cp README.md dist/",
+    "dev": "rollup -c -w",
+    "test": "jest",
+    "lint": "eslint src --ext .js,.jsx",
+    "lint:fix": "eslint src --ext .js,.jsx --fix",
+    "preview": "npm run build && npx serve dist -p 3000",
+    "demo": "npx serve demo -p 3000",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "version:patch": "npm version patch && git push && git push --tags",
+    "version:minor": "npm version minor && git push && git push --tags",
+    "version:major": "npm version major && git push && git push --tags",
+    "version:prerelease": "npm version prerelease && git push && git push --tags",
+    "version:prepatch": "npm version prepatch && git push && git push --tags",
+    "version:preminor": "npm version preminor && git push && git push --tags",
+    "version:premajor": "npm version premajor && git push && git push --tags",
+    "release": "npm run build && npm run test && npm run lint",
+    "release:patch": "npm run release && npm run version:patch",
+    "release:minor": "npm run release && npm run version:minor",
+    "release:major": "npm run release && npm run version:major",
+    "release:prerelease": "npm run release && npm run version:prerelease",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
+    "changelog:all": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "prepare": "husky"
+  },
+  "keywords": [
+    "react",
+    "tailwind",
+    "ui",
+    "components",
+    "javascript",
+    "design-system"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/preethamkrishnadev/dreamtree-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/preethamkrishnadev/dreamtree-ui/issues"
+  },
+  "homepage": "https://github.com/preethamkrishnadev/dreamtree-ui#readme",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.1.1",
+    "clsx": "^1.2.1",
+    "date-fns": "^2.30.0",
+    "lucide-react": "^0.263.1",
+    "react-hook-form": "^7.45.4",
+    "tailwind-merge": "^1.14.0",
+    "zod": "^3.21.4"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/runtime": "^7.28.4",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.5.1",
+    "autoprefixer": "^10.4.16",
+    "babel-preset-react-app": "^10.0.1",
+    "conventional-changelog-cli": "^5.0.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^9.1.7",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.4.31",
+    "rollup": "^4.6.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "serve": "^14.2.1",
+    "storybook": "^7.6.17",
+    "tailwindcss": "^3.3.5",
+    "vite": "^4.5.0"
+  }
+}

package/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "@dreamtree-org/twreact-ui",
+  "version": "1.0.57",
+  "description": "A comprehensive React + Tailwind components library for building modern web apps",
+  "author": {
+    "name": "Partha Preetham Krishna",
+    "email": "partha.preetham.krishna@gmail.com",
+    "url": "https://www.linkedin.com/in/partha-preetham-krishna-68ba00197/"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "node scripts/version-bump.js && NODE_ENV=production rollup -c",
+    "dev": "NODE_ENV=development rollup -c -w",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "lint": "eslint src --ext .js,.jsx",
+    "lint:fix": "eslint src --ext .js,.jsx --fix",
+    "preview": "npm run build && npx serve dist -p 3000",
+    "demo": "npx serve demo -p 3000",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "version:patch": "npm version patch && git push && git push --tags",
+    "version:minor": "npm version minor && git push && git push --tags",
+    "version:major": "npm version major && git push && git push --tags",
+    "version:prerelease": "npm version prerelease && git push && git push --tags",
+    "version:prepatch": "npm version prepatch && git push && git push --tags",
+    "version:preminor": "npm version preminor && git push && git push --tags",
+    "version:premajor": "npm version premajor && git push && git push --tags",
+    "release": "npm run build && npm run test && npm run lint",
+    "release:patch": "npm run release && npm run version:patch",
+    "release:minor": "npm run release && npm run version:minor",
+    "release:major": "npm run release && npm run version:major",
+    "release:prerelease": "npm run release && npm run version:prerelease"
+  },
+  "keywords": [
+    "react",
+    "tailwind",
+    "ui",
+    "components",
+    "javascript",
+    "design-system"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/preethamkrishnadev/dreamtree-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/preethamkrishnadev/dreamtree-ui/issues"
+  },
+  "homepage": "https://github.com/preethamkrishnadev/dreamtree-ui#readme",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.1.1",
+    "@reduxjs/toolkit": "^2.9.0",
+    "axios": "^1.12.2",
+    "clsx": "^1.2.1",
+    "date-fns": "^2.30.0",
+    "lucide-react": "^0.263.1",
+    "react-hook-form": "^7.45.4",
+    "react-redux": "^9.2.0",
+    "react-responsive": "^10.0.1",
+    "redux-persist": "^6.0.0",
+    "tailwind-merge": "^1.14.0",
+    "yup": "^1.7.1"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/runtime": "^7.28.4",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.5.1",
+    "autoprefixer": "^10.4.16",
+    "babel-jest": "^29.7.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-transform-stub": "^2.0.0",
+    "postcss": "^8.4.31",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.53.3",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "serve": "^14.2.1",
+    "storybook": "^7.6.17",
+    "tailwindcss": "^3.3.5",
+    "vite": "^4.5.0"
+  }
+}