@comitor/ui 0.1.0

package/dist/components/ui/breadcrumb.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+function Breadcrumb({ ...props }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "\u0110\u01B0\u1EDDng d\u1EABn ph\xE2n c\u1EA5p", "data-slot": "breadcrumb", ...props });
+}
+function BreadcrumbList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      "data-slot": "breadcrumb-list",
+      className: cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function BreadcrumbItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx("li", { "data-slot": "breadcrumb-item", className: cn("inline-flex items-center gap-1.5", className), ...props });
+}
+function BreadcrumbLink({ asChild, className, ...props }) {
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "breadcrumb-link",
+      className: cn("hover:text-foreground transition-colors duration-150 ease-out", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbPage({ className, ...props }) {
+  return (
+    // biome-ignore lint/a11y/useFocusableInteractive: giữ nguyên markup shadcn — mục hiện tại cố tình KHÔNG focus được (aria-disabled), chỉ mượn role="link" để trình đọc màn hình đọc đúng ngữ cảnh
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "breadcrumb-page",
+        role: "link",
+        "aria-disabled": "true",
+        "aria-current": "page",
+        className: cn("text-foreground font-normal", className),
+        ...props
+      }
+    )
+  );
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("[&>svg]:size-3.5", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
+    }
+  );
+}
+function BreadcrumbEllipsis({ className, srLabel = "Th\xEAm m\u1EE5c", ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "breadcrumb-ellipsis",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("flex size-9 items-center justify-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: srLabel })
+      ]
+    }
+  );
+}
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+};
+//# sourceMappingURL=breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/breadcrumb.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/**\n * Breadcrumb — primitive tĩnh (không \"use client\", dùng được trong RSC).\n * Chuỗi hiển thị mặc định là tiếng Việt và override được qua props tương ứng.\n *\n * Điều hướng: bọc `next/link` bằng `<BreadcrumbLink asChild><Link …/></BreadcrumbLink>`\n * để primitive không phụ thuộc `next/*`.\n */\n\nexport type BreadcrumbProps = React.ComponentProps<\"nav\">;\nexport type BreadcrumbListProps = React.ComponentProps<\"ol\">;\nexport type BreadcrumbItemProps = React.ComponentProps<\"li\">;\nexport type BreadcrumbLinkProps = React.ComponentProps<\"a\"> & { asChild?: boolean };\nexport type BreadcrumbPageProps = React.ComponentProps<\"span\">;\nexport type BreadcrumbSeparatorProps = React.ComponentProps<\"li\">;\nexport type BreadcrumbEllipsisProps = React.ComponentProps<\"span\"> & {\n  /** Nhãn chỉ dành cho trình đọc màn hình. */\n  srLabel?: string;\n};\n\nfunction Breadcrumb({ ...props }: BreadcrumbProps) {\n  return <nav aria-label=\"Đường dẫn phân cấp\" data-slot=\"breadcrumb\" {...props} />;\n}\n\nfunction BreadcrumbList({ className, ...props }: BreadcrumbListProps) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbItem({ className, ...props }: BreadcrumbItemProps) {\n  return <li data-slot=\"breadcrumb-item\" className={cn(\"inline-flex items-center gap-1.5\", className)} {...props} />;\n}\n\nfunction BreadcrumbLink({ asChild, className, ...props }: BreadcrumbLinkProps) {\n  const Comp = asChild ? Slot : \"a\";\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-foreground transition-colors duration-150 ease-out\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbPage({ className, ...props }: BreadcrumbPageProps) {\n  return (\n    // biome-ignore lint/a11y/useFocusableInteractive: giữ nguyên markup shadcn — mục hiện tại cố tình KHÔNG focus được (aria-disabled), chỉ mượn role=\"link\" để trình đọc màn hình đọc đúng ngữ cảnh\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorProps) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? <ChevronRight />}\n    </li>\n  );\n}\n\nfunction BreadcrumbEllipsis({ className, srLabel = \"Thêm mục\", ...props }: BreadcrumbEllipsisProps) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontal className=\"size-4\" />\n      <span className=\"sr-only\">{srLabel}</span>\n    </span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator\n};\n"],"mappings":"AAyBS,cA8DL,YA9DK;AAzBT,SAAS,YAAY;AACrB,SAAS,cAAc,sBAAsB;AAE7C,SAAS,UAAU;AAqBnB,SAAS,WAAW,EAAE,GAAG,MAAM,GAAoB;AACjD,SAAO,oBAAC,SAAI,cAAW,kDAAqB,aAAU,cAAc,GAAG,OAAO;AAChF;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAAwB;AACpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAAwB;AACpE,SAAO,oBAAC,QAAG,aAAU,mBAAkB,WAAW,GAAG,oCAAoC,SAAS,GAAI,GAAG,OAAO;AAClH;AAEA,SAAS,eAAe,EAAE,SAAS,WAAW,GAAG,MAAM,GAAwB;AAC7E,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iEAAiE,SAAS;AAAA,MACvF,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAAwB;AACpE;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,MAAK;AAAA,QACL,iBAAc;AAAA,QACd,gBAAa;AAAA,QACb,WAAW,GAAG,+BAA+B,SAAS;AAAA,QACrD,GAAG;AAAA;AAAA,IACN;AAAA;AAEJ;AAEA,SAAS,oBAAoB,EAAE,UAAU,WAAW,GAAG,MAAM,GAA6B;AACxF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,oBAAoB,SAAS;AAAA,MAC1C,GAAG;AAAA,MAEH,sBAAY,oBAAC,gBAAa;AAAA;AAAA,EAC7B;AAEJ;AAEA,SAAS,mBAAmB,EAAE,WAAW,UAAU,oBAAY,GAAG,MAAM,GAA4B;AAClG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA,MAEJ;AAAA,4BAAC,kBAAe,WAAU,UAAS;AAAA,QACnC,oBAAC,UAAK,WAAU,WAAW,mBAAQ;AAAA;AAAA;AAAA,EACrC;AAEJ;","names":[]}

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

@@ -0,0 +1,21 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { SeparatorProps } from './separator.js';
+import '@radix-ui/react-separator';
+
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonGroupProps extends React.ComponentProps<"div">, VariantProps<typeof buttonGroupVariants> {
+}
+interface ButtonGroupTextProps extends React.ComponentProps<"div"> {
+    /** Render ra chính phần tử con (Radix Slot) thay vì thẻ <div>. */
+    asChild?: boolean;
+}
+type ButtonGroupSeparatorProps = SeparatorProps;
+declare function ButtonGroup({ className, orientation, ...props }: ButtonGroupProps): React.JSX.Element;
+declare function ButtonGroupText({ className, asChild, ...props }: ButtonGroupTextProps): React.JSX.Element;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: ButtonGroupSeparatorProps): React.JSX.Element;
+
+export { ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonGroupTextProps, buttonGroupVariants };

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

@@ -0,0 +1,62 @@
+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";
+import { Separator } from "./separator.js";
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+function ButtonGroup({ className, orientation, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": orientation,
+      className: cn(buttonGroupVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function ButtonGroupText({ className, asChild = false, ...props }) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "button-group-separator",
+      orientation,
+      className: cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className),
+      ...props
+    }
+  );
+}
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants
+};
+//# sourceMappingURL=button-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/button-group.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\";\nimport { Separator, type SeparatorProps } from \"./separator.js\";\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\"\n      }\n    },\n    defaultVariants: {\n      orientation: \"horizontal\"\n    }\n  }\n);\n\nexport interface ButtonGroupProps extends React.ComponentProps<\"div\">, VariantProps<typeof buttonGroupVariants> {}\n\nexport interface ButtonGroupTextProps extends React.ComponentProps<\"div\"> {\n  /** Render ra chính phần tử con (Radix Slot) thay vì thẻ <div>. */\n  asChild?: boolean;\n}\n\nexport type ButtonGroupSeparatorProps = SeparatorProps;\n\nfunction ButtonGroup({ className, orientation, ...props }: ButtonGroupProps) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction ButtonGroupText({ className, asChild = false, ...props }: ButtonGroupTextProps) {\n  const Comp = asChild ? Slot : \"div\";\n\n  return (\n    <Comp\n      className={cn(\n        \"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ButtonGroupSeparator({ className, orientation = \"vertical\", ...props }: ButtonGroupSeparatorProps) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\"bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };\n"],"mappings":"AAkCI;AAlCJ,SAAS,YAAY;AACrB,SAAS,WAA8B;AAEvC,SAAS,UAAU;AACnB,SAAS,iBAAsC;AAE/C,MAAM,sBAAsB;AAAA,EAC1B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,YACE;AAAA,QACF,UACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,aAAa;AAAA,IACf;AAAA,EACF;AACF;AAWA,SAAS,YAAY,EAAE,WAAW,aAAa,GAAG,MAAM,GAAqB;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,oBAAkB;AAAA,MAClB,WAAW,GAAG,oBAAoB,EAAE,YAAY,CAAC,GAAG,SAAS;AAAA,MAC5D,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,gBAAgB,EAAE,WAAW,UAAU,OAAO,GAAG,MAAM,GAAyB;AACvF,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,qBAAqB,EAAE,WAAW,cAAc,YAAY,GAAG,MAAM,GAA8B;AAC1G,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA,WAAW,GAAG,0EAA0E,SAAS;AAAA,MAChG,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

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

@@ -0,0 +1,21 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "primary" | "secondary" | "outline" | "destructive" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
+    /** Render ra chính phần tử con (Radix Slot) thay vì thẻ <button>. */
+    asChild?: boolean;
+    /** Hiện spinner và khoá nút. */
+    loading?: boolean;
+    /** Icon đặt trước nội dung; bị spinner thay thế khi `loading`. */
+    leftIcon?: React.ReactNode;
+    /** Icon đặt sau nội dung; ẩn khi `loading`. */
+    rightIcon?: React.ReactNode;
+}
+declare function Button({ className, variant, size, asChild, loading, leftIcon, rightIcon, disabled, children, ...props }: ButtonProps): React.JSX.Element;
+
+export { Button, type ButtonProps, buttonVariants };

package/dist/components/ui/button.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+const buttonVariants = cva(
+  "inline-flex items-center justify-center font-medium select-none whitespace-nowrap transition-colors duration-150 ease-out focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-[color:color-mix(in_srgb,var(--primary),var(--ink)_15%)] border border-transparent shadow-control",
+        primary: "bg-primary text-primary-foreground hover:bg-[color:color-mix(in_srgb,var(--primary),var(--ink)_15%)] border border-transparent shadow-control",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-warm dark:hover:bg-muted border border-border",
+        outline: "bg-transparent text-foreground border border-border hover:border-gold-300 hover:bg-gold-50 dark:hover:bg-gold-500/10",
+        ghost: "bg-transparent text-foreground hover:bg-muted border border-transparent",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-[color:color-mix(in_srgb,var(--destructive),var(--ink)_15%)] border border-transparent",
+        link: "bg-transparent text-gold-500 hover:text-gold-600 dark:text-gold-200 dark:hover:text-gold-100 underline-offset-4 hover:underline border border-transparent p-0 h-auto"
+      },
+      size: {
+        default: "h-9 px-4 text-sm rounded-md gap-2",
+        md: "h-9 px-4 text-sm rounded-md gap-2",
+        sm: "h-8 px-3 text-xs rounded-md gap-1.5",
+        lg: "h-11 px-6 text-base rounded-md gap-2",
+        icon: "h-9 w-9 rounded-md",
+        "icon-sm": "h-8 w-8 rounded-md",
+        "icon-lg": "h-11 w-11 rounded-md"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  loading = false,
+  leftIcon,
+  rightIcon,
+  disabled,
+  children,
+  ...props
+}) {
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Slot, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props, children });
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "data-slot": "button",
+      disabled: disabled || loading,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 shrink-0 animate-spin", "aria-hidden": true }) : leftIcon ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: leftIcon }) : null,
+        children,
+        !loading && rightIcon ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: rightIcon }) : null
+      ]
+    }
+  );
+}
+export {
+  Button,
+  buttonVariants
+};
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Loader2 } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/*\n * Style port từ comitor-ds để giao diện khớp bản v0.\n * API giữ tương thích shadcn (cva + asChild + data-slot); `primary` là alias của `default`\n * — đã là API công khai trong docs comitor-ds nên không bỏ.\n *\n * ─ VÌ SAO NỀN NÚT LÀ TOKEN SEMANTIC, KHÔNG PHẢI THANG BRAND THÔ ─\n *\n * 1. `default`/`primary` trước dùng `bg-gold-300 text-ink` — cùng giá trị ở cả hai theme,\n *    nên bảng màu dark của chính package (`.dark { --primary: #F5D060 }`) không bao giờ được\n *    áp dụng, và app nào set lại `--primary` cho sản phẩm của mình cũng không đổi được nút.\n *    Nay dùng `bg-primary text-primary-foreground`: light 10,19:1 (không đổi), dark 12,67:1\n *    (trước 10,19:1) — đều vượt AA.\n *\n * 2. `destructive` trước dùng `bg-red text-white`. `--red` là màu phụ được NÂNG SÁNG ở dark\n *    (#F87171) để làm CHỮ trên nền tối, dùng làm NỀN nút thì chữ trắng chỉ còn 2,77:1 ✗.\n *    `--destructive` cố ý ghim #D64545 ở cả hai theme đúng cho việc này → 4,38:1 ở cả hai.\n *    CÒN THIẾU 0,12 so với AA 4,5:1: đó là giá trị của token, phải sửa ở styles.css\n *    (#D64545 → khoảng #C93B3B là đạt 5:1), không sửa được trong component mà không chôn hex.\n *\n * ─ VÌ SAO HOVER TRỘN `--ink` THAY VÌ `/90` ─\n *\n * `bg-primary/90` là \"nhạt dần về phía nền\" nên ở light mode nút SÁNG lên khi rê chuột (ngược\n * với bản v0 gold-300 → gold-400) và với destructive thì tương phản chữ trắng tụt còn 3,81:1 ✗.\n * Trộn 15% `--ink` thì tối đi ở CẢ hai theme, giữ đúng ngữ nghĩa \"nhấn xuống\" và tương phản chỉ\n * tăng: destructive 5,56:1 ✓, primary 7,58:1 (light) / 9,33:1 (dark) ✓.\n *\n * ─ `link` ─\n * `text-gold-400` (#B88A00) trên nền trắng chỉ 3,15:1 ✗ — chữ link buộc phải đạt 4,5:1.\n * Đổi sang bậc tối/sáng theo theme: gold-500 6,51:1 (light) và gold-200 12,67:1 (dark).\n * Vẫn là thang gold vì --primary ở light (#E8B824) trên nền trắng chỉ 1,86:1, không dùng\n * làm chữ được; xem docs/quyet-dinh-tich-hop.md.\n */\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center font-medium select-none whitespace-nowrap transition-colors duration-150 ease-out focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground hover:bg-[color:color-mix(in_srgb,var(--primary),var(--ink)_15%)] border border-transparent shadow-control\",\n        primary:\n          \"bg-primary text-primary-foreground hover:bg-[color:color-mix(in_srgb,var(--primary),var(--ink)_15%)] border border-transparent shadow-control\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-warm dark:hover:bg-muted border border-border\",\n        outline:\n          \"bg-transparent text-foreground border border-border hover:border-gold-300 hover:bg-gold-50 dark:hover:bg-gold-500/10\",\n        ghost: \"bg-transparent text-foreground hover:bg-muted border border-transparent\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-[color:color-mix(in_srgb,var(--destructive),var(--ink)_15%)] border border-transparent\",\n        link: \"bg-transparent text-gold-500 hover:text-gold-600 dark:text-gold-200 dark:hover:text-gold-100 underline-offset-4 hover:underline border border-transparent p-0 h-auto\"\n      },\n      size: {\n        default: \"h-9 px-4 text-sm rounded-md gap-2\",\n        md: \"h-9 px-4 text-sm rounded-md gap-2\",\n        sm: \"h-8 px-3 text-xs rounded-md gap-1.5\",\n        lg: \"h-11 px-6 text-base rounded-md gap-2\",\n        icon: \"h-9 w-9 rounded-md\",\n        \"icon-sm\": \"h-8 w-8 rounded-md\",\n        \"icon-lg\": \"h-11 w-11 rounded-md\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\"\n    }\n  }\n);\n\nexport interface ButtonProps extends React.ComponentProps<\"button\">, VariantProps<typeof buttonVariants> {\n  /** Render ra chính phần tử con (Radix Slot) thay vì thẻ <button>. */\n  asChild?: boolean;\n  /** Hiện spinner và khoá nút. */\n  loading?: boolean;\n  /** Icon đặt trước nội dung; bị spinner thay thế khi `loading`. */\n  leftIcon?: React.ReactNode;\n  /** Icon đặt sau nội dung; ẩn khi `loading`. */\n  rightIcon?: React.ReactNode;\n}\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  loading = false,\n  leftIcon,\n  rightIcon,\n  disabled,\n  children,\n  ...props\n}: ButtonProps) {\n  // Slot chỉ nhận đúng MỘT phần tử con → bỏ qua lớp bọc icon/loading khi asChild.\n  if (asChild) {\n    return (\n      <Slot data-slot=\"button\" className={cn(buttonVariants({ variant, size, className }))} {...props}>\n        {children}\n      </Slot>\n    );\n  }\n\n  return (\n    <button\n      data-slot=\"button\"\n      disabled={disabled || loading}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    >\n      {loading ? (\n        <Loader2 className=\"size-3.5 shrink-0 animate-spin\" aria-hidden />\n      ) : leftIcon ? (\n        <span className=\"shrink-0\">{leftIcon}</span>\n      ) : null}\n      {children}\n      {!loading && rightIcon ? <span className=\"shrink-0\">{rightIcon}</span> : null}\n    </button>\n  );\n}\n\nexport { Button, buttonVariants };\n"],"mappings":";AAoGM,cAOF,YAPE;AAlGN,SAAS,YAAY;AACrB,SAAS,WAA8B;AACvC,SAAS,eAAe;AAExB,SAAS,UAAU;AAkCnB,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,SACE;AAAA,QACF,WAAW;AAAA,QACX,SACE;AAAA,QACF,OAAO;AAAA,QACP,aACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,WAAW;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAaA,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AAEd,MAAI,SAAS;AACX,WACE,oBAAC,QAAK,aAAU,UAAS,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC,GAAI,GAAG,OACvF,UACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,UAAU,YAAY;AAAA,MACtB,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MACzD,GAAG;AAAA,MAEH;AAAA,kBACC,oBAAC,WAAQ,WAAU,kCAAiC,eAAW,MAAC,IAC9D,WACF,oBAAC,UAAK,WAAU,YAAY,oBAAS,IACnC;AAAA,QACH;AAAA,QACA,CAAC,WAAW,YAAY,oBAAC,UAAK,WAAU,YAAY,qBAAU,IAAU;AAAA;AAAA;AAAA,EAC3E;AAEJ;","names":[]}

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { DayPicker, DayButton } from 'react-day-picker';
+import { ButtonProps } from './button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+/**
+ * Calendar (react-day-picker v9) — lịch trần, đã map class sang token Comitor.
+ * Bản có ô nhập `dd/MM/yyyy` + preset ("Hôm nay", "7 ngày qua"…) là composite
+ * `DatePicker` / `DateRangePicker` ở Tier 2.
+ *
+ * Ngôn ngữ: truyền `locale={vi}` (date-fns/locale) để đổi tên thứ/tháng.
+ *
+ * Khác bản comitor-ds: tên tháng rút gọn trong dropdown lấy theo `locale.code`
+ * (mặc định `vi-VN`) thay vì `"default"` — `"default"` phụ thuộc locale của môi
+ * trường chạy nên server và trình duyệt có thể ra chuỗi khác nhau → hydration mismatch.
+ */
+type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+    /** Biến thể Button dùng cho nút điều hướng tháng. */
+    buttonVariant?: ButtonProps["variant"];
+};
+type CalendarDayButtonProps = React.ComponentProps<typeof DayButton>;
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, locale, ...props }: CalendarProps): React.JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: CalendarDayButtonProps): React.JSX.Element;
+
+export { Calendar, CalendarDayButton, type CalendarDayButtonProps, type CalendarProps };

package/dist/components/ui/calendar.js

@@ -0,0 +1,148 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import * as React from "react";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+import { cn } from "../../lib/cn.js";
+import { Button, buttonVariants } from "./button.js";
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  locale,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  const localeCode = locale?.code ?? "vi-VN";
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      locale,
+      className: cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      ),
+      captionLayout,
+      formatters: {
+        formatMonthDropdown: (date) => date.toLocaleString(localeCode, { month: "short" }),
+        ...formatters
+      },
+      classNames: {
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", defaultClassNames.nav),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:outline-none border border-input shadow-xs has-focus:ring-2 has-focus:ring-ring/50 has-focus:ring-offset-2 has-focus:ring-offset-background rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label" ? "text-sm" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn("select-none w-(--cell-size)", defaultClassNames.week_number_header),
+        week_number: cn("text-[0.8rem] select-none text-muted-foreground", defaultClassNames.week_number),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          defaultClassNames.day
+        ),
+        range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+        disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames
+      },
+      components: {
+        Root: ({ className: rootClassName, rootRef, ...rootProps }) => {
+          return /* @__PURE__ */ jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(rootClassName), ...rootProps });
+        },
+        Chevron: ({ className: chevronClassName, orientation, ...chevronProps }) => {
+          if (orientation === "left") {
+            return /* @__PURE__ */ jsx(ChevronLeftIcon, { className: cn("size-4", chevronClassName), ...chevronProps });
+          }
+          if (orientation === "right") {
+            return /* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("size-4", chevronClassName), ...chevronProps });
+          }
+          return /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-4", chevronClassName), ...chevronProps });
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, week: _week, ...weekProps }) => {
+          return /* @__PURE__ */ jsx("td", { ...weekProps, children: /* @__PURE__ */ jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
+        },
+        ...components
+      },
+      ...props
+    }
+  );
+}
+function CalendarDayButton({ className, day, modifiers, ...props }) {
+  const defaultClassNames = getDefaultClassNames();
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      variant: "ghost",
+      size: "icon",
+      "data-day": day.date.toLocaleDateString(),
+      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+      "data-range-start": modifiers.range_start,
+      "data-range-end": modifiers.range_end,
+      "data-range-middle": modifiers.range_middle,
+      className: cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:outline-none group-data-[focused=true]/day:ring-ring/50 group-data-[focused=true]/day:ring-offset-2 group-data-[focused=true]/day:ring-offset-background dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-2 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Calendar,
+  CalendarDayButton
+};
+//# sourceMappingURL=calendar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { type DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Button, type ButtonProps, buttonVariants } from \"./button.js\";\n\n/**\n * Calendar (react-day-picker v9) — lịch trần, đã map class sang token Comitor.\n * Bản có ô nhập `dd/MM/yyyy` + preset (\"Hôm nay\", \"7 ngày qua\"…) là composite\n * `DatePicker` / `DateRangePicker` ở Tier 2.\n *\n * Ngôn ngữ: truyền `locale={vi}` (date-fns/locale) để đổi tên thứ/tháng.\n *\n * Khác bản comitor-ds: tên tháng rút gọn trong dropdown lấy theo `locale.code`\n * (mặc định `vi-VN`) thay vì `\"default\"` — `\"default\"` phụ thuộc locale của môi\n * trường chạy nên server và trình duyệt có thể ra chuỗi khác nhau → hydration mismatch.\n */\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker> & {\n  /** Biến thể Button dùng cho nút điều hướng tháng. */\n  buttonVariant?: ButtonProps[\"variant\"];\n};\nexport type CalendarDayButtonProps = React.ComponentProps<typeof DayButton>;\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  locale,\n  ...props\n}: CalendarProps) {\n  const defaultClassNames = getDefaultClassNames();\n  const localeCode = locale?.code ?? \"vi-VN\";\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      locale={locale}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) => date.toLocaleString(localeCode, { month: \"short\" }),\n        ...formatters\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\"flex gap-4 flex-col md:flex-row relative\", defaultClassNames.months),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\", defaultClassNames.nav),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative has-focus:outline-none border border-input shadow-xs has-focus:ring-2 has-focus:ring-ring/50 has-focus:ring-offset-2 has-focus:ring-offset-background rounded-md\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\"absolute bg-popover inset-0 opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\"select-none w-(--cell-size)\", defaultClassNames.week_number_header),\n        week_number: cn(\"text-[0.8rem] select-none text-muted-foreground\", defaultClassNames.week_number),\n        day: cn(\n          \"relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\"rounded-l-md bg-accent\", defaultClassNames.range_start),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\"text-muted-foreground aria-selected:text-muted-foreground\", defaultClassNames.outside),\n        disabled: cn(\"text-muted-foreground opacity-50\", defaultClassNames.disabled),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames\n      }}\n      components={{\n        Root: ({ className: rootClassName, rootRef, ...rootProps }) => {\n          return <div data-slot=\"calendar\" ref={rootRef} className={cn(rootClassName)} {...rootProps} />;\n        },\n        Chevron: ({ className: chevronClassName, orientation, ...chevronProps }) => {\n          if (orientation === \"left\") {\n            return <ChevronLeftIcon className={cn(\"size-4\", chevronClassName)} {...chevronProps} />;\n          }\n\n          if (orientation === \"right\") {\n            return <ChevronRightIcon className={cn(\"size-4\", chevronClassName)} {...chevronProps} />;\n          }\n\n          return <ChevronDownIcon className={cn(\"size-4\", chevronClassName)} {...chevronProps} />;\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, week: _week, ...weekProps }) => {\n          return (\n            <td {...weekProps}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">{children}</div>\n            </td>\n          );\n        },\n        ...components\n      }}\n      {...props}\n    />\n  );\n}\n\nfunction CalendarDayButton({ className, day, modifiers, ...props }: CalendarDayButtonProps) {\n  const defaultClassNames = getDefaultClassNames();\n\n  const ref = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:outline-none group-data-[focused=true]/day:ring-ring/50 group-data-[focused=true]/day:ring-offset-2 group-data-[focused=true]/day:ring-offset-background dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-2 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Calendar, CalendarDayButton };\n"],"mappings":";AAqHiB;AAnHjB,SAAS,iBAAiB,iBAAiB,wBAAwB;AACnE,YAAY,WAAW;AACvB,SAAyB,WAAW,4BAA4B;AAChE,SAAS,UAAU;AACnB,SAAS,QAA0B,sBAAsB;AAoBzD,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,oBAAoB,qBAAqB;AAC/C,QAAM,aAAa,QAAQ,QAAQ;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,OAAO;AAAA,QACP,OAAO;AAAA,QACP;AAAA,MACF;AAAA,MACA;AAAA,MACA,YAAY;AAAA,QACV,qBAAqB,CAAC,SAAS,KAAK,eAAe,YAAY,EAAE,OAAO,QAAQ,CAAC;AAAA,QACjF,GAAG;AAAA,MACL;AAAA,MACA,YAAY;AAAA,QACV,MAAM,GAAG,SAAS,kBAAkB,IAAI;AAAA,QACxC,QAAQ,GAAG,4CAA4C,kBAAkB,MAAM;AAAA,QAC/E,OAAO,GAAG,8BAA8B,kBAAkB,KAAK;AAAA,QAC/D,KAAK,GAAG,2EAA2E,kBAAkB,GAAG;AAAA,QACxG,iBAAiB;AAAA,UACf,eAAe,EAAE,SAAS,cAAc,CAAC;AAAA,UACzC;AAAA,UACA,kBAAkB;AAAA,QACpB;AAAA,QACA,aAAa;AAAA,UACX,eAAe,EAAE,SAAS,cAAc,CAAC;AAAA,UACzC;AAAA,UACA,kBAAkB;AAAA,QACpB;AAAA,QACA,eAAe;AAAA,UACb;AAAA,UACA,kBAAkB;AAAA,QACpB;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,kBAAkB;AAAA,QACpB;AAAA,QACA,eAAe;AAAA,UACb;AAAA,UACA,kBAAkB;AAAA,QACpB;AAAA,QACA,UAAU,GAAG,yCAAyC,kBAAkB,QAAQ;AAAA,QAChF,eAAe;AAAA,UACb;AAAA,UACA,kBAAkB,UACd,YACA;AAAA,UACJ,kBAAkB;AAAA,QACpB;AAAA,QACA,OAAO;AAAA,QACP,UAAU,GAAG,QAAQ,kBAAkB,QAAQ;AAAA,QAC/C,SAAS;AAAA,UACP;AAAA,UACA,kBAAkB;AAAA,QACpB;AAAA,QACA,MAAM,GAAG,oBAAoB,kBAAkB,IAAI;AAAA,QACnD,oBAAoB,GAAG,+BAA+B,kBAAkB,kBAAkB;AAAA,QAC1F,aAAa,GAAG,mDAAmD,kBAAkB,WAAW;AAAA,QAChG,KAAK;AAAA,UACH;AAAA,UACA,kBAAkB;AAAA,QACpB;AAAA,QACA,aAAa,GAAG,0BAA0B,kBAAkB,WAAW;AAAA,QACvE,cAAc,GAAG,gBAAgB,kBAAkB,YAAY;AAAA,QAC/D,WAAW,GAAG,0BAA0B,kBAAkB,SAAS;AAAA,QACnE,OAAO;AAAA,UACL;AAAA,UACA,kBAAkB;AAAA,QACpB;AAAA,QACA,SAAS,GAAG,6DAA6D,kBAAkB,OAAO;AAAA,QAClG,UAAU,GAAG,oCAAoC,kBAAkB,QAAQ;AAAA,QAC3E,QAAQ,GAAG,aAAa,kBAAkB,MAAM;AAAA,QAChD,GAAG;AAAA,MACL;AAAA,MACA,YAAY;AAAA,QACV,MAAM,CAAC,EAAE,WAAW,eAAe,SAAS,GAAG,UAAU,MAAM;AAC7D,iBAAO,oBAAC,SAAI,aAAU,YAAW,KAAK,SAAS,WAAW,GAAG,aAAa,GAAI,GAAG,WAAW;AAAA,QAC9F;AAAA,QACA,SAAS,CAAC,EAAE,WAAW,kBAAkB,aAAa,GAAG,aAAa,MAAM;AAC1E,cAAI,gBAAgB,QAAQ;AAC1B,mBAAO,oBAAC,mBAAgB,WAAW,GAAG,UAAU,gBAAgB,GAAI,GAAG,cAAc;AAAA,UACvF;AAEA,cAAI,gBAAgB,SAAS;AAC3B,mBAAO,oBAAC,oBAAiB,WAAW,GAAG,UAAU,gBAAgB,GAAI,GAAG,cAAc;AAAA,UACxF;AAEA,iBAAO,oBAAC,mBAAgB,WAAW,GAAG,UAAU,gBAAgB,GAAI,GAAG,cAAc;AAAA,QACvF;AAAA,QACA,WAAW;AAAA,QACX,YAAY,CAAC,EAAE,UAAU,MAAM,OAAO,GAAG,UAAU,MAAM;AACvD,iBACE,oBAAC,QAAI,GAAG,WACN,8BAAC,SAAI,WAAU,mEAAmE,UAAS,GAC7F;AAAA,QAEJ;AAAA,QACA,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,kBAAkB,EAAE,WAAW,KAAK,WAAW,GAAG,MAAM,GAA2B;AAC1F,QAAM,oBAAoB,qBAAqB;AAE/C,QAAM,MAAM,MAAM,OAA0B,IAAI;AAChD,QAAM,UAAU,MAAM;AACpB,QAAI,UAAU,QAAS,KAAI,SAAS,MAAM;AAAA,EAC5C,GAAG,CAAC,UAAU,OAAO,CAAC;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,YAAU,IAAI,KAAK,mBAAmB;AAAA,MACtC,wBACE,UAAU,YAAY,CAAC,UAAU,eAAe,CAAC,UAAU,aAAa,CAAC,UAAU;AAAA,MAErF,oBAAkB,UAAU;AAAA,MAC5B,kBAAgB,UAAU;AAAA,MAC1B,qBAAmB,UAAU;AAAA,MAC7B,WAAW;AAAA,QACT;AAAA,QACA,kBAAkB;AAAA,QAClB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

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

@@ -0,0 +1,33 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+declare const cardVariants: (props?: ({
+    variant?: "default" | "outline" | "ghost" | "elevated" | null | undefined;
+    padding?: "none" | "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface CardProps extends React.ComponentProps<"div">, VariantProps<typeof cardVariants> {
+}
+type CardHeaderProps = React.ComponentProps<"div">;
+type CardTitleProps = React.ComponentProps<"h3">;
+type CardDescriptionProps = React.ComponentProps<"p">;
+type CardActionProps = React.ComponentProps<"div">;
+type CardContentProps = React.ComponentProps<"div">;
+type CardFooterProps = React.ComponentProps<"div">;
+declare function CardBase({ className, variant, padding, ...props }: CardProps): React.JSX.Element;
+declare function CardHeader({ className, ...props }: CardHeaderProps): React.JSX.Element;
+declare function CardTitle({ className, ...props }: CardTitleProps): React.JSX.Element;
+declare function CardDescription({ className, ...props }: CardDescriptionProps): React.JSX.Element;
+declare function CardAction({ className, ...props }: CardActionProps): React.JSX.Element;
+declare function CardContent({ className, ...props }: CardContentProps): React.JSX.Element;
+declare function CardFooter({ className, ...props }: CardFooterProps): React.JSX.Element;
+declare const Card: typeof CardBase & {
+    Header: typeof CardHeader;
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+    Content: typeof CardContent;
+    Footer: typeof CardFooter;
+    Action: typeof CardAction;
+};
+
+export { Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, cardVariants };

package/dist/components/ui/card.js

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/cn.js";
+const cardVariants = cva("rounded-xl", {
+  variants: {
+    variant: {
+      default: "bg-card border border-border shadow-surface",
+      elevated: "bg-card border border-border shadow-card",
+      outline: "bg-transparent border border-border",
+      ghost: "bg-transparent border-none"
+    },
+    padding: {
+      none: "",
+      sm: "p-4",
+      md: "p-6",
+      lg: "p-8"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    padding: "md"
+  }
+});
+function CardBase({ className, variant, padding, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card", className: cn(cardVariants({ variant, padding }), className), ...props });
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-header", className: cn("flex flex-col space-y-1.5", className), ...props });
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      "data-slot": "card-title",
+      className: cn("text-lg font-semibold text-foreground leading-none tracking-tight", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx("p", { "data-slot": "card-description", className: cn("text-sm text-muted-foreground", className), ...props });
+}
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-action", className: cn("ml-auto", className), ...props });
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-content", className: cn("pt-4", className), ...props });
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-footer", className: cn("flex items-center pt-4", className), ...props });
+}
+const Card = Object.assign(CardBase, {
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+  Content: CardContent,
+  Footer: CardFooter,
+  Action: CardAction
+});
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  cardVariants
+};
+//# sourceMappingURL=card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/card.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/*\n * Cấu trúc + style port nguyên trạng từ comitor-ds. Tên export giữ tương thích shadcn\n * (Card / CardHeader / CardTitle / CardDescription / CardContent / CardFooter), thêm\n * CardAction (bổ sung, không có trong shadcn gốc).\n */\nconst cardVariants = cva(\"rounded-xl\", {\n  variants: {\n    variant: {\n      default: \"bg-card border border-border shadow-surface\",\n      elevated: \"bg-card border border-border shadow-card\",\n      outline: \"bg-transparent border border-border\",\n      ghost: \"bg-transparent border-none\"\n    },\n    padding: {\n      none: \"\",\n      sm: \"p-4\",\n      md: \"p-6\",\n      lg: \"p-8\"\n    }\n  },\n  defaultVariants: {\n    variant: \"default\",\n    padding: \"md\"\n  }\n});\n\nexport interface CardProps extends React.ComponentProps<\"div\">, VariantProps<typeof cardVariants> {}\nexport type CardHeaderProps = React.ComponentProps<\"div\">;\nexport type CardTitleProps = React.ComponentProps<\"h3\">;\nexport type CardDescriptionProps = React.ComponentProps<\"p\">;\nexport type CardActionProps = React.ComponentProps<\"div\">;\nexport type CardContentProps = React.ComponentProps<\"div\">;\nexport type CardFooterProps = React.ComponentProps<\"div\">;\n\nfunction CardBase({ className, variant, padding, ...props }: CardProps) {\n  return <div data-slot=\"card\" className={cn(cardVariants({ variant, padding }), className)} {...props} />;\n}\n\nfunction CardHeader({ className, ...props }: CardHeaderProps) {\n  return <div data-slot=\"card-header\" className={cn(\"flex flex-col space-y-1.5\", className)} {...props} />;\n}\n\nfunction CardTitle({ className, ...props }: CardTitleProps) {\n  return (\n    <h3\n      data-slot=\"card-title\"\n      className={cn(\"text-lg font-semibold text-foreground leading-none tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: CardDescriptionProps) {\n  return <p data-slot=\"card-description\" className={cn(\"text-sm text-muted-foreground\", className)} {...props} />;\n}\n\nfunction CardAction({ className, ...props }: CardActionProps) {\n  return <div data-slot=\"card-action\" className={cn(\"ml-auto\", className)} {...props} />;\n}\n\nfunction CardContent({ className, ...props }: CardContentProps) {\n  return <div data-slot=\"card-content\" className={cn(\"pt-4\", className)} {...props} />;\n}\n\nfunction CardFooter({ className, ...props }: CardFooterProps) {\n  return <div data-slot=\"card-footer\" className={cn(\"flex items-center pt-4\", className)} {...props} />;\n}\n\n/*\n * `Card` mở cả hai lối dùng: API tên rời (Card + CardHeader/CardTitle/…) và API gộp\n * (Card.Header / Card.Title / Card.Description / Card.Content / Card.Footer / Card.Action).\n */\nconst Card = Object.assign(CardBase, {\n  Header: CardHeader,\n  Title: CardTitle,\n  Description: CardDescription,\n  Content: CardContent,\n  Footer: CardFooter,\n  Action: CardAction\n});\n\nexport { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants };\n"],"mappings":"AAuCS;AAvCT,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAOnB,MAAM,eAAe,IAAI,cAAc;AAAA,EACrC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF,CAAC;AAUD,SAAS,SAAS,EAAE,WAAW,SAAS,SAAS,GAAG,MAAM,GAAc;AACtE,SAAO,oBAAC,SAAI,aAAU,QAAO,WAAW,GAAG,aAAa,EAAE,SAAS,QAAQ,CAAC,GAAG,SAAS,GAAI,GAAG,OAAO;AACxG;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AAC5D,SAAO,oBAAC,SAAI,aAAU,eAAc,WAAW,GAAG,6BAA6B,SAAS,GAAI,GAAG,OAAO;AACxG;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAAmB;AAC1D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,qEAAqE,SAAS;AAAA,MAC3F,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,MAAM,GAAyB;AACtE,SAAO,oBAAC,OAAE,aAAU,oBAAmB,WAAW,GAAG,iCAAiC,SAAS,GAAI,GAAG,OAAO;AAC/G;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AAC5D,SAAO,oBAAC,SAAI,aAAU,eAAc,WAAW,GAAG,WAAW,SAAS,GAAI,GAAG,OAAO;AACtF;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAqB;AAC9D,SAAO,oBAAC,SAAI,aAAU,gBAAe,WAAW,GAAG,QAAQ,SAAS,GAAI,GAAG,OAAO;AACpF;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AAC5D,SAAO,oBAAC,SAAI,aAAU,eAAc,WAAW,GAAG,0BAA0B,SAAS,GAAI,GAAG,OAAO;AACrG;AAMA,MAAM,OAAO,OAAO,OAAO,UAAU;AAAA,EACnC,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACV,CAAC;","names":[]}