@ttianqii/takaui 0.0.3 → 0.0.4

package/README.md

@@ -1,73 +1,189 @@
-# React + TypeScript + Vite
+# TakaUI
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A modern, customizable React UI component library built with TypeScript, Tailwind CSS, and Radix UI primitives.
 
-Currently, two official plugins are available:
+## 📦 Installation
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+```bash
+npm install @ttianqii/takaui
+```
+
+### Peer Dependencies
 
-## React Compiler
+TakaUI requires React 18+ or React 19+:
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+```bash
+npm install react react-dom
+```
 
-## Expanding the ESLint configuration
+### Tailwind CSS Setup
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+TakaUI uses Tailwind CSS for styling. Add the TakaUI paths to your `tailwind.config.js`:
 
 ```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
+/** @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: [],
+}
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+### Import Styles
 
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+Import the TakaUI styles in your main entry file (e.g., `main.tsx` or `App.tsx`):
+
+```tsx
+import '@ttianqii/takaui/styles.css'
+```
+
+## 🚀 Quick Start
+
+```tsx
+import { Calendar, TimePicker, DataTable } from '@ttianqii/takaui'
+import '@ttianqii/takaui/styles.css'
+import { useState } from 'react'
+
+function App() {
+  const [date, setDate] = useState<Date | undefined>(new Date())
+  
+  return (
+    <div>
+      <Calendar
+        mode="single"
+        selected={date}
+        onSelect={setDate}
+      />
+    </div>
+  )
+}
+```
+
+## 📚 Components
+
+TakaUI includes the following components:
+
+### Form & Input Components
+
+- **[Calendar](./docs/CALENDAR.md)** - Flexible date picker with multiple selection modes
+- **[DatePicker](./docs/DATEPICKER.md)** - Date picker with popover and custom formatting
+- **[TimePicker](./docs/TIMEPICKER.md)** - Time picker with 12h/24h formats and timezone support
+- **[DropdownMenu](./docs/DROPDOWN.md)** - Accessible dropdown menu component
+
+### Data Display Components
+
+- **[DataTable](./docs/DATATABLE.md)** - Powerful table with sorting, filtering, and pagination
+- **[Schedule](./docs/SCHEDULE.md)** - Weekly schedule component with custom fields
+- **[WeekNavigator](./docs/WEEKNAVIGATOR.md)** - Week navigation with date range display
+
+### Base UI Components
+
+All components are built on top of shadcn/ui primitives:
+
+- Button
+- Input
+- Label
+- Select
+- Popover
+- Dialog/Modal
+- Checkbox
+- Card
+
+## 📖 Documentation
+
+Detailed documentation for each component:
+
+- [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)
+
+## 🎨 Customization
+
+### Styling with Tailwind
+
+All components accept a `className` prop for custom styling:
+
+```tsx
+<Calendar 
+  className="rounded-lg shadow-lg border-2 border-blue-500"
+  mode="single"
+  selected={date}
+  onSelect={setDate}
+/>
 ```
+
+### Theming
+
+TakaUI components use CSS variables for theming. You can customize colors in your global CSS:
+
+```css
+:root {
+  --primary: 220 90% 56%;
+  --primary-foreground: 0 0% 100%;
+  --destructive: 0 84% 60%;
+  /* Add more custom variables */
+}
+```
+
+## 🔧 TypeScript Support
+
+TakaUI is built with TypeScript and includes full type definitions. All props are fully typed for excellent IDE support.
+
+```tsx
+import type { CalendarProps, DatePickerProps } from '@ttianqii/takaui'
+```
+
+## 📦 Tree Shaking
+
+TakaUI supports tree shaking. Import only the components you need:
+
+```tsx
+// Good - Only imports Calendar
+import { Calendar } from '@ttianqii/takaui'
+
+// Also works - Named imports
+import { Calendar, TimePicker, DataTable } from '@ttianqii/takaui'
+```
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 📄 License
+
+MIT
+
+## 🔗 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
+
+---
+
+Made with ❤️ by [@ttianqii](https://github.com/ttianqii)