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(
  {}
), $ = ({
  ...e
}) => /* @__PURE__ */ n(c.Provider, { value: { name: e.name }, children: /* @__PURE__ */ n(F, { ...e }) }), d = () => {
  const e = s.useContext(c), t = s.useContext(l), { getFieldState: r } = x(), o = I({ name: e.name }), m = r(e.name, o);
  if (!e)
    throw new Error("useFormField should be used within <FormField>");
  const { id: i } = t;
  return {
    id: i,
    name: e.name,
    formItemId: `${i}-form-item`,
    formDescriptionId: `${i}-form-item-description`,
    formMessageId: `${i}-form-item-message`,
    ...m
  };
}, l = s.createContext(
  {}
);
function D({ className: e, ...t }) {
  const r = s.useId();
  return /* @__PURE__ */ n(l.Provider, { value: { id: r }, children: /* @__PURE__ */ n(
    "div",
    {
      "data-slot": "form-item",
      className: a("grid gap-2", e),
      ...t
    }
  ) });
}
function M({
  className: e,
  ...t
}) {
  const { error: r, formItemId: o } = d();
  return /* @__PURE__ */ n(
    g,
    {
      "data-slot": "form-label",
      "data-error": !!r,
      className: a("data-[error=true]:text-d-destructive", e),
      htmlFor: o,
      ...t
    }
  );
}
function N({ ...e }) {
  const { error: t, formItemId: r, formDescriptionId: o, formMessageId: m } = d();
  return /* @__PURE__ */ n(
    f,
    {
      "data-slot": "form-control",
      id: r,
      "aria-describedby": t ? `${o} ${m}` : `${o}`,
      "aria-invalid": !!t,
      ...e
    }
  );
}
function w({ className: e, ...t }) {
  const { formDescriptionId: r } = d();
  return /* @__PURE__ */ n(
    "p",
    {
      "data-slot": "form-description",
      id: r,
      className: a("text-d-secondary-foreground text-sm", e),
      ...t
    }
  );
}
function y({ className: e, ...t }) {
  const { error: r, formMessageId: o } = d(), m = r ? String(r?.message ?? "") : t.children;
  return m ? /* @__PURE__ */ n(
    "p",
    {
      "data-slot": "form-message",
      id: o,
      className: a("text-d-destructive text-sm", e),
      ...t,
      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
};