laif-ds/dist/components/ui/form.js

Design System di Laif con componenti React basati su principi di Atomic Design

"use client";
import { jsx as n } from "react/jsx-runtime";
import * as s from "react";
import { Root as f } from "../../node_modules/@radix-ui/react-slot/dist/index.js";
import { FormProvider as u, Controller as F, useFormContext as x, useFormState as I } from "../../node_modules/react-hook-form/dist/index.esm.js";
import { cn as a } from "../../lib/utils.js";
import { Label as g } from "./label.js";
const S = u, c = s.createContext(
  {}
), $ = ({
  ...t
}) => /* @__PURE__ */ n(c.Provider, { value: { name: t.name }, children: /* @__PURE__ */ n(F, { ...t }) }), d = () => {
  const t = s.useContext(c), o = s.useContext(l), { getFieldState: e } = x(), r = I({ name: t.name }), m = e(t.name, r);
  if (!t)
    throw new Error("useFormField should be used within <FormField>");
  const { id: i } = o;
  return {
    id: i,
    name: t.name,
    formItemId: `${i}-form-item`,
    formDescriptionId: `${i}-form-item-description`,
    formMessageId: `${i}-form-item-message`,
    ...m
  };
}, l = s.createContext(
  {}
);
function D({ className: t, ...o }) {
  const e = s.useId();
  return /* @__PURE__ */ n(l.Provider, { value: { id: e }, children: /* @__PURE__ */ n(
    "div",
    {
      "data-slot": "form-item",
      className: a("grid gap-2", t),
      ...o
    }
  ) });
}
function M({
  className: t,
  ...o
}) {
  const { error: e, formItemId: r } = d();
  return /* @__PURE__ */ n(
    g,
    {
      "data-slot": "form-label",
      "data-error": !!e,
      className: a("data-[error=true]:text-d-destructive", t),
      htmlFor: r,
      ...o
    }
  );
}
function N({ ...t }) {
  const { error: o, formItemId: e, formDescriptionId: r, formMessageId: m } = d();
  return /* @__PURE__ */ n(
    f,
    {
      "data-slot": "form-control",
      id: e,
      "aria-describedby": o ? `${r} ${m}` : `${r}`,
      "aria-invalid": !!o,
      ...t
    }
  );
}
function w({ className: t, ...o }) {
  const { formDescriptionId: e } = d();
  return /* @__PURE__ */ n(
    "p",
    {
      "data-slot": "form-description",
      id: e,
      className: a("text-d-secondary-foreground text-sm", t),
      ...o
    }
  );
}
function y({ className: t, ...o }) {
  const { error: e, formMessageId: r } = d(), m = e ? String((e == null ? void 0 : e.message) ?? "") : o.children;
  return m ? /* @__PURE__ */ n(
    "p",
    {
      "data-slot": "form-message",
      id: r,
      className: a("text-d-destructive text-sm", t),
      ...o,
      children: m
    }
  ) : null;
}
export {
  S as Form,
  N as FormControl,
  w as FormDescription,
  $ as FormField,
  D as FormItem,
  M as FormLabel,
  y as FormMessage,
  d as useFormField
};