@customafk/lunas-ui 0.0.56 → 0.0.58

package/README.md

@@ -1,20 +1,25 @@
-# UI LUNAS - Thư viện Component React
+# Lunas UI - React Component Library
 
-## ✨ Tính năng
+[![npm version](https://img.shields.io/npm/v/@customafk/lunas-ui.svg)](https://www.npmjs.com/package/@customafk/lunas-ui)
+[![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC)
+[![Node Version](https://img.shields.io/badge/node-%3E%3D%2022.0.0-brightgreen.svg)](https://nodejs.org/)
 
-- 🎨 **Thiết kế đẹp mắt**: Component được thiết kế theo các nguyên tắc UI/UX hiện đại
-- 🔧 **Dễ tùy chỉnh**: Hỗ trợ CSS-in-JS, CSS modules, và Tailwind CSS
-- 📱 **Responsive**: Tất cả component đều responsive và mobile-friendly
-- ♿ **Accessible**: Tuân thủ các chuẩn WCAG 2.1 cho accessibility
-<!--- 🌙 **Dark mode**: Hỗ trợ dark mode built-in-->
-- 📦 **Tree-shaking**: Chỉ import những gì bạn cần
-- 🔷 **TypeScript**: Được viết hoàn toàn bằng TypeScript với type definitions đầy đủ
+A modern, accessible, and customizable React UI component library built for Lunas Enterprise applications.
 
-## 📦 Cài đặt
+## ✨ Features
+
+- 🎨 **Modern Design**: Components designed with contemporary UI/UX principles
+- 🔧 **Highly Customizable**: Supports TailwindCSS with class variance authority
+- 📱 **Responsive**: All components are responsive and mobile-friendly
+- ♿ **Accessible**: Complies with WCAG 2.1 accessibility standards
+- 📦 **Tree-shaking**: Import only what you need for optimal bundle size
+- 🔷 **TypeScript**: Fully typed with comprehensive TypeScript definitions
+
+## 📦 Installation
 
 ```bash
 # npm
-npm i @customafk/lunas-ui
+npm install @customafk/lunas-ui
 
 # yarn
 yarn add @customafk/lunas-ui
@@ -25,22 +30,49 @@ pnpm add @customafk/lunas-ui
 
 ### Peer Dependencies
 
+Lunas UI requires the following peer dependencies:
+
 ```bash
 npm install react react-dom
 ```
 
-## 🚀 Sử dụng nhanh
+Additional peer dependencies for specific components:
+
+```bash
+npm install @hookform/error-message@^2.0.0 react-hook-form@^7.62.0 lucide-react@^0.541.0
+```
+
+## 🚀 Quick Start
+
+1. Import styles in your main application file:
+
+```jsx
+// Import base styles first
+import '@customafk/lunas-ui/styles/base'
+// Import theme styles (required)
+import '@customafk/lunas-ui/styles/theme'
+// Optional: Import typography styles if needed
+import '@customafk/lunas-ui/styles/typography'
+```
+
+2. Import and use components:
 
 ```jsx
 import React from 'react'
-import { Button, Card, Input } from 'your-ui-library'
-import 'your-ui-library/dist/styles.css'
+import { Button } from '@customafk/lunas-ui/ui/button'
+import { Card } from '@customafk/lunas-ui/ui/card'
+import { TextField } from '@customafk/lunas-ui/forms/text-field'
+import { FormWrapper } from '@customafk/lunas-ui/forms/form-wrapper'
 
 function App() {
+  const onSubmit = (data) => console.log(data)
+
   return (
-    <Card>
-      <Input placeholder="Enter your name" />
-      <Button variant="primary">Click me!</Button>
+    <Card className="mx-auto max-w-md p-6">
+      <FormWrapper onSubmit={onSubmit}>
+        <TextField name="username" label="Username" placeholder="Enter your username" />
+        <Button type="submit">Submit</Button>
+      </FormWrapper>
     </Card>
   )
 }
@@ -48,76 +80,209 @@ function App() {
 export default App
 ```
 
-## 📋 Danh sách Component
+## 📋 Component Import Guide
+
+### Base UI Components
+
+```jsx
+// Core UI Components
+import { Alert } from '@customafk/lunas-ui/ui/alert'
+import { AlertDialog } from '@customafk/lunas-ui/ui/alert-dialog'
+import { AspectRatio } from '@customafk/lunas-ui/ui/aspect-ratio'
+import { Avatar } from '@customafk/lunas-ui/ui/avatar'
+import { Badge } from '@customafk/lunas-ui/ui/badge'
+import { Breadcrumb } from '@customafk/lunas-ui/ui/breadcrumb'
+import { Button } from '@customafk/lunas-ui/ui/button'
+import { Calendar } from '@customafk/lunas-ui/ui/calendar'
+import { Card } from '@customafk/lunas-ui/ui/card'
+import { Carousel } from '@customafk/lunas-ui/ui/carousel'
+import { Collapsible } from '@customafk/lunas-ui/ui/collapsible'
+import { Command } from '@customafk/lunas-ui/ui/command'
+import { ContextMenu } from '@customafk/lunas-ui/ui/context-menu'
+import { Dialog } from '@customafk/lunas-ui/ui/dialog'
+import { DropdownMenu } from '@customafk/lunas-ui/ui/dropdown-menu'
+import { FileUploader } from '@customafk/lunas-ui/ui/file-uploader'
+import { Form } from '@customafk/lunas-ui/ui/form'
+import { HoverCard } from '@customafk/lunas-ui/ui/hover-card'
+import { Input } from '@customafk/lunas-ui/ui/input'
+import { InputOTP } from '@customafk/lunas-ui/ui/input-otp'
+import { Label } from '@customafk/lunas-ui/ui/label'
+import { Menubar } from '@customafk/lunas-ui/ui/menubar'
+import { MultiSelect } from '@customafk/lunas-ui/ui/multi-select'
+import { NavigationMenu } from '@customafk/lunas-ui/ui/navigation-menu'
+import { Pagination } from '@customafk/lunas-ui/ui/pagination'
+import { Popover } from '@customafk/lunas-ui/ui/popover'
+import { Progress } from '@customafk/lunas-ui/ui/progress'
+import { RadioGroup } from '@customafk/lunas-ui/ui/radio-group'
+import { Resizable } from '@customafk/lunas-ui/ui/resizable'
+import { ScrollArea } from '@customafk/lunas-ui/ui/scroll-area'
+import { Select } from '@customafk/lunas-ui/ui/select'
+import { Separator } from '@customafk/lunas-ui/ui/separator'
+import { Sheet } from '@customafk/lunas-ui/ui/sheet'
+import { Sidebar } from '@customafk/lunas-ui/ui/sidebar'
+import { Skeleton } from '@customafk/lunas-ui/ui/skeleton'
+import { Slider } from '@customafk/lunas-ui/ui/slider'
+import { Sonner } from '@customafk/lunas-ui/ui/sonner'
+import { Switch } from '@customafk/lunas-ui/ui/switch'
+import { Table } from '@customafk/lunas-ui/ui/table'
+import { Tabs } from '@customafk/lunas-ui/ui/tabs'
+import { Textarea } from '@customafk/lunas-ui/ui/textarea'
+import { Toggle } from '@customafk/lunas-ui/ui/toggle'
+import { ToggleGroup } from '@customafk/lunas-ui/ui/toggle-group'
+import { Tooltip } from '@customafk/lunas-ui/ui/tooltip'
+
+// Specialized Button Variants
+import { AddNewButton } from '@customafk/lunas-ui/ui/buttons/add-new'
+import { EditButton } from '@customafk/lunas-ui/ui/buttons/edit'
+import { RefreshButton } from '@customafk/lunas-ui/ui/buttons/refresh'
+import { TrashButton } from '@customafk/lunas-ui/ui/buttons/trash'
+import { UploadImageButton } from '@customafk/lunas-ui/ui/buttons/upload-image'
+
+// Specialized Input Variants
+import { SearchInput } from '@customafk/lunas-ui/ui/inputs/search-input'
+```
 
 ### Form Components
 
-- `Button` - Các loại button với nhiều variant
-- `Input` - Text input với validation
-- `Select` - Dropdown select
-- `Checkbox` - Checkbox và radio button
-- `Switch` - Toggle switch
+```jsx
+// Import form wrapper for React Hook Form integration
+import { FormWrapper } from '@customafk/lunas-ui/forms/form-wrapper'
+
+// Field components
+import { TextField } from '@customafk/lunas-ui/forms/text-field'
+import { PasswordField } from '@customafk/lunas-ui/forms/password-field'
+import { NumberField } from '@customafk/lunas-ui/forms/number-field'
+import { SelectField } from '@customafk/lunas-ui/forms/select-field'
+import { DateField } from '@customafk/lunas-ui/forms/date-field'
+import { SwitchField } from '@customafk/lunas-ui/forms/switch-field'
+import { TextareaField } from '@customafk/lunas-ui/forms/textarea-field'
+import { MultiSelectField } from '@customafk/lunas-ui/forms/multi-select-field'
+```
 
 ### Layout Components
 
-- `Container` - Wrapper container
-- `Grid` - Flexible grid system
-- `Card` - Card component
-- `Modal` - Modal dialog
-- `Drawer` - Side drawer
+```jsx
+import { Flex } from '@customafk/lunas-ui/layouts/flex'
+import { Grid } from '@customafk/lunas-ui/layouts/grid'
+import { AppLayout } from '@customafk/lunas-ui/layouts/app-layout'
+import { Main } from '@customafk/lunas-ui/layouts/main'
+```
+
+### Data Display Components
 
-### Feedback Components
+```jsx
+import { Country } from '@customafk/lunas-ui/data-display/country'
+import { DataList } from '@customafk/lunas-ui/data-display/data-list'
+import { Date } from '@customafk/lunas-ui/data-display/date'
+import { DateTooltip } from '@customafk/lunas-ui/data-display/date-tooltip'
+import { Empty } from '@customafk/lunas-ui/data-display/empty'
+import { Name } from '@customafk/lunas-ui/data-display/name'
+import { PhoneNumber } from '@customafk/lunas-ui/data-display/phone-number'
+import { RoleBadge } from '@customafk/lunas-ui/data-display/role-badge'
+import { Statistic } from '@customafk/lunas-ui/data-display/statistic'
+```
 
-- `Alert` - Alert messages
-- `Toast` - Toast notifications
-- `Loading` - Loading indicators
-- `Progress` - Progress bars
+### Dialog Components
 
-### Navigation Components
+```jsx
+import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog'
+import { DetailDialog } from '@customafk/lunas-ui/dialogs/detail-dialog'
+import { ErrorDialog } from '@customafk/lunas-ui/dialogs/error-dialog'
+import { FormDialog } from '@customafk/lunas-ui/dialogs/form-dialog'
+import { LoadingDialog } from '@customafk/lunas-ui/dialogs/loading-dialog'
+```
 
-- `Navbar` - Navigation bar
-- `Breadcrumb` - Breadcrumb navigation
-- `Pagination` - Pagination component
-- `Tabs` - Tab component
+### Table Components
 
-## 📖 Documentation
+```jsx
+import { DataTable } from '@customafk/lunas-ui/table'
+```
 
-Xem [documentation đầy đủ](https://ui.lunas.vn) để biết thêm chi tiết về:
+### Typography Components
 
-- **Getting Started**: Hướng dẫn setup và configuration
-- **Component API**: Props, methods và examples cho từng component
-- **Theming**: Cách customize theme và colors
-- **Examples**: Các ví dụ thực tế và use cases
+```jsx
+import { Title } from '@customafk/lunas-ui/typography/title'
+import { Paragraph } from '@customafk/lunas-ui/typography/paragraph'
+```
 
 ## 🎨 Theming
 
-## 🔧 Configuration
+Lunas UI supports customization through CSS variables. To customize the theme:
 
-### CSS Import
+1. Import the base theme:
 
 ```jsx
-// Import tất cả styles
-import 'your-ui-library/dist/styles.css'
+import '@customafk/lunas-ui/styles/theme'
+```
+
+2. Override CSS variables in your global CSS file:
 
-// Hoặc import riêng từng component
-import 'your-ui-library/dist/components/Button.css'
+```css
+:root {
+  --primary: 222.2 47.4% 55.1%;
+  --primary-muted: 222.2 47.4% 95%;
+  --primary-weak: 222.2 47.4% 90%;
+  --primary-strong: 222.2 47.4% 45%;
+  --primary-intense: 222.2 47.4% 35%;
+
+  /* Other variables can be overridden similarly */
+}
 ```
 
-### Bundle Size Optimization
+## 📖 Component Examples
+
+### Form Example
 
 ```jsx
-// Tree-shaking - chỉ import những gì cần
-import { Button } from 'your-ui-library'
+import { FormWrapper } from '@customafk/lunas-ui/forms/form-wrapper'
+import { TextField } from '@customafk/lunas-ui/forms/text-field'
+import { PasswordField } from '@customafk/lunas-ui/forms/password-field'
+import { Button } from '@customafk/lunas-ui/ui/button'
 
-// Thay vì import toàn bộ
-import * as UI from 'your-ui-library' // ❌ Không nên
-```
+const LoginForm = () => {
+  const onSubmit = (data) => {
+    console.log('Form submitted:', data)
+  }
 
-## 🌟 Examples
+  return (
+    <FormWrapper onSubmit={onSubmit}>
+      <TextField name="email" label="Email" placeholder="Enter your email" isShowErrorMsg />
+      <PasswordField name="password" label="Password" isShowErrorMsg />
+      <Button type="submit">Log In</Button>
+    </FormWrapper>
+  )
+}
+```
 
-### Basic Form
+### Data Table Example
 
-### Dark Mode
+```jsx
+import { DataTable } from '@customafk/lunas-ui/table'
+
+const columns = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+  },
+  {
+    accessorKey: 'role',
+    header: 'Role',
+  },
+]
+
+const data = [
+  { name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+  { name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
+]
+
+const MyTable = () => {
+  return <DataTable columns={columns} data={data} />
+}
+```
 
 ## 🛠️ Development
 
@@ -129,66 +294,55 @@ cd lunas-enterprise-ui-package
 # Install dependencies
 npm install
 
-# Build library
-npm run build
+# Start development environment
+npm run dev
 
-# Run storybook
+# Run Storybook
 npm run storybook
-```
 
-### Scripts
+# Build the library
+npm run build
+```
 
 ## 🤝 Contributing
 
-Chúng tôi hoan nghênh mọi đóng góp! Vui lòng xem [CONTRIBUTING.md](CONTRIBUTING.md) để biết thêm chi tiết.
-
-### Development Process
+We welcome contributions! Please follow these steps to contribute:
 
 1. Fork repository
-2. Tạo feature branch (`git checkout -b feature/amazing-feature`)
+2. Create feature branch (`git checkout -b feature/amazing-feature`)
 3. Commit changes (`git commit -m 'Add amazing feature'`)
 4. Push to branch (`git push origin feature/amazing-feature`)
-5. Tạo Pull Request
+5. Create Pull Request
 
 ### Coding Standards
 
-- Code theo ESLint config
-- Viết tests cho features mới
-- Update documentation khi cần
-- Follow conventional commits
+- Follow ESLint config
+- Write tests for new features
+- Update documentation as needed
+- Use conventional commits
 
 ## 📝 Changelog
 
-Xem [CHANGELOG.md](CHANGELOG.md) để biết lịch sử thay đổi của từng version.
+See [CHANGELOG.md](CHANGELOG.md) for version history and changes.
 
 ## 📄 License
 
-MIT © [Your Name](https://github.com/yourusername)
+ISC © [CustomAFK](https://github.com/QuangPhamvt)
 
 ## 🙋‍♀️ Support
 
-- **Documentation**: [https://your-ui-library-docs.com](https://your-ui-library-docs.com)
-- **GitHub Issues**: [Report bugs hoặc feature requests](https://github.com/yourusername/your-ui-library/issues)
-- **Discord**: [Join community](https://discord.gg/your-discord)
-- **Email**: support@your-ui-library.com
+- **Documentation**: [https://ui.lunas.vn](https://ui.lunas.vn)
+- **GitHub Issues**: [Report bugs or feature requests](https://github.com/QuangPhamvt/lunas-enterprise-ui-package/issues)
+- **Email**: quangpm220503vt@gmail.com
 
 ## 🏆 Credits
 
-- Cảm ơn [React](https://reactjs.org/) team
-- Icons từ [Heroicons](https://heroicons.com/)
-- Inspiration từ [Chakra UI](https://chakra-ui.com/) và [Material-UI](https://mui.com/)
+- Thanks to [React](https://reactjs.org/) team
+- Icons from [Lucide React](https://lucide.dev/icons/)
+- Inspiration from [Chakra UI](https://chakra-ui.com/) and [Material-UI](https://mui.com/)
 
 ---
 
 <div align="center">
-  Được tạo với ❤️ bởi <a href="https://github.com/QuangPhamvt">CustomAFK</a>
+  Created with ❤️ by <a href="https://github.com/QuangPhamvt">CustomAFK</a>
 </div>
-
-<!--```json
-{
-  "./styles/base": "./styles/base.css",
-  "./styles/loader": "./styles/loader.css",
-  "./styles/theme": "./styles/theme.css",
-  "./styles/typography": "./styles/typography.css",
-}
-```-->

package/dist/{add-new-NPjDhZh_.js → add-new-B9KK77jE.js}

@@ -1,2 +1,2 @@
 import{Paragraph as e}from"./paragraph-D4klQX4h.js";import{Button as t}from"./button-DL_i4AVi.js";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{PlusIcon as i}from"lucide-react";const a=({onClick:a=()=>{}})=>r(t,{"aria-label":`Tạo mới`,variant:`outline`,color:`muted`,className:`outline-border-weak max-sm:aspect-square max-sm:size-9 max-sm:p-0`,onClick:a,children:[n(i,{className:`opacity-60 sm:-ms-1`,size:16,"aria-hidden":`true`}),n(e,{variant:`sm`,className:`max-sm:sr-only`,children:`Create`})]});export{a as AddNewBtn};
-//# sourceMappingURL=add-new-NPjDhZh_.js.map
+//# sourceMappingURL=add-new-B9KK77jE.js.map

package/dist/{add-new-NPjDhZh_.js.map → add-new-B9KK77jE.js.map}

@@ -1 +1 @@
-{"version":3,"file":"add-new-NPjDhZh_.js","names":["AddNewBtn: React.FC<React.PropsWithChildren<Props>>"],"sources":["../packages/components/ui/buttons/add-new.tsx"],"sourcesContent":["import { PlusIcon } from 'lucide-react'\n\nimport { Paragraph } from '@/components/typography/paragraph'\n\nimport { Button } from '../button'\n\ntype Props = {\n  onClick?: () => void\n}\nexport const AddNewBtn: React.FC<React.PropsWithChildren<Props>> = ({ onClick = () => {} }) => {\n  return (\n    <Button\n      aria-label=\"Tạo mới\"\n      variant=\"outline\"\n      color=\"muted\"\n      className=\"outline-border-weak max-sm:aspect-square max-sm:size-9 max-sm:p-0\"\n      onClick={onClick}\n    >\n      <PlusIcon className=\"opacity-60 sm:-ms-1\" size={16} aria-hidden=\"true\" />\n      <Paragraph variant=\"sm\" className=\"max-sm:sr-only\">\n        Create\n      </Paragraph>\n    </Button>\n  )\n}\n"],"mappings":"4LASA,MAAaA,GAAuD,CAAE,cAAgB,MAElF,EAAC,EAAA,CACC,aAAW,UACX,QAAQ,UACR,MAAM,QACN,UAAU,oEACD,oBAET,EAAC,EAAA,CAAS,UAAU,sBAAsB,KAAM,GAAI,cAAY,SAChE,EAAC,EAAA,CAAU,QAAQ,KAAK,UAAU,0BAAiB"}
+{"version":3,"file":"add-new-B9KK77jE.js","names":["AddNewBtn: React.FC<React.PropsWithChildren<Props>>"],"sources":["../packages/components/ui/buttons/add-new.tsx"],"sourcesContent":["import { PlusIcon } from 'lucide-react'\n\nimport { Paragraph } from '@/components/typography/paragraph'\n\nimport { Button } from '../button'\n\ntype Props = {\n  onClick?: () => void\n}\nexport const AddNewBtn: React.FC<React.PropsWithChildren<Props>> = ({ onClick = () => {} }) => {\n  return (\n    <Button\n      aria-label=\"Tạo mới\"\n      variant=\"outline\"\n      color=\"muted\"\n      className=\"outline-border-weak max-sm:aspect-square max-sm:size-9 max-sm:p-0\"\n      onClick={onClick}\n    >\n      <PlusIcon className=\"opacity-60 sm:-ms-1\" size={16} aria-hidden=\"true\" />\n      <Paragraph variant=\"sm\" className=\"max-sm:sr-only\">\n        Create\n      </Paragraph>\n    </Button>\n  )\n}\n"],"mappings":"4LASA,MAAaA,GAAuD,CAAE,cAAgB,MAElF,EAAC,EAAA,CACC,aAAW,UACX,QAAQ,UACR,MAAM,QACN,UAAU,oEACD,oBAET,EAAC,EAAA,CAAS,UAAU,sBAAsB,KAAM,GAAI,cAAY,SAChE,EAAC,EAAA,CAAU,QAAQ,KAAK,UAAU,0BAAiB"}

package/dist/{add-new-B_isqDA8.cjs → add-new-B9vW0r69.cjs}

@@ -1,2 +1,2 @@
 const e=require(`./chunk-CUT6urMc.cjs`),t=require(`./paragraph-BsEYXIR3.cjs`),n=require(`./button-ChpGfVjG.cjs`),r=e.__toESM(require(`react/jsx-runtime`)),i=e.__toESM(require(`lucide-react`)),a=({onClick:e=()=>{}})=>(0,r.jsxs)(n.Button,{"aria-label":`Tạo mới`,variant:`outline`,color:`muted`,className:`outline-border-weak max-sm:aspect-square max-sm:size-9 max-sm:p-0`,onClick:e,children:[(0,r.jsx)(i.PlusIcon,{className:`opacity-60 sm:-ms-1`,size:16,"aria-hidden":`true`}),(0,r.jsx)(t.Paragraph,{variant:`sm`,className:`max-sm:sr-only`,children:`Create`})]});Object.defineProperty(exports,`AddNewBtn`,{enumerable:!0,get:function(){return a}});
-//# sourceMappingURL=add-new-B_isqDA8.cjs.map
+//# sourceMappingURL=add-new-B9vW0r69.cjs.map

package/dist/{add-new-B_isqDA8.cjs.map → add-new-B9vW0r69.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"add-new-B_isqDA8.cjs","names":["AddNewBtn: React.FC<React.PropsWithChildren<Props>>","Button","PlusIcon","Paragraph"],"sources":["../packages/components/ui/buttons/add-new.tsx"],"sourcesContent":["import { PlusIcon } from 'lucide-react'\n\nimport { Paragraph } from '@/components/typography/paragraph'\n\nimport { Button } from '../button'\n\ntype Props = {\n  onClick?: () => void\n}\nexport const AddNewBtn: React.FC<React.PropsWithChildren<Props>> = ({ onClick = () => {} }) => {\n  return (\n    <Button\n      aria-label=\"Tạo mới\"\n      variant=\"outline\"\n      color=\"muted\"\n      className=\"outline-border-weak max-sm:aspect-square max-sm:size-9 max-sm:p-0\"\n      onClick={onClick}\n    >\n      <PlusIcon className=\"opacity-60 sm:-ms-1\" size={16} aria-hidden=\"true\" />\n      <Paragraph variant=\"sm\" className=\"max-sm:sr-only\">\n        Create\n      </Paragraph>\n    </Button>\n  )\n}\n"],"mappings":"gMASaA,GAAuD,CAAE,cAAgB,OAElF,EAAA,EAAA,MAACC,EAAAA,OAAAA,CACC,aAAW,UACX,QAAQ,UACR,MAAM,QACN,UAAU,oEACD,qBAET,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,UAAU,sBAAsB,KAAM,GAAI,cAAY,UAChE,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAU,QAAQ,KAAK,UAAU,0BAAiB"}
+{"version":3,"file":"add-new-B9vW0r69.cjs","names":["AddNewBtn: React.FC<React.PropsWithChildren<Props>>","Button","PlusIcon","Paragraph"],"sources":["../packages/components/ui/buttons/add-new.tsx"],"sourcesContent":["import { PlusIcon } from 'lucide-react'\n\nimport { Paragraph } from '@/components/typography/paragraph'\n\nimport { Button } from '../button'\n\ntype Props = {\n  onClick?: () => void\n}\nexport const AddNewBtn: React.FC<React.PropsWithChildren<Props>> = ({ onClick = () => {} }) => {\n  return (\n    <Button\n      aria-label=\"Tạo mới\"\n      variant=\"outline\"\n      color=\"muted\"\n      className=\"outline-border-weak max-sm:aspect-square max-sm:size-9 max-sm:p-0\"\n      onClick={onClick}\n    >\n      <PlusIcon className=\"opacity-60 sm:-ms-1\" size={16} aria-hidden=\"true\" />\n      <Paragraph variant=\"sm\" className=\"max-sm:sr-only\">\n        Create\n      </Paragraph>\n    </Button>\n  )\n}\n"],"mappings":"gMASaA,GAAuD,CAAE,cAAgB,OAElF,EAAA,EAAA,MAACC,EAAAA,OAAAA,CACC,aAAW,UACX,QAAQ,UACR,MAAM,QACN,UAAU,oEACD,qBAET,EAAA,EAAA,KAACC,EAAAA,SAAAA,CAAS,UAAU,sBAAsB,KAAM,GAAI,cAAY,UAChE,EAAA,EAAA,KAACC,EAAAA,UAAAA,CAAU,QAAQ,KAAK,UAAU,0BAAiB"}

package/dist/{button-D-rU8Zxi.d.cts → button-D_tzwFGJ.d.cts}

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime77 from "react/jsx-runtime";
-import * as class_variance_authority_types3 from "class-variance-authority/types";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 
 //#region packages/components/ui/button.d.ts
@@ -7,7 +7,7 @@ declare const buttonVariants: (props?: ({
   variant?: "default" | "outline" | "ghost" | "link" | null | undefined;
   color?: "muted" | "primary" | "secondary" | "success" | "important" | "info" | "warning" | "danger" | null | undefined;
   size?: "sm" | "lg" | "default" | "icon" | null | undefined;
-} & class_variance_authority_types3.ClassProp) | undefined) => string;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Button({
   className,
   variant,
@@ -20,7 +20,7 @@ declare function Button({
 }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
   asChild?: boolean;
   isLoading?: boolean;
-}): react_jsx_runtime77.JSX.Element;
+}): react_jsx_runtime15.JSX.Element;
 //#endregion
 export { Button, buttonVariants };
-//# sourceMappingURL=button-D-rU8Zxi.d.cts.map
+//# sourceMappingURL=button-D_tzwFGJ.d.cts.map

package/dist/{button-CbUzKqWI.d.ts → button-NsFoJEG0.d.ts}

@@ -1,13 +1,13 @@
-import * as react_jsx_runtime48 from "react/jsx-runtime";
+import * as react_jsx_runtime52 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
-import * as class_variance_authority_types1 from "class-variance-authority/types";
+import * as class_variance_authority_types2 from "class-variance-authority/types";
 
 //#region packages/components/ui/button.d.ts
 declare const buttonVariants: (props?: ({
   variant?: "default" | "outline" | "ghost" | "link" | null | undefined;
   color?: "muted" | "primary" | "secondary" | "success" | "important" | "info" | "warning" | "danger" | null | undefined;
   size?: "sm" | "lg" | "default" | "icon" | null | undefined;
-} & class_variance_authority_types1.ClassProp) | undefined) => string;
+} & class_variance_authority_types2.ClassProp) | undefined) => string;
 declare function Button({
   className,
   variant,
@@ -20,7 +20,7 @@ declare function Button({
 }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
   asChild?: boolean;
   isLoading?: boolean;
-}): react_jsx_runtime48.JSX.Element;
+}): react_jsx_runtime52.JSX.Element;
 //#endregion
 export { Button, buttonVariants };
-//# sourceMappingURL=button-CbUzKqWI.d.ts.map
+//# sourceMappingURL=button-NsFoJEG0.d.ts.map

package/dist/{command-rcA08Vgu.d.ts → command-7NgITO2I.d.ts}

@@ -1,12 +1,12 @@
-import { Dialog } from "./dialog-BOjG_Rwt.js";
-import * as react_jsx_runtime115 from "react/jsx-runtime";
+import { Dialog } from "./dialog-BciL0byt.js";
+import * as react_jsx_runtime61 from "react/jsx-runtime";
 import { Command } from "cmdk";
 
 //#region packages/components/ui/command.d.ts
 declare function Command$1({
   className,
   ...props
-}: React.ComponentProps<typeof Command>): react_jsx_runtime115.JSX.Element;
+}: React.ComponentProps<typeof Command>): react_jsx_runtime61.JSX.Element;
 declare function CommandDialog({
   title,
   description,
@@ -19,34 +19,34 @@ declare function CommandDialog({
   description?: string;
   className?: string;
   showCloseButton?: boolean;
-}): react_jsx_runtime115.JSX.Element;
+}): react_jsx_runtime61.JSX.Element;
 declare function CommandInput({
   className,
   ...props
-}: React.ComponentProps<typeof Command.Input>): react_jsx_runtime115.JSX.Element;
+}: React.ComponentProps<typeof Command.Input>): react_jsx_runtime61.JSX.Element;
 declare function CommandList({
   className,
   ...props
-}: React.ComponentProps<typeof Command.List>): react_jsx_runtime115.JSX.Element;
+}: React.ComponentProps<typeof Command.List>): react_jsx_runtime61.JSX.Element;
 declare function CommandEmpty({
   ...props
-}: React.ComponentProps<typeof Command.Empty>): react_jsx_runtime115.JSX.Element;
+}: React.ComponentProps<typeof Command.Empty>): react_jsx_runtime61.JSX.Element;
 declare function CommandGroup({
   className,
   ...props
-}: React.ComponentProps<typeof Command.Group>): react_jsx_runtime115.JSX.Element;
+}: React.ComponentProps<typeof Command.Group>): react_jsx_runtime61.JSX.Element;
 declare function CommandSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof Command.Separator>): react_jsx_runtime115.JSX.Element;
+}: React.ComponentProps<typeof Command.Separator>): react_jsx_runtime61.JSX.Element;
 declare function CommandItem({
   className,
   ...props
-}: React.ComponentProps<typeof Command.Item>): react_jsx_runtime115.JSX.Element;
+}: React.ComponentProps<typeof Command.Item>): react_jsx_runtime61.JSX.Element;
 declare function CommandShortcut({
   className,
   ...props
-}: React.ComponentProps<'span'>): react_jsx_runtime115.JSX.Element;
+}: React.ComponentProps<'span'>): react_jsx_runtime61.JSX.Element;
 //#endregion
 export { Command$1 as Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
-//# sourceMappingURL=command-rcA08Vgu.d.ts.map
+//# sourceMappingURL=command-7NgITO2I.d.ts.map

package/dist/{command-BjYoQgjB.d.cts → command-HP5LITqM.d.cts}

@@ -1,12 +1,12 @@
-import { Dialog } from "./dialog-1Rot05ly.cjs";
-import * as react_jsx_runtime193 from "react/jsx-runtime";
+import { Dialog } from "./dialog-DdcYSxA2.cjs";
+import * as react_jsx_runtime172 from "react/jsx-runtime";
 import { Command } from "cmdk";
 
 //#region packages/components/ui/command.d.ts
 declare function Command$1({
   className,
   ...props
-}: React.ComponentProps<typeof Command>): react_jsx_runtime193.JSX.Element;
+}: React.ComponentProps<typeof Command>): react_jsx_runtime172.JSX.Element;
 declare function CommandDialog({
   title,
   description,
@@ -19,34 +19,34 @@ declare function CommandDialog({
   description?: string;
   className?: string;
   showCloseButton?: boolean;
-}): react_jsx_runtime193.JSX.Element;
+}): react_jsx_runtime172.JSX.Element;
 declare function CommandInput({
   className,
   ...props
-}: React.ComponentProps<typeof Command.Input>): react_jsx_runtime193.JSX.Element;
+}: React.ComponentProps<typeof Command.Input>): react_jsx_runtime172.JSX.Element;
 declare function CommandList({
   className,
   ...props
-}: React.ComponentProps<typeof Command.List>): react_jsx_runtime193.JSX.Element;
+}: React.ComponentProps<typeof Command.List>): react_jsx_runtime172.JSX.Element;
 declare function CommandEmpty({
   ...props
-}: React.ComponentProps<typeof Command.Empty>): react_jsx_runtime193.JSX.Element;
+}: React.ComponentProps<typeof Command.Empty>): react_jsx_runtime172.JSX.Element;
 declare function CommandGroup({
   className,
   ...props
-}: React.ComponentProps<typeof Command.Group>): react_jsx_runtime193.JSX.Element;
+}: React.ComponentProps<typeof Command.Group>): react_jsx_runtime172.JSX.Element;
 declare function CommandSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof Command.Separator>): react_jsx_runtime193.JSX.Element;
+}: React.ComponentProps<typeof Command.Separator>): react_jsx_runtime172.JSX.Element;
 declare function CommandItem({
   className,
   ...props
-}: React.ComponentProps<typeof Command.Item>): react_jsx_runtime193.JSX.Element;
+}: React.ComponentProps<typeof Command.Item>): react_jsx_runtime172.JSX.Element;
 declare function CommandShortcut({
   className,
   ...props
-}: React.ComponentProps<'span'>): react_jsx_runtime193.JSX.Element;
+}: React.ComponentProps<'span'>): react_jsx_runtime172.JSX.Element;
 //#endregion
 export { Command$1 as Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
-//# sourceMappingURL=command-BjYoQgjB.d.cts.map
+//# sourceMappingURL=command-HP5LITqM.d.cts.map

package/dist/data-display/empty.d.cts

@@ -1,7 +1,7 @@
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region packages/components/data-display/empty.d.ts
-declare const EmptyDisplay: () => react_jsx_runtime12.JSX.Element;
+declare const EmptyDisplay: () => react_jsx_runtime16.JSX.Element;
 //#endregion
 export { EmptyDisplay };
 //# sourceMappingURL=empty.d.cts.map