@arch-cadre/ui 0.0.10 → 0.0.15

package/dist/components/empty.mjs

@@ -0,0 +1,102 @@
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../lib/utils.mjs";
+function Empty({ className, ...props }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-slot": "empty",
+      className: cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function EmptyHeader({ className, ...props }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-slot": "empty-header",
+      className: cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const emptyMediaVariants = cva(
+  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-slot": "empty-icon",
+      "data-variant": variant,
+      className: cn(emptyMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function EmptyTitle({ className, ...props }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-slot": "empty-title",
+      className: cn("text-lg font-medium tracking-tight", className),
+      ...props
+    }
+  );
+}
+function EmptyDescription({ className, ...props }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-slot": "empty-description",
+      className: cn(
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function EmptyContent({ className, ...props }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-slot": "empty-content",
+      className: cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia
+};

package/dist/components/field.cjs

@@ -0,0 +1,173 @@
+"use strict";
+"use client";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Field = Field;
+exports.FieldContent = FieldContent;
+exports.FieldDescription = FieldDescription;
+exports.FieldError = FieldError;
+exports.FieldGroup = FieldGroup;
+exports.FieldLabel = FieldLabel;
+exports.FieldLegend = FieldLegend;
+exports.FieldSeparator = FieldSeparator;
+exports.FieldSet = FieldSet;
+exports.FieldTitle = FieldTitle;
+var _classVarianceAuthority = require("class-variance-authority");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _utils = require("../lib/utils.cjs");
+var _label = require("./label.cjs");
+var _separator = require("./separator.cjs");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function FieldSet({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */React.createElement("fieldset", {
+    "data-slot": "field-set",
+    className: (0, _utils.cn)("flex flex-col gap-6", "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className),
+    ...props
+  });
+}
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}) {
+  return /* @__PURE__ */React.createElement("legend", {
+    "data-slot": "field-legend",
+    "data-variant": variant,
+    className: (0, _utils.cn)("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className),
+    ...props
+  });
+}
+function FieldGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */React.createElement("div", {
+    "data-slot": "field-group",
+    className: (0, _utils.cn)("group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4", className),
+    ...props
+  });
+}
+const fieldVariants = (0, _classVarianceAuthority.cva)("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
+  variants: {
+    orientation: {
+      vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+      horizontal: ["flex-row items-center", "[&>[data-slot=field-label]]:flex-auto", "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"],
+      responsive: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto", "@md/field-group:[&>[data-slot=field-label]]:flex-auto", "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"]
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */React.createElement("div", {
+    role: "group",
+    "data-slot": "field",
+    "data-orientation": orientation,
+    className: (0, _utils.cn)(fieldVariants({
+      orientation
+    }), className),
+    ...props
+  });
+}
+function FieldContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */React.createElement("div", {
+    "data-slot": "field-content",
+    className: (0, _utils.cn)("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className),
+    ...props
+  });
+}
+function FieldLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */React.createElement(_label.Label, {
+    "data-slot": "field-label",
+    className: (0, _utils.cn)("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4", "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10", className),
+    ...props
+  });
+}
+function FieldTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */React.createElement("div", {
+    "data-slot": "field-label",
+    className: (0, _utils.cn)("flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50", className),
+    ...props
+  });
+}
+function FieldDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */React.createElement("p", {
+    "data-slot": "field-description",
+    className: (0, _utils.cn)("text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance", "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className),
+    ...props
+  });
+}
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */React.createElement("div", {
+    "data-slot": "field-separator",
+    "data-content": !!children,
+    className: (0, _utils.cn)("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
+    ...props
+  }, /* @__PURE__ */React.createElement(_separator.Separator, {
+    className: "absolute inset-0 top-1/2"
+  }), children && /* @__PURE__ */React.createElement("span", {
+    className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
+    "data-slot": "field-separator-content"
+  }, children));
+}
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = (0, _react.useMemo)(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors?.length) {
+      return null;
+    }
+    const uniqueErrors = [...new Map(errors.map(error => [error?.message, error])).values()];
+    if (uniqueErrors?.length === 1) {
+      return uniqueErrors[0]?.message;
+    }
+    return /* @__PURE__ */React.createElement("ul", {
+      className: "ml-4 flex list-disc flex-col gap-1"
+    }, uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */React.createElement("li", {
+      key: index
+    }, error.message)));
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */React.createElement("div", {
+    role: "alert",
+    "data-slot": "field-error",
+    className: (0, _utils.cn)("text-destructive text-sm font-normal", className),
+    ...props
+  }, content);
+}

package/dist/components/field.d.ts

@@ -0,0 +1,25 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Label } from "./label";
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): React.JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
+    variant?: "legend" | "label";
+}): React.JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): React.JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): React.JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}): React.JSX.Element | null;
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };

package/dist/components/field.mjs

@@ -0,0 +1,228 @@
+"use client";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { useMemo } from "react";
+import { cn } from "../lib/utils.mjs";
+import { Label } from "./label.mjs";
+import { Separator } from "./separator.mjs";
+function FieldSet({ className, ...props }) {
+  return /* @__PURE__ */ React.createElement(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      className: cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "legend",
+    {
+      "data-slot": "field-legend",
+      "data-variant": variant,
+      className: cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ],
+        responsive: [
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ]
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  }
+);
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: cn(fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-slot": "field-content",
+      className: cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    Label,
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldTitle({ className, ...props }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldDescription({ className, ...props }) {
+  return /* @__PURE__ */ React.createElement(
+    "p",
+    {
+      "data-slot": "field-description",
+      className: cn(
+        "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-slot": "field-separator",
+      "data-content": !!children,
+      className: cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(Separator, { className: "absolute inset-0 top-1/2" }),
+    children && /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
+        "data-slot": "field-separator-content"
+      },
+      children
+    )
+  );
+}
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors?.length) {
+      return null;
+    }
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values()
+    ];
+    if (uniqueErrors?.length === 1) {
+      return uniqueErrors[0]?.message;
+    }
+    return /* @__PURE__ */ React.createElement("ul", { className: "ml-4 flex list-disc flex-col gap-1" }, uniqueErrors.map(
+      (error, index) => error?.message && /* @__PURE__ */ React.createElement("li", { key: index }, error.message)
+    ));
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "alert",
+      "data-slot": "field-error",
+      className: cn("text-destructive text-sm font-normal", className),
+      ...props
+    },
+    content
+  );
+}
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle
+};

package/dist/components/form.cjs

@@ -0,0 +1,143 @@
+"use strict";
+"use client";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Form = void 0;
+exports.FormControl = FormControl;
+exports.FormDescription = FormDescription;
+exports.FormField = void 0;
+exports.FormItem = FormItem;
+exports.FormLabel = FormLabel;
+exports.FormMessage = FormMessage;
+exports.useFormField = void 0;
+var _radixUi = require("radix-ui");
+var React = _interopRequireWildcard(require("react"));
+var _reactHookForm = require("react-hook-form");
+var _utils = require("../lib/utils.cjs");
+var _label = require("./label.cjs");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Form = exports.Form = _reactHookForm.FormProvider;
+const FormFieldContext = React.createContext({});
+const FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */React.createElement(FormFieldContext.Provider, {
+    value: {
+      name: props.name
+    }
+  }, /* @__PURE__ */React.createElement(_reactHookForm.Controller, {
+    ...props
+  }));
+};
+exports.FormField = FormField;
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const {
+    getFieldState
+  } = (0, _reactHookForm.useFormContext)();
+  const formState = (0, _reactHookForm.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
+  };
+};
+exports.useFormField = useFormField;
+const FormItemContext = React.createContext({});
+function FormItem({
+  className,
+  ...props
+}) {
+  const id = React.useId();
+  return /* @__PURE__ */React.createElement(FormItemContext.Provider, {
+    value: {
+      id
+    }
+  }, /* @__PURE__ */React.createElement("div", {
+    "data-slot": "form-item",
+    className: (0, _utils.cn)("grid gap-2", className),
+    ...props
+  }));
+}
+function FormLabel({
+  className,
+  ...props
+}) {
+  const {
+    error,
+    formItemId
+  } = useFormField();
+  return /* @__PURE__ */React.createElement(_label.Label, {
+    "data-slot": "form-label",
+    "data-error": !!error,
+    className: (0, _utils.cn)("data-[error=true]:text-destructive", className),
+    htmlFor: formItemId,
+    ...props
+  });
+}
+function FormControl({
+  ...props
+}) {
+  const {
+    error,
+    formItemId,
+    formDescriptionId,
+    formMessageId
+  } = useFormField();
+  return /* @__PURE__ */React.createElement(_radixUi.Slot.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__ */React.createElement("p", {
+    "data-slot": "form-description",
+    id: formDescriptionId,
+    className: (0, _utils.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__ */React.createElement("p", {
+    "data-slot": "form-message",
+    id: formMessageId,
+    className: (0, _utils.cn)("text-destructive text-sm", className),
+    ...props
+  }, body);
+}

package/dist/components/form.d.ts

@@ -0,0 +1,23 @@
+import { type Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui";
+import * as React from "react";
+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>) => React.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">): React.JSX.Element;
+declare function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): React.JSX.Element;
+declare function FormControl({ ...props }: React.ComponentProps<typeof SlotPrimitive.Slot>): React.JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function FormMessage({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element | null;
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };