@ttianqii/takaui 0.1.4 → 0.1.6

package/README.md

@@ -1,314 +1,172 @@
 # TakaUI
 
-[![npm version](https://img.shields.io/npm/v/@ttianqii/takaui.svg)](https://www.npmjs.com/package/@ttianqii/takaui)
-[![npm downloads](https://img.shields.io/npm/dm/@ttianqii/takaui.svg)](https://www.npmjs.com/package/@ttianqii/takaui)
-[![license](https://img.shields.io/npm/l/@ttianqii/takaui.svg)](https://github.com/ttianqii/takaui/blob/main/LICENSE)
-
-A modern, customizable React UI component library built with TypeScript, Tailwind CSS, and Radix UI primitives.
-
-**Current Version:** 0.1.0
-
-## ✨ What's New in 0.1.0
-
-- 🎯 **Table Alignment Fixed** - Table cells now properly align horizontally with headers
-- 📐 **Consistent Padding** - Checkbox columns and all table content use matching padding (px-3 py-2)
-- ✨ **Previous Features** - All v0.0.9 features (no CSS imports, pure Tailwind, original design preserved)
+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)
 
-### Quick Setup (Recommended)
+## 📚 Documentation
 
-Run the automatic setup wizard:
+- **[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
 
-```bash
-npm install @ttianqii/takaui
-npx takaui-setup
-```
+## ✨ Features
 
-This will:
-- ✅ Configure your Tailwind config automatically
-- ✅ Verify your setup is correct
+- 🎯 **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
 
-**No CSS imports needed!** Components work with pure Tailwind CSS.
-
-### Manual Installation
+## 🚀 Quick Start
 
-If you prefer manual setup:
+### Installation
 
 ```bash
-# npm
 npm install @ttianqii/takaui
-
-# yarn
-yarn add @ttianqii/takaui
-
-# pnpm
-pnpm add @ttianqii/takaui
-
-# bun
-bun add @ttianqii/takaui
 ```
 
-**That's it!** Just make sure you have Tailwind CSS configured in your project.
-
-### Peer Dependencies
-
-TakaUI requires React 18+ or React 19+:
-
-```bash
-# npm
-npm install react react-dom
-
-# yarn
-yarn add react react-dom
-
-# pnpm
-pnpm add react react-dom
-
-# bun
-bun add react react-dom
-```
-
-### Tailwind CSS Setup
-
-**Important:** TakaUI uses Tailwind CSS for styling (no CSS imports needed!). You must have Tailwind CSS configured in your project.
-
-#### 1. Install Tailwind CSS (if not already installed)
-
-```bash
-npm install -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
-```
-
-#### 2. Configure Tailwind
-
-Add TakaUI to your `tailwind.config.js` content paths:
-
-```js
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/@ttianqii/takaui/dist/**/*.{js,mjs,cjs}"
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-```
-
-#### 3. Add Tailwind directives
-
-In your main CSS file (e.g., `src/index.css`):
+**All package managers supported:** npm, yarn, pnpm, bun
 
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
-
-**That's it!** No CSS imports needed from TakaUI. 🎉
+👉 For complete setup instructions, see the **[Getting Started Guide](./GETTING_STARTED.md)**
 
-## 🚀 Quick Start
+### Basic Example
 
 ```tsx
-import { DatePicker, TimePicker, DataTable } from '@ttianqii/takaui'
-import '@ttianqii/takaui/styles.css'
+import { Button, DatePicker, Card } from '@ttianqii/takaui'
 import { useState } from 'react'
 
 function App() {
-  const [date, setDate] = useState<Date | undefined>(new Date())
-  const [dateRange, setDateRange] = useState<{ from: Date; to?: Date }>()
-  
-  // DataTable example - No TanStack required!
-  const columns = [
-    { key: 'name', header: 'Name', sortable: true },
-    { key: 'email', header: 'Email' },
-    { 
-      key: 'status', 
-      header: 'Status',
-      cell: (value) => (
-        <span className="px-2 py-1 bg-green-100 text-green-800 rounded">
-          {value}
-        </span>
-      )
-    },
-  ]
-  
-  const data = [
-    { id: 1, name: 'John', email: 'john@example.com', status: 'Active' },
-    { id: 2, name: 'Jane', email: 'jane@example.com', status: 'Active' },
-  ]
-  
+  const [date, setDate] = useState<Date>()
+
   return (
-    <div>
-      {/* Single Date Picker */}
-      <DatePicker
-        date={date}
-        onDateChange={setDate}
-      />
-      
-      {/* Date Range Picker - NEW! */}
-      <DatePicker
-        mode="range"
-        dateRange={dateRange}
-        onDateRangeChange={setDateRange}
-        numberOfMonths={2}
-      />
-      
-      <DataTable 
-        data={data} 
-        columns={columns}
-        showSearch
-        searchPlaceholder="Search users..."
-      />
-    </div>
+    <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>
   )
 }
 ```
 
-## 📚 Components
-
-TakaUI includes the following components:
+## 📦 Available Components
 
-### Form & Input Components
+### 📅 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
 
-- **[Calendar](./docs/CALENDAR.md)** - Flexible date picker with multiple selection modes
-- **[DatePicker](./docs/DATEPICKER.md)** - Date picker with popover and custom formatting
-  - ✨ **NEW:** Range selection with dual month view
-  - ✨ **NEW:** Enhanced hover states for better UX
-- **[TimePicker](./docs/TIMEPICKER.md)** - Time picker with 12h/24h formats and timezone support
-- **[DropdownMenu](./docs/DROPDOWN.md)** - Accessible dropdown menu component
+### 📊 Data Display
+- **DataTable** - Powerful table with sorting and pagination (no dependencies!)
+- **DataGrid** - Advanced grid system with modular components
 
-### Data Display Components
+### 🎨 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
 
-- **[DataTable](./docs/DATATABLE_NEW.md)** - Independent table with sorting, filtering, and pagination (No TanStack!)
-  - ✅ Zero external dependencies (except icons)
-  - ✅ Built-in sorting, pagination, search
-  - ✅ Custom cell rendering
-  - ✅ Loading states
-  - [Quick Reference](./DATATABLE_QUICKREF.md) - Cheat sheet
-- **DataGrid System** - ✨ **NEW!** Modular table components for custom layouts
-  - DataGrid, DataGridTable, DataGridPagination
-  - DataGridColumnHeader, DataGridRowSelect
-  - Perfect for complex table compositions
-- **[Schedule](./docs/SCHEDULE.md)** - Weekly schedule component with custom fields
-  - ✨ **NEW:** Supports Date type in metadata
-- **[WeekNavigator](./docs/WEEKNAVIGATOR.md)** - Week navigation with date range display
+👉 See **[Components Reference](./COMPONENTS.md)** for detailed documentation
 
-### Advanced Table System (Optional)
+## 💡 Component Examples
 
-For advanced users who need TanStack Table features:
+### Calendar with Holidays
 
-- **[TableRoot, TableContent, TableNavigator](./docs/DATATABLE.md)** - Modular table components
-  - Requires: `npm install @tanstack/react-table`
-  - [Modular Structure](./docs/DATATABLE_MODULAR.md)
-  - [Architecture](./DATATABLE_ARCHITECTURE.md)
+```tsx
+import { Calendar } from '@ttianqii/takaui'
 
-### Base UI Components
+<Calendar
+  selected={date}
+  onSelect={setDate}
+  holidays={['US', 'GB']}
+/>
+```
 
-All components are built on top of shadcn/ui primitives:
+### Data Table
 
-- Button
-- Input
-- Label
-- Select
-- Popover
-- Dialog/Modal
-- Checkbox
-- Card
+```tsx
+import { DataTable, DataTableColumn } from '@ttianqii/takaui'
 
-## 📖 Documentation
+const columns: DataTableColumn<User>[] = [
+  { id: 'name', accessorKey: 'name', header: 'Name' },
+  { id: 'email', accessorKey: 'email', header: 'Email' },
+]
 
-Detailed documentation for each component:
+<DataTable columns={columns} data={users} />
+```
 
-- [Calendar Documentation](./docs/CALENDAR.md)
-- [DatePicker Documentation](./docs/DATEPICKER.md)
-- [TimePicker Documentation](./docs/TIMEPICKER.md)
-- [DataTable Documentation](./docs/DATATABLE.md)
-- [Schedule Documentation](./docs/SCHEDULE.md)
-- [WeekNavigator Documentation](./docs/WEEKNAVIGATOR.md)
-- [DropdownMenu Documentation](./docs/DROPDOWN.md)
+### Time Picker
 
-## 🎨 Customization
+```tsx
+import { TimePicker } from '@ttianqii/takaui'
 
-### Styling with Tailwind
+<TimePicker value="14:30" onChange={setTime} />
+```
 
-All components accept a `className` prop for custom styling:
+### Button Variants
 
 ```tsx
-<Calendar 
-  className="rounded-lg shadow-lg border-2 border-blue-500"
-  mode="single"
-  selected={date}
-  onSelect={setDate}
-/>
-```
+import { Button } from '@ttianqii/takaui'
 
-### Theming
+<Button variant="default">Primary</Button>
+<Button variant="destructive">Delete</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+```
 
-TakaUI components use CSS variables for theming. You can customize colors in your global CSS:
+## 🛠️ Requirements
 
-```css
-:root {
-  --primary: 220 90% 56%;
-  --primary-foreground: 0 0% 100%;
-  --destructive: 0 84% 60%;
-  /* Add more custom variables */
-}
-```
+- React 18.x or 19.x
+- Tailwind CSS 3.x
+- TypeScript (optional but recommended)
 
-## 🔧 TypeScript Support
+## 🎨 Customization
 
-TakaUI is built with TypeScript and includes full type definitions. All props are fully typed for excellent IDE support.
+All components accept `className` for custom styling:
 
 ```tsx
-import type { CalendarProps, DatePickerProps } from '@ttianqii/takaui'
+<Button className="bg-purple-500 hover:bg-purple-600">
+  Custom Style
+</Button>
 ```
 
-## 📦 Tree Shaking
+## 📝 TypeScript Support
 
-TakaUI supports tree shaking. Import only the components you need:
+TakaUI is built with TypeScript and includes full type definitions:
 
 ```tsx
-// Good - Only imports Calendar
-import { Calendar } from '@ttianqii/takaui'
-
-// Also works - Named imports
-import { Calendar, TimePicker, DataTable } from '@ttianqii/takaui'
+import type {
+  ButtonProps,
+  DatePickerProps,
+  DataTableColumn,
+} from '@ttianqii/takaui'
 ```
 
 ## 🤝 Contributing
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+Contributions welcome! Please open an issue or submit a PR on [GitHub](https://github.com/ttianqii/takaui).
 
 ## 📄 License
 
-MIT
+MIT © [ttianqii](https://github.com/ttianqii)
 
 ## 🔗 Links
 
-- [GitHub Repository](https://github.com/ttianqii/takaui)
 - [npm Package](https://www.npmjs.com/package/@ttianqii/takaui)
-
-## 📞 Support
-
-For issues and questions:
-
-- Open an issue on [GitHub](https://github.com/ttianqii/takaui/issues)
-- Check the [documentation](./docs/)
-
-## 🎯 Roadmap
-
-- [ ] Additional form components (Switch, Radio, Slider)
-- [ ] Chart components
-- [ ] Toast notifications
-- [ ] Command palette
-- [ ] Theme switcher
-- [ ] More data display components
+- [GitHub Repository](https://github.com/ttianqii/takaui)
+- [Report Issues](https://github.com/ttianqii/takaui/issues)
 
 ---
 
-Made with ❤️ by [@ttianqii](https://github.com/ttianqii)
+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 {