@coopdigital/react 0.45.0 → 0.47.0

package/src/components/Icon/SearchIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const SearchIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const SearchIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "search",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
       <path
         d="M13.25 25.49a12.25 12.25 0 1 1 12.24-12.24 12.25 12.25 0 0 1-12.24 12.24m0-22.61a10.37 10.37 0 1 0 10.36 10.37A10.38 10.38 0 0 0 13.25 2.88"
         fill={fill ?? "currentColor"}

package/src/components/Icon/SettingsIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const SettingsIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const SettingsIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "settings",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
       <path
         d="M16 2a14 14 0 0 1 2.13.16v3.57l1.34.47a10.2 10.2 0 0 1 3.27 1.89l1.08.91 1.23-.71 1.86-1.08a14 14 0 0 1 2.14 3.69L27.18 12l-1.18.7.26 1.39a10.6 10.6 0 0 1 0 3.8L26 19.28l1.23.71 1.88 1.09a14.2 14.2 0 0 1-2.14 3.69l-1.86-1.08-1.28-.69-1.07.92a10.6 10.6 0 0 1-3.3 1.9l-1.33.47v3.57A14 14 0 0 1 16 30a14 14 0 0 1-2.13-.16v-3.57l-1.34-.47a10.2 10.2 0 0 1-3.27-1.9L8.18 23 7 23.69l-1.91 1.08A14.1 14.1 0 0 1 3 21.08L4.82 20l1.23-.71-.26-1.39a10.6 10.6 0 0 1 0-3.8l.26-1.39L4.82 12 3 10.92a14.5 14.5 0 0 1 2.08-3.69l1.86 1.08L8.16 9l1.08-.9a10.6 10.6 0 0 1 3.3-1.9l1.33-.47V2.16A14 14 0 0 1 16 2m0 21a7 7 0 1 0-7-7 7 7 0 0 0 7 7m0-23a16 16 0 0 0-3.53.39.76.76 0 0 0-.6.75v3.18a12.7 12.7 0 0 0-3.93 2.26L5.2 5a.75.75 0 0 0-.38-.1.77.77 0 0 0-.57.25 15.9 15.9 0 0 0-3.53 6.1.78.78 0 0 0 .35.91l2.75 1.59a12.3 12.3 0 0 0 0 4.52l-2.75 1.58a.79.79 0 0 0-.35.9 16 16 0 0 0 3.53 6.11.8.8 0 0 0 .57.25.7.7 0 0 0 .38-.11L8 25.42a12.3 12.3 0 0 0 3.92 2.26v3.18a.77.77 0 0 0 .61.75A16.2 16.2 0 0 0 16 32a16 16 0 0 0 3.53-.39.76.76 0 0 0 .6-.75v-3.18a12.5 12.5 0 0 0 3.92-2.26L26.8 27a.79.79 0 0 0 1-.15 16 16 0 0 0 3.53-6.11.8.8 0 0 0-.36-.9l-2.75-1.59a12.8 12.8 0 0 0 0-4.53l2.75-1.59a.78.78 0 0 0 .35-.9 16.1 16.1 0 0 0-3.53-6.1.76.76 0 0 0-.57-.26.73.73 0 0 0-.42.13l-2.75 1.57a12.3 12.3 0 0 0-3.92-2.26V1.14a.77.77 0 0 0-.61-.75A16.2 16.2 0 0 0 16 0m0 21a5 5 0 1 1 5-5 5 5 0 0 1-5 5"
         fill={fill ?? "currentColor"}

package/src/components/Icon/TickAltIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const TickAltIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const TickAltIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "tick-alt",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
       <path
         d="M12.7 22a1 1 0 0 1-.71-.29L8.3 18a1 1 0 0 1 0-1.42 1 1 0 0 1 1.41 0l3 3 9.41-9.38a1 1 0 0 1 1.42 0 1 1 0 0 1 0 1.41L13.4 21.69a1 1 0 0 1-.7.31"
         fill={fill ?? "currentColor"}

package/src/components/Icon/TickIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const TickIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const TickIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "tick",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
       <path
         d="M10.41 26a1 1 0 0 1-.71-.3l-6.42-6.59a1 1 0 0 1 1.44-1.39l5.69 5.85L27.28 6.3a1 1 0 1 1 1.44 1.4l-17.59 18a1 1 0 0 1-.72.3"
         fill={fill ?? "currentColor"}

package/src/components/Icon/VanIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const VanIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const VanIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "van",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
       <path
         d="M31.05 3H9.8a1 1 0 0 0-1 1v.2H3.06a1 1 0 0 0-1 .86L.89 12.64a1 1 0 0 0-.89 1v10a1 1 0 0 0 1 1h3a5 5 0 0 0 9.9 0H18a5 5 0 0 0 9.89 0h3.21a1 1 0 0 0 .72-.3 1 1 0 0 0 .18-.72V4a1 1 0 0 0-.95-1M3.91 6.24H8.8v6.38H2.93ZM8.92 27A3 3 0 0 1 6 24.71a2.9 2.9 0 0 1-.12-.83 3.1 3.1 0 0 1 .25-1.22 3 3 0 0 1 5.53 0 3.3 3.3 0 0 1 .24 1.22 3.3 3.3 0 0 1-.11.83A3 3 0 0 1 8.92 27M23 27a3 3 0 0 1-2.89-2.24 2.9 2.9 0 0 1-.12-.83 3.1 3.1 0 0 1 .25-1.22 3 3 0 0 1 5.53 0 3.3 3.3 0 0 1 .23 1.17 3.3 3.3 0 0 1-.11.83A3 3 0 0 1 23 27m4.87-4.29a5 5 0 0 0-9.74 0H13.8a5 5 0 0 0-9.75 0H2v-8h7.8a1 1 0 0 0 1-1V5.05H30v17.61Z"
         fill={fill ?? "currentColor"}

package/src/components/Icon/WarningIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const WarningIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const WarningIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "warning",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
       <path
         d="M2.35 28.08 16.06 4.46l13.71 23.62Zm29.32-.7L17.56 3.07A1.73 1.73 0 0 0 16.06 2a1.94 1.94 0 0 0-1.5 1.1L.35 27.38C-.45 28.77.15 30 1.85 30h28.32a1.6 1.6 0 0 0 1.5-2.62"
         fill={fill ?? "currentColor"}

package/src/components/Icon/WriteIcon.tsx

@@ -1,24 +1,27 @@
 import clsx from "clsx"
-import { type SVGProps, useId } from "react"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string
 }
 
-export const WriteIcon = ({ alt, className, fill, ...props }: IconProps) => {
-  const id = useId()
+export const WriteIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
   const componentProps = {
-    "aria-labelledby": alt ? id : undefined,
+    "aria-labelledby": alt ? uid + "-title" : undefined,
     className: clsx("coop-icon", className),
     "data-icon": "write",
     fill: fill ?? "none",
+    id: uid,
     role: alt ? "img" : undefined,
     viewBox: "0 0 32 32",
     ...props,
   }
   return (
-    <svg {...componentProps}>
-      {alt ? <title id={id}>{alt}</title> : null}
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "-title"}>{alt}</title> : null}
       <path
         d="M19.67 10.13 17.9 11.9H7a1 1 0 0 1 0-2h12a1 1 0 0 1 .67.23M14.9 14.9l-2 2H7a1 1 0 0 1 0-2ZM20 15.9a1 1 0 0 1-1 1h-1.87l2-2a1 1 0 0 1 .82.59.85.85 0 0 1 .05.41M19 21.9H7a1 1 0 0 1 0-2h12a1 1 0 1 1 0 2"
         fill={fill ?? "currentColor"}

package/src/components/Image/Image.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, JSX } from "react"
+import type { HTMLAttributes, JSX, Ref } from "react"
 
 export interface ImageProps extends HTMLAttributes<HTMLImageElement> {
   /** Specify text to describe the image. Refer to Experience Library guidelines on writing good alt text. */
@@ -7,6 +7,8 @@ export interface ImageProps extends HTMLAttributes<HTMLImageElement> {
   crop?: "square" | "wide" | "none"
   /** **(Optional)** Specify the height of the image. */
   height?: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLImageElement>
   /** Specify the Image source URL. */
   src: string
   /** **(Optional)** Specify the width of the image. */
@@ -38,6 +40,7 @@ export const Image = ({
   alt,
   crop,
   height,
+  ref,
   src,
   width = "640",
   ...props
@@ -56,7 +59,7 @@ export const Image = ({
 
   return (
     <picture>
-      <img alt={alt} loading="lazy" src={params.src} {...dimensions} {...props} />
+      <img alt={alt} loading="lazy" src={params.src} {...dimensions} {...props} ref={ref} />
     </picture>
   )
 }

package/src/components/Pill/Pill.tsx

@@ -1,11 +1,11 @@
-import type { ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
+import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 import React from "react"
 import { StandardSizes } from "src/types"
 
+import { useSlots } from "../../hooks/useSlots"
 import { hasUserBg } from "../../utils"
-import { getSlots } from "../../utils/slots"
 
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `span`. */
@@ -17,6 +17,8 @@ export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
   className?: string
   /** **(Optional)** Specify the URL that the Pill component will link to when clicked. */
   href?: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLElement>
   /** **(Optional)** Specify the Pill size. */
   size?: StandardSizes
 }
@@ -38,16 +40,13 @@ export const Pill = ({
   children,
   className,
   href,
+  ref,
   size = "md",
   ...props
 }: PillProps): JSX.Element => {
-  let element: PillProps["as"] = href ? "a" : "span"
+  const element: PillProps["as"] = as ?? (href ? "a" : "span")
 
-  const slots = getSlots(componentSlots, children)
-
-  if (as) {
-    element = as
-  }
+  const slots = useSlots(componentSlots, children)
 
   const componentProps = {
     className: clsx("coop-pill", !hasUserBg(className) && "bg-tint-grey", className),
@@ -56,7 +55,9 @@ export const Pill = ({
     ...props,
   }
 
-  return React.createElement(element, { ...componentProps }, slots.PillBadge, slots.Children)
+  // https://github.com/facebook/react/issues/34775
+  // eslint-disable-next-line react-hooks/refs
+  return React.createElement(element, { ...componentProps, ref }, slots.PillBadge, slots.Children)
 }
 
 const PillBadge = ({ children, className }: PillBadgeProps) => {

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,50 @@
+import clsx from "clsx"
+import { type InputHTMLAttributes, type JSX, Ref } from "react"
+
+import { useId } from "../../hooks/useId"
+import { StandardSizes } from "../../types"
+
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify whether the Radio should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility.  */
+  disabled?: boolean
+  /** **(Optional)** Specify the Radio error state. */
+  error?: boolean
+  /** **(Optional)** Specify the Radio id. Will be auto-generated if not set. */
+  id?: string
+  /** Specify the Radio name. */
+  name: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLInputElement>
+  /** **(Optional)** Specify the Radio size. */
+  size?: StandardSizes
+}
+
+export const Radio = ({
+  className,
+  disabled,
+  error = false,
+  id,
+  name,
+  ref,
+  size = "md",
+  ...props
+}: RadioProps): JSX.Element => {
+  const uid = useId(id)
+
+  const componentProps = {
+    className: clsx("coop-radio", className),
+    "data-error": error || undefined,
+    "data-size": size.length && size !== "md" ? size : undefined,
+    disabled,
+    id: uid,
+    name,
+    type: "radio",
+    ...props,
+  }
+  //const formItemProps = { "aria-disabled": disabled ? true : undefined }
+  return <input {...componentProps} ref={ref} />
+}
+
+export default Radio

package/src/components/Radio/index.ts

@@ -0,0 +1,5 @@
+import Radio from "./Radio"
+
+export default Radio
+export { Radio }
+export * from "./Radio"

package/src/components/{SearchBox/SearchBox.tsx → Searchbox/Searchbox.tsx}

@@ -1,17 +1,18 @@
 "use client"
 
-import type { InputHTMLAttributes, JSX } from "react"
+import type { InputHTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
-import React, { useCallback, useId, useState } from "react"
+import React, { useCallback, useState } from "react"
 
-import { StandardSizes } from "../../../src/types"
+import { useId } from "../../hooks/useId"
+import { StandardSizes } from "../../types"
 import { Button, type ButtonProps } from "../Button"
 import { Label as FieldLabel } from "../FieldMarkers/Label"
 import { SearchIcon } from "../Icon"
 import TextInput, { TextInputProps } from "../TextInput"
 
-export interface SearchBoxProps
+export interface SearchboxProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
   /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
   action?: string
@@ -27,13 +28,15 @@ export interface SearchBoxProps
   labelVisible?: boolean
   /** **(Optional)** Specify the TextInput name, also used as the URL search parameter. Defaults to `query`. */
   name?: string
-  /** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the SearchBox will be in a pending state until the promise is resolved. */
+  /** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the Searchbox will be in a pending state until the promise is resolved. */
   onSubmit?: React.FormEventHandler<HTMLElement> | undefined
   /** **(Optional)** Specify the TextInput placeholder text Do not use in place of a form label. */
   placeholder?: string
-  /** **(Optional)** Specify the SearchBox size. */
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLFormElement>
+  /** **(Optional)** Specify the Searchbox size. */
   size?: StandardSizes
-  /** **(Optional)** Specify the SearchBox variant. */
+  /** **(Optional)** Specify the Searchbox variant. */
   variant?:
     | "green"
     | "blue"
@@ -45,12 +48,12 @@ export interface SearchBoxProps
     | "grey-ghost"
 }
 
-const defaultButtonProps: SearchBoxProps["button"] = {
+const defaultButtonProps: SearchboxProps["button"] = {
   label: React.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
   loadingText: "",
 }
 
-export const SearchBox = ({
+export const Searchbox = ({
   action,
   "aria-placeholder": ariaPlaceholder,
   autoCapitalize = "off",
@@ -64,14 +67,13 @@ export const SearchBox = ({
   name = "query",
   onSubmit,
   placeholder,
+  ref,
   size = "md",
   variant = "green",
   ...props
-}: SearchBoxProps): JSX.Element => {
+}: SearchboxProps): JSX.Element => {
   const [isPending, setIsPending] = useState(false)
-  const internalId = useId()
-
-  id = id ?? internalId
+  const uid = useId(id)
 
   const handleSubmit = useCallback(
     async (event: React.FormEvent<HTMLFormElement>) => {
@@ -92,46 +94,47 @@ export const SearchBox = ({
 
   const formProps = {
     action: action ?? undefined,
-    className: clsx("coop-search-box", className),
+    className: clsx("coop-searchbox", className),
     "data-size": size && size !== "md" ? size : undefined,
     "data-variant": variant.length && variant !== "green" ? variant : undefined,
+    id: uid,
     onSubmit: onSubmit ? handleSubmit : undefined,
   }
 
-  const buttonProps = {
+  const buttonProps: ButtonProps = {
     className: button?.className,
     isLoading: isPending,
     loadingText: button?.loadingText ?? "",
-    size: size as keyof ButtonProps["size"],
-    variant: variant as keyof ButtonProps["variant"],
+    size,
+    variant,
   }
 
-  const inputProps = {
+  const inputProps: TextInputProps = {
     "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
     autoCapitalize,
     autoComplete,
-    id,
+    id: uid + "--input",
     name,
     placeholder,
-    size: size as keyof TextInputProps["size"],
-    type: "search" as keyof TextInputProps["type"],
+    size,
+    type: "search",
     ...props,
   }
 
+  const labelProps = {
+    htmlFor: uid + "--input",
+    isVisible: labelVisible,
+  }
+
   return (
-    <form {...formProps}>
-      {label && (
-        <FieldLabel htmlFor={id} isVisible={labelVisible}>
-          {label}
-        </FieldLabel>
-      )}
-      <div className="coop-search-box--inner">
+    <form {...formProps} ref={ref}>
+      {label && <FieldLabel {...labelProps}>{label}</FieldLabel>}
+      <div className="coop-searchbox--inner">
         <TextInput {...inputProps} />
-
         <Button {...buttonProps}>{button.label}</Button>
       </div>
     </form>
   )
 }
 
-export default SearchBox
+export default Searchbox

package/src/components/Searchbox/index.ts

@@ -0,0 +1,5 @@
+import Searchbox from "./Searchbox"
+
+export default Searchbox
+export { Searchbox }
+export * from "./Searchbox"

package/src/components/Signpost/Signpost.tsx

@@ -1,4 +1,4 @@
-import type { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
+import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 import React from "react"
@@ -9,7 +9,7 @@ import { Image, ImageProps } from "../Image"
 export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify a custom element to override default `a`. */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
+  as?: React.FC<any> | ForwardRefExoticComponent<any> | string
   /** 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. */
@@ -17,9 +17,11 @@ export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify the level of the Signpost heading. */
   headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6"
   /** Specify the URL that the Signpost component will link to when clicked. */
-  href: string
+  href?: string
   /** **(Optional)** Specify properties of the Signpost Image. */
   image?: ImageProps
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
 }
 
 export const Signpost = ({
@@ -29,12 +31,10 @@ export const Signpost = ({
   headingLevel = "h3",
   href,
   image,
+  ref,
   ...props
 }: SignpostProps): JSX.Element => {
-  let element: SignpostProps["as"] = "a"
-  if (as) {
-    element = as
-  }
+  const element: SignpostProps["as"] = as ?? "a"
 
   const componentProps = {
     className: clsx("coop-signpost", className),
@@ -42,7 +42,7 @@ export const Signpost = ({
   }
 
   return (
-    <div {...componentProps}>
+    <div {...componentProps} ref={ref}>
       {image && <Image crop="wide" {...image} />}
       {React.createElement(
         element,

package/src/components/SkipNav/SkipNav.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 SkipNavProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify links to show in the SkipNav.
    * Each item needs a `href` and `label`. Defaults to a single link anchored to `#main`. */
   links?: SkipNavLink[]
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
 }
 
 const defaultLinks = [{ href: "#main", label: "Skip to main content" }]
@@ -23,6 +25,7 @@ export const SkipNav = ({
   className,
   isVisible = false,
   links = defaultLinks,
+  ref,
   ...props
 }: SkipNavProps): JSX.Element => {
   const componentProps = {
@@ -31,7 +34,7 @@ export const SkipNav = ({
   }
   const navLinks = links.length > 0 ? links : defaultLinks
   return (
-    <nav {...componentProps}>
+    <nav {...componentProps} ref={ref}>
       <ul>
         {navLinks.map((link) => {
           const linkProps = {

package/src/components/Squircle/Squircle.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, JSX } from "react"
+import type { HTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
@@ -8,6 +8,8 @@ export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
   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<HTMLDivElement>
   /** **(Optional)** Specify the Squircle size. */
   size?: "sm" | "md" | "lg"
 }
@@ -15,6 +17,7 @@ export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
 export const Squircle = ({
   children,
   className,
+  ref,
   size = "lg",
   ...props
 }: SquircleProps): JSX.Element => {
@@ -25,7 +28,7 @@ export const Squircle = ({
   }
 
   return (
-    <figure {...componentProps}>
+    <figure {...componentProps} ref={ref}>
       <figcaption>{children}</figcaption>
     </figure>
   )