@vlrc-fe/components 1.0.0

package/README.md

@@ -0,0 +1,193 @@
+# @vlrc-fe/components
+
+---
+ai_package_metadata:
+  package_name: "@vlrc-fe/components"
+  version: "workspace:*"
+  conventions:
+    import_hygiene:
+      main_app: "Do NOT manually import. Let Vite auto-import handle it (src/types/auto-imports.d.ts)."
+      local_packages: "Always use explicit relative or workspace imports. Packages compile without auto-imports."
+    component_rules:
+      props_typing: "Always declare props inline in the component signature. Avoid standalone interface/type Props for local components."
+      wrapper_preference: "Always prefer Select and MultiSelect wrapper components over Radix UI/Shadcn primitives."
+---
+
+Reusable, optimized, and tree-shaken UI components built on top of **React 19**, **Tailwind CSS**, and **Radix UI/Shadcn** primitives for the VLRC project monorepo.
+
+> [!IMPORTANT]
+> **AUTO-IMPORT CONVENTION**: In the main web application (`src/`), **do not write explicit import statements** for any components in this package. They are dynamically parsed and registered by Vite into `src/types/auto-imports.d.ts`.
+> **EXPLICIT PACKAGE IMPORTS**: Inside independent packages (like `packages/components` or `packages/hooks`), **always** write explicit imports because packages are compiled standalone using `tsc`.
+
+---
+
+## 📚 Agent & Codex Skill Reference
+
+This package is fully mapped and integrated with the custom **[platform-core-components Agent Skill](file:///Users/lvtruong/personal/vlrc/.agent/skills/platform-core-components/SKILL.md)**. When working inside this package or utilizing these components, refer to these segmented reference files:
+1. **[Shadcn + TanStack DataTable Composition Guide](file:///Users/lvtruong/personal/vlrc/.agent/skills/platform-core-components/references/datatable.md)**
+2. **[Form Containers & FormItem/FormBase Layouts Specification](file:///Users/lvtruong/personal/vlrc/.agent/skills/platform-core-components/references/forms.md)**
+3. **[Custom Form Fields & Inputs API Manual](file:///Users/lvtruong/personal/vlrc/.agent/skills/platform-core-components/references/form-fields.md)**
+4. **[Dialogs, ConfirmModal & useModalState Bindings](file:///Users/lvtruong/personal/vlrc/.agent/skills/platform-core-components/references/modals.md)**
+5. **[Unified Graphic Icons Registry Guidelines](file:///Users/lvtruong/personal/vlrc/.agent/skills/platform-core-components/references/icons.md)**
+
+---
+
+## 📝 1. Shadcn Form Item & RHF Integration (`FormBase` & `FormItem`)
+
+Form fields inside this repository inherit a highly structured validation wrapper component called `FormBase`. It bridges the standard **react-hook-form** controller with custom-wrapped **Shadcn UI Form Item** layouts.
+
+### 1.1 Structural Layout & Features
+When a field is rendered, `FormBase` automatically builds the following Shadcn structure:
+1. **`<FormItem>` Container**: The primary layout block handling spacing. Supports:
+   - **Vertical (Default)**: Normal form inputs stacked sequentially.
+   - **Horizontal (`horizontal={true}`)**: Arranges labels and inputs side-by-side using unified grid properties. Perfect for dense settings panels.
+   - **Control First (`controlFirst={true}`)**: Renders the input control widget *before* the text label (used automatically by `FormCheckbox` and `FormRadioGroup` options).
+2. **`<FieldLabel>`**: Displays the text label tied to the input via `htmlFor`.
+   - **Automatic required asterisk**: If the field rules specify `required: true` (or a string), `FormBase` automatically appends a red asterisk `<span className="text-red-500">*</span>` to the label.
+3. **`<FieldDescription>`**: Displays supplementary description nodes or helper text.
+4. **`<FieldError>`**: Listens to active RHF validation errors. If a field fails validation checks, the error message is instantly rendered below the input with appropriate red typography, omitting the need for developers to manually write error flags.
+
+### 1.2 How `<Form>` Works
+
+`<Form>` is literally `FormProvider` from `react-hook-form`. It provides form context so child components can use `useFormContext()`.
+
+**Pattern**: Call `useForm()` → spread into `<Form {...form}>` → wrap a native `<form>` → fields receive `form.control`.
+
+**Validation**: Done exclusively via `rules` prop on each field (standard RHF `RegisterOptions`). No Zod schemas.
+
+```tsx
+const { control, handleSubmit, reset } = useForm<LearningManagement.Course>();
+
+return (
+  <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+    <FormInput control={control} name="title" label="Tiêu đề" rules={{ required: true }} />
+    <FormCheckbox control={control} name="isActive" label="Hoạt động" />
+    <Button type="submit">Lưu</Button>
+  </form>
+);
+```
+
+When splitting into child components, wrap with `<Form {...form}>` and use `useFormContext()` inside children to access `control` without prop drilling.
+
+---
+
+## 📊 2. DataTable (Shadcn + TanStack Table v8)
+
+The `DataTable` component provides a rich, responsive, and performance-optimized data grid built on top of **Shadcn table structures** and **TanStack Table**.
+
+### 2.1 API Definition
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `columns` | `ColumnDef<T>[]` | - | **(Required)** TanStack-compliant column definitions. |
+| `data` | `T[]` | - | **(Required)** Row data source array. |
+| `isLoading` | `boolean` | `false` | Renders a custom glass-effect loader spinner overlay. |
+| `pageSize` | `number` | `10` | Rows displayed per page. |
+| `searchPlaceholder` | `string` | `'Tìm kiếm...'` | Search input placeholder. |
+| `searchKey` | `string` | - | Accessor key for client-side search filtering. |
+
+### 2.2 Standard Column Creators
+To maintain UI consistency and eliminate copy-paste boilerplate, use the built-in column creators:
+- **Checkbox Row Selection**: `createSelectionColumn<T>()` - Automatically inserts checkbox controls in headers and rows to select records.
+- **Expandable Children Row caret**: `createExpanderColumn<T>()` - Inserts caret icons to toggle nested layouts.
+- **Actions Panel Column**: `createRowActionsColumn<T>({ renderActions })` - Standardizes spacing for edit, view, and delete row action buttons.
+
+```tsx
+const columns = useMemo(() => [
+  createSelectionColumn<CourseRow>(),
+  {
+    accessorKey: 'name',
+    header: 'Tên bài học',
+    cell: ({ row }) => <span className="font-medium">{row.original.name}</span>
+  },
+  createRowActionsColumn<CourseRow>({
+    renderActions: ({ row }) => <Button onClick={() => handleEdit(row.original)}>Sửa</Button>
+  })
+], []);
+```
+
+---
+
+## 📦 3. Specialized Custom Form Widgets
+
+These pre-wrapped components are fully integrated with `FormBase` and automatically wire up under a `<Form>` container:
+
+### 3.1 `FormSelect` (Single & Multi Mode)
+Popover-based select box featuring real-time searchable keyword filters and custom item templates.
+```tsx
+<FormSelect
+  control={control}
+  name="level"
+  label="Trình độ"
+  options={[
+    { value: 'A1', label: 'Cơ bản (A1)' },
+    { value: 'B2', label: 'Nâng cao (B2)' }
+  ]}
+/>
+```
+
+### 3.2 `FormMultiSelect`
+A checkbox popover panel that renders selected elements as removable tag pills inside the trigger button.
+```tsx
+<FormMultiSelect
+  control={control}
+  name="topics"
+  label="Chủ đề chính"
+  options={[{ value: 'grammar', label: 'Ngữ pháp' }]}
+  showSelectAll
+/>
+```
+
+### 3.3 `FormDatePicker`
+Calendar selector supporting single date picking, time picking (`showTime`), month selection, and full date range queries (`isRangePicker: true`).
+```tsx
+<FormDatePicker
+  control={control}
+  name="schedule"
+  label="Lịch khai giảng"
+  isRangePicker={true}
+/>
+```
+
+### 3.4 `FormNumberInput`
+Renders currency and number masks using `react-number-format`. Features increment/decrement steppers.
+```tsx
+<FormNumberInput
+  control={control}
+  name="price"
+  label="Học phí"
+  thousandSeparator=","
+  suffix=" VND"
+/>
+```
+
+### 3.5 `FormFileUpload`
+Advanced file dropzone and uploader supporting avatar rendering (`variant="avatar"`) and S3-based immediate uploading with progress bars.
+```tsx
+<FormFileUpload
+  control={control}
+  name="avatar"
+  label="Ảnh đại diện"
+  variant="avatar"
+  autoUpload
+  uploadFile={async (file) => uploadToS3(file)}
+/>
+```
+
+---
+
+## 🎨 4. Direct Wrappers & Design Tokens
+
+Outside of active form contexts, you can directly import these components:
+- **`Select` & `MultiSelect`**: Standard dropdown triggers.
+- **`ConfirmModal` & `Modal`**: Dialog boxes.
+- **`Icons`**: High-performance graphic library wrapper (Lucide React registry). Banned from importing directly in `src/` to prevent weight overheads.
+- **`Button` / `Card` / `Badge`**: Semantic shadcn styling elements under standard Tailwind tokens.
+
+---
+
+## 🛠 Package Scripts
+
+Managed by Lerna and PNPM Workspaces:
+- Build package: `pnpm build`
+- Version package: `pnpm version:packages`
+- Publish package: `pnpm publish:packages`

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./index3.cjs"),t=require("./index5.cjs"),n=require("./index6.cjs"),r=require("./index7.cjs"),i=require("./index8.cjs"),a=require("./index9.cjs"),o=require("./index10.cjs"),s=require("./index11.cjs"),c=require("./index12.cjs"),l=require("./index13.cjs"),u=require("./index14.cjs"),d=require("./index15.cjs"),f=require("./index16.cjs"),p=require("./index17.cjs"),m=require("./index19.cjs"),h=require("./index20.cjs"),g=require("./index21.cjs"),_=require("./index22.cjs"),v=require("./index23.cjs"),y=require("./index24.cjs"),b=require("./index25.cjs"),x=require("./index26.cjs"),S=require("./index27.cjs"),C=require("./index28.cjs"),w=require("./index29.cjs"),T=require("./index30.cjs"),E=require("./index31.cjs"),D=require("./index32.cjs"),O=require("./index33.cjs"),k=require("./index39.cjs"),A=require("./index41.cjs"),j=require("./index42.cjs"),M=require("./index43.cjs"),N=require("./index48.cjs"),P=require("./index49.cjs"),F=require("./index97.cjs"),I=require("./index101.cjs"),L=require("./index104.cjs"),R=require("./index105.cjs"),z=require("./index107.cjs"),B=require("./index109.cjs");exports.Accordion=t.Accordion,exports.AccordionContent=t.AccordionContent,exports.AccordionItem=t.AccordionItem,exports.AccordionTrigger=t.AccordionTrigger,exports.Badge=n.Badge,exports.Button=r.Button,exports.Calendar=i.Calendar,exports.CalendarDayButton=i.CalendarDayButton,exports.Card=a.Card,exports.CardAction=a.CardAction,exports.CardContent=a.CardContent,exports.CardDescription=a.CardDescription,exports.CardFooter=a.CardFooter,exports.CardHeader=a.CardHeader,exports.CardTitle=a.CardTitle,exports.Checkbox=o.Checkbox,exports.Clear=p.FileUploadClear,exports.FileUploadClear=p.FileUploadClear,exports.Command=c.Command,exports.CommandDialog=c.CommandDialog,exports.CommandEmpty=c.CommandEmpty,exports.CommandGroup=c.CommandGroup,exports.CommandInput=c.CommandInput,exports.CommandItem=c.CommandItem,exports.CommandList=c.CommandList,exports.CommandSeparator=c.CommandSeparator,exports.CommandShortcut=c.CommandShortcut,exports.ConfirmModal=e,exports.ConfirmationDialog=e,exports.DataTable=k,exports.Dialog=s.Dialog,exports.DialogClose=s.DialogClose,exports.DialogContent=s.DialogContent,exports.DialogDescription=s.DialogDescription,exports.DialogFooter=s.DialogFooter,exports.DialogHeader=s.DialogHeader,exports.DialogOverlay=s.DialogOverlay,exports.DialogPortal=s.DialogPortal,exports.DialogTitle=s.DialogTitle,exports.DialogTrigger=s.DialogTrigger,exports.DropdownMenu=l.DropdownMenu,exports.DropdownMenuCheckboxItem=l.DropdownMenuCheckboxItem,exports.DropdownMenuContent=l.DropdownMenuContent,exports.DropdownMenuGroup=l.DropdownMenuGroup,exports.DropdownMenuItem=l.DropdownMenuItem,exports.DropdownMenuLabel=l.DropdownMenuLabel,exports.DropdownMenuPortal=l.DropdownMenuPortal,exports.DropdownMenuRadioGroup=l.DropdownMenuRadioGroup,exports.DropdownMenuRadioItem=l.DropdownMenuRadioItem,exports.DropdownMenuSeparator=l.DropdownMenuSeparator,exports.DropdownMenuShortcut=l.DropdownMenuShortcut,exports.DropdownMenuSub=l.DropdownMenuSub,exports.DropdownMenuSubContent=l.DropdownMenuSubContent,exports.DropdownMenuSubTrigger=l.DropdownMenuSubTrigger,exports.DropdownMenuTrigger=l.DropdownMenuTrigger,exports.Dropzone=p.FileUploadDropzone,exports.FileUploadDropzone=p.FileUploadDropzone,exports.Field=f.Field,exports.FieldContent=f.FieldContent,exports.FieldDescription=f.FieldDescription,exports.FieldError=f.FieldError,exports.FieldGroup=f.FieldGroup,exports.FieldLabel=f.FieldLabel,exports.FieldLegend=f.FieldLegend,exports.FieldSeparator=f.FieldSeparator,exports.FieldSet=f.FieldSet,exports.FieldTitle=f.FieldTitle,exports.FileUpload=p.FileUploadRoot,exports.Root=p.FileUploadRoot,exports.FileUploadItem=p.FileUploadItem,exports.FileUploadItemDelete=p.FileUploadItemDelete,exports.ItemDelete=p.FileUploadItemDelete,exports.FileUploadItemMetadata=p.FileUploadItemMetadata,exports.ItemMetadata=p.FileUploadItemMetadata,exports.FileUploadItemPreview=p.FileUploadItemPreview,exports.ItemPreview=p.FileUploadItemPreview,exports.FileUploadItemProgress=p.FileUploadItemProgress,exports.ItemProgress=p.FileUploadItemProgress,exports.FileUploadList=p.FileUploadList,exports.List=p.FileUploadList,exports.FileUploadTrigger=p.FileUploadTrigger,exports.Trigger=p.FileUploadTrigger,exports.Form=m.Form,exports.FormCheckbox=M.FormCheckbox,exports.FormControl=m.FormControl,exports.FormDatePicker=F,exports.FormDescription=m.FormDescription,exports.FormField=m.FormField,exports.FormFileUpload=B,exports.FormInput=M.FormInput,exports.FormItem=m.FormItem,exports.FormLabel=m.FormLabel,exports.FormMessage=m.FormMessage,exports.FormMultiSelect=P,exports.FormNumberInput=I.FormNumberInput,exports.FormRadioGroup=z.FormRadio,exports.FormSelect=R.FormSelect,exports.FormSimpleSelect=M.FormSimpleSelect,exports.FormTextarea=M.FormTextarea,exports.Icons=j.Icons,exports.Input=h.Input,exports.Item=g.Item,exports.ItemActions=g.ItemActions,exports.ItemContent=g.ItemContent,exports.ItemDescription=g.ItemDescription,exports.ItemFooter=g.ItemFooter,exports.ItemGroup=g.ItemGroup,exports.ItemHeader=g.ItemHeader,exports.ItemMedia=g.ItemMedia,exports.ItemSeparator=g.ItemSeparator,exports.ItemTitle=g.ItemTitle,exports.Label=u.Label,exports.Modal=D.Modal,exports.MultiSelect=N,exports.Popover=_.Popover,exports.PopoverAnchor=_.PopoverAnchor,exports.PopoverContent=_.PopoverContent,exports.PopoverTrigger=_.PopoverTrigger,exports.Progress=v.Progress,exports.RadioGroup=y.RadioGroup,exports.RadioGroupItem=y.RadioGroupItem,exports.ScrollArea=b.ScrollArea,exports.ScrollBar=b.ScrollBar,exports.Select=L.BaseSelect,exports.SelectContent=x.SelectContent,exports.SelectGroup=x.SelectGroup,exports.SelectItem=x.SelectItem,exports.SelectLabel=x.SelectLabel,exports.SelectScrollDownButton=x.SelectScrollDownButton,exports.SelectScrollUpButton=x.SelectScrollUpButton,exports.SelectSeparator=x.SelectSeparator,exports.SelectTrigger=x.SelectTrigger,exports.SelectValue=x.SelectValue,exports.Separator=d.Separator,exports.Spinner=C.Spinner,exports.Table=w.Table,exports.TableBody=w.TableBody,exports.TableCaption=w.TableCaption,exports.TableCell=w.TableCell,exports.TableFooter=w.TableFooter,exports.TableHead=w.TableHead,exports.TableHeader=w.TableHeader,exports.TableRow=w.TableRow,exports.Textarea=T.Textarea,exports.Toaster=S.Toaster,exports.Tooltip=E.Tooltip,exports.TooltipContent=E.TooltipContent,exports.TooltipProvider=E.TooltipProvider,exports.TooltipTrigger=E.TooltipTrigger,exports.badgeVariants=n.badgeVariants,exports.buttonVariants=r.buttonVariants,exports.cardVariants=a.cardVariants,exports.createExpanderColumn=A.createExpanderColumn,exports.createRowActionsColumn=A.createRowActionsColumn,exports.createSelectionColumn=A.createSelectionColumn,exports.lazyLoad=O.lazyLoad,exports.useFileUpload=p.useStore,exports.useFormField=m.useFormField;

package/dist/index.js

@@ -0,0 +1,42 @@
+import e from "./index2.js";
+import { Accordion as ee, AccordionContent as te, AccordionItem as ne, AccordionTrigger as re } from "./index4.js";
+import { Badge as ie, badgeVariants as ae } from "./index5.js";
+import { Button as oe, buttonVariants as se } from "./index6.js";
+import { Calendar as ce, CalendarDayButton as le } from "./index7.js";
+import { Card as ue, CardAction as t, CardContent as n, CardDescription as r, CardFooter as i, CardHeader as a, CardTitle as o, cardVariants as s } from "./index8.js";
+import { Checkbox as c } from "./index9.js";
+import { Dialog as l, DialogClose as u, DialogContent as d, DialogDescription as f, DialogFooter as p, DialogHeader as m, DialogOverlay as h, DialogPortal as g, DialogTitle as _, DialogTrigger as v } from "./index10.js";
+import { Command as y, CommandDialog as b, CommandEmpty as x, CommandGroup as S, CommandInput as C, CommandItem as w, CommandList as T, CommandSeparator as E, CommandShortcut as D } from "./index11.js";
+import { DropdownMenu as O, DropdownMenuCheckboxItem as k, DropdownMenuContent as A, DropdownMenuGroup as j, DropdownMenuItem as M, DropdownMenuLabel as N, DropdownMenuPortal as P, DropdownMenuRadioGroup as F, DropdownMenuRadioItem as I, DropdownMenuSeparator as L, DropdownMenuShortcut as R, DropdownMenuSub as z, DropdownMenuSubContent as B, DropdownMenuSubTrigger as V, DropdownMenuTrigger as H } from "./index12.js";
+import { Label as U } from "./index13.js";
+import { Separator as de } from "./index14.js";
+import { Field as fe, FieldContent as pe, FieldDescription as me, FieldError as he, FieldGroup as ge, FieldLabel as _e, FieldLegend as ve, FieldSeparator as ye, FieldSet as be, FieldTitle as xe } from "./index15.js";
+import { FileUploadClear as W, FileUploadDropzone as G, FileUploadItem as Se, FileUploadItemDelete as K, FileUploadItemMetadata as q, FileUploadItemPreview as J, FileUploadItemProgress as Y, FileUploadList as X, FileUploadRoot as Z, FileUploadTrigger as Q, useStore as Ce } from "./index16.js";
+import { Form as we, FormControl as Te, FormDescription as Ee, FormField as De, FormItem as Oe, FormLabel as ke, FormMessage as Ae, useFormField as je } from "./index18.js";
+import { Input as Me } from "./index19.js";
+import { Item as $, ItemActions as Ne, ItemContent as Pe, ItemDescription as Fe, ItemFooter as Ie, ItemGroup as Le, ItemHeader as Re, ItemMedia as ze, ItemSeparator as Be, ItemTitle as Ve } from "./index20.js";
+import { Popover as He, PopoverAnchor as Ue, PopoverContent as We, PopoverTrigger as Ge } from "./index21.js";
+import { Progress as Ke } from "./index22.js";
+import { RadioGroup as qe, RadioGroupItem as Je } from "./index23.js";
+import { ScrollArea as Ye, ScrollBar as Xe } from "./index24.js";
+import { SelectContent as Ze, SelectGroup as Qe, SelectItem as $e, SelectLabel as et, SelectScrollDownButton as tt, SelectScrollUpButton as nt, SelectSeparator as rt, SelectTrigger as it, SelectValue as at } from "./index25.js";
+import { Toaster as ot } from "./index26.js";
+import { Spinner as st } from "./index27.js";
+import { Table as ct, TableBody as lt, TableCaption as ut, TableCell as dt, TableFooter as ft, TableHead as pt, TableHeader as mt, TableRow as ht } from "./index28.js";
+import { Textarea as gt } from "./index29.js";
+import { Tooltip as _t, TooltipContent as vt, TooltipProvider as yt, TooltipTrigger as bt } from "./index30.js";
+import { Modal as xt } from "./index31.js";
+import { lazyLoad as St } from "./index32.js";
+import Ct from "./index38.js";
+import { createExpanderColumn as wt, createRowActionsColumn as Tt, createSelectionColumn as Et } from "./index40.js";
+import { Icons as Dt } from "./index41.js";
+import { FormCheckbox as Ot, FormInput as kt, FormSimpleSelect as At, FormTextarea as jt } from "./index42.js";
+import Mt from "./index47.js";
+import Nt from "./index48.js";
+import Pt from "./index96.js";
+import { FormNumberInput as Ft } from "./index100.js";
+import { BaseSelect as It } from "./index103.js";
+import { FormSelect as Lt } from "./index104.js";
+import { FormRadio as Rt } from "./index106.js";
+import zt from "./index108.js";
+export { ee as Accordion, te as AccordionContent, ne as AccordionItem, re as AccordionTrigger, ie as Badge, oe as Button, ce as Calendar, le as CalendarDayButton, ue as Card, t as CardAction, n as CardContent, r as CardDescription, i as CardFooter, a as CardHeader, o as CardTitle, c as Checkbox, W as Clear, W as FileUploadClear, y as Command, b as CommandDialog, x as CommandEmpty, S as CommandGroup, C as CommandInput, w as CommandItem, T as CommandList, E as CommandSeparator, D as CommandShortcut, e as ConfirmModal, e as ConfirmationDialog, Ct as DataTable, l as Dialog, u as DialogClose, d as DialogContent, f as DialogDescription, p as DialogFooter, m as DialogHeader, h as DialogOverlay, g as DialogPortal, _ as DialogTitle, v as DialogTrigger, O as DropdownMenu, k as DropdownMenuCheckboxItem, A as DropdownMenuContent, j as DropdownMenuGroup, M as DropdownMenuItem, N as DropdownMenuLabel, P as DropdownMenuPortal, F as DropdownMenuRadioGroup, I as DropdownMenuRadioItem, L as DropdownMenuSeparator, R as DropdownMenuShortcut, z as DropdownMenuSub, B as DropdownMenuSubContent, V as DropdownMenuSubTrigger, H as DropdownMenuTrigger, G as Dropzone, G as FileUploadDropzone, fe as Field, pe as FieldContent, me as FieldDescription, he as FieldError, ge as FieldGroup, _e as FieldLabel, ve as FieldLegend, ye as FieldSeparator, be as FieldSet, xe as FieldTitle, Z as FileUpload, Z as Root, Se as FileUploadItem, K as FileUploadItemDelete, K as ItemDelete, q as FileUploadItemMetadata, q as ItemMetadata, J as FileUploadItemPreview, J as ItemPreview, Y as FileUploadItemProgress, Y as ItemProgress, X as FileUploadList, X as List, Q as FileUploadTrigger, Q as Trigger, we as Form, Ot as FormCheckbox, Te as FormControl, Pt as FormDatePicker, Ee as FormDescription, De as FormField, zt as FormFileUpload, kt as FormInput, Oe as FormItem, ke as FormLabel, Ae as FormMessage, Nt as FormMultiSelect, Ft as FormNumberInput, Rt as FormRadioGroup, Lt as FormSelect, At as FormSimpleSelect, jt as FormTextarea, Dt as Icons, Me as Input, $ as Item, Ne as ItemActions, Pe as ItemContent, Fe as ItemDescription, Ie as ItemFooter, Le as ItemGroup, Re as ItemHeader, ze as ItemMedia, Be as ItemSeparator, Ve as ItemTitle, U as Label, xt as Modal, Mt as MultiSelect, He as Popover, Ue as PopoverAnchor, We as PopoverContent, Ge as PopoverTrigger, Ke as Progress, qe as RadioGroup, Je as RadioGroupItem, Ye as ScrollArea, Xe as ScrollBar, It as Select, Ze as SelectContent, Qe as SelectGroup, $e as SelectItem, et as SelectLabel, tt as SelectScrollDownButton, nt as SelectScrollUpButton, rt as SelectSeparator, it as SelectTrigger, at as SelectValue, de as Separator, st as Spinner, ct as Table, lt as TableBody, ut as TableCaption, dt as TableCell, ft as TableFooter, pt as TableHead, mt as TableHeader, ht as TableRow, gt as Textarea, ot as Toaster, _t as Tooltip, vt as TooltipContent, yt as TooltipProvider, bt as TooltipTrigger, ae as badgeVariants, se as buttonVariants, s as cardVariants, wt as createExpanderColumn, Tt as createRowActionsColumn, Et as createSelectionColumn, St as lazyLoad, Ce as useFileUpload, je as useFormField };

package/dist/index10.cjs

@@ -0,0 +1 @@
+const e=require("./index2.cjs"),t=require("./index4.cjs");let n=require("lucide-react"),r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime"),a=require("@radix-ui/react-checkbox");a=e.__toESM(a,1);function o({className:e,...r}){return(0,i.jsx)(a.Root,{"data-slot":`checkbox`,className:t.cn(`peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50`,e),...r,children:(0,i.jsx)(a.Indicator,{"data-slot":`checkbox-indicator`,className:`grid place-content-center text-current transition-none`,children:(0,i.jsx)(n.CheckIcon,{className:`size-3.5`})})})}exports.Checkbox=o;

package/dist/index10.js

@@ -0,0 +1,85 @@
+import { cn as e } from "./index3.js";
+import { XIcon as t } from "lucide-react";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-dialog";
+//#region src/ui/dialog.tsx
+function a({ ...e }) {
+	return /* @__PURE__ */ n(i.Root, {
+		"data-slot": "dialog",
+		...e
+	});
+}
+function o({ ...e }) {
+	return /* @__PURE__ */ n(i.Trigger, {
+		"data-slot": "dialog-trigger",
+		...e
+	});
+}
+function s({ ...e }) {
+	return /* @__PURE__ */ n(i.Portal, {
+		"data-slot": "dialog-portal",
+		...e
+	});
+}
+function c({ ...e }) {
+	return /* @__PURE__ */ n(i.Close, {
+		"data-slot": "dialog-close",
+		...e
+	});
+}
+function l({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Overlay, {
+		"data-slot": "dialog-overlay",
+		className: e("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", t),
+		...r
+	});
+}
+function u({ className: a, children: o, showCloseButton: c = !0, ...u }) {
+	return /* @__PURE__ */ r(s, {
+		"data-slot": "dialog-portal",
+		children: [/* @__PURE__ */ n(l, {}), /* @__PURE__ */ r(i.Content, {
+			"data-slot": "dialog-content",
+			className: e("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg", a),
+			...u,
+			children: [o, c && /* @__PURE__ */ r(i.Close, {
+				"data-slot": "dialog-close",
+				className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				children: [/* @__PURE__ */ n(t, {}), /* @__PURE__ */ n("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
+			})]
+		})]
+	});
+}
+function d({ className: t, ...r }) {
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "dialog-header",
+		className: e("flex flex-col gap-2 text-center sm:text-left", t),
+		...r
+	});
+}
+function f({ className: t, ...r }) {
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "dialog-footer",
+		className: e("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", t),
+		...r
+	});
+}
+function p({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Title, {
+		"data-slot": "dialog-title",
+		className: e("text-lg leading-none font-semibold", t),
+		...r
+	});
+}
+function m({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Description, {
+		"data-slot": "dialog-description",
+		className: e("text-muted-foreground text-sm", t),
+		...r
+	});
+}
+//#endregion
+export { a as Dialog, c as DialogClose, u as DialogContent, m as DialogDescription, f as DialogFooter, d as DialogHeader, l as DialogOverlay, s as DialogPortal, p as DialogTitle, o as DialogTrigger };

package/dist/index100.cjs

@@ -0,0 +1 @@
+const e=require("./index4.cjs");var t=[`[appearance:textfield]`,`[&::-webkit-outer-spin-button]:appearance-none`,`[&::-webkit-inner-spin-button]:appearance-none`,`rounded-r-none`,`relative`];function n({rules:n,inputClassName:r,stepper:i,min:a,max:o,onChange:s,passthroughProps:c}){let l=n?.required!==void 0&&n.required!==!1;return{isRequired:l,enhancedRules:(()=>{if(!n)return n;let e={...n};return l&&typeof e.required!=`string`&&typeof e.required!=`object`?e.required=`Trường này là bắt buộc`:typeof e.required==`object`&&!e.required.message&&(e.required={...e.required,message:`Trường này là bắt buộc`}),e})(),numericClass:e.cn(t,r),getHandlers:({currentValue:e,field:t})=>{let n=()=>{let n=Math.min((e??0)+i,o);t.onChange(n),s?.(n)},r=()=>{let n=Math.max((e??0)-i,a);t.onChange(n),s?.(n)};return{handleIncrement:n,handleDecrement:r,handleKeyDown:e=>{e.key===`ArrowUp`?(e.preventDefault(),n()):e.key===`ArrowDown`&&(e.preventDefault(),r()),c.onKeyDown&&c.onKeyDown(e)},handleBlur:()=>{let n=e;n!==void 0&&(n<a?(t.onChange(a),s?.(a)):n>o&&(t.onChange(o),s?.(o))),t.onBlur(),c.onBlur&&c.onBlur()},numericOnValueChange:e=>{let n=e.floatValue===void 0?void 0:e.floatValue;t.onChange(n),s?.(n)}}}}}exports.useFormNumberInput=n;

package/dist/index100.js

@@ -0,0 +1,65 @@
+import { cn as e } from "./index3.js";
+import { FormBase as t } from "./index42.js";
+import { NumericFormat as n } from "./index97.js";
+import { StepperControls as r } from "./index98.js";
+import { useFormNumberInput as i } from "./index99.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/Form/FormNumberInput/FormNumberInput.tsx
+function s({ control: s, name: c, label: l, stepper: u = 1, min: d = "0", max: f = "100", minValue: p = -Infinity, maxValue: m = Infinity, thousandSeparator: h, placeholder: g, fixedDecimalScale: _ = !1, decimalScale: v = 0, suffix: y, prefix: b, inputClassName: x, onChange: S, rules: C, description: w, horizontal: T, controlFirst: E, ...D }) {
+	let { enhancedRules: O, numericClass: k, getHandlers: A } = i({
+		min: p,
+		max: m,
+		rules: C,
+		inputClassName: x,
+		stepper: u,
+		onChange: S,
+		passthroughProps: D
+	});
+	return /* @__PURE__ */ a(t, {
+		control: s,
+		name: c,
+		label: l,
+		description: w,
+		rules: O,
+		horizontal: T,
+		controlFirst: E,
+		children: ({ id: t, "aria-invalid": i, ...s }) => {
+			let c = s.value, { handleIncrement: l, handleDecrement: u, handleKeyDown: x, handleBlur: S, numericOnValueChange: C } = A({
+				currentValue: c,
+				field: s
+			});
+			return /* @__PURE__ */ o("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ a(n, {
+					min: d,
+					max: f,
+					"aria-invalid": i,
+					value: c ?? "",
+					onValueChange: C,
+					thousandSeparator: h,
+					decimalScale: v,
+					fixedDecimalScale: _,
+					allowNegative: p < 0,
+					valueIsNumericString: !1,
+					onBlur: S,
+					suffix: y,
+					prefix: b,
+					placeholder: g || "0",
+					getInputRef: s.ref,
+					onKeyDown: x,
+					name: s.name,
+					...D,
+					id: t,
+					className: e(k, D.className)
+				}), /* @__PURE__ */ a(r, {
+					onIncrement: l,
+					onDecrement: u,
+					disableIncrement: c !== void 0 && c >= m,
+					disableDecrement: c !== void 0 && c <= p
+				})]
+			});
+		}
+	});
+}
+//#endregion
+export { s as FormNumberInput };

package/dist/index101.cjs

@@ -0,0 +1 @@
+const e=require("./index4.cjs"),t=require("./index43.cjs"),n=require("./index98.cjs"),r=require("./index99.cjs"),i=require("./index100.cjs");let a=require("react/jsx-runtime");function o({control:o,name:s,label:c,stepper:l=1,min:u=`0`,max:d=`100`,minValue:f=-1/0,maxValue:p=1/0,thousandSeparator:m,placeholder:h,fixedDecimalScale:g=!1,decimalScale:_=0,suffix:v,prefix:y,inputClassName:b,onChange:x,rules:S,description:C,horizontal:w,controlFirst:T,...E}){let{enhancedRules:D,numericClass:O,getHandlers:k}=i.useFormNumberInput({min:f,max:p,rules:S,inputClassName:b,stepper:l,onChange:x,passthroughProps:E});return(0,a.jsx)(t.FormBase,{control:o,name:s,label:c,description:C,rules:D,horizontal:w,controlFirst:T,children:({id:t,"aria-invalid":i,...o})=>{let s=o.value,{handleIncrement:c,handleDecrement:l,handleKeyDown:b,handleBlur:x,numericOnValueChange:S}=k({currentValue:s,field:o});return(0,a.jsxs)(`div`,{className:`flex items-center`,children:[(0,a.jsx)(n.NumericFormat,{min:u,max:d,"aria-invalid":i,value:s??``,onValueChange:S,thousandSeparator:m,decimalScale:_,fixedDecimalScale:g,allowNegative:f<0,valueIsNumericString:!1,onBlur:x,suffix:v,prefix:y,placeholder:h||`0`,getInputRef:o.ref,onKeyDown:b,name:o.name,...E,id:t,className:e.cn(O,E.className)}),(0,a.jsx)(r.StepperControls,{onIncrement:c,onDecrement:l,disableIncrement:s!==void 0&&s>=p,disableDecrement:s!==void 0&&s<=f})]})}})}exports.FormNumberInput=o;

package/dist/index101.js

@@ -0,0 +1,48 @@
+import { get as e, isNil as t } from "lodash-es";
+//#region src/Form/FormSelect/useFormSelect.ts
+function n(e) {
+	return e.isMulti === !0;
+}
+function r(r) {
+	let { options: i, injectOptions: a, placeholder: o = "Chọn...", description: s, disabled: c, isClearable: l = !0, isSearchable: u = !0, isLoading: d = !1, className: f, rules: p, onSearchTextChange: m, hasNextPage: h, isFetchingNextPage: g, fetchNextPage: _, maxTagCount: v = "responsive", tagRender: y, showSelectAll: b = !1 } = r, x = e(p, "required"), S = !t(x) && x !== !1, C = {
+		options: i,
+		injectOptions: a,
+		placeholder: o,
+		isClearable: l,
+		isSearchable: u,
+		isLoading: d,
+		className: f,
+		disabled: c,
+		onSearchTextChange: m,
+		hasNextPage: h,
+		isFetchingNextPage: g,
+		fetchNextPage: _,
+		maxTagCount: v,
+		tagRender: y,
+		showSelectAll: b
+	};
+	return {
+		isRequired: S,
+		description: s,
+		enhancedRules: (() => {
+			if (!p) return p;
+			let e = { ...p };
+			return S && typeof e.required != "string" && typeof e.required != "object" ? e.required = "Trường này là bắt buộc" : typeof e.required == "object" && !e.required.message && (e.required = {
+				...e.required,
+				message: "Trường này là bắt buộc"
+			}), e;
+		})(),
+		baseSelectProps: C,
+		isMulti: n(r),
+		createChangeHandlers: (e) => ({
+			onChangeMulti: (t) => {
+				e.onChange(t), n(r) && r.onChange && r.onChange(t);
+			},
+			onChangeSingle: (t) => {
+				e.onChange(t), !n(r) && r.onChange && r.onChange(t);
+			}
+		})
+	};
+}
+//#endregion
+export { r as useFormSelect };

package/dist/index102.cjs

@@ -0,0 +1 @@
+let e=require("lodash-es");function t(e){return e.isMulti===!0}function n(n){let{options:r,injectOptions:i,placeholder:a=`Chọn...`,description:o,disabled:s,isClearable:c=!0,isSearchable:l=!0,isLoading:u=!1,className:d,rules:f,onSearchTextChange:p,hasNextPage:m,isFetchingNextPage:h,fetchNextPage:g,maxTagCount:_=`responsive`,tagRender:v,showSelectAll:y=!1}=n,b=(0,e.get)(f,`required`),x=!(0,e.isNil)(b)&&b!==!1,S={options:r,injectOptions:i,placeholder:a,isClearable:c,isSearchable:l,isLoading:u,className:d,disabled:s,onSearchTextChange:p,hasNextPage:m,isFetchingNextPage:h,fetchNextPage:g,maxTagCount:_,tagRender:v,showSelectAll:y};return{isRequired:x,description:o,enhancedRules:(()=>{if(!f)return f;let e={...f};return x&&typeof e.required!=`string`&&typeof e.required!=`object`?e.required=`Trường này là bắt buộc`:typeof e.required==`object`&&!e.required.message&&(e.required={...e.required,message:`Trường này là bắt buộc`}),e})(),baseSelectProps:S,isMulti:t(n),createChangeHandlers:e=>({onChangeMulti:r=>{e.onChange(r),t(n)&&n.onChange&&n.onChange(r)},onChangeSingle:r=>{e.onChange(r),!t(n)&&n.onChange&&n.onChange(r)}})}}exports.useFormSelect=n;

package/dist/index102.js

@@ -0,0 +1,67 @@
+import { Badge as e } from "./index5.js";
+import { Tooltip as t, TooltipContent as n, TooltipProvider as r, TooltipTrigger as i } from "./index30.js";
+import { Icons as a } from "./index41.js";
+import { useEffect as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/Select/MultiSelectTags.tsx
+function d({ selectedOptions: d, maxTagCount: f = "responsive", onRemove: p, disabled: m, tagRender: h }) {
+	let g = s(null), [_, v] = c(d.length), [y, b] = c([]);
+	o(() => {
+		if (f === "responsive" && g.current) {
+			let e = g.current, t = e.offsetWidth - 60, n = 0, r = 0, i = Array.from(e.children);
+			for (let e = 0; e < i.length; e++) {
+				let a = i[e];
+				if (a.classList.contains("select-tag")) {
+					let e = a.offsetWidth + 4;
+					if (n + e <= t) n += e, r++;
+					else break;
+				}
+			}
+			r < d.length ? (v(Math.max(1, r - 1)), b(d.slice(Math.max(1, r - 1)))) : (v(d.length), b([]));
+		} else typeof f == "number" ? (v(Math.min(f, d.length)), b(d.slice(f))) : (v(d.length), b([]));
+	}, [d, f]);
+	let x = h || ((t, n) => /* @__PURE__ */ u(e, {
+		variant: "secondary",
+		className: "select-tag flex items-center gap-1 px-2 py-0.5 text-xs whitespace-nowrap",
+		children: [
+			t.icon && /* @__PURE__ */ l("span", {
+				className: "text-xs",
+				children: t.icon
+			}),
+			/* @__PURE__ */ l("span", {
+				className: "truncate max-w-[100px]",
+				children: t.label
+			}),
+			!m && /* @__PURE__ */ l(a.XIcon, {
+				className: "w-3 h-3 cursor-pointer hover:text-destructive",
+				onClick: (e) => {
+					e.stopPropagation(), n();
+				}
+			})
+		]
+	}, t.value));
+	return /* @__PURE__ */ u("div", {
+		ref: g,
+		className: "flex items-center gap-1 flex-wrap flex-1 min-w-0",
+		children: [d.slice(0, _).map((e) => x(e, () => p(e.value))), y.length > 0 && /* @__PURE__ */ l(r, { children: /* @__PURE__ */ u(t, { children: [/* @__PURE__ */ l(i, {
+			asChild: !0,
+			children: /* @__PURE__ */ u(e, {
+				variant: "outline",
+				className: "cursor-help text-xs px-2 py-0.5",
+				children: ["+", y.length]
+			})
+		}), /* @__PURE__ */ l(n, {
+			side: "bottom",
+			className: "max-w-xs",
+			children: /* @__PURE__ */ l("div", {
+				className: "flex flex-col gap-1",
+				children: y.map((e) => /* @__PURE__ */ u("div", {
+					className: "flex items-center gap-2 text-xs",
+					children: [e.icon && /* @__PURE__ */ l("span", { children: e.icon }), /* @__PURE__ */ l("span", { children: e.label })]
+				}, e.value))
+			})
+		})] }) })]
+	});
+}
+//#endregion
+export { d as MultiSelectTags };

package/dist/index103.cjs

@@ -0,0 +1 @@
+const e=require("./index6.cjs"),t=require("./index31.cjs"),n=require("./index42.cjs");let r=require("react"),i=require("react/jsx-runtime");function a({selectedOptions:a,maxTagCount:o=`responsive`,onRemove:s,disabled:c,tagRender:l}){let u=(0,r.useRef)(null),[d,f]=(0,r.useState)(a.length),[p,m]=(0,r.useState)([]);(0,r.useEffect)(()=>{if(o===`responsive`&&u.current){let e=u.current,t=e.offsetWidth-60,n=0,r=0,i=Array.from(e.children);for(let e=0;e<i.length;e++){let a=i[e];if(a.classList.contains(`select-tag`)){let e=a.offsetWidth+4;if(n+e<=t)n+=e,r++;else break}}r<a.length?(f(Math.max(1,r-1)),m(a.slice(Math.max(1,r-1)))):(f(a.length),m([]))}else typeof o==`number`?(f(Math.min(o,a.length)),m(a.slice(o))):(f(a.length),m([]))},[a,o]);let h=l||((t,r)=>(0,i.jsxs)(e.Badge,{variant:`secondary`,className:`select-tag flex items-center gap-1 px-2 py-0.5 text-xs whitespace-nowrap`,children:[t.icon&&(0,i.jsx)(`span`,{className:`text-xs`,children:t.icon}),(0,i.jsx)(`span`,{className:`truncate max-w-[100px]`,children:t.label}),!c&&(0,i.jsx)(n.Icons.XIcon,{className:`w-3 h-3 cursor-pointer hover:text-destructive`,onClick:e=>{e.stopPropagation(),r()}})]},t.value));return(0,i.jsxs)(`div`,{ref:u,className:`flex items-center gap-1 flex-wrap flex-1 min-w-0`,children:[a.slice(0,d).map(e=>h(e,()=>s(e.value))),p.length>0&&(0,i.jsx)(t.TooltipProvider,{children:(0,i.jsxs)(t.Tooltip,{children:[(0,i.jsx)(t.TooltipTrigger,{asChild:!0,children:(0,i.jsxs)(e.Badge,{variant:`outline`,className:`cursor-help text-xs px-2 py-0.5`,children:[`+`,p.length]})}),(0,i.jsx)(t.TooltipContent,{side:`bottom`,className:`max-w-xs`,children:(0,i.jsx)(`div`,{className:`flex flex-col gap-1`,children:p.map(e=>(0,i.jsxs)(`div`,{className:`flex items-center gap-2 text-xs`,children:[e.icon&&(0,i.jsx)(`span`,{children:e.icon}),(0,i.jsx)(`span`,{children:e.label})]},e.value))})})]})})]})}exports.MultiSelectTags=a;