@meshagent/meshagent-tailwind 0.5.7 → 0.5.8

package/dist/cjs/tools/form.js

@@ -0,0 +1,81 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var form_exports = {};
+__export(form_exports, {
+  FormField: () => FormField
+});
+module.exports = __toCommonJS(form_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_hook_form = require("react-hook-form");
+var import_form_schema = require("./form-schema");
+function FormField({ fieldItem, control }) {
+  const field = (0, import_react.useMemo)(() => (0, import_form_schema.getFormField)(fieldItem), [fieldItem]);
+  const fieldKey = (0, import_react.useMemo)(() => (0, import_form_schema.getFormFieldType)(fieldItem), [fieldItem]);
+  const { field: controllerField } = (0, import_react_hook_form.useController)({
+    name: field.name,
+    control,
+    defaultValue: field.default_value
+  });
+  switch (fieldKey) {
+    case "checkbox": {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked: controllerField.value,
+            onChange: (e) => controllerField.onChange(e.target.checked)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: field.description })
+      ] });
+    }
+    case "radio_group": {
+      const f2 = field;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "block font-medium mb-1", children: field.description }),
+        (f2.options ?? []).map((opt) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              type: "radio",
+              value: opt.value,
+              checked: controllerField.value === opt.value,
+              onChange: () => controllerField.onChange(opt.value)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: opt.name })
+        ] }, opt.value))
+      ] });
+    }
+    case "select": {
+      const f2 = field;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "block font-medium mb-1", children: field.description }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", { ...controllerField, className: "border p-2 w-full rounded", children: (f2.options ?? []).map((opt) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: opt.value, children: opt.name }, opt.value)) })
+      ] });
+    }
+  }
+  const f = field;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "block font-medium", children: f.description }),
+    f.multiline ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { ...controllerField, className: "border p-2 w-full rounded" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "text", ...controllerField, className: "border p-2 w-full rounded" })
+  ] });
+}

package/dist/cjs/tools/toast.d.ts

@@ -0,0 +1,10 @@
+import { Tool } from '@meshagent/meshagent';
+import type { Response } from '@meshagent/meshagent';
+export declare class Toast extends Tool {
+    constructor({ name, description, title }?: {
+        name?: string;
+        description?: string;
+        title?: string;
+    });
+    execute(arguments_: Record<string, any>): Promise<Response>;
+}

package/dist/cjs/tools/toast.js

@@ -0,0 +1,52 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var toast_exports = {};
+__export(toast_exports, {
+  Toast: () => Toast
+});
+module.exports = __toCommonJS(toast_exports);
+var import_meshagent = require("@meshagent/meshagent");
+var import_sonner = require("sonner");
+const toastSchema = {
+  type: "object",
+  additionalProperties: false,
+  required: ["title", "description"],
+  properties: {
+    title: {
+      type: "string",
+      description: "a very short summary suitable for a toast title"
+    }
+  }
+};
+class Toast extends import_meshagent.Tool {
+  constructor({ name, description, title } = {}) {
+    super({
+      name: name ?? "show_toast",
+      description: description ?? "let the user know something important (will be shown as a toast)",
+      title: title ?? "show user a toast",
+      inputSchema: toastSchema
+    });
+  }
+  async execute(arguments_) {
+    (0, import_sonner.toast)(arguments_.title, {
+      description: arguments_.description ?? ""
+    });
+    return new import_meshagent.EmptyResponse();
+  }
+}

package/dist/cjs/tools/ui-toolkit.d.ts

@@ -0,0 +1,6 @@
+import { RoomClient, RemoteToolkit } from '@meshagent/meshagent';
+export declare class UIToolkit extends RemoteToolkit {
+    constructor({ room }: {
+        room: RoomClient;
+    });
+}

package/dist/cjs/tools/ui-toolkit.js

@@ -0,0 +1,44 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ui_toolkit_exports = {};
+__export(ui_toolkit_exports, {
+  UIToolkit: () => UIToolkit
+});
+module.exports = __toCommonJS(ui_toolkit_exports);
+var import_meshagent = require("@meshagent/meshagent");
+var import_ask_user = require("./ask-user");
+var import_ask_user_for_file = require("./ask-user-for-file");
+var import_display_document = require("./display-document");
+var import_toast = require("./toast");
+class UIToolkit extends import_meshagent.RemoteToolkit {
+  constructor({ room }) {
+    super({
+      name: "ui",
+      title: "UI Tools",
+      description: "User interface tools",
+      room,
+      tools: [
+        new import_ask_user.AskUser(),
+        new import_ask_user_for_file.AskUserForFile(),
+        new import_toast.Toast(),
+        new import_display_document.DisplayDocument()
+      ]
+    });
+  }
+}

package/dist/esm/Chat.js

@@ -1,8 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useChat } from "@meshagent/meshagent-react";
+import { useMemo, useCallback } from "react";
+import { useChat, useClientToolkits, useRoomIndicators } from "@meshagent/meshagent-react";
 import { ChatThread } from "./ChatThread";
 import { ChatInput } from "./ChatInput";
 import { ChatTypingIndicator } from "./ChatTypingIndicator";
+import { UIToolkit } from "./tools/ui-toolkit";
+import { Toaster } from "./components/ui/sonner";
 function Chat({ room, path, participants }) {
   const {
     messages,
@@ -10,11 +13,27 @@ function Chat({ room, path, participants }) {
     selectAttachments,
     attachments,
     setAttachments,
-    schemaFileExists
+    schemaFileExists,
+    cancelRequest
   } = useChat({ room, path, participants });
-  const localParticipantName = room.localParticipant.getAttribute("name");
+  const { thinking } = useRoomIndicators({ room, path });
+  const toolkits = useMemo(() => [
+    new UIToolkit({ room })
+  ], [room]);
+  useClientToolkits({ toolkits, public: true });
+  const onTextChange = useCallback((_) => {
+    const removeParticipant = room.messaging.remoteParticipants;
+    for (const part of removeParticipant) {
+      room.messaging.sendMessage({
+        to: part,
+        type: "typing",
+        message: { path }
+      });
+    }
+  }, [room, path]);
+  const localParticipantName = room.localParticipant?.getAttribute("name");
   if (schemaFileExists === false) {
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1 min-h-0 gap-2 p-4", children: /* @__PURE__ */ jsx("p", { className: "text-red-500", children: 'No AI agent found in this room. Run `meshagent chatbot join --room [room-name] --agent-name "Chat Agent" --name "Chat Friend" and try again.' }) });
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1 min-h-0 gap-2 p-4", children: /* @__PURE__ */ jsx("p", { className: "text-red-500", children: 'No AI agent found in this room. Run `meshagent chatbot join --room [room-name] --agent-name "Chat Agent" --name "Chat Friend"` and try again.' }) });
   }
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-h-0 gap-2 p-0", children: [
     /* @__PURE__ */ jsx(
@@ -32,9 +51,13 @@ function Chat({ room, path, participants }) {
         onSubmit: sendMessage,
         attachments,
         onFilesSelected: selectAttachments,
-        setAttachments
+        setAttachments,
+        onTextChange,
+        onCancelRequest: cancelRequest,
+        showCancelButton: thinking
       }
-    )
+    ),
+    /* @__PURE__ */ jsx(Toaster, {})
   ] });
 }
 export {

package/dist/esm/ChatInput.d.ts

@@ -4,6 +4,9 @@ interface ChatInputProps {
     onFilesSelected: (files: File[]) => void;
     attachments: FileUpload[];
     setAttachments: (attachments: FileUpload[]) => void;
+    onTextChange?: (text: string) => void;
+    onCancelRequest?: () => void;
+    showCancelButton?: boolean;
 }
-export declare function ChatInput({ onSubmit, onFilesSelected, attachments, setAttachments }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatInput({ onSubmit, onFilesSelected, attachments, setAttachments, onTextChange, onCancelRequest, showCancelButton }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/ChatInput.js

@@ -6,7 +6,15 @@ import { Button } from "./components/ui/button";
 import { Textarea } from "./components/ui/textarea";
 import { FileUploader } from "./FileUploader";
 import { UploadPill } from "./UploadPill";
-function ChatInput({ onSubmit, onFilesSelected, attachments, setAttachments }) {
+function ChatInput({
+  onSubmit,
+  onFilesSelected,
+  attachments,
+  setAttachments,
+  onTextChange,
+  onCancelRequest,
+  showCancelButton
+}) {
   const [value, setValue] = React.useState("");
   const handleSend = useCallback(() => {
     const trimmed2 = value.trim();
@@ -30,6 +38,10 @@ function ChatInput({ onSubmit, onFilesSelected, attachments, setAttachments }) {
   const cancelAttachment = useCallback((attachment) => {
     setAttachments(attachments.filter((f) => f.path !== attachment.path));
   }, [attachments, setAttachments]);
+  const _onChange = useCallback((e) => {
+    setValue(e.currentTarget.value);
+    onTextChange?.(e.currentTarget.value);
+  }, [onTextChange]);
   const trimmed = value.trim();
   const disabled = !trimmed && attachments.length === 0;
   return /* @__PURE__ */ jsxs("div", { className: "border-t py-3 gap-3 flex flex-col", children: [
@@ -49,11 +61,11 @@ function ChatInput({ onSubmit, onFilesSelected, attachments, setAttachments }) {
           placeholder: "Type a message and press Enter",
           className: "flex-1 resize-none h-20",
           value,
-          onChange: (e) => setValue(e.currentTarget.value),
+          onChange: _onChange,
           onKeyDown
         }
       ),
-      /* @__PURE__ */ jsx(Button, { onClick: handleSend, disabled, children: "Send" })
+      showCancelButton === true ? /* @__PURE__ */ jsx(Button, { onClick: onCancelRequest, children: "Cancel" }) : /* @__PURE__ */ jsx(Button, { onClick: handleSend, disabled, children: "Send" })
     ] })
   ] });
 }

package/dist/esm/ChatThread.js

@@ -25,6 +25,7 @@ function timeAgo(iso) {
   const rtf = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
   const date = new Date(iso);
   const now = /* @__PURE__ */ new Date();
+  if (isNaN(date.getTime())) return "";
   const seconds = Math.round((date.getTime() - now.getTime()) / 1e3);
   const minutes = Math.round(seconds / 60);
   const hours = Math.round(minutes / 60);

package/dist/esm/ChatTypingIndicator.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRoomIndicators } from "@meshagent/meshagent-react";
 function ChatTypingIndicator({ room, path }) {
-  const { typing } = useRoomIndicators({ room, path });
-  return typing ? /* @__PURE__ */ jsxs("div", { className: "flex items-end space-x-1 h-6 p-6", children: [
+  const { typing, thinking } = useRoomIndicators({ room, path });
+  return typing || thinking ? /* @__PURE__ */ jsxs("div", { className: "flex items-end space-x-1 h-6 p-6", children: [
     [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
       "span",
       {

package/dist/esm/components/pane-example.d.ts

@@ -0,0 +1 @@
+export default function PaneExample(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/pane-example.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetFooter
+} from "@/components/ui/sheet";
+import { registerPane, closePane } from "@/lib/pane-service";
+function PaneExample() {
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    registerPane(setOpen);
+  }, []);
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "w-full sm:w-[700px] sm:max-w-1/2", children: [
+    /* @__PURE__ */ jsxs(SheetHeader, { children: [
+      /* @__PURE__ */ jsx(SheetTitle, { children: "My Side Pane" }),
+      /* @__PURE__ */ jsx(SheetDescription, { children: "Here's a panel you can open/close programmatically." })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "p-4 space-y-4 flex-1 overflow-auto p-4 space-y-4", children: /* @__PURE__ */ jsx("p", { children: "This is the pane content area. Add any React nodes here." }) }),
+    /* @__PURE__ */ jsx(SheetFooter, { children: /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: closePane, children: "Close Pane" }) })
+  ] }) });
+}
+export {
+  PaneExample as default
+};

package/dist/esm/components/ui/dialog.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/esm/components/ui/dialog.js

@@ -0,0 +1,136 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+};

package/dist/esm/components/ui/form.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import { type ControllerProps, type FieldPath, type FieldValues } from "react-hook-form";
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("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>) => import("react/jsx-runtime").JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare function FormItem({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function FormControl({ ...props }: React.ComponentProps<typeof Slot>): import("react/jsx-runtime").JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function FormMessage({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element | null;
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };

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

@@ -0,0 +1,121 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState
+} from "react-hook-form";
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+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 useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  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
+  };
+};
+const FormItemContext = React.createContext(
+  {}
+);
+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
+};

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

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
+export { Input };