@carbonbits/sixr 1.3.0 → 1.5.0

package/dist/field.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/field/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Label } from \"@radix-ui/react-label\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n  type ComponentPropsWithoutRef,\n  createContext,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useId,\n  useState,\n} from \"react\";\nimport {\n  type FieldValues,\n  type UseFormReturn,\n  useController,\n  useFormContext,\n} from \"react-hook-form\";\n\n/**\n * The structure behind every form field, with no styling of its own: an id\n * shared by label and control, the error and description ids the control is\n * described by, the field's validity, and — inside a `Form` — the\n * react-hook-form bindings (`value`, `onChange`, `onBlur`, `ref`) that keep\n * the control registered.\n *\n * Styled components compose these primitives with their own classes\n * (`TextInput` and friends do), and a screen that needs a control the\n * library does not ship — a select, a code entry, a toggle — composes them\n * the same way. Everything here is a plain element or a Radix `Slot`, so the\n * styling decisions stay with whoever renders the field.\n *\n * Outside a `Form` the primitives still wire label, control and messages\n * together; the control just isn't registered anywhere and the error comes\n * from the `error` prop alone.\n */\n\nexport type FieldBindings = {\n  name: string;\n  value?: unknown;\n  onChange?: (event: unknown) => void;\n  onBlur?: () => void;\n  ref?: (instance: HTMLElement | null) => void;\n};\n\nexport type FieldContextValue = {\n  id: string;\n  name: string;\n  descriptionId: string;\n  messageId: string;\n  error: string | undefined;\n  invalid: boolean;\n  required: boolean;\n  disabled: boolean;\n  hasDescription: boolean;\n  setHasDescription: (present: boolean) => void;\n  bindings: FieldBindings;\n};\n\nconst FieldContext = createContext<FieldContextValue | null>(null);\n\n// biome-ignore lint/style/useComponentExportOnlyModules: the hook is the primitives' public API for custom compositions and belongs on the same subpath.\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext);\n\n  if (!context) {\n    throw new Error(\"Field primitives must be rendered inside FieldRoot\");\n  }\n\n  return context;\n}\n\nexport type FieldRootProps = ComponentPropsWithoutRef<\"div\"> & {\n  /** The form field this wires up — the key in the `Form`'s values. */\n  name: string;\n  /** A caller-supplied error. Outranks whatever the form's schema reports. */\n  error?: string;\n  required?: boolean;\n  disabled?: boolean;\n  /** Render the child element as the root instead of a `div`. */\n  asChild?: boolean;\n  children: ReactNode;\n};\n\ntype FieldShellProps = Omit<\n  FieldRootProps,\n  \"name\" | \"error\" | \"required\" | \"disabled\"\n> & {\n  value: Omit<FieldContextValue, \"hasDescription\" | \"setHasDescription\">;\n};\n\nfunction useFieldIds(id: string | undefined) {\n  const generated = useId();\n  const base = id ?? generated;\n\n  return {\n    id: base,\n    descriptionId: `${base}-description`,\n    messageId: `${base}-message`,\n  };\n}\n\nfunction FieldShell({\n  value,\n  asChild = false,\n  children,\n  ...rest\n}: FieldShellProps) {\n  const [hasDescription, setHasDescription] = useState(false);\n  const Component = asChild ? Slot : \"div\";\n\n  return (\n    <FieldContext.Provider\n      value={{ ...value, hasDescription, setHasDescription }}\n    >\n      <Component\n        {...rest}\n        data-invalid={value.invalid ? \"\" : undefined}\n        data-disabled={value.disabled ? \"\" : undefined}\n      >\n        {children}\n      </Component>\n    </FieldContext.Provider>\n  );\n}\n\nfunction ConnectedFieldRoot({\n  name,\n  error,\n  required = false,\n  disabled = false,\n  id,\n  ...rest\n}: FieldRootProps) {\n  const ids = useFieldIds(id);\n  const { field, fieldState } = useController({ name, disabled });\n  const shownError = error ?? fieldState.error?.message;\n\n  return (\n    <FieldShell\n      {...rest}\n      value={{\n        ...ids,\n        name,\n        error: shownError,\n        invalid: Boolean(shownError),\n        required,\n        disabled: Boolean(field.disabled ?? disabled),\n        bindings: {\n          name: field.name,\n          value: field.value ?? \"\",\n          onChange: field.onChange,\n          onBlur: field.onBlur,\n          ref: field.ref,\n        },\n      }}\n    />\n  );\n}\n\nfunction StandaloneFieldRoot({\n  name,\n  error,\n  required = false,\n  disabled = false,\n  id,\n  ...rest\n}: FieldRootProps) {\n  const ids = useFieldIds(id);\n\n  return (\n    <FieldShell\n      {...rest}\n      value={{\n        ...ids,\n        name,\n        error,\n        invalid: Boolean(error),\n        required,\n        disabled,\n        bindings: { name },\n      }}\n    />\n  );\n}\n\nexport function FieldRoot(props: FieldRootProps) {\n  const form = useFormContext() as UseFormReturn<FieldValues> | null;\n\n  return form ? (\n    <ConnectedFieldRoot {...props} />\n  ) : (\n    <StandaloneFieldRoot {...props} />\n  );\n}\n\nexport type FieldLabelProps = ComponentPropsWithoutRef<typeof Label>;\n\nexport function FieldLabel(props: FieldLabelProps) {\n  const { id } = useFieldContext();\n\n  return <Label {...props} htmlFor={id} />;\n}\n\nexport type FieldControlProps = ComponentPropsWithoutRef<typeof Slot>;\n\nfunction describedBy({\n  error,\n  messageId,\n  hasDescription,\n  descriptionId,\n}: Pick<\n  FieldContextValue,\n  \"error\" | \"messageId\" | \"hasDescription\" | \"descriptionId\"\n>): string | undefined {\n  if (error) {\n    return messageId;\n  }\n\n  return hasDescription ? descriptionId : undefined;\n}\n\n/**\n * Wires the field's id, name, validity and bindings onto whatever element it\n * wraps — an `<input>`, a `<select>`, a `<textarea>`, a custom control.\n * Handlers on the child still run; the bindings run after them.\n */\nexport function FieldControl(props: FieldControlProps) {\n  const context = useFieldContext();\n  const { id, invalid, required, disabled, bindings } = context;\n\n  // `disabled` is not on Slot's HTMLAttributes type, but it is what the\n  // wrapped control needs, so the bindings are spread untyped on purpose.\n  const controlProps: Record<string, unknown> = {\n    ...bindings,\n    id,\n    \"aria-invalid\": invalid || undefined,\n    \"aria-required\": required || undefined,\n    \"aria-describedby\": describedBy(context),\n    disabled: disabled || undefined,\n  };\n\n  return <Slot {...props} {...controlProps} />;\n}\n\nexport type FieldDescriptionProps = ComponentPropsWithoutRef<\"p\"> & {\n  asChild?: boolean;\n};\n\n/** Guidance under the control. Hidden while the field has an error. */\nexport function FieldDescription({\n  asChild = false,\n  ...props\n}: FieldDescriptionProps) {\n  const { descriptionId, error, setHasDescription } = useFieldContext();\n\n  useEffect(() => {\n    setHasDescription(true);\n\n    return () => setHasDescription(false);\n  }, [setHasDescription]);\n\n  if (error) {\n    return null;\n  }\n\n  const Component = asChild ? Slot : \"p\";\n\n  return <Component {...props} id={descriptionId} />;\n}\n\nexport type FieldMessageProps = ComponentPropsWithoutRef<\"p\"> & {\n  asChild?: boolean;\n};\n\n/**\n * The field's error, announced as an alert. Renders the error the field\n * currently holds; `children` is a fallback for a message the caller wants to\n * show in its place. Nothing renders while the field is valid.\n */\nexport function FieldMessage({\n  asChild = false,\n  children,\n  ...props\n}: FieldMessageProps) {\n  const { messageId, error } = useFieldContext();\n  const content = error ?? children;\n\n  if (!content) {\n    return null;\n  }\n\n  const Component = asChild ? Slot : \"p\";\n\n  return (\n    <Component {...props} id={messageId} role=\"alert\">\n      {content}\n    </Component>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/field.d.cts

@@ -0,0 +1,80 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Label } from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+
+/**
+ * The structure behind every form field, with no styling of its own: an id
+ * shared by label and control, the error and description ids the control is
+ * described by, the field's validity, and — inside a `Form` — the
+ * react-hook-form bindings (`value`, `onChange`, `onBlur`, `ref`) that keep
+ * the control registered.
+ *
+ * Styled components compose these primitives with their own classes
+ * (`TextInput` and friends do), and a screen that needs a control the
+ * library does not ship — a select, a code entry, a toggle — composes them
+ * the same way. Everything here is a plain element or a Radix `Slot`, so the
+ * styling decisions stay with whoever renders the field.
+ *
+ * Outside a `Form` the primitives still wire label, control and messages
+ * together; the control just isn't registered anywhere and the error comes
+ * from the `error` prop alone.
+ */
+type FieldBindings = {
+    name: string;
+    value?: unknown;
+    onChange?: (event: unknown) => void;
+    onBlur?: () => void;
+    ref?: (instance: HTMLElement | null) => void;
+};
+type FieldContextValue = {
+    id: string;
+    name: string;
+    descriptionId: string;
+    messageId: string;
+    error: string | undefined;
+    invalid: boolean;
+    required: boolean;
+    disabled: boolean;
+    hasDescription: boolean;
+    setHasDescription: (present: boolean) => void;
+    bindings: FieldBindings;
+};
+declare function useFieldContext(): FieldContextValue;
+type FieldRootProps = ComponentPropsWithoutRef<"div"> & {
+    /** The form field this wires up — the key in the `Form`'s values. */
+    name: string;
+    /** A caller-supplied error. Outranks whatever the form's schema reports. */
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    /** Render the child element as the root instead of a `div`. */
+    asChild?: boolean;
+    children: ReactNode;
+};
+declare function FieldRoot(props: FieldRootProps): react.JSX.Element;
+type FieldLabelProps = ComponentPropsWithoutRef<typeof Label>;
+declare function FieldLabel(props: FieldLabelProps): react.JSX.Element;
+type FieldControlProps = ComponentPropsWithoutRef<typeof Slot>;
+/**
+ * Wires the field's id, name, validity and bindings onto whatever element it
+ * wraps — an `<input>`, a `<select>`, a `<textarea>`, a custom control.
+ * Handlers on the child still run; the bindings run after them.
+ */
+declare function FieldControl(props: FieldControlProps): react.JSX.Element;
+type FieldDescriptionProps = ComponentPropsWithoutRef<"p"> & {
+    asChild?: boolean;
+};
+/** Guidance under the control. Hidden while the field has an error. */
+declare function FieldDescription({ asChild, ...props }: FieldDescriptionProps): react.JSX.Element | null;
+type FieldMessageProps = ComponentPropsWithoutRef<"p"> & {
+    asChild?: boolean;
+};
+/**
+ * The field's error, announced as an alert. Renders the error the field
+ * currently holds; `children` is a fallback for a message the caller wants to
+ * show in its place. Nothing renders while the field is valid.
+ */
+declare function FieldMessage({ asChild, children, ...props }: FieldMessageProps): react.JSX.Element | null;
+
+export { type FieldBindings, type FieldContextValue, FieldControl, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldLabel, type FieldLabelProps, FieldMessage, type FieldMessageProps, FieldRoot, type FieldRootProps, useFieldContext };

package/dist/field.d.ts

@@ -0,0 +1,80 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Label } from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+
+/**
+ * The structure behind every form field, with no styling of its own: an id
+ * shared by label and control, the error and description ids the control is
+ * described by, the field's validity, and — inside a `Form` — the
+ * react-hook-form bindings (`value`, `onChange`, `onBlur`, `ref`) that keep
+ * the control registered.
+ *
+ * Styled components compose these primitives with their own classes
+ * (`TextInput` and friends do), and a screen that needs a control the
+ * library does not ship — a select, a code entry, a toggle — composes them
+ * the same way. Everything here is a plain element or a Radix `Slot`, so the
+ * styling decisions stay with whoever renders the field.
+ *
+ * Outside a `Form` the primitives still wire label, control and messages
+ * together; the control just isn't registered anywhere and the error comes
+ * from the `error` prop alone.
+ */
+type FieldBindings = {
+    name: string;
+    value?: unknown;
+    onChange?: (event: unknown) => void;
+    onBlur?: () => void;
+    ref?: (instance: HTMLElement | null) => void;
+};
+type FieldContextValue = {
+    id: string;
+    name: string;
+    descriptionId: string;
+    messageId: string;
+    error: string | undefined;
+    invalid: boolean;
+    required: boolean;
+    disabled: boolean;
+    hasDescription: boolean;
+    setHasDescription: (present: boolean) => void;
+    bindings: FieldBindings;
+};
+declare function useFieldContext(): FieldContextValue;
+type FieldRootProps = ComponentPropsWithoutRef<"div"> & {
+    /** The form field this wires up — the key in the `Form`'s values. */
+    name: string;
+    /** A caller-supplied error. Outranks whatever the form's schema reports. */
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    /** Render the child element as the root instead of a `div`. */
+    asChild?: boolean;
+    children: ReactNode;
+};
+declare function FieldRoot(props: FieldRootProps): react.JSX.Element;
+type FieldLabelProps = ComponentPropsWithoutRef<typeof Label>;
+declare function FieldLabel(props: FieldLabelProps): react.JSX.Element;
+type FieldControlProps = ComponentPropsWithoutRef<typeof Slot>;
+/**
+ * Wires the field's id, name, validity and bindings onto whatever element it
+ * wraps — an `<input>`, a `<select>`, a `<textarea>`, a custom control.
+ * Handlers on the child still run; the bindings run after them.
+ */
+declare function FieldControl(props: FieldControlProps): react.JSX.Element;
+type FieldDescriptionProps = ComponentPropsWithoutRef<"p"> & {
+    asChild?: boolean;
+};
+/** Guidance under the control. Hidden while the field has an error. */
+declare function FieldDescription({ asChild, ...props }: FieldDescriptionProps): react.JSX.Element | null;
+type FieldMessageProps = ComponentPropsWithoutRef<"p"> & {
+    asChild?: boolean;
+};
+/**
+ * The field's error, announced as an alert. Renders the error the field
+ * currently holds; `children` is a fallback for a message the caller wants to
+ * show in its place. Nothing renders while the field is valid.
+ */
+declare function FieldMessage({ asChild, children, ...props }: FieldMessageProps): react.JSX.Element | null;
+
+export { type FieldBindings, type FieldContextValue, FieldControl, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldLabel, type FieldLabelProps, FieldMessage, type FieldMessageProps, FieldRoot, type FieldRootProps, useFieldContext };

package/dist/field.js

@@ -0,0 +1,186 @@
+"use client";
+"use client";
+
+// src/components/field/index.tsx
+import { Label } from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useState
+} from "react";
+import {
+  useController,
+  useFormContext
+} from "react-hook-form";
+import { jsx } from "react/jsx-runtime";
+var FieldContext = createContext(null);
+function useFieldContext() {
+  const context = useContext(FieldContext);
+  if (!context) {
+    throw new Error("Field primitives must be rendered inside FieldRoot");
+  }
+  return context;
+}
+function useFieldIds(id) {
+  const generated = useId();
+  const base = id ?? generated;
+  return {
+    id: base,
+    descriptionId: `${base}-description`,
+    messageId: `${base}-message`
+  };
+}
+function FieldShell({
+  value,
+  asChild = false,
+  children,
+  ...rest
+}) {
+  const [hasDescription, setHasDescription] = useState(false);
+  const Component = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    FieldContext.Provider,
+    {
+      value: { ...value, hasDescription, setHasDescription },
+      children: /* @__PURE__ */ jsx(
+        Component,
+        {
+          ...rest,
+          "data-invalid": value.invalid ? "" : void 0,
+          "data-disabled": value.disabled ? "" : void 0,
+          children
+        }
+      )
+    }
+  );
+}
+function ConnectedFieldRoot({
+  name,
+  error,
+  required = false,
+  disabled = false,
+  id,
+  ...rest
+}) {
+  const ids = useFieldIds(id);
+  const { field, fieldState } = useController({ name, disabled });
+  const shownError = error ?? fieldState.error?.message;
+  return /* @__PURE__ */ jsx(
+    FieldShell,
+    {
+      ...rest,
+      value: {
+        ...ids,
+        name,
+        error: shownError,
+        invalid: Boolean(shownError),
+        required,
+        disabled: Boolean(field.disabled ?? disabled),
+        bindings: {
+          name: field.name,
+          value: field.value ?? "",
+          onChange: field.onChange,
+          onBlur: field.onBlur,
+          ref: field.ref
+        }
+      }
+    }
+  );
+}
+function StandaloneFieldRoot({
+  name,
+  error,
+  required = false,
+  disabled = false,
+  id,
+  ...rest
+}) {
+  const ids = useFieldIds(id);
+  return /* @__PURE__ */ jsx(
+    FieldShell,
+    {
+      ...rest,
+      value: {
+        ...ids,
+        name,
+        error,
+        invalid: Boolean(error),
+        required,
+        disabled,
+        bindings: { name }
+      }
+    }
+  );
+}
+function FieldRoot(props) {
+  const form = useFormContext();
+  return form ? /* @__PURE__ */ jsx(ConnectedFieldRoot, { ...props }) : /* @__PURE__ */ jsx(StandaloneFieldRoot, { ...props });
+}
+function FieldLabel(props) {
+  const { id } = useFieldContext();
+  return /* @__PURE__ */ jsx(Label, { ...props, htmlFor: id });
+}
+function describedBy({
+  error,
+  messageId,
+  hasDescription,
+  descriptionId
+}) {
+  if (error) {
+    return messageId;
+  }
+  return hasDescription ? descriptionId : void 0;
+}
+function FieldControl(props) {
+  const context = useFieldContext();
+  const { id, invalid, required, disabled, bindings } = context;
+  const controlProps = {
+    ...bindings,
+    id,
+    "aria-invalid": invalid || void 0,
+    "aria-required": required || void 0,
+    "aria-describedby": describedBy(context),
+    disabled: disabled || void 0
+  };
+  return /* @__PURE__ */ jsx(Slot, { ...props, ...controlProps });
+}
+function FieldDescription({
+  asChild = false,
+  ...props
+}) {
+  const { descriptionId, error, setHasDescription } = useFieldContext();
+  useEffect(() => {
+    setHasDescription(true);
+    return () => setHasDescription(false);
+  }, [setHasDescription]);
+  if (error) {
+    return null;
+  }
+  const Component = asChild ? Slot : "p";
+  return /* @__PURE__ */ jsx(Component, { ...props, id: descriptionId });
+}
+function FieldMessage({
+  asChild = false,
+  children,
+  ...props
+}) {
+  const { messageId, error } = useFieldContext();
+  const content = error ?? children;
+  if (!content) {
+    return null;
+  }
+  const Component = asChild ? Slot : "p";
+  return /* @__PURE__ */ jsx(Component, { ...props, id: messageId, role: "alert", children: content });
+}
+export {
+  FieldControl,
+  FieldDescription,
+  FieldLabel,
+  FieldMessage,
+  FieldRoot,
+  useFieldContext
+};
+//# sourceMappingURL=field.js.map

package/dist/field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/field/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Label } from \"@radix-ui/react-label\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n  type ComponentPropsWithoutRef,\n  createContext,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useId,\n  useState,\n} from \"react\";\nimport {\n  type FieldValues,\n  type UseFormReturn,\n  useController,\n  useFormContext,\n} from \"react-hook-form\";\n\n/**\n * The structure behind every form field, with no styling of its own: an id\n * shared by label and control, the error and description ids the control is\n * described by, the field's validity, and — inside a `Form` — the\n * react-hook-form bindings (`value`, `onChange`, `onBlur`, `ref`) that keep\n * the control registered.\n *\n * Styled components compose these primitives with their own classes\n * (`TextInput` and friends do), and a screen that needs a control the\n * library does not ship — a select, a code entry, a toggle — composes them\n * the same way. Everything here is a plain element or a Radix `Slot`, so the\n * styling decisions stay with whoever renders the field.\n *\n * Outside a `Form` the primitives still wire label, control and messages\n * together; the control just isn't registered anywhere and the error comes\n * from the `error` prop alone.\n */\n\nexport type FieldBindings = {\n  name: string;\n  value?: unknown;\n  onChange?: (event: unknown) => void;\n  onBlur?: () => void;\n  ref?: (instance: HTMLElement | null) => void;\n};\n\nexport type FieldContextValue = {\n  id: string;\n  name: string;\n  descriptionId: string;\n  messageId: string;\n  error: string | undefined;\n  invalid: boolean;\n  required: boolean;\n  disabled: boolean;\n  hasDescription: boolean;\n  setHasDescription: (present: boolean) => void;\n  bindings: FieldBindings;\n};\n\nconst FieldContext = createContext<FieldContextValue | null>(null);\n\n// biome-ignore lint/style/useComponentExportOnlyModules: the hook is the primitives' public API for custom compositions and belongs on the same subpath.\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext);\n\n  if (!context) {\n    throw new Error(\"Field primitives must be rendered inside FieldRoot\");\n  }\n\n  return context;\n}\n\nexport type FieldRootProps = ComponentPropsWithoutRef<\"div\"> & {\n  /** The form field this wires up — the key in the `Form`'s values. */\n  name: string;\n  /** A caller-supplied error. Outranks whatever the form's schema reports. */\n  error?: string;\n  required?: boolean;\n  disabled?: boolean;\n  /** Render the child element as the root instead of a `div`. */\n  asChild?: boolean;\n  children: ReactNode;\n};\n\ntype FieldShellProps = Omit<\n  FieldRootProps,\n  \"name\" | \"error\" | \"required\" | \"disabled\"\n> & {\n  value: Omit<FieldContextValue, \"hasDescription\" | \"setHasDescription\">;\n};\n\nfunction useFieldIds(id: string | undefined) {\n  const generated = useId();\n  const base = id ?? generated;\n\n  return {\n    id: base,\n    descriptionId: `${base}-description`,\n    messageId: `${base}-message`,\n  };\n}\n\nfunction FieldShell({\n  value,\n  asChild = false,\n  children,\n  ...rest\n}: FieldShellProps) {\n  const [hasDescription, setHasDescription] = useState(false);\n  const Component = asChild ? Slot : \"div\";\n\n  return (\n    <FieldContext.Provider\n      value={{ ...value, hasDescription, setHasDescription }}\n    >\n      <Component\n        {...rest}\n        data-invalid={value.invalid ? \"\" : undefined}\n        data-disabled={value.disabled ? \"\" : undefined}\n      >\n        {children}\n      </Component>\n    </FieldContext.Provider>\n  );\n}\n\nfunction ConnectedFieldRoot({\n  name,\n  error,\n  required = false,\n  disabled = false,\n  id,\n  ...rest\n}: FieldRootProps) {\n  const ids = useFieldIds(id);\n  const { field, fieldState } = useController({ name, disabled });\n  const shownError = error ?? fieldState.error?.message;\n\n  return (\n    <FieldShell\n      {...rest}\n      value={{\n        ...ids,\n        name,\n        error: shownError,\n        invalid: Boolean(shownError),\n        required,\n        disabled: Boolean(field.disabled ?? disabled),\n        bindings: {\n          name: field.name,\n          value: field.value ?? \"\",\n          onChange: field.onChange,\n          onBlur: field.onBlur,\n          ref: field.ref,\n        },\n      }}\n    />\n  );\n}\n\nfunction StandaloneFieldRoot({\n  name,\n  error,\n  required = false,\n  disabled = false,\n  id,\n  ...rest\n}: FieldRootProps) {\n  const ids = useFieldIds(id);\n\n  return (\n    <FieldShell\n      {...rest}\n      value={{\n        ...ids,\n        name,\n        error,\n        invalid: Boolean(error),\n        required,\n        disabled,\n        bindings: { name },\n      }}\n    />\n  );\n}\n\nexport function FieldRoot(props: FieldRootProps) {\n  const form = useFormContext() as UseFormReturn<FieldValues> | null;\n\n  return form ? (\n    <ConnectedFieldRoot {...props} />\n  ) : (\n    <StandaloneFieldRoot {...props} />\n  );\n}\n\nexport type FieldLabelProps = ComponentPropsWithoutRef<typeof Label>;\n\nexport function FieldLabel(props: FieldLabelProps) {\n  const { id } = useFieldContext();\n\n  return <Label {...props} htmlFor={id} />;\n}\n\nexport type FieldControlProps = ComponentPropsWithoutRef<typeof Slot>;\n\nfunction describedBy({\n  error,\n  messageId,\n  hasDescription,\n  descriptionId,\n}: Pick<\n  FieldContextValue,\n  \"error\" | \"messageId\" | \"hasDescription\" | \"descriptionId\"\n>): string | undefined {\n  if (error) {\n    return messageId;\n  }\n\n  return hasDescription ? descriptionId : undefined;\n}\n\n/**\n * Wires the field's id, name, validity and bindings onto whatever element it\n * wraps — an `<input>`, a `<select>`, a `<textarea>`, a custom control.\n * Handlers on the child still run; the bindings run after them.\n */\nexport function FieldControl(props: FieldControlProps) {\n  const context = useFieldContext();\n  const { id, invalid, required, disabled, bindings } = context;\n\n  // `disabled` is not on Slot's HTMLAttributes type, but it is what the\n  // wrapped control needs, so the bindings are spread untyped on purpose.\n  const controlProps: Record<string, unknown> = {\n    ...bindings,\n    id,\n    \"aria-invalid\": invalid || undefined,\n    \"aria-required\": required || undefined,\n    \"aria-describedby\": describedBy(context),\n    disabled: disabled || undefined,\n  };\n\n  return <Slot {...props} {...controlProps} />;\n}\n\nexport type FieldDescriptionProps = ComponentPropsWithoutRef<\"p\"> & {\n  asChild?: boolean;\n};\n\n/** Guidance under the control. Hidden while the field has an error. */\nexport function FieldDescription({\n  asChild = false,\n  ...props\n}: FieldDescriptionProps) {\n  const { descriptionId, error, setHasDescription } = useFieldContext();\n\n  useEffect(() => {\n    setHasDescription(true);\n\n    return () => setHasDescription(false);\n  }, [setHasDescription]);\n\n  if (error) {\n    return null;\n  }\n\n  const Component = asChild ? Slot : \"p\";\n\n  return <Component {...props} id={descriptionId} />;\n}\n\nexport type FieldMessageProps = ComponentPropsWithoutRef<\"p\"> & {\n  asChild?: boolean;\n};\n\n/**\n * The field's error, announced as an alert. Renders the error the field\n * currently holds; `children` is a fallback for a message the caller wants to\n * show in its place. Nothing renders while the field is valid.\n */\nexport function FieldMessage({\n  asChild = false,\n  children,\n  ...props\n}: FieldMessageProps) {\n  const { messageId, error } = useFieldContext();\n  const content = error ?? children;\n\n  if (!content) {\n    return null;\n  }\n\n  const Component = asChild ? Slot : \"p\";\n\n  return (\n    <Component {...props} id={messageId} role=\"alert\">\n      {content}\n    </Component>\n  );\n}\n"],"mappings":"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","names":[]}