@comitor/ui 0.1.0

package/dist/components/ui/form.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState
+} from "react-hook-form";
+import { cn } from "../../lib/cn.js";
+import { Label } from "./label.js";
+const Form = FormProvider;
+const FormFieldContext = React.createContext({});
+const FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+};
+const FormItemContext = React.createContext({});
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  if (!fieldContext?.name) {
+    throw new Error("useFormField ph\u1EA3i \u0111\u01B0\u1EE3c d\xF9ng b\xEAn trong <FormField>");
+  }
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+function FormItem({ className, ...props }) {
+  const id = React.useId();
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
+}
+function FormLabel({ className, ...props }) {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      "data-slot": "form-label",
+      "data-error": !!error,
+      className: cn("data-[error=true]:text-destructive", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+}
+function FormControl({ ...props }) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      "data-slot": "form-control",
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+}
+function FormDescription({ className, ...props }) {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "form-description",
+      id: formDescriptionId,
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function FormMessage({ className, ...props }) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("p", { "data-slot": "form-message", id: formMessageId, className: cn("text-destructive text-sm", className), ...props, children: body });
+}
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField
+};
+//# sourceMappingURL=form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/form.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  FormProvider,\n  useFormContext,\n  useFormState\n} from \"react-hook-form\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Label } from \"./label.js\";\n\n/**\n * Binding shadcn ⇄ react-hook-form.\n *\n * ⚠ `react-hook-form` là peer OPTIONAL và có React context singleton: app và\n * package BẮT BUỘC dùng chung một bản, nếu không `useFormContext()` sẽ đọc nhầm\n * provider. Vì vậy file này phải nằm ở entry riêng `./form`, KHÔNG gom vào barrel `.`\n * (xem §3.2 + §8.2 của docs/spec-package.md).\n *\n * Lưu ý tên: `FormField` ở đây là wrapper của `Controller` (API shadcn), khác với\n * composite `FormField` (grid + label + error) ở Tier 2.\n */\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = {\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\nexport type FormProps = React.ComponentProps<typeof FormProvider>;\nexport type FormFieldProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> = ControllerProps<TFieldValues, TName>;\nexport type FormItemProps = React.ComponentProps<\"div\">;\nexport type FormLabelProps = React.ComponentProps<typeof LabelPrimitive.Root>;\nexport type FormControlProps = React.ComponentProps<typeof Slot>;\nexport type FormDescriptionProps = React.ComponentProps<\"p\">;\nexport type FormMessageProps = React.ComponentProps<\"p\">;\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n>({\n  ...props\n}: FormFieldProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);\n\n/**\n * Gom id (a11y) + trạng thái lỗi của field đang bao quanh.\n * Khác bản comitor-ds: kiểm tra context TRƯỚC khi dùng (bản gốc throw sau khi đã\n * đọc `fieldContext.name`, nên lỗi thật bị che bởi crash khác).\n */\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n\n  if (!fieldContext?.name) {\n    throw new Error(\"useFormField phải được dùng bên trong <FormField>\");\n  }\n\n  const { getFieldState } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState\n  };\n};\n\nfunction FormItem({ className, ...props }: FormItemProps) {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div data-slot=\"form-item\" className={cn(\"grid gap-2\", className)} {...props} />\n    </FormItemContext.Provider>\n  );\n}\n\nfunction FormLabel({ className, ...props }: FormLabelProps) {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(\"data-[error=true]:text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\nfunction FormControl({ ...props }: FormControlProps) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\nfunction FormDescription({ className, ...props }: FormDescriptionProps) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction FormMessage({ className, ...props }: FormMessageProps) {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? \"\") : props.children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <p data-slot=\"form-message\" id={formMessageId} className={cn(\"text-destructive text-sm\", className)} {...props}>\n      {body}\n    </p>\n  );\n}\n\nexport { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };\n"],"mappings":";AA2DM;AAxDN,SAAS,YAAY;AACrB,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EAIA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AACnB,SAAS,aAAa;AActB,MAAM,OAAO;AASb,MAAM,mBAAmB,MAAM,cAAqC,CAAC,CAA0B;AAa/F,MAAM,YAAY,CAGhB;AAAA,EACA,GAAG;AACL,MAA2C;AACzC,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,EAAE,MAAM,MAAM,KAAK,GACnD,8BAAC,cAAY,GAAG,OAAO,GACzB;AAEJ;AAMA,MAAM,kBAAkB,MAAM,cAAoC,CAAC,CAAyB;AAO5F,MAAM,eAAe,MAAM;AACzB,QAAM,eAAe,MAAM,WAAW,gBAAgB;AACtD,QAAM,cAAc,MAAM,WAAW,eAAe;AAEpD,MAAI,CAAC,cAAc,MAAM;AACvB,UAAM,IAAI,MAAM,6EAAmD;AAAA,EACrE;AAEA,QAAM,EAAE,cAAc,IAAI,eAAe;AACzC,QAAM,YAAY,aAAa,EAAE,MAAM,aAAa,KAAK,CAAC;AAC1D,QAAM,aAAa,cAAc,aAAa,MAAM,SAAS;AAE7D,QAAM,EAAE,GAAG,IAAI;AAEf,SAAO;AAAA,IACL;AAAA,IACA,MAAM,aAAa;AAAA,IACnB,YAAY,GAAG,EAAE;AAAA,IACjB,mBAAmB,GAAG,EAAE;AAAA,IACxB,eAAe,GAAG,EAAE;AAAA,IACpB,GAAG;AAAA,EACL;AACF;AAEA,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAkB;AACxD,QAAM,KAAK,MAAM,MAAM;AAEvB,SACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,GAAG,GACpC,8BAAC,SAAI,aAAU,aAAY,WAAW,GAAG,cAAc,SAAS,GAAI,GAAG,OAAO,GAChF;AAEJ;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAAmB;AAC1D,QAAM,EAAE,OAAO,WAAW,IAAI,aAAa;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,CAAC,CAAC;AAAA,MACd,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAC7D,SAAS;AAAA,MACR,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,YAAY,EAAE,GAAG,MAAM,GAAqB;AACnD,QAAM,EAAE,OAAO,YAAY,mBAAmB,cAAc,IAAI,aAAa;AAE7E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,IAAI;AAAA,MACJ,oBAAkB,CAAC,QAAQ,GAAG,iBAAiB,KAAK,GAAG,iBAAiB,IAAI,aAAa;AAAA,MACzF,gBAAc,CAAC,CAAC;AAAA,MACf,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,MAAM,GAAyB;AACtE,QAAM,EAAE,kBAAkB,IAAI,aAAa;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,IAAI;AAAA,MACJ,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAqB;AAC9D,QAAM,EAAE,OAAO,cAAc,IAAI,aAAa;AAC9C,QAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,EAAE,IAAI,MAAM;AAE1D,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,OAAE,aAAU,gBAAe,IAAI,eAAe,WAAW,GAAG,4BAA4B,SAAS,GAAI,GAAG,OACtG,gBACH;AAEJ;","names":[]}

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

@@ -0,0 +1,17 @@
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import * as React from 'react';
+
+/**
+ * HoverCard — thẻ xem nhanh khi rê chuột (Radix HoverCard).
+ *
+ * Dùng cho hồ sơ người dùng, xem trước task/thẻ CRM. Chỉ kích hoạt bằng chuột nên
+ * nội dung bên trong phải là thông tin bổ trợ, không được là đường duy nhất để thao tác.
+ */
+type HoverCardProps = React.ComponentProps<typeof HoverCardPrimitive.Root>;
+declare function HoverCard({ ...props }: HoverCardProps): React.JSX.Element;
+type HoverCardTriggerProps = React.ComponentProps<typeof HoverCardPrimitive.Trigger>;
+declare function HoverCardTrigger({ ...props }: HoverCardTriggerProps): React.JSX.Element;
+type HoverCardContentProps = React.ComponentProps<typeof HoverCardPrimitive.Content>;
+declare function HoverCardContent({ className, align, sideOffset, ...props }: HoverCardContentProps): React.JSX.Element;
+
+export { HoverCard, HoverCardContent, type HoverCardContentProps, type HoverCardProps, HoverCardTrigger, type HoverCardTriggerProps };

package/dist/components/ui/hover-card.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { cn } from "../../lib/cn.js";
+function HoverCard({ ...props }) {
+  return /* @__PURE__ */ jsx(HoverCardPrimitive.Root, { "data-slot": "hover-card", ...props });
+}
+function HoverCardTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(HoverCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props });
+}
+function HoverCardContent({ className, align = "center", sideOffset = 4, ...props }) {
+  return /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: /* @__PURE__ */ jsx(
+    HoverCardPrimitive.Content,
+    {
+      "data-slot": "hover-card-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-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-overlay outline-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+export {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+};
+//# sourceMappingURL=hover-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/hover-card.tsx"],"sourcesContent":["\"use client\";\n\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/**\n * HoverCard — thẻ xem nhanh khi rê chuột (Radix HoverCard).\n *\n * Dùng cho hồ sơ người dùng, xem trước task/thẻ CRM. Chỉ kích hoạt bằng chuột nên\n * nội dung bên trong phải là thông tin bổ trợ, không được là đường duy nhất để thao tác.\n */\n\nexport type HoverCardProps = React.ComponentProps<typeof HoverCardPrimitive.Root>;\n\nfunction HoverCard({ ...props }: HoverCardProps) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\nexport type HoverCardTriggerProps = React.ComponentProps<typeof HoverCardPrimitive.Trigger>;\n\nfunction HoverCardTrigger({ ...props }: HoverCardTriggerProps) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\nexport type HoverCardContentProps = React.ComponentProps<typeof HoverCardPrimitive.Content>;\n\nfunction HoverCardContent({ className, align = \"center\", sideOffset = 4, ...props }: HoverCardContentProps) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-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-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-overlay outline-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardContent, HoverCardTrigger };\n"],"mappings":";AAgBS;AAdT,YAAY,wBAAwB;AAEpC,SAAS,UAAU;AAWnB,SAAS,UAAU,EAAE,GAAG,MAAM,GAAmB;AAC/C,SAAO,oBAAC,mBAAmB,MAAnB,EAAwB,aAAU,cAAc,GAAG,OAAO;AACpE;AAIA,SAAS,iBAAiB,EAAE,GAAG,MAAM,GAA0B;AAC7D,SAAO,oBAAC,mBAAmB,SAAnB,EAA2B,aAAU,sBAAsB,GAAG,OAAO;AAC/E;AAIA,SAAS,iBAAiB,EAAE,WAAW,QAAQ,UAAU,aAAa,GAAG,GAAG,MAAM,GAA0B;AAC1G,SACE,oBAAC,mBAAmB,QAAnB,EAA0B,aAAU,qBACnC;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;","names":[]}

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

@@ -0,0 +1,26 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { ButtonProps } from './button.js';
+
+type InputGroupProps = React.ComponentProps<"div">;
+declare function InputGroup({ className, ...props }: InputGroupProps): React.JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface InputGroupAddonProps extends React.ComponentProps<"div">, VariantProps<typeof inputGroupAddonVariants> {
+}
+declare function InputGroupAddon({ className, align, ...props }: InputGroupAddonProps): React.JSX.Element;
+declare const inputGroupButtonVariants: (props?: ({
+    size?: "xs" | "sm" | "icon-sm" | "icon-xs" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type InputGroupButtonProps = Omit<ButtonProps, "size"> & VariantProps<typeof inputGroupButtonVariants>;
+declare function InputGroupButton({ className, type, variant, size, ...props }: InputGroupButtonProps): React.JSX.Element;
+type InputGroupTextProps = React.ComponentProps<"span">;
+declare function InputGroupText({ className, ...props }: InputGroupTextProps): React.JSX.Element;
+type InputGroupInputProps = React.ComponentProps<"input">;
+declare function InputGroupInput({ className, ...props }: InputGroupInputProps): React.JSX.Element;
+type InputGroupTextareaProps = React.ComponentProps<"textarea">;
+declare function InputGroupTextarea({ className, ...props }: InputGroupTextareaProps): React.JSX.Element;
+
+export { InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupText, type InputGroupTextProps, InputGroupTextarea, type InputGroupTextareaProps, inputGroupAddonVariants, inputGroupButtonVariants };

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

@@ -0,0 +1,148 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/cn.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-colors duration-150 ease-out outline-none",
+        "h-9 has-[>textarea]:h-auto",
+        // Biến thể theo vị trí addon.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+        // Trạng thái focus.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-gold-300 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background",
+        // Trạng thái lỗi.
+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start": "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: chỉ là lối tắt bằng chuột, bàn phím đã Tab thẳng tới control
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "group",
+        "data-slot": "input-group-addon",
+        "data-align": align,
+        className: cn(inputGroupAddonVariants({ align }), className),
+        onClick: (event) => {
+          if (event.target.closest("button")) {
+            return;
+          }
+          event.currentTarget.parentElement?.querySelector("input")?.focus();
+        },
+        ...props
+      }
+    )
+  );
+}
+const inputGroupButtonVariants = cva("text-sm shadow-none flex gap-2 items-center", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+      sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+    }
+  },
+  defaultVariants: {
+    size: "xs"
+  }
+});
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+function InputGroupText({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupInput({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupTextarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+  inputGroupAddonVariants,
+  inputGroupButtonVariants
+};
+//# sourceMappingURL=input-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/input-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Button, type ButtonProps } from \"./button.js\";\nimport { Input } from \"./input.js\";\nimport { Textarea } from \"./textarea.js\";\n\nexport type InputGroupProps = React.ComponentProps<\"div\">;\n\nfunction InputGroup({ className, ...props }: InputGroupProps) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-colors duration-150 ease-out outline-none\",\n        \"h-9 has-[>textarea]:h-auto\",\n\n        // Biến thể theo vị trí addon.\n        \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\n        \"has-[>[data-align=inline-end]]:[&>input]:pr-2\",\n        \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n\n        // Trạng thái focus.\n        \"has-[[data-slot=input-group-control]:focus-visible]:border-gold-300 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background\",\n\n        // Trạng thái lỗi.\n        \"has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40\",\n\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\": \"order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5\",\n        \"block-end\": \"order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5\"\n      }\n    },\n    defaultVariants: {\n      align: \"inline-start\"\n    }\n  }\n);\n\nexport interface InputGroupAddonProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof inputGroupAddonVariants> {}\n\n/*\n * Bấm vào vùng addon thì dồn focus sang ô nhập bên trong (trừ khi bấm trúng một nút).\n * Đây là tiện ích chuột thuần tuý — bàn phím vẫn Tab thẳng vào input/button nên không\n * cần onKeyDown; addon không phải phần tử tương tác.\n */\nfunction InputGroupAddon({ className, align = \"inline-start\", ...props }: InputGroupAddonProps) {\n  return (\n    // biome-ignore lint/a11y/useKeyWithClickEvents: chỉ là lối tắt bằng chuột, bàn phím đã Tab thẳng tới control\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(event) => {\n        if ((event.target as HTMLElement).closest(\"button\")) {\n          return;\n        }\n        event.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupButtonVariants = cva(\"text-sm shadow-none flex gap-2 items-center\", {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2\",\n      sm: \"h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5\",\n      \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\n      \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\"\n    }\n  },\n  defaultVariants: {\n    size: \"xs\"\n  }\n});\n\nexport type InputGroupButtonProps = Omit<ButtonProps, \"size\"> & VariantProps<typeof inputGroupButtonVariants>;\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: InputGroupButtonProps) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n\nexport type InputGroupTextProps = React.ComponentProps<\"span\">;\n\nfunction InputGroupText({ className, ...props }: InputGroupTextProps) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type InputGroupInputProps = React.ComponentProps<\"input\">;\n\nfunction InputGroupInput({ className, ...props }: InputGroupInputProps) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type InputGroupTextareaProps = React.ComponentProps<\"textarea\">;\n\nfunction InputGroupTextarea({ className, ...props }: InputGroupTextareaProps) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n  inputGroupAddonVariants,\n  inputGroupButtonVariants\n};\n"],"mappings":";AAaI;AAXJ,SAAS,WAA8B;AAEvC,SAAS,UAAU;AACnB,SAAS,cAAgC;AACzC,SAAS,aAAa;AACtB,SAAS,gBAAgB;AAIzB,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAGA;AAAA;AAAA,QAGA;AAAA,QAEA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,MAAM,0BAA0B;AAAA,EAC9B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,gBAAgB;AAAA,QAChB,cAAc;AAAA,QACd,eACE;AAAA,QACF,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAWA,SAAS,gBAAgB,EAAE,WAAW,QAAQ,gBAAgB,GAAG,MAAM,GAAyB;AAC9F;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAU;AAAA,QACV,cAAY;AAAA,QACZ,WAAW,GAAG,wBAAwB,EAAE,MAAM,CAAC,GAAG,SAAS;AAAA,QAC3D,SAAS,CAAC,UAAU;AAClB,cAAK,MAAM,OAAuB,QAAQ,QAAQ,GAAG;AACnD;AAAA,UACF;AACA,gBAAM,cAAc,eAAe,cAAc,OAAO,GAAG,MAAM;AAAA,QACnE;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA;AAEJ;AAEA,MAAM,2BAA2B,IAAI,+CAA+C;AAAA,EAClF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,WAAW;AAAA,MACX,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAID,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP,GAAG;AACL,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAW;AAAA,MACX;AAAA,MACA,WAAW,GAAG,yBAAyB,EAAE,KAAK,CAAC,GAAG,SAAS;AAAA,MAC1D,GAAG;AAAA;AAAA,EACN;AAEJ;AAIA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAAwB;AACpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAIA,SAAS,gBAAgB,EAAE,WAAW,GAAG,MAAM,GAAyB;AACtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAIA,SAAS,mBAAmB,EAAE,WAAW,GAAG,MAAM,GAA4B;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/ui/input-otp.d.ts

@@ -0,0 +1,23 @@
+import { OTPInput } from 'input-otp';
+import * as React from 'react';
+
+/**
+ * InputOTP — ô nhập mã OTP (input-otp). Dùng cho luồng 2FA / xác thực email.
+ *
+ * Khác bản comitor-ds: đọc slot bằng optional chaining thay vì `?? {}` — tsconfig
+ * bật `noUncheckedIndexedAccess` nên `slots[index]` là `Slot | undefined`.
+ */
+type InputOTPProps = React.ComponentProps<typeof OTPInput> & {
+    containerClassName?: string;
+};
+type InputOTPGroupProps = React.ComponentProps<"div">;
+type InputOTPSlotProps = React.ComponentProps<"div"> & {
+    index: number;
+};
+type InputOTPSeparatorProps = React.ComponentProps<"div">;
+declare function InputOTP({ className, containerClassName, ...props }: InputOTPProps): React.JSX.Element;
+declare function InputOTPGroup({ className, ...props }: InputOTPGroupProps): React.JSX.Element;
+declare function InputOTPSlot({ index, className, ...props }: InputOTPSlotProps): React.JSX.Element;
+declare function InputOTPSeparator({ ...props }: InputOTPSeparatorProps): React.JSX.Element;
+
+export { InputOTP, InputOTPGroup, type InputOTPGroupProps, type InputOTPProps, InputOTPSeparator, type InputOTPSeparatorProps, InputOTPSlot, type InputOTPSlotProps };

package/dist/components/ui/input-otp.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+function InputOTP({ className, containerClassName, ...props }) {
+  return /* @__PURE__ */ jsx(
+    OTPInput,
+    {
+      "data-slot": "input-otp",
+      containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName),
+      className: cn("disabled:cursor-not-allowed", className),
+      ...props
+    }
+  );
+}
+function InputOTPGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "input-otp-group", className: cn("flex items-center", className), ...props });
+}
+function InputOTPSlot({ index, className, ...props }) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const slot = inputOTPContext?.slots[index];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "input-otp-slot",
+      "data-active": slot?.isActive,
+      className: cn(
+        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-colors duration-150 ease-out outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        className
+      ),
+      ...props,
+      children: [
+        slot?.char,
+        slot?.hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" }) })
+      ]
+    }
+  );
+}
+function InputOTPSeparator({ ...props }) {
+  return (
+    // biome-ignore lint/a11y/useFocusableInteractive: dấu phân cách tĩnh giữa các nhóm ô, không phải splitter kéo được nên không cần focus
+    // biome-ignore lint/a11y/useAriaPropsForRole: separator tĩnh không có giá trị → không cần aria-valuenow
+    /* @__PURE__ */ jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: /* @__PURE__ */ jsx(MinusIcon, {}) })
+  );
+}
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot
+};
+//# sourceMappingURL=input-otp.js.map

package/dist/components/ui/input-otp.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/input-otp.tsx"],"sourcesContent":["\"use client\";\n\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport { MinusIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/**\n * InputOTP — ô nhập mã OTP (input-otp). Dùng cho luồng 2FA / xác thực email.\n *\n * Khác bản comitor-ds: đọc slot bằng optional chaining thay vì `?? {}` — tsconfig\n * bật `noUncheckedIndexedAccess` nên `slots[index]` là `Slot | undefined`.\n */\n\nexport type InputOTPProps = React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string;\n};\nexport type InputOTPGroupProps = React.ComponentProps<\"div\">;\nexport type InputOTPSlotProps = React.ComponentProps<\"div\"> & { index: number };\nexport type InputOTPSeparatorProps = React.ComponentProps<\"div\">;\n\nfunction InputOTP({ className, containerClassName, ...props }: InputOTPProps) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\"flex items-center gap-2 has-disabled:opacity-50\", containerClassName)}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction InputOTPGroup({ className, ...props }: InputOTPGroupProps) {\n  return <div data-slot=\"input-otp-group\" className={cn(\"flex items-center\", className)} {...props} />;\n}\n\nfunction InputOTPSlot({ index, className, ...props }: InputOTPSlotProps) {\n  const inputOTPContext = React.useContext(OTPInputContext);\n  const slot = inputOTPContext?.slots[index];\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={slot?.isActive}\n      className={cn(\n        \"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-colors duration-150 ease-out outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]\",\n        className\n      )}\n      {...props}\n    >\n      {slot?.char}\n      {slot?.hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction InputOTPSeparator({ ...props }: InputOTPSeparatorProps) {\n  return (\n    // biome-ignore lint/a11y/useFocusableInteractive: dấu phân cách tĩnh giữa các nhóm ô, không phải splitter kéo được nên không cần focus\n    // biome-ignore lint/a11y/useAriaPropsForRole: separator tĩnh không có giá trị → không cần aria-valuenow\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  );\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };\n"],"mappings":";AAuBI,cAkBA,YAlBA;AArBJ,SAAS,UAAU,uBAAuB;AAC1C,SAAS,iBAAiB;AAC1B,YAAY,WAAW;AACvB,SAAS,UAAU;AAgBnB,SAAS,SAAS,EAAE,WAAW,oBAAoB,GAAG,MAAM,GAAkB;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,oBAAoB,GAAG,mDAAmD,kBAAkB;AAAA,MAC5F,WAAW,GAAG,+BAA+B,SAAS;AAAA,MACrD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,MAAM,GAAuB;AAClE,SAAO,oBAAC,SAAI,aAAU,mBAAkB,WAAW,GAAG,qBAAqB,SAAS,GAAI,GAAG,OAAO;AACpG;AAEA,SAAS,aAAa,EAAE,OAAO,WAAW,GAAG,MAAM,GAAsB;AACvE,QAAM,kBAAkB,MAAM,WAAW,eAAe;AACxD,QAAM,OAAO,iBAAiB,MAAM,KAAK;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAa,MAAM;AAAA,MACnB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,cAAM;AAAA,QACN,MAAM,gBACL,oBAAC,SAAI,WAAU,yEACb,8BAAC,SAAI,WAAU,4DAA2D,GAC5E;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,SAAS,kBAAkB,EAAE,GAAG,MAAM,GAA2B;AAC/D;AAAA;AAAA;AAAA,IAGE,oBAAC,SAAI,aAAU,uBAAsB,MAAK,aAAa,GAAG,OACxD,8BAAC,aAAU,GACb;AAAA;AAEJ;","names":[]}

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+interface InputProps extends React.ComponentProps<"input"> {
+    /** Nhãn hiển thị phía trên ô nhập. */
+    label?: string;
+    /** Thông báo lỗi — có giá trị là ô nhập chuyển sang trạng thái lỗi. */
+    error?: string;
+    /** Gợi ý phụ dưới ô nhập; bị `error` che khi có lỗi. */
+    hint?: string;
+    /** Nội dung chèn bên trái trong lòng ô nhập (icon, đơn vị…). */
+    leftAddon?: React.ReactNode;
+    /** Nội dung chèn bên phải trong lòng ô nhập. */
+    rightAddon?: React.ReactNode;
+    /** Alias của `leftAddon`. */
+    leftIcon?: React.ReactNode;
+    /** Alias của `rightAddon`. */
+    rightIcon?: React.ReactNode;
+}
+declare function Input({ className, type, label, error, hint, leftAddon, rightAddon, leftIcon, rightIcon, id, "aria-invalid": ariaInvalid, ...props }: InputProps): React.JSX.Element;
+
+export { Input, type InputProps };

package/dist/components/ui/input.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+function Input({
+  className,
+  type,
+  label,
+  error,
+  hint,
+  leftAddon,
+  rightAddon,
+  leftIcon,
+  rightIcon,
+  id,
+  "aria-invalid": ariaInvalid,
+  ...props
+}) {
+  const reactId = React.useId();
+  const inputId = id ?? reactId;
+  const hasError = Boolean(error) || ariaInvalid === true || ariaInvalid === "true";
+  const left = leftAddon ?? leftIcon;
+  const right = rightAddon ?? rightIcon;
+  const inputEl = /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type,
+      "data-slot": "input",
+      "aria-invalid": hasError || void 0,
+      "aria-describedby": error ? `${inputId}-error` : hint ? `${inputId}-hint` : void 0,
+      className: cn(
+        "w-full h-9 px-3 rounded-md border bg-background text-sm text-foreground placeholder:text-muted-foreground",
+        "transition-colors duration-150 ease-out",
+        "focus:outline-none focus:ring-2 focus:ring-ring/50 focus:border-gold-300",
+        "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-muted",
+        hasError ? "border-red focus:ring-red/30 focus:border-red" : "border-input hover:border-ash-300 dark:hover:border-ash-500",
+        left && "pl-9",
+        right && "pr-9",
+        className
+      ),
+      ...props
+    }
+  );
+  if (!label && !error && !hint && !left && !right) {
+    return inputEl;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "mb-1.5 block text-sm font-medium text-foreground", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+      left && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-3 flex items-center text-muted-foreground", children: left }),
+      inputEl,
+      right && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute right-3 flex items-center text-muted-foreground", children: right })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { id: `${inputId}-error`, className: "mt-1.5 text-xs text-red", children: error }),
+    hint && !error && /* @__PURE__ */ jsx("p", { id: `${inputId}-hint`, className: "mt-1.5 text-xs text-muted-foreground", children: hint })
+  ] });
+}
+export {
+  Input
+};
+//# sourceMappingURL=input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\nexport interface InputProps extends React.ComponentProps<\"input\"> {\n  /** Nhãn hiển thị phía trên ô nhập. */\n  label?: string;\n  /** Thông báo lỗi — có giá trị là ô nhập chuyển sang trạng thái lỗi. */\n  error?: string;\n  /** Gợi ý phụ dưới ô nhập; bị `error` che khi có lỗi. */\n  hint?: string;\n  /** Nội dung chèn bên trái trong lòng ô nhập (icon, đơn vị…). */\n  leftAddon?: React.ReactNode;\n  /** Nội dung chèn bên phải trong lòng ô nhập. */\n  rightAddon?: React.ReactNode;\n  /** Alias của `leftAddon`. */\n  leftIcon?: React.ReactNode;\n  /** Alias của `rightAddon`. */\n  rightIcon?: React.ReactNode;\n}\n\n/*\n * Style port nguyên trạng từ comitor-ds. Các prop label / error / hint / addon là phần\n * BỔ SUNG: không truyền cái nào thì component render đúng một thẻ <input> trần đã style.\n * (Đổi gray-* → ash-* theo namespace thang xám của package — xem styles.css.)\n */\nfunction Input({\n  className,\n  type,\n  label,\n  error,\n  hint,\n  leftAddon,\n  rightAddon,\n  leftIcon,\n  rightIcon,\n  id,\n  \"aria-invalid\": ariaInvalid,\n  ...props\n}: InputProps) {\n  const reactId = React.useId();\n  const inputId = id ?? reactId;\n  const hasError = Boolean(error) || ariaInvalid === true || ariaInvalid === \"true\";\n  const left = leftAddon ?? leftIcon;\n  const right = rightAddon ?? rightIcon;\n\n  const inputEl = (\n    <input\n      id={inputId}\n      type={type}\n      data-slot=\"input\"\n      aria-invalid={hasError || undefined}\n      aria-describedby={error ? `${inputId}-error` : hint ? `${inputId}-hint` : undefined}\n      className={cn(\n        \"w-full h-9 px-3 rounded-md border bg-background text-sm text-foreground placeholder:text-muted-foreground\",\n        \"transition-colors duration-150 ease-out\",\n        \"focus:outline-none focus:ring-2 focus:ring-ring/50 focus:border-gold-300\",\n        \"disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-muted\",\n        hasError\n          ? \"border-red focus:ring-red/30 focus:border-red\"\n          : \"border-input hover:border-ash-300 dark:hover:border-ash-500\",\n        left && \"pl-9\",\n        right && \"pr-9\",\n        className\n      )}\n      {...props}\n    />\n  );\n\n  if (!label && !error && !hint && !left && !right) {\n    return inputEl;\n  }\n\n  return (\n    <div className=\"w-full\">\n      {label && (\n        <label htmlFor={inputId} className=\"mb-1.5 block text-sm font-medium text-foreground\">\n          {label}\n        </label>\n      )}\n      <div className=\"relative flex items-center\">\n        {left && (\n          <div className=\"pointer-events-none absolute left-3 flex items-center text-muted-foreground\">{left}</div>\n        )}\n        {inputEl}\n        {right && (\n          <div className=\"pointer-events-none absolute right-3 flex items-center text-muted-foreground\">{right}</div>\n        )}\n      </div>\n      {error && (\n        <p id={`${inputId}-error`} className=\"mt-1.5 text-xs text-red\">\n          {error}\n        </p>\n      )}\n      {hint && !error && (\n        <p id={`${inputId}-hint`} className=\"mt-1.5 text-xs text-muted-foreground\">\n          {hint}\n        </p>\n      )}\n    </div>\n  );\n}\n\nexport { Input };\n"],"mappings":";AAgDI,cAiCE,YAjCF;AA9CJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAwBnB,SAAS,MAAM;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAe;AACb,QAAM,UAAU,MAAM,MAAM;AAC5B,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,QAAQ,KAAK,KAAK,gBAAgB,QAAQ,gBAAgB;AAC3E,QAAM,OAAO,aAAa;AAC1B,QAAM,QAAQ,cAAc;AAE5B,QAAM,UACJ;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA,aAAU;AAAA,MACV,gBAAc,YAAY;AAAA,MAC1B,oBAAkB,QAAQ,GAAG,OAAO,WAAW,OAAO,GAAG,OAAO,UAAU;AAAA,MAC1E,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WACI,kDACA;AAAA,QACJ,QAAQ;AAAA,QACR,SAAS;AAAA,QACT;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAGF,MAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO;AAChD,WAAO;AAAA,EACT;AAEA,SACE,qBAAC,SAAI,WAAU,UACZ;AAAA,aACC,oBAAC,WAAM,SAAS,SAAS,WAAU,oDAChC,iBACH;AAAA,IAEF,qBAAC,SAAI,WAAU,8BACZ;AAAA,cACC,oBAAC,SAAI,WAAU,+EAA+E,gBAAK;AAAA,MAEpG;AAAA,MACA,SACC,oBAAC,SAAI,WAAU,gFAAgF,iBAAM;AAAA,OAEzG;AAAA,IACC,SACC,oBAAC,OAAE,IAAI,GAAG,OAAO,UAAU,WAAU,2BAClC,iBACH;AAAA,IAED,QAAQ,CAAC,SACR,oBAAC,OAAE,IAAI,GAAG,OAAO,SAAS,WAAU,wCACjC,gBACH;AAAA,KAEJ;AAEJ;","names":[]}

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

@@ -0,0 +1,39 @@
+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';
+
+type ItemGroupProps = React.ComponentProps<"div">;
+type ItemSeparatorProps = SeparatorProps;
+declare function ItemGroup({ className, ...props }: ItemGroupProps): React.JSX.Element;
+declare function ItemSeparator({ className, ...props }: ItemSeparatorProps): React.JSX.Element;
+declare const itemVariants: (props?: ({
+    variant?: "default" | "outline" | "muted" | null | undefined;
+    size?: "sm" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ItemProps extends React.ComponentProps<"div">, VariantProps<typeof itemVariants> {
+    /** Render ra chính phần tử con (Radix Slot) — dùng khi cần <a> hoặc <button>. */
+    asChild?: boolean;
+}
+declare function Item({ className, variant, size, asChild, ...props }: ItemProps): React.JSX.Element;
+declare const itemMediaVariants: (props?: ({
+    variant?: "image" | "default" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ItemMediaProps extends React.ComponentProps<"div">, VariantProps<typeof itemMediaVariants> {
+}
+type ItemContentProps = React.ComponentProps<"div">;
+type ItemTitleProps = React.ComponentProps<"div">;
+type ItemDescriptionProps = React.ComponentProps<"p">;
+type ItemActionsProps = React.ComponentProps<"div">;
+type ItemHeaderProps = React.ComponentProps<"div">;
+type ItemFooterProps = React.ComponentProps<"div">;
+declare function ItemMedia({ className, variant, ...props }: ItemMediaProps): React.JSX.Element;
+declare function ItemContent({ className, ...props }: ItemContentProps): React.JSX.Element;
+declare function ItemTitle({ className, ...props }: ItemTitleProps): React.JSX.Element;
+declare function ItemDescription({ className, ...props }: ItemDescriptionProps): React.JSX.Element;
+declare function ItemActions({ className, ...props }: ItemActionsProps): React.JSX.Element;
+declare function ItemHeader({ className, ...props }: ItemHeaderProps): React.JSX.Element;
+declare function ItemFooter({ className, ...props }: ItemFooterProps): React.JSX.Element;
+
+export { Item, ItemActions, type ItemActionsProps, ItemContent, type ItemContentProps, ItemDescription, type ItemDescriptionProps, ItemFooter, type ItemFooterProps, ItemGroup, type ItemGroupProps, ItemHeader, type ItemHeaderProps, ItemMedia, type ItemMediaProps, type ItemProps, ItemSeparator, type ItemSeparatorProps, ItemTitle, type ItemTitleProps, itemMediaVariants, itemVariants };