acai-ui-library 0.1.11

package/dist/components/file-input.js

@@ -0,0 +1,101 @@
+"use client";
+
+// src/components/file-input.tsx
+import * as React from "react";
+import { CloudUpload } from "lucide-react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/file-input.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var FileInput = React.forwardRef(
+  ({ accept, maxSize = 15, onFileSelect, multiple = false, disabled = false, className, ...props }, ref) => {
+    const [isDragOver, setIsDragOver] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      if (!disabled) setIsDragOver(true);
+    };
+    const handleDragLeave = () => setIsDragOver(false);
+    const handleDrop = (e) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      if (disabled) return;
+      const files = Array.from(e.dataTransfer.files);
+      onFileSelect?.(files);
+    };
+    const handleClick = () => {
+      if (!disabled) inputRef.current?.click();
+    };
+    const handleKeyDown = (e) => {
+      if (disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        inputRef.current?.click();
+      }
+    };
+    const handleChange = (e) => {
+      const files = Array.from(e.target.files || []);
+      onFileSelect?.(files);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-label": "File upload area",
+        "aria-disabled": disabled || void 0,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        className: cn(
+          "flex flex-col items-center justify-center gap-[14px] rounded-[6px] bg-white p-[22px] cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)]",
+          isDragOver && "border-2 border-dashed border-[var(--hc-primary-500)] bg-[var(--hc-primary-100)]",
+          !isDragOver && "border-2 border-dashed border-[var(--hc-color-border-subtle)]",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(CloudUpload, { className: "size-6 text-[var(--hc-primary-500)]" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-[12px] leading-[16px] text-[var(--hc-grey-200)] text-center", children: [
+            "PNG, JPG or PDF, smaller than ",
+            maxSize,
+            "MB"
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "text-[14px] leading-[20px] font-medium text-[var(--hc-grey-300)] text-center", children: [
+            "Drag and Drop your file here or",
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "text-[var(--hc-primary-500)] hover:underline", children: "Browse file" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              accept,
+              multiple,
+              onChange: handleChange,
+              className: "hidden",
+              tabIndex: -1,
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FileInput.displayName = "FileInput";
+export {
+  FileInput
+};
+//# sourceMappingURL=file-input.js.map

package/dist/components/file-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/file-input.tsx","../../src/lib/utils.ts"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { CloudUpload } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nexport interface FileInputProps {\n  accept?: string\n  maxSize?: number // MB\n  onFileSelect?: (files: File[]) => void\n  multiple?: boolean\n  disabled?: boolean\n  className?: string\n}\n\nconst FileInput = React.forwardRef<HTMLDivElement, FileInputProps>(\n  ({ accept, maxSize = 15, onFileSelect, multiple = false, disabled = false, className, ...props }, ref) => {\n    const [isDragOver, setIsDragOver] = React.useState(false)\n    const inputRef = React.useRef<HTMLInputElement>(null)\n\n    const handleDragOver = (e: React.DragEvent) => {\n      e.preventDefault()\n      if (!disabled) setIsDragOver(true)\n    }\n\n    const handleDragLeave = () => setIsDragOver(false)\n\n    const handleDrop = (e: React.DragEvent) => {\n      e.preventDefault()\n      setIsDragOver(false)\n      if (disabled) return\n      const files = Array.from(e.dataTransfer.files)\n      onFileSelect?.(files)\n    }\n\n    const handleClick = () => {\n      if (!disabled) inputRef.current?.click()\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n      if (e.key === \"Enter\" || e.key === \" \") {\n        e.preventDefault()\n        inputRef.current?.click()\n      }\n    }\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const files = Array.from(e.target.files || [])\n      onFileSelect?.(files)\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        aria-label=\"File upload area\"\n        aria-disabled={disabled || undefined}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"flex flex-col items-center justify-center gap-[14px] rounded-[6px] bg-white p-[22px] cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)]\",\n          isDragOver && \"border-2 border-dashed border-[var(--hc-primary-500)] bg-[var(--hc-primary-100)]\",\n          !isDragOver && \"border-2 border-dashed border-[var(--hc-color-border-subtle)]\",\n          disabled && \"opacity-50 cursor-not-allowed\",\n          className\n        )}\n        {...props}\n      >\n        <CloudUpload className=\"size-6 text-[var(--hc-primary-500)]\" />\n        <p className=\"text-[12px] leading-[16px] text-[var(--hc-grey-200)] text-center\">\n          PNG, JPG or PDF, smaller than {maxSize}MB\n        </p>\n        <p className=\"text-[14px] leading-[20px] font-medium text-[var(--hc-grey-300)] text-center\">\n          Drag and Drop your file here or{\" \"}\n          <span className=\"text-[var(--hc-primary-500)] hover:underline\">Browse file</span>\n        </p>\n        <input\n          ref={inputRef}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          onChange={handleChange}\n          className=\"hidden\"\n          tabIndex={-1}\n          aria-hidden=\"true\"\n        />\n      </div>\n    )\n  }\n)\nFileInput.displayName = \"FileInput\"\n\nexport { FileInput }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;AAEA,YAAY,WAAW;AACvB,SAAS,mBAAmB;;;ACH5B,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADoEQ,cACA,YADA;AA1DR,IAAM,YAAkB;AAAA,EACtB,CAAC,EAAE,QAAQ,UAAU,IAAI,cAAc,WAAW,OAAO,WAAW,OAAO,WAAW,GAAG,MAAM,GAAG,QAAQ;AACxG,UAAM,CAAC,YAAY,aAAa,IAAU,eAAS,KAAK;AACxD,UAAM,WAAiB,aAAyB,IAAI;AAEpD,UAAM,iBAAiB,CAAC,MAAuB;AAC7C,QAAE,eAAe;AACjB,UAAI,CAAC,SAAU,eAAc,IAAI;AAAA,IACnC;AAEA,UAAM,kBAAkB,MAAM,cAAc,KAAK;AAEjD,UAAM,aAAa,CAAC,MAAuB;AACzC,QAAE,eAAe;AACjB,oBAAc,KAAK;AACnB,UAAI,SAAU;AACd,YAAM,QAAQ,MAAM,KAAK,EAAE,aAAa,KAAK;AAC7C,qBAAe,KAAK;AAAA,IACtB;AAEA,UAAM,cAAc,MAAM;AACxB,UAAI,CAAC,SAAU,UAAS,SAAS,MAAM;AAAA,IACzC;AAEA,UAAM,gBAAgB,CAAC,MAA2C;AAChE,UAAI,SAAU;AACd,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,UAAE,eAAe;AACjB,iBAAS,SAAS,MAAM;AAAA,MAC1B;AAAA,IACF;AAEA,UAAM,eAAe,CAAC,MAA2C;AAC/D,YAAM,QAAQ,MAAM,KAAK,EAAE,OAAO,SAAS,CAAC,CAAC;AAC7C,qBAAe,KAAK;AAAA,IACtB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,UAAU,WAAW,KAAK;AAAA,QAC1B,cAAW;AAAA,QACX,iBAAe,YAAY;AAAA,QAC3B,YAAY;AAAA,QACZ,aAAa;AAAA,QACb,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA,cAAc;AAAA,UACd,CAAC,cAAc;AAAA,UACf,YAAY;AAAA,UACZ;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,eAAY,WAAU,uCAAsC;AAAA,UAC7D,qBAAC,OAAE,WAAU,oEAAmE;AAAA;AAAA,YAC/C;AAAA,YAAQ;AAAA,aACzC;AAAA,UACA,qBAAC,OAAE,WAAU,gFAA+E;AAAA;AAAA,YAC1D;AAAA,YAChC,oBAAC,UAAK,WAAU,gDAA+C,yBAAW;AAAA,aAC5E;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,MAAK;AAAA,cACL;AAAA,cACA;AAAA,cACA,UAAU;AAAA,cACV,WAAU;AAAA,cACV,UAAU;AAAA,cACV,eAAY;AAAA;AAAA,UACd;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;","names":[]}

package/dist/components/form.cjs

@@ -0,0 +1,256 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/form.tsx
+var form_exports = {};
+__export(form_exports, {
+  Form: () => Form,
+  FormControl: () => FormControl,
+  FormDescription: () => FormDescription,
+  FormField: () => FormField,
+  FormItem: () => FormItem,
+  FormLabel: () => FormLabel,
+  FormMessage: () => FormMessage,
+  useFormField: () => useFormField
+});
+module.exports = __toCommonJS(form_exports);
+var React3 = __toESM(require("react"), 1);
+var import_react_slot = require("@radix-ui/react-slot");
+var import_react_hook_form = require("react-hook-form");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/label.tsx
+var React2 = __toESM(require("react"), 1);
+var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
+var import_class_variance_authority = require("class-variance-authority");
+var import_lucide_react = require("lucide-react");
+
+// src/components/tooltip.tsx
+var React = __toESM(require("react"), 1);
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
+      className
+    ),
+    ...props
+  }
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/components/label.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var labelVariants = (0, import_class_variance_authority.cva)(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React2.forwardRef(({ className, required, helperText, tooltip, children, ...props }, ref) => {
+  const tooltipIcon = tooltip ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "span",
+      {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "More information",
+        className: "ms-1 inline-flex align-middle text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-1 focus-visible:ring-offset-background rounded-sm",
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Info, { className: "size-3.5", "aria-hidden": "true" })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TooltipContent, { children: tooltip })
+  ] }) }) : null;
+  if (helperText || tooltip) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        LabelPrimitive.Root,
+        {
+          ref,
+          className: cn(labelVariants(), className),
+          ...props,
+          children: [
+            children,
+            required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ms-1 text-destructive", children: "*" }),
+            tooltipIcon
+          ]
+        }
+      ),
+      helperText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mt-1 text-xs text-muted-foreground", children: helperText })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    LabelPrimitive.Root,
+    {
+      ref,
+      className: cn(labelVariants(), className),
+      ...props,
+      children: [
+        children,
+        required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ms-1 text-destructive", children: "*" })
+      ]
+    }
+  );
+});
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/components/form.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Form = import_react_hook_form.FormProvider;
+var FormFieldContext = React3.createContext(
+  {}
+);
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_hook_form.Controller, { ...props }) });
+};
+var useFormField = () => {
+  const fieldContext = React3.useContext(FormFieldContext);
+  const itemContext = React3.useContext(FormItemContext);
+  const { getFieldState, formState } = (0, import_react_hook_form.useFormContext)();
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+var FormItemContext = React3.createContext(
+  {}
+);
+var FormItem = React3.forwardRef(
+  ({ className, orientation = "vertical", ...props }, ref) => {
+    const id = React3.useId();
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FormItemContext.Provider, { value: { id, orientation }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(
+          orientation === "horizontal" ? "flex items-start gap-4" : "space-y-2",
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
+FormItem.displayName = "FormItem";
+var FormLabel = React3.forwardRef(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+  const itemContext = React3.useContext(FormItemContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Label,
+    {
+      ref,
+      className: cn(
+        error && "text-destructive",
+        itemContext.orientation === "horizontal" && "w-32 shrink-0 pt-2",
+        className
+      ),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+});
+FormLabel.displayName = "FormLabel";
+var FormControl = React3.forwardRef(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_slot.Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+});
+FormControl.displayName = "FormControl";
+var FormDescription = React3.forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React3.forwardRef(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "p",
+    {
+      ref,
+      id: formMessageId,
+      className: cn("text-sm font-medium text-destructive", className),
+      ...props,
+      children: body
+    }
+  );
+});
+FormMessage.displayName = "FormMessage";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField
+});
+//# sourceMappingURL=form.cjs.map

package/dist/components/form.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/form.tsx","../../src/lib/utils.ts","../../src/components/label.tsx","../../src/components/tooltip.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  FormProvider,\n  useFormContext,\n} from \"react-hook-form\"\nimport { cn } from \"../lib/utils\"\nimport { Label } from \"./label\"\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>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n  const fieldState = getFieldState(fieldContext.name, formState)\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n  const { id } = itemContext\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\ntype FormItemContextValue = {\n  id: string\n  orientation: \"vertical\" | \"horizontal\"\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nexport interface FormItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: \"vertical\" | \"horizontal\"\n}\n\nconst FormItem = React.forwardRef<HTMLDivElement, FormItemProps>(\n  ({ className, orientation = \"vertical\", ...props }, ref) => {\n    const id = React.useId()\n    return (\n      <FormItemContext.Provider value={{ id, orientation }}>\n        <div\n          ref={ref}\n          className={cn(\n            orientation === \"horizontal\"\n              ? \"flex items-start gap-4\"\n              : \"space-y-2\",\n            className\n          )}\n          {...props}\n        />\n      </FormItemContext.Provider>\n    )\n  }\n)\nFormItem.displayName = \"FormItem\"\n\nconst FormLabel = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof Label>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField()\n  const itemContext = React.useContext(FormItemContext)\n  return (\n    <Label\n      ref={ref}\n      className={cn(\n        error && \"text-destructive\",\n        itemContext.orientation === \"horizontal\" && \"w-32 shrink-0 pt-2\",\n        className\n      )}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n})\nFormLabel.displayName = \"FormLabel\"\n\nconst FormControl = React.forwardRef<\n  React.ElementRef<typeof Slot>,\n  React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n})\nFormControl.displayName = \"FormControl\"\n\nconst FormDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField()\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n})\nFormDescription.displayName = \"FormDescription\"\n\nconst FormMessage = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message) : children\n  if (!body) {\n    return null\n  }\n  return (\n    <p\n      ref={ref}\n      id={formMessageId}\n      className={cn(\"text-sm font-medium text-destructive\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n})\nFormMessage.displayName = \"FormMessage\"\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Info } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"./tooltip\"\n\nconst labelVariants = cva(\n  \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nexport interface LabelProps\n  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,\n    VariantProps<typeof labelVariants> {\n  required?: boolean\n  helperText?: string\n  tooltip?: string\n}\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  LabelProps\n>(({ className, required, helperText, tooltip, children, ...props }, ref) => {\n  const tooltipIcon = tooltip ? (\n    <TooltipProvider delayDuration={200}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span\n            role=\"button\"\n            tabIndex={0}\n            aria-label=\"More information\"\n            className=\"ms-1 inline-flex align-middle text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-1 focus-visible:ring-offset-background rounded-sm\"\n          >\n            <Info className=\"size-3.5\" aria-hidden=\"true\" />\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>{tooltip}</TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  ) : null\n\n  if (helperText || tooltip) {\n    return (\n      <span className=\"flex flex-col\">\n        <LabelPrimitive.Root\n          ref={ref}\n          className={cn(labelVariants(), className)}\n          {...props}\n        >\n          {children}\n          {required && <span className=\"ms-1 text-destructive\">*</span>}\n          {tooltipIcon}\n        </LabelPrimitive.Root>\n        {helperText && (\n          <span className=\"mt-1 text-xs text-muted-foreground\">\n            {helperText}\n          </span>\n        )}\n      </span>\n    )\n  }\n\n  return (\n    <LabelPrimitive.Root\n      ref={ref}\n      className={cn(labelVariants(), className)}\n      {...props}\n    >\n      {children}\n      {required && <span className=\"ms-1 text-destructive\">*</span>}\n    </LabelPrimitive.Root>\n  )\n})\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n","import * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\nimport { cn } from \"../lib/utils\"\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Content\n    ref={ref}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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\",\n      className\n    )}\n    {...props}\n  />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n"],"mappings":"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","names":["React","React","import_jsx_runtime","import_jsx_runtime"]}

package/dist/components/form.d.cts

@@ -0,0 +1,34 @@
+import * as _radix_ui_react_slot from '@radix-ui/react-slot';
+import { LabelProps } from './label.cjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import * as React from 'react';
+import 'class-variance-authority/types';
+import '@radix-ui/react-label';
+import 'class-variance-authority';
+
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+interface FormItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: "vertical" | "horizontal";
+}
+declare const FormItem: React.ForwardRefExoticComponent<FormItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<_radix_ui_react_slot.SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+
+export { Form, FormControl, FormDescription, FormField, FormItem, type FormItemProps, FormLabel, FormMessage, useFormField };

package/dist/components/form.d.ts

@@ -0,0 +1,34 @@
+import * as _radix_ui_react_slot from '@radix-ui/react-slot';
+import { LabelProps } from './label.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import * as React from 'react';
+import 'class-variance-authority/types';
+import '@radix-ui/react-label';
+import 'class-variance-authority';
+
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+interface FormItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: "vertical" | "horizontal";
+}
+declare const FormItem: React.ForwardRefExoticComponent<FormItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<_radix_ui_react_slot.SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+
+export { Form, FormControl, FormDescription, FormField, FormItem, type FormItemProps, FormLabel, FormMessage, useFormField };