@comitor/ui 0.1.0

package/dist/components/ui/navigation-menu.js

@@ -0,0 +1,123 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+function NavigationMenu({ className, children, viewport = true, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    NavigationMenuPrimitive.Root,
+    {
+      "data-slot": "navigation-menu",
+      "data-viewport": viewport,
+      className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className),
+      ...props,
+      children: [
+        children,
+        viewport && /* @__PURE__ */ jsx(NavigationMenuViewport, {})
+      ]
+    }
+  );
+}
+function NavigationMenuList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.List,
+    {
+      "data-slot": "navigation-menu-list",
+      className: cn("group flex flex-1 list-none items-center justify-center gap-1", className),
+      ...props
+    }
+  );
+}
+function NavigationMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Item, { "data-slot": "navigation-menu-item", className: cn("relative", className), ...props });
+}
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 outline-none transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+);
+function NavigationMenuTrigger({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    NavigationMenuPrimitive.Trigger,
+    {
+      "data-slot": "navigation-menu-trigger",
+      className: cn(navigationMenuTriggerStyle(), "group", className),
+      ...props,
+      children: [
+        children,
+        " ",
+        /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
+function NavigationMenuContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.Content,
+    {
+      "data-slot": "navigation-menu-content",
+      className: cn(
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow-overlay group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function NavigationMenuViewport({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: "absolute top-full left-0 isolate z-50 flex justify-center", children: /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.Viewport,
+    {
+      "data-slot": "navigation-menu-viewport",
+      className: cn(
+        "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-overlay md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function NavigationMenuLink({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.Link,
+    {
+      "data-slot": "navigation-menu-link",
+      className: cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-colors duration-150 ease-out outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function NavigationMenuIndicator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.Indicator,
+    {
+      "data-slot": "navigation-menu-indicator",
+      className: cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" })
+    }
+  );
+}
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle
+};
+//# sourceMappingURL=navigation-menu.js.map

package/dist/components/ui/navigation-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/navigation-menu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\";\nimport { cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/**\n * NavigationMenu — thanh điều hướng có menu bung (Radix NavigationMenu).\n *\n * Dùng cho site marketing / trang công khai. Trong app đã đăng nhập thì điều hướng\n * là Sidebar + AppLauncher, không dùng component này.\n *\n * KHÔNG có directive \"use client\": file chỉ khai báo bố cục, phần state nằm trong\n * gói Radix (bản thân gói đã đánh dấu client) → dùng được trực tiếp trong RSC.\n *\n * `viewport` (mặc định true): nội dung menu render vào một khung chung phía dưới\n * thanh, có hiệu ứng đổi kích thước. Đặt false khi muốn mỗi mục tự bung popover\n * riêng — style tương ứng bám theo `group-data-[viewport=false]`.\n */\n\nexport type NavigationMenuProps = React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean;\n};\n\nfunction NavigationMenu({ className, children, viewport = true, ...props }: NavigationMenuProps) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\", className)}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\nexport type NavigationMenuListProps = React.ComponentProps<typeof NavigationMenuPrimitive.List>;\n\nfunction NavigationMenuList({ className, ...props }: NavigationMenuListProps) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\"group flex flex-1 list-none items-center justify-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type NavigationMenuItemProps = React.ComponentProps<typeof NavigationMenuPrimitive.Item>;\n\nfunction NavigationMenuItem({ className, ...props }: NavigationMenuItemProps) {\n  return (\n    <NavigationMenuPrimitive.Item data-slot=\"navigation-menu-item\" className={cn(\"relative\", className)} {...props} />\n  );\n}\n\n/** Style dùng lại cho mục điều hướng không có menu con (vd bọc thẻ <a>). */\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 outline-none transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n);\n\nexport type NavigationMenuTriggerProps = React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>;\n\nfunction NavigationMenuTrigger({ className, children, ...props }: NavigationMenuTriggerProps) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <ChevronDownIcon\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\nexport type NavigationMenuContentProps = React.ComponentProps<typeof NavigationMenuPrimitive.Content>;\n\nfunction NavigationMenuContent({ className, ...props }: NavigationMenuContentProps) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto\",\n        \"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow-overlay group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type NavigationMenuViewportProps = React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>;\n\nfunction NavigationMenuViewport({ className, ...props }: NavigationMenuViewportProps) {\n  return (\n    <div className=\"absolute top-full left-0 isolate z-50 flex justify-center\">\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-overlay md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport type NavigationMenuLinkProps = React.ComponentProps<typeof NavigationMenuPrimitive.Link>;\n\nfunction NavigationMenuLink({ className, ...props }: NavigationMenuLinkProps) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-colors duration-150 ease-out outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type NavigationMenuIndicatorProps = React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>;\n\nfunction NavigationMenuIndicator({ className, ...props }: NavigationMenuIndicatorProps) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle\n};\n"],"mappings":"AA0BI,SAOe,KAPf;AA1BJ,YAAY,6BAA6B;AACzC,SAAS,WAAW;AACpB,SAAS,uBAAuB;AAEhC,SAAS,UAAU;AAoBnB,SAAS,eAAe,EAAE,WAAW,UAAU,WAAW,MAAM,GAAG,MAAM,GAAwB;AAC/F,SACE;AAAA,IAAC,wBAAwB;AAAA,IAAxB;AAAA,MACC,aAAU;AAAA,MACV,iBAAe;AAAA,MACf,WAAW,GAAG,oFAAoF,SAAS;AAAA,MAC1G,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,YAAY,oBAAC,0BAAuB;AAAA;AAAA;AAAA,EACvC;AAEJ;AAIA,SAAS,mBAAmB,EAAE,WAAW,GAAG,MAAM,GAA4B;AAC5E,SACE;AAAA,IAAC,wBAAwB;AAAA,IAAxB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iEAAiE,SAAS;AAAA,MACvF,GAAG;AAAA;AAAA,EACN;AAEJ;AAIA,SAAS,mBAAmB,EAAE,WAAW,GAAG,MAAM,GAA4B;AAC5E,SACE,oBAAC,wBAAwB,MAAxB,EAA6B,aAAU,wBAAuB,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,OAAO;AAEpH;AAGA,MAAM,6BAA6B;AAAA,EACjC;AACF;AAIA,SAAS,sBAAsB,EAAE,WAAW,UAAU,GAAG,MAAM,GAA+B;AAC5F,SACE;AAAA,IAAC,wBAAwB;AAAA,IAAxB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,2BAA2B,GAAG,SAAS,SAAS;AAAA,MAC7D,GAAG;AAAA,MAEH;AAAA;AAAA,QAAU;AAAA,QACX;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA;AAAA,QACd;AAAA;AAAA;AAAA,EACF;AAEJ;AAIA,SAAS,sBAAsB,EAAE,WAAW,GAAG,MAAM,GAA+B;AAClF,SACE;AAAA,IAAC,wBAAwB;AAAA,IAAxB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAIA,SAAS,uBAAuB,EAAE,WAAW,GAAG,MAAM,GAAgC;AACpF,SACE,oBAAC,SAAI,WAAU,6DACb;AAAA,IAAC,wBAAwB;AAAA,IAAxB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AAIA,SAAS,mBAAmB,EAAE,WAAW,GAAG,MAAM,GAA4B;AAC5E,SACE;AAAA,IAAC,wBAAwB;AAAA,IAAxB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAIA,SAAS,wBAAwB,EAAE,WAAW,GAAG,MAAM,GAAiC;AACtF,SACE;AAAA,IAAC,wBAAwB;AAAA,IAAxB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAC,SAAI,WAAU,0EAAyE;AAAA;AAAA,EAC1F;AAEJ;","names":[]}

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ButtonProps } from './button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+/**
+ * Pagination — primitive tĩnh (không "use client", dùng được trong RSC).
+ * Đây là bộ khung thẻ `<a>`; bản "biết đếm trang" là composite `TablePagination`.
+ *
+ * Chuỗi hiển thị mặc định tiếng Việt, override qua prop `label` / `srLabel`.
+ * Muốn dùng `next/link`: `<PaginationLink asChild>` chưa có ở primitive này —
+ * truyền `href` trực tiếp hoặc bọc bằng composite ở tầng app.
+ */
+type PaginationProps = React.ComponentProps<"nav">;
+type PaginationContentProps = React.ComponentProps<"ul">;
+type PaginationItemProps = React.ComponentProps<"li">;
+type PaginationLinkProps = {
+    isActive?: boolean;
+} & Pick<ButtonProps, "size"> & React.ComponentProps<"a">;
+type PaginationPreviousProps = PaginationLinkProps & {
+    /** Nhãn hiển thị (ẩn ở màn hình nhỏ). Mặc định "Trước". */
+    label?: React.ReactNode;
+};
+type PaginationNextProps = PaginationLinkProps & {
+    /** Nhãn hiển thị (ẩn ở màn hình nhỏ). Mặc định "Sau". */
+    label?: React.ReactNode;
+};
+type PaginationEllipsisProps = React.ComponentProps<"span"> & {
+    /** Nhãn chỉ dành cho trình đọc màn hình. */
+    srLabel?: string;
+};
+declare function Pagination({ className, ...props }: PaginationProps): React.JSX.Element;
+declare function PaginationContent({ className, ...props }: PaginationContentProps): React.JSX.Element;
+declare function PaginationItem({ ...props }: PaginationItemProps): React.JSX.Element;
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): React.JSX.Element;
+declare function PaginationPrevious({ className, label, ...props }: PaginationPreviousProps): React.JSX.Element;
+declare function PaginationNext({ className, label, ...props }: PaginationNextProps): React.JSX.Element;
+declare function PaginationEllipsis({ className, srLabel, ...props }: PaginationEllipsisProps): React.JSX.Element;
+
+export { Pagination, PaginationContent, type PaginationContentProps, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps };

package/dist/components/ui/pagination.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+import { buttonVariants } from "./button.js";
+function Pagination({ className, ...props }) {
+  return (
+    // Thẻ <nav> đã ngầm mang role="navigation" — bản comitor-ds khai lại là thừa, bỏ đi.
+    /* @__PURE__ */ jsx(
+      "nav",
+      {
+        "aria-label": "Ph\xE2n trang",
+        "data-slot": "pagination",
+        className: cn("mx-auto flex w-full justify-center", className),
+        ...props
+      }
+    )
+  );
+}
+function PaginationContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx("ul", { "data-slot": "pagination-content", className: cn("flex flex-row items-center gap-1", className), ...props });
+}
+function PaginationItem({ ...props }) {
+  return /* @__PURE__ */ jsx("li", { "data-slot": "pagination-item", ...props });
+}
+function PaginationLink({ className, isActive, size = "icon", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      "aria-current": isActive ? "page" : void 0,
+      "data-slot": "pagination-link",
+      "data-active": isActive,
+      className: cn(
+        buttonVariants({ variant: "ghost", size }),
+        isActive && "border-gold-300 bg-gold-50 font-semibold text-foreground hover:bg-gold-50 dark:bg-gold-500/10 dark:hover:bg-gold-500/10",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PaginationPrevious({ className, label = "Tr\u01B0\u1EDBc", ...props }) {
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      "aria-label": "V\u1EC1 trang tr\u01B0\u1EDBc",
+      size: "default",
+      className: cn("gap-1 px-2.5 sm:pl-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: label })
+      ]
+    }
+  );
+}
+function PaginationNext({ className, label = "Sau", ...props }) {
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      "aria-label": "T\u1EDBi trang sau",
+      size: "default",
+      className: cn("gap-1 px-2.5 sm:pr-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: label }),
+        /* @__PURE__ */ jsx(ChevronRightIcon, {})
+      ]
+    }
+  );
+}
+function PaginationEllipsis({ className, srLabel = "Th\xEAm trang", ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-slot": "pagination-ellipsis",
+      className: cn("flex size-9 items-center justify-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: srLabel })
+      ]
+    }
+  );
+}
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious
+};
+//# sourceMappingURL=pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/pagination.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { type ButtonProps, buttonVariants } from \"./button.js\";\n\n/**\n * Pagination — primitive tĩnh (không \"use client\", dùng được trong RSC).\n * Đây là bộ khung thẻ `<a>`; bản \"biết đếm trang\" là composite `TablePagination`.\n *\n * Chuỗi hiển thị mặc định tiếng Việt, override qua prop `label` / `srLabel`.\n * Muốn dùng `next/link`: `<PaginationLink asChild>` chưa có ở primitive này —\n * truyền `href` trực tiếp hoặc bọc bằng composite ở tầng app.\n */\n\nexport type PaginationProps = React.ComponentProps<\"nav\">;\nexport type PaginationContentProps = React.ComponentProps<\"ul\">;\nexport type PaginationItemProps = React.ComponentProps<\"li\">;\nexport type PaginationLinkProps = {\n  isActive?: boolean;\n} & Pick<ButtonProps, \"size\"> &\n  React.ComponentProps<\"a\">;\nexport type PaginationPreviousProps = PaginationLinkProps & {\n  /** Nhãn hiển thị (ẩn ở màn hình nhỏ). Mặc định \"Trước\". */\n  label?: React.ReactNode;\n};\nexport type PaginationNextProps = PaginationLinkProps & {\n  /** Nhãn hiển thị (ẩn ở màn hình nhỏ). Mặc định \"Sau\". */\n  label?: React.ReactNode;\n};\nexport type PaginationEllipsisProps = React.ComponentProps<\"span\"> & {\n  /** Nhãn chỉ dành cho trình đọc màn hình. */\n  srLabel?: string;\n};\n\nfunction Pagination({ className, ...props }: PaginationProps) {\n  return (\n    // Thẻ <nav> đã ngầm mang role=\"navigation\" — bản comitor-ds khai lại là thừa, bỏ đi.\n    <nav\n      aria-label=\"Phân trang\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationContent({ className, ...props }: PaginationContentProps) {\n  return <ul data-slot=\"pagination-content\" className={cn(\"flex flex-row items-center gap-1\", className)} {...props} />;\n}\n\nfunction PaginationItem({ ...props }: PaginationItemProps) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\nfunction PaginationLink({ className, isActive, size = \"icon\", ...props }: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({ variant: \"ghost\", size }),\n        isActive &&\n          \"border-gold-300 bg-gold-50 font-semibold text-foreground hover:bg-gold-50 dark:bg-gold-500/10 dark:hover:bg-gold-500/10\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationPrevious({ className, label = \"Trước\", ...props }: PaginationPreviousProps) {\n  return (\n    <PaginationLink\n      aria-label=\"Về trang trước\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pl-2.5\", className)}\n      {...props}\n    >\n      <ChevronLeftIcon />\n      <span className=\"hidden sm:block\">{label}</span>\n    </PaginationLink>\n  );\n}\n\nfunction PaginationNext({ className, label = \"Sau\", ...props }: PaginationNextProps) {\n  return (\n    <PaginationLink\n      aria-label=\"Tới trang sau\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pr-2.5\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">{label}</span>\n      <ChevronRightIcon />\n    </PaginationLink>\n  );\n}\n\nfunction PaginationEllipsis({ className, srLabel = \"Thêm trang\", ...props }: PaginationEllipsisProps) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">{srLabel}</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious\n};\n"],"mappings":"AAqCI,cAoCA,YApCA;AArCJ,SAAS,iBAAiB,kBAAkB,0BAA0B;AAEtE,SAAS,UAAU;AACnB,SAA2B,sBAAsB;AA+BjD,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AAC5D;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,aAAU;AAAA,QACV,WAAW,GAAG,sCAAsC,SAAS;AAAA,QAC5D,GAAG;AAAA;AAAA,IACN;AAAA;AAEJ;AAEA,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAA2B;AAC1E,SAAO,oBAAC,QAAG,aAAU,sBAAqB,WAAW,GAAG,oCAAoC,SAAS,GAAI,GAAG,OAAO;AACrH;AAEA,SAAS,eAAe,EAAE,GAAG,MAAM,GAAwB;AACzD,SAAO,oBAAC,QAAG,aAAU,mBAAmB,GAAG,OAAO;AACpD;AAEA,SAAS,eAAe,EAAE,WAAW,UAAU,OAAO,QAAQ,GAAG,MAAM,GAAwB;AAC7F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc,WAAW,SAAS;AAAA,MAClC,aAAU;AAAA,MACV,eAAa;AAAA,MACb,WAAW;AAAA,QACT,eAAe,EAAE,SAAS,SAAS,KAAK,CAAC;AAAA,QACzC,YACE;AAAA,QACF;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,mBAAmB,EAAE,WAAW,QAAQ,mBAAS,GAAG,MAAM,GAA4B;AAC7F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,MAAK;AAAA,MACL,WAAW,GAAG,0BAA0B,SAAS;AAAA,MAChD,GAAG;AAAA,MAEJ;AAAA,4BAAC,mBAAgB;AAAA,QACjB,oBAAC,UAAK,WAAU,mBAAmB,iBAAM;AAAA;AAAA;AAAA,EAC3C;AAEJ;AAEA,SAAS,eAAe,EAAE,WAAW,QAAQ,OAAO,GAAG,MAAM,GAAwB;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,MAAK;AAAA,MACL,WAAW,GAAG,0BAA0B,SAAS;AAAA,MAChD,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,WAAU,mBAAmB,iBAAM;AAAA,QACzC,oBAAC,oBAAiB;AAAA;AAAA;AAAA,EACpB;AAEJ;AAEA,SAAS,mBAAmB,EAAE,WAAW,UAAU,iBAAc,GAAG,MAAM,GAA4B;AACpG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,aAAU;AAAA,MACV,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA,MAEJ;AAAA,4BAAC,sBAAmB,WAAU,UAAS;AAAA,QACvC,oBAAC,UAAK,WAAU,WAAW,mBAAQ;AAAA;AAAA;AAAA,EACrC;AAEJ;","names":[]}

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

@@ -0,0 +1,19 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+
+/**
+ * Popover — bảng nổi neo theo phần tử kích hoạt (Radix Popover).
+ *
+ * Dùng cho AppLauncher, bộ chọn, form nhỏ. Khác `DropdownMenu` ở chỗ nội dung là
+ * bố cục tự do (không phải danh sách mục có điều hướng bàn phím theo roving focus).
+ */
+type PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>;
+declare function Popover({ ...props }: PopoverProps): React.JSX.Element;
+type PopoverTriggerProps = React.ComponentProps<typeof PopoverPrimitive.Trigger>;
+declare function PopoverTrigger({ ...props }: PopoverTriggerProps): React.JSX.Element;
+type PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Content>;
+declare function PopoverContent({ className, align, sideOffset, ...props }: PopoverContentProps): React.JSX.Element;
+type PopoverAnchorProps = React.ComponentProps<typeof PopoverPrimitive.Anchor>;
+declare function PopoverAnchor({ ...props }: PopoverAnchorProps): React.JSX.Element;
+
+export { Popover, PopoverAnchor, type PopoverAnchorProps, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps };

package/dist/components/ui/popover.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "../../lib/cn.js";
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-overlay outline-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function PopoverAnchor({ ...props }) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger
+};
+//# sourceMappingURL=popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/**\n * Popover — bảng nổi neo theo phần tử kích hoạt (Radix Popover).\n *\n * Dùng cho AppLauncher, bộ chọn, form nhỏ. Khác `DropdownMenu` ở chỗ nội dung là\n * bố cục tự do (không phải danh sách mục có điều hướng bàn phím theo roving focus).\n */\n\nexport type PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>;\n\nfunction Popover({ ...props }: PopoverProps) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nexport type PopoverTriggerProps = React.ComponentProps<typeof PopoverPrimitive.Trigger>;\n\nfunction PopoverTrigger({ ...props }: PopoverTriggerProps) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nexport type PopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Content>;\n\nfunction PopoverContent({ className, align = \"center\", sideOffset = 4, ...props }: PopoverContentProps) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-overlay outline-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport type PopoverAnchorProps = React.ComponentProps<typeof PopoverPrimitive.Anchor>;\n\nfunction PopoverAnchor({ ...props }: PopoverAnchorProps) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />;\n}\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };\n"],"mappings":";AAgBS;AAdT,YAAY,sBAAsB;AAElC,SAAS,UAAU;AAWnB,SAAS,QAAQ,EAAE,GAAG,MAAM,GAAiB;AAC3C,SAAO,oBAAC,iBAAiB,MAAjB,EAAsB,aAAU,WAAW,GAAG,OAAO;AAC/D;AAIA,SAAS,eAAe,EAAE,GAAG,MAAM,GAAwB;AACzD,SAAO,oBAAC,iBAAiB,SAAjB,EAAyB,aAAU,mBAAmB,GAAG,OAAO;AAC1E;AAIA,SAAS,eAAe,EAAE,WAAW,QAAQ,UAAU,aAAa,GAAG,GAAG,MAAM,GAAwB;AACtG,SACE,oBAAC,iBAAiB,QAAjB,EACC;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AAIA,SAAS,cAAc,EAAE,GAAG,MAAM,GAAuB;AACvD,SAAO,oBAAC,iBAAiB,QAAjB,EAAwB,aAAU,kBAAkB,GAAG,OAAO;AACxE;","names":[]}

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

@@ -0,0 +1,12 @@
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as React from 'react';
+
+/**
+ * Progress (Radix) — thanh tiến trình xác định (`value` 0…100).
+ * Bỏ trống `value` để về trạng thái indeterminate của Radix (thanh đứng yên ở 0);
+ * animation cho indeterminate là việc của app.
+ */
+type ProgressProps = React.ComponentProps<typeof ProgressPrimitive.Root>;
+declare function Progress({ className, value, ...props }: ProgressProps): React.JSX.Element;
+
+export { Progress, type ProgressProps };

package/dist/components/ui/progress.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "../../lib/cn.js";
+function Progress({ className, value, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ProgressPrimitive.Root,
+    {
+      "data-slot": "progress",
+      className: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className),
+      value,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ProgressPrimitive.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: "bg-primary h-full w-full flex-1 transition-transform duration-150 ease-out",
+          style: { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      )
+    }
+  );
+}
+export {
+  Progress
+};
+//# sourceMappingURL=progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/progress.tsx"],"sourcesContent":["\"use client\";\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/**\n * Progress (Radix) — thanh tiến trình xác định (`value` 0…100).\n * Bỏ trống `value` để về trạng thái indeterminate của Radix (thanh đứng yên ở 0);\n * animation cho indeterminate là việc của app.\n */\n\nexport type ProgressProps = React.ComponentProps<typeof ProgressPrimitive.Root>;\n\nfunction Progress({ className, value, ...props }: ProgressProps) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full\", className)}\n      value={value}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"bg-primary h-full w-full flex-1 transition-transform duration-150 ease-out\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  );\n}\n\nexport { Progress };\n"],"mappings":";AAsBM;AApBN,YAAY,uBAAuB;AAEnC,SAAS,UAAU;AAUnB,SAAS,SAAS,EAAE,WAAW,OAAO,GAAG,MAAM,GAAkB;AAC/D,SACE;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,kEAAkE,SAAS;AAAA,MACzF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC,kBAAkB;AAAA,QAAlB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UACV,OAAO,EAAE,WAAW,eAAe,OAAO,SAAS,EAAE,KAAK;AAAA;AAAA,MAC5D;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/ui/radio-group.d.ts

@@ -0,0 +1,9 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as React from 'react';
+
+type RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive.Root>;
+type RadioGroupItemProps = React.ComponentProps<typeof RadioGroupPrimitive.Item>;
+declare function RadioGroup({ className, ...props }: RadioGroupProps): React.JSX.Element;
+declare function RadioGroupItem({ className, ...props }: RadioGroupItemProps): React.JSX.Element;
+
+export { RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps };

package/dist/components/ui/radio-group.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { CircleIcon } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+function RadioGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { "data-slot": "radio-group", className: cn("grid gap-3", className), ...props });
+}
+function RadioGroupItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      "data-slot": "radio-group-item",
+      className: cn(
+        "border-input text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-colors duration-150 ease-out outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        RadioGroupPrimitive.Indicator,
+        {
+          "data-slot": "radio-group-indicator",
+          className: "relative flex items-center justify-center",
+          children: /* @__PURE__ */ jsx(CircleIcon, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" })
+        }
+      )
+    }
+  );
+}
+export {
+  RadioGroup,
+  RadioGroupItem
+};
+//# sourceMappingURL=radio-group.js.map

package/dist/components/ui/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport { CircleIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\nexport type RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive.Root>;\nexport type RadioGroupItemProps = React.ComponentProps<typeof RadioGroupPrimitive.Item>;\n\nfunction RadioGroup({ className, ...props }: RadioGroupProps) {\n  return <RadioGroupPrimitive.Root data-slot=\"radio-group\" className={cn(\"grid gap-3\", className)} {...props} />;\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioGroupItemProps) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-colors duration-150 ease-out outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"relative flex items-center justify-center\"\n      >\n        <CircleIcon className=\"fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem };\n"],"mappings":";AAWS;AATT,YAAY,yBAAyB;AACrC,SAAS,kBAAkB;AAE3B,SAAS,UAAU;AAKnB,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AAC5D,SAAO,oBAAC,oBAAoB,MAApB,EAAyB,aAAU,eAAc,WAAW,GAAG,cAAc,SAAS,GAAI,GAAG,OAAO;AAC9G;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAAwB;AACpE,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC,oBAAoB;AAAA,QAApB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UAEV,8BAAC,cAAW,WAAU,mFAAkF;AAAA;AAAA,MAC1G;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+
+/**
+ * Resizable (react-resizable-panels) — bố cục nhiều panel kéo giãn được.
+ * Dùng cho layout 3 cột kiểu Linear/Lark (danh sách ▸ chi tiết ▸ panel phụ).
+ * Muốn nhớ kích thước: đặt `autoSaveId` trên `ResizablePanelGroup`.
+ */
+type ResizablePanelGroupProps = React.ComponentProps<typeof ResizablePrimitive.PanelGroup>;
+type ResizablePanelProps = React.ComponentProps<typeof ResizablePrimitive.Panel>;
+type ResizableHandleProps = React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+    /** Hiện tay nắm có gạch dọc ở giữa thanh chia. */
+    withHandle?: boolean;
+};
+declare function ResizablePanelGroup({ className, ...props }: ResizablePanelGroupProps): React.JSX.Element;
+declare function ResizablePanel({ ...props }: ResizablePanelProps): React.JSX.Element;
+declare function ResizableHandle({ withHandle, className, ...props }: ResizableHandleProps): React.JSX.Element;
+
+export { ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type ResizablePanelProps };

package/dist/components/ui/resizable.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { GripVerticalIcon } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
+import { cn } from "../../lib/cn.js";
+function ResizablePanelGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.PanelGroup,
+    {
+      "data-slot": "resizable-panel-group",
+      className: cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className),
+      ...props
+    }
+  );
+}
+function ResizablePanel({ ...props }) {
+  return /* @__PURE__ */ jsx(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
+}
+function ResizableHandle({ withHandle, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.PanelResizeHandle,
+    {
+      "data-slot": "resizable-handle",
+      className: cn(
+        "bg-border relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className
+      ),
+      ...props,
+      children: withHandle && /* @__PURE__ */ jsx("div", { className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border", children: /* @__PURE__ */ jsx(GripVerticalIcon, { className: "size-2.5" }) })
+    }
+  );
+}
+export {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup
+};
+//# sourceMappingURL=resizable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/resizable.tsx"],"sourcesContent":["\"use client\";\n\nimport { GripVerticalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport * as ResizablePrimitive from \"react-resizable-panels\";\nimport { cn } from \"../../lib/cn.js\";\n\n/**\n * Resizable (react-resizable-panels) — bố cục nhiều panel kéo giãn được.\n * Dùng cho layout 3 cột kiểu Linear/Lark (danh sách ▸ chi tiết ▸ panel phụ).\n * Muốn nhớ kích thước: đặt `autoSaveId` trên `ResizablePanelGroup`.\n */\n\nexport type ResizablePanelGroupProps = React.ComponentProps<typeof ResizablePrimitive.PanelGroup>;\nexport type ResizablePanelProps = React.ComponentProps<typeof ResizablePrimitive.Panel>;\nexport type ResizableHandleProps = React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  /** Hiện tay nắm có gạch dọc ở giữa thanh chia. */\n  withHandle?: boolean;\n};\n\nfunction ResizablePanelGroup({ className, ...props }: ResizablePanelGroupProps) {\n  return (\n    <ResizablePrimitive.PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ResizablePanel({ ...props }: ResizablePanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />;\n}\n\nfunction ResizableHandle({ withHandle, className, ...props }: ResizableHandleProps) {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border\">\n          <GripVerticalIcon className=\"size-2.5\" />\n        </div>\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  );\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup };\n"],"mappings":";AAsBI;AApBJ,SAAS,wBAAwB;AAEjC,YAAY,wBAAwB;AACpC,SAAS,UAAU;AAenB,SAAS,oBAAoB,EAAE,WAAW,GAAG,MAAM,GAA6B;AAC9E,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,qEAAqE,SAAS;AAAA,MAC3F,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,eAAe,EAAE,GAAG,MAAM,GAAwB;AACzD,SAAO,oBAAC,mBAAmB,OAAnB,EAAyB,aAAU,mBAAmB,GAAG,OAAO;AAC1E;AAEA,SAAS,gBAAgB,EAAE,YAAY,WAAW,GAAG,MAAM,GAAyB;AAClF,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,wBACC,oBAAC,SAAI,WAAU,6EACb,8BAAC,oBAAiB,WAAU,YAAW,GACzC;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/ui/scroll-area.d.ts

@@ -0,0 +1,13 @@
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
+
+/**
+ * ScrollArea (Radix) — thanh cuộn tuỳ biến, hiện đè lên nội dung.
+ * Cần chiều cao xác định trên `ScrollArea` (vd `className="h-72"`) thì mới cuộn.
+ */
+type ScrollAreaProps = React.ComponentProps<typeof ScrollAreaPrimitive.Root>;
+type ScrollBarProps = React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>;
+declare function ScrollArea({ className, children, ...props }: ScrollAreaProps): React.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: ScrollBarProps): React.JSX.Element;
+
+export { ScrollArea, type ScrollAreaProps, ScrollBar, type ScrollBarProps };

package/dist/components/ui/scroll-area.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "../../lib/cn.js";
+function ScrollArea({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn("relative", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      ScrollAreaPrimitive.Viewport,
+      {
+        "data-slot": "scroll-area-viewport",
+        className: "size-full rounded-[inherit] transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(ScrollBar, {}),
+    /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+  ] });
+}
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
+      className: cn(
+        "flex touch-none p-px transition-colors duration-150 ease-out select-none",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "bg-border relative flex-1 rounded-full"
+        }
+      )
+    }
+  );
+}
+export {
+  ScrollArea,
+  ScrollBar
+};
+//# sourceMappingURL=scroll-area.js.map

package/dist/components/ui/scroll-area.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/scroll-area.tsx"],"sourcesContent":["\"use client\";\n\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/**\n * ScrollArea (Radix) — thanh cuộn tuỳ biến, hiện đè lên nội dung.\n * Cần chiều cao xác định trên `ScrollArea` (vd `className=\"h-72\"`) thì mới cuộn.\n */\n\nexport type ScrollAreaProps = React.ComponentProps<typeof ScrollAreaPrimitive.Root>;\nexport type ScrollBarProps = React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>;\n\nfunction ScrollArea({ className, children, ...props }: ScrollAreaProps) {\n  return (\n    <ScrollAreaPrimitive.Root data-slot=\"scroll-area\" className={cn(\"relative\", className)} {...props}>\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ScrollBar({ className, orientation = \"vertical\", ...props }: ScrollBarProps) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors duration-150 ease-out select-none\",\n        orientation === \"vertical\" && \"h-full w-2.5 border-l border-l-transparent\",\n        orientation === \"horizontal\" && \"h-2.5 flex-col border-t border-t-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"bg-border relative flex-1 rounded-full\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollBar };\n"],"mappings":";AAgBI,SACE,KADF;AAdJ,YAAY,yBAAyB;AAErC,SAAS,UAAU;AAUnB,SAAS,WAAW,EAAE,WAAW,UAAU,GAAG,MAAM,GAAoB;AACtE,SACE,qBAAC,oBAAoB,MAApB,EAAyB,aAAU,eAAc,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,OAC1F;AAAA;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC,aAAU;AAAA,QACV,WAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,IACA,oBAAC,aAAU;AAAA,IACX,oBAAC,oBAAoB,QAApB,EAA2B;AAAA,KAC9B;AAEJ;AAEA,SAAS,UAAU,EAAE,WAAW,cAAc,YAAY,GAAG,MAAM,GAAmB;AACpF,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,cAAc;AAAA,QAC9B,gBAAgB,gBAAgB;AAAA,QAChC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC,oBAAoB;AAAA,QAApB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA;AAAA,MACZ;AAAA;AAAA,EACF;AAEJ;","names":[]}