@coopdigital/react 0.46.0 → 0.48.0

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,4 +1,4 @@
-import type { ForwardRefExoticComponent, HTMLAttributes, JSX } from "react"
+import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 import React from "react"
@@ -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,17 +40,14 @@ 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 = useSlots(componentSlots, children)
 
-  if (as) {
-    element = as
-  }
-
   const componentProps = {
     className: clsx("coop-pill", !hasUserBg(className) && "bg-tint-grey", className),
     "data-size": size.length && size !== "md" ? size : undefined,
@@ -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

@@ -1,6 +1,8 @@
 import clsx from "clsx"
-import { type InputHTMLAttributes, type JSX, useId } from "react"
-import { StandardSizes } from "src/types"
+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. */
@@ -13,6 +15,8 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   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
 }
@@ -23,25 +27,24 @@ export const Radio = ({
   error = false,
   id,
   name,
+  ref,
   size = "md",
   ...props
 }: RadioProps): JSX.Element => {
-  const internalId = useId()
-
-  id = id ?? internalId
+  const uid = useId(id)
 
   const componentProps = {
-    className: clsx("coop-radio", className),
+    className: clsx("coop-radio", "coop-field-element", className),
     "data-error": error || undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     disabled,
-    id,
+    id: uid,
     name,
     type: "radio",
     ...props,
   }
   //const formItemProps = { "aria-disabled": disabled ? true : undefined }
-  return <input {...componentProps} />
+  return <input {...componentProps} ref={ref} />
 }
 
 export default Radio

package/src/components/Searchbox/Searchbox.tsx

@@ -1,18 +1,21 @@
 "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 { 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
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+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
   /** **(Optional)** Specify props to forward to the Button element. Use `label` to set Button text. */
@@ -31,6 +34,8 @@ export interface SearchboxProps
   onSubmit?: React.FormEventHandler<HTMLElement> | undefined
   /** **(Optional)** Specify the TextInput placeholder text Do not use in place of a form label. */
   placeholder?: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLFormElement>
   /** **(Optional)** Specify the Searchbox size. */
   size?: StandardSizes
   /** **(Optional)** Specify the Searchbox variant. */
@@ -64,14 +69,13 @@ export const Searchbox = ({
   name = "query",
   onSubmit,
   placeholder,
+  ref,
   size = "md",
   variant = "green",
   ...props
 }: 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>) => {
@@ -95,39 +99,40 @@ export const Searchbox = ({
     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>
-      )}
+    <form {...formProps} ref={ref}>
+      {label && <FieldLabel {...labelProps}>{label}</FieldLabel>}
       <div className="coop-searchbox--inner">
         <TextInput {...inputProps} />
-
         <Button {...buttonProps}>{button.label}</Button>
       </div>
     </form>

package/src/components/Select/Select.tsx

@@ -0,0 +1,97 @@
+import type {
+  JSX,
+  OptgroupHTMLAttributes,
+  OptionHTMLAttributes,
+  ReactNode,
+  Ref,
+  SelectHTMLAttributes,
+} from "react"
+
+import clsx from "clsx"
+
+import { StandardSizes } from "../../../src/types"
+import { useId } from "../../hooks/useId"
+
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+  /** **(Optional)** Options inside the Select. This should be a set of `Select.Option` or `Select.OptionGroup` components.  */
+  children?: ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify whether the Select should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+  disabled?: boolean
+  /** **(Optional)** Specify the Select error state. */
+  error?: boolean
+  /** **(Optional)** Specify the Select id. Will be auto-generated if not set. */
+  id?: string
+  /** Specify the Select name. */
+  name: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLSelectElement>
+  /** **(Optional)** Specify the Select size. */
+  size?: StandardSizes
+}
+
+interface SelectOptionGroupProps extends OptgroupHTMLAttributes<HTMLOptGroupElement> {
+  /** **(Optional)** Main content inside the Select option. It can be any valid JSX or string. */
+  children?: ReactNode
+  /** Specify the Select option group label. */
+  label: string
+}
+
+interface SelectOptionProps extends OptionHTMLAttributes<HTMLOptionElement> {
+  /** **(Optional)** Main content inside the Select option. It can be any valid JSX or string. */
+  children?: ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the Select option. */
+  className?: string
+  /** Value of Select option. */
+  value: string
+}
+
+export const Select = ({
+  children,
+  className,
+  disabled,
+  error,
+  id,
+  name,
+  ref,
+  size = "md",
+  ...props
+}: SelectProps): JSX.Element => {
+  const uid = useId(id)
+  const componentProps = {
+    className: clsx("coop-select", "coop-field-element", className),
+    "data-error": error ?? undefined,
+    "data-size": size.length && size !== "md" ? size : undefined,
+    disabled,
+    id: uid,
+    name,
+    ...props,
+  }
+
+  return (
+    <select {...componentProps} ref={ref}>
+      {children}
+    </select>
+  )
+}
+
+const SelectOptionGroup = ({ children, ...props }: SelectOptionGroupProps): JSX.Element => {
+  return <optgroup {...props}>{children}</optgroup>
+}
+
+const SelectOption = ({ children, className, ...props }: SelectOptionProps): JSX.Element => {
+  return (
+    <option className={clsx("coop-select--option", className)} {...props}>
+      {children}
+    </option>
+  )
+}
+
+SelectOptionGroup.displayName = "Select.OptionGroup"
+SelectOption.displayName = "Select.Option"
+
+Select.OptionGroup = SelectOptionGroup
+Select.Option = SelectOption
+
+export default Select

package/src/components/Select/index.ts

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

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>
   )