@ttianqii/takaui 0.1.5 → 0.1.6

package/README.md

@@ -2,393 +2,171 @@
 
 Modern, accessible React component library built with TypeScript, Tailwind CSS, and Radix UI primitives.
 
-## Installation
+[![npm version](https://img.shields.io/npm/v/@ttianqii/takaui.svg)](https://www.npmjs.com/package/@ttianqii/takaui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-```bash
-# npm
-npm install @ttianqii/takaui
-
-# yarn
-yarn add @ttianqii/takaui
-
-# pnpm
-pnpm add @ttianqii/takaui
-
-# bun
-bun add @ttianqii/takaui
-```
-
-### Peer Dependencies
+## 📚 Documentation
 
-```bash
-# npm
-npm install -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
-
-# yarn
-yarn add -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
-
-# pnpm
-pnpm add -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
-
-# bun
-bun add -d tailwindcss postcss autoprefixer
-bunm install react react-dom
+- **[Getting Started Guide](./GETTING_STARTED.md)** - Complete installation and setup instructions
+- **[Components Reference](./COMPONENTS.md)** - Detailed component documentation with examples
+- **[GitHub Repository](https://github.com/ttianqii/takaui)** - Source code and issues
 
-# yarn
-yarn add react react-dom
-
-# pnpm
-pnpm add react react-dom
-
-# bun
-bun add react react-dom
-```
+## ✨ Features
 
-## Setup
+- 🎯 **TypeScript** - Full type safety and IntelliSense support
+- 🎨 **Tailwind CSS** - Utility-first styling, fully customizable
+- ♿ **Accessible** - Built with Radix UI primitives for accessibility
+- 📦 **Tree-shakeable** - Only bundle what you use
+- 🚀 **No dependencies** - Core components work standalone (DataTable, DataGrid)
+- 📅 **Rich Components** - Calendar, DatePicker, TimePicker, Schedule, and more
 
-TakaUI uses Tailwind CSS. Configure your project:
+## 🚀 Quick Start
 
-### 1. Install Tailwind CSS
+### Installation
 
 ```bash
-npm install -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
-```
-
-### 2. Configure Tailwind
-
-Update your `tailwind.config.js`:
-
-```js
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/@ttianqii/takaui/dist/**/*.{js,cjs}"
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-```
-
-### 3. Add Tailwind Directives
-
-In your main CSS file (e.g., `src/index.css`):
-
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+npm install @ttianqii/takaui
 ```
 
-## Components
+**All package managers supported:** npm, yarn, pnpm, bun
 
-### Calendar
+👉 For complete setup instructions, see the **[Getting Started Guide](./GETTING_STARTED.md)**
 
-Interactive calendar with holiday support and customizable styling.
+### Basic Example
 
 ```tsx
-import { Calendar } from '@ttianqii/takaui'
+import { Button, DatePicker, Card } from '@ttianqii/takaui'
 import { useState } from 'react'
 
-function App() {
-  const [date, setDate] = useState(new Date())
-
-  return (
-    <Calendar
-      selectedDate={date}
-      onDateChange={setDate}
-      holidays={['US']}
-      showWeekNumbers
-    />
-  )
-}
-```
-
-**Props:**
-- `selectedDate`: Current selected date
-- `onDateChange`: Callback when date changes
-- `holidays`: Array of country codes for holiday display
-- `showWeekNumbers`: Show week numbers (default: false)
-
----
-
-### DatePicker
-
-Dropdown date selector with calendar popup.
-
-```tsx
-import { DatePicker } from '@ttianqii/takaui'
-
 function App() {
   const [date, setDate] = useState<Date>()
 
   return (
-    <DatePicker
-      selected={date}
-      onSelect={setDate}
-      placeholder="Select a date"
-    />
+    <Card className="p-6">
+      <h1 className="text-2xl font-bold mb-4">Welcome to TakaUI</h1>
+      <DatePicker selected={date} onSelect={setDate} />
+      <Button className="mt-4">Submit</Button>
+    </Card>
   )
 }
 ```
 
-**Props:**
-- `selected`: Selected date
-- `onSelect`: Callback when date is selected
-- `placeholder`: Input placeholder text
-
----
-
-### TimePicker
-
-Time selection input with hour/minute controls.
-
-```tsx
-import { TimePicker } from '@ttianqii/takaui'
-
-function App() {
-  const [time, setTime] = useState('09:00')
-
-  return (
-    <TimePicker
-      value={time}
-      onChange={setTime}
-    />
-  )
-}
-```
-
-**Props:**
-- `value`: Time string in HH:MM format
-- `onChange`: Callback when time changes
-
----
-
-### WeekNavigator
+## 📦 Available Components
 
-Week-based navigation component.
+### 📅 Date & Time
+- **Calendar** - Interactive calendar with holiday support
+- **DatePicker** - Dropdown date selector
+- **TimePicker** - Time selection input
+- **WeekNavigator** - Week-based navigation
+- **Schedule** - Weekly schedule view with events
 
-```tsx
-import { WeekNavigator } from '@ttianqii/takaui'
-
-function App() {
-  const [date, setDate] = useState(new Date())
-
-  return (
-    <WeekNavigator
-      currentDate={date}
-      onDateChange={setDate}
-      onWeekChange={(start, end) => {
-        console.log('Week:', start, 'to', end)
-      }}
-    />
-  )
-}
-```
+### 📊 Data Display
+- **DataTable** - Powerful table with sorting and pagination (no dependencies!)
+- **DataGrid** - Advanced grid system with modular components
 
-**Props:**
-- `currentDate`: Current date in view
-- `onDateChange`: Callback when date changes
-- `onWeekChange`: Callback with week start/end dates
+### 🎨 UI Components
+- **Button** - Multiple variants and sizes
+- **Card** - Container with header, content, footer
+- **Input** - Form text input
+- **Checkbox** - Accessible checkbox
+- **Select** - Dropdown select
+- **Modal** - Dialog overlay
+- **DropdownMenu** - Accessible dropdown menu
+- **Table** - Basic table components
+- **Popover** - Floating content
+- **Label** - Form labels
+- **Separator** - Visual divider
 
----
+👉 See **[Components Reference](./COMPONENTS.md)** for detailed documentation
 
-### Schedule
+## 💡 Component Examples
 
-Weekly schedule view with time slots.
+### Calendar with Holidays
 
 ```tsx
-import { Schedule } from '@ttianqii/takaui'
+import { Calendar } from '@ttianqii/takaui'
 
-function App() {
-  return (
-    <Schedule
-      events={[
-        {
-          id: '1',
-          title: 'Meeting',
-          start: new Date('2024-01-15T10:00:00'),
-          end: new Date('2024-01-15T11:00:00'),
-        }
-      ]}
-      onEventClick={(event) => console.log(event)}
-    />
-  )
-}
+<Calendar
+  selected={date}
+  onSelect={setDate}
+  holidays={['US', 'GB']}
+/>
 ```
 
-**Props:**
-- `events`: Array of event objects
-- `onEventClick`: Callback when event is clicked
-
----
-
-### DataTable
-
-Powerful data table with sorting, filtering, and pagination.
+### Data Table
 
 ```tsx
-import { DataTable } from '@ttianqii/takaui'
-import { ColumnDef } from '@tanstack/react-table'
-
-interface User {
-  id: string
-  name: string
-  email: string
-}
+import { DataTable, DataTableColumn } from '@ttianqii/takaui'
 
-const columns: ColumnDef<User>[] = [
-  {
-    accessorKey: 'name',
-    header: 'Name',
-  },
-  {
-    accessorKey: 'email',
-    header: 'Email',
-  },
+const columns: DataTableColumn<User>[] = [
+  { id: 'name', accessorKey: 'name', header: 'Name' },
+  { id: 'email', accessorKey: 'email', header: 'Email' },
 ]
 
-function App() {
-  const data: User[] = [
-    { id: '1', name: 'John Doe', email: 'john@example.com' },
-    { id: '2', name: 'Jane Smith', email: 'jane@example.com' },
-  ]
-
-  return <DataTable columns={columns} data={data} />
-}
+<DataTable columns={columns} data={users} />
 ```
 
-**Required peer dependency:**
-```bash
-npm install @tanstack/react-table
-```
-
-**Props:**
-- `columns`: Column definitions (TanStack Table format)
-- `data`: Array of data objects
-- `enableSorting`: Enable column sorting (default: true)
-- `enableFiltering`: Enable filtering (default: true)
-
----
-
-### DropdownMenu
-
-Accessible dropdown menu component.
+### Time Picker
 
 ```tsx
-import { DropdownMenu } from '@ttianqii/takaui'
+import { TimePicker } from '@ttianqii/takaui'
 
-function App() {
-  return (
-    <DropdownMenu
-      trigger={<button>Options</button>}
-      items={[
-        { label: 'Edit', onClick: () => console.log('Edit') },
-        { label: 'Delete', onClick: () => console.log('Delete') },
-        { type: 'separator' },
-        { label: 'Archive', onClick: () => console.log('Archive') },
-      ]}
-    />
-  )
-}
+<TimePicker value="14:30" onChange={setTime} />
 ```
 
-**Props:**
-- `trigger`: Trigger element
-- `items`: Array of menu items
-
----
-
-## UI Components
-
-TakaUI also exports low-level UI primitives:
+### Button Variants
 
 ```tsx
-import {
-  Button,
-  Card,
-  Checkbox,
-  Input,
-  Label,
-  Modal,
-  Popover,
-  Select,
-  Separator,
-  Table,
-} from '@ttianqii/takaui'
-```
+import { Button } from '@ttianqii/takaui'
 
-### Button
-
-```tsx
-<Button variant="default" size="default">
-  Click me
-</Button>
+<Button variant="default">Primary</Button>
+<Button variant="destructive">Delete</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
 ```
 
-**Variants:** `default`, `destructive`, `outline`, `secondary`, `ghost`, `link`  
-**Sizes:** `default`, `sm`, `lg`, `icon`
+## 🛠️ Requirements
 
-### Card
+- React 18.x or 19.x
+- Tailwind CSS 3.x
+- TypeScript (optional but recommended)
 
-```tsx
-<Card>
-  <Card.Header>
-    <Card.Title>Card Title</Card.Title>
-  </Card.Header>
-  <Card.Content>
-    Content goes here
-  </Card.Content>
-</Card>
-```
+## 🎨 Customization
 
-### Input
+All components accept `className` for custom styling:
 
 ```tsx
-<Input
-  type="email"
-  placeholder="Email"
-  value={email}
-  onChange={(e) => setEmail(e.target.value)}
-/>
+<Button className="bg-purple-500 hover:bg-purple-600">
+  Custom Style
+</Button>
 ```
 
-### Modal
+## 📝 TypeScript Support
+
+TakaUI is built with TypeScript and includes full type definitions:
 
 ```tsx
-<Modal
-  open={isOpen}
-  onOpenChange={setIsOpen}
-  title="Modal Title"
->
-  <p>Modal content</p>
-</Modal>
+import type {
+  ButtonProps,
+  DatePickerProps,
+  DataTableColumn,
+} from '@ttianqii/takaui'
 ```
 
-## Utilities
-
-```tsx
-import { cn } from '@ttianqii/takaui'
+## 🤝 Contributing
 
-// Merge Tailwind classes
-const className = cn('text-red-500', isActive && 'font-bold')
-```
+Contributions welcome! Please open an issue or submit a PR on [GitHub](https://github.com/ttianqii/takaui).
 
-## TypeScript
+## 📄 License
 
-TakaUI is built with TypeScript and includes full type definitions.
+MIT © [ttianqii](https://github.com/ttianqii)
 
-## License
+## 🔗 Links
 
-MIT
+- [npm Package](https://www.npmjs.com/package/@ttianqii/takaui)
+- [GitHub Repository](https://github.com/ttianqii/takaui)
+- [Report Issues](https://github.com/ttianqii/takaui/issues)
 
-## Support
+---
 
-For issues and questions, visit [GitHub](https://github.com/ttianqii/takaui)
+Made with ❤️ using React, TypeScript, and Tailwind CSS

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { ClassValue } from 'clsx';
-import { Column } from '@tanstack/react-table';
 import { default as default_2 } from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -10,7 +9,6 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { Table as Table_2 } from '@tanstack/react-table';
 
 export declare const Button: React_2.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
 
@@ -354,14 +352,6 @@ declare interface SeparatorProps extends React_2.HTMLAttributes<HTMLDivElement>
     decorative?: boolean;
 }
 
-export declare function SortableHeader<TData, TValue>({ column, title, align, className, }: SortableHeaderProps<TData, TValue>): JSX.Element;
-
-export declare interface SortableHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
-    column: Column<TData, TValue>;
-    title: string;
-    align?: "left" | "center" | "right";
-}
-
 export declare function Table({ className, variant, ...props }: React_2.ComponentProps<"table"> & {
     variant?: TableVariant;
 }): JSX.Element;
@@ -372,42 +362,16 @@ export declare function TableCaption({ className, ...props }: React_2.ComponentP
 
 export declare function TableCell({ className, ...props }: React_2.ComponentProps<"td">): JSX.Element;
 
-export declare function TableContent(): JSX.Element;
-
 export declare function TableFooter({ className, ...props }: React_2.ComponentProps<"tfoot">): JSX.Element;
 
 export declare function TableHead({ className, ...props }: React_2.ComponentProps<"th">): JSX.Element;
 
 export declare function TableHeader({ className, ...props }: React_2.ComponentProps<"thead">): JSX.Element;
 
-export declare function TableNavigator({ rowsPerPageOptions, showPageSelector, showRecordInfo, showControls, }?: TableNavigatorProps): JSX.Element;
-
-export declare interface TableNavigatorProps {
-    rowsPerPageOptions?: number[];
-    showPageSelector?: boolean;
-    showRecordInfo?: boolean;
-    showControls?: boolean;
-}
-
-export declare function TableRoot<TData>({ table, totalRecords, children }: TableRootProps<TData>): JSX.Element;
-
-declare interface TableRootProps<TData> {
-    table: Table_2<TData>;
-    totalRecords: number;
-    children: React_2.ReactNode;
-}
-
 export declare function TableRow({ className, ...props }: React_2.ComponentProps<"tr">): JSX.Element;
 
 declare type TableVariant = "default" | "clean";
 
-export declare function TableWrapper({ children, className }: TableWrapperProps): JSX.Element;
-
-declare interface TableWrapperProps {
-    children: React_2.ReactNode;
-    className?: string;
-}
-
 export declare const TimePicker: default_2.FC<TimePickerProps>;
 
 declare interface TimePickerProps {