@coopdigital/react 0.45.0 → 0.47.0

package/dist/components/Squircle/Squircle.js

@@ -2,13 +2,13 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { hasUserBg } from '../../utils/index.js';
 
-const Squircle = ({ children, className, size = "lg", ...props }) => {
+const Squircle = ({ children, className, ref, size = "lg", ...props }) => {
     const componentProps = {
         className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer-red", className),
         "data-size": size.length && size !== "lg" ? size : undefined,
         ...props,
     };
-    return (jsx("figure", { ...componentProps, children: jsx("figcaption", { children: children }) }));
+    return (jsx("figure", { ...componentProps, ref: ref, children: jsx("figcaption", { children: children }) }));
 };
 
 export { Squircle, Squircle as default };

package/dist/components/Tag/Tag.d.ts

@@ -1,16 +1,18 @@
-import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react";
+import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react";
 import React from "react";
 export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specify a custom element to override default `a` or `span`. */
-    as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
+    as?: React.FC<any> | ForwardRefExoticComponent<any> | string;
     /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
     children?: React.ReactNode;
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
     /** **(Optional)** Specify the URL that the Tag component will link to when clicked. */
     href?: string;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLElement>;
     /** **(Optional)** Specify the Tag size. */
     size?: "sm" | "md";
 }
-export declare const Tag: ({ as, children, className, href, size, ...props }: TagProps) => JSX.Element;
+export declare const Tag: ({ as, children, className, href, ref, size, ...props }: TagProps) => JSX.Element;
 export default Tag;

package/dist/components/Tag/Tag.js

@@ -2,18 +2,15 @@ import clsx from 'clsx';
 import React from 'react';
 import { hasUserBg } from '../../utils/index.js';
 
-const Tag = ({ as, children, className, href, size = "md", ...props }) => {
-    let element = href ? "a" : "span";
+const Tag = ({ as, children, className, href, ref, size = "md", ...props }) => {
+    const element = as !== null && as !== void 0 ? as : (href ? "a" : "span");
     const componentProps = {
         className: clsx("coop-tag", !hasUserBg(className) && "bg-tint-grey", className),
         "data-size": size.length && size !== "md" ? size : undefined,
         href,
         ...props,
     };
-    if (as) {
-        element = as;
-    }
-    return React.createElement(element, { ...componentProps }, children);
+    return React.createElement(element, { ...componentProps, ref }, children);
 };
 
 export { Tag, Tag as default };

package/dist/components/TextInput/TextInput.d.ts

@@ -1,4 +1,4 @@
-import type { InputHTMLAttributes, JSX } from "react";
+import type { InputHTMLAttributes, JSX, Ref } from "react";
 import { StandardSizes } from "../../../src/types";
 export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "size" | "type"> {
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
@@ -15,12 +15,14 @@ export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     placeholder?: string;
     /** **(Optional)** Specify the prefix. It can be any valid JSX or string. */
     prefix?: React.ReactNode;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLInputElement>;
     /** **(Optional)** Specify the TextInput size. */
     size?: StandardSizes;
     /** **(Optional)** Specify the suffix. It can be any valid JSX or string. */
     suffix?: React.ReactNode;
     /** **(Optional)** Specify the TextInput type. */
-    type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url";
+    type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url" | "date" | "datetime-local" | "week" | "month" | "time";
 }
-export declare const TextInput: ({ "aria-placeholder": ariaPlaceholder, className, disabled, error, id, name, placeholder, prefix, size, suffix, type, ...props }: TextInputProps) => JSX.Element;
+export declare const TextInput: ({ "aria-placeholder": ariaPlaceholder, className, disabled, error, id, name, placeholder, prefix, ref, size, suffix, type, ...props }: TextInputProps) => JSX.Element;
 export default TextInput;

package/dist/components/TextInput/TextInput.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useId } from '../../hooks/useId.js';
 
-const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, error = false, id, name, placeholder, prefix, size = "md", suffix, type = "text", ...props }) => {
+const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, error = false, id, name, placeholder, prefix, ref, size = "md", suffix, type = "text", ...props }) => {
     var _a;
     const uid = useId(id);
     const componentProps = {
@@ -18,7 +18,7 @@ const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, e
         ...props,
     };
     //const formItemProps = { "aria-disabled": disabled ? true : undefined }
-    return (jsxs("div", { className: "coop-text-input-wrapper", children: [prefix && jsx("span", { className: "coop-text-input--prefix", children: prefix }), jsx("input", { ...componentProps }), suffix && jsx("span", { className: "coop-text-input--suffix", children: suffix })] }));
+    return (jsxs("div", { className: "coop-text-input-wrapper", children: [prefix && jsx("span", { className: "coop-text-input--prefix", children: prefix }), jsx("input", { ...componentProps, ref: ref }), suffix && jsx("span", { className: "coop-text-input--suffix", children: suffix })] }));
 };
 
 export { TextInput, TextInput as default };

package/dist/components/Textarea/Textarea.d.ts

@@ -1,4 +1,4 @@
-import type { JSX, TextareaHTMLAttributes } from "react";
+import type { JSX, Ref, TextareaHTMLAttributes } from "react";
 import { StandardSizes } from "../../types";
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
@@ -26,10 +26,12 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
     name: string;
     /** **(Optional)** Specify the Textarea placeholder text. Do not use in place of a form label. */
     placeholder?: string;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLTextAreaElement>;
     /** Specify the number of rows (lines of text) in the Textarea. Defaults to `4`. */
     rows?: number;
     /** **(Optional)** Specify the Textarea size. */
     size?: StandardSizes;
 }
-export declare const Textarea: ({ "aria-placeholder": ariaPlaceholder, className, cols, counter, cutoff, disabled, error, id, maxLength, name, onChange: userOnChange, placeholder, rows, size, ...props }: TextareaProps) => JSX.Element;
+export declare const Textarea: ({ "aria-placeholder": ariaPlaceholder, className, cols, counter, cutoff, disabled, error, id, maxLength, name, onChange: userOnChange, placeholder, ref, rows, size, ...props }: TextareaProps) => JSX.Element;
 export default Textarea;

package/dist/components/Textarea/Textarea.js

@@ -8,10 +8,9 @@ const DEBOUNCE_DELAY = 750;
 const charCountMessage = (remaining) => {
     return `You have ${Math.abs(remaining).toLocaleString()} ${Math.abs(remaining) === 1 ? "character" : "characters"} ${remaining < 0 ? "too many" : "remaining"}`;
 };
-const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, counter = false, cutoff = false, disabled = false, error = false, id, maxLength, name, onChange: userOnChange = undefined, placeholder, rows = 4, size = "md", ...props }) => {
+const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, counter = false, cutoff = false, disabled = false, error = false, id, maxLength, name, onChange: userOnChange = undefined, placeholder, ref, rows = 4, size = "md", ...props }) => {
     var _a;
-    const internalId = useId();
-    id = id !== null && id !== void 0 ? id : internalId;
+    const uid = useId(id);
     const componentProps = {
         "aria-placeholder": (_a = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _a !== void 0 ? _a : undefined,
         className: clsx("coop-textarea", className),
@@ -19,7 +18,7 @@ const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, c
         "data-error": error !== null && error !== void 0 ? error : undefined,
         "data-size": size.length && size !== "md" ? size : undefined,
         disabled,
-        id,
+        id: uid,
         maxLength: cutoff ? maxLength : undefined,
         name,
         placeholder,
@@ -36,7 +35,7 @@ const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, c
     return (jsxs("div", { className: "coop-textarea-wrapper", children: [jsx("textarea", { ...componentProps, onChange: (e) => {
                     userOnChange === null || userOnChange === void 0 ? void 0 : userOnChange(e);
                     handleChange(e);
-                } }), showCounter && (jsxs(Fragment, { children: [jsx("small", { "aria-hidden": "true", className: "coop-textarea-counter", ...(remaining < 0 && { "data-error": true }), children: charCountMessage(remaining) }), jsx("span", { "aria-live": "polite", className: "sr-only", children: charCountMessage(debouncedRemaining) })] }))] }));
+                }, ref: ref }), showCounter && (jsxs(Fragment, { children: [jsx("small", { "aria-hidden": "true", className: "coop-textarea-counter", ...(remaining < 0 && { "data-error": true }), children: charCountMessage(remaining) }), jsx("span", { "aria-live": "polite", className: "sr-only", children: charCountMessage(debouncedRemaining) })] }))] }));
 };
 
 export { Textarea, Textarea as default };

package/dist/{utils/slots.d.ts → hooks/useSlots.d.ts}

@@ -2,7 +2,7 @@ import React from "react";
 type Slots<T> = Record<keyof T, React.ReactNode>;
 export declare function isKey<T extends object>(x: T, k: PropertyKey): k is keyof T;
 export declare function getSlotName(node: React.ReactNode): string | false;
-export declare function getSlots<T>(componentSlots: Slots<T>, children: React.ReactNode, options?: {
+export declare function useSlots<T>(componentSlots: Slots<T>, children: React.ReactNode, options?: {
     collect?: string[];
 }): Slots<T>;
 export {};

package/dist/{utils/slots.js → hooks/useSlots.js}

@@ -8,7 +8,7 @@ function getSlotName(node) {
         ? node.type.name
         : false;
 }
-function getSlots(componentSlots, children, options) {
+function useSlots(componentSlots, children, options) {
     return React.Children.toArray(children).reduce((slots, child) => {
         var _a;
         const slotName = getSlotName(child);
@@ -27,4 +27,4 @@ function getSlots(componentSlots, children, options) {
     }, { ...componentSlots });
 }
 
-export { getSlotName, getSlots, isKey };
+export { getSlotName, isKey, useSlots };

package/dist/index.d.ts

@@ -9,9 +9,9 @@ export * from "./components/Fieldset";
 export * from "./components/Flourish";
 export * from "./components/Image";
 export * from "./components/Pill";
-export * from "./components/RadioButton";
+export * from "./components/Radio";
 export * from "./components/RootSVG";
-export * from "./components/SearchBox";
+export * from "./components/Searchbox";
 export * from "./components/Signpost";
 export * from "./components/SkipNav";
 export * from "./components/Squircle";

package/dist/index.js

@@ -9,9 +9,9 @@ export { Fieldset, FieldsetFields } from './components/Fieldset/Fieldset.js';
 export { Flourish } from './components/Flourish/Flourish.js';
 export { Image } from './components/Image/Image.js';
 export { Pill } from './components/Pill/Pill.js';
-export { RadioButton } from './components/RadioButton/RadioButton.js';
+export { Radio } from './components/Radio/Radio.js';
 export { RootSVG } from './components/RootSVG/RootSVG.js';
-export { SearchBox } from './components/SearchBox/SearchBox.js';
+export { Searchbox } from './components/Searchbox/Searchbox.js';
 export { Signpost } from './components/Signpost/Signpost.js';
 export { SkipNav } from './components/SkipNav/SkipNav.js';
 export { Squircle } from './components/Squircle/Squircle.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.45.0",
+  "version": "0.47.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -78,8 +78,8 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.39.0",
+    "@coopdigital/styles": "^0.40.0",
     "clsx": "^2.1.1"
   },
-  "gitHead": "113b5fc44feee8b4e899c75c303f1ed26f9f2629"
+  "gitHead": "f28e578e8a74f005d372677975f19a707ea643ca"
 }

package/src/components/AlertBanner/AlertBanner.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, JSX, ReactNode } from "react"
+import type { HTMLAttributes, JSX, ReactNode, Ref } from "react"
 
 import clsx from "clsx"
 
@@ -9,6 +9,8 @@ export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
   className?: string
   /** Specify the main title of the banner, rendered as a `h2`. */
   heading: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
   /** **(Optional)** Specify the AlertBanner variant. */
   variant?: "black" | "default"
 }
@@ -17,6 +19,7 @@ export const AlertBanner = ({
   children,
   className,
   heading,
+  ref,
   variant = "default",
   ...props
 }: AlertBannerProps): JSX.Element => {
@@ -25,8 +28,9 @@ export const AlertBanner = ({
     "data-variant": variant,
     ...props,
   }
+
   return (
-    <aside {...componentProps}>
+    <aside {...componentProps} ref={ref}>
       <div className="coop-alert-banner--inner">
         <h2 id="coop-alert-banner--headline">{heading}</h2>
         {children}

package/src/components/Author/Author.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, JSX } from "react"
+import type { HTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
@@ -15,6 +15,8 @@ export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
   datePrefix?: string
   /** **(Optional)** Specify properties of the Author Image. */
   image?: ImageProps
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
 }
 
 export const Author = ({
@@ -26,6 +28,7 @@ export const Author = ({
     alt: "",
     src: "https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/coop-logo-inverted.svg",
   },
+  ref,
   ...props
 }: AuthorProps): JSX.Element => {
   const imageProps: ImageProps = {
@@ -38,7 +41,7 @@ export const Author = ({
     ...props,
   }
   return (
-    <div {...componentProps}>
+    <div {...componentProps} ref={ref}>
       {image && <Image {...imageProps} />}
       <div className="coop-author--content">
         <span>

package/src/components/Button/Button.tsx

@@ -1,11 +1,6 @@
 "use client"
 
-import type {
-  AnchorHTMLAttributes,
-  ButtonHTMLAttributes,
-  ForwardRefExoticComponent,
-  JSX,
-} from "react"
+import type { ButtonHTMLAttributes, ForwardRefExoticComponent, JSX, Ref } from "react"
 
 import clsx from "clsx"
 import React, { useCallback, useState } from "react"
@@ -15,7 +10,7 @@ import { LoadingIcon } from "../Icon"
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `button`. */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
+  as?: React.FC<any> | ForwardRefExoticComponent<any> | string
   /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
   children?: React.ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
@@ -31,7 +26,9 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specify text to show when the Button is in a loading state. */
   loadingText?: string
   /** **(Optional)** Callback to run when the button is pressed. If this is an async function, it will be awaited and the button will be in a pending state until the promise is resolved. */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void
+  onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLElement>
   /** **(Optional)** Specify the Button size. */
   size?: "sm" | "md" | "lg"
   /** **(Optional)** Specify the Button variant. */
@@ -61,14 +58,12 @@ export const Button = ({
   isLoading = false,
   loadingText = "Loading",
   onClick,
+  ref,
   size = "md",
   variant = "green",
   ...props
 }: ButtonProps): JSX.Element => {
-  let element: ButtonProps["as"] = href ? "a" : "button"
-  if (as) {
-    element = as
-  }
+  const element: ButtonProps["as"] = as ?? (href ? "a" : "button")
 
   const [isPending, setIsPending] = useState(false)
 
@@ -79,7 +74,7 @@ export const Button = ({
       setIsPending(true)
 
       try {
-        await Promise.resolve(onClick(event as React.MouseEvent<HTMLButtonElement>))
+        await Promise.resolve(onClick(event))
       } finally {
         setIsPending(false)
       }
@@ -96,7 +91,7 @@ export const Button = ({
     "data-variant": variant !== "text" ? variant : undefined,
     "data-width": isFullWidth ? "full" : undefined,
     href,
-    onClick: handleClick,
+    onClick: onClick ? handleClick : undefined,
     ...props,
   }
 
@@ -110,6 +105,6 @@ export const Button = ({
       children
     )
 
-  return React.createElement(element, { ...componentProps }, finalChildren)
+  return React.createElement(element, { ...componentProps, ref }, finalChildren)
 }
 export default Button

package/src/components/Card/Card.tsx

@@ -1,9 +1,9 @@
-import type { ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
+import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 import React from "react"
 
-import { getSlots } from "../../utils/slots"
+import { useSlots } from "../../hooks/useSlots"
 import { ChevronRightIcon } from "../Icon/ChevronRightIcon"
 import { Image, ImageProps } from "../Image"
 
@@ -24,6 +24,8 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   imagePosition?: "left" | "right"
   /** **(Optional)** Specify the orientation of the Card. */
   orientation?: "vertical" | "horizontal"
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
 }
 
 interface CardLabelProps extends HTMLAttributes<HTMLSpanElement> {
@@ -87,12 +89,12 @@ export const Card = ({
   hrefAs,
   imagePosition = "left",
   orientation = "vertical",
+  ref,
   ...props
 }: CardProps): JSX.Element => {
   const { element: linkElement, props: linkProps } = getCardLinkElement(hrefAs, href)
 
-  const slots = getSlots(componentSlots, children)
-
+  const slots = { ...useSlots(componentSlots, children) }
   const innerProps = { className: "coop-card--inner" }
   const hasLinkWrapper = href && !slots.CardHeading
 
@@ -108,7 +110,7 @@ export const Card = ({
   }
 
   return (
-    <article {...componentProps}>
+    <article {...componentProps} ref={ref}>
       {slots.CardImage}
       {slots.CardBadge}
       {React.createElement(

package/src/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import type { InputHTMLAttributes, JSX } from "react"
+import type { InputHTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
@@ -17,6 +17,8 @@ export interface CheckboxProps
   id?: string
   /** Specify the Checkbox name. */
   name: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLInputElement>
   /** **(Optional)** Specify the Checkbox size. */
   size?: StandardSizes
 }
@@ -27,6 +29,7 @@ export const Checkbox = ({
   error = false,
   id,
   name,
+  ref,
   size = "md",
   ...props
 }: CheckboxProps): JSX.Element => {
@@ -41,7 +44,8 @@ export const Checkbox = ({
     type: "checkbox",
     ...props,
   }
-  return <input {...componentProps} />
+
+  return <input {...componentProps} ref={ref} />
 }
 
 export default Checkbox

package/src/components/Expandable/Expandable.tsx

@@ -1,9 +1,9 @@
-import type { DetailsHTMLAttributes, HTMLAttributes, JSX } from "react"
+import type { DetailsHTMLAttributes, HTMLAttributes, JSX, Ref } from "react"
 
 import { clsx } from "clsx"
 
+import { useSlots } from "../../hooks/useSlots"
 import { bgClassToColor, hasUserBg } from "../../utils"
-import { getSlots } from "../../utils/slots"
 import { ChevronDownIcon } from "../Icon"
 
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
@@ -11,6 +11,8 @@ export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElemen
   children: React.ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDetailsElement>
 }
 
 interface ExpandableSummaryProps extends HTMLAttributes<HTMLElement> {
@@ -25,8 +27,13 @@ const componentSlots = {
   ExpandableSummary: null,
 }
 
-export const Expandable = ({ children, className, ...props }: ExpandableProps): JSX.Element => {
-  const slots = getSlots(componentSlots, children)
+export const Expandable = ({
+  children,
+  className,
+  ref,
+  ...props
+}: ExpandableProps): JSX.Element => {
+  const slots = useSlots(componentSlots, children)
 
   const componentProps = {
     className: clsx("coop-expandable", !hasUserBg(className) && "bg-tint-grey", className),
@@ -38,7 +45,7 @@ export const Expandable = ({ children, className, ...props }: ExpandableProps):
   }
 
   return (
-    <details {...componentProps}>
+    <details {...componentProps} ref={ref}>
       {slots.ExpandableSummary}
       <div className="coop-expandable--content">{slots.Children}</div>
     </details>

package/src/components/Field/Field.tsx

@@ -1,10 +1,10 @@
-import type { HTMLAttributes, HTMLProps, JSX } from "react"
+import type { HTMLAttributes, HTMLProps, JSX, Ref } from "react"
 
 import clsx from "clsx"
 import React from "react"
 
 import { useId } from "../../hooks/useId"
-import { getSlots } from "../../utils/slots"
+import { useSlots } from "../../hooks/useSlots"
 import { Error as BaseError, type ErrorProps } from "../FieldMarkers/Error"
 import { Hint as BaseHint, type HintProps } from "../FieldMarkers/Hint"
 import { Label as BaseLabel, type LabelProps } from "../FieldMarkers/Label"
@@ -16,13 +16,13 @@ const componentSlots = {
   FieldError: null,
   FieldHint: null,
   FieldLabel: null,
-  RadioButton: null,
+  Radio: null,
   Textarea: null,
   TextInput: null,
 }
 
 const standardFields = ["Children", "FieldError", "FieldHint", "FieldLabel"]
-const inlineFields = ["Checkbox", "RadioButton"]
+const inlineFields = ["Checkbox", "Radio"]
 
 interface FieldProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify whether the Field should render inside a box. */
@@ -37,6 +37,8 @@ interface FieldProps extends HTMLAttributes<HTMLDivElement> {
   error?: boolean
   /** **(Optional)** Specify whether the Field should show the left-hand error bar if it is in an error state. */
   hideErrorBar?: boolean
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
 }
 
 const Root = ({
@@ -45,19 +47,18 @@ const Root = ({
   className,
   error = false,
   hideErrorBar = false,
+  ref,
   ...props
 }: FieldProps) => {
-  const slots = getSlots(componentSlots, children)
+  const slots = { ...useSlots(componentSlots, children) }
   const slotsArray = Object.entries(slots)
 
-  const uid = useId()
-
   const isInlineControl = slotsArray.some((s) => s[1] !== null && inlineFields.includes(s[0]))
   const hasFieldMarkers = !!(slots.FieldLabel ?? slots.FieldError ?? slots.FieldHint)
   const [, control] =
     slotsArray.find((s) => (!standardFields.includes(s[0]) && s[1] !== null ? s : null)) ?? []
 
-  let controlId = uid
+  let controlId = useId()
   let controlDisabled = false
 
   if (control) {
@@ -88,7 +89,7 @@ const Root = ({
   }
 
   return (
-    <div {...componentProps}>
+    <div {...componentProps} ref={ref}>
       {!isInlineControl && hasFieldMarkers && (
         <div className="coop-field-markers">
           {slots.FieldLabel}

package/src/components/FieldMarkers/Error.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, JSX, ReactNode } from "react"
+import type { HTMLAttributes, JSX, ReactNode, Ref } from "react"
 
 import clsx from "clsx"
 
@@ -7,14 +7,20 @@ export interface ErrorProps extends HTMLAttributes<HTMLSpanElement> {
   children?: string | ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLSpanElement>
 }
 
-export const Error = ({ children, className, ...props }: ErrorProps): JSX.Element => {
+export const Error = ({ children, className, ref, ...props }: ErrorProps): JSX.Element => {
   const componentProps = {
     className: clsx("coop-field-error ", className),
     ...props,
   }
-  return <span {...componentProps}>{children}</span>
+  return (
+    <span {...componentProps} ref={ref}>
+      {children}
+    </span>
+  )
 }
 
 export default Error

package/src/components/FieldMarkers/Hint.tsx

@@ -1,21 +1,27 @@
-import type { HTMLAttributes, JSX, ReactNode } from "react"
+import type { HTMLAttributes, JSX, ReactNode, Ref } from "react"
 
 import clsx from "clsx"
 
-export interface HintProps extends HTMLAttributes<HTMLParagraphElement> {
+export interface HintProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Hint text for the form element. Accepts any valid JSX or string. */
   children?: string | ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
 }
 
-export const Hint = ({ children, className, ...props }: HintProps): JSX.Element | null => {
+export const Hint = ({ children, className, ref, ...props }: HintProps): JSX.Element | null => {
   const componentProps = {
     className: clsx("coop-field-hint ", className),
     ...props,
   }
 
-  return children ? <div {...componentProps}>{children}</div> : null
+  return (
+    <div {...componentProps} ref={ref}>
+      {children}
+    </div>
+  )
 }
 
 export default Hint

package/src/components/FieldMarkers/Label.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import { LabelHTMLAttributes } from "react"
+import { LabelHTMLAttributes, Ref } from "react"
 
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
   /** **(Optional)** Main label for the form element. Accepts any valid JSX or string. */
@@ -8,11 +8,17 @@ export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
   className?: string
   /** **(Optional)** Specify whether the label is visible for humans or only for screen readers. */
   isVisible?: boolean
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLLabelElement>
 }
 
-export const Label = ({ children, className, isVisible = true, ...props }: LabelProps) => {
+export const Label = ({ children, className, isVisible = true, ref, ...props }: LabelProps) => {
+  const componentProps = {
+    className: clsx("coop-field-label", !isVisible && "sr-only", className),
+    ...props,
+  }
   return (
-    <label {...props} className={clsx("coop-field-label", !isVisible && "sr-only", className)}>
+    <label {...componentProps} ref={ref}>
       <span>{children}</span>
     </label>
   )