@comitor/ui 0.1.0

package/dist/components/composite/toast.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { AlertTriangle, CheckCircle2, Info, XCircle } from "lucide-react";
+import { Toaster as SonnerToaster, toast as sonnerToast } from "sonner";
+function Toaster({ theme = "system", position = "bottom-right", ...props }) {
+  return /* @__PURE__ */ jsx(
+    SonnerToaster,
+    {
+      theme,
+      position,
+      className: "toaster group",
+      icons: {
+        success: /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 text-success" }),
+        warning: /* @__PURE__ */ jsx(AlertTriangle, { className: "size-4 text-warning" }),
+        error: /* @__PURE__ */ jsx(XCircle, { className: "size-4 text-destructive" }),
+        info: /* @__PURE__ */ jsx(Info, { className: "size-4 text-info" })
+      },
+      toastOptions: {
+        classNames: {
+          toast: "group toast group-[.toaster]:bg-popover group-[.toaster]:text-popover-foreground group-[.toaster]:border-border group-[.toaster]:rounded-lg group-[.toaster]:shadow-card",
+          title: "group-[.toast]:text-sm group-[.toast]:font-medium",
+          description: "group-[.toast]:text-sm group-[.toast]:text-muted-foreground",
+          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
+        }
+      },
+      ...props
+    }
+  );
+}
+function toast(title, options = {}) {
+  const { variant = "default", description, duration, action, id } = options;
+  const config = { description, duration, action, id };
+  switch (variant) {
+    case "success":
+      return sonnerToast.success(title, config);
+    case "warning":
+      return sonnerToast.warning(title, config);
+    case "destructive":
+      return sonnerToast.error(title, config);
+    case "info":
+      return sonnerToast.info(title, config);
+    default:
+      return sonnerToast(title, config);
+  }
+}
+function dismissToast(id) {
+  sonnerToast.dismiss(id);
+}
+function toastPromise(promise, messages) {
+  return sonnerToast.promise(promise, {
+    loading: messages.loading ?? "\u0110ang x\u1EED l\xFD\u2026",
+    success: messages.success,
+    error: messages.error
+  });
+}
+export {
+  Toaster,
+  dismissToast,
+  toast,
+  toastPromise
+};
+//# sourceMappingURL=toast.js.map

package/dist/components/composite/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { AlertTriangle, CheckCircle2, Info, XCircle } from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Toaster as SonnerToaster, toast as sonnerToast } from \"sonner\";\n\nexport type ToasterProps = ComponentProps<typeof SonnerToaster>;\n\nexport type ToastVariant = \"default\" | \"success\" | \"warning\" | \"destructive\" | \"info\";\n\nexport interface ToastOptions {\n  description?: ReactNode;\n  variant?: ToastVariant;\n  /** ms; mặc định theo sonner (4000). `Number.POSITIVE_INFINITY` = giữ đến khi người dùng đóng. */\n  duration?: number;\n  /** Nút hành động, vd { label: \"Hoàn tác\", onClick } */\n  action?: { label: string; onClick: () => void };\n  /** id để cập nhật/đóng đúng toast đó (dùng với luồng \"đang lưu…\" → \"đã lưu\") */\n  id?: string | number;\n}\n\n/**\n * Vùng hiển thị toast — đặt MỘT LẦN ở gốc app.\n *\n * `theme` mặc định \"system\" và KHÔNG đọc `next-themes`: entry \".\" của package phải chạy được ở\n * app không có next-themes. App dùng next-themes hãy truyền xuống, nếu không toast sẽ theo\n * `prefers-color-scheme` của hệ điều hành và lệch với theme người dùng tự chọn:\n *\n *     const { resolvedTheme } = useTheme();\n *     <Toaster theme={resolvedTheme as \"light\" | \"dark\"} />\n */\nexport function Toaster({ theme = \"system\", position = \"bottom-right\", ...props }: ToasterProps) {\n  return (\n    <SonnerToaster\n      theme={theme}\n      position={position}\n      className=\"toaster group\"\n      icons={{\n        success: <CheckCircle2 className=\"size-4 text-success\" />,\n        warning: <AlertTriangle className=\"size-4 text-warning\" />,\n        error: <XCircle className=\"size-4 text-destructive\" />,\n        info: <Info className=\"size-4 text-info\" />\n      }}\n      toastOptions={{\n        classNames: {\n          toast:\n            \"group toast group-[.toaster]:bg-popover group-[.toaster]:text-popover-foreground group-[.toaster]:border-border group-[.toaster]:rounded-lg group-[.toaster]:shadow-card\",\n          title: \"group-[.toast]:text-sm group-[.toast]:font-medium\",\n          description: \"group-[.toast]:text-sm group-[.toast]:text-muted-foreground\",\n          actionButton: \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground\",\n          cancelButton: \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground\"\n        }\n      }}\n      {...props}\n    />\n  );\n}\n\n/**\n * Bắn toast theo biến thể của Comitor.\n *\n * Vì sao bọc `sonner` thay vì để app gọi thẳng: tên biến thể ở đây khớp với ngôn ngữ của design\n * system (`destructive`, không phải `error`), và khi cần đổi thư viện toast thì chỉ sửa một file.\n */\nexport function toast(title: ReactNode, options: ToastOptions = {}): string | number {\n  const { variant = \"default\", description, duration, action, id } = options;\n  const config = { description, duration, action, id };\n\n  switch (variant) {\n    case \"success\":\n      return sonnerToast.success(title, config);\n    case \"warning\":\n      return sonnerToast.warning(title, config);\n    case \"destructive\":\n      return sonnerToast.error(title, config);\n    case \"info\":\n      return sonnerToast.info(title, config);\n    default:\n      return sonnerToast(title, config);\n  }\n}\n\n/** Đóng một toast theo id, hoặc đóng tất cả khi không truyền id. */\nexport function dismissToast(id?: string | number): void {\n  sonnerToast.dismiss(id);\n}\n\n/**\n * Toast bám theo một Promise: \"Đang lưu…\" → \"Đã lưu\" / \"Lưu thất bại\".\n * Chuỗi mặc định là tiếng Việt, app ghi đè được từng chuỗi.\n */\nexport function toastPromise<T>(\n  promise: Promise<T>,\n  messages: {\n    loading?: ReactNode;\n    success: ReactNode | ((data: T) => ReactNode);\n    error: ReactNode | ((error: unknown) => ReactNode);\n  }\n) {\n  return sonnerToast.promise(promise, {\n    loading: messages.loading ?? \"Đang xử lý…\",\n    success: messages.success,\n    error: messages.error\n  });\n}\n"],"mappings":";AAsCiB;AApCjB,SAAS,eAAe,cAAc,MAAM,eAAe;AAE3D,SAAS,WAAW,eAAe,SAAS,mBAAmB;AA2BxD,SAAS,QAAQ,EAAE,QAAQ,UAAU,WAAW,gBAAgB,GAAG,MAAM,GAAiB;AAC/F,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,QACL,SAAS,oBAAC,gBAAa,WAAU,uBAAsB;AAAA,QACvD,SAAS,oBAAC,iBAAc,WAAU,uBAAsB;AAAA,QACxD,OAAO,oBAAC,WAAQ,WAAU,2BAA0B;AAAA,QACpD,MAAM,oBAAC,QAAK,WAAU,oBAAmB;AAAA,MAC3C;AAAA,MACA,cAAc;AAAA,QACZ,YAAY;AAAA,UACV,OACE;AAAA,UACF,OAAO;AAAA,UACP,aAAa;AAAA,UACb,cAAc;AAAA,UACd,cAAc;AAAA,QAChB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAQO,SAAS,MAAM,OAAkB,UAAwB,CAAC,GAAoB;AACnF,QAAM,EAAE,UAAU,WAAW,aAAa,UAAU,QAAQ,GAAG,IAAI;AACnE,QAAM,SAAS,EAAE,aAAa,UAAU,QAAQ,GAAG;AAEnD,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,YAAY,QAAQ,OAAO,MAAM;AAAA,IAC1C,KAAK;AACH,aAAO,YAAY,QAAQ,OAAO,MAAM;AAAA,IAC1C,KAAK;AACH,aAAO,YAAY,MAAM,OAAO,MAAM;AAAA,IACxC,KAAK;AACH,aAAO,YAAY,KAAK,OAAO,MAAM;AAAA,IACvC;AACE,aAAO,YAAY,OAAO,MAAM;AAAA,EACpC;AACF;AAGO,SAAS,aAAa,IAA4B;AACvD,cAAY,QAAQ,EAAE;AACxB;AAMO,SAAS,aACd,SACA,UAKA;AACA,SAAO,YAAY,QAAQ,SAAS;AAAA,IAClC,SAAS,SAAS,WAAW;AAAA,IAC7B,SAAS,SAAS;AAAA,IAClB,OAAO,SAAS;AAAA,EAClB,CAAC;AACH;","names":[]}

package/dist/components/ui/accordion.d.ts

@@ -0,0 +1,17 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as React from 'react';
+
+/**
+ * Accordion (Radix). Animation `animate-accordion-down/up` do `tw-animate-css`
+ * cung cấp (đã @import trong styles.css) — không tự khai keyframes ở đây.
+ */
+type AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root>;
+type AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>;
+type AccordionTriggerProps = React.ComponentProps<typeof AccordionPrimitive.Trigger>;
+type AccordionContentProps = React.ComponentProps<typeof AccordionPrimitive.Content>;
+declare function Accordion({ ...props }: AccordionProps): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: AccordionItemProps): React.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps): React.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: AccordionContentProps): React.JSX.Element;
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps };

package/dist/components/ui/accordion.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+function Accordion({ ...props }) {
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("border-b last:border-b-0", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-colors duration-150 ease-out outline-none hover:underline disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+      ]
+    }
+  ) });
+}
+function AccordionContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Content,
+    {
+      "data-slot": "accordion-content",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: cn("pt-0 pb-4", className), children })
+    }
+  );
+}
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+};
+//# sourceMappingURL=accordion.js.map

package/dist/components/ui/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/**\n * Accordion (Radix). Animation `animate-accordion-down/up` do `tw-animate-css`\n * cung cấp (đã @import trong styles.css) — không tự khai keyframes ở đây.\n */\n\nexport type AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root>;\nexport type AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>;\nexport type AccordionTriggerProps = React.ComponentProps<typeof AccordionPrimitive.Trigger>;\nexport type AccordionContentProps = React.ComponentProps<typeof AccordionPrimitive.Content>;\n\nfunction Accordion({ ...props }: AccordionProps) {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />;\n}\n\nfunction AccordionItem({ className, ...props }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"border-b last:border-b-0\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AccordionTrigger({ className, children, ...props }: AccordionTriggerProps) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-colors duration-150 ease-out outline-none hover:underline disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon className=\"text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nfunction AccordionContent({ className, children, ...props }: AccordionContentProps) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm\"\n      {...props}\n    >\n      <div className={cn(\"pt-0 pb-4\", className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger };\n"],"mappings":";AAkBS,cAgBH,YAhBG;AAhBT,YAAY,wBAAwB;AACpC,SAAS,uBAAuB;AAEhC,SAAS,UAAU;AAYnB,SAAS,UAAU,EAAE,GAAG,MAAM,GAAmB;AAC/C,SAAO,oBAAC,mBAAmB,MAAnB,EAAwB,aAAU,aAAa,GAAG,OAAO;AACnE;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,MAAM,GAAuB;AAClE,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,4BAA4B,SAAS;AAAA,MAClD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,iBAAiB,EAAE,WAAW,UAAU,GAAG,MAAM,GAA0B;AAClF,SACE,oBAAC,mBAAmB,QAAnB,EAA0B,WAAU,QACnC;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACD,oBAAC,mBAAgB,WAAU,+GAA8G;AAAA;AAAA;AAAA,EAC3I,GACF;AAEJ;AAEA,SAAS,iBAAiB,EAAE,WAAW,UAAU,GAAG,MAAM,GAA0B;AAClF,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAU;AAAA,MACT,GAAG;AAAA,MAEJ,8BAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GAAI,UAAS;AAAA;AAAA,EACxD;AAEJ;","names":[]}

package/dist/components/ui/alert-dialog.d.ts

@@ -0,0 +1,34 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as React from 'react';
+
+/**
+ * AlertDialog — hộp thoại xác nhận (Radix AlertDialog): chặn thao tác, buộc chọn
+ * Hủy/Đồng ý, không đóng được bằng click ra ngoài.
+ *
+ * Nút Action/Cancel mượn `buttonVariants` của Button để đồng bộ thị giác.
+ * Composite `ConfirmDialog` (Tier 2) sẽ bọc component này.
+ */
+type AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>;
+declare function AlertDialog({ ...props }: AlertDialogProps): React.JSX.Element;
+type AlertDialogTriggerProps = React.ComponentProps<typeof AlertDialogPrimitive.Trigger>;
+declare function AlertDialogTrigger({ ...props }: AlertDialogTriggerProps): React.JSX.Element;
+type AlertDialogPortalProps = React.ComponentProps<typeof AlertDialogPrimitive.Portal>;
+declare function AlertDialogPortal({ ...props }: AlertDialogPortalProps): React.JSX.Element;
+type AlertDialogOverlayProps = React.ComponentProps<typeof AlertDialogPrimitive.Overlay>;
+declare function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps): React.JSX.Element;
+type AlertDialogContentProps = React.ComponentProps<typeof AlertDialogPrimitive.Content>;
+declare function AlertDialogContent({ className, ...props }: AlertDialogContentProps): React.JSX.Element;
+type AlertDialogHeaderProps = React.ComponentProps<"div">;
+declare function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): React.JSX.Element;
+type AlertDialogFooterProps = React.ComponentProps<"div">;
+declare function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): React.JSX.Element;
+type AlertDialogTitleProps = React.ComponentProps<typeof AlertDialogPrimitive.Title>;
+declare function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps): React.JSX.Element;
+type AlertDialogDescriptionProps = React.ComponentProps<typeof AlertDialogPrimitive.Description>;
+declare function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps): React.JSX.Element;
+type AlertDialogActionProps = React.ComponentProps<typeof AlertDialogPrimitive.Action>;
+declare function AlertDialogAction({ className, ...props }: AlertDialogActionProps): React.JSX.Element;
+type AlertDialogCancelProps = React.ComponentProps<typeof AlertDialogPrimitive.Cancel>;
+declare function AlertDialogCancel({ className, ...props }: AlertDialogCancelProps): React.JSX.Element;
+
+export { AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, type AlertDialogPortalProps, type AlertDialogProps, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps };

package/dist/components/ui/alert-dialog.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { cn } from "../../lib/cn.js";
+import { buttonVariants } from "./button.js";
+function AlertDialog({ ...props }) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Overlay,
+    {
+      "data-slot": "alert-dialog-overlay",
+      className: cn(
+        "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-ink/60 dark:bg-ink/80 backdrop-blur-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialogPrimitive.Content,
+      {
+        "data-slot": "alert-dialog-content",
+        className: cn(
+          "bg-card 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-xl border border-border p-6 shadow-overlay duration-200 sm:max-w-lg",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+function AlertDialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function AlertDialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+      ...props
+    }
+  );
+}
+function AlertDialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: cn("text-lg font-semibold text-foreground", className),
+      ...props
+    }
+  );
+}
+function AlertDialogDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function AlertDialogAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { className: cn(buttonVariants(), className), ...props });
+}
+function AlertDialogCancel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, { className: cn(buttonVariants({ variant: "outline" }), className), ...props });
+}
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger
+};
+//# sourceMappingURL=alert-dialog.js.map

package/dist/components/ui/alert-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { buttonVariants } from \"./button.js\";\n\n/**\n * AlertDialog — hộp thoại xác nhận (Radix AlertDialog): chặn thao tác, buộc chọn\n * Hủy/Đồng ý, không đóng được bằng click ra ngoài.\n *\n * Nút Action/Cancel mượn `buttonVariants` của Button để đồng bộ thị giác.\n * Composite `ConfirmDialog` (Tier 2) sẽ bọc component này.\n */\n\nexport type AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>;\n\nfunction AlertDialog({ ...props }: AlertDialogProps) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nexport type AlertDialogTriggerProps = React.ComponentProps<typeof AlertDialogPrimitive.Trigger>;\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogTriggerProps) {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n}\n\nexport type AlertDialogPortalProps = React.ComponentProps<typeof AlertDialogPrimitive.Portal>;\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPortalProps) {\n  return <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />;\n}\n\nexport type AlertDialogOverlayProps = React.ComponentProps<typeof AlertDialogPrimitive.Overlay>;\n\nfunction AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"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-ink/60 dark:bg-ink/80 backdrop-blur-sm\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type AlertDialogContentProps = React.ComponentProps<typeof AlertDialogPrimitive.Content>;\n\nfunction AlertDialogContent({ className, ...props }: AlertDialogContentProps) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          \"bg-card 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-xl border border-border p-6 shadow-overlay duration-200 sm:max-w-lg\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  );\n}\n\nexport type AlertDialogHeaderProps = React.ComponentProps<\"div\">;\n\nfunction AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type AlertDialogFooterProps = React.ComponentProps<\"div\">;\n\nfunction AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type AlertDialogTitleProps = React.ComponentProps<typeof AlertDialogPrimitive.Title>;\n\nfunction AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\"text-lg font-semibold text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type AlertDialogDescriptionProps = React.ComponentProps<typeof AlertDialogPrimitive.Description>;\n\nfunction AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type AlertDialogActionProps = React.ComponentProps<typeof AlertDialogPrimitive.Action>;\n\nfunction AlertDialogAction({ className, ...props }: AlertDialogActionProps) {\n  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;\n}\n\nexport type AlertDialogCancelProps = React.ComponentProps<typeof AlertDialogPrimitive.Cancel>;\n\nfunction AlertDialogCancel({ className, ...props }: AlertDialogCancelProps) {\n  return <AlertDialogPrimitive.Cancel className={cn(buttonVariants({ variant: \"outline\" }), className)} {...props} />;\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger\n};\n"],"mappings":";AAkBS,cAkCL,YAlCK;AAhBT,YAAY,0BAA0B;AAEtC,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAY/B,SAAS,YAAY,EAAE,GAAG,MAAM,GAAqB;AACnD,SAAO,oBAAC,qBAAqB,MAArB,EAA0B,aAAU,gBAAgB,GAAG,OAAO;AACxE;AAIA,SAAS,mBAAmB,EAAE,GAAG,MAAM,GAA4B;AACjE,SAAO,oBAAC,qBAAqB,SAArB,EAA6B,aAAU,wBAAwB,GAAG,OAAO;AACnF;AAIA,SAAS,kBAAkB,EAAE,GAAG,MAAM,GAA2B;AAC/D,SAAO,oBAAC,qBAAqB,QAArB,EAA4B,aAAU,uBAAuB,GAAG,OAAO;AACjF;AAIA,SAAS,mBAAmB,EAAE,WAAW,GAAG,MAAM,GAA4B;AAC5E,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAIA,SAAS,mBAAmB,EAAE,WAAW,GAAG,MAAM,GAA4B;AAC5E,SACE,qBAAC,qBACC;AAAA,wBAAC,sBAAmB;AAAA,IACpB;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,KACF;AAEJ;AAIA,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAA2B;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,gDAAgD,SAAS;AAAA,MACtE,GAAG;AAAA;AAAA,EACN;AAEJ;AAIA,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAA2B;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,0DAA0D,SAAS;AAAA,MAChF,GAAG;AAAA;AAAA,EACN;AAEJ;AAIA,SAAS,iBAAiB,EAAE,WAAW,GAAG,MAAM,GAA0B;AACxE,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,yCAAyC,SAAS;AAAA,MAC/D,GAAG;AAAA;AAAA,EACN;AAEJ;AAIA,SAAS,uBAAuB,EAAE,WAAW,GAAG,MAAM,GAAgC;AACpF,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACN;AAEJ;AAIA,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAA2B;AAC1E,SAAO,oBAAC,qBAAqB,QAArB,EAA4B,WAAW,GAAG,eAAe,GAAG,SAAS,GAAI,GAAG,OAAO;AAC7F;AAIA,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAA2B;AAC1E,SAAO,oBAAC,qBAAqB,QAArB,EAA4B,WAAW,GAAG,eAAe,EAAE,SAAS,UAAU,CAAC,GAAG,SAAS,GAAI,GAAG,OAAO;AACnH;","names":[]}

package/dist/components/ui/alert.d.ts

@@ -0,0 +1,16 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface AlertProps extends React.ComponentProps<"div">, VariantProps<typeof alertVariants> {
+}
+type AlertTitleProps = React.ComponentProps<"div">;
+type AlertDescriptionProps = React.ComponentProps<"div">;
+declare function Alert({ className, variant, ...props }: AlertProps): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: AlertTitleProps): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: AlertDescriptionProps): React.JSX.Element;
+
+export { Alert, AlertDescription, type AlertDescriptionProps, type AlertProps, AlertTitle, type AlertTitleProps, alertVariants };

package/dist/components/ui/alert.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/cn.js";
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Alert({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "alert", role: "alert", className: cn(alertVariants({ variant }), className), ...props });
+}
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className),
+      ...props
+    }
+  );
+}
+function AlertDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  alertVariants
+};
+//# sourceMappingURL=alert.js.map

package/dist/components/ui/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/alert.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive: \"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\"\n    }\n  }\n);\n\nexport interface AlertProps extends React.ComponentProps<\"div\">, VariantProps<typeof alertVariants> {}\nexport type AlertTitleProps = React.ComponentProps<\"div\">;\nexport type AlertDescriptionProps = React.ComponentProps<\"div\">;\n\nfunction Alert({ className, variant, ...props }: AlertProps) {\n  return <div data-slot=\"alert\" role=\"alert\" className={cn(alertVariants({ variant }), className)} {...props} />;\n}\n\nfunction AlertTitle({ className, ...props }: AlertTitleProps) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({ className, ...props }: AlertDescriptionProps) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertDescription, AlertTitle, alertVariants };\n"],"mappings":"AAwBS;AAxBT,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAEnB,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAMA,SAAS,MAAM,EAAE,WAAW,SAAS,GAAG,MAAM,GAAe;AAC3D,SAAO,oBAAC,SAAI,aAAU,SAAQ,MAAK,SAAQ,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS,GAAI,GAAG,OAAO;AAC9G;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,+DAA+D,SAAS;AAAA,MACrF,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,MAAM,GAA0B;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/ui/aspect-ratio.d.ts

@@ -0,0 +1,7 @@
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+import * as React from 'react';
+
+type AspectRatioProps = React.ComponentProps<typeof AspectRatioPrimitive.Root>;
+declare function AspectRatio({ ...props }: AspectRatioProps): React.JSX.Element;
+
+export { AspectRatio, type AspectRatioProps };

package/dist/components/ui/aspect-ratio.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+function AspectRatio({ ...props }) {
+  return /* @__PURE__ */ jsx(AspectRatioPrimitive.Root, { "data-slot": "aspect-ratio", ...props });
+}
+export {
+  AspectRatio
+};
+//# sourceMappingURL=aspect-ratio.js.map

package/dist/components/ui/aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/aspect-ratio.tsx"],"sourcesContent":["\"use client\";\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\";\nimport type * as React from \"react\";\n\nexport type AspectRatioProps = React.ComponentProps<typeof AspectRatioPrimitive.Root>;\n\nfunction AspectRatio({ ...props }: AspectRatioProps) {\n  return <AspectRatioPrimitive.Root data-slot=\"aspect-ratio\" {...props} />;\n}\n\nexport { AspectRatio };\n"],"mappings":";AAQS;AANT,YAAY,0BAA0B;AAKtC,SAAS,YAAY,EAAE,GAAG,MAAM,GAAqB;AACnD,SAAO,oBAAC,qBAAqB,MAArB,EAA0B,aAAU,gBAAgB,GAAG,OAAO;AACxE;","names":[]}

package/dist/components/ui/avatar.d.ts

@@ -0,0 +1,11 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
+
+type AvatarProps = React.ComponentProps<typeof AvatarPrimitive.Root>;
+type AvatarImageProps = React.ComponentProps<typeof AvatarPrimitive.Image>;
+type AvatarFallbackProps = React.ComponentProps<typeof AvatarPrimitive.Fallback>;
+declare function Avatar({ className, ...props }: AvatarProps): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: AvatarImageProps): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: AvatarFallbackProps): React.JSX.Element;
+
+export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps };

package/dist/components/ui/avatar.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../lib/cn.js";
+function Avatar({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Root,
+    {
+      "data-slot": "avatar",
+      className: cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className),
+      ...props
+    }
+  );
+}
+function AvatarImage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn("aspect-square size-full", className), ...props });
+}
+function AvatarFallback({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AvatarPrimitive.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn("bg-muted flex size-full items-center justify-center rounded-full", className),
+      ...props
+    }
+  );
+}
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+};
+//# sourceMappingURL=avatar.js.map

package/dist/components/ui/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\nexport type AvatarProps = React.ComponentProps<typeof AvatarPrimitive.Root>;\nexport type AvatarImageProps = React.ComponentProps<typeof AvatarPrimitive.Image>;\nexport type AvatarFallbackProps = React.ComponentProps<typeof AvatarPrimitive.Fallback>;\n\nfunction Avatar({ className, ...props }: AvatarProps) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      className={cn(\"relative flex size-8 shrink-0 overflow-hidden rounded-full\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarImage({ className, ...props }: AvatarImageProps) {\n  return (\n    <AvatarPrimitive.Image data-slot=\"avatar-image\" className={cn(\"aspect-square size-full\", className)} {...props} />\n  );\n}\n\nfunction AvatarFallback({ className, ...props }: AvatarFallbackProps) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\"bg-muted flex size-full items-center justify-center rounded-full\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Avatar, AvatarFallback, AvatarImage };\n"],"mappings":";AAYI;AAVJ,YAAY,qBAAqB;AAEjC,SAAS,UAAU;AAMnB,SAAS,OAAO,EAAE,WAAW,GAAG,MAAM,GAAgB;AACpD,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,8DAA8D,SAAS;AAAA,MACpF,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAqB;AAC9D,SACE,oBAAC,gBAAgB,OAAhB,EAAsB,aAAU,gBAAe,WAAW,GAAG,2BAA2B,SAAS,GAAI,GAAG,OAAO;AAEpH;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAAwB;AACpE,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,oEAAoE,SAAS;AAAA,MAC1F,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,15 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "primary" | "secondary" | "outline" | "success" | "warning" | "destructive" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {
+    /** Render ra chính phần tử con (Radix Slot) thay vì thẻ <span>. */
+    asChild?: boolean;
+}
+declare function Badge({ className, variant, size, asChild, ...props }: BadgeProps): React.JSX.Element;
+
+export { Badge, type BadgeProps, badgeVariants };

package/dist/components/ui/badge.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/cn.js";
+const badgeVariants = cva(
+  "inline-flex items-center font-medium rounded-md whitespace-nowrap gap-1 [&>svg]:size-3 [&>svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-gold-100 text-gold-600 dark:bg-gold-500/20 dark:text-gold-200",
+        primary: "bg-gold-100 text-gold-600 dark:bg-gold-500/20 dark:text-gold-200",
+        secondary: "bg-secondary text-secondary-foreground",
+        outline: "bg-transparent border border-border text-foreground",
+        success: "bg-success/15 text-[color:color-mix(in_srgb,var(--success),var(--ink)_40%)] dark:text-success",
+        warning: "bg-warning/20 text-[color:color-mix(in_srgb,var(--warning),var(--ink)_55%)] dark:text-warning",
+        destructive: "bg-destructive/15 text-[color:color-mix(in_srgb,var(--destructive),var(--ink)_30%)] dark:text-red"
+      },
+      size: {
+        sm: "px-1.5 py-0.5 text-[10px]",
+        md: "px-2 py-0.5 text-xs"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+function Badge({ className, variant, size, asChild = false, ...props }) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(Comp, { "data-slot": "badge", className: cn(badgeVariants({ variant, size }), className), ...props });
+}
+export {
+  Badge,
+  badgeVariants
+};
+//# sourceMappingURL=badge.js.map

package/dist/components/ui/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/badge.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/*\n * Style port từ comitor-ds (biến thể tonal + 2 cỡ sm/md).\n * API giữ tương thích shadcn (cva + asChild + data-slot).\n *\n * ─ VÌ SAO CHỮ CỦA BIẾN THỂ TONAL PHẢI TRỘN THÊM `--ink` Ở LIGHT MODE ─\n *\n * Badge in chữ 10–12px nên phải đạt WCAG AA 4.5:1. Bản port cũ dùng thẳng\n * `text-green / text-yellow / text-red` trên nền tint 10% và HỎNG ở light mode\n * (đo bằng công thức WCAG, nền trắng):\n *\n *     success  #2EA56A trên bg-green/10   = 2,82:1   ✗\n *     warning  #F2C94C trên bg-yellow/10  = 1,52:1   ✗  (gần như không đọc được)\n *     destructive #D64545 trên bg-red/10  = 3,83:1   ✗\n *\n * Nguyên tắc sửa lấy từ chính repo này (`composite/status-config.ts`,\n * `composite/stat-card.tsx`): bậc màu TỐI cho light, bậc SÁNG cho dark. Khác ở chỗ\n * thang gold có sẵn bậc tối (`gold-500`) để mượn, còn --success/--warning/--destructive\n * KHÔNG có bậc nào — nên bậc tối được DẪN XUẤT tại chỗ bằng `color-mix` với `--ink`.\n * Cách này giữ đúng luật \"không hex trong component\" và vẫn đổi theo app nào tự set lại\n * token của mình (nếu styles.css bổ sung bậc tối --success-600/--warning-600/… thì thay\n * mấy chuỗi color-mix bên dưới bằng token đó là xong).\n *\n * Tỉ lệ trộn khác nhau theo từng màu vì độ sáng gốc khác nhau (vàng sáng hơn lục,\n * lục sáng hơn đỏ); chọn sao cho mọi biến thể ≥ 5:1, có biên an toàn khi app đổi token:\n *\n *     success     ink 40% → #216948 trên bg-success/15      = 5,59:1  ✓\n *     warning     ink 55% → #74632E trên bg-warning/20      = 5,31:1  ✓\n *     destructive ink 30% → #993536 trên bg-destructive/15  = 5,82:1  ✓\n *\n * Dark mode giữ token sáng, không cần trộn: 7,47:1 / 7,20:1 / 5,17:1 trên nền --card.\n * Riêng destructive ở dark phải dùng `dark:text-red` chứ KHÔNG phải `dark:text-destructive`:\n * `--destructive` cố ý ghim #D64545 ở cả hai theme (để nút đặc + chữ trắng vẫn đủ tương phản),\n * dùng làm CHỮ trên nền tối chỉ được 3,58:1 ✗. `--red` là bậc đã nâng sáng cho dark (#F87171)\n * — đúng vai trò mà styles.css khai nó ra.\n *\n * Lưu ý: Tailwind sinh kèm fallback `color: var(--token)` cho trình duyệt không hỗ trợ\n * color-mix (trước 2023). Ở đó badge rơi về màu gốc — cùng mức hỏng như bản cũ, không tệ hơn;\n * và mọi tiện ích tint kiểu `bg-success/15` của Tailwind v4 cũng dựa trên color-mix nên đây là ràng buộc chung.\n */\nconst badgeVariants = cva(\n  \"inline-flex items-center font-medium rounded-md whitespace-nowrap gap-1 [&>svg]:size-3 [&>svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-gold-100 text-gold-600 dark:bg-gold-500/20 dark:text-gold-200\",\n        primary: \"bg-gold-100 text-gold-600 dark:bg-gold-500/20 dark:text-gold-200\",\n        secondary: \"bg-secondary text-secondary-foreground\",\n        outline: \"bg-transparent border border-border text-foreground\",\n        success: \"bg-success/15 text-[color:color-mix(in_srgb,var(--success),var(--ink)_40%)] dark:text-success\",\n        warning: \"bg-warning/20 text-[color:color-mix(in_srgb,var(--warning),var(--ink)_55%)] dark:text-warning\",\n        destructive: \"bg-destructive/15 text-[color:color-mix(in_srgb,var(--destructive),var(--ink)_30%)] dark:text-red\"\n      },\n      size: {\n        sm: \"px-1.5 py-0.5 text-[10px]\",\n        md: \"px-2 py-0.5 text-xs\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\"\n    }\n  }\n);\n\nexport interface BadgeProps extends React.ComponentProps<\"span\">, VariantProps<typeof badgeVariants> {\n  /** Render ra chính phần tử con (Radix Slot) thay vì thẻ <span>. */\n  asChild?: boolean;\n}\n\nfunction Badge({ className, variant, size, asChild = false, ...props }: BadgeProps) {\n  const Comp = asChild ? Slot : \"span\";\n\n  return <Comp data-slot=\"badge\" className={cn(badgeVariants({ variant, size }), className)} {...props} />;\n}\n\nexport { Badge, badgeVariants };\n"],"mappings":"AA6ES;AA7ET,SAAS,YAAY;AACrB,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAyCnB,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,aAAa;AAAA,MACf;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAOA,SAAS,MAAM,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,GAAG,MAAM,GAAe;AAClF,QAAM,OAAO,UAAU,OAAO;AAE9B,SAAO,oBAAC,QAAK,aAAU,SAAQ,WAAW,GAAG,cAAc,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS,GAAI,GAAG,OAAO;AACxG;","names":[]}

package/dist/components/ui/breadcrumb.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+/**
+ * Breadcrumb — primitive tĩnh (không "use client", dùng được trong RSC).
+ * Chuỗi hiển thị mặc định là tiếng Việt và override được qua props tương ứng.
+ *
+ * Điều hướng: bọc `next/link` bằng `<BreadcrumbLink asChild><Link …/></BreadcrumbLink>`
+ * để primitive không phụ thuộc `next/*`.
+ */
+type BreadcrumbProps = React.ComponentProps<"nav">;
+type BreadcrumbListProps = React.ComponentProps<"ol">;
+type BreadcrumbItemProps = React.ComponentProps<"li">;
+type BreadcrumbLinkProps = React.ComponentProps<"a"> & {
+    asChild?: boolean;
+};
+type BreadcrumbPageProps = React.ComponentProps<"span">;
+type BreadcrumbSeparatorProps = React.ComponentProps<"li">;
+type BreadcrumbEllipsisProps = React.ComponentProps<"span"> & {
+    /** Nhãn chỉ dành cho trình đọc màn hình. */
+    srLabel?: string;
+};
+declare function Breadcrumb({ ...props }: BreadcrumbProps): React.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: BreadcrumbListProps): React.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: BreadcrumbItemProps): React.JSX.Element;
+declare function BreadcrumbLink({ asChild, className, ...props }: BreadcrumbLinkProps): React.JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: BreadcrumbPageProps): React.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorProps): React.JSX.Element;
+declare function BreadcrumbEllipsis({ className, srLabel, ...props }: BreadcrumbEllipsisProps): React.JSX.Element;
+
+export { Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps };