@comitor/ui 0.1.0

package/dist/components/composite/date-picker.js

@@ -0,0 +1,268 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  endOfMonth,
+  format as formatDate,
+  isAfter,
+  isBefore,
+  isValid,
+  parse,
+  startOfDay,
+  startOfMonth,
+  subDays,
+  subMonths
+} from "date-fns";
+import { vi } from "date-fns/locale";
+import { CalendarDays, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../ui/button.js";
+import { Calendar } from "../ui/calendar.js";
+import { Input } from "../ui/input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+const VI_DATE_FORMAT = "dd/MM/yyyy";
+const DEFAULT_DATE_PRESETS = [
+  { id: "today", label: "H\xF4m nay", getValue: () => startOfDay(/* @__PURE__ */ new Date()) },
+  { id: "yesterday", label: "H\xF4m qua", getValue: () => startOfDay(subDays(/* @__PURE__ */ new Date(), 1)) },
+  { id: "week-ago", label: "7 ng\xE0y tr\u01B0\u1EDBc", getValue: () => startOfDay(subDays(/* @__PURE__ */ new Date(), 7)) }
+];
+const DEFAULT_DATE_RANGE_PRESETS = [
+  { id: "today", label: "H\xF4m nay", getValue: () => ({ from: startOfDay(/* @__PURE__ */ new Date()), to: startOfDay(/* @__PURE__ */ new Date()) }) },
+  {
+    id: "last-7",
+    label: "7 ng\xE0y qua",
+    getValue: () => ({ from: startOfDay(subDays(/* @__PURE__ */ new Date(), 6)), to: startOfDay(/* @__PURE__ */ new Date()) })
+  },
+  {
+    id: "last-30",
+    label: "30 ng\xE0y qua",
+    getValue: () => ({ from: startOfDay(subDays(/* @__PURE__ */ new Date(), 29)), to: startOfDay(/* @__PURE__ */ new Date()) })
+  },
+  {
+    id: "this-month",
+    label: "Th\xE1ng n\xE0y",
+    getValue: () => ({ from: startOfMonth(/* @__PURE__ */ new Date()), to: startOfDay(/* @__PURE__ */ new Date()) })
+  },
+  {
+    id: "last-month",
+    label: "Th\xE1ng tr\u01B0\u1EDBc",
+    getValue: () => {
+      const previous = subMonths(/* @__PURE__ */ new Date(), 1);
+      return { from: startOfMonth(previous), to: endOfMonth(previous) };
+    }
+  }
+];
+function isOutOfRange(date, minDate, maxDate) {
+  if (minDate && isBefore(date, startOfDay(minDate))) return true;
+  if (maxDate && isAfter(date, startOfDay(maxDate))) return true;
+  return false;
+}
+function buildDisabledMatchers(minDate, maxDate) {
+  const matchers = [];
+  if (minDate) matchers.push({ before: startOfDay(minDate) });
+  if (maxDate) matchers.push({ after: startOfDay(maxDate) });
+  return matchers.length > 0 ? matchers : void 0;
+}
+function DatePicker({
+  value,
+  onValueChange,
+  placeholder = VI_DATE_FORMAT,
+  disabled = false,
+  minDate,
+  maxDate,
+  clearable = true,
+  presets = false,
+  className,
+  id,
+  name,
+  ...aria
+}) {
+  const [open, setOpen] = useState(false);
+  const [text, setText] = useState(() => value ? formatDate(value, VI_DATE_FORMAT, { locale: vi }) : "");
+  useEffect(() => {
+    setText(value ? formatDate(value, VI_DATE_FORMAT, { locale: vi }) : "");
+  }, [value]);
+  const commitText = (raw) => {
+    const trimmed = raw.trim();
+    if (trimmed === "") {
+      onValueChange(null);
+      return;
+    }
+    const parsed = parse(trimmed, VI_DATE_FORMAT, /* @__PURE__ */ new Date(), { locale: vi });
+    if (!isValid(parsed) || isOutOfRange(parsed, minDate, maxDate)) {
+      setText(value ? formatDate(value, VI_DATE_FORMAT, { locale: vi }) : "");
+      return;
+    }
+    onValueChange(startOfDay(parsed));
+  };
+  const presetList = presets === false ? [] : presets;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id,
+        name,
+        value: text,
+        disabled,
+        placeholder,
+        inputMode: "numeric",
+        autoComplete: "off",
+        onChange: (event) => setText(event.target.value),
+        onBlur: (event) => commitText(event.target.value),
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            commitText(text);
+          }
+        },
+        className: "pr-16",
+        ...aria
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "absolute right-1 top-1/2 flex -translate-y-1/2 items-center", children: [
+      clearable && value && !disabled && /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "icon-sm", className: "size-7", onClick: () => onValueChange(null), children: [
+        /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3.5" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "X\xF3a ng\xE0y" })
+      ] }),
+      /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "icon-sm", className: "size-7", disabled, children: [
+          /* @__PURE__ */ jsx(CalendarDays, { "aria-hidden": "true", className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "M\u1EDF l\u1ECBch" })
+        ] }) }),
+        /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "flex w-auto gap-2 p-2", children: [
+          presetList.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex w-32 flex-col gap-1 border-r border-border pr-2", children: presetList.map((preset) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: "justify-start",
+              onClick: () => {
+                onValueChange(preset.getValue());
+                setOpen(false);
+              },
+              children: preset.label
+            },
+            preset.id
+          )) }),
+          /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              mode: "single",
+              locale: vi,
+              autoFocus: true,
+              selected: value ?? void 0,
+              defaultMonth: value ?? void 0,
+              disabled: buildDisabledMatchers(minDate, maxDate),
+              onSelect: (date) => {
+                onValueChange(date ? startOfDay(date) : null);
+                setOpen(false);
+              }
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function formatRange(range) {
+  if (!range?.from) return null;
+  const from = formatDate(range.from, VI_DATE_FORMAT, { locale: vi });
+  if (!range.to) return from;
+  return `${from} \u2013 ${formatDate(range.to, VI_DATE_FORMAT, { locale: vi })}`;
+}
+function DateRangePicker({
+  value,
+  onValueChange,
+  placeholder = "Ch\u1ECDn kho\u1EA3ng ng\xE0y",
+  disabled = false,
+  minDate,
+  maxDate,
+  clearable = true,
+  presets = DEFAULT_DATE_RANGE_PRESETS,
+  numberOfMonths = 2,
+  className,
+  id,
+  ...aria
+}) {
+  const [open, setOpen] = useState(false);
+  const label = formatRange(value);
+  const presetList = presets === false ? [] : presets;
+  const showClear = clearable && Boolean(label) && !disabled;
+  return (
+    /* Nút xóa nằm NGOÀI trigger (anh em), không lồng trong <button> — vừa hợp lệ về HTML vừa
+       đến được bằng phím Tab. */
+    /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            id,
+            variant: "outline",
+            disabled,
+            className: cn(
+              "w-full justify-start gap-2 font-normal",
+              !label && "text-muted-foreground",
+              showClear && "pr-9",
+              className
+            ),
+            ...aria,
+            children: [
+              /* @__PURE__ */ jsx(CalendarDays, { "aria-hidden": "true", className: "size-4 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: label ?? placeholder })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "flex w-auto flex-col gap-2 p-2 sm:flex-row", children: [
+          presetList.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-row flex-wrap gap-1 sm:w-36 sm:flex-col sm:border-r sm:border-border sm:pr-2", children: presetList.map((preset) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: "justify-start",
+              onClick: () => {
+                onValueChange(preset.getValue());
+                setOpen(false);
+              },
+              children: preset.label
+            },
+            preset.id
+          )) }),
+          /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              mode: "range",
+              locale: vi,
+              autoFocus: true,
+              numberOfMonths,
+              selected: value ?? void 0,
+              defaultMonth: value?.from ?? void 0,
+              disabled: buildDisabledMatchers(minDate, maxDate),
+              onSelect: (range) => onValueChange(range ?? null)
+            }
+          )
+        ] })
+      ] }),
+      showClear && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "X\xF3a kho\u1EA3ng ng\xE0y",
+          onClick: () => onValueChange(null),
+          className: "absolute right-2 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground transition-colors duration-150 ease-out hover:text-foreground",
+          children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3.5" })
+        }
+      )
+    ] })
+  );
+}
+export {
+  DEFAULT_DATE_PRESETS,
+  DEFAULT_DATE_RANGE_PRESETS,
+  DatePicker,
+  DateRangePicker,
+  VI_DATE_FORMAT
+};
+//# sourceMappingURL=date-picker.js.map

package/dist/components/composite/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/date-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  endOfMonth,\n  format as formatDate,\n  isAfter,\n  isBefore,\n  isValid,\n  parse,\n  startOfDay,\n  startOfMonth,\n  subDays,\n  subMonths\n} from \"date-fns\";\nimport { vi } from \"date-fns/locale\";\nimport { CalendarDays, X } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport type { DateRange, Matcher } from \"react-day-picker\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Button } from \"../ui/button.js\";\nimport { Calendar } from \"../ui/calendar.js\";\nimport { Input } from \"../ui/input.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/popover.js\";\n\nexport type { DateRange };\n\n/** Định dạng ngày của Việt Nam — dùng thống nhất ở mọi app Comitor. */\nexport const VI_DATE_FORMAT = \"dd/MM/yyyy\";\n\nexport interface DatePreset {\n  id: string;\n  label: string;\n  /** Trả về ngày (DatePicker) hoặc khoảng ngày (DateRangePicker) tại thời điểm bấm */\n  getValue: () => Date;\n}\n\nexport interface DateRangePreset {\n  id: string;\n  label: string;\n  getValue: () => DateRange;\n}\n\n/** Preset mặc định cho ô chọn một ngày. */\nexport const DEFAULT_DATE_PRESETS: DatePreset[] = [\n  { id: \"today\", label: \"Hôm nay\", getValue: () => startOfDay(new Date()) },\n  { id: \"yesterday\", label: \"Hôm qua\", getValue: () => startOfDay(subDays(new Date(), 1)) },\n  { id: \"week-ago\", label: \"7 ngày trước\", getValue: () => startOfDay(subDays(new Date(), 7)) }\n];\n\n/** Preset mặc định cho ô chọn khoảng ngày (báo cáo, bộ lọc danh sách). */\nexport const DEFAULT_DATE_RANGE_PRESETS: DateRangePreset[] = [\n  { id: \"today\", label: \"Hôm nay\", getValue: () => ({ from: startOfDay(new Date()), to: startOfDay(new Date()) }) },\n  {\n    id: \"last-7\",\n    label: \"7 ngày qua\",\n    getValue: () => ({ from: startOfDay(subDays(new Date(), 6)), to: startOfDay(new Date()) })\n  },\n  {\n    id: \"last-30\",\n    label: \"30 ngày qua\",\n    getValue: () => ({ from: startOfDay(subDays(new Date(), 29)), to: startOfDay(new Date()) })\n  },\n  {\n    id: \"this-month\",\n    label: \"Tháng này\",\n    getValue: () => ({ from: startOfMonth(new Date()), to: startOfDay(new Date()) })\n  },\n  {\n    id: \"last-month\",\n    label: \"Tháng trước\",\n    getValue: () => {\n      const previous = subMonths(new Date(), 1);\n      return { from: startOfMonth(previous), to: endOfMonth(previous) };\n    }\n  }\n];\n\nfunction isOutOfRange(date: Date, minDate?: Date, maxDate?: Date): boolean {\n  if (minDate && isBefore(date, startOfDay(minDate))) return true;\n  if (maxDate && isAfter(date, startOfDay(maxDate))) return true;\n  return false;\n}\n\n/**\n * Chặn ngày ngoài khoảng cho phép — trả về MẢNG matcher, không phải một object.\n *\n * Cạm bẫy react-day-picker: `{ before, after }` trong CÙNG một object là `DateInterval`, nghĩa là\n * \"các ngày NẰM GIỮA\" — ngược hẳn ý định. Tách thành hai matcher riêng mới ra \"trước min HOẶC sau max\".\n */\nfunction buildDisabledMatchers(minDate?: Date, maxDate?: Date): Matcher[] | undefined {\n  const matchers: Matcher[] = [];\n  if (minDate) matchers.push({ before: startOfDay(minDate) });\n  if (maxDate) matchers.push({ after: startOfDay(maxDate) });\n  return matchers.length > 0 ? matchers : undefined;\n}\n\nexport interface DatePickerProps {\n  value?: Date | null;\n  onValueChange: (value: Date | null) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Ngày nhỏ nhất / lớn nhất được chọn */\n  minDate?: Date;\n  maxDate?: Date;\n  /** Hiện nút xoá khi đã có giá trị (mặc định true) */\n  clearable?: boolean;\n  /** Cột preset bên trái lịch (mặc định ẩn) */\n  presets?: DatePreset[] | false;\n  className?: string;\n  id?: string;\n  name?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: true;\n  \"aria-required\"?: true;\n}\n\n/**\n * Ô chọn ngày: gõ tay `dd/MM/yyyy` HOẶC bấm lịch.\n *\n * Vì sao vẫn giữ ô gõ tay thay vì chỉ có nút mở lịch: người nhập liệu chuyên nghiệp (kế toán,\n * nhân sự) gõ nhanh hơn bấm nhiều lần, và ngày sinh năm 1975 mà bắt lật lịch 50 năm thì không\n * ai chịu nổi. Chuỗi gõ dở KHÔNG bị ghi đè trong lúc gõ; sai định dạng thì trả về giá trị cũ\n * khi rời ô, không âm thầm nuốt dữ liệu.\n */\nexport function DatePicker({\n  value,\n  onValueChange,\n  placeholder = VI_DATE_FORMAT,\n  disabled = false,\n  minDate,\n  maxDate,\n  clearable = true,\n  presets = false,\n  className,\n  id,\n  name,\n  ...aria\n}: DatePickerProps) {\n  const [open, setOpen] = useState(false);\n  const [text, setText] = useState(() => (value ? formatDate(value, VI_DATE_FORMAT, { locale: vi }) : \"\"));\n\n  // Đồng bộ khi giá trị đổi từ bên ngoài (reset form, chọn preset, load dữ liệu về).\n  useEffect(() => {\n    setText(value ? formatDate(value, VI_DATE_FORMAT, { locale: vi }) : \"\");\n  }, [value]);\n\n  const commitText = (raw: string) => {\n    const trimmed = raw.trim();\n    if (trimmed === \"\") {\n      onValueChange(null);\n      return;\n    }\n    const parsed = parse(trimmed, VI_DATE_FORMAT, new Date(), { locale: vi });\n    if (!isValid(parsed) || isOutOfRange(parsed, minDate, maxDate)) {\n      // Không hợp lệ → khôi phục hiển thị theo giá trị đang có (không đổi dữ liệu).\n      setText(value ? formatDate(value, VI_DATE_FORMAT, { locale: vi }) : \"\");\n      return;\n    }\n    onValueChange(startOfDay(parsed));\n  };\n\n  const presetList = presets === false ? [] : presets;\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      <Input\n        id={id}\n        name={name}\n        value={text}\n        disabled={disabled}\n        placeholder={placeholder}\n        inputMode=\"numeric\"\n        autoComplete=\"off\"\n        onChange={(event) => setText(event.target.value)}\n        onBlur={(event) => commitText(event.target.value)}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\") {\n            event.preventDefault();\n            commitText(text);\n          }\n        }}\n        className=\"pr-16\"\n        {...aria}\n      />\n\n      <div className=\"absolute right-1 top-1/2 flex -translate-y-1/2 items-center\">\n        {clearable && value && !disabled && (\n          <Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" className=\"size-7\" onClick={() => onValueChange(null)}>\n            <X aria-hidden=\"true\" className=\"size-3.5\" />\n            <span className=\"sr-only\">Xóa ngày</span>\n          </Button>\n        )}\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" className=\"size-7\" disabled={disabled}>\n              <CalendarDays aria-hidden=\"true\" className=\"size-4\" />\n              <span className=\"sr-only\">Mở lịch</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent align=\"end\" className=\"flex w-auto gap-2 p-2\">\n            {presetList.length > 0 && (\n              <div className=\"flex w-32 flex-col gap-1 border-r border-border pr-2\">\n                {presetList.map((preset) => (\n                  <Button\n                    key={preset.id}\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className=\"justify-start\"\n                    onClick={() => {\n                      onValueChange(preset.getValue());\n                      setOpen(false);\n                    }}\n                  >\n                    {preset.label}\n                  </Button>\n                ))}\n              </div>\n            )}\n            <Calendar\n              mode=\"single\"\n              locale={vi}\n              autoFocus\n              selected={value ?? undefined}\n              defaultMonth={value ?? undefined}\n              disabled={buildDisabledMatchers(minDate, maxDate)}\n              onSelect={(date) => {\n                onValueChange(date ? startOfDay(date) : null);\n                setOpen(false);\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n    </div>\n  );\n}\n\nexport interface DateRangePickerProps {\n  value?: DateRange | null;\n  onValueChange: (value: DateRange | null) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  minDate?: Date;\n  maxDate?: Date;\n  clearable?: boolean;\n  /** Cột preset bên trái (mặc định DEFAULT_DATE_RANGE_PRESETS; `false` để tắt) */\n  presets?: DateRangePreset[] | false;\n  /** Số tháng hiện cùng lúc (mặc định 2 trên màn rộng) */\n  numberOfMonths?: number;\n  className?: string;\n  id?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: true;\n}\n\nfunction formatRange(range: DateRange | null | undefined): string | null {\n  if (!range?.from) return null;\n  const from = formatDate(range.from, VI_DATE_FORMAT, { locale: vi });\n  if (!range.to) return from;\n  return `${from} – ${formatDate(range.to, VI_DATE_FORMAT, { locale: vi })}`;\n}\n\n/**\n * Ô chọn khoảng ngày cho báo cáo và bộ lọc danh sách: cột preset + lịch 2 tháng.\n *\n * Preset đứng trước lịch vì 9/10 lần người dùng muốn \"7 ngày qua\" chứ không phải một khoảng\n * tuỳ ý — bắt họ bấm hai lần trên lịch mỗi lần xem báo cáo là thuế lặp lại vô ích.\n */\nexport function DateRangePicker({\n  value,\n  onValueChange,\n  placeholder = \"Chọn khoảng ngày\",\n  disabled = false,\n  minDate,\n  maxDate,\n  clearable = true,\n  presets = DEFAULT_DATE_RANGE_PRESETS,\n  numberOfMonths = 2,\n  className,\n  id,\n  ...aria\n}: DateRangePickerProps) {\n  const [open, setOpen] = useState(false);\n  const label = formatRange(value);\n  const presetList = presets === false ? [] : presets;\n\n  const showClear = clearable && Boolean(label) && !disabled;\n\n  return (\n    /* Nút xóa nằm NGOÀI trigger (anh em), không lồng trong <button> — vừa hợp lệ về HTML vừa\n       đến được bằng phím Tab. */\n    <div className=\"relative w-full\">\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            type=\"button\"\n            id={id}\n            variant=\"outline\"\n            disabled={disabled}\n            className={cn(\n              \"w-full justify-start gap-2 font-normal\",\n              !label && \"text-muted-foreground\",\n              showClear && \"pr-9\",\n              className\n            )}\n            {...aria}\n          >\n            <CalendarDays aria-hidden=\"true\" className=\"size-4 shrink-0\" />\n            <span className=\"truncate\">{label ?? placeholder}</span>\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" className=\"flex w-auto flex-col gap-2 p-2 sm:flex-row\">\n          {presetList.length > 0 && (\n            <div className=\"flex flex-row flex-wrap gap-1 sm:w-36 sm:flex-col sm:border-r sm:border-border sm:pr-2\">\n              {presetList.map((preset) => (\n                <Button\n                  key={preset.id}\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start\"\n                  onClick={() => {\n                    onValueChange(preset.getValue());\n                    setOpen(false);\n                  }}\n                >\n                  {preset.label}\n                </Button>\n              ))}\n            </div>\n          )}\n          <Calendar\n            mode=\"range\"\n            locale={vi}\n            autoFocus\n            numberOfMonths={numberOfMonths}\n            selected={value ?? undefined}\n            defaultMonth={value?.from ?? undefined}\n            disabled={buildDisabledMatchers(minDate, maxDate)}\n            onSelect={(range) => onValueChange(range ?? null)}\n          />\n        </PopoverContent>\n      </Popover>\n\n      {showClear && (\n        <button\n          type=\"button\"\n          aria-label=\"Xóa khoảng ngày\"\n          onClick={() => onValueChange(null)}\n          className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground transition-colors duration-150 ease-out hover:text-foreground\"\n        >\n          <X aria-hidden=\"true\" className=\"size-3.5\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/composite/empty-state.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { ComponentType, ComponentProps, ReactNode } from 'react';
+
+/**
+ * Kiểu icon dùng chung ở tầng composite: nhận thẳng component icon (Lucide hoặc SVG tự vẽ),
+ * KHÔNG nhận element đã render.
+ *
+ * Vì sao: `LucideIcon` là `forwardRef` (object, không phải function) nên không thể phân biệt
+ * "component" với "element" bằng `typeof` lúc chạy. Cố đoán sẽ sai âm thầm — ép kiểu từ đầu
+ * cho trình biên dịch bắt lỗi thay ta. Cần node tuỳ ý thì dùng slot riêng (vd `media`).
+ */
+type IconComponent = ComponentType<{
+    className?: string;
+    "aria-hidden"?: boolean | "true" | "false";
+}>;
+interface EmptyStateProps extends Omit<ComponentProps<"div">, "title"> {
+    /** Component icon (vd `Inbox` của lucide-react) — hiện trong ô bo góc nền muted */
+    icon?: IconComponent;
+    /** Node tuỳ ý thay cho icon (ảnh minh hoạ, illustration) — ưu tiên hơn `icon` */
+    media?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Nút hành động chính/phụ — render dưới mô tả */
+    action?: ReactNode;
+    /** Viền đứt quanh vùng rỗng (dùng khi nằm trong khung bảng/danh sách) */
+    bordered?: boolean;
+    /** "sm" cho vùng rỗng trong card nhỏ; "md" (mặc định) cho giữa trang */
+    size?: "sm" | "md";
+}
+/**
+ * Trạng thái rỗng chuẩn: icon + tiêu đề + mô tả + hành động.
+ *
+ * Bọc primitive `Empty` thay vì dựng lại markup, để "chưa có dữ liệu" ở Tasks, CRM, HR trông
+ * như nhau. Tĩnh hoàn toàn → dùng được trong React Server Component.
+ */
+declare function EmptyState({ icon: Icon, media, title, description, action, bordered, size, className, ...props }: EmptyStateProps): React.JSX.Element;
+
+export { EmptyState, type EmptyStateProps, type IconComponent };

package/dist/components/composite/empty-state.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
+function EmptyState({
+  icon: Icon,
+  media,
+  title,
+  description,
+  action,
+  bordered = false,
+  size = "md",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Empty,
+    {
+      "data-slot": "empty-state",
+      className: cn(bordered && "border", size === "sm" && "gap-4 p-4 md:p-6", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+          media ? /* @__PURE__ */ jsx(EmptyMedia, { children: media }) : Icon ? /* @__PURE__ */ jsx(EmptyMedia, { variant: "icon", className: cn(size === "sm" && "size-9"), children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }) }) : null,
+          /* @__PURE__ */ jsx(EmptyTitle, { className: cn(size === "sm" && "text-base"), children: title }),
+          description && /* @__PURE__ */ jsx(EmptyDescription, { children: description })
+        ] }),
+        action && /* @__PURE__ */ jsx(EmptyContent, { className: "flex-row justify-center gap-2", children: action })
+      ]
+    }
+  );
+}
+export {
+  EmptyState
+};
+//# sourceMappingURL=empty-state.js.map

package/dist/components/composite/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/empty-state.tsx"],"sourcesContent":["import type { ComponentProps, ComponentType, ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from \"../ui/empty.js\";\n\n/**\n * Kiểu icon dùng chung ở tầng composite: nhận thẳng component icon (Lucide hoặc SVG tự vẽ),\n * KHÔNG nhận element đã render.\n *\n * Vì sao: `LucideIcon` là `forwardRef` (object, không phải function) nên không thể phân biệt\n * \"component\" với \"element\" bằng `typeof` lúc chạy. Cố đoán sẽ sai âm thầm — ép kiểu từ đầu\n * cho trình biên dịch bắt lỗi thay ta. Cần node tuỳ ý thì dùng slot riêng (vd `media`).\n */\nexport type IconComponent = ComponentType<{ className?: string; \"aria-hidden\"?: boolean | \"true\" | \"false\" }>;\n\nexport interface EmptyStateProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n  /** Component icon (vd `Inbox` của lucide-react) — hiện trong ô bo góc nền muted */\n  icon?: IconComponent;\n  /** Node tuỳ ý thay cho icon (ảnh minh hoạ, illustration) — ưu tiên hơn `icon` */\n  media?: ReactNode;\n  title: ReactNode;\n  description?: ReactNode;\n  /** Nút hành động chính/phụ — render dưới mô tả */\n  action?: ReactNode;\n  /** Viền đứt quanh vùng rỗng (dùng khi nằm trong khung bảng/danh sách) */\n  bordered?: boolean;\n  /** \"sm\" cho vùng rỗng trong card nhỏ; \"md\" (mặc định) cho giữa trang */\n  size?: \"sm\" | \"md\";\n}\n\n/**\n * Trạng thái rỗng chuẩn: icon + tiêu đề + mô tả + hành động.\n *\n * Bọc primitive `Empty` thay vì dựng lại markup, để \"chưa có dữ liệu\" ở Tasks, CRM, HR trông\n * như nhau. Tĩnh hoàn toàn → dùng được trong React Server Component.\n */\nexport function EmptyState({\n  icon: Icon,\n  media,\n  title,\n  description,\n  action,\n  bordered = false,\n  size = \"md\",\n  className,\n  ...props\n}: EmptyStateProps) {\n  return (\n    <Empty\n      data-slot=\"empty-state\"\n      className={cn(bordered && \"border\", size === \"sm\" && \"gap-4 p-4 md:p-6\", className)}\n      {...props}\n    >\n      <EmptyHeader>\n        {media ? (\n          <EmptyMedia>{media}</EmptyMedia>\n        ) : Icon ? (\n          <EmptyMedia variant=\"icon\" className={cn(size === \"sm\" && \"size-9\")}>\n            <Icon aria-hidden=\"true\" />\n          </EmptyMedia>\n        ) : null}\n        <EmptyTitle className={cn(size === \"sm\" && \"text-base\")}>{title}</EmptyTitle>\n        {description && <EmptyDescription>{description}</EmptyDescription>}\n      </EmptyHeader>\n      {action && <EmptyContent className=\"flex-row justify-center gap-2\">{action}</EmptyContent>}\n    </Empty>\n  );\n}\n"],"mappings":"AAoDM,SAEI,KAFJ;AAnDN,SAAS,UAAU;AACnB,SAAS,OAAO,cAAc,kBAAkB,aAAa,YAAY,kBAAkB;AAiCpF,SAAS,WAAW;AAAA,EACzB,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,YAAY,UAAU,SAAS,QAAQ,oBAAoB,SAAS;AAAA,MACjF,GAAG;AAAA,MAEJ;AAAA,6BAAC,eACE;AAAA,kBACC,oBAAC,cAAY,iBAAM,IACjB,OACF,oBAAC,cAAW,SAAQ,QAAO,WAAW,GAAG,SAAS,QAAQ,QAAQ,GAChE,8BAAC,QAAK,eAAY,QAAO,GAC3B,IACE;AAAA,UACJ,oBAAC,cAAW,WAAW,GAAG,SAAS,QAAQ,WAAW,GAAI,iBAAM;AAAA,UAC/D,eAAe,oBAAC,oBAAkB,uBAAY;AAAA,WACjD;AAAA,QACC,UAAU,oBAAC,gBAAa,WAAU,iCAAiC,kBAAO;AAAA;AAAA;AAAA,EAC7E;AAEJ;","names":[]}

package/dist/components/composite/filter-chips.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { IconComponent } from './empty-state.js';
+import { StatusTone } from './status-config.js';
+
+interface FilterChipItem<T extends string = string> {
+    value: T;
+    label: string;
+    /** Số bản ghi thuộc nhóm này — hiện đậm trước nhãn */
+    count?: number;
+    icon?: IconComponent;
+    /** Tone khi chip đang bật (mặc định tone app-accent) */
+    tone?: StatusTone;
+    disabled?: boolean;
+}
+interface FilterChipsProps<T extends string = string> {
+    items: FilterChipItem<T>[];
+    /** Giá trị đang chọn — mảng (đa chọn) hoặc một giá trị/null (đơn chọn) */
+    value: T[] | T | null;
+    onValueChange: (value: T[] | T | null) => void;
+    /** Cho chọn nhiều chip cùng lúc (mặc định false) */
+    multiple?: boolean;
+    /** Thêm chip "Tất cả" ở đầu để bỏ mọi lựa chọn */
+    showAll?: boolean;
+    allLabel?: string;
+    allCount?: number;
+    /** Nhãn nhóm cho trình đọc màn hình */
+    label?: string;
+    className?: string;
+}
+/**
+ * Dãy chip lọc bật/tắt kèm số đếm — kiểu Linear/Lark, dùng cho trạng thái, nhãn, mức ưu tiên.
+ *
+ * Dùng `aria-pressed` trên `<button>` thay vì `role="tab"`: chip lọc không đổi vùng nội dung
+ * theo kiểu tab, nó bật/tắt điều kiện lọc. Đặt nhầm role sẽ khiến trình đọc màn hình hứa hẹn
+ * một panel không tồn tại.
+ */
+declare function FilterChips<T extends string = string>({ items, value, onValueChange, multiple, showAll, allLabel, allCount, label, className }: FilterChipsProps<T>): React.JSX.Element;
+
+export { type FilterChipItem, FilterChips, type FilterChipsProps };

package/dist/components/composite/filter-chips.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function toArray(value) {
+  if (value == null) return [];
+  return Array.isArray(value) ? value : [value];
+}
+function FilterChips({
+  items,
+  value,
+  onValueChange,
+  multiple = false,
+  showAll = false,
+  allLabel = "T\u1EA5t c\u1EA3",
+  allCount,
+  label = "B\u1ED9 l\u1ECDc nhanh",
+  className
+}) {
+  const selected = toArray(value);
+  const noneSelected = selected.length === 0;
+  const toggle = (item) => {
+    if (item.disabled) return;
+    if (!multiple) {
+      onValueChange(selected.includes(item.value) ? null : item.value);
+      return;
+    }
+    onValueChange(
+      selected.includes(item.value) ? selected.filter((current) => current !== item.value) : [...selected, item.value]
+    );
+  };
+  const chipClass = (active, tone) => cn(
+    "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-sm font-medium transition-colors duration-150 ease-out",
+    "disabled:pointer-events-none disabled:opacity-50",
+    active ? tone ? cn("border-transparent", tone.bgColor, tone.textColor) : (
+      // Tô ĐẶC chứ không phải nền vàng 15%: chữ gold trên nền gold nhạt chỉ đạt ~1.9:1,
+      // dưới chuẩn AA. Nền đặc + `app-accent-foreground` (mực) mới đọc được ở cả 2 theme.
+      "border-transparent bg-app-accent text-app-accent-foreground"
+    ) : "border-border bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+  );
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "filter-chips", role: "group", "aria-label": label, className: cn("flex flex-wrap gap-2", className), children: [
+    showAll && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": noneSelected,
+        onClick: () => onValueChange(multiple ? [] : null),
+        className: chipClass(noneSelected),
+        children: [
+          allCount !== void 0 && /* @__PURE__ */ jsx("span", { className: "font-semibold tabular-nums", children: allCount }),
+          allLabel
+        ]
+      }
+    ),
+    items.map((item) => {
+      const active = selected.includes(item.value);
+      const Icon = item.icon;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": active,
+          disabled: item.disabled,
+          onClick: () => toggle(item),
+          className: chipClass(active, item.tone),
+          children: [
+            Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "size-3.5" }),
+            item.count !== void 0 && /* @__PURE__ */ jsx("span", { className: "font-semibold tabular-nums", children: item.count }),
+            item.label
+          ]
+        },
+        item.value
+      );
+    })
+  ] });
+}
+export {
+  FilterChips
+};
+//# sourceMappingURL=filter-chips.js.map

package/dist/components/composite/filter-chips.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/filter-chips.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../../lib/cn.js\";\nimport type { IconComponent } from \"./empty-state.js\";\nimport type { StatusTone } from \"./status-config.js\";\n\nexport interface FilterChipItem<T extends string = string> {\n  value: T;\n  label: string;\n  /** Số bản ghi thuộc nhóm này — hiện đậm trước nhãn */\n  count?: number;\n  icon?: IconComponent;\n  /** Tone khi chip đang bật (mặc định tone app-accent) */\n  tone?: StatusTone;\n  disabled?: boolean;\n}\n\nexport interface FilterChipsProps<T extends string = string> {\n  items: FilterChipItem<T>[];\n  /** Giá trị đang chọn — mảng (đa chọn) hoặc một giá trị/null (đơn chọn) */\n  value: T[] | T | null;\n  onValueChange: (value: T[] | T | null) => void;\n  /** Cho chọn nhiều chip cùng lúc (mặc định false) */\n  multiple?: boolean;\n  /** Thêm chip \"Tất cả\" ở đầu để bỏ mọi lựa chọn */\n  showAll?: boolean;\n  allLabel?: string;\n  allCount?: number;\n  /** Nhãn nhóm cho trình đọc màn hình */\n  label?: string;\n  className?: string;\n}\n\nfunction toArray<T extends string>(value: T[] | T | null): T[] {\n  if (value == null) return [];\n  return Array.isArray(value) ? value : [value];\n}\n\n/**\n * Dãy chip lọc bật/tắt kèm số đếm — kiểu Linear/Lark, dùng cho trạng thái, nhãn, mức ưu tiên.\n *\n * Dùng `aria-pressed` trên `<button>` thay vì `role=\"tab\"`: chip lọc không đổi vùng nội dung\n * theo kiểu tab, nó bật/tắt điều kiện lọc. Đặt nhầm role sẽ khiến trình đọc màn hình hứa hẹn\n * một panel không tồn tại.\n */\nexport function FilterChips<T extends string = string>({\n  items,\n  value,\n  onValueChange,\n  multiple = false,\n  showAll = false,\n  allLabel = \"Tất cả\",\n  allCount,\n  label = \"Bộ lọc nhanh\",\n  className\n}: FilterChipsProps<T>) {\n  const selected = toArray(value);\n  const noneSelected = selected.length === 0;\n\n  const toggle = (item: FilterChipItem<T>) => {\n    if (item.disabled) return;\n    if (!multiple) {\n      onValueChange(selected.includes(item.value) ? null : item.value);\n      return;\n    }\n    onValueChange(\n      selected.includes(item.value) ? selected.filter((current) => current !== item.value) : [...selected, item.value]\n    );\n  };\n\n  const chipClass = (active: boolean, tone?: StatusTone) =>\n    cn(\n      \"inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-sm font-medium transition-colors duration-150 ease-out\",\n      \"disabled:pointer-events-none disabled:opacity-50\",\n      active\n        ? tone\n          ? cn(\"border-transparent\", tone.bgColor, tone.textColor)\n          : // Tô ĐẶC chứ không phải nền vàng 15%: chữ gold trên nền gold nhạt chỉ đạt ~1.9:1,\n            // dưới chuẩn AA. Nền đặc + `app-accent-foreground` (mực) mới đọc được ở cả 2 theme.\n            \"border-transparent bg-app-accent text-app-accent-foreground\"\n        : \"border-border bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground\"\n    );\n\n  return (\n    <div data-slot=\"filter-chips\" role=\"group\" aria-label={label} className={cn(\"flex flex-wrap gap-2\", className)}>\n      {showAll && (\n        <button\n          type=\"button\"\n          aria-pressed={noneSelected}\n          onClick={() => onValueChange(multiple ? [] : null)}\n          className={chipClass(noneSelected)}\n        >\n          {allCount !== undefined && <span className=\"font-semibold tabular-nums\">{allCount}</span>}\n          {allLabel}\n        </button>\n      )}\n\n      {items.map((item) => {\n        const active = selected.includes(item.value);\n        const Icon = item.icon;\n        return (\n          <button\n            key={item.value}\n            type=\"button\"\n            aria-pressed={active}\n            disabled={item.disabled}\n            onClick={() => toggle(item)}\n            className={chipClass(active, item.tone)}\n          >\n            {Icon && <Icon aria-hidden=\"true\" className=\"size-3.5\" />}\n            {item.count !== undefined && <span className=\"font-semibold tabular-nums\">{item.count}</span>}\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AAsFQ,SAM6B,KAN7B;AApFR,SAAS,UAAU;AA+BnB,SAAS,QAA0B,OAA4B;AAC7D,MAAI,SAAS,KAAM,QAAO,CAAC;AAC3B,SAAO,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AAC9C;AASO,SAAS,YAAuC;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,EACR;AACF,GAAwB;AACtB,QAAM,WAAW,QAAQ,KAAK;AAC9B,QAAM,eAAe,SAAS,WAAW;AAEzC,QAAM,SAAS,CAAC,SAA4B;AAC1C,QAAI,KAAK,SAAU;AACnB,QAAI,CAAC,UAAU;AACb,oBAAc,SAAS,SAAS,KAAK,KAAK,IAAI,OAAO,KAAK,KAAK;AAC/D;AAAA,IACF;AACA;AAAA,MACE,SAAS,SAAS,KAAK,KAAK,IAAI,SAAS,OAAO,CAAC,YAAY,YAAY,KAAK,KAAK,IAAI,CAAC,GAAG,UAAU,KAAK,KAAK;AAAA,IACjH;AAAA,EACF;AAEA,QAAM,YAAY,CAAC,QAAiB,SAClC;AAAA,IACE;AAAA,IACA;AAAA,IACA,SACI,OACE,GAAG,sBAAsB,KAAK,SAAS,KAAK,SAAS;AAAA;AAAA;AAAA,MAGrD;AAAA,QACF;AAAA,EACN;AAEF,SACE,qBAAC,SAAI,aAAU,gBAAe,MAAK,SAAQ,cAAY,OAAO,WAAW,GAAG,wBAAwB,SAAS,GAC1G;AAAA,eACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,SAAS,MAAM,cAAc,WAAW,CAAC,IAAI,IAAI;AAAA,QACjD,WAAW,UAAU,YAAY;AAAA,QAEhC;AAAA,uBAAa,UAAa,oBAAC,UAAK,WAAU,8BAA8B,oBAAS;AAAA,UACjF;AAAA;AAAA;AAAA,IACH;AAAA,IAGD,MAAM,IAAI,CAAC,SAAS;AACnB,YAAM,SAAS,SAAS,SAAS,KAAK,KAAK;AAC3C,YAAM,OAAO,KAAK;AAClB,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,gBAAc;AAAA,UACd,UAAU,KAAK;AAAA,UACf,SAAS,MAAM,OAAO,IAAI;AAAA,UAC1B,WAAW,UAAU,QAAQ,KAAK,IAAI;AAAA,UAErC;AAAA,oBAAQ,oBAAC,QAAK,eAAY,QAAO,WAAU,YAAW;AAAA,YACtD,KAAK,UAAU,UAAa,oBAAC,UAAK,WAAU,8BAA8B,eAAK,OAAM;AAAA,YACrF,KAAK;AAAA;AAAA;AAAA,QATD,KAAK;AAAA,MAUZ;AAAA,IAEJ,CAAC;AAAA,KACH;AAEJ;","names":[]}

package/dist/components/composite/form-field.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+type FormFieldColSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/**
+ * Thuộc tính a11y mà `FormField` tiêm xuống control con.
+ *
+ * Trải nguyên cụm này vào `<Input>`/`<Combobox>`/`<Select>` là control tự có id khớp nhãn,
+ * tự báo lỗi và trạng thái bắt buộc — không phải nhớ từng thuộc tính ở mỗi trang.
+ */
+interface FormFieldControlProps {
+    id: string;
+    "aria-invalid"?: true;
+    "aria-required"?: true;
+    "aria-describedby"?: string;
+}
+interface FormFieldProps {
+    label?: ReactNode;
+    /** Đánh dấu bắt buộc: vẽ dấu * và phát `aria-required` xuống control */
+    required?: boolean;
+    /** Mô tả/gợi ý dưới trường — bị ẩn khi có lỗi để không đọc chồng lời */
+    description?: ReactNode;
+    /** Thông báo lỗi; có giá trị là trường vào trạng thái invalid */
+    error?: ReactNode;
+    /** id của control — bỏ trống thì tự sinh bằng useId */
+    htmlFor?: string;
+    /** Số cột chiếm trong lưới 12 cột của `FormSection` (mặc định 12 = cả hàng) */
+    colSpan?: FormFieldColSpan;
+    orientation?: "vertical" | "horizontal" | "responsive";
+    className?: string;
+    /**
+     * Control của trường. Dạng hàm sẽ nhận `FormFieldControlProps` để trải xuống —
+     * dạng node thì app tự lo id/aria (dùng khi control đã tự quản, vd Checkbox có nhãn riêng).
+     */
+    children: ReactNode | ((control: FormFieldControlProps) => ReactNode);
+}
+/**
+ * Một trường form: nhãn + control + mô tả/lỗi, đặt trong lưới 12 cột của `FormSection`.
+ *
+ * KHÔNG tự vẽ input. Nhãn và lỗi uỷ quyền xuống primitive `Field`, còn control do app chọn —
+ * nếu composite tự dựng input thì mỗi kiểu control mới (combobox, date range, editor) lại phải
+ * mở lại file này — một FormField "đa năng" ôm hết mọi loại control sẽ phình ra không có điểm dừng.
+ */
+declare function FormField({ label, required, description, error, htmlFor, colSpan, orientation, className, children }: FormFieldProps): React.JSX.Element;
+/**
+ * Sentinel cho `Select` của Radix.
+ *
+ * Radix cấm `SelectItem value=""` (chuỗi rỗng dành riêng cho việc xoá lựa chọn), nên mục
+ * "— Không chọn —" phải mang một giá trị giả. Dùng chung hằng số này ở mọi app để tránh mỗi
+ * nơi tự đặt một sentinel rồi lọt xuống payload gửi server.
+ */
+declare const SELECT_EMPTY_VALUE = "__empty__";
+/** Giá trị model ("" = chưa chọn) → giá trị cho Radix Select. */
+declare function toSelectValue(value: string | null | undefined): string;
+/** Giá trị từ Radix Select → giá trị model ("" khi người dùng chọn mục rỗng). */
+declare function fromSelectValue(value: string): string;
+
+export { FormField, type FormFieldColSpan, type FormFieldControlProps, type FormFieldProps, SELECT_EMPTY_VALUE, fromSelectValue, toSelectValue };