@nswds/app 1.25.1 → 1.26.0

package/dist/index.cjs

@@ -38,6 +38,7 @@ var DialogPrimitive = require('@radix-ui/react-dialog');
 var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
 var vaul = require('vaul');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
+var reactHookForm = require('react-hook-form');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 var TogglePrimitive = require('@radix-ui/react-toggle');
 var MenubarPrimitive = require('@radix-ui/react-menubar');
@@ -7164,6 +7165,92 @@ function Footer({
     /* @__PURE__ */ jsxRuntime.jsx(FooterSmallPrint, { department, socialLinks })
   ] });
 }
+var Form = reactHookForm.FormProvider;
+var FormFieldContext = React6__namespace.createContext({});
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
+};
+var useFormField = () => {
+  const fieldContext = React6__namespace.useContext(FormFieldContext);
+  const itemContext = React6__namespace.useContext(FormItemContext);
+  const { getFieldState } = reactHookForm.useFormContext();
+  const formState = 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
+  };
+};
+var FormItemContext = React6__namespace.createContext({});
+function FormItem({ className, ...props }) {
+  const id = React6__namespace.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
+}
+function FormLabel({ className, ...props }) {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Label3,
+    {
+      "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__ */ jsxRuntime.jsx(
+    reactSlot.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "p",
+    {
+      "data-slot": "form-message",
+      id: formMessageId,
+      className: cn("text-destructive text-sm", className),
+      ...props,
+      children: body
+    }
+  );
+}
 var styles3 = {
   base: [
     // Base
@@ -7365,7 +7452,7 @@ function Heading({
 
 // package.json
 var package_default = {
-  version: "1.24.0"};
+  version: "1.25.0"};
 function Logo(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -9234,6 +9321,13 @@ exports.FooterAcknowledgement = FooterAcknowledgement;
 exports.FooterLegalLinks = FooterLegalLinks;
 exports.FooterSmallPrint = FooterSmallPrint;
 exports.FooterSocialLink = FooterSocialLink;
+exports.Form = Form;
+exports.FormControl = FormControl;
+exports.FormDescription = FormDescription;
+exports.FormField = FormField;
+exports.FormItem = FormItem;
+exports.FormLabel = FormLabel;
+exports.FormMessage = FormMessage;
 exports.FormatToggle = FormatToggle;
 exports.GenerateInterpolatedColors = GenerateInterpolatedColors;
 exports.Header = Header2;
@@ -9388,6 +9482,7 @@ exports.themeIndices = themeIndices;
 exports.themeTokens = themeTokens;
 exports.toggleVariants = toggleVariants;
 exports.truncate = truncate;
+exports.useFormField = useFormField;
 exports.useToc = useToc;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map